/*

CSS hacks in use:

_attribute - seen by IE6, ignored by everyone else
*attribute -  seen by IE6 + 7, ignored by everyone else
*zoom:1; - triggers hasLayout for IE6 + 7


.line --> .unit --> .lastUnit classNames are kept to provide compatibility with OOCSS for now.


.row = .line




.colX indicates how many columns a row consists of, 
for example a 1/3 + 2/3 row gets a classname of .col2

this is used for indicating .last-col in non-nested situations, 
eg. .col2 .c2 gets a .last-col treatment... 


If it wasn't for IE6+7, .last-col and .colX + .cX wouldn't be neccessary.


The .row.col3 > .col.c1 | .col.c2 | .col.c3 | naming structure 
has been in use for fixed width grid layouts, 
where it's been possible to add the col margins
directly on the .col, rather than on the module,
where .col3 > .c3 would then get its proper treatment. 

special cases were also easy to achieve:
#special .c1 {width:xx; margin-right:20px}
#special .c2 {width:xx; margin:0;}

the major drawback to this solution, according to Nicole Sullivan (who is behind OOCSS),
is browser repaint performance. 

I guess that when units don't have to go and get repaint directions from its parents 
all the time, repainting is a quicker process

*/

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

.unit,.col{
	float:left;
	/*prevent empty columns from collapsing */
	min-height:1px; _height:1px;
}

.size1of1{width: 100%;}
.size1of1:after{
	content: "";
	clear: both;
	display: block;
}
.size1of1,.size2of2,.size3of3,.size4of4,.size5of5{float:none;}
.size1of2,.size2of4{width:50%;}
.size1of3{width:33.33333%;}
.size2of3{width:66.66666%;}
.size1of4{width:25%;}
.size3of4{width:75%;}
.size1of5{width:20%;}
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}
.size1of6 {width:16.66667%;}

/* IE7 could cope with this, when not using nested grids... 
.col2>.c2, .col3>.c3, .col4>.c4, .col5>.c5,
.row>.col:last-child,
.line>.unit:last-child,*/
.last-col,.last-unit,.lastUnit{display:table-cell;float:none;width:auto;*display:block;*zoom:1;_position:relative;_left:-3px;_margin-right:-3px;}

	
/* fixed-width grid with gutters */
.size1	{ width:80px;}
.size2	{ width:160px;}
.size3	{ width:240px;}
.size4	{ width:320px;}
.size5	{ width:400px;}
.size6	{ width:480px;}
.size7	{ width:560px;}
.size8	{ width:640px;}
.size9	{ width:720px;}
.size10	{ width:800px;}
.size11	{ width:890px;}
.size12	{ width:960px;}

.row {margin:0;}
.row .row {margin:0;}

.mod,.pad {margin:10px;}

.leftpad{margin-left: 10px;}
.rightpad{margin-right: 10px;}

/*debug*/
.debug .col .pad, 
.debug .col .mod {background:#ccc; padding:10px;}