/* Default Grid */
.grid-1 {width: 80px; float: left;} 
.grid-2 {width: 160px; float: left;}
.grid-3 {width: 240px; float: left;}
.grid-4 {width: 320px; float: left;}
.grid-4M20 {width: 280px; float: left; margin: 10px 20px 20px;}
.grid-5 {width: 400px; float: left;}
.grid-6 {width: 480px; float: left;}
.grid-7 {width: 560px; float: left;}
.grid-8 {width: 640px; float: left;}
.grid-9 {width: 720px; float: left;}
.grid-10 {width: 800px; float: left;} 
.grid-11 {width: 880px; float: left;} 
.grid-12 {width: 960px; float: left;} 

.grid-1M {width: 60px; float: left; margin: 10px;} /* 80 -20 */
.grid-2M {width: 140px; float: left; margin: 10px;} /* 160 -18 */
.grid-3M {width: 220px; float: left; margin: 10px;} /* 240 -18 */
.grid-4M {width: 300px; float: left; margin: 10px;} /* 320 -18 */
.grid-5M {width: 380px; float: left; margin: 10px;} /* 400 -18 */
.grid-6M {width: 460px; float: left; margin: 10px;} /* 480 -18 */
.grid-7M {width: 540px; float: left; margin: 10px;} /* 560 -18 */
.grid-8M {width: 620px; float: left; margin: 10px;} /* 640 -18 */
.grid-9M {width: 700px; float: left; margin: 10px;} /* 720 -18 */
.grid-10M {width: 780px; float: left; margin: 10px;} /* 800 -18 */
.grid-11M {width: 860px; float: left; margin: 10px;} /* 880 -18 */
.grid-12M {width: 940px; float: left; margin: 10px;} /* 960 -18 */

/* Custom Grids and related rules*/
.grid-3custom {width: 220px; float: left; height: 241px; background: #f5f5f5; padding: 10px}
.grid-2R {width: 140px; float: right; margin: 0 0 18px 20px;} /* 160 -18 */
.grid-3L {width: 220px; float: left; padding: 10px; position: relative;}
.grid-3MT {width: 220px; float: left; margin: 0 10px 10px;} /* 240 -20 */
.grid-3MT img {margin-bottom: 9px;}

/*apply class to any layout blocks to seperate them verically */
.paddingAll {padding: 10px;}
.marginAll {margin: 10px;}
.margin20 {margin: 20px;}
.marginR {margin-right: 10px;}
.marginLR {margin: 0 10px;}
.marginRB {margin: 0 10px 10px 0;}
.marginTRB {margin: 10px 10px 10px 0;}
.marginLRB {margin: 0 10px 10px;}

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

.ninemarginbtm {margin-bottom: 9px; !important;}
.column .block {margin-bottom: 18px;}

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 0px; clear: both; background: #eee; color: #eee; border-style: none;  }
.ruler {display:block; height:1px; margin:9px 0px; clear: both; background: #eee;}