@charset "utf-8";

/* Grid */
#wrapper {margin: 10px auto; position:relative; width: 960px; background: #fff; border: 1px solid #ccc;}
#header { padding: 0px 9px; } 
#footer {
	color:#ccc; background: #4c4b4b;
	margin: 0px auto;
}
#column1 {width: 240px;}
#column2 {width: 720px;}
#column3 {width: 204px; margin: 9px; padding: 9px; float-right;}
#column4 {width: 240px;}

.grid {float: left; }
.grid-1 {width: 42px; float: left;} /* 60 -18 */
.grid-2 {width: 102px; float: left;} /* 120 -18 */
.grid-3 {width: 162px; float: left;} /* 180 -18 */
.grid-4 {width: 222px; float: left;} /* 240 -18 */
.grid-5 {width: 282px; float: left;} /* 300 -18 */
.grid-6 {width: 342px; float: left;} /* 360 -18 */
.grid-7 {width: 420px; float: left;} /* 402 -18 */
.grid-8 {width: 462px; float: left;} /* 480 -18 */
.grid-9 {width: 522px; float: left;} /* 540 -18 */
.grid-10 {width: 582px; float: left;} /* 600 -18 */
.grid-11 {width: 642px; float: left;} /* 660 -18 */
.grid-12 {width: 720px; float: left;} /* 720 -18 */
.grid-13 {width: 762px; float: left;} /* 780 -18 */
.grid-14 {width: 822px; float: left;} /* 840 -18 */
.grid-15 {width: 882px; float: left;} /* 900 -18 */
.grid-16 {width: 942px; float: left;} /* 960 -18 */
.grid-16w {width: 960px;} 

.grid {float: left; }
.grid-1M {width: 42px; float: left; margin: 9px;} /* 60 -18 */
.grid-2M {width: 102px; float: left; margin: 9px;} /* 120 -18 */
.grid-3M {width: 162px; float: left; margin: 9px;} /* 180 -18 */
.grid-4M {width: 222px; float: left; margin: 9px;} /* 240 -18 */
.grid-5M {width: 282px; float: left; margin: 9px;} /* 300 -18 */
.grid-6M {width: 342px; float: left; margin: 9px;} /* 360 -18 */
.grid-7M {width: 420px; float: left; margin: 9px;} /* 402 -18 */
.grid-8M {width: 462px; float: left; margin: 9px;} /* 480 -18 */
.grid-9M {width: 522px; float: left; margin: 9px;} /* 540 -18 */
.grid-10M {width: 582px; float: left; margin: 9px;} /* 600 -18 */
.grid-11M {width: 642px; float: left; margin: 9px;} /* 660 -18 */
.grid-12M {width: 702px; float: left; margin: 9px;} /* 720 -18 */
.grid-13M {width: 762px; float: left; margin: 9px;} /* 780 -18 */
.grid-14M {width: 822px; float: left; margin: 9px;} /* 840 -18 */
.grid-15M {width: 882px; float: left; margin: 9px;} /* 900 -18 */
.grid-16M {width: 942px; float: left; margin: 9px;} /* 960 -18 */


/*apply class to any layout blocks to seperate them verically */
.bground {background: #eee;}
.paddingAll {padding: 9px;}

.marginAll {margin: 9px; }
.marginTB {margin: 9px 0px 18px; }
.marginRB {margin: 0px 9px 9px 0px; }
.marginTRL {margin: 9px 9px 0px 9px; }
.marginLeft {margin: 9px 9px 9px 18px;}
.marginRight {margin: 9px 18px 9px 9px;}
.ninemarginbtm {margin-bottom: 9px; !important;}
.column .block {margin-bottom: 18px;}
.marginImg {margin: 3px 9px 3px 0;}
.nodisplay {display:none;}

img {display:block;} /*if you dont float images, just apply margins, they dont fit for some reason in any browser */
hr {display:block; height:1px; margin:9px; clear: both; background: #eee; color: #eee; border-style: none;  }
.ruler {display:block; height:1px; margin:9px 0px; clear: both; background: #eee;}
.underline {border-bottom: 3px solid #333; margin:3px 0 9px;}

.floatLeft {float:left; }
.floatRight {float:right;}
.clearBoth {clear: both; height: 1%;}
.clearLeft {clear: both; height: 1%;}
.clearRight {clear: both; height: 1%;}