/********************************
COLUMN FORMATTING
********************************
This section includes the default styles for multi-column formats.

Naming conventions for these divs are as follows:

.colWrap -- a generic wrapper for multiple columns that is 100%
wide. This wrapper class must always be present when creating a
multi-column layout. In the HTML, it must be accompanied by a class
that selects the number of columns.

.col2, .col3, .col4, .col5, .col6 -- these classes represent column
formats, the names of which indicate the number of the columns they
allow (see explicit definitions below). In the HTML, this class MUST
be specified inline and space-delimited directly after the colWrap
class like <div class="colWrap col3"> -- this would create a 3
column layout.

.col2 -- this is a 2 column format 
.col3 -- this is a 3 column format 
.col4 -- this is a 4 column format 
.col5 -- this is a 5 column format 
.col6 -- this is a 6 column format

.col -- represents an individual, generic column which is floated
left. In the HTML, it MUST be accompanied by a class that selects
the column number.

.c1, .c2, .c3, .c4, .c5, .c6 -- these represent column numbers (see
explicit definitions below). In the HTML, this class is to be
specified inline and space-delimited directly after the col class
like <div class="col c1"> -- this indicates that the column is
column number 1.

.c1 -- this is column 1 
.c2 -- this is column 2 
.c3 -- this is column 3 
.c4 -- this is column 4 
.c5 -- this is column 5 
.c6 -- this is column 6

.col .pad -- controls the amount of padding in each column, as well
as the column gutters which are determined by a margin-left
property.

.w16, .w20, .w25, .w33, .w50, etc. -- these are classes that allow
you to override the width of individual columns. See "WIDTH
OVERRIDES" section below for more details.

********************************/
.col1,
.col2,
.col3,
.col4,
.col5,
.col6 { /* a generic wrapper style for multiple column formats */
	width: 100%;
	background-color: transparent;  
	display: block;
} 
	
.c1,
.c2,
.c3,
.c4,
.c5,
.c6 {	 /* a generic style represents an individual column */
	float: left;
	background-color: transparent;
	margin: 0;
	padding: 0;
	width: 100%;
	background: transparent;
}

.c1 .pad,
.c2 .pad,
.c3 .pad,
.c4 .pad,
.c5 .pad,
.c6 .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
********************************/
.col6 .c1,
.col6 .c2,
.col6 .c3,
.col6 .c4,
.col6 .c5,
.col6 .c6 {
	width: 17%; 
	display: block;  /* ensures that all 6 columns display */
	}

.col6 .c1 {width: 15%;} /* first column width tweak */

/******************************** 
5 COLUMNS
********************************/
.col5 .c1,
.col5 .c2,
.col5 .c3,
.col5 .c4,
.col5 .c5 {
	width: 20%;
	display: block; /* ensures that all 5 columns display */
	}
	
.col5 .c6 {display: none;} /* prevents unwanted columns from displaying */

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

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

/********************************
3 COLUMNS
********************************/
.col3 .c1,
.col3 .c2,
.col3 .c3 {
	width: 33%;
	display: block; /* ensures that all 3 columns display */
	}

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

.col3 .c1 {width: 34%;} /* first column width tweak */

/********************************
2 COLUMNS 
********************************/
.col2 .c1,
.col2 .c2 {
	width: 50%;
	display: block; /* ensures that both columns display */
	}

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