/*
 * Columns : 25%, 33%, 50%, 66%, 75%, 100%, 100% (full width) + some nested versions. 
 * Gutter  : ~20px @ 984 / 12 col á 62px
 * MaxWidth: 984px
 * MinWidth: 984px
 * Based on http://www.tinyfluidgrid.com/
 * Modified by: Tommy Ullberg, imCode Partner AB
 * Example HTML at the bottom.
 */
 
.grid_25  { width: 22.96747966%; } /* 226 / 984 x 100 */
.grid_33  { width: 31.30081300%; } /* 308 / 984 x 100 */
.grid_50  { width: 47.96747967%; } /* ((2 x 226) + 20) / 984 x 100 */
.grid_58  { width: 56.30081300%; } /* (226 + 308 + 20) / 984 x 100 => .grid_66 but 7 col (+ 1 col space right) / 12 col */
.grid_66  { width: 64.63414634%; } /* ((2 x 308) + 20) / 984 x 100 */
.grid_75  { width: 72.96747967%; } /* ((3 x 226) + 40) / 984 x 100 */
.grid_100 { width: 97.96747967%; } /* ((4 x 226) + 60) / 984 x 100 */
.grid_100_full { width: 100%; }

.grid_25,
.grid_33,
.grid_50,
.grid_58,
.grid_66,
.grid_75,
.grid_100 {
	margin-left: 1.016260162601626%;
	margin-right: 1.016260162601626%; /* 10 / 984 * 100 */
	float: left;
	display: block;
}

.grid_58 {
	margin-right: 9.349593495934959%; /* (62 + 20 + 10) / 984 * 100 */
}

.grid_100 {
	clear: both;
}
.grid_100_full {
	clear: both;
	margin: 0;
}

/* Nested 50.first + 50 in 50 */

.grid_50 .grid_50 {
	width: 47.88135593220339%; /* 226 / ((2 x 226) + 20) * 100 */
	float: right;
	margin: 0;
}
.grid_50 .grid_50.first {
	float: left;
}

/* Nested 50.first + 50 in 66 */

.grid_66 .grid_50 {
	width: 48.42767295597484%; /* 308 / ((2 x 308) + 20) * 100 */
	float: right;
	margin: 0;
}
.grid_66 .grid_50.first {
	float: left;
}

/* Nested 100 in 66 */

.grid_66 .grid_100 {
	width: 100%;
	float: none;
	margin: 0;
}

/* Nested 100 in 100 */

.grid_100 .grid_100 {
	margin: 0;
}

/* Nested 50.first + 50 in 100 */

.grid_100 .grid_50 {
	width: 48.9626556%; /* ((2 x 226) + 20) / ((4 x 226) + 60) * 100 */
	float: right;
	margin: 0;
}
.grid_100 .grid_50.first {
	float: left;
}

/* Nested 33.first + 66 in 75 */

.grid_75 .grid_33 {
	width: 31.47632312%; /* 226 / ((3 x 226) + 40) * 100 */
	float: left;
	margin: 0;
}
.grid_75 .grid_66 {
	width: 65.73816156%; /* ((2 x 226) + 20) / ((3 x 226) + 40) * 100 */
	float: right;
	margin: 0;
}



.alpha{margin-left:0px;}
.omega{margin-right:0px;}

.container_full {
	max-width: 1044px; 
	min-width: 1044px; 
	margin: auto;
	padding: 0;
}

.container {
	max-width: 984px; 
	min-width: 984px; 
	margin: auto;
	padding: 0;
}

.dummy.container {
	background: transparent url(../x_grid.gif) 0 0 no-repeat;
}
.dummy.container h1 {
	border: solid 1px black;
	text-align: center;
	margin: 10px 0;
	padding: 10px;
	font-size: 17px;
	background-color: #fcc;
}
.dummy.container h2 {
	text-align: center;
	margin: 10px 0 5px 0;
	font-size: 15px;
}


.clear,.clearer{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
* html .clearfix,
*:first-child+html .clearfix{zoom:1}



/*
<div class="dummy">
	<div class="container">
	
		<div class="grid_100">
			<h1>grid_100</h1>
		</div>
		
		<div class="grid_50 first">
			<h1>grid_50</h1>
		</div>
		<div class="grid_50">
			<h1>grid_50</h1>
		</div>
		
		<div class="grid_25 first">
			<h1>grid_25</h1>
		</div>
		<div class="grid_50">
			<h1>grid_50</h1>
		</div>
		<div class="grid_25">
			<h1>grid_25</h1>
		</div>
		
		<div class="grid_25 first">
			<h1>grid_25</h1>
		</div>
		<div class="grid_75">
			<h1>grid_75</h1>
		</div>
		
		<div class="grid_33 first">
			<h1>grid_33</h1>
		</div>
		<div class="grid_33">
			<h1>grid_33</h1>
		</div>
		<div class="grid_33">
			<h1>grid_33</h1>
		</div>
		
		<div class="grid_100_full">
			<h1>grid_100_full</h1>
		</div>
		
		<div class="grid_50 first">
			<h2>grid_50 + grid_50 in grid_50</h2>
			<div class="grid_50 first">
				<h1>grid_50</h1>
			</div>
			<div class="grid_50">
				<h1>grid_50</h1>
			</div>
		</div>
		<div class="grid_50">
			<h2 style="padding-bottom:5px;">grid_50</h2>
			<h1>grid_50</h1>
		</div>
		
		<div class="grid_50 first">
			<h2>grid_50 + grid_50 in grid_50</h2>
			<div class="grid_50 first">
				<h1>grid_50</h1>
			</div>
			<div class="grid_50">
				<h1>grid_50</h1>
			</div>
		</div>
		<div class="grid_50">
			<h2>grid_50 + grid_50 in grid_50</h2>
			<div class="grid_50 first">
				<h1>grid_50</h1>
			</div>
			<div class="grid_50">
				<h1>grid_50</h1>
			</div>
		</div>
		
		<div class="grid_66 first">
			<h1>grid_66</h1>
		</div>
		<div class="grid_33">
			<h1>grid_33</h1>
		</div>
		
		<div class="grid_66 first">
			<h2>grid_50 + grid_50 in grid_66</h2>
			<div class="grid_50 first">
				<h1>grid_50</h1>
			</div>
			<div class="grid_50">
				<h1>grid_50</h1>
			</div>
		</div>
		<div class="grid_33">
			<h2>grid_33</h2>
			<h1>grid_33</h1>
		</div>
		
		<div class="grid_100">
			<h2>grid_50 + grid_50 in grid_100</h2>
			<div class="grid_50 first">
				<h1>grid_50</h1>
			</div>
			<div class="grid_50">
				<h1>grid_50</h1>
			</div>
		</div>
		
		<div class="grid_75 first">
			<h2>grid_33 + grid_66 in grid_75</h2>
			<div class="grid_33 first">
				<h1>grid_33</h1>
			</div>
			<div class="grid_66">
				<h1>grid_66</h1>
			</div>
		</div>
		<div class="grid_25">
			<h2>grid_25</h2>
			<h1>grid_25</h1>
		</div>
		
		<div class="clear"></div>
	</div>
</div>
*/