/** Skeleton V1.1* Copyright 2011, Dave Gamache* www.getskeleton.com* Free to use under the MIT license.* http://www.opensource.org/licenses/mit-license.php* 8/17/2011*//* Table of Contents==================================================#Base 960 Grid#Tablet (Portrait)#Mobile (Portrait)#Mobile (Landscape)#Clearing *//* #Base 960 Grid================================================== */.container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }.column, .columns                           { float: left; display: inline; margin-left: 10px; margin-right: 10px; }.row                                        { margin-bottom: 40px; }/* Nested Column Classes */.column.alpha, .columns.alpha               { margin-left: 0; }.column.omega, .columns.omega               { margin-right: 0; }/* Base Grid */.container .one.column                      { 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; }/* Offsets */.container .offset-by-one                   { padding-left: 60px;  }.container .offset-by-two                   { padding-left: 120px; }.container .offset-by-three                 { padding-left: 180px; }.container .offset-by-four                  { padding-left: 240px; }.container .offset-by-five                  { padding-left: 300px; }.container .offset-by-six                   { padding-left: 360px; }.container .offset-by-seven                 { padding-left: 420px; }.container .offset-by-eight                 { padding-left: 480px; }.container .offset-by-nine                  { padding-left: 540px; }.container .offset-by-ten                   { padding-left: 600px; }.container .offset-by-eleven                { padding-left: 660px; }.container .offset-by-twelve                { padding-left: 720px; }.container .offset-by-thirteen              { padding-left: 780px; }.container .offset-by-fourteen              { padding-left: 840px; }.container .offset-by-fifteen               { padding-left: 900px; }/* #Tablet (Portrait)================================================== *//* Note: Design for a width of 768px */@media only screen and (min-width: 768px) and (max-width: 959px) {.container                                  { width: 768px; }.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; }.container .one.column                      { 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; }/* Offsets */.container .offset-by-one                   { padding-left: 48px; }.container .offset-by-two                   { padding-left: 96px; }.container .offset-by-three                 { padding-left: 144px; }.container .offset-by-four                  { padding-left: 192px; }.container .offset-by-five                  { padding-left: 240px; }.container .offset-by-six                   { padding-left: 288px; }.container .offset-by-seven                 { padding-left: 336px; }.container .offset-by-eight                 { padding-left: 348px; }.container .offset-by-nine                  { padding-left: 432px; }.container .offset-by-ten                   { padding-left: 480px; }.container .offset-by-eleven                { padding-left: 528px; }.container .offset-by-twelve                { padding-left: 576px; }.container .offset-by-thirteen              { padding-left: 624px; }.container .offset-by-fourteen              { padding-left: 672px; }.container .offset-by-fifteen               { padding-left: 720px; }}/*  #Mobile (Portrait)================================================== *//* Note: Design for a width of 320px */@media only screen and (max-width: 767px) {.container { width: 300px; }.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: 300px; }.container .one_half_fluid,.container .one_half_fluid.last,.container .one_third_fluid,.container .one_third_fluid.last,.container .one_fourth_fluid,.container .one_fourth_fluid.last,.container .two_third_fluid,.container .two_third_fluid.last,.container .three_fourth_fluid,.container .three_fourth_fluid.last,.container .one_fifth_fluid,.container .one_fifth_fluid.last { width: 100%; margin: 0; }/* 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: 420px; }.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: 420px; }.container .one_half_fluid,.container .one_half_fluid.last,.container .one_third_fluid,.container .one_third_fluid.last,.container .one_fourth_fluid,.container .one_fourth_fluid.last,.container .two_third_fluid,.container .two_third_fluid.last,.container .three_fourth_fluid,.container .three_fourth_fluid.last,.container .one_fifth_fluid,.container .one_fifth_fluid.last { width: 100%; margin: 0; }}/* #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 <div class="row"> */.clearfix:before,.clearfix:after,.row:before,.row:after {content: '\0020';display: block;overflow: hidden;visibility: hidden;width: 0;height: 0; }.row:after,.clearfix:after {clear: both; }.row,.clearfix {zoom: 1; }/* You can also use a <br class="clear" /> to clear columns */.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}