/* Abstaende zuruecksetzen */

* {
	margin: 0;
	padding: 0;
}

* html .rbroundboxContent {
	height: 1%;
}

/* Hauptschriftart groesse und Hintergrund */

/*	Beispielnavigation von "http://www.barrierefreies-webdesign.de/knowhow/navigationsleiste/index.html"
	Coding von Joern Hofer (http://www.code-horizons.de)
	Original entwickelt fuer http://www.profil-hh.de */

/* 	Globale Definitionen */
html, body	{
	height: 100%;
	margin: 0;
	padding: 0;
	color: #000000;
	background-color: #FFFFFF;
	width: 655px;
	font: 100.01% Arial, Helvetica, sans-serif;
}

p {
	margin-bottom:1.2em;
	font: 0.9em Arial, Helvetica, sans-serif;
}

h1 {
	font: bold 1.2em Arial, Helvetica, sans-serif;
	margin: 10px 0px 20px 0px;
	}

h2 {
	font: bold 1.1em Arial, Helvetica, sans-serif;
	margin: 20px 0px 20px 0px;
}

h3 {
	font: bold 1em Arial, Helvetica, sans-serif;
	margin: 10px 0px 20px 0px;
}

h4 {
	font: bold 0.8em Arial, Helvetica, sans-serif;
}

h5 {
	font: bold 0.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-align: left;
	padding: 0;
	margin: 5px 0px 0px 15px;
}

/* 	XHTML 1.0 Strict */
img {
	border: none;
}

/* 	Um die unterschiedlichen Standard-Abstaende fuer versch. Broweser zu ueberschreiben */
ul, ol, li {
	padding: 0;
	margin: 0;
	list-style: none;
}

p a:link {
	color: #FF3300;
	font-weight: bold;
	text-decoration: underline;
}

p a:visited {
	color: #FF3300;
	font-weight: bold;
	text-decoration: underline;
}
	
p a:hover {
	color: #2e3192;
	font-weight: bold;
	text-decoration: none;
	background-color: #FFCC33;
}

p a:focus {
	color: #2e3192;
	font-weight: bold;
	text-decoration: none;
	background-color: #FFCC33;
}

p a:active {
	color: #FF3300;
	font-weight: bold;
	text-decoration: none;
	background-color: #FFCC33;
}

#container {
	width:auto;
	width: 655px;
	}

/*	Den Layer um die Navigation eine Hintergrundfarbe und Breite vorgeben */
#hauptNavigation {
	display: none;
	position: absolute;
	z-index: 100;
	width: 12em;
	background-color: #DFE1F0;
	border-right: 1px solid #000;
	margin: 0em 0.5em 0em 0.8em;
	left: 5px;
	top: 200px;
}

/*	In der Navigation sollen keine Linien unter den Links sein, ausserdem sollen alle Links Block-Elemente sein, damit die ganze Navigations-Flaeche klickbar wird */
#hauptNavigation a {
	text-decoration: none;
	display: block;
	color: #2E3192;
}

/*	fuer Hauptpunkte sollen die Eintraege Fett sein, Hauptpunkte haben zum naechsten Punkt eine dicke Border */
#hauptNavigation ul li {
	font-weight: bold;
	border-bottom: 4px solid #2E3192;
}

/*	aufgrund des Problems, Borders richtig anzuzeigen, hier für den IE eine Hoehe (wirkt wie min-height) */
* html #hauptNavigation ul li {
	height: 1em;
}

/* 	Level 1 Eintrage haben ein Hintergrundbild, und ein paar Abstaende, die padding-left/right sind wichtig fuer später */
#hauptNavigation ul li a {
	background: url(../img/list_icon_00.gif) no-repeat 10px 0.7em;
	padding: 6px 7px 6px 24px;
}

/* 	Bei Hover ueber einen Level 1 Eintrag bekommt der a des Eintrages rechts und links eine Border und das padding left/right wird um die breite der Border verringert.
	Aufgrund dessen muessen wir auch das Hintergrundbild neu positionieren */
#hauptNavigation ul li a:hover, #hauptNavigation ul li a:focus, #hauptNavigation ul li a:active {
	background-color: #ffffea;
	border-left: 5px solid #ffffea;
	border-right: 5px solid #ffffea;
	padding-left: 19px;
	padding-right: 2px;
	background-position: 5px 0.7em;
}

/*	Der aktive Level 1 Eintrag bekommt immer eine linke Border, dehalb muß das Padding um den Border-Wert veraendert werden.
	Somit auch wieder das Hintergrundbild neu positionieren (und ein anderes benutzen, da er ja aktiv ist) 
	Das gilt aber nur, wenn ein Level 2 Eintrag ausgewaehlt ist (Level 1 hat sonst keinen Link) */
#hauptNavigation ul li.selectedOne div a {
	border-left: 5px solid #DFE1F0;
	padding-left: 19px;
	background-position: 5px 0.7em;
	background-image: url(../img/list_icon_10.gif);
}

/*	Da oben für die Hover Effekte die Borders gesetzt werden, muessen wir hier noch einmal für den aktiven sagen, dass die Borderfarbe die Hover-Farbe sein soll */
#hauptNavigation ul li.selectedOne div a:hover, #hauptNavigation ul li.selectedOne div a:focus, #hauptNavigation ul li.selectedOne div a:active {
	border-left-color: #ffffea;
}

/*	Dies ist der Zustand, wenn man auf der Seite des Level 1 Eintrages ist. Es ist also ein zweite UL vorhanden, der Navigationspunkt ist ausgeklappt und hat keinen Link.
	Hier wird eine Border links gesetzt, welche die gleiche Farbe wie der Hintergrund hat. Surfer mit normalen Farbeinstellungen sehen sie also nicht.
	Nur User mit veraenderten Kontrasten sehen sie. Ein anderes Hintergrundbild zeigt für "normale" User an, dass dieser Punkt ausgewaehlt ist */
#hauptNavigation ul li.selectedOne div.selectedOne {
	border-left: 5px solid #ffffea;
	color: #CA1225;
	background: url(../img/list_icon_11.gif) no-repeat 5px 0.7em #ffffea;
	padding: 6px 7px 6px 19px;
}

/*	der IE rechnet Hintergrundbilder dieser Konstruktion etwas anders, deshalb bekommt er eine andere Position */
* html #hauptNavigation ul li.selectedOne div.selectedOne {
	background-position: 10px 0.7em;
}

/*	LEVEL 2 */

/* Fuer normale Level 2 Eintraege muessen wir ein paar Sachen von Level 1 ueberschreiben */
#hauptNavigation ul li ul li {
	font-weight: normal;
	border-top: 1px solid #A9B0D7;
	border-bottom: 0 solid #A9B0D7;
}

/* 	Level 2 Eintraege haben ein anderes Icon, andere Paddings etc. */
#hauptNavigation ul li ul li a {
	background: url(../img/list_sub_0.gif) no-repeat 20px 0.45em;
	padding: 4px 7px 4px 34px;
}

/*	Und hier machen wir das gleiche wie oben, muessen es aber für Level 2 Eintraege aufgrund ihrer geaenderten Position etwas neu anpassen */
#hauptNavigation ul li ul li a:hover, #hauptNavigation ul li ul li a:focus, #hauptNavigation ul li ul li a:active {
	background-color: #ffffea;
	border-left: 5px solid #ffffea;
	border-right: 5px solid #ffffea;
	padding-left: 29px;
	padding-right: 2px;
	background-position: 15px 0.45em;
}

/*	und fuer den selektierten Level 2 Eintrag wieder links eine feste Border und die Paddings anpassen */
#hauptNavigation ul li ul li.selectedOne {
	border-left: 10px solid #A9B0D7;
	background: url(../img/list_sub_1.gif) no-repeat 10px 0.45em #ffffea;
	padding: 4px 7px 4px 24px;
	color: #CA1225;
}

#infobox {
	display: none;
	position: static;
	top:200px;
	right:0px;
	z-index:1;
	width: 10em;
	float: right;
	margin: 0px 20px 0px 0px;
	background-color: #dfe1f0;
	color: #2e3192;
	}

#infobox h4 {
	padding: 2px 5px 0px 5px;
	margin: 3px 5px 3px 5px;
	font-size: 0.75em;
}
	
#infobox p {
	padding: 2px 5px 10px 5px;
	font-size: 0.75em;
	border-bottom: 2px solid #2e3192;
	margin: 3px 5px 3px 5px;
}
	
.invisible, dfn {
	position: absolute;
	left: -1000px;
	top: -1000px;
	width: 0px;
	height: 0px;
	overflow: hidden;
	display: inline;
}

/*	als eigene Klasse, um es im Context einer Seite besser steuerbar zu machen */
.navText {
	font-size: 0.8em;
}

.logo2 {
	font: bold 32px Arial,Helvetica,Geneva,Sans-serif;
	white-space: nowrap;
 	color: #333399;
 	margin: 0px 10px 0px 10px;
}

.logospon {
	margin: 10px 15px 15px 15px;
}

.smallfont {
	font: 0.7em Arial, Helvetica, sans-serif;
	text-align: center;
	margin: 0.1em 0em 1em 0em;
	padding: 1em 0 1em 0;
	border-top: 1px solid #2E3192;
	width: 100%;
	clear: left;
	}

.bottom {
	display: none;
	position: relative;
	clear: both;
	height: 25px;
}

.motto {
	margin: 0;
	padding: 10px 0 5px 0;
}

.list {
	margin-left: 25px;
	background: url(point.gif) no-repeat  5px 0.2em;
	font: bold 1.1em Arial, Helvetica, sans-serif;
	color: #ca1225;
	padding: 3px 0px 0px 25px;
}

.listtext {
	margin: 10px 5px 10px 5px;
	padding-left: 25px;
}

.list2 {
	background: url(point2.gif) no-repeat;
	margin: 5px 5px 5px 40px;
	padding-left: 25px;
}

.list3 {
	background: url(point3.gif) no-repeat;
	margin: 10px 5px 10px 65px;
	padding-left: 25px;
}

.highlighted {
	font-style: italic;
	color: #CA1225;
	padding: 5px;
}

.rbroundboxTop {
	display: none;
	height: 159px;
	margin: 20px 20px 20px 20px;
	background: #FFF;
}
	
.rbtop div {
	display: none;
	background: url(eckelo.gif) no-repeat top left;
}
	
.rbtop { 
	display: none;
	background: url(eckero.gif) no-repeat top right;
}
	
.rbbot div {
	display: none;
	background: url(eckelu.gif) no-repeat bottom left;
}
	
.rbbot {
	display: none;
	background: url(eckeru.gif) no-repeat bottom right; 
}

/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
	width: 100%;
	height: 10px;
	font-size: 1px;
}

.rbcontent {
	margin: 0 20px;
}
	
.rbroundboxContent {
	position: relative;
	z-index: 90;
	background-color: #FFF;
	width: auto;
	width: 650px;
	margin: 0;
	overflow: visible;
}

.pictext {
	position: static;
	float:right;
	right:0px;
	width: 270px;
	padding: 5px;
	margin:5px;
	font: 0.7em Arial, Helvetica, sans-serif;
	text-align: center;
	background-color: #dfe1f0;
	}