/* * 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 */ /*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }*/ /* Table of Contents ================================================== #Base 960 Grid for 1248 width #Tablet (Landscape) #Tablet (Portrait) #Mobile (Landscape) #Mobile (Portrait) #Fixation #Clearing */ /* #Base 960 Grid for 1248 width ================================================== */ .supercontainer { width:100%;margin:0 auto;box-sizing: border-box } .letterhead { position: relative; width: 960px; margin: 0 auto; padding: 0px; height:8px } .container { position: relative; width: 960px; margin: 0 auto; padding: 0px } .letterhead .columns, .container .column, .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px;box-sizing: border-box } .row { padding-bottom: 20px } /* Nested Column Classes */ .column.alpha, .columns.alpha { margin-left: 0 } .column.omega, .columns.omega { margin-right: 0 } /* Base Grid */ .container .one.column, .container .one.columns { width: 40px } .container .two.columns { width: 100px } .container .three.columns { width: 160px } .container .four.columns { width: 220px } .container .five.columns { width: 280px } .container .six.columns { width: 340px } .container .seven.columns { width: 400px } .container .eight.columns { width: 460px } .container .nine.columns { width: 520px } .container .ten.columns { width: 580px } .container .eleven.columns { width: 640px } .container .twelve.columns { width: 700px } .container .thirteen.columns { width: 760px } .container .fourteen.columns { width: 820px } .container .fifteen.columns { width: 880px } .container .sixteen.columns { width: 940px } .container .one-third.column { width: 300px } .container .two-thirds.column { width: 620px } .container .one-half.column { width: 460px } /* Offsets */ .container .offset-by-one { margin-left: 60px } .container .offset-by-two { margin-left: 120px } .container .offset-by-three { margin-left: 180px } .container .offset-by-four { margin-left: 240px } .container .offset-by-five { margin-left: 300px } .container .offset-by-six { margin-left: 360px } .container .offset-by-seven { margin-left: 420px } .container .offset-by-eight { margin-left: 480px } .container .offset-by-nine { margin-left: 540px } .container .offset-by-ten { margin-left: 600px } .container .offset-by-eleven { margin-left: 660px } .container .offset-by-twelve { margin-left: 720px } .container .offset-by-thirteen { margin-left: 780px } .container .offset-by-fourteen { margin-left: 840px } .container .offset-by-fifteen { margin-left: 900px } .container .offset-by-one-third { margin-left: 320px } .container .offset-by-two-thirds { margin-left: 640px } .container .offset-by-one-half { margin-left: 480px } /* Right Offsets */ .container .right-offset-by-one { margin-right:60px } .container .right-offset-by-two { margin-right:120px } .container .right-offset-by-three { margin-right:180px } .container .right-offset-by-four { margin-right:240px } .container .right-offset-by-five { margin-right:300px } .container .right-offset-by-six { margin-right:360px } .container .right-offset-by-seven { margin-right:420px } .container .right-offset-by-eight { margin-right:480px } .container .right-offset-by-nine { margin-right:540px } .container .right-offset-by-ten { margin-right:600px } .container .right-offset-by-eleven { margin-right:660px } .container .right-offset-by-twelve { margin-right:720px } .container .right-offset-by-thirteen { margin-right:780px } .container .right-offset-by-fourteen { margin-right:840px } .container .right-offset-by-fifteen { margin-right:900px } .container .right-offset-by-one-third { margin-right: 320px } .container .right-offset-by-two-thirds { margin-right: 640px } .container .right-offset-by-one-half { margin-right: 480px } /* #Grid Tablet Landscape ================================================== */ /* Note: Design for a width of 960px */ @media only screen and (min-width: 977px) and (max-width: 1264px) { /** the same css rules above **/ } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 976px) { .letterhead { width: 768px } .container { width: 768px } .container .one.column, .container .one.columns { width: 28px } .container .two.columns { width: 76px } .container .three.columns { width: 124px } .container .four.columns { width: 172px } .container .five.columns { width: 220px } .container .six.columns { width: 268px } .container .seven.columns { width: 316px } .container .eight.columns { width: 364px } .container .nine.columns { width: 412px } .container .ten.columns { width: 460px } .container .eleven.columns { width: 508px } .container .twelve.columns { width: 556px } .container .thirteen.columns { width: 604px } .container .fourteen.columns { width: 652px } .container .fifteen.columns { width: 700px } .container .sixteen.columns { width: 748px } .container .one-third.column { width: 236px } .container .two-thirds.column { width: 492px } .container .one-half.column { width: 364px } /* Offsets */ .container .offset-by-one { margin-left: 48px } .container .offset-by-two { margin-left: 96px } .container .offset-by-three { margin-left: 144px } .container .offset-by-four { margin-left: 192px } .container .offset-by-five { margin-left: 240px } .container .offset-by-six { margin-left: 288px } .container .offset-by-seven { margin-left: 336px } .container .offset-by-eight { margin-left: 384px } .container .offset-by-nine { margin-left: 432px } .container .offset-by-ten { margin-left: 480px } .container .offset-by-eleven { margin-left: 528px } .container .offset-by-twelve { margin-left: 576px } .container .offset-by-thirteen { margin-left: 624px } .container .offset-by-fourteen { margin-left: 672px } .container .offset-by-fifteen { margin-left: 720px } .container .offset-by-one-third { margin-left: 256px } .container .offset-by-two-thirds { margin-left: 512px } .container .offset-by-one-half { margin-left: 384px } /* Right Offsets */ .container .right-offset-by-one { margin-right:48px } .container .right-offset-by-two { margin-right:96px } .container .right-offset-by-three { margin-right:144px } .container .right-offset-by-four { margin-right:192px } .container .right-offset-by-five { margin-right:240px } .container .right-offset-by-six { margin-right:288px } .container .right-offset-by-seven { margin-right:336px } .container .right-offset-by-eight { margin-right:384px } .container .right-offset-by-nine { margin-right:432px } .container .right-offset-by-ten { margin-right:480px } .container .right-offset-by-eleven { margin-right:528px } .container .right-offset-by-twelve { margin-right:576px } .container .right-offset-by-thirteen { margin-right:624px } .container .right-offset-by-fourteen { margin-right:672px } .container .right-offset-by-fifteen { margin-right:720px } .container .right-offset-by-one-third { margin-right: 256px } .container .right-offset-by-two-thirds { margin-right: 512px } .container .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 { width: 480px } .container { width: 480px } .letterhead .columns, .container .columns, .container .column { margin: 0 } .container .one.column, .container .one.columns, .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, .container .one-half.column { width: 480px } /* 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, .container .offset-by-one-third, .container .offset-by-two-thirds, .container .offset-by-one-half { margin-left: 0 } /* Right Offsets */ .container .right-offset-by-one, .container .right-offset-by-two, .container .right-offset-by-three, .container .right-offset-by-four, .container .right-offset-by-five, .container .right-offset-by-six, .container .right-offset-by-seven, .container .right-offset-by-eight, .container .right-offset-by-nine, .container .right-offset-by-ten, .container .right-offset-by-eleven, .container .right-offset-by-twelve, .container .right-offset-by-thirteen, .container .right-offset-by-fourteen, .container .right-offset-by-fifteen, .container .right-offset-by-one-third, .container .right-offset-by-two-thirds, .container .right-offset-by-one-half { margin-right: 0 } } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 496px) { .letterhead { width: 300px } .container_header { width: 300px } .container { width: 300px } .letterhead .columns, .container .columns, .container .column { margin: 0 } .container .one.column, .container .one.columns, .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, .container .one-half.column { width: 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, .container .offset-by-one-third, .container .offset-by-two-thirds, .container .offset-by-one-half { margin-left: 0 } /* Right Offsets */ .container .right-offset-by-one, .container .right-offset-by-two, .container .right-offset-by-three, .container .right-offset-by-four, .container .right-offset-by-five, .container .right-offset-by-six, .container .right-offset-by-seven, .container .right-offset-by-eight, .container .right-offset-by-nine, .container .right-offset-by-ten, .container .right-offset-by-eleven, .container .right-offset-by-twelve, .container .right-offset-by-thirteen, .container .right-offset-by-fourteen, .container .right-offset-by-fifteen, .container .right-offset-by-one-third, .container .right-offset-by-two-thirds, .container .right-offset-by-one-half { margin-right: 0 } } /* Clearing –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Self Clearing Goodness */ .letterhead:after, .container:after { content: ""; display: table; clear: both } /* Old Self Clearing Goodness */ /*.letterhead:after{ content: "\0020"; display: block; height: 0; clear: both; visibility: hidden } .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden }*/