/******************
01 ::: BASE GRID :::
*******************/

.container {
	position:relative;
	width:980px;
	margin: 0 auto;
	padding: 0;
}

.container .col {
	float: left;
	display: inline;
}

.row {
	margin-bottom: 20px;
}

.container .grid1.col {
	width: 60px;
}

.container .grid2.col {
	width: 120px;
}

.container .grid3.col {
	width: 180px;
}

.container .grid4.col {
	width: 240px;
}

.container .grid5.col {
	width: 300px;
}

.container .grid6.col {
	width: 360px;
}

.container .grid7.col {
	width: 420px;
}

.container .grid8.col {
	width: 480px;
}

.container .grid9.col {
	width: 540px;
}

.container .grid10.col {
	width: 600px;
}

.container .grid11.col {
	width: 660px;
}

.container .grid12.col {
	width: 720px;
}

.container .grid13.col {
	width: 780px;
}

.container .grid14.col {
	width: 840px;
}

.container .grid15.col {
	width: 900px;
}

.container .grid16.col {
	width: 960px;
}

/******************
::: CLEARING :::
*******************/

.container:after {
	content: "\0020";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */

.clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

.row:after,
    .clearfix:after {
	clear: both;
}

.row,
    .clearfix {
	zoom: 1;
}

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