/* !!! Stylesheet für alle IDs, Klassen und damit verbundene Kontext-Selektoren, sowie für einige wenige Anweisungen aus dem HTML-CSS, die hier überschrieben werden !!! */

/* Überschreibungen für HTML-Tags */
body {
text-align:center;
background: #0081d5;
}

/* Notwendige zusätzliche ID *nur* für die Startseite! */
body#start {background: #f9fdff;}

/* !!! Ab hier gehts mit den 'richtigen' Styles los ;-) !!! */


/* styles for IE 5 Mac - vorerst experimentelles Stadium ... */

#wrap01 {
position: absolute;
top: 20px;
left: 0;
width:100%;
min-width: 760px;
height: 180px;
color: #000;
background: #F9FDFF;
}

/* following rules are invisible to IE 5 Mac \*/

/* !!! Den Kopfbereich umfassender Container für vertikale Zentrierung *nur* der Startseite! !!!*/
#wrap01 {
position: absolute;
top: 50%;
left: 0;
margin: -180px auto 0 auto;
width:100%;
min-width: 760px;
height: 180px;
color: #000;
background: #F9FDFF;
}

 /* end IE 5 Mac hack */ 

/* !!! Den Kopfbereich umfassender Container für alle Folgeseiten! Notwendig, damit bei *diesen* der body den blauen Hintergrund haben kann: Wegen Footer-Bereich */
#wrap0101 {
width: 100%;
color: #000;
background: #f9fdff;
padding: 10px 0 0 0;
}

/* !!! Umfasst den gesamten Kopfbereich !!! */
#headArea {
position: relative;
margin: 0 auto;
width: 760px;
height: 130px;
color: #800000;
background: #F9FDFF url(../images/ibitz-logo-150x71px.gif) top left no-repeat;	
}

/* !!! Den unteren Bereich umfassender Container für vertikale Zentrierung II !!! */

/* styles for IE 5 Mac - vorerst experimentelles Stadium ... */

#wrap02 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
height: 50%;
color: #fff;
background: #0081d5;
}

/* following rules are invisible to IE 5 Mac \*/

#wrap02 {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 50%;
color: #fff;
background: #0081d5;
}

/* end IE 5 Mac hack */ 

#navAreaBackground {
margin: 0;
padding: 0;
width: 100%;
height: 60px;
background: #0081d5;
}

/* !!! Die Navigation umfassender Container für die *horizontale* Zentrierung !!! */
#navArea {
margin: 0 auto;
width: 760px;
background: #0081d5;
}


/* !!! Alles für die Drop-Navigation !!! */
#dropnavi {
position: relative;
margin: 0;
}

/* !!! Listenpositionierung mit Anzeigen und Verbergen !!! */
/* Absolute Positionierung der Unternavigationen */
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
background: transparent;
}

/* Weitere Positionierung - nur für konformante Browser */
li > ul {
left: auto;
top: auto;
}

/* Rücksetzung der ursprünglichen Listeneigenschaften für die Navigationen */
ul#nav, ul#nav ul {
list-style: none;
margin: 0;
padding: 0;
height:30px;
border: none;
}

/* border als grafisches Element */
/* ul#nav ul {
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
} */

/* Verschiedene negative Einzüge für die jeweiligen Unternavigationen */
ul#nav ul.sec {
margin-left: -152px;
padding-left: 152px;
width:608px;
}

ul#nav ul.tert {
margin-left: -304px;
padding-left: 152px;
width:608px;
}

ul#nav ul.quart {
margin-left: -456px;
padding-left: 456px;
width:304px;
}

ul#nav ul.quint {
margin-left: -608px;
width:760px;
}

/* Positionierung der Listenpunkte innerhalb der Navigation */
#nav li {
float: left;
margin: 0;
text-align: center;
width:152px;
border:none;
/* border-bottom: 1px solid #ffffff; */
}

#nav li li {
position:relative;
float: left;
width: 152px;
margin: 0;
font-size:1em;
border:none;
}



/* Verhalten der Unternavigations*blöcke* bei Hover der *Hauptpunkte* - sprich: Sie werden eingeblendet */
#nav li:hover ul, #nav li:focus ul, li.over ul, #nav li:hover ul.on, #nav li:focus ul.on, li.over ul.on {
display:block;
background: #0081d5;
z-index: 100;
}

/* Abweichende Formatierung für Unternaviblöcke eines geöffneten *Hauptpunktes*, damit die Hintergrundfarbe mit der der Links übereinstimmt, wenn der vorhandene Platz nicht genutzt wird */
#nav li:hover ul.on, #nav li:focus ul.on, li.over ul.on {
background: #0081d5;
}


/* !!! Alles zu den Links der Navigation! !!! */
/* Allgemeine Formatierung der Navi-Links - der Hauptebene */
#nav a, #nav a:visited, #nav a:hover, #nav a:focus {
display: block;
text-decoration: none;
margin: 0;
padding: 5px 0 3px 0;
width:150px;
height: 21px;
font-size: 1em;
font-family: arial, helvetica, verdana, sans-serif;
letter-spacing: 0.05em;
color: #fff;
background: #0081d5;
border: 1px solid #f9fdff;
border-top: none;
}

/* Formatierung der Navi-Links der Unterebenen */
#nav li li a, #nav li li a:visited {
display: block;
padding: 5px 0 3px 0;
margin: 0;
width:150px;
height: 22px;
color: #fff;
background: #0081d5;
border: 1px solid #f9fdff;
border-top: none;
}

#nav li li a:hover, #nav li li a:focus {
margin: 0;
color: #e60000;
background: #f9fdff;
height: 22px;
width: 152px;
border: none;
}

/* Anderer Hintergrund für *Eltern*-Element der gerade geöffneten Seite */
#nav a.onpar, #nav a.onpar:visited, #footer ul li a.onpar, #footer ul li a.onpar:visited {
color: #303030;
background: #abcfe5;
}

/* Überschreibende Hover-Anweisungen der Hover-Links der Hauptebene */
#nav a:hover, #nav a:focus, #nav a:active, #nav a.onpar:hover, #nav a.onpar:focus, #nav a.onpar:active {
color: #e60000;
background: #f9fdff;
}

/* Überschreibung für die gerade geöffnete Seite */
#nav li a.on, #nav li a.on:visited, #nav li a.on:hover, #nav li a.on:focus, #nav li a.on:active {
color: #303030;
background: #f9fdff;
cursor: default;
}

/* Anweisung für permanent geöffnete Unternavigation auf der jeweiligen Hauptseite */
#nav ul.on {
display: block;
width: 608px;
background: #0081d5;
z-index: 90;
}

/* Anweisungen für die Links in der permanent geöffneten Unternavigation */
#nav ul.on li a, #nav ul.on li a:visited {
color: #fff;
background: #0081d5;
}

#nav ul.on li a:hover, #nav ul.on li a:focus, #nav ul.on li a:active {
color: #e60000;
background: #f9fdff;
}

/* Anweisungen für Linkverhalten einer gerade geöffneten *Unter*seite */
#nav li li a.on, #nav li li a.on:visited, #nav li li a.on:hover, #nav li li a.on:focus, #nav li li a.on:active {
color: #303030;
background: #f9fdff;
cursor: default;
}



/* Diese Selektoren werden in der grafischen Ausgabe nicht dargestellt */
#dropnavi h2, #dropnavi p {display:none;}


/* !!! Anweisungen für die eingeblendeten Info-Texte der Navigation. !!!*/
#dropnavi ul li a span, #dropnavi ul li a.on span, #dropnavi ul li a.on:hover span, #dropnavi ul li a.on:focus span, #dropnavi ul li a.on:active span, #dropnavi ul li a.onpar span, #dropnavi ul li li a span, #dropnavi ul li li a.on span {
display:none}

#dropnavi ul li a:hover span, #dropnavi ul li a:focus span, #dropnavi ul li li a:hover span, #dropnavi ul li li a:focus span, #dropnavi ul li a.onpar:hover span, #dropnavi ul li a.onpar:focus span, #dropnavi ul li a.onpar:active span {
display:block;
position:absolute; top:-20px; left:0;
width:760px;
color:#303030;
background: transparent;
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:0.8em;
font-weight: normal;
line-height: 1.5em;
border:none;
border-bottom:1px solid #abcfe5;
padding:0;
}

/* In der Höhe abweichende Anweisungen bei 2 Navi-Ebenen */
#dropnavi ul li li a:hover span, #dropnavi ul li li a:focus span {
top:-50px;
}

/* Notwendige Überschreibungen für korrekte Einrückung des Info-Textes bei Links der Unternavigationen! Falls eine Unternavigation bis unter den 1. Punkt der Hauptnavi 'vorrückt, ist keine Klasse nötig, da der linke Startpunkt identisch ist.*/


#dropnavi ul li li a.secLink:hover span, #dropnavi ul li li a.secLink:focus span {
left:-152px;
}

#dropnavi ul li li a.tertLink:hover span, #dropnavi ul li li a.tertLink:focus span {
left:-304px;
}

#dropnavi ul li li a.quartLink:hover span, #dropnavi ul li li a.quartLink:focus span {
left:-456px;
}

#dropnavi ul li li a.quintLink:hover span, #dropnavi ul li li a.quintLink:focus span {

left:-608px;
}

/* Hier notwendig, um die allgemeine span-Anweisung für invis zurückzunehmen */
#dropnavi ul li a:hover span.invis, #dropnavi ul li a:focus span.invis, #dropnavi ul li li a:hover span.invis, #dropnavi ul li li a:focus span.invis {
display:none;}

/* Notwendig, um wexelnde Sprachauszeichnungen oder ähnliches in den Info-Texten formatieren zu können */
#dropnavi ul li a:hover span.other, #dropnavi ul li a:focus span.other, #dropnavi ul li li a:hover span.other, #dropnavi ul li li a:focus span.other {
display:inline;
position:static;
border:none;
}


/* #wrap03 {
width: 100%;
color: #ffffff;
background: #0081d5;
} */


/* !!! Anweisungen für die Footer-Box !!! */
#footer, #footerStart {
display:block;
margin: 5px auto 0 auto;
padding:0;
width:760px;
height: 35px;
text-align:center;
color: #000;
background: transparent;
border-top: 1px solid #0081d5;
clear: both;
}

/* Notwendige Klasse für die Startseite */
#footerStart {
margin-top: 35px;
border-top: 1px solid #abcfe5;
}

#footer a, #footer a:visited, #footerStart a, #footerStart a:visited {
padding: 0.2em;
color: #fff;
background: transparent;
text-decoration: underline;
}

#footer a:hover, #footer a:focus, #footer a:active, #footerStart a:hover, #footerStart a:focus, #footerStart a:active {
color: #e60000;
background: #fff;
text-decoration: none;
}


#footer p, #footerStart p {
padding: 0.4em 0 0.2em 0;
color: #fff;
font-size: 0.7em;
letter-spacing: 0.05em;
text-align:center;
}