/*
99Lime.com HTML KickStart by Joshua Gatcke
kickstart-grids.css
DO NOT EDIT THIS FILE unless you know what you are doing.
*/
/*---------------------------------
GRID/COLUMNS
-----------------------------------
tinyfluidgrid.com
& girlfriendnyc.com
with changes by 99Lime
-----------------------------------*/
/*
& Columns : 12
& Gutter %: 20%
& MaxWidth: 1280px
*/
.grid{
max-width:1220px;
margin:0 auto;
padding:0 2em;
}
.grid.flex{
width:100%;
max-width:100%;
padding:0 2%;
padding:2em;
}
.row{
display:block;
overflow:hidden;
clear:both;
}
*[class*="col_"].alpha{margin-left:0;}
*[class*="col_"].omega{margin-right:0;}
.col_1 { width: 6.6666666666667%; }
.col_2 { width: 15%; }
.col_3 { width: 23.333333333333%; }
.col_4 { width: 31.666666666667%; }
.col_5 { width: 40%; }
.col_6 { width: 48.333333333333%; }
.col_7 { width: 56.666666666667%; }
.col_8 { width: 65%; }
.col_9 { width: 73.333333333333%; }
.col_10 { width: 81.666666666667%; }
.col_11 { width: 90%; }
.col_12 { width: 98.333333333333%; }
*[class*="col_"]{
margin-left: 0.83333333333333%;
margin-right: 0.83333333333333%;
margin-top:0.5em;
margin-bottom:0.5em;
float: left;
display: block;
}
.grid img{
max-width: 100%;
height:auto;
}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
* html .clearfix, *:first-child+html .clearfix{zoom:1}
/* Viewable Grids
To view your grids, add the class .visible to any grid container.
This will add a background color so you can see the layout of your grids.
*/
*[class*="col_"].visible{
background:#eee;
border:1px dotted #ccc;
}
/*---------------------------------
Responsive Grid Media Queries - 1280, 1024, 768, 480
1280-1024 - desktop (default grid)
1024-768 - tablet landscape
768-480 - tablet
480-less - phone landscape & smaller
-----------------------------------*/
@media all and (min-width: 1024px) and (max-width: 1280px) {
.grid *[class*="col_"]{}
.grid{max-width: 1024px;}
.show-desktop {display:block;}
.hide-desktop {display:none;}
.show-tablet {display:none;}
.hide-tablet {display:block;}
.show-phone {display:none;}
.hide-phone {display:block;}
}
@media all and (min-width: 768px) and (max-width: 1024px) {
.grid *[class*="col_"]{}
.grid{max-width: 768px;}
.show-desktop {display:none;}
.hide-desktop {display:block;}
.show-tablet {display:block;}
.hide-tablet {display:none;}
.show-phone {display:none;}
.hide-phone {display:block;}
}
@media all and (min-width: 480px) and (max-width: 768px) {
.grid *[class*="col_"]{
float:none;
width:auto;
clear:both;
display:block;
}
/* columns inside of columns */
.grid *[class*="col_"] [class*="col_"]{
margin-left:0;
margin-right:0;
width:100%;
}
.grid{max-width: 480px;}
.show-desktop {display:none;}
.hide-desktop {display:block;}
.show-tablet {display:block;}
.hide-tablet {display:none;}
.show-phone {display:none;}
.hide-phone {display:block;}
}
@media all and (max-width: 480px) {
.grid *[class*="col_"]{
float:none;
width:auto;
clear:both;
display:block;
}
/* columns inside of columns */
.grid *[class*="col_"] [class*="col_"]{
margin-left:0;
margin-right:0;
width:100%;
}
.grid{max-width: 100%;/*320*/}
.show-desktop {display:none;}
.hide-desktop {display:block;}
.show-tablet {display:none;}
.hide-tablet {display:block;}
.show-phone {display:block;}
.hide-phone {display:none;}
}