/* -------------------------------------------------------------- 
  == 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.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;}
.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;}
.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: 0 11px;
  margin: 0 12px;
  border-right:1px solid #ddd;
  border-left:1px solid #ddd;
}

/* 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-025, .pull-050, .pull-075, .pull-1, .pull-2, .pull-3, .pull-4 {
  /*float:left;*/
  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-025, .push-050, .push-075, .push-1, .push-2, .push-3, .push-4 {
  float:right;
  position:relative;
}