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

	a fluid 12 column grid, used primarily for responsive webdesign

	
*/
	/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
	setup
	///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
		
		/*+ setup
		..........................................................................*/
		
			.grid{margin-left:auto; margin-right:auto; height:100%;}
			.grid .gridSpan1,.grid .gridSpan2,.grid .gridSpan3,.grid .gridSpan4,.grid .gridSpan5,.grid .gridSpan6,.gridSpan7,.grid .gridSpan8,.grid .gridSpan9,.grid .gridSpan10,.grid .gridSpan11,.grid .gridSpan12{}
	
			.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 red;}
		
		/*+ gridSearchBox
		..........................................................................*/

			.grid.gridSearchBox{margin:0px 0px 17px 0px; }

		/*+ gridBanners
		..........................................................................*/

			.grid.gridBanners{margin:20px 0px 40px 0px; }

	/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
	12 column grid
	///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
			
		/*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%;}

		/*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:10.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%;}
		
	/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
	24 column grid
	///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
			
		/*setup*/
		.grid.grid24 > .gridSpan1,.grid.grid24 > .gridSpan2,.grid.grid24 > .gridSpan3,.grid.grid24 > .gridSpan4,.grid.grid24 > .gridSpan5,.grid.grid24 > .gridSpan6, .grid.grid24 > .gridSpan7,.grid.grid24 > .gridSpan8,.grid.grid24 > .gridSpan9,.grid.grid24 > .gridSpan10,.grid.grid24 > .gridSpan11,.grid.grid24 > .gridSpan12,.grid.grid24 > .gridSpan13,.grid.grid24 > .gridSpan14,.grid.grid24 > .gridSpan15,.grid.grid24 > .gridSpan16,.grid.grid24 > .gridSpan17,.grid.grid24 > .gridSpan18,.grid.grid24 > .gridSpan19,.grid.grid24 > .gridSpan20,.grid.grid24 > .gridSpan21,.grid.grid24 > .gridSpan22,.grid.grid24 > .gridSpan23,.grid.grid24 > .gridSpan24{position:relative; float:left; margin-left:2%; margin-right:0%; }
		.grid.grid24 .gridSpan1:first-child, .grid.grid24 .gridSpan2:first-child, .grid.grid24 .gridSpan3:first-child, .grid.grid24 .gridSpan4:first-child, .grid.grid24 .gridSpan5:first-child, .grid.grid24 .gridSpan6:first-child, .grid.grid24 .gridSpan7:first-child, .grid.grid24 .gridSpan8:first-child, .grid.grid24 .gridSpan9:first-child, .grid.grid24 .gridSpan10:first-child, .grid.grid24 .gridSpan11:first-child, .grid.grid24 .gridSpan12:first-child, .grid.grid24 .gridSpan13:first-child, .grid.grid24 .gridSpan14:first-child, .grid.grid24 .gridSpan15:first-child, .grid.grid24 .gridSpan16:first-child, .grid.grid24 .gridSpan17:first-child, .grid.grid24 .gridSpan18:first-child, .grid.grid24 .gridSpan19:first-child, .grid.grid24 .gridSpan20:first-child, .grid.grid24 .gridSpan21:first-child, .grid.grid24 .gridSpan22:first-child, .grid.grid24 .gridSpan23:first-child, .grid.grid24 .gridSpan24:first-child{margin-left:0%;}

		/*column width*/
		.grid.grid24 .gridSpan1{width:2.25%;}
		.grid.grid24 .gridSpan2{width:6.5%;}
		.grid.grid24 .gridSpan3{width:10.75%;}
		.grid.grid24 .gridSpan4{width:15%;}
		.grid.grid24 .gridSpan5{width:19.25%;}
		.grid.grid24 .gridSpan6{width:23.5%;}
		.grid.grid24 .gridSpan7{width:27.75%;}
		.grid.grid24 .gridSpan8{width:32%;}
		.grid.grid24 .gridSpan9{width:36.25%;}
		.grid.grid24 .gridSpan10{width:40.5%;}
		.grid.grid24 .gridSpan11{width:44.75%;}
		.grid.grid24 .gridSpan12{width:49%;}
		
		.grid.grid24 .gridSpan13{width:53.25%;}
		.grid.grid24 .gridSpan14{width:57.5%;}
		.grid.grid24 .gridSpan15{width:61.75%;}
		.grid.grid24 .gridSpan16{width:66%;}
		.grid.grid24 .gridSpan17{width:70.25%;}
		.grid.grid24 .gridSpan18{width:74.5%;}
		.grid.grid24 .gridSpan19{width:78.75%;}
		.grid.grid24 .gridSpan20{width:83%;}
		.grid.grid24 .gridSpan21{width:87.25%;}
		.grid.grid24 .gridSpan22{width:91.5%;}
		.grid.grid24 .gridSpan23{width:95.75%;}
		.grid.grid24 .gridSpan24{width:100%;}
		
		/*move x columns*/
		.grid.grid24 .gridMove1{margin-left:6.25%;}			.grid.grid24 .gridMove1:first-child{margin-left:4.25%;}
		.grid.grid24 .gridMove2{margin-left:10.5%;}			.grid.grid24 .gridMove2:first-child{margin-left:8.5%;}
		.grid.grid24 .gridMove3{margin-left:14.75%;}		.grid.grid24 .gridMove3:first-child{margin-left:12.75%;}
		.grid.grid24 .gridMove4{margin-left:19%;}			.grid.grid24 .gridMove4:first-child{margin-left:17%;}
		.grid.grid24 .gridMove5{margin-left:23.25%;}		.grid.grid24 .gridMove5:first-child{margin-left:21.25%;}
		.grid.grid24 .gridMove6{margin-left:27.5%;}			.grid.grid24 .gridMove6:first-child{margin-left:25.5%;}
		.grid.grid24 .gridMove7{margin-left:31.75%;}		.grid.grid24 .gridMove7:first-child{margin-left:29.75%;}
		.grid.grid24 .gridMove8{margin-left:36%;}			.grid.grid24 .gridMove8:first-child{margin-left:34%;}
		.grid.grid24 .gridMove9{margin-left:40.25%;}		.grid.grid24 .gridMove9:first-child{margin-left:38.25%;}
		.grid.grid24 .gridMove10{margin-left:44.5%;}		.grid.grid24 .gridMove10:first-child{margin-left:42.5;}
		.grid.grid24 .gridMove11{margin-left:48.75%;}		.grid.grid24 .gridMove11:first-child{margin-left:46.75%;}

		.grid.grid24 .gridMove12{margin-left:53%;}			.grid.grid24 .gridMove11:first-child{margin-left:51%;}
		.grid.grid24 .gridMove13{margin-left:57.25%;}		.grid.grid24 .gridMove11:first-child{margin-left:55.25%;}
		.grid.grid24 .gridMove14{margin-left:61.5%;}		.grid.grid24 .gridMove11:first-child{margin-left:59.5%;}
		.grid.grid24 .gridMove15{margin-left:65.75%;}		.grid.grid24 .gridMove11:first-child{margin-left:63.75%;}
		.grid.grid24 .gridMove16{margin-left:70%;}			.grid.grid24 .gridMove11:first-child{margin-left:68%;}
		.grid.grid24 .gridMove17{margin-left:74.25%;}		.grid.grid24 .gridMove11:first-child{margin-left:72.25%;}
		.grid.grid24 .gridMove18{margin-left:78.5%;}		.grid.grid24 .gridMove11:first-child{margin-left:76.5%;}
		.grid.grid24 .gridMove19{margin-left:82.75%;}		.grid.grid24 .gridMove11:first-child{margin-left:80.75%;}
		.grid.grid24 .gridMove20{margin-left:87%;}			.grid.grid24 .gridMove11:first-child{margin-left:85%;}
		.grid.grid24 .gridMove21{margin-left:91.25%;}		.grid.grid24 .gridMove11:first-child{margin-left:89.25%;}
		.grid.grid24 .gridMove22{margin-left:95.5%;}		.grid.grid24 .gridMove11:first-child{margin-left:93.5%;}
		.grid.grid24 .gridMove23{margin-left:99.75%;}		.grid.grid24 .gridMove11:first-child{margin-left:97.75%;}