/* -------------------------------------------------------------- 
  == STRUCTURE: ========================
   * Page width:            936 px
   * Number of columns:     20
   * Column width:          24 px
   * Margin width:          24 px
  ======================================
   
  By default, the grid is 936px wide, with 20 columns 
  spanning 24px, and a 24px margin between columns.
  
  If you need fewer or more columns, use this formula to calculate
  the new total width: 
  
  Total width = (number_of_columns * column_width) - margin_width
-------------------------------------------------------------- */

/* A page container should group all columns. */

body {min-width:960px;}
#page {width:936px;margin:0 auto; padding-top:20px;}

/* Columns
-------------------------------------------------------------- */
/*.section {float: left;margin-right: 24px;}*/

/* Use these classes to set the width of a column. */
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.third, div.two-thirds, div.sixth, div.article, div.aside, #footer .search, div.half, div.fourth, div.fifth  {float:left;margin-right:24px;}

/* The last column in a row needs this class. */
.last, div.last, div.aside, #footer .search {margin-right:0;}

.span-1  {width:24px;}
.span-2  {width:72px;}
.span-3  {width:120px;}
.sixth   {width:136px;}
.span-4, #footer .search, .fifth {width:168px;}
.span-5, .fourth  {width:216px;}
.span-6, .aside {width:264px;}
.third   {width:296px;}
.article .third {width:200px;}
.span-7  {width:312px;}
.span-8  {width:360px;}
.span-9  {width:408px;}
.span-10, .half {width:456px;}
.span-11 {width:504px;}
.span-12 {width:552px;}
.span-13 {width:600px;}
.two-thirds {width:616px; }
.span-14, .article {width:648px;}
.span-15 {width:696px;}
.span-16, .sitenav {width:744px;}
.span-17 {width:792px;}
.span-18 {width:840px;}
.span-19 {width:888px;}
.span-20, div.span-20 {width:936px; margin:0;}

/* Add these to a column to append empty cols. (Add more when needed.) */
.add-1  {padding-right:48px;}
.add-2  {padding-right:96px;}
.add-3  {padding-right:144px;}
.add-4  {padding-right:192px;}

/* Add these to a column to prepend empty cols. */
.pre-1  {padding-left:48px;}
.pre-2  {padding-left:96px;}
.pre-3  {padding-left:144px;}
.pre-4  {padding-left:192px;}

/* Border on right hand side of a column. */
div.border, div.article{padding-right:11px;margin-right:12px;border-right:1px solid #ddd;padding-bottom:1.8em;}

/* Border with more whitespace, spans one column. */
div.colborder {padding-right:36px;margin-right:35px;border-right:1px solid #ddd;}

/* Use these classes on an element to push it into the 
   next column, or to pull it into the previous column. */

.pull-025 {margin-left:-12px;}
.pull-050 {margin-left:-24px;}
.pull-075 {margin-left:-36px;}
.pull-1 {margin-left:-48px;}
.pull-2 {margin-left:-96px;}
.pull-3 {margin-left:-144px;}
.pull-4 {margin-left:-192px;}
.pull-5 {margin-left:-192px;}
.pull-10 {margin-left:-480px;}

.pull-025, .pull-050, .pull-075, .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-10 {position:relative;}

.push-025 {margin:0 -12px 0 12px;}
.push-050 {margin:0 -24px 0 24px;}
.push-075 {margin:0 -36px 0 36px;}
.push-1 {margin:0 -48px 0 48px;}
.push-2 {margin:0 -96px 0 96px;}
.push-3 {margin:0 -144px 0 144px;}
.push-4 {margin:0 -192px 0 192px;}
.push-5 {margin:0 -240px 0 240px;}
.push-10 {margin:0 -480px 0 480px;}

.push-025, .push-050, .push-075, .push-1, .push-2, .push-3, .push-4, .push-5, .push-10 {position:relative;}