/*
@@@@@@@@@@@@@@@@@@@@@@
GRID
@@@@@@@@@@@@@@@@@@@@@@

	a fluid 12 column grid, used primarily for responsive webdesign

	version	 			1.0
	dateCreated			02/02/2012
	dateChanged			09/02/2012
	
*/


	/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
	setup
	///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
		
		.grid{margin-left:auto; margin-right:auto;}
		.grid .gridSpan1,.grid .gridSpan2,.grid .gridSpan3,.grid .gridSpan4,.grid .gridSpan5,.grid .gridSpan6,.gridSpan7,.grid .gridSpan8,.grid .gridSpan9,.grid .gridSpan10,.grid .gridSpan11,.grid .gridSpan12{}

		/*clearfix*/
		.grid{position:relative;}
		.grid:after{visibility: hidden; display: block;font-size: 0;content: " ";clear: both;height: 0;}
		* html .grid{ zoom: 1; }
		*:first-child+html .grid{ zoom: 1; }
		
		/*debug*/
		.grid.DeBug{outline:1px dotted red;}
		.grid.DeBug > div, .grid.DeBug > section, .grid.DeBug > aside, .grid.DeBug > header, .grid.DeBug > footer{outline:1px dotted black;}
		
		/*mainGrid*/
		.grid{}
		.grid > .c1{width:718px; float:left; margin:0px 16px 0px 0px; }
		.grid > .c2{width:226px; float:left; }
		
		/*subGrid*/
		.grid.subGrid{}
		.grid.subGrid > .c1{width:460px; float:left; margin:0px 30px 0px 0px; }
		.grid.subGrid > .c2{width:228px; float:left; }
		
		/*contactGrid*/
		.grid.contactGrid{}
		.grid.contactGrid > .c1{width:509px; float:left; margin:0px 33px 0px 0px; }
		.grid.contactGrid > .c2{width:175px; float:left; }
		
		/*productGrid*/
		.grid.productGrid{}
		.grid.productGrid > .c1{width:236px; float:left; margin:0px 22px 0px 0px; }
		.grid.productGrid > .c2{width:460px; float:left; }
		
	/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
	fluid width
	///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
			
		/*setup*/
		.grid > .gridSpan1,.grid > .gridSpan2,.grid > .gridSpan3,.grid > .gridSpan4,.grid > .gridSpan5,.grid > .gridSpan6, .grid > .gridSpan7,.grid > .gridSpan8,.grid > .gridSpan9,.grid > .gridSpan10,.grid > .gridSpan11,.grid > .gridSpan12{position:relative; float:left; margin-left:2%; margin-right:0%; }
		.grid .gridSpan1:first-child, .grid .gridSpan2:first-child, .grid .gridSpan3:first-child, .grid .gridSpan4:first-child, .grid .gridSpan5:first-child, .grid .gridSpan6:first-child, .grid .gridSpan7:first-child, .grid .gridSpan8:first-child, .grid .gridSpan9:first-child, .grid .gridSpan10:first-child, .grid .gridSpan11:first-child, .grid .gridSpan12:first-child{margin-left:0%;}
	
		.grid .gridSpan1.first, .grid .gridSpan2.first, .grid .gridSpan3.first, .grid .gridSpan4.first, .grid .gridSpan5.first, .grid .gridSpan6.first, .grid .gridSpan7.first, .grid .gridSpan8.first, .grid .gridSpan9.first, .grid .gridSpan10.first, .grid .gridSpan11.first, .grid .gridSpan12.first{margin-left:0%;}

		/*column width*/
		.grid .gridSpan1{width:6.5%;}
		.grid .gridSpan2{width:15%;}
		.grid .gridSpan3{width:23.5%;}
		.grid .gridSpan4{width:32%;}
		.grid .gridSpan5{width:40.5%;}
		.grid .gridSpan6{width:49.0%;}
		.grid .gridSpan7{width:57.5%;}
		.grid .gridSpan8{width:66%;}
		.grid .gridSpan9{width:74.5%;}
		.grid .gridSpan10{width:83%;}
		.grid .gridSpan11{width:91%;}
		.grid .gridSpan12{width:100%;}
		
		/*move x columns*/
		.gridMove1{margin-left:9.5%;}			.gridMove1:first-child{margin-left:8.5%;}
		.gridMove2{margin-left:18%;}			.gridMove2:first-child{margin-left:17%;}
		.gridMove3{margin-left:26.5%;}			.gridMove3:first-child{margin-left:25.5%;}
		.gridMove4{margin-left:35%;}			.gridMove4:first-child{margin-left:34%;}
		.gridMove5{margin-left:43.5%;}			.gridMove5:first-child{margin-left:42.5%;}
		.gridMove6{margin-left:52%;}			.gridMove6:first-child{margin-left:51%;}
		.gridMove7{margin-left:60.5%;}			.gridMove7:first-child{margin-left:59.5%;}
		.gridMove8{margin-left:69%;}			.gridMove8:first-child{margin-left:68%;}
		.gridMove9{margin-left:77.5%;}			.gridMove9:first-child{margin-left:76.5%;}
		.gridMove10{margin-left:86%;}			.gridMove10:first-child{margin-left:85%;}
		.gridMove11{margin-left:94.5%;}			.gridMove11:first-child{margin-left:93.5%;}
		
	/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
	fluid width (no gutter)
	///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
			
		/*setup*/
		.grid.noGutter > .gridSpan1,.grid.noGutter > .gridSpan2,.grid.noGutter > .gridSpan3,.grid.noGutter > .gridSpan4,.grid.noGutter > .gridSpan5,.grid.noGutter > .gridSpan6,.gridSpan7,.grid.noGutter > .gridSpan8,.grid.noGutter > .gridSpan9,.grid.noGutter > .gridSpan10,.grid.noGutter > .gridSpan11,.grid.noGutter > .gridSpan12{position:relative; float:left; margin-left:0%; margin-right:0%;}
		.grid.noGutter > .gridSpan1:first-child, .grid.noGutter > .gridSpan2:first-child, .grid.noGutter > .gridSpan3:first-child, .grid.noGutter > .gridSpan4:first-child, .grid.noGutter > .gridSpan5:first-child, .grid.noGutter > .gridSpan6:first-child, .grid.noGutter > .gridSpan7:first-child, .grid.noGutter > .gridSpan8:first-child, .grid.noGutter > .gridSpan9:first-child, .grid.noGutter > .gridSpan10:first-child, .grid.noGutter > .gridSpan11:first-child, .grid.noGutter > .gridSpan12:first-child{margin-left:0px;}
		
		/*column width*/
		.grid.noGutter > .gridSpan1{width:8.333%;}
		.grid.noGutter > .gridSpan2{width:16.666%;}
		.grid.noGutter > .gridSpan3{width:24.999%;}
		.grid.noGutter > .gridSpan4{width:33.332%;}
		.grid.noGutter > .gridSpan5{width:41.665%;}
		.grid.noGutter > .gridSpan6{width:49.998%;}
		.grid.noGutter > .gridSpan7{width:58.331%;}
		.grid.noGutter > .gridSpan8{width:66.664%;}
		.grid.noGutter > .gridSpan9{width:74.997%;}
		.grid.noGutter > .gridSpan10{width:83.33%;}
		.grid.noGutter > .gridSpan11{width:91.663%;}
		.grid.noGutter > .gridSpan12{width:100%;}
		
		/*move x columns*/
		.grid.noGutter .gridMove1{margin-left:8.333%;}			.grid.noGutter .gridMove1:first-child{margin-left:8.333%;}
		.grid.noGutter .gridMove2{margin-left:16.666%;}			.grid.noGutter .gridMove2:first-child{margin-left:16.666%;}
		.grid.noGutter .gridMove3{margin-left:24.999%;}			.grid.noGutter .gridMove3:first-child{margin-left:24.999%;}
		.grid.noGutter .gridMove4{margin-left:33.332%;}			.grid.noGutter .gridMove4:first-child{margin-left:33.332%;}
		.grid.noGutter .gridMove5{margin-left:41.665%;}			.grid.noGutter .gridMove5:first-child{margin-left:41.665%;}
		.grid.noGutter .gridMove6{margin-left:49.998%;}			.grid.noGutter .gridMove6:first-child{margin-left:49.998%;}
		.grid.noGutter .gridMove7{margin-left:58.331%;}			.grid.noGutter .gridMove7:first-child{margin-left:58.331%;}
		.grid.noGutter .gridMove8{margin-left:66.664%;}			.grid.noGutter .gridMove8:first-child{margin-left:66.664%;}
		.grid.noGutter .gridMove9{margin-left:74.997%;}			.grid.noGutter .gridMove9:first-child{margin-left:74.997%;}
		.grid.noGutter .gridMove10{margin-left:83.33%;}			.grid.noGutter .gridMove10:first-child{margin-left:83.33%;}
		.grid.noGutter .gridMove11{margin-left:91.663%;}		.grid.noGutter .gridMove11:first-child{margin-left:91.663%;}