/*
	Variable Grid System (Fluid Version).
	Learn more ~ http://www.spry-soft.com/grids/
	Based on 960 Grid System - http://960.gs/ & 960 Fluid - http://www.designinfluences.com/

	Licensed under GPL and MIT.
*/

/* REMOVED MARGINS */


/* Containers
----------------------------------------------------------------------------------------------------*/


.container, .container_12 {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	max-width: 100em;
/* 	width: 90%; */
}
	
@media only screen and (max-width: 40em) {
	.container, .container_12 {
		width: 65em;
	}
}

@media only screen and (min-width: 40.063em) {
	.container, .container_12 {
		width: 80em;
	}
}

@media only screen and (min-width: 64.063em) {
	.container, .container_12 {
		width: 100em;
	}
}

@media only screen and (min-width: 90.063em) {
	.container, .container_12 {
		width: 120em;
	}
}



/*
@media screen and (max-device-width: 480px) {
	.container, .container_12 {
		width: 460px;
		margin-left: 10px;
		margin-right: auto;
		position: relative;
	}
	
	#main .grid_1,
	#main .grid_2,
	#main .grid_3,
	#main .grid_4,
	#main .grid_5,
	#main .grid_6,
	#main .grid_7,
	#main .grid_8,
	#main .grid_9,
	#main .grid_10,
	#main .grid_11 {
		position: relative;
		width: 98% !important;
		margin-left: 1% !important;
		margin-right: 1% !important;
	}
}
*/




/* Grid >> Global
----------------------------------------------------------------------------------------------------*/






/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
	margin-left: 0 !important;
	float: left;
}

.omega {
	margin-right: 0 !important;
	float: right !important;
}

.bottom {
	position: absolute !important;
	bottom: 0;
}

/* Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/

/* push */

.push_1 { margin-left: 8.3333333333333% !important; }
.push_2 { margin-left: 16.666666666667% !important; }
.push_3 { margin-left: 25% !important; }
.push_4 { margin-left: 33.333333333333% !important; }
.push_5 { margin-left: 41.666666666667% !important; }
.push_6 { margin-left: 50% !important; }
.push_7 { margin-left: 58.333333333333% !important; }
.push_8 { margin-left: 66.666666666667% !important; }
.push_9 { margin-left: 75% !important; }
.push_10 { margin-left: 83.333333333333% !important; }
.push_11 { margin-left: 91.666666666667% !important; }
.push_12 { margin-left: 100% !important; }

/* magin */

.grid_1 { width: 4.3333333333333%; }
.grid_2 { width: 12.666666666667%; }
.grid_3 { width: 21%; }
.grid_4 { width: 29.333333333333%; }
.grid_5 { width: 37.666666666667%; }
.grid_6 { width: 46%; }
.grid_7 { width: 54.333333333333%; }
.grid_8 { width: 62.666666666667%; }
.grid_9 { width: 71%; }
.grid_10 { width: 79.333333333333%; }
.grid_11 { width: 87.666666666667%; }
.grid_12 { width: 96%; }




.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11 {
	display: inline;
	float: left;
	position: relative;
	margin-left: 2%;
	margin-right: 2%;
}

.grid_12 {
	display: inline;
	float: left;
	position: relative;
	margin-left: 2%;
	margin-right: 2%;
}



?>


/* nomargin */
 
	$grids = 12;
	$margin_left = 0;
	$margin_right = 0;
	$width = 100;
	$title = 'nomargin';
	
	$grid = ($width / $grids);
	for ($n = 1; $n <= $grids; $n++) {
		echo  '.'.$title.'_'.$n.' { width: '.(($grid*$n)-($margin_left+$margin_right)).'%; }'."\n";	
	}

?>

.nomargin_1,
.nomargin_2,
.nomargin_3,
.nomargin_4,
.nomargin_5,
.nomargin_6,
.nomargin_7,
.nomargin_8,
.nomargin_9, 
.nomargin_10,
.nomargin_11,
.nomargin_12 {
	display: inline;
	float: left;
	position: relative;
	margin-left: 0;
	margin-right: 0;	
}

/* vertical grid */

.v-grid_1 { height: 20px; margin-bottom: 6px; }
.v-grid_2 { height: 46px; margin-bottom: 6px; }
.v-grid_3 { height: 72px; margin-bottom: 6px; }
.v-grid_4 { height: 98px; margin-bottom: 6px; }
.v-grid_5 { height: 124px; margin-bottom: 6px; }
.v-grid_6 { height: 150px; margin-bottom: 6px; }
.v-grid_7 { height: 176px; margin-bottom: 6px; }
.v-grid_8 { height: 202px; margin-bottom: 6px; }
.v-grid_9 { height: 228px; margin-bottom: 6px; }
.v-grid_10 { height: 254px; margin-bottom: 6px; }
.v-grid_11 { height: 280px; margin-bottom: 6px; }
.v-grid_12 { height: 306px; margin-bottom: 6px; }
.v-grid_13 { height: 332px; margin-bottom: 6px; }
.v-grid_14 { height: 358px; margin-bottom: 6px; }
.v-grid_15 { height: 384px; margin-bottom: 6px; }
.v-grid_16 { height: 410px; margin-bottom: 6px; }
.v-grid_17 { height: 436px; margin-bottom: 6px; }
.v-grid_18 { height: 462px; margin-bottom: 6px; }
.v-grid_19 { height: 488px; margin-bottom: 6px; }
.v-grid_20 { height: 514px; margin-bottom: 6px; }
.v-grid_21 { height: 540px; margin-bottom: 6px; }
.v-grid_22 { height: 566px; margin-bottom: 6px; }
.v-grid_23 { height: 592px; margin-bottom: 6px; }
.v-grid_24 { height: 618px; margin-bottom: 6px; }
.v-nomargin_1 { height: 26px; margin-bottom: 0px; }
.v-nomargin_2 { height: 52px; margin-bottom: 0px; }
.v-nomargin_3 { height: 78px; margin-bottom: 0px; }
.v-nomargin_4 { height: 104px; margin-bottom: 0px; }
.v-nomargin_5 { height: 130px; margin-bottom: 0px; }
.v-nomargin_6 { height: 156px; margin-bottom: 0px; }
.v-nomargin_7 { height: 182px; margin-bottom: 0px; }
.v-nomargin_8 { height: 208px; margin-bottom: 0px; }
.v-nomargin_9 { height: 234px; margin-bottom: 0px; }
.v-nomargin_10 { height: 260px; margin-bottom: 0px; }
.v-nomargin_11 { height: 286px; margin-bottom: 0px; }
.v-nomargin_12 { height: 312px; margin-bottom: 0px; }
.v-nomargin_13 { height: 338px; margin-bottom: 0px; }
.v-nomargin_14 { height: 364px; margin-bottom: 0px; }
.v-nomargin_15 { height: 390px; margin-bottom: 0px; }
.v-nomargin_16 { height: 416px; margin-bottom: 0px; }
.v-nomargin_17 { height: 442px; margin-bottom: 0px; }
.v-nomargin_18 { height: 468px; margin-bottom: 0px; }
.v-nomargin_19 { height: 494px; margin-bottom: 0px; }
.v-nomargin_20 { height: 520px; margin-bottom: 0px; }
.v-nomargin_21 { height: 546px; margin-bottom: 0px; }
.v-nomargin_22 { height: 572px; margin-bottom: 0px; }
.v-nomargin_23 { height: 598px; margin-bottom: 0px; }
.v-nomargin_24 { height: 624px; margin-bottom: 0px; }

/* 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;
}