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


.cols1 { width: 45px; float: left;}
.cols2 { width: 110px;float: left; }
.cols3 { width: 175px; float: left;}
.cols4 { width: 240px; float: left;}
.cols5 { width: 305px; float: left;}
.cols6 { width: 370px; float: left;}
.cols7 { width: 435px; float: left;}
.cols8 { width: 500px; float: left;}
.cols9 { width: 565px; float: left;}
.cols10 { width: 630px; float: left;}
.cols11 { width: 695px; float: left;}
.cols12 { width: 760px;}

.container1 { width: 65px; float: left; }
.container2 { width: 130px; float: left; }
.container3 { width: 195px; float: left; }
.container4 { width: 260px; float: left;}
.container5 { width: 325px; float: left;}
.container6 { width: 390px; float: left;}
.container7 { width: 455px; float: left;}
.container8 { width: 520px; float: left;}
.container9 { width: 585px; float: left;}
.container10 { width: 650px; float: left;}
.container11 { width: 715px; float: left;}
.container12 { width: 780px; }


/* 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; }

.margin5 { margin: 5px; }
.marginside5 { margin: 0 5px; }
.margintop5 {margin: 5px 0; }
.marginright5 { margin-right: 5px; }
.marginleft5 { margin-left: 5px; }

.padding5 { padding: 5px;}
.paddingside5 { padding: 0 5px; float: none; }
.paddingtop5 { padding: 5px 0; float: none; }
.paddingright5 { padding-right: 5px; }
.paddingleft5 { padding-left: 5px; }

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

/* Horizental rules */
.hr1 { height: 1px;}
.hr2 { height: 2px;}
.hr5 { height: 5px;}
.hr10 { height: 10px;}
.hr20 { height: 20px;}
.hr50 { height: 50px;}