/*
	Usage for the grids
	<div class="line">
		<div class="unit size1of2">content of unit in here</div>
		<div class="unit size1of2 lastunit">content of unit in here</div> ------>  the last unit class is needed
	</div>
	------------>  the clear fix is baked into the class for line so we dont have to put it each place the grid is used.
*/

.line:after,
.lastUnit:after{
	content: " . ";
	visibility:hidden;
	clear:both;
	height:0 !important;
	display:block;
	line-height:0;
	font-size: xx-large;
	overflow: hidden;
}
.line{
	*zoom:1;
}

.unit{float:left;}
.size1of1{float:none;}

.size1of2{width:50%;}

.size1of3{width:33.33333%;}
.size2of3{width:66.66666%;}

.size1of4{width:25%;}
.size2of4{width:50%;}
.size3of4{width:75%;}

.size1of5{width:20%;}
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}

.size1of6{width:16.66666%;}
.size2of6{width:33.33333%;}
.size3of6{width:49.99999%;}
.size4of6{width:66.66666%;}
.size5of6{width:83.33333%;}

.lastUnit{
	display: table-cell;
	*display:block;
	*zoom:1;
	float:none;
	_position:relative;
	_left:-3px;
	_margin-right: -3px;
	width:auto;
}