/* -------------------------------------------------------------- 
   
   grid.css
   
-------------------------------------------------------------- */

/* Main container. */
.container { width: 1024px; }

/* Columns
-------------------------------------------------------------- */

/* Sets up basic grid floating and margin. */
.column, div.sidebar, div.content, 
div.content-header, div.content-navigation, div.content-headline,
div.content-teaser, div.content-body, div.content-sidebar, 
div.span-1, div.span-2, div.span-3 {
  float: left; 
}
div.span-1, div.span-2, div.span-3 {
  margin-right: 21px;
}

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

/* The main columns. */
.sidebar  { width: 176px; }
.content  { width: 848px; }

/* The content columns. */
.content-header, .content-teaser { width: 848px; margin: 0;text-align:right;background:#fff;height:108px; }
.content-navigation { width: 827px; height: 20px; padding-left: 21px; padding-top:4px; }
.content-headline { width: 573px; padding-top: 20px; padding-left: 21px; margin-right: 255px; }
.content-body  { position:relative; width: 553px; padding:20px 20px 0 21px; }
.content-sidebar  { width: 221px; padding-top: 20px; padding-left: 11px; margin-right: 22px }
.content-footer  { width: 552px; margin: 20px 21px; clear:both; }

/* The content body columns */
.span-1 { width: 170px; }
.span-2 { width: 361px; }
.span-3 { width: 552px; margin: 0 }

/* Add these to a column to append empty cols. */
.append-1  { padding-right: 170px; }  
.append-2  { padding-right: 361px; } 

/* Add these to a column to prepend empty cols. */
.prepend-1  { padding-left: 170px; }  
.prepend-2  { padding-left: 361px; } 


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

.pull-1 { margin-left: -170px; }
.pull-2 { margin-left: -361px; }

.pull-1, .pull-2 {
  float:left;
	position:relative;
}

.push-1 { margin: 0 -170px 1.5em 170px; }
.push-2 { margin: 0 -361px 1.5em 361px; }

.push-1, .push-2 { 
  float: right;
	position:relative;
}


/* Misc classes and elements
-------------------------------------------------------------- */

/* In case you need to add a gutter above/below an element */
.prepend-top { 
	margin-top:1.5em; 
}
.append-bottom { 
	margin-bottom:1.5em; 
}

/* Use a .box to create a padded box inside a column.  */ 
.box { 
  padding: 1.5em; 
  margin-bottom: 1.5em; 
  background: #E5ECF9; 
}

/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.45em;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}


/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
    content: "\0020"; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
    overflow:hidden; 
}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }