.colWrap { /* colWrap is a generic wrapper for multiple columns */
	width: 100%;
	background-color: transparent;  
	display: block;
} 
	
.col {	 /* col represents an individual column */
	float: left;
	background-color: transparent;
	margin: 0;
	padding: 0;
	width: 100%;
	background: transparent;
}

.col .pad { 
	padding: 11px;  /*  controls the amount of padding in all columns */
	width: auto;
	margin-left: 9px; /* controls the column gutters */ 
	border: 1px solid #666;   /* if needed, borders may be added to all columns here */
	background-color: transparent;   /*background color of all columns can be specified here*/
}

.c1 .pad {margin-left: 0;}  /* turns off the column gutter that would otherwise appear on the left side of the first column */ 

/******************************** 
6 COLUMNS
********************************/

.colWrap.col6 .col {width: 17%;}

.colWrap.col6 .c1,
.colWrap.col6 .c2,
.colWrap.col6 .c3,
.colWrap.col6 .c4,
.colWrap.col6 .c5,
.colWrap.col6 .c6 {display: block;} /* ensures that all 6 columns display */

.colWrap.col6 .c1 {width: 15%;}

/******************************** 
5 COLUMNS
********************************/

.colWrap.col5 .col {width: 20%;}

.colWrap.col5 .c1,
.colWrap.col5 .c2,
.colWrap.col5 .c3,
.colWrap.col5 .c4,
.colWrap.col5 .c5 {display: block;} /* ensures that all 5 columns display */

.colWrap.col5 .c6 {display: none;} /* prevents unwanted columns from displaying */

/******************************** 
4 COLUMNS
********************************/

.colWrap.col4 .col {
	width: 25%; 
}

.colWrap.col4 .c1,
.colWrap.col4 .c2,
.colWrap.col4 .c3,
.colWrap.col4 .c4 {display: block;} /* ensures that all 4 columns display */

.colWrap.col4 .c5,
.colWrap.col4 .c6 {display: none;} /* prevents unwanted columns from displaying */

/********************************
3 COLUMNS
********************************/
		
.colWrap.col3 .col {width: 33%;}

.colWrap.col3 .c1,
.colWrap.col3 .c2,
.colWrap.col3 .c3 {display: block;} /* ensures that all 3 columns display */

.colWrap.col3 .c4,
.colWrap.col3 .c5,
.colWrap.col3 .c6 {display: none;} /* prevents unwanted columns from displaying */

.colWrap.col3 .c1 {width: 34%;}

/********************************
2 COLUMNS 
********************************/
.colWrap.col2 .col {width: 50%;}

.colWrap.col2 .c1,
.colWrap.col2 .c2 {display: block;} /* ensures that both columns display */

.colWrap.col2 .c3,
.colWrap.col2 .c4,
.colWrap.col2 .c5,
.colWrap.col2 .c6 {display: none;} /* prevents unwanted columns from displaying */


/********************************
WIDTH OVERRIDES 
********************************
These classes (which only define width) can, in the HTML, be used to
override the widths of individual columns by being specified inline
and space-delimited directly after the class that specifies the
column number like <div class="col c1 w33"> -- this indicates that
column one has a width of 33.33%.
********************************/

/***** 1/6 or 16.66% *****/
.colWrap.col2 .w16,
.colWrap.col3 .w16,
.colWrap.col4 .w16,
.colWrap.col5 .w16,
.colWrap.col6 .w16 {width: 16.66%;}

/***** 1/5 or 20% *****/
.colWrap.col2 .w20,
.colWrap.col3 .w20,
.colWrap.col4 .w20,
.colWrap.col5 .w20,
.colWrap.col6 .w20 {width: 20%;}

/***** 1/4 or 25% *****/
.colWrap.col2 .w25,
.colWrap.col3 .w25,
.colWrap.col4 .w25,
.colWrap.col5 .w25,
.colWrap.col6 .w25 {width: 25%;}

/***** 3/10 or 30% *****/
.colWrap.col2 .w30,
.colWrap.col3 .w30,
.colWrap.col4 .w30,
.colWrap.col5 .w30,
.colWrap.col6 .w30  {width: 30%;}

/***** 1/3 or 33.33% *****/
.colWrap.col2 .w33,
.colWrap.col3 .w33,
.colWrap.col4 .w33,
.colWrap.col5 .w33,
.colWrap.col6 .w33  {width: 33.33%;}

/***** 2/5 or 40% *****/
.colWrap.col2 .w40,
.colWrap.col3 .w40,
.colWrap.col4 .w40,
.colWrap.col5 .w40,
.colWrap.col6 .w40  {width: 40%;}

/***** 1/2 or 50% *****/
.colWrap.col2 .w50,
.colWrap.col3 .w50,
.colWrap.col4 .w50,
.colWrap.col5 .w50,
.colWrap.col6 .w50 {width: 50%;}

/***** 3/5 or 60% *****/
.colWrap.col2 .w60,
.colWrap.col3 .w60,
.colWrap.col4 .w60,
.colWrap.col5 .w60,
.colWrap.col6 .w60  {width: 60%;}

/***** 2/3 or 66.66% *****/
.colWrap.col2 .w66,
.colWrap.col3 .w66,
.colWrap.col4 .w66,
.colWrap.col5 .w66,
.colWrap.col6 .w66  {width: 66.66%;}

/***** 7/10 or 70% *****/
.colWrap.col2 .w70,
.colWrap.col3 .w70,
.colWrap.col4 .w70,
.colWrap.col5 .w70,
.colWrap.col6 .w70  {width: 70%;}

/***** 4/5 or 80% *****/
.colWrap.col2 .w80,
.colWrap.col3 .w80,
.colWrap.col4 .w80,
.colWrap.col5 .w80,
.colWrap.col6 .w80  {width: 80%;}

/***** 5/6 or 83.34% *****/
.colWrap.col2 .w83,
.colWrap.col3 .w83,
.colWrap.col4 .w83,
.colWrap.col5 .w83,
.colWrap.col6 .w83  {width: 83.34%;}

/***** 1/1 or 100% *****/
.colWrap.col2 .w100,
.colWrap.col3 .w100,
.colWrap.col4 .w100,
.colWrap.col5 .w100,
.colWrap.col6 .w100  {width: 100%;}