/**
 * grid.css
 * 
 * This is a 12 column grid. Example of application for a 2 column section:
 * 
 * <div class="section group> 
 *  <div class="col span-6-of-12>
 *    <!-- COLUMN 1 CONTENT GOES HERE -->
 *  </div>
 *  <div class="col span-6-of-12>
 *    <!-- COLUMN 2 CONTENT GOES HERE -->
 *  </div>
 * </div>

 * Index
 * 
 * - Grid: Sections
 * - Grid: Columns
 * - Grid: Grouping
 * - Grid: Column Width
 * 
 */

/*-----------------------------------------------------------------------
# Grid: Sections
------------------------------------------------------------------------*/

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*-----------------------------------------------------------------------
# Grid: Columns
------------------------------------------------------------------------*/

.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.4%;
}
.col:first-child { margin-left: 0; }

/*-----------------------------------------------------------------------
# Grid: Grouping
------------------------------------------------------------------------*/

.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }


/*-----------------------------------------------------------------------
# Grid: Column Width
------------------------------------------------------------------------*/

.span-12-of-12 {
	width: 100%;
}

.span-11-of-12 {
  	width: 91.55%;
}
.span-10-of-12 {
  	width: 83.1%;
}

.span-9-of-12 {
  	width: 74.65%;
}

.span-8-of-12 {
  	width: 66.2%;
}

.span-7-of-12 {
  	width: 57.75%;
}

.span-6-of-12 {
  	width: 49.3%;
}

.span-5-of-12 {
  	width: 40.85%;
}

.span-4-of-12 {
  	width: 32.4%;
}

.span-3-of-12 {
  	width: 23.95%;
}

.span-2-of-12 {
  	width: 15.5%;
}

.span-1-of-12 {
  	width: 7.05%;
}