/* -------------------------------------------------------------- 
   
   grid.css
   * Sets up an easy-to-use grid of 24 columns.
   
   By default, the grid is 950px wide, with 24 columns 
   spanning 30px, and a 10px margin between columns.
   

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

/* A container should group all your columns. */
.container {
  width: 982px;
  margin: 0 auto 0 auto;
  height:auto;
  border:1px solid #797979;
}

/* Use this class on any div.span / container to see the grid. */
.showgrid { 
  background: url(images/grid.png); 
}

/* Body margin for a sensile default look. */
body {
  margin: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, 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.span-21, div.span-22, div.span-23, div.span-24 {
  float: left;
}


/* Use these classes to set the width of a column. */
.span-1 {width:31px;}
.span-2 {width:72px;}
.span-3 {width:113px;}
.span-4 {width:154px;}
.span-5 {width:195px;}
.span-6 {width:236px;}
.span-7 {width:277px;}
.span-8 {width:318px;}
.span-9 {width:359px;}
.span-10 {width:400px;}
.span-11 {width:441px;}
.span-12 {width:482px;}
.span-13 {width:523px;}
.span-14 {width:564px;}
.span-15 {width:605px;}
.span-16 {width:646px;}
.span-17 {width:687px;}
.span-18 {width:728px;}
.span-19 {width:769px;}
.span-20 {width:810px;}
.span-21 {width:851px;}
.span-22 {width:892px;}
.span-23 {width:933px;}
.span-24, div.span-24 {width:982px;margin:0;}


/* Border on right hand side of a column. */
div.border {
  padding-right: 4px;
  margin-right: 5px;
  border-right: 1px solid #eee;
}

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

div.border {
border: 1px solid #000; float:inherit;
}



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

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


/* 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: "."; 
    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; }

.noFloat {float:none} /* need this? */