/* * 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: 2;} .boxed #wrap_all { margin: 30px auto; width: 990px; -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3); -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3); box-shadow: 0 0 5px rgba(0,0,0,0.3);} .container { position: relative; width: 930px; margin: 0 auto; padding: 0; } .unit, .units { float: left; display: inline; margin-left: 30px; position:relative; } .row { position:relative; margin-bottom: 20px; clear:both; } /* Nested Column Classes */ body .unit.alpha, body .units.alpha, body div .first { margin-left: 0; clear: left;} /* Base Grid */ .container .one.unit { 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} /* 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; } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px, Gutter: 30px, Unit: 34px */ @media only screen and (min-width: 768px) and (max-width: 959px) { .boxed #wrap_all { width: 766px; } .container { width: 708px; } .container .one.unit { width: 29px; } .container .two.units { width: 88px; } .container .three.units { width: 147px; } .container .four.units { width: 206px; } .container .five.units { width: 265px; } .container .six.units { width: 324px; } .container .seven.units { width: 383px; } .container .eight.units { width: 442px; } .container .nine.units { width: 501px; } .container .ten.units { width: 560px; } .container .eleven.units { width: 619px; } .container .twelve.units { width: 708px; } /* Offsets */ #top .offset-by-one { padding-left: 59px; } #top .offset-by-two { padding-left: 118px; } #top .offset-by-three { padding-left: 177px; } #top .offset-by-four { padding-left: 236px; } #top .offset-by-five { padding-left: 295px; } #top .offset-by-six { padding-left: 354px; } #top .offset-by-seven { padding-left: 413px; } #top .offset-by-eight { padding-left: 472px; } #top .offset-by-nine { padding-left: 531px; } #top .offset-by-ten { padding-left: 590px; } #top .offset-by-eleven { padding-left: 649px; } } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { .boxed #wrap_all { width: 318px; } .container { width: 300px; } .units, .unit { margin: 0; } .container .one.unit, .container .two.units, .container .three.units, .container .four.units, .container .five.units, .container .six.units, .container .seven.units, .container .eight.units, .container .nine.units, .container .ten.units, .container .eleven.units, .container .twelve.units, #top .one_fifth, #top .one_fourth, #top .one_third, #top .two_fifth, #top .one_half, #top .three_fifth, #top .two_third, #top .three_fourth, #top .four_fifth { margin-left: 0; margin-bottom: 10px; width: 300px; } /* Offsets */ #top .offset-by-one, #top .offset-by-two, #top .offset-by-three, #top .offset-by-four, #top .offset-by-five, #top .offset-by-six, #top .offset-by-seven, #top .offset-by-eight, #top .offset-by-nine, #top .offset-by-ten, #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) { .boxed #wrap_all { width: 478px; } .container { width: 420px; } .units, .unit { margin: 0; } .container .one.unit, .container .two.units, .container .three.units, .container .four.units, .container .five.units, .container .six.units, .container .seven.units, .container .eight.units, .container .nine.units, .container .ten.units, .container .eleven.units, .container .twelve.units, #top .one_fifth, #top .one_fourth, #top .one_third, #top .two_fifth, #top .one_half, #top .three_fifth, #top .two_third, #top .three_fourth, #top .four_fifth { width: 420px; margin-left: 0; margin-bottom: 10px; } } /* #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; margin-left: 4%; width:16.5%; float:left; position:relative; } div .one_fourth { overflow: hidden; margin-left: 4%; width:22%; float:left; position:relative; } div .one_third { overflow: hidden; margin-left: 4%; width:30.5%; float:left; position:relative; } div .two_fifth { overflow: hidden; margin-left: 4%; width:38.5%; float:left; position:relative; } div .one_half { overflow: hidden; margin-left: 4%; width:48%; float:left; position:relative; } div .three_fifth { overflow: hidden; margin-left: 4%; width:57%; float:left; position:relative; } div .two_third { overflow: hidden; margin-left: 4%; width:65.5%; float:left; position:relative; } div .three_fourth { overflow: hidden; margin-left: 4%; width:74%; float:left; position:relative; } div .four_fifth { overflow: hidden; margin-left: 4%; width:79%; float:left; position:relative; } .msie7 .one_fourth { width:21.5%; } .msie7 div, .msie7 li { zoom:1; }