/* * Based on Skeleton by Dave Gamache (www.getskeleton.com) * modified by kriesi as part of the wordpress avia framework */ /* Table of Contents ================================================== #Base 960 Grid #Tablet (Portrait) #Mobile (Portrait) #Mobile (Landscape) #Clearing */ /* #Base 960 Grid ================================================== */ #wrap_all { margin: 0 auto; position:relative; z-index: 3; } #main { margin: 0 auto; width: 990px; } .container { position: relative; width: 930px; margin: 0 auto; padding: 0px 30px; clear:both; overflow: hidden;} .container_wrap { clear:both; } .unit, .units { float: left; display: inline; margin-left: 30px; position:relative; z-index:1; } .row { position:relative; margin-bottom: 20px; clear:both; } .stretch_full { position:relative; left:-30px; } /* Nested Column Classes */ body .unit.alpha, body .units.alpha, body div .first { margin-left: 0; clear: left;} /* Base Grid */ .container .one.unit, .container .one.units { width: 50px; } .container .two.units { width: 130px; } .container .three.units { width: 210px; } .container .four.units { width: 290px; } .container .five.units { width: 370px; } .container .six.units { width: 450px; } .container .seven.units { width: 530px; } .container .eight.units { width: 610px; } .container .nine.units { width: 690px; } .container .ten.units { width: 770px; } .container .eleven.units { width: 850px; } .container .twelve.units { width: 930px; margin-left:0} #top .stretch_full { width: 990px;} /* Offsets */ #top .offset-by-one { padding-left: 80px; } #top .offset-by-two { padding-left: 160px; } #top .offset-by-three { padding-left: 240px; } #top .offset-by-four { padding-left: 320px; } #top .offset-by-five { padding-left: 400px; } #top .offset-by-six { padding-left: 480px; } #top .offset-by-seven { padding-left: 560px; } #top .offset-by-eight { padding-left: 620px; } #top .offset-by-nine { padding-left: 700px; } #top .offset-by-ten { padding-left: 780px; } #top .offset-by-eleven { padding-left: 860px; } /* #Desktop - Extra Large ================================================== */ /* @media only screen and (min-width: 1140px) { .responsive #main { width: 1120px; } .responsive .container { width: 1050px; } .responsive .container .one.unit, .container .one.units { width: 60px; } .responsive .container .two.units { width: 150px; } .responsive .container .three.units { width: 240px; } .responsive .container .four.units { width: 330px; } .responsive .container .five.units { width: 420px; } .responsive .container .six.units { width: 510px; } .responsive .container .seven.units { width: 600px; } .responsive .container .eight.units { width: 690px; } .responsive .container .nine.units { width: 780px; } .responsive .container .ten.units { width: 870px; } .responsive .container .eleven.units { width: 960px; } .responsive .container .twelve.units { width: 1050px;} .responsive #top .stretch_full { width: 1110px;} .responsive #top .offset-by-one { padding-left: 90px; } .responsive #top .offset-by-two { padding-left: 180px; } .responsive #top .offset-by-three { padding-left: 270px; } .responsive #top .offset-by-four { padding-left: 360px; } .responsive #top .offset-by-five { padding-left: 450px; } .responsive #top .offset-by-six { padding-left: 540px; } .responsive #top .offset-by-seven { padding-left: 630px; } .responsive #top .offset-by-eight { padding-left: 720px; } .responsive #top .offset-by-nine { padding-left: 810px; } .responsive #top .offset-by-ten { padding-left: 900px; } .responsive #top .offset-by-eleven { padding-left: 990px; } } */ /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px, Gutter: 30px, Unit: 32px */ @media only screen and (min-width: 768px) and (max-width: 989px) { .responsive #main { width: 774px; } .responsive .container { width: 714px; } .responsive .container .one.unit, .responsive .container .one.units { width: 32px; } .responsive .container .two.units { width: 94px; } .responsive .container .three.units { width: 156px; } .responsive .container .four.units { width: 218px; } .responsive .container .five.units { width: 280px; } .responsive .container .six.units { width: 342px; } .responsive .container .seven.units { width: 404px; } .responsive .container .eight.units { width: 466px; } .responsive .container .nine.units { width: 528px; } .responsive .container .ten.units { width: 590px; } .responsive .container .eleven.units { width: 652px; } .responsive .container .twelve.units { width: 714px; } .responsive #top .stretch_full { width: 774px;} /* Offsets */ .responsive #top .offset-by-one { padding-left: 62px; } .responsive #top .offset-by-two { padding-left: 124px; } .responsive #top .offset-by-three { padding-left: 186px; } .responsive #top .offset-by-four { padding-left: 248px; } .responsive #top .offset-by-five { padding-left: 310px; } .responsive #top .offset-by-six { padding-left: 372px; } .responsive #top .offset-by-seven { padding-left: 434px; } .responsive #top .offset-by-eight { padding-left: 496px; } .responsive #top .offset-by-nine { padding-left: 558px; } .responsive #top .offset-by-ten { padding-left: 620px; } .responsive #top .offset-by-eleven { padding-left: 682px; } } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { .responsive #main { width: 318px; } .responsive .container { width: 258px; } .responsive .units, .responsive .unit { margin: 0; } .responsive .container .one.unit, .responsive .container .one.units, .responsive .container .two.units, .responsive .container .three.units, .responsive .container .four.units, .responsive .container .five.units, .responsive .container .six.units, .responsive .container .seven.units, .responsive .container .eight.units, .responsive .container .nine.units, .responsive .container .ten.units, .responsive .container .eleven.units, .responsive .container .twelve.units, .responsive #top .one_fifth, .responsive #top .one_fourth, .responsive #top .one_third, .responsive #top .two_fifth, .responsive #top .one_half, .responsive #top .three_fifth, .responsive #top .two_third, .responsive #top .three_fourth, .responsive #top .four_fifth { margin: 0; margin-bottom: 10px; width: 258px; } .responsive #top .stretch_full{ width: 318px;} /* Offsets */ .responsive #top .offset-by-one, .responsive #top .offset-by-two, .responsive #top .offset-by-three, .responsive #top .offset-by-four, .responsive #top .offset-by-five, .responsive #top .offset-by-six, .responsive #top .offset-by-seven, .responsive #top .offset-by-eight, .responsive #top .offset-by-nine, .responsive #top .offset-by-ten, .responsive #top .offset-by-eleven{ padding-left: 0; } } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { .responsive #main { width: 478px; } .responsive .container { width: 418px; } .responsive .units, .responsive .unit { margin: 0; } .responsive .container .one.unit, .responsive .container .one.units, .responsive .container .two.units, .responsive .container .three.units, .responsive .container .four.units, .responsive .container .five.units, .responsive .container .six.units, .responsive .container .seven.units, .responsive .container .eight.units, .responsive .container .nine.units, .responsive .container .ten.units, .responsive .container .eleven.units, .responsive .container .twelve.units, .responsive #top .one_fifth, .responsive #top .one_fourth, .responsive #top .one_third, .responsive #top .two_fifth, .responsive #top .one_half, .responsive #top .three_fifth, .responsive #top .two_third, .responsive #top .three_fourth, .responsive #top .four_fifth { width: 418px; margin-left: 0; margin-bottom: 10px; } .responsive #top .stretch_full{ width: 478px;} } /* #Clearing ================================================== */ /* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } /* Use clearfix class on parent to clear nested units, or wrap each row of units in a
*/ .clearfix:before, .clearfix:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; } /* You can also use a
to clear units */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /* Columns for better content separation ================================================== */ div .one_fifth { overflow: hidden; z-index:1; margin-left: 4%; width:16.5%; float:left; position:relative; } div .one_fourth { overflow: hidden; z-index:1; margin-left: 4%; width:22%; float:left; position:relative; } div .one_third { overflow: hidden; z-index:1; margin-left: 4%; width:30.5%; float:left; position:relative; } div .two_fifth { overflow: hidden; z-index:1; margin-left: 4%; width:38.5%; float:left; position:relative; } div .one_half { overflow: hidden; z-index:1; margin-left: 4%; width:48%; float:left; position:relative; } div .three_fifth { overflow: hidden; z-index:1; margin-left: 4%; width:57%; float:left; position:relative; } div .two_third { overflow: hidden; z-index:1; margin-left: 4%; width:65.5%; float:left; position:relative; } div .three_fourth { overflow: hidden; z-index:1; margin-left: 4%; width:74%; float:left; position:relative; } div .four_fifth { overflow: hidden; z-index:1; margin-left: 4%; width:79%; float:left; position:relative; } .msie7 .one_fourth { width:21.5%; } .msie7 div, .msie7 li { zoom:1; } /* Columns for better content separation (no margin) ================================================== */ body div .no_margin { margin-left:0;} .no_margin.one_fifth { width:20%; } .no_margin.one_fourth { width:25%; } .no_margin.one_third { width:33.3%; } .no_margin.two_fifth { width:40%; } .no_margin.one_half { width:50%; } .no_margin.three_fifth { width:60%; } .no_margin.two_third { width:66.6%; } .no_margin.three_fourth { width:75%; } .no_margin.four_fifth { width:80%; } .msie7 .no_margin.one_fourth{ width:24.99%; }