/* 	All columns should be wrapped in a div with the clas .row. The :before and :after psuedo-elements force the 
	.row div to clear it's children (columns) and maintain proper layout. */
.row{ width: 100%;}
.row:before,
.row:after{
	content: " "; /* 1 */
    display: table; /* 2 */
	}
.row:after{
	clear: both;
	}
.row{
	width:100%;
	margin:10px 0;
	}


/* Primary Columns */
/* 	The following classes are for the three primary columns that make up the overall structure of the site. 
	In order to accomodate the fixed-width 300px ad, we are using a negative-margin technique 
	to created a fixed-fluid layout. It assumes the fixed-width column is on the right. To reverse, just 
	change the left/right value for all floats and padding. */

.col-flex{ 
	width: 100%;
	margin-right: -320px;
	float:left;
	margin-left: -160px;
	}
	.col-flex--interior{
		margin-right: 330px;
		margin-left: 170px;
		padding:0 10px;
		}
.fixed-b{ 
	width: 320px;
	float: right;
	padding:0 10px;
	}
.fixed-a{
	width:160px;
	float:left;
	min-height:1px;
	position: relative;
	}
	.col-c{}

/* alternative layout with no right sidebar, used for documentation */

.col-flex.no-right{ margin-right: 0;}
.no-right > .col-flex--interior{ margin-right:0; max-width:50em; margin:0 auto;}

/* Content Grid */
/* This is a more generic system of columns designed to allow for the creation of various content elements. */

.col,
.col__left,
.col__right{ padding: 0 10px;}
.col:first-child,
.col__left:first-child,
.col__right:first-child{ padding-left: 0;}
.col:last-child,
.col__left:last-child,
.col__right:last-child{ padding-right: 0;}

.col__left{ float: left;}
.col__right{ float: right;}

.col--25{ width: 25%;}
.col--30{ width: 30%;}
.col--40{ width: 40%;}
.col--50{ width: 50%;}
.col--60{ width: 60%;}
.col--70{ width: 70%;}
.col--75{ width: 75%;}