/* ============================================================================= Skeleton Grid - Modified by Lucas Dechow (http://dechowmedia.com) ========================================================================== */ /* #Base 960 Grid - Modified with percentages (pixel values in comments) ================================================== */ .container { position: relative; width: 93%; margin: 0 auto; padding: 0; } /*960px by 1024px*/ .column, .columns { float: left; display: inline; margin-left: 1%; margin-right: 1%; } /*10px Margin*/ .row { margin-bottom: 2%; } /*20px Margin*/ /* Nested Column Classes */ .column.alpha, .columns.alpha { margin-left: 0; } .column.omega, .columns.omega { margin-right: 0; } /* Base Grid */ .container .one.column { width: 4.1%; } /*40px*/ .container .two.columns { width: 10.4%; } /*100px*/ .container .three.columns { width: 16.6%; } /*160px*/ .container .four.columns { width: 22.9%; } /*220px*/ .container .five.columns { width: 29.16%; } /*280px*/ .container .six.columns { width: 35%; } /*340px*/ .container .seven.columns { width: 41.6%; } /*400px*/ .container .eight.columns { width: 47.9%; } /*460px*/ .container .nine.columns { width: 54.16%; } /*520px*/ .container .ten.columns { width: 60%; } /*580px*/ .container .eleven.columns { width: 66.66%; } /*640px*/ .container .twelve.columns { width: 72.9%; } /*700px*/ .container .thirteen.columns { width: 79.16%; } /*760px*/ .container .fourteen.columns { width: 85%; } /*820px*/ .container .fifteen.columns { width: 91.66%; } /*880px*/ .container .sixteen.columns { width: 97.9%; } /*940px*/ .container .one-third.column { width: 31.25%; } /*300px*/ .container .two-thirds.column { width: 64.5%; } /*620px*/ /* Offsets */ .container .offset-by-one { padding-left: 6.25%; } /*60px*/ .container .offset-by-two { padding-left: 12.5%; } /*120px*/ .container .offset-by-three { padding-left: 18.75%; } /*180px*/ .container .offset-by-four { padding-left: 25%; } /*240px*/ .container .offset-by-five { padding-left: 31.25%; } /*300px*/ .container .offset-by-six { padding-left: 37.5%; } /*360px*/ .container .offset-by-seven { padding-left: 43.7%; } /*420px*/ .container .offset-by-eight { padding-left: 50%; } /*480px*/ .container .offset-by-nine { padding-left: 56.25%; } /*540px*/ .container .offset-by-ten { padding-left: 62.5%; } /*600px*/ .container .offset-by-eleven { padding-left: 68.75%; } /*660px*/ .container .offset-by-twelve { padding-left: 75%; } /*720px*/ .container .offset-by-thirteen { padding-left: 81.25%; } /*780px*/ .container .offset-by-fourteen { padding-left: 87.5%; } /*840px*/ .container .offset-by-fifteen { padding-left: 93.75%; } /*900px*/ /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 959px) { .container { width: 93%; } /*768px*/ .container .column, .container .columns { margin-left: 1.3%; margin-right: 1.3%; } /*10px margin*/ .column.alpha, .columns.alpha { margin-left: 0; margin-right: 1.3%; } /*10px margin*/ .column.omega, .columns.omega { margin-right: 0; margin-left: 1.3%; } /*10px margin*/ .container .one.column { width: 3.64%; } /*28px*/ .container .two.columns { width: 9.89%; } /*76px*/ .container .three.columns { width: 16.1%; } /*124px*/ .container .four.columns { width: 22.39%; } /*172px*/ .container .five.columns { width: 28.64%; } /*220px*/ .container .six.columns { width: 34.89%; } /*268px*/ .container .seven.columns { width: 41.14%; } /*316px*/ .container .eight.columns { width: 47.39%; } /*364px*/ .container .nine.columns { width: 53.64%; } /*412px*/ .container .ten.columns { width: 59.89%; } /*460px*/ .container .eleven.columns { width: 66.14%; } /*508px*/ .container .twelve.columns { width: 72.39%; } /*556px*/ .container .thirteen.columns { width: 78.64%; } /*604px*/ .container .fourteen.columns { width: 84.89%; } /*652px*/ .container .fifteen.columns { width: 91.14%; } /*700px*/ .container .sixteen.columns { width: 97.39%; } /*748px*/ .container .one-third.column { width: 30.72%; } /*236px*/ .container .two-thirds.column { width: 64%; } /*492px*/ /* Offsets */ .container .offset-by-one { padding-left: 6.25%; } /*48px padding*/ .container .offset-by-two { padding-left: 12.5%; } /*96px padding*/ .container .offset-by-three { padding-left: 18.75%; } /*144px padding*/ .container .offset-by-four { padding-left: 25%; } /*192px padding*/ .container .offset-by-five { padding-left: 31.25%; } /*240px padding*/ .container .offset-by-six { padding-left: 37.5%; } /*288px padding*/ .container .offset-by-seven { padding-left: 43.75%; } /*336px padding*/ .container .offset-by-eight { padding-left: 45%; } /*348px padding*/ .container .offset-by-nine { padding-left: 56.25%; } /*432px padding*/ .container .offset-by-ten { padding-left: 62.5%; } /*480px padding*/ .container .offset-by-eleven { padding-left: 68.75%; } /*528px padding*/ .container .offset-by-twelve { padding-left: 75%; } /*576px padding*/ .container .offset-by-thirteen { padding-left: 81.25%; } /*624px padding*/ .container .offset-by-fourteen { padding-left: 87.5%; } /*672px padding*/ .container .offset-by-fifteen { padding-left: 93.75%; } /*720px padding*/ } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { .container { width: 93%; } .columns, .column { margin: 0; } .container .one.column, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 100%; } /*300px*/ /* Offsets */ .container .offset-by-one, .container .offset-by-two, .container .offset-by-three, .container .offset-by-four, .container .offset-by-five, .container .offset-by-six, .container .offset-by-seven, .container .offset-by-eight, .container .offset-by-nine, .container .offset-by-ten, .container .offset-by-eleven, .container .offset-by-twelve, .container .offset-by-thirteen, .container .offset-by-fourteen, .container .offset-by-fifteen { padding-left: 0; } } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 93%; } .columns, .column { margin: 0; } .container .one.column, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 100%; } /*420px*/ } /* #Clearing ================================================== */ /* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } /* Use clearfix class on parent to clear nested columns, or wrap each row of columns in a
*/ .clearfix:before, .clearfix:after, .row:before, .row:after, .panel-row-style-full-width-layout:before, .panel-row-style-full-width-layout:after, .panel-row-style-section-divider:before, .panel-row-style-section-divider:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .row:after, .clearfix:after, .panel-row-style-full-width-layout:before, .panel-row-style-full-width-layout:after, .panel-row-style-section-divider:before, .panel-row-style-section-divider:after { clear: both; } .row, .clearfix { zoom: 1; } /* You can also use a
to clear columns */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /* ==|== primary styles ===================================================== Author: Lucas - Skeleton Based Media Queries ========================================================================== */ /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) {} /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) {} /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) {} /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) {} /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) {}