/* Stylesheet fuer das Grund-Layout
 *    ----------------------------
 *    | Header                   |
 *    ----------------------------
 *    |       |          |       |
 *    | Extra | Central  | Right |
 *    | 235px | 360px    | 340px |
 *    |       |          |       |
 * ----------------------------------
 * |  | Footer                   |  |
 * ----------------------------------
 *  
 * oder 
 *    ----------------------------
 *    | Header                   |
 *    ----------------------------
 *    |       |               |
 *    | Extra | WideColumn    |
 *    | 235px | 550px         |
 *    |       |               |
 * ----------------------------------
 * |  | Footer                   |  |
 * ----------------------------------
 */

/* Absolute Positionierung ist boese. */
/* Nein wirklich. Es ist Boese.       */
body {
    margin: 0;
    padding: 0;
	text-align: center;
}

/* Unsichtbare Elemente */
.skip { position: absolute; left: -10000px; top: -1000em; }

/* Zum Beenden von Floats muss dort ein div mit der Klasse clearer eingefuegt werden. */
.clearer { display:block; height:0; font-size:0; clear:both; overflow:hidden; visibility:hidden; }

/* Zunächst kommen hier die Bereiche in ihrer Größe und Position; Details folgen später */

#container {                                     /* Das ganze Layout soll als Blatt auf der Seite "schweben". */
	position: relative;
	margin: 0 auto;                                 /* Hiermit zentrieren wir unsere Seite (außer im IE). */
	width: 980px;                                   /* Eine feste Breite. */
	text-align: left;                               /* Ausgleich der Zentrierung für den IE im Body-Tag */
}

/* HEADER */
div#Header {
	position: relative;
	top: 0px;
	width: 100%;                                   /* Breite des Hintergrundbildes */
/*	background-color: silver;                      /* zu Testzwecken */
}

/* LINKE SPALTE */
div#Extra {
	float: left;
	top: 0px;
	left: 0px;
	width: 235px;
/*	background-color: gray;                      /* zu Testzwecken */
}

/* MITTLERE SPALTE (wenn 3-spaltig) */
.CentralColumn {
	float: left;
	top: -20px;
	margin-left: 25px;
	width: 360px;
/*	background-color: green;                      /* zu Testzwecken */
}

/* RECHTE SPALTE (wenn 3-spaltig) */
.RightColumn {
	float: left;
	top: -33px;
	margin-left: 20px;
	width: 340px;
	padding: 0;
/*	background-color: blue;                      /* zu Testzwecken */
}

/* WIDE (Mitte und Rechts, alternativ zu den beiden vorgenannten) */
.WideColumn {
	float: left;
	top: 0px;
	margin-left: 25px;
	width: 550px;
/*	background-color: red;                      /* zu Testzwecken */
}

/* FOOTER */
div#Footer {
	margin-top: 40px;
	margin-bottom: 20px;
	width: 100%;
	background: #FFF url(bg_footer.jpg) top left repeat-x;    /* Hintergrundbild für den senkrechten Strich. (Hintergrund ist etwas grau, wenn Bild nicht lesbar sein sollte.) */
}


/* Detaillierung von Header
 * Er besteht aus drei "Zeilen":
 * - Banner für Logo, Suchfeld und Orga-Navi
 * - Buehne für grosses Foto mit Text und Haupt-Navi
 * - Klickpfad
 */
 
/* BANNER (oberer Bereich des Header) */
div#Banner {
	position: relative;
	height: 150px;                                  /* Höhe */
	width: 980px;                                   /* Breite */
}
div#Header img#bklogo {                         /* Position des Logos */
	position: absolute;
	top: 40px;
	left: 30px;
}
div#Suche {                                      /* Position des Suche-Feldes */
	position: absolute;
	top: 70px;
	right: 15px;
}
div#Orga {                                       /* Position der organisatorischen Links im Header rechts */
	position: absolute;
	top: 125px;
	right: 0px;
}

/* BUEHNE (unterer Bereich des Header) */
div#Buehne {
	position: relative;
	height: 350px;                                  /* Höhe des Hintergrundbildes */
	width: 980px;                                   /* Breite des Hintergrundbildes */
}
div#Headertext {                                 /* Text im Header (Positionierung) */
	position: absolute;
	top: 30px;
	left: 50px;
	width: 350px;
}
div#Navigation {                                 /* Haupt-Navigation (Positionierung) */
	position: absolute;
	top: 60px;
	right: 15px;
	width: 210px;
}


/* Detaillierung von Footer - Er besteht aus vier Spalten */
div#FootContainer {                                     /* Das ganze Layout soll als Blatt auf der Seite "schweben". */
	position: relative;
	margin: 0 auto;                                 /* Hiermit zentrieren wir unsere Seite (außer im IE). */
	width: 980px;                                   /* Eine feste Breite. */
	text-align: left;                               /* Ausgleich der Zentrierung für den IE im Body-Tag */
}
div#FooterC1 {
	float: left;
	width: 260px;
}
div#FooterC2 {
	float: left;
	width: 380px;
}
div#FooterC3 {
	float: left;
	margin-top: 30px;
	width: 170px;
}
div#FooterC4 {
	float: left;
	margin-top: 30px;
	width: 170px;
	text-align: right;
}
div#FootContainer img {                          /* Abstaende zwischen den Logos */
	margin-bottom: 20px;
}

/* 08.04.2010 Jens Malmstroem */