/*
****************
grid responsive
****************

	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{margin-bottom:13px;}

		/*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;}
		

			
			/*border*/
			.grid .gridBorderRight{border-right:1px solid #e6e6e6;}
	
			/*----------------------------------------------------------------------------
			Alternative columns
			----------------------------------------------------------------------------*/
		
				.grid > .c1, .grid > .c2, .grid > .c3, .grid > .c4, .grid > .c5, .grid > .c6{position:relative; float:left; }
		
		
			/*----------------------------------------------------------------------------
			Fluid width grid (100%)
			----------------------------------------------------------------------------*/
				
				/*setup*/
				.grid .gridSpan1,.grid .gridSpan2,.grid .gridSpan3,.grid .gridSpan4,.grid .gridSpan5,.grid .gridSpan6,.gridSpan7,.grid .gridSpan8,.grid .gridSpan9,.grid .gridSpan10,.grid .gridSpan11,.grid .gridSpan12{position:relative; float:left; margin-left:2%; margin-bottom:0px;}
				.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:0px;}
				.grid .gridSpan1:last-child, .grid .gridSpan2:last-child, .grid .gridSpan3:last-child, .grid .gridSpan4:last-child, .grid .gridSpan5:last-child, .grid .gridSpan6:last-child, .grid .gridSpan7:last-child, .grid .gridSpan8:last-child, .grid .gridSpan9:last-child, .grid .gridSpan10:last-child, .grid .gridSpan11:last-child, .grid .gridSpan12:last-child{margin-right:0px;}
			
				.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:0px;}
				.grid .gridSpan1.last, .grid .gridSpan2.last, .grid .gridSpan3.last, .grid .gridSpan4.last, .grid .gridSpan5.last, .grid .gridSpan6.last, .grid .gridSpan7.last, .grid .gridSpan8.last, .grid .gridSpan9.last, .grid .gridSpan10.last, .grid .gridSpan11.last, .grid .gridSpan12.last{margin-right:0px;}

				/*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*/
				.grid .gridMove1{margin-left:9.5%;}.grid .gridMove1:first-child{margin-left:8.5%;}
				.grid .gridMove2{margin-left:18%;}.grid .gridMove2:first-child{margin-left:17%;}
				.grid .gridMove3{margin-left:26.5%;}.grid .gridMove3:first-child{margin-left:25.5%;}
				.grid .gridMove4{margin-left:35%;}.grid .gridMove4:first-child{margin-left:34%;}
				.grid .gridMove5{margin-left:43.5%;}.grid .gridMove5:first-child{margin-left:42.5%;}
				.grid .gridMove6{margin-left:52%;}.grid .gridMove6:first-child{margin-left:51%;}
				.grid .gridMove7{margin-left:60.5%;}.grid .gridMove7:first-child{margin-left:59.5%;}
				.grid .gridMove8{margin-left:69%;}.grid .gridMove8:first-child{margin-left:68%;}
				.grid .gridMove9{margin-left:77.5%;}.grid .gridMove9:first-child{margin-left:76.5%;}
				.grid .gridMove10{margin-left:86%;}.grid .gridMove10:first-child{margin-left:85%;}
				.grid .gridMove11{margin-left:94.5%;}.grid .gridMove11:first-child{margin-left:93.5%;}
				
			/*----------------------------------------------------------------------------
			Fluid width grid (100%) - NoGutter
			----------------------------------------------------------------------------*/
				
				/*setup*/
				.grid.noGutter .gridSpan1,.grid.noGutter .gridSpan2,.grid.Fluid .gridSpan3,.grid.noGutter .gridSpan4,.grid.noGutter .gridSpan5,.grid.Fluid .gridSpan6,.gridSpan7,.grid.noGutter .gridSpan8,.grid.noGutter .gridSpan9,.grid.noGutter .gridSpan10,.grid.Fluid .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;}
				.grid.noGutter .gridSpan1:last-child, .grid.noGutter .gridSpan2:last-child, .grid.noGutter .gridSpan3:last-child, .grid.noGutter .gridSpan4:last-child, .grid.noGutter .gridSpan5:last-child, .grid.noGutter .gridSpan6:last-child, .grid.noGutter .gridSpan7:last-child, .grid.noGutter .gridSpan8:last-child, .grid.noGutter .gridSpan9:last-child, .grid.noGutter .gridSpan10:last-child, .grid.noGutter .gridSpan11:last-child, .grid.noGutter .gridSpan12:last-child{margin-right: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%;}