/**********************/
/*                    */
/*     Gridsystem     */
/*                    */
/**********************/


.cols1 { width: 34px; float: left;}
.cols2 { width: 88px;float: left; }
.cols3 { width: 142px; float: left;}
.cols4 { width: 196px; float: left;}
.cols5 { width: 250px; float: left;}
.cols6 { width: 304px; float: left;}
.cols7 { width: 358px; float: left;}
.cols8 { width: 412px; float: left;}
.cols9 { width: 466px; float: left;}
.cols10 { width: 520px; float: left;}
.cols11 { width: 574px; float: left;}
.cols12 { width: 628px;}


.container1 { width: 54px; float: left; }
.container2 { width: 108px; float: left; }
.container3 { width: 162px; float: left; }
.container4 { width: 216px; float: left;}
.container5 { width: 270px; float: left;}
.container6 { width: 324px; float: left;}
.container7 { width: 378px; float: left;}
.container8 { width: 432px; float: left;}
.container9 { width: 486px; float: left;}
.container10 { width: 540px; float: left;}
.container11 { width: 594px; float: left;}
.container12 { width: 648px; }

/*
.cols1 { width: 70px; float: left;}
.cols2 { width: 150px;float: left; }
.cols3 { width: 230px; float: left;}
.cols4 { width: 310px; float: left;}
.cols5 { width: 390px; float: left;}
.cols6 { width: 470px; float: left;}
.cols7 { width: 550px; float: left;}
.cols8 { width: 640px; float: left;}
.cols9 { width: 710px; float: left;}
.cols10 { width: 790px; float: left;}
.cols11 { width: 870px; float: left;}
.cols12 { width: 950px; float: left;}
*/
/* percent */
.cols50p { width: 50%;float: left;} /* 2 colums */
.cols33p { width: 33%;float: left;} /* 3 colums */
.cols25p { width: 25%;float: left;} /* 4 colums */
.cols20p { width: 20%;float: left;} /* 5 colums */

/* help */
.hundred { width: 100%; }

.margin { margin: 10px; }
.marginside { margin: 0 10px; }
.margintop {margin: 10px 0; }
.marginright { margin-right: 10px; }
.marginleft { margin-left: 10px; }

.padding { padding: 10px;}
.paddingside { padding: 0 10px; float: none; }
.paddingtop { padding: 10px 0; float: none; }
.paddingright { padding-right: 10px; }
.paddingleft { padding-left: 10px; }

.clear { clear: both; }
.left { float: left; }
.right { float: right; }
.textcenter { text-align: center; }
.textright { text-align: right; }

strong, .bold {font-weight: bold;}
.italic {font-style: italic;}
/* Horizental rules */
.hr1 { height: 1px;}
.hr2 { height: 2px;}
.hr5 { height: 5px;}
.hr10 { height: 10px;}
.hr20 { height: 20px;}
.hr50 { height: 50px;}