/* * Skeleton V1.2 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 6/20/2012 */ /* Table of Contents ================================================== #Base 1248 Grid #Tablet (Landscape) #Tablet (Portrait) #Mobile (Landscape) #Mobile (Portrait) #Fixation #Clearing */ /* #Base 1248 Grid ================================================== */ .supercontainer-1248 { width:100%;margin:0 auto;box-sizing: border-box } .letterhead-1248 { position: relative; width: 1248px; margin: 0 auto; padding: 0px; height:8px } .container-1248 { position: relative; width: 1248px; margin: 0 auto; padding: 0px } .letterhead-1248 .columns, .container-1248 .column, .container-1248 .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px;box-sizing: border-box } .row-1248 { padding-bottom: 20px } /* Nested Column Classes */ .column.alpha, .columns.alpha { margin-left: 0 } .column.omega, .columns.omega { margin-right: 0 } /* Base Grid */ .container-1248 .one.column, .container-1248 .one.columns { width: 58px } .container-1248 .two.columns { width: 136px } .container-1248 .three.columns { width: 214px } .container-1248 .four.columns { width: 292px } .container-1248 .five.columns { width: 370px } .container-1248 .six.columns { width: 448px } .container-1248 .seven.columns { width: 526px } .container-1248 .eight.columns { width: 604px } .container-1248 .nine.columns { width: 682px } .container-1248 .ten.columns { width: 760px } .container-1248 .eleven.columns { width: 838px } .container-1248 .twelve.columns { width: 916px } .container-1248 .thirteen.columns { width: 994px } .container-1248 .fourteen.columns { width: 1072px } .container-1248 .fifteen.columns { width: 1150px } .container-1248 .sixteen.columns { width: 1228px }/*1228px;*/ .container-1248 .one-third.column { width: 396px } .container-1248 .two-thirds.column { width: 812px } .container-1248 .one-half.column { width: 604px } /* Offsets */ .container-1248 .offset-by-one { margin-left: 78px } .container-1248 .offset-by-two { margin-left: 156px } .container-1248 .offset-by-three { margin-left: 234px } .container-1248 .offset-by-four { margin-left: 312px } .container-1248 .offset-by-five { margin-left: 390px } .container-1248 .offset-by-six { margin-left: 468px } .container-1248 .offset-by-seven { margin-left: 546px } .container-1248 .offset-by-eight { margin-left: 624px } .container-1248 .offset-by-nine { margin-left: 702px } .container-1248 .offset-by-ten { margin-left: 780px } .container-1248 .offset-by-eleven { margin-left: 858px } .container-1248 .offset-by-twelve { margin-left: 936px } .container-1248 .offset-by-thirteen { margin-left: 1014px } .container-1248 .offset-by-fourteen { margin-left: 1092px } .container-1248 .offset-by-fifteen { margin-left: 1170px } .container-1248 .offset-by-one-third { margin-left: 416px } .container-1248 .offset-by-two-thirds { margin-left: 832px } .container-1248 .offset-by-one-half { margin-left: 624px } /* Right Offsets */ .container-1248 .right-offset-by-one { margin-right:78px } .container-1248 .right-offset-by-two { margin-right:156px } .container-1248 .right-offset-by-three { margin-right:234px } .container-1248 .right-offset-by-four { margin-right:312px } .container-1248 .right-offset-by-five { margin-right:390px } .container-1248 .right-offset-by-six { margin-right:468px } .container-1248 .right-offset-by-seven { margin-right:546px } .container-1248 .right-offset-by-eight { margin-right:624px } .container-1248 .right-offset-by-nine { margin-right:702px } .container-1248 .right-offset-by-ten { margin-right:780px } .container-1248 .right-offset-by-eleven { margin-right:858px } .container-1248 .right-offset-by-twelve { margin-right:936px } .container-1248 .right-offset-by-thirteen { margin-right:1014px } .container-1248 .right-offset-by-fourteen { margin-right:1092px } .container-1248 .right-offset-by-fifteen { margin-right:1170px } .container-1248 .right-offset-by-one-third { margin-right: 416px } .container-1248 .right-offset-by-two-thirds { margin-right: 832px } .container-1248 .right-offset-by-one-half { margin-right: 624px } /* #Grid Tablet Landscape ================================================== */ /* Note: Design for a width of 960px */ @media only screen and (min-width: 977px) and (max-width: 1264px) { .letterhead-1248 { width: 960px } .container-1248 { width: 960px } /* Grid */ .container-1248 .one.column, .container-1248 .one.columns { width: 40px } .container-1248 .two.columns { width: 100px } .container-1248 .three.columns { width: 160px } .container-1248 .four.columns { width: 220px } .container-1248 .five.columns { width: 280px } .container-1248 .six.columns { width: 340px } .container-1248 .seven.columns { width: 400px } .container-1248 .eight.columns { width: 460px } .container-1248 .nine.columns { width: 520px } .container-1248 .ten.columns { width: 580px } .container-1248 .eleven.columns { width: 640px } .container-1248 .twelve.columns { width: 700px } .container-1248 .thirteen.columns { width: 760px } .container-1248 .fourteen.columns { width: 820px } .container-1248 .fifteen.columns { width: 880px } .container-1248 .sixteen.columns { width: 940px } .container-1248 .one-third.column { width: 300px } .container-1248 .two-thirds.column { width: 620px } .container-1248 .one-half.column { width: 460px } /* Offsets */ .container-1248 .offset-by-one { margin-left: 60px } .container-1248 .offset-by-two { margin-left: 120px } .container-1248 .offset-by-three { margin-left: 180px } .container-1248 .offset-by-four { margin-left: 240px } .container-1248 .offset-by-five { margin-left: 300px } .container-1248 .offset-by-six { margin-left: 360px } .container-1248 .offset-by-seven { margin-left: 420px } .container-1248 .offset-by-eight { margin-left: 480px } .container-1248 .offset-by-nine { margin-left: 540px } .container-1248 .offset-by-ten { margin-left: 600px } .container-1248 .offset-by-eleven { margin-left: 660px } .container-1248 .offset-by-twelve { margin-left: 720px } .container-1248 .offset-by-thirteen { margin-left: 780px } .container-1248 .offset-by-fourteen { margin-left: 840px } .container-1248 .offset-by-fifteen { margin-left: 900px } .container-1248 .offset-by-one-third { margin-left: 320px } .container-1248 .offset-by-two-thirds { margin-left: 640px } .container-1248 .offset-by-one-half { margin-left: 480px } /* Right Offsets */ .container-1248 .right-offset-by-one { margin-right:60px } .container-1248 .right-offset-by-two { margin-right:120px } .container-1248 .right-offset-by-three { margin-right:180px } .container-1248 .right-offset-by-four { margin-right:240px } .container-1248 .right-offset-by-five { margin-right:300px } .container-1248 .right-offset-by-six { margin-right:360px } .container-1248 .right-offset-by-seven { margin-right:420px } .container-1248 .right-offset-by-eight { margin-right:480px } .container-1248 .right-offset-by-nine { margin-right:540px } .container-1248 .right-offset-by-ten { margin-right:600px } .container-1248 .right-offset-by-eleven { margin-right:660px } .container-1248 .right-offset-by-twelve { margin-right:720px } .container-1248 .right-offset-by-thirteen { margin-right:780px } .container-1248 .right-offset-by-fourteen { margin-right:840px } .container-1248 .right-offset-by-fifteen { margin-right:900px } .container-1248 .right-offset-by-one-third { margin-right: 320px } .container-1248 .right-offset-by-two-thirds { margin-right: 640px } .container-1248 .right-offset-by-one-half { margin-right: 480px } } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 976px) { .letterhead-1248 { width: 768px } .container-1248 { width: 768px } /* Grid */ .container-1248 .one.column, .container-1248 .one.columns { width: 28px } .container-1248 .two.columns { width: 76px } .container-1248 .three.columns { width: 124px } .container-1248 .four.columns { width: 172px } .container-1248 .five.columns { width: 220px } .container-1248 .six.columns { width: 268px } .container-1248 .seven.columns { width: 316px } .container-1248 .eight.columns { width: 364px } .container-1248 .nine.columns { width: 412px } .container-1248 .ten.columns { width: 460px } .container-1248 .eleven.columns { width: 508px } .container-1248 .twelve.columns { width: 556px } .container-1248 .thirteen.columns { width: 604px } .container-1248 .fourteen.columns { width: 652px } .container-1248 .fifteen.columns { width: 700px } .container-1248 .sixteen.columns { width: 748px } .container-1248 .one-third.column { width: 236px } .container-1248 .two-thirds.column { width: 492px } .container-1248 .one-half.column { width: 364px } /* Offsets */ .container-1248 .offset-by-one { margin-left: 48px } .container-1248 .offset-by-two { margin-left: 96px } .container-1248 .offset-by-three { margin-left: 144px } .container-1248 .offset-by-four { margin-left: 192px } .container-1248 .offset-by-five { margin-left: 240px } .container-1248 .offset-by-six { margin-left: 288px } .container-1248 .offset-by-seven { margin-left: 336px } .container-1248 .offset-by-eight { margin-left: 384px } .container-1248 .offset-by-nine { margin-left: 432px } .container-1248 .offset-by-ten { margin-left: 480px } .container-1248 .offset-by-eleven { margin-left: 528px } .container-1248 .offset-by-twelve { margin-left: 576px } .container-1248 .offset-by-thirteen { margin-left: 624px } .container-1248 .offset-by-fourteen { margin-left: 672px } .container-1248 .offset-by-fifteen { margin-left: 720px } .container-1248 .offset-by-one-third { margin-left: 256px } .container-1248 .offset-by-two-thirds { margin-left: 512px } .container-1248 .offset-by-one-half { margin-left: 384px } /* Right Offsets */ .container-1248 .right-offset-by-one { margin-right:48px } .container-1248 .right-offset-by-two { margin-right:96px } .container-1248 .right-offset-by-three { margin-right:144px } .container-1248 .right-offset-by-four { margin-right:192px } .container-1248 .right-offset-by-five { margin-right:240px } .container-1248 .right-offset-by-six { margin-right:288px } .container-1248 .right-offset-by-seven { margin-right:336px } .container-1248 .right-offset-by-eight { margin-right:384px } .container-1248 .right-offset-by-nine { margin-right:432px } .container-1248 .right-offset-by-ten { margin-right:480px } .container-1248 .right-offset-by-eleven { margin-right:528px } .container-1248 .right-offset-by-twelve { margin-right:576px } .container-1248 .right-offset-by-thirteen { margin-right:624px } .container-1248 .right-offset-by-fourteen { margin-right:672px } .container-1248 .right-offset-by-fifteen { margin-right:720px } .container-1248 .right-offset-by-one-third { margin-right: 256px } .container-1248 .right-offset-by-two-thirds { margin-right: 512px } .container-1248 .right-offset-by-one-half { margin-right: 384px } } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 497px) and (max-width: 767px) { .letterhead-1248 { width: 480px } .container-1248 { width: 480px } .letterhead-1248 .columns, .container-1248 .columns, .container-1248 .column { margin: 0 } /* Grid */ .container-1248 .one.column, .container-1248 .one.columns, .container-1248 .two.columns, .container-1248 .three.columns, .container-1248 .four.columns, .container-1248 .five.columns, .container-1248 .six.columns, .container-1248 .seven.columns, .container-1248 .eight.columns, .container-1248 .nine.columns, .container-1248 .ten.columns, .container-1248 .eleven.columns, .container-1248 .twelve.columns, .container-1248 .thirteen.columns, .container-1248 .fourteen.columns, .container-1248 .fifteen.columns, .container-1248 .sixteen.columns, .container-1248 .one-third.column, .container-1248 .two-thirds.column, .container-1248 .one-half.column { width: 480px } /* Offsets */ .container-1248 .offset-by-one, .container-1248 .offset-by-two, .container-1248 .offset-by-three, .container-1248 .offset-by-four, .container-1248 .offset-by-five, .container-1248 .offset-by-six, .container-1248 .offset-by-seven, .container-1248 .offset-by-eight, .container-1248 .offset-by-nine, .container-1248 .offset-by-ten, .container-1248 .offset-by-eleven, .container-1248 .offset-by-twelve, .container-1248 .offset-by-thirteen, .container-1248 .offset-by-fourteen, .container-1248 .offset-by-fifteen, .container-1248 .offset-by-one-third, .container-1248 .offset-by-two-thirds, .container-1248 .offset-by-one-half { padding-left: 0 } /* Right Offsets */ .container-1248 .right-offset-by-one, .container-1248 .right-offset-by-two, .container-1248 .right-offset-by-three, .container-1248 .right-offset-by-four, .container-1248 .right-offset-by-five, .container-1248 .right-offset-by-six, .container-1248 .right-offset-by-seven, .container-1248 .right-offset-by-eight, .container-1248 .right-offset-by-nine, .container-1248 .right-offset-by-ten, .container-1248 .right-offset-by-eleven, .container-1248 .right-offset-by-twelve, .container-1248 .right-offset-by-thirteen, .container-1248 .right-offset-by-fourteen, .container-1248 .right-offset-by-fifteen, .container-1248 .right-offset-by-one-third, .container-1248 .right-offset-by-two-thirds, .container-1248 .right-offset-by-one-half { padding-right: 0 } } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 496px) { .letterhead-1248 { width: 300px } .container-1248 { width: 300px } .letterhead-1248 .columns, .container-1248 .columns, .container-1248 .column { margin: 0 } /* Grid */ .container-1248 .one.column, .container-1248 .one.columns, .container-1248 .two.columns, .container-1248 .three.columns, .container-1248 .four.columns, .container-1248 .five.columns, .container-1248 .six.columns, .container-1248 .seven.columns, .container-1248 .eight.columns, .container-1248 .nine.columns, .container-1248 .ten.columns, .container-1248 .eleven.columns, .container-1248 .twelve.columns, .container-1248 .thirteen.columns, .container-1248 .fourteen.columns, .container-1248 .fifteen.columns, .container-1248 .sixteen.columns, .container-1248 .one-third.column, .container-1248 .two-thirds.column, .container-1248 .one-half.column { width: 300px } /* Offsets */ .container-1248 .offset-by-one, .container-1248 .offset-by-two, .container-1248 .offset-by-three, .container-1248 .offset-by-four, .container-1248 .offset-by-five, .container-1248 .offset-by-six, .container-1248 .offset-by-seven, .container-1248 .offset-by-eight, .container-1248 .offset-by-nine, .container-1248 .offset-by-ten, .container-1248 .offset-by-eleven, .container-1248 .offset-by-twelve, .container-1248 .offset-by-thirteen, .container-1248 .offset-by-fourteen, .container-1248 .offset-by-fifteen, .container-1248 .offset-by-one-third, .container-1248 .offset-by-two-thirds, .container-1248 .offset-by-one-half { padding-left: 0 } /* Right Offsets */ .container-1248 .right-offset-by-one, .container-1248 .right-offset-by-two, .container-1248 .right-offset-by-three, .container-1248 .right-offset-by-four, .container-1248 .right-offset-by-five, .container-1248 .right-offset-by-six, .container-1248 .right-offset-by-seven, .container-1248 .right-offset-by-eight, .container-1248 .right-offset-by-nine, .container-1248 .right-offset-by-ten, .container-1248 .right-offset-by-eleven, .container-1248 .right-offset-by-twelve, .container-1248 .right-offset-by-thirteen, .container-1248 .right-offset-by-fourteen, .container-1248 .right-offset-by-fifteen, .container-1248 .right-offset-by-one-third, .container-1248 .right-offset-by-two-thirds, .container-1248 .right-offset-by-one-half { padding-right: 0 } } /* Clearing –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Self Clearing Goodness */ .letterhead-1248:after, .container-1248:after { content: ""; display: table; clear: both } /* Old Self Clearing Goodness */ /*.letterhead-1248:after{ content: "\0020"; display: block; height: 0; clear: both; visibility: hidden } .container-1248:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden }*/