@charset "utf-8";
/***************************************
Rastersystem
von Dominik Pschenitschni - celement.de
Version 0.7
****************************************
Das Rastersystem erlaubt uns die Positionierung von Elementen zu vereinfachen.
Dieses System basiert auf 12 Spalten. Mehrere Spalten können zu größeren
zusammengefasst werden.
Spalten können auch verschachtelt werden, wenn sie hineinpassen.*/


/*Das Raster bekommt overflow damit die clears gefloatet werden.*/
.grid { overflow:hidden	; }

/*Verschachtelte Spalten sollten in ein Element mit der Klasse "subgrid"
gefügt werden um einen Umbruch zu vermeiden.*/
.subgrid {
	margin-left:-20px;
	margin-right:-20px;
	overflow:hidden;
}

/*Spalten werden gessetzt*/
.col ,  .col2 ,
.col3,  .col4 ,
.col5,  .col6 ,
.col7,  .col8 ,
.col9,  .col10,
.col11, .col12 {
	float:left;
}

/*Außenabstand wird gesetzt*/
.col      { padding:0 24.0024%; }
.col2     { padding:0 12.0012%; }
.col3     { padding:0 2.0833%; }
.col4     { padding:0 6.0006%; }
.col5     { padding:0 4.8004%; }
.col6     { padding:0 4.1666%; }
.col7     { padding:0 3.4289%; }
.col8     { padding:0 3.0003%; }
.col9     { padding:0 2.6669%; }
.col10    { padding:0 2.4002%; }
.col11    { padding:0 2.1820%; }
.col12    { padding:0 1.92%  ; }

	

/*padding-bottom bekommen nur Spalten in #content, weil es nicht gut
aussehen würde, wären diese direkt nebeneinander.*/
#content .col  , #content .col2 ,
#content .col3 , #content .col4 ,
#content .col5 , #content .col6 ,
#content .col7 , #content .col8 ,
#content .col9 , #content .col10,
#content .col11, #content .col12 {
	padding-bottom:20px;
}

/*Defintion der Spaltenbreiten*/
.col      { width:4.3333% ; }
.col2     { width:12.6666%; }
.col3     { width:21%     ; }
.col4     { width:29.3333%; }
.col5     { width:37.6666%; }
.col6     { width:46%     ; }
.col7     { width:54.3333%; }
.col8     { width:62.6666%; }
.col9     { width:71%     ; }
.col10    { width:79.3333%; }
.col11    { width:87.6666%; }
.col12    { width:96%     ; }

/*Klassen zur Einrückung von Spalten*/
/*.indent   { margin-left: 80px; }
.indent2  { margin-left:160px; }
.indent3  { margin-left:240px; }
.indent4  { margin-left:320px; }
.indent5  { margin-left:400px; }
.indent6  { margin-left:480px; }
.indent7  { margin-left:560px; }
.indent8  { margin-left:640px; }
.indent9  { margin-left:720px; }
.indent10 { margin-left:800px; }
.indent11 { margin-left:880px; }*/




/*and now the same with margin
***************************************/
/*grids are set with a margin left and right*/
.marg.col,   .marg.col2,
.marg.col3,  .marg.col4,
.marg.col5,  .marg.col6,
.marg.col7,  .marg.col8,
.marg.col9,  .marg.col10,
.marg.col11, .marg.col12 {
	float:left;
	padding:0;
	margin:0 20px 0 20px;
}

/*the margin bottom is only attempted to cols in #content because in this
body area font shouldn't be among each other*/
#content .marg.col  , #content .marg.col2 ,
#content .marg.col3 , #content .marg.col4 ,
#content .marg.col5 , #content .marg.col6 ,
#content .marg.col7 , #content .marg.col8 ,
#content .marg.col9 , #content .marg.col10,
#content .marg.col11, #content .marg.col12 {
	margin-bottom:15px;
}

/*if you want to start a culumn not directly
after the other you can give it an indent*/
.marg.indent   { margin-left:100px; }
.marg.indent2  { margin-left:180px; }
.marg.indent3  { margin-left:260px; }
.marg.indent4  { margin-left:340px; }
.marg.indent5  { margin-left:420px; }
.marg.indent6  { margin-left:500px; }
.marg.indent7  { margin-left:580px; }
.marg.indent8  { margin-left:660px; }
.marg.indent9  { margin-left:740px; }
.marg.indent10 { margin-left:820px; }
.marg.indent11 { margin-left:900px; }