/* -------------------------------------------------------------- 

   == STRUCTURE: ========================

    * Page width:            954 px

    * Number of columns:     6

    * Column width:          144 px

    * Margin width:          18 px

   ======================================



-------------------------------------------------------------- */



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

.container {

  width: 954px;

  margin: 0 auto 0 3.75em;

}



/* Use this class on any div.span / container to see the grid. */

.showgrid { 

  background: url(src/grid.png); 

}



/* Body margin for a sensile default look. */

body {

  margin:0 0 1.5em 0;	

}





/* Columns

-------------------------------------------------------------- */



/* Sets up basic grid floating and margin. */

div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6 {float:left;margin-right: 18px;}



/* The last column in a row needs this class. */

div.last { margin-right: 0; }



/* Use these classes to set the width of a column. */

.span-1  { width: 144px;}

.span-2  { width: 306px;}

.span-3  { width: 468px;}

.span-4  { width: 630px;}

.span-5  { width: 792px;}

.span-6, div.span-6 { width: 954px; margin: 0; }





/* Add these to a column to append empty cols. */

.append-1  { padding-right: 162px;}

.append-2  { padding-right: 324px;}

.append-3  { padding-right: 486px;}

.append-4  { padding-right: 648px;}

.append-5  { padding-right: 810px;}





/* Add these to a column to prepend empty cols. */

.prepend-1  { padding-left: 162px;}

.prepend-2  { padding-left: 324px;}

.prepend-3  { padding-left: 486px;}

.prepend-4  { padding-left: 648px;}

.prepend-5  { padding-left: 810px;}







/* Border on right hand side of a column. */

div.border {

  border-right: 1px solid #EEE;

}



div.border-bottom {

  border-bottom: 1px solid #EEE;

}



div.border-left {

  border-left: 1px solid #EEE;

  padding: 0 0 0 9px;

}



div.border-right {

  border-right: 1px solid #EEE;

  padding: 0 9px 0 0;

}



div.border-top {

  border-left: 1px solid #EEE;

  padding: 9px 0 0 0;

}



/* Border with more whitespace, spans one column. */

div.colborder {

  padding-right:138px;

  margin-right:135px;

  border-right: 1px solid #eee;

}



/* 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: -162px;}

.pull-2 { margin-left: -324px;}

.pull-3 { margin-left: -486px;}

.pull-4 { margin-left: -648px;}

.pull-5 { margin-left: -810px;}

.pull-6 { margin-left: -972px;}



.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6 {float:left;position:relative;}





.push-1 { margin: 0 -162px 1.5em 162px;}

.push-2 { margin: 0 -324px 1.5em 324px;}

.push-3 { margin: 0 -486px 1.5em 486px;}

.push-4 { margin: 0 -648px 1.5em 648px;}

.push-5 { margin: 0 -810px 1.5em 810px;}

.push-6 { margin: 0 -972px 1.5em 972px;}



.push-1, .push-2, .push-3, .push-4, .push-5, .push-6 {float:right;position:relative;}







/* Misc classes and elements

-------------------------------------------------------------- */



/* Use a .box to create a padded box inside a column.  */ 

.box { 

  padding: 1.125em 1.125em; 

  margin: 0 0 1.5em 0;

  /*background: #E5ECF9;*/

  border-left: 1px solid #cccccc;

}



.box-home { 

	padding: 1.125em 1.125em 1.125em 0; 

  margin: 0 0 1.5em 0;

  /*border-right: 1px solid #222222;*/

  /*background: #E5ECF9;*/

}



.box-home2 { 

	padding: 1.125em 1.125em 1.125em 0; 

  margin: 0 0 1.5em 0;

  border-right: 1px solid #EEEEEE;

/* border-top: 1px solid #222222; */

  /*background: #E5ECF9;*/

}



.box-home3 { 

	padding: 1.125em 1.125em 1.125em 0; 

  margin: 0 0 1.5em 0;

  border-right: 1px solid #EEE;

    border-bottom: 1px solid #EEE;

  /*background: #E5ECF9;*/

}



/* Use this to create a horizontal ruler across a column. */

hr {

  background: #ccc; 

  color: #ccc;

  clear: both; 

  float: none; 

  width: 100%; 

  height: 0.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: "."; 

    display: block; 

    height: 0; 

    clear: both; 

    visibility: hidden;

}

.clearfix, .container {display: inline-block;}

* html .clearfix,

* html .container {height: 1%;}

.clearfix, .container {display: block;}



/* Regular clearing

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



.clear { clear:both; }