/*
	WALLER COLUMNS
	by:Steven Waller
	
	PROPS:
	Thanks to Malo for the inspiration http://code.google.com/p/malo/
	
	NAMING CONVENTIONS:
	
	Regular two column layout:
	col_1_2 = Column one of two
	col_2_2 = Column two of two
	
	Four column layout with the first column spanning three of the four columns:
	col_1-3_4 = Column one through three of three
	col_4_4 = Column four of four
*/

/* All Columns
----------------------------------------------------------------------------------------------------*/
.col_1_2,
.col_2_2,
.col_1_3,
.col_2_3,
.col_3_3,
.col_1-2_3,
.col_2-3_3,
.col_1_4,
.col_2_4,
.col_3_4,
.col_4_4,
.col_1-2_4,
.col_2-3_4,
.col_3-4_4,
.col_1-3_4,
.col_2-4_4,
.col_1_5,
.col_2_5,
.col_3_5,
.col_4_5,
.col_5_5,
.col_1-2_5,
.col_2-3_5,
.col_3-4_5,
.col_4-5_5,
.col_1-3_5,
.col_2-4_5,
.col_3-5_5,
.col_1-4_5,
.col_2-5_5{
	float:left;
	display:inline;
	overflow:hidden;
	*margin-left:-0.04em; /*IE margin hack to keep the columns from being to wide and wrapping*/
}


/* Two Columns
----------------------------------------------------------------------------------------------------*/
.col_1_2,
.col_2_2{
	width:50%;
}

/* Three Columns
----------------------------------------------------------------------------------------------------*/
.col_1_3,
.col_2_3,
.col_3_3{
	width:33.33%;
}
.col_1-2_3,
.col_2-3_3{
	width:66.66%;
}

/* Four Columns
----------------------------------------------------------------------------------------------------*/
.col_1_4,
.col_2_4,
.col_3_4,
.col_4_4{
	width:25%;
}
.col_1-2_4,
.col_2-3_4,
.col_3-4_4{
	width:50%;
}
.col_1-3_4,
.col_2-4_4{
	width:75%;
}

/* Five Columns
----------------------------------------------------------------------------------------------------*/
.col_1_5,
.col_2_5,
.col_3_5,
.col_4_5,
.col_5_5{
	width:20%;
}
.col_1-2_5,
.col_2-3_5,
.col_3-4_5,
.col_4-5_5{
	width:40%;
}
.col_1-3_5,
.col_2-4_5,
.col_3-5_5{
	width:60%;
}
.col_1-4_5,
.col_2-5_5{
	width:80%;
}

/* Content
----------------------------------------------------------------------------------------------------*/
/* uses 20px gutters. Feel free to change, it won't break anything */
.content{
	padding:0 10px;
	overflow:hidden;
}
.col_1_2 .content,
.col_1_3 .content,
.col_1-2_3 .content,
.col_1_4 .content,
.col_1-2_4 .content,
.col_1-3_4 .content,
.col_1_5 .content,
.col_1-2_5 .content,
.col_1-3_5 .content,
.col_1-4_5 .content,
.col_1-2_5 .content,
.col_1-3_5 .content,
.col_1-4_5 .content{
	padding-left:0;
}

.col_2_2 .content,
.col_3_3 .content,
.col_2-3_3 .content,
.col_4_4 .content,
.col_3-4_4 .content,
.col_2-4_4 .content,
.col_5_5 .content,
.col_4-5_5 .content,
.col_3-5_5 .content,
.col_2-5_5 .content,
.col_4-5_5 .content,
.col_3-5_5 .content,
.col_2-5_5 .content{
	padding-right:0;
}


/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}