/* ALLGEMEINE EINSTELLUNGEN */

/* Schriftarten */
body, div, p, td, h1, h2, h3, input, select, a  {
	font: normal 11px verdana, arial, geneva, sans-serif;
	margin: 0px;
}
a {
	text-decoration: none;
}

/* Innenabstand der Seite. */
body {
	margin: 12px 6px 12px 6px;
	background-color: #FFFFFF;  /* col[Hintergrund]*/
}

/* Tabellen ohne Abstand. */
table {
	border: 0px;
	border-spacing: 0px;
	border-collapse: collapse;
}

/* Keine Rahmen mehr um verlinkte Bilder. */
img {
	border: 0px;
}

/* Ermöglicht pixelgenaue Tabellen da eine Zelle ohne Innenabstand (default: 1px) keinen eigenen Platz mehr beansprucht. */
td {
	padding: 0px;
}

/* Wird gesetzt damit Formular Tabellenzellen nicht verändern. */
form {
	display: inline; /* Erzwingt die Anzeige im Text - das Element wird im laufenden Textfluss angezeigt. */
}

/* Überschriften sollen nicht automatisch umgebrochen werden. */
h1, h2, h3 {
	white-space: nowrap;
}

/* aktive Elemente fett darstellen */
div.aktiv {
	font-weight: bold;
}

/* ELEMENTE, DIE DIE STRUKTUR DER SEITE FESTLEGEN */

/* Der Bereich zwischen Seitenanfang und der Ansprache. Beinhaltet Logo, MFL, und Navigation. */
#top {
	width: 100%;
}

/* Der Rest der Seite (Seite abzüglich dem #top Div-Tag). Beinhaltet Ansprache, Navigation Links, Content, MWCs, ... */
#main {
	width:100%;
	margin-top: 0px;
}

/* Bereich in dem das Site-Logo dargestellt wird. */
#logo {
	width: 363px;
	height: 61px;
	text-align: left;
	margin-bottom: 6px;
}
#logo img {
	width: 363px;
	height: 61px;
}

/* Bereich in dem die MFL dargestellt wird. */
#mfl {
	position: absolute;
	right: 6px;
	top: 12px;
	height: 46px;
	text-align: right;
}

/* Bereiche in dem die Navigation dargestellt wird. */
#navi_ebene1, #navi_ebene2 {
	height: 24px;
	width: 100%;
}

/* Abstand zwischen den Ebenen. */
#navi_ebene1 {
	margin-bottom: 1px;
}

/* Bereich in dem die Ansprache dargestellt wird. */
/* Die Höhe und der Abstand unten wird im jeweiligen Template CSS gesetzt. */
#ansprache {
	width: 100%;
}
table.ansprache {
	width: 100%;
}
table.ansprache td.text {
	width: 100%;
	vertical-align: bottom;
	background-image: url(pics/ecke_links_unten.gif);
	background-position: bottom left;
	background-repeat: no-repeat;
}
table.ansprache td.text p {
	font-size: 14px;
	font-weight: bold;
	text-align: right;
	white-space: nowrap;
}

table.ansprache td.bild {
	background-image: url(pics/ecke_rechts_unten.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
}

/* Container für die Navigation Links. */
/* Die Position wird im jeweiligen Template CSS gesetzt. */
#navLinksContainer {
	width: 162px;
	background-color: #FFFFFF; /* col[Hintergrund]*/
}
#navLinks {
	margin: 1px 0px 1px 0px;
	width: 161px;
}

/* Bereich in dem Inhalt und MWCs dargestellt werden. */
table.inhaltsspalten {
	width: 100%;
}

/* Bereich der als Platzhalter für die MWCs (bzw. auch Navigation Links) dient. */
/* Bei Änderung der Breite muss auch die <colgroup> im HTML angepasst werden! */
table.inhaltsspalten td.spalteLinks, 
table.inhaltsspalten td.spalteRechts {
	vertical-align: top;
	width: 162px;
}
table.inhaltsspalten td.spalteLinks {
	padding-right: 6px;
}
table.inhaltsspalten td.spalteRechts {
	padding-left: 6px;
}

/* Bereich in dem der eigentliche Inhalt angezeigt wird. */
table.inhaltsspalten td.spalteMitte {
	vertical-align: top;
}

table.inhalt {
	width: 100%;
}

table.inhalt td.contentUeberschrift {
	padding-bottom: 3px;
}

/* Runde Ecken für den Contentbereich. */
table.inhalt td.obenLinks {
	width: 2px;
	height: 2px;
	background-image: url(pics/ecke_links_oben.gif);
	background-position: top left;
	background-repeat: no-repeat;
}
table.inhalt td.obenRechts {
	width: 2px;
	height: 2px;
	background-image: url(pics/ecke_rechts_oben.gif);
	background-position: top right;
	background-repeat: no-repeat;
}
/* In die ersten beiden Ecken wird noch ein transparentes Bild gesetzt,
   damit die Zellen beim verkleinern nicht zuzammengedrückt werden. */
table.inhalt td.obenLinks img,
table.inhalt td.obenRechts img {
	width: 2px;
}
table.inhalt td.untenLinks {
	width: 2px;
	height: 2px;
	background-image: url(pics/ecke_links_unten.gif);
	background-position: bottom left;
	background-repeat: no-repeat;
}
table.inhalt td.untenRechts {
	width: 2px;
	height: 2px;
	background-image: url(pics/ecke_rechts_unten.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
}

/* Bereich in dem ein MWC dargestellt wird. */
div.mwc {
	position: relative; /* position: relative, damit ich div.icon abosolute positionieren kann */
	width: 162px;
	margin-bottom: 12px;
}

/* Verhindert das Zusammenfallen des linken und rechtent Abstands beim Verkleinern des Fensters. */
img.spacer {
	width: 162px;
	height: 1px;
}

/* Der Footer mit den Servicelinks. */
table.footer {
	width: 100%;
	height: 23px;
}
table.footer td {
	white-space: nowrap;	
}
table.footer td.rechts {
	text-align: right;
}
table.footer img.servicelink {
	margin-right: 4px;
	margin-bottom: 0px;
}
/* In der rechten Zelle kommen mehrere Links vor die mit 14px Abständen getrennt werden. */
table.footer td.rechts img.servicelink {
	margin-left: 14px;
}
table.footer a.servicelink {
	font-size: 10px;
	text-decoration: none;
}