/* * 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 * * Modified by Emerald */ /* Table of Contents ================================================== #Base 1080 Grid #Tablet (Landscape) #Tablet (Portrait) #Mobile (Portrait) #Mobile (Landscape) #Clearing */ /* #Base 1080 Grid ================================================== */ .container { position: relative; width: 1080px; margin: 0 auto; padding: 0; } .container .column, .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } .row { margin-bottom: 0; } /* 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: 70px; } .container .two.columns, .container .one-sixth.columns { width: 160px; } .container .one-fifth.columns { width: 196px; } .container .three.columns, .container .one-fourth.columns { width: 250px; } .container .three-tenths.columns { width: 304px; } .container .four.columns, .container .one-third.columns { width: 340px; } .container .two-fifths.columns { width: 412px; } .container .five.columns { width: 430px; } .container .six.columns, .container .one-half.columns { width: 520px; } .container .seven.columns { width: 610px; } .container .three-fifths.columns { width: 628px; } .container .eight.columns, .container .two-thirds.columns { width: 700px; } .container .seven-tenths.columns { width: 736px; } .container .nine.columns, .container .three-fourths.columns { width: 790px; } .container .four-fifths.columns { width: 844px; } .container .ten.columns { width: 880px; } .container .eleven.columns { width: 970px; } .container .twelve.columns, .container .full-width.columns { width: 1060px; } /* Offsets */ .container .offset-left-5px { margin-left: 5px; } .container .offset-right-5px { margin-right: 5px; } .container .offset-left-10px { margin-left: 10px; } .container .offset-right-10px { margin-right: 10px; } .container .offset-left-20px { margin-left: 20px; } .container .offset-right-20px { margin-right: 20px; } .container .offset-left-30px { margin-left: 30px; } .container .offset-right-30px { margin-right: 30px; } .container .offset-left-40px { margin-left: 40px; } .container .offset-right-40px { margin-right: 40px; } .container .offset-left-50px { margin-left: 50px; } .container .offset-right-50px { margin-right: 50px; } /* Main content inner grid (for page with right sidebar layout) - 780 pixels wide */ #main-content.page-left-col .one.column { width: 45px; } #main-content.page-left-col .one-sixth.columns { width: 110px; } #main-content.page-left-col .one-fifth.columns { width: 136px; } #main-content.page-left-col .one-fourth.columns { width: 175px; } #main-content.page-left-col .three-tenths.columns { width: 214px; } #main-content.page-left-col .one-third.columns { width: 240px; } #main-content.page-left-col .two-fifths.columns { width: 292px; } #main-content.page-left-col .one-half.columns { width: 370px; } #main-content.page-left-col .three-fifths.columns { width: 448px; } #main-content.page-left-col .two-thirds.columns { width: 500px; } #main-content.page-left-col .seven-tenths.columns { width: 526px; } #main-content.page-left-col .three-fourths.columns { width: 565px; } #main-content.page-left-col .four-fifths.columns { width: 604px; } #main-content.page-left-col .full-width.columns { width: 760px; } /* Main content inner grid (for page with left sidebar layout) - 840 pixels wide */ #main-content.page-right-col .one.column { width: 50px; } #main-content.page-right-col .one-sixth.columns { width: 120px; } #main-content.page-right-col .one-fifth.columns { width: 148px; } #main-content.page-right-col .one-fourth.columns { width: 190px; } #main-content.page-right-col .three-tenths.columns { width: 232px; } #main-content.page-right-col .one-third.columns { width: 260px; } #main-content.page-right-col .two-fifths.columns { width: 316px; } #main-content.page-right-col .one-half.columns { width: 400px; } #main-content.page-right-col .three-fifths.columns { width: 484px; } #main-content.page-right-col .two-thirds.columns { width: 540px; } #main-content.page-right-col .seven-tenths.columns { width: 568px; } #main-content.page-right-col .three-fourths.columns { width: 610px; } #main-content.page-right-col .four-fifths.columns { width: 652px; } #main-content.page-right-col .full-width.columns { width: 820px; } /* #Tablet (Landscape) + Desktop & Laptop (1024 pixels wide) ================================================== */ /* Note: Design for a width of 1024px */ @media only screen and (min-width: 960px) and (max-width: 1199px) { .container { width: 960px; } .container .column, .container .columns { margin-left: 10px; margin-right: 10px; } .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; } .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; } .alpha.omega { margin-left: 0; margin-right: 0; } .container .one.column, .container .one.columns { width: 60px; } .container .two.columns, .container .one-sixth.columns { width: 140px; } .container .one-fifth.columns { width: 172px; } .container .three.columns, .container .one-fourth.columns { width: 220px; } .container .three-tenths.columns { width: 268px; } .container .four.columns, .container .one-third.columns { width: 300px; } .container .two-fifths.columns { width: 364px; } .container .five.columns { width: 380px; } .container .six.columns, .container .one-half.columns { width: 460px; } .container .seven.columns { width: 540px; } .container .three-fifths.columns { width: 556px; } .container .eight.columns, .container .two-thirds.columns { width: 620px; } .container .seven-tenths.columns { width: 652px; } .container .nine.columns, .container .three-fourths.columns { width: 700px; } .container .four-fifths.columns { width: 748px; } .container .ten.columns { width: 780px; } .container .eleven.columns { width: 860px; } .container .twelve.columns, .container .full-width.columns { width: 940px; } .container .one-fourth.columns.fixed { width: 250px; } .container .three-fourths.columns.adaptive-to-fixed { width: 670px; } .container .one-third.columns.fixed { width: 340px; } .container .two-thirds.columns.adaptive-to-fixed { width: 580px; } .container .one-half.columns.fixed { width: 520px; } .container .one-half.columns.adaptive-to-fixed { width: 400px; } /* Main content inner grid (for page with right sidebar layout) - 696 pixels wide */ #main-content.page-left-col .one.column { width: 38px; } #main-content.page-left-col .one-sixth.columns { width: 96px; } #main-content.page-left-col .one-fifth.columns { width: 119px; } /* 119.2px */ #main-content.page-left-col .one-fourth.columns { width: 154px; } #main-content.page-left-col .three-tenths.columns { width: 188px; } /* 188.8px */ #main-content.page-left-col .one-third.columns { width: 212px; } #main-content.page-left-col .two-fifths.columns { width: 258px; } /* 258.4px */ #main-content.page-left-col .one-half.columns { width: 328px; } #main-content.page-left-col .three-fifths.columns { width: 397px; } /* 397.6px */ #main-content.page-left-col .two-thirds.columns { width: 444px; } #main-content.page-left-col .seven-tenths.columns { width: 467px; } /* 467.2px */ #main-content.page-left-col .three-fourths.columns { width: 502px; } #main-content.page-left-col .four-fifths.columns { width: 536px; } /* 536.8px */ #main-content.page-left-col .full-width.columns { width: 676px; } /* Main content inner grid (for page with left sidebar layout) - 744 pixels wide */ #main-content.page-right-col .one.column { width: 42px; } #main-content.page-right-col .one-sixth.columns { width: 104px; } #main-content.page-right-col .one-fifth.columns { width: 128px; } /* 128.8px */ #main-content.page-right-col .one-fourth.columns { width: 166px; } #main-content.page-right-col .three-tenths.columns { width: 203px; } /* 203.2px */ #main-content.page-right-col .one-third.columns { width: 228px; } #main-content.page-right-col .two-fifths.columns { width: 277px; } /* 277.6px */ #main-content.page-right-col .one-half.columns { width: 352px; } #main-content.page-right-col .three-fifths.columns { width: 426px; } /* 426.4px */ #main-content.page-right-col .two-thirds.columns { width: 476px; } #main-content.page-right-col .seven-tenths.columns { width: 500px; } /* 500.8px */ #main-content.page-right-col .three-fourths.columns { width: 538px; } #main-content.page-right-col .four-fifths.columns { width: 575px; } /* 575.2px */ #main-content.page-right-col .full-width.columns { width: 724px; } } /* #Smaller than 960 pixels wide ================================================== */ /* Note: Design for the fixed (non-responsive) page layout */ @media only screen and (max-width: 959px) { .fixed-layout .container { width: 960px; } .fixed-layout .container .column, .fixed-layout .container .columns { margin-left: 10px; margin-right: 10px; } .fixed-layout .column.alpha, .fixed-layout .columns.alpha { margin-left: 0; margin-right: 10px; } .fixed-layout .column.omega, .fixed-layout .columns.omega { margin-right: 0; margin-left: 10px; } .fixed-layout .alpha.omega { margin-left: 0; margin-right: 0; } .fixed-layout .container .one.column, .fixed-layout .container .one.columns { width: 60px; } .fixed-layout .container .two.columns, .fixed-layout .container .one-sixth.columns { width: 140px; } .fixed-layout .container .one-fifth.columns { width: 172px; } .fixed-layout .container .three.columns, .fixed-layout .container .one-fourth.columns { width: 220px; } .fixed-layout .container .three-tenths.columns { width: 268px; } .fixed-layout .container .four.columns, .fixed-layout .container .one-third.columns { width: 300px; } .fixed-layout .container .two-fifths.columns { width: 364px; } .fixed-layout .container .five.columns { width: 380px; } .fixed-layout .container .six.columns, .fixed-layout .container .one-half.columns { width: 460px; } .fixed-layout .container .seven.columns { width: 540px; } .fixed-layout .container .three-fifths.columns { width: 556px; } .fixed-layout .container .eight.columns, .fixed-layout .container .two-thirds.columns { width: 620px; } .fixed-layout .container .seven-tenths.columns { width: 652px; } .fixed-layout .container .nine.columns, .fixed-layout .container .three-fourths.columns { width: 700px; } .fixed-layout .container .four-fifths.columns { width: 748px; } .fixed-layout .container .ten.columns { width: 780px; } .fixed-layout .container .eleven.columns { width: 860px; } .fixed-layout .container .twelve.columns, .fixed-layout .container .full-width.columns { width: 940px; } .fixed-layout .container .one-fourth.columns.fixed { width: 250px; } .fixed-layout .container .three-fourths.columns.adaptive-to-fixed { width: 670px; } .fixed-layout .container .one-third.columns.fixed { width: 340px; } .fixed-layout .container .two-thirds.columns.adaptive-to-fixed { width: 580px; } .fixed-layout .container .one-half.columns.fixed { width: 520px; } .fixed-layout .container .one-half.columns.adaptive-to-fixed { width: 400px; } /* Main content inner grid (for page with right sidebar layout) - 696 pixels wide */ .fixed-layout #main-content.page-left-col .one.column { width: 38px; } .fixed-layout #main-content.page-left-col .one-sixth.columns { width: 96px; } .fixed-layout #main-content.page-left-col .one-fifth.columns { width: 119px; } /* 119.2px */ .fixed-layout #main-content.page-left-col .one-fourth.columns { width: 154px; } .fixed-layout #main-content.page-left-col .three-tenths.columns { width: 188px; } /* 188.8px */ .fixed-layout #main-content.page-left-col .one-third.columns { width: 212px; } .fixed-layout #main-content.page-left-col .two-fifths.columns { width: 258px; } /* 258.4px */ .fixed-layout #main-content.page-left-col .one-half.columns { width: 328px; } .fixed-layout #main-content.page-left-col .three-fifths.columns { width: 397px; } /* 397.6px */ .fixed-layout #main-content.page-left-col .two-thirds.columns { width: 444px; } .fixed-layout #main-content.page-left-col .seven-tenths.columns { width: 467px; } /* 467.2px */ .fixed-layout #main-content.page-left-col .three-fourths.columns { width: 502px; } .fixed-layout #main-content.page-left-col .four-fifths.columns { width: 536px; } /* 536.8px */ .fixed-layout #main-content.page-left-col .full-width.columns { width: 676px; } /* Main content inner grid (for page with left sidebar layout) - 744 pixels wide */ .fixed-layout #main-content.page-right-col .one.column { width: 42px; } .fixed-layout #main-content.page-right-col .one-sixth.columns { width: 104px; } .fixed-layout #main-content.page-right-col .one-fifth.columns { width: 128px; } /* 128.8px */ .fixed-layout #main-content.page-right-col .one-fourth.columns { width: 166px; } .fixed-layout #main-content.page-right-col .three-tenths.columns { width: 203px; } /* 203.2px */ .fixed-layout #main-content.page-right-col .one-third.columns { width: 228px; } .fixed-layout #main-content.page-right-col .two-fifths.columns { width: 277px; } /* 277.6px */ .fixed-layout #main-content.page-right-col .one-half.columns { width: 352px; } .fixed-layout #main-content.page-right-col .three-fifths.columns { width: 426px; } /* 426.4px */ .fixed-layout #main-content.page-right-col .two-thirds.columns { width: 476px; } .fixed-layout #main-content.page-right-col .seven-tenths.columns { width: 500px; } /* 500.8px */ .fixed-layout #main-content.page-right-col .three-fourths.columns { width: 538px; } .fixed-layout #main-content.page-right-col .four-fifths.columns { width: 575px; } /* 575.2px */ .fixed-layout #main-content.page-right-col .full-width.columns { width: 724px; } } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 959px) { .responsive .container { width: 768px; } .responsive .container .column, .responsive .container .columns { margin-left: 10px; margin-right: 10px; } .responsive .column.alpha, .responsive .columns.alpha { margin-left: 0; margin-right: 10px; } .responsive .column.omega, .responsive .columns.omega { margin-right: 0; margin-left: 10px; } .responsive .alpha.omega { margin-left: 0; margin-right: 0; } .responsive .container .one.column, .responsive .container .one.columns { width: 44px; } .responsive .container .two.columns, .responsive .container .one-sixth.columns { width: 108px; } .responsive .container .one-fifth.columns { width: 133px; } /* 133.6px */ .responsive .container .three.columns, .responsive .container .one-fourth.columns { width: 172px; } .responsive .container .three-tenths.columns { width: 210px; } /* 210.4px */ .responsive .container .four.columns, .responsive .container .one-third.columns { width: 236px; } .responsive .container .two-fifths.columns { width: 287px; } /* 287.2px */ .responsive .container .five.columns { width: 300px; } .responsive .container .six.columns, .responsive .container .one-half.columns { width: 364px; } .responsive .container .seven.columns { width: 428px; } .responsive .container .three-fifths.columns { width: 440px; } /* 440.8px */ .responsive .container .eight.columns, .responsive .container .two-thirds.columns { width: 492px; } .responsive .container .seven-tenths.columns { width: 517px; } /* 517.6px */ .responsive .container .nine.columns, .responsive .container .three-fourths.columns { width: 556px; } .responsive .container .four-fifths.columns { width: 594px; } /* 594.4px */ .responsive .container .ten.columns { width: 620px; } .responsive .container .eleven.columns { width: 684px; } .responsive .container .twelve.columns, .responsive .container .full-width.columns { width: 748px; } .responsive .container .one-fourth.columns.fixed { width: 250px; } .responsive .container .three-fourths.columns.adaptive-to-fixed { width: 478px; } .responsive .container .one-third.columns.fixed { width: 340px; } .responsive .container .two-thirds.columns.adaptive-to-fixed { width: 388px; } .responsive .container .one-half.columns.fixed { width: 520px; } .responsive .container .one-half.columns.adaptive-to-fixed { width: 208px; } /* Offsets */ .responsive .container .adapted-max-959px .offset-left-5px, .responsive .container .adapted-max-959px .offset-left-10px, .responsive .container .adapted-max-959px .offset-left-20px, .responsive .container .adapted-max-959px .offset-left-30px, .responsive .container .adapted-max-959px .offset-left-40px, .responsive .container .adapted-max-959px .offset-left-50px, .responsive .container .adapted-max-959px.offset-left-5px, .responsive .container .adapted-max-959px.offset-left-10px, .responsive .container .adapted-max-959px.offset-left-20px, .responsive .container .adapted-max-959px.offset-left-30px, .responsive .container .adapted-max-959px.offset-left-40px, .responsive .container .adapted-max-959px.offset-left-50px { margin-left: 0; } .responsive .container .adapted-max-959px .offset-right-5px, .responsive .container .adapted-max-959px .offset-right-10px, .responsive .container .adapted-max-959px .offset-right-20px, .responsive .container .adapted-max-959px .offset-right-30px, .responsive .container .adapted-max-959px .offset-right-40px, .responsive .container .adapted-max-959px .offset-right-50px, .responsive .container .adapted-max-959px.offset-right-5px, .responsive .container .adapted-max-959px.offset-right-10px, .responsive .container .adapted-max-959px.offset-right-20px, .responsive .container .adapted-max-959px.offset-right-30px, .responsive .container .adapted-max-959px.offset-right-40px, .responsive .container .adapted-max-959px.offset-right-50px { margin-right: 0; } /* Main content inner grid (for page with right sidebar layout) - 516 pixels wide */ .responsive #main-content.page-left-col .one.column { width: 23px; } .responsive #main-content.page-left-col .one-sixth.columns { width: 66px; } .responsive #main-content.page-left-col .one-fifth.columns { width: 83px; } /* 83.2px */ .responsive #main-content.page-left-col .one-fourth.columns { width: 109px; } .responsive #main-content.page-left-col .three-tenths.columns { width: 134px; } /* 134.8px */ .responsive #main-content.page-left-col .one-third.columns { width: 152px; } .responsive #main-content.page-left-col .two-fifths.columns { width: 186px; } /* 186.4px */ .responsive #main-content.page-left-col .one-half.columns { width: 238px; } .responsive #main-content.page-left-col .three-fifths.columns { width: 289px; } /* 289.6px */ .responsive #main-content.page-left-col .two-thirds.columns { width: 324px; } .responsive #main-content.page-left-col .seven-tenths.columns { width: 341px; } /* 341.2px */ .responsive #main-content.page-left-col .three-fourths.columns { width: 367px; } .responsive #main-content.page-left-col .four-fifths.columns { width: 392px; } /* 392.8px */ .responsive #main-content.page-left-col .full-width.columns { width: 496px; } /* Main content inner grid (for page with left sidebar layout) - 564 pixels wide */ .responsive #main-content.page-right-col .one.column { width: 27px; } .responsive #main-content.page-right-col .one-sixth.columns { width: 74px; } .responsive #main-content.page-right-col .one-fifth.columns { width: 92px; } /* 92.8px */ .responsive #main-content.page-right-col .one-fourth.columns { width: 121px; } .responsive #main-content.page-right-col .three-tenths.columns { width: 149px; } /* 149.2px */ .responsive #main-content.page-right-col .one-third.columns { width: 168px; } .responsive #main-content.page-right-col .two-fifths.columns { width: 205px; } /* 205.6px */ .responsive #main-content.page-right-col .one-half.columns { width: 262px; } .responsive #main-content.page-right-col .three-fifths.columns { width: 318px; } /* 318.4px */ .responsive #main-content.page-right-col .two-thirds.columns { width: 356px; } .responsive #main-content.page-right-col .seven-tenths.columns { width: 374px; } /* 374.8px */ .responsive #main-content.page-right-col .three-fourths.columns { width: 403px; } .responsive #main-content.page-right-col .four-fifths.columns { width: 431px; } /* 431.2px */ .responsive #main-content.page-right-col .full-width.columns { width: 544px; } } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { .responsive .container { width: 300px; } .responsive .container .columns, .responsive .container .column { margin: 0; } .responsive .container .one.column, .responsive .container .one.columns, .responsive .container .two.columns, .responsive .container .one-sixth.columns, .responsive .container .one-fifth.columns, .responsive .container .three.columns, .responsive .container .one-fourth.columns, .responsive .container .three-tenths.columns, .responsive .container .four.columns, .responsive .container .one-third.columns, .responsive .container .two-fifths.columns, .responsive .container .five.columns, .responsive .container .six.columns, .responsive .container .one-half.columns, .responsive .container .seven.columns, .responsive .container .three-fifths.columns, .responsive .container .eight.columns, .responsive .container .two-thirds.columns, .responsive .container .seven-tenths.columns, .responsive .container .nine.columns, .responsive .container .three-fourths.columns, .responsive .container .four-fifths.columns, .responsive .container .ten.columns, .responsive .container .eleven.columns, .responsive .container .twelve.columns, .responsive .container .full-width.columns { width: 300px; } /* Offsets */ .responsive .container .offset-left-5px, .responsive .container .offset-left-10px, .responsive .container .offset-left-20px, .responsive .container .offset-left-30px, .responsive .container .offset-left-40px, .responsive .container .offset-left-50px { margin-left: 0; } .responsive .container .offset-right-5px, .responsive .container .offset-right-10px, .responsive .container .offset-right-20px, .responsive .container .offset-right-30px, .responsive .container .offset-right-40px, .responsive .container .offset-right-50px { margin-right: 0; } /* Main content inner grid (for page with sidebar layout) - 300 pixels wide */ .responsive #main-content.page-left-col .one.column, .responsive #main-content.page-left-col .one-sixth.columns, .responsive #main-content.page-left-col .one-fifth.columns, .responsive #main-content.page-left-col .one-fourth.columns, .responsive #main-content.page-left-col .three-tenths.columns, .responsive #main-content.page-left-col .one-third.columns, .responsive #main-content.page-left-col .two-fifths.columns, .responsive #main-content.page-left-col .one-half.columns, .responsive #main-content.page-left-col .three-fifths.columns, .responsive #main-content.page-left-col .two-thirds.columns, .responsive #main-content.page-left-col .seven-tenths.columns, .responsive #main-content.page-left-col .three-fourths.columns, .responsive #main-content.page-left-col .four-fifths.columns, .responsive #main-content.page-left-col .full-width.columns, .responsive #main-content.page-right-col .one.column, .responsive #main-content.page-right-col .one-sixth.columns, .responsive #main-content.page-right-col .one-fifth.columns, .responsive #main-content.page-right-col .one-fourth.columns, .responsive #main-content.page-right-col .three-tenths.columns, .responsive #main-content.page-right-col .one-third.columns, .responsive #main-content.page-right-col .two-fifths.columns, .responsive #main-content.page-right-col .one-half.columns, .responsive #main-content.page-right-col .three-fifths.columns, .responsive #main-content.page-right-col .two-thirds.columns, .responsive #main-content.page-right-col .seven-tenths.columns, .responsive #main-content.page-right-col .three-fourths.columns, .responsive #main-content.page-right-col .four-fifths.columns, .responsive #main-content.page-right-col .full-width.columns { width: 300px; } } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { .responsive .container { width: 420px; } .responsive .container .columns, .responsive .container .column { margin: 0; } .responsive .container .one.column, .responsive .container .one.columns, .responsive .container .two.columns, .responsive .container .one-sixth.columns, .responsive .container .one-fifth.columns, .responsive .container .three.columns, .responsive .container .one-fourth.columns, .responsive .container .three-tenths.columns, .responsive .container .four.columns, .responsive .container .one-third.columns, .responsive .container .two-fifths.columns, .responsive .container .five.columns, .responsive .container .six.columns, .responsive .container .one-half.columns, .responsive .container .seven.columns, .responsive .container .three-fifths.columns, .responsive .container .eight.columns, .responsive .container .two-thirds.columns, .responsive .container .seven-tenths.columns, .responsive .container .nine.columns, .responsive .container .three-fourths.columns, .responsive .container .four-fifths.columns, .responsive .container .ten.columns, .responsive .container .eleven.columns, .responsive .container .twelve.columns, .responsive .container .full-width.columns { width: 420px; } /* Main content inner grid (for page with sidebar layout) - 420 pixels wide */ .responsive #main-content.page-left-col .one.column, .responsive #main-content.page-left-col .one-sixth.columns, .responsive #main-content.page-left-col .one-fifth.columns, .responsive #main-content.page-left-col .one-fourth.columns, .responsive #main-content.page-left-col .three-tenths.columns, .responsive #main-content.page-left-col .one-third.columns, .responsive #main-content.page-left-col .two-fifths.columns, .responsive #main-content.page-left-col .one-half.columns, .responsive #main-content.page-left-col .three-fifths.columns, .responsive #main-content.page-left-col .two-thirds.columns, .responsive #main-content.page-left-col .seven-tenths.columns, .responsive #main-content.page-left-col .three-fourths.columns, .responsive #main-content.page-left-col .four-fifths.columns, .responsive #main-content.page-left-col .full-width.columns, .responsive #main-content.page-right-col .one.column, .responsive #main-content.page-right-col .one-sixth.columns, .responsive #main-content.page-right-col .one-fifth.columns, .responsive #main-content.page-right-col .one-fourth.columns, .responsive #main-content.page-right-col .three-tenths.columns, .responsive #main-content.page-right-col .one-third.columns, .responsive #main-content.page-right-col .two-fifths.columns, .responsive #main-content.page-right-col .one-half.columns, .responsive #main-content.page-right-col .three-fifths.columns, .responsive #main-content.page-right-col .two-thirds.columns, .responsive #main-content.page-right-col .seven-tenths.columns, .responsive #main-content.page-right-col .three-fourths.columns, .responsive #main-content.page-right-col .four-fifths.columns, .responsive #main-content.page-right-col .full-width.columns { width: 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-grid:before, .panel-grid:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .row:after, .clearfix:after, .panel-grid:after { clear: both; } /* You can also use a
to clear columns */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }