/*
* 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
*/
.container{position:relative; width:960px; margin:0 auto}
.column, .columns{float:left; display:inline; margin-left:20px; margin-right:20px}
.row{margin-bottom:20px}
/* Nested Column Classes */
 .column.alpha, .columns.alpha{margin-left:0}
.column.omega, .columns.omega{margin-right:0}
/* Base Grid */
 .container .one.column{width:20px}
.container .two.columns{width:80px}
.container .three.columns{width:140px}
.container .four.columns{width:200px}
.container .five.columns{width:260px}
.container .six.columns{width:320px}
.container .seven.columns{width:380px}
.container .eight.columns{width:440px}
.container .nine.columns{width:500px}
.container .ten.columns{width:560px}
.container .eleven.columns{width:620px}
.container .twelve.columns{width:680px}
.container .thirteen.columns{width:740px}
.container .fourteen.columns{width:800px}
.container .fifteen.columns{width:860px}
.container .sixteen.columns{width:920px}
.container .one-third.column{width:280px}
.container .two-thirds.column{width:600px}
/* Offsets */
 .container .offset-by-one{padding-left:40px}
.container .offset-by-two{padding-left:100px}
.container .offset-by-three{padding-left:160px}
.container .offset-by-four{padding-left:220px}
.container .offset-by-five{padding-left:280px}
.container .offset-by-six{padding-left:340px}
.container .offset-by-seven{padding-left:400px}
.container .offset-by-eight{padding-left:460px}
.container .offset-by-nine{padding-left:520px}
.container .offset-by-ten{padding-left:580px}
.container .offset-by-eleven{padding-left:640px}
.container .offset-by-twelve{padding-left:700px}
.container .offset-by-thirteen{padding-left:760px}
.container .offset-by-fourteen{padding-left:820px}
.container .offset-by-fifteen{padding-left:880px}

/* #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}
 .column, .columns{float:left; display:inline; margin-left:10px; margin-right:10px}
 .row{margin-bottom:20px}

/* Nested Column Classes */
.column.alpha, .columns.alpha{margin:0}
 .column.omega, .columns.omega{margin:0}
 .container .one-third.column{margin:10px 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{width:280px}
 .container .one-third.column, .container .two-thirds.column{width:280px}

 /* 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}
 .column, .columns{float:left; display:inline; margin-left:10px; margin-right:10px}
 .row{margin-bottom:20px}

/* Nested Column Classes */
.column.alpha, .columns.alpha{margin:0}
 .column.omega, .columns.omega{margin:0}
 .container .one-third.column{margin:10px 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{width:400px}
 .container .one-third.column, .container .two-thirds.column{width:400px}
}
/* #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}