@charset "utf-8";

/* 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-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-5R {width: 360px; float: right; margin: 10px 0 10px 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 */

.grid-3R {width: 240px; float: right;} 
.grid-3L {width: 220px; float: left; padding: 10px; position: relative;}

/*apply class to any layout blocks to seperate them verically */
.paddingAll {padding: 10px;}
.paddingRL {padding: 0 10px;}
.marginAll {margin: 10px;}
.marginT {margin-top: 10px;}
.marginR {margin-right: 10px;}
.marginLR {margin: 0 10px;}
.marginRB {margin: 0 10px 10px 0;}
.marginTRB {margin: 10px 10px 10px 0;}
.marginTBL {margin: 10px 0 10px 10px;}
.marginLRB {margin: 0 10px 10px;}
.NLM {margin-left: 0;}
.NRM {margin-right: 0;}

.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;}