/* ============================================================================= 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