/* 

	Copyright 2007 Rob Sutherland and FitzMartin
	http://www.robsutherland.net/ and http://www.fitzmartin.com/
	use is granted without restriction as long as credit is given
	
	.col-n : an equal number of columns
	.col-iixx : 2 columns of ii% and xx%
	.col-fxxx : 2 columns; 1 with a fixed with of xxx and the other the remainder of the space
	
	for percentage based column sets:
	- each column must be marked with class="col" 
	- in column sets of different widths, the narrow column must be marked with class="narrow"
	
	for fixed width colum sets:
	- no column should be marked with class="col"
	- the fixed with column should be marked with class="fixed"
	- 
	
	reversing display order will not work on a browser that doesn't support child selectors (.parent > .child)  - namely IE 6 and lessor.
	
	Note: marking a column (class="col") with an additional class that has padding or margin will cause problems.

*/

/* ===== */
/* This is the set I want to use, but nesting more than 2 levels deep presents a problem until child selectors are accepted across the board */

.col  {float: left; margin: 0; }
.rev>.col {float: right; }
.col-2>.col {width:50%;*width:49.9999%;}
.col-3>.col {width: 33.3%;*width:33.2999%; }
.col-4>.col {width: 25%;*width:24.95999%; }
.col-8020>.col {width: 80%;*width: 79.999%; }
.col-8020>.narrow {width: 20%; }
.col-7525>.col {width: 75%;*width:74.999%; }
.col-7525>.narrow {width: 25%; }
.col-7030>.col {width: 70%;*width: 69.999%; }
.col-7030>.narrow {width: 30%; }
.col-6040>.col {width: 60%;*width: 59.999%; }
.col-6040>.narrow {width: 40%; }
.col-6535>.col {width: 65%;*width: 64.999%; }
.col-6535>.narrow {width: 35%; }

/* ===== */

.col-f100 {padding-left: 100px; }
.col-f200 {padding-left: 200px; }
.col-f300 {padding-left: 300px; }
.col-f100>.narrow {float: left; width: 100px; position: relative; left: -100px; margin-right: -100px; }
.col-f200>.narrow {float: left; width: 200px; position: relative; left: -200px; margin-right: -300px;}
.col-f300>.narrow {float: left; width: 300px; position: relative; left: -300px; margin-right: -300px;}

.col-f100r {padding-right: 100px; }
.col-f200r {padding-right: 200px; }
.col-f300r {padding-right: 300px; }
.col-f100r>.narrow {float: right; width: 100px; position: relative; right: -100px; margin-left: -100px; }
.col-f200r>.narrow {float: right; width: 200px; position: relative; right: -200px; margin-left: -300px;}
.col-f300r>.narrow {float: right; width: 300px; position: relative; right: -300px; margin-left: -300px;}


/* ===== */
/*
	Nests well but each column has to have the appropriate class that specifies the width. 
	Each column group has to have columns that add up to 100% width(or less) or wrapping will occur
*/


/*
	NOTE: IE 6 & 7 is a bit tempormental with these. Evidently 50% + 50% or 25% + 25% + 25% + 25% is larger than 100% in some cases. 
	2 + 2 = 5 for extremely large values of 2.
	I haven't fixed that problem. But i will
*/
.cg {width: 100%; }
.c-2,.c-3,.c-5,.c-6,.c-10,.c-15,.c-20,.c-25,.c-30,.c-33,.c-35,.c-40,.c-47,.c-50,.c-55,.c-60,.c-65,.c-70,.c-75,.c-80,.c-85,.c-90,.c-95,.c-f5,.c-f10,.c-f15,.c-f20,.c-f25,.c-f30,.c-f40,.c-f50,.c-f75,.c-f100,.c-f125,.c-f150,.c-f175,.c-f200,.c-f225,.c-f250,.c-f300,.c-f350,.c-f400,.c-f500 {float: left; margin: 0; border: 0; padding: 0; }
.c-f5 {width: 5px; } .c-f10 {width: 10px; } .c-f15 {width: 15px; } .c-f20 {width: 20px; } .c-f25 {width: 25px; } .c-f30 {width: 30px; }, .c-f40 {width: 40px; } .c-f-45 {width: 45px; } .c-f50 {width: 50px; } .c-f75 {width: 75px; } .c-f100 {width: 100px; } .c-f125 {width: 125px; } .c-f150 {width: 150px; } .c-f175 {width: 175px; } .c-f200 {width: 200px; } .c-f225 {width: 225px; } .c-f250 {width: 250px; } .c-f300 {width: 300px; } .c-f350 {width: 350px; } .c-f400 {width: 400px; } .c-f500 {width: 500px; } .c-2 {width: 2%; } .c-3 {width: 3%; } .c-5 {width: 5%; } .c-6 {width: 6%; } .c-10 {width: 10%; } .c-15 {width: 15%; } .c-20 {width: 20%; } .c-25 {width: 25 ;*width:24.99%; } .cg .cg .c-25 {width: 25%;*width:24.9%; } .c-30 {width: 30%; } .c-33 {width: 33.33%; } .c-35 {width: 35%; } .c-40 {width: 40%; } .c-45 {width: 45%; } .c-47 {width: 47%; } .c-50 {width: 50%;*width:49.999%; } .c-55 {width: 55%; } .c-60 { width:  60%; } .c-65 {width: 65%; } .c-66 {width: 66.67%; } .c-70 {width: 70%; } .c-75 {width: 75%; } .c-80 {width: 80%; } .c-85 {width: 85%; } .c-90 {width: 90%; } .c-95 {width: 95%; }

/* ===== */

.col-2:after,.col-3:after,.col-4:after,.col-8020:after,.col-7030:after,.col-7525:after,.col-6040:after,.col-6535:after,.col-f100:after,.col-f200:after,.col-f300:after,.cg:after{content:".";display:block;height:0;clear:both;visibility:hidden;} 
.col-2,.col-3,.col-4,.col-8020,.col-7030,.col-7525,.col-6040,.col-6535,.col-f100,.col-f200,.col-f300,.cg {zoom:1;} /*IE*/