/* Aufbau der CSS-Datei:

- body und Layout-Boxen
- Abkürzungen/Akronyme
- Sprunglinks
- Schriftgröße und Farben der Absätze, Überschriften etc.
- Kopfbereich
- Orientierungsnavigation
- Navigation, Unternavigation
- Suche
- Brotkruemelnavigation
- Inhalt
- Links: Standardformat
- Links: Ausnahmen
- Rechtespalte
- Fußbereich
- Allerlei Nützliches

 */

* {
margin: 0;
padding: 0;
}

body {
background-color: #FFFFFF; /* Hintergrundfarbe */
min-width: 56em; /* Nicht zu niedrig setzen, sonst Probleme in 800x600 IE */
max-width: 1300px;
color: #023985; /* Standard-Schriftfarbe */
font-family: 'Trebuchet MS', Verdana, 'lucida grande', arial, sans-serif;
font-size: 100.01%;
padding: 18px 0px 0px 30px; /* Abstand nach oben, wegen Sprunglinks */
}

#schatten {
background-image: url(../bilder/schatten.jpg);
background-position: 100% 0%;
background-repeat: repeat-y;
width: 98%;
background-color: #FFFFFF;
color: #023985;
}

#box { /* In der Box sitzt das helle Hintergrundlogo der Navigation */
position: relative;
background-color: #f3f6f9;
background-image: url(../bilder/bg.gif);
background-position: 0 -175px; /* Hier verschieben, wenn das Hintergrundlogo höher oder tiefer stehen soll */
background-repeat: no-repeat;
color: #023985;
text-align: left;
width: 98.5%;
border-bottom: 5px solid #023985; /* Blauer Rand unten */
}


/* Abkürzungen und Akronyme (Kunstwort, das aus den Anfangsbuchstaben mehrerer Wörter zusammengesetzt, z. B. EDV) */

acronym {
border-bottom : none;
cursor: help;
}

abbr {
border-bottom: none;
}

/* =============  Sprunglinks (Siehe ZPID) ============= */

#sprunglink {
position: absolute;
width: 100%;
top: -2000px;
left: -2000px;
}

#sprunglink p {
font-size: 1em;
}

#sprunglink a {
position: absolute;
top: 0;
right: 0;
font-size: 70%;
font-weight: bold;
text-decoration: underline;
}

#sprunglink a:focus,
#sprunglink a:active {
position: absolute;
z-index: 102;
top: 2000px;
left: 2030px; /* padding von body steht auf 30px */
color: #ffffff;
background: #023985;
width: 280px; /* = 266 width + 14 border-left = #grenzenlos h1.lesen */
padding: 0 3px;
text-decoration: none;
}

/* =============  Schriftgrößen und -farben ============= */


p, ul, ol { /* Einfache Absätze und Aufzählungen */
font-size: 0.9em; /* Standard-Schriftgröße */
line-height: 1.4;
padding: 6px 0px 6px 0px;
}

ul, ol {  /* Alle Listen erhalten zunächst keine Aufzählungszeichen */
list-style: none;
}

h1 {
font-size: 1.0em;
color: #023985;
background-color: #ffffff;
margin: 0px 0px 14px 0px;
}

h2 {
font-size: 1em;
color: #023985;
background-color: #ffffff;
margin: 0px 0px 14px 0px;
}

h3 {
font-size: 1em;
color: #6d5d3a;
background-color: #ffffff;
margin: 20px 0px 14px 0px;
}

h4 {
font-size: 0.9em;
color: #a65551;
background-color: #ffffff;
margin: 25px 0px 14px 0px;
}

h5 {
font-size: 0.9em;
color: #023985;
background-color: #ffffff;
margin: 25px 0px 14px 0px;
}

.sachliteratur h5 { /* Untergenre in der Blindenschriftbuch-Liste */
font-size: 0.9em;
font-style: italic;
color: #6d5d3a;
background-color: #ffffff;
margin: 25px 0px 14px 0px;
}

h6 {
font-size: 0.9em;
color: #023985;
background-color: #ffffff;
margin: 25px 0px 14px 0px;
}

/* =============  Kopfbereich ============= */

#kopfbereich { /* Kopfbereich - Absolut in der Box positioniert! */
position: absolute;
top: 1.6em;
left: 0;
width: 100%;
background-color: transparent;
color: #ffffff;
height: 10em; /* Achtung: wenn hier Änderungen vorgenommen werden, dann #inhalt, #brotkruemelnavigation und #navigation ebenfalls ändern! */
z-index: 14; /* Sonst verschwindet der Kopfbereich hinter den Inhaltsbereich */
}

#grenzenlos { /* Blauer Streifen mit Text - absolut in der Box positioniert! */
position: absolute;
font-family: Arial, Helvetica, sans-serif;
border-bottom: 3px solid white;
top: 0;
left: 0;
width: 100%;
background-color: #023985; /* Blauer Streifen */
height: 1.4em; /* #kopfbereich top 1.6em abzüglich dieser Wert = Abstand zwischen den Bereichen */
color: #ffffff;
z-index: 25;
overflow: hidden;
}

#grenzenlos h1.lesen {
background-color: #a3b7d2; /* Hellblauer Kasten mit Text im blauem Streifen */
color: #023985;
width: 266px;
height: 83%;
border-left: 14px solid #023985;
font-size: 90%;
padding: 2px 0px 2px 5px;
margin: 0;
line-height: 1.3;
}

h2.utitel {/* Der Text ist absolut in grenzenlos-Box positioniert */
position: absolute;
top: 0px;
left: 290px;
color: #ffffff;
background-color: transparent;
z-index: 27;
font-size: 90%;
padding: 2px 0px 2px 5px;
line-height: 1.3;
margin: 0;
}

#telefon { /* Hamburger Blindenbücherei und Telefonnummer */
padding: 5px 0px 12px 19px;
background-color: transparent;
color: #023985;
width: 289px;
}

#telefon h2, #telefon p {
font-size: 0.9em;
font-weight: bold;
color: #023985;
background-color: transparent;
margin: 0;
padding: 0;
}

.telefonfloat { /* Telefon-Symbol habe ich hier als float positioniert */
float: left;
padding-right: 5px;
padding-top: 2px;
}

#logoundfoto { /* Layoutfoto der Startseite */
background-image: url(../bilder/layoutfoto/daisy-5.jpg);
background-position: 100% 100%;
background-repeat: repeat-x;
height: 120px;
width: 100%;
background-color: #e3e9f1;
color:#023985;
}

#telefon a:link {
text-decoration: none;
color: #023985;
background-color: transparent;
}

#telefon a:visited {
text-decoration: none;
color: #023985;
background-color: transparent;
}

#telefon a:hover {
background-color: transparent;
color: #a65551;
text-decoration: underline;
}

#telefon a:focus, #telefon a:active {
/* Durchsteppen" mit der Tabulator-Taste   */
background-color: #023985;
color: #f0f8ff;
text-decoration: underline;
}

/* Die unterschiedlichen Layoutfotos, die dazugehörige ID befindet sich direkt im body-Tag */

#ausleihe #logoundfoto { /* Layoutfoto der Ausleihe */
background-image: url(../bilder/layoutfoto/karteikarten.jpg);
}

#ausleihe-daisy #logoundfoto { /* Layoutfoto der Ausleihe DAISY-Bücher */
background-image: url(../bilder/layoutfoto/daisy-3.jpg);
}

#ausleihe-daisygesamt #logoundfoto { /* Layoutfoto der Ausleihe DAISY-Gesamtliste */
background-image: url(../bilder/layoutfoto/daisy-3.jpg);
}

#ausleihe-blind #logoundfoto { /* Layoutfoto der Ausleihe Blindenbücher-Bücher */
background-image: url(../bilder/layoutfoto/blindenschriftbuecher.jpg);
}

#ausleihe-kassetten #logoundfoto { /* Layoutfoto der Ausleihe Kassetten */
background-image: url(../bilder/layoutfoto/kassetten.jpg);
}

#ausleihe-kataloge #logoundfoto { /* Layoutfoto der Ausleihe Kataloge bestellen */
background-image: url(../bilder/layoutfoto/katalog.jpg);
}

#information #logoundfoto { /* Layoutfoto Informationen für neue Nutzer */
background-image: url(../bilder/layoutfoto/post.jpg);
}

#information-daisy #logoundfoto { /* Layoutfoto Information über DAISY */
background-image: url(../bilder/layoutfoto/daisy-4.jpg);
}

#information-versand #logoundfoto { /* Layoutfoto Information über Versand */
background-image: url(../bilder/layoutfoto/post-2.jpg);
}

#information-anmeldung #logoundfoto { /* Layoutfoto Anmeldung */
background-image: url(../bilder/layoutfoto/mitarbeiter.jpg);
}

#ueberuns #logoundfoto { /* Layoutfoto Information Über uns */
background-image: url(../bilder/layoutfoto/geschichte.jpg);
}

#presse #logoundfoto { /* Layoutfoto Presse */
background-image: url(../bilder/layoutfoto/archiv.jpg);
}

#sprecher #logoundfoto { /* Layoutfoto Sprecher */
background-image: url(../bilder/layoutfoto/sprecher.jpg);
}

#spenden #logoundfoto { /* Layoutfoto Spenden */
background-image: url(../bilder/layoutfoto/buecher.jpg);
}

#jubel #logoundfoto { /* Layoutfoto Jubiläum */
background-image: url(../bilder/layoutfoto/blumen.jpg);
}

#leitbild #logoundfoto { /* Layoutfoto Leitbild */
background-image: url(../bilder/layoutfoto/stift.jpg);
}

#projekte #logoundfoto { /* Layoutfoto Projekte */
background-image: url(../bilder/layoutfoto/stift.jpg);
}

#audiodeskript #logoundfoto { /* Layoutfoto Audiodeskription */
background-image: url(../bilder/layoutfoto/inhalt.jpg);
}
#kontakt #logoundfoto { /* Layoutfoto Kontakt */
background-image: url(../bilder/layoutfoto/kontakt.jpg);
}

#kontakt-anfahrt #logoundfoto { /* Layoutfoto Kontakt Anfahrt */
background-image: url(../bilder/layoutfoto/kontakt.jpg);
}

#hilfe #logoundfoto { /* Layoutfoto Hilfe */
background-image: url(../bilder/layoutfoto/orientierung.jpg);
}

#tastatur #logoundfoto { /* Layoutfoto Tastaturkürzel */
background-image: url(../bilder/layoutfoto/mitarbeiter.jpg);
}

#inhaltsverzeichnis #logoundfoto { /* Layoutfoto Inhaltsverzeichnis */
background-image: url(../bilder/layoutfoto/inhalt.jpg);
}

#information-daisyabspielgeraete #logoundfoto { /* Layoutfoto DAISY-Abspielgeräte */
background-image: url(../bilder/layoutfoto/hoererin.jpg);
}

#error #logoundfoto { /* Layoutfoto Errorseite */
background-image: url(../bilder/layoutfoto/error.jpg);
}

#faq #logoundfoto { /* Layoutfoto FAQ */
background-image: url(../bilder/layoutfoto/telefon.jpg);
}

#netzwerk #logoundfoto { /* Layoutfoto FAQ */
background-image: url(../bilder/layoutfoto/netzwerk.jpg);
}

#neuigkeiten #logoundfoto { /* Layoutfoto FAQ */
background-image: url(../bilder/layoutfoto/neuigkeiten.jpg);
}

/* ==  Orientierungsnavigation == */

#orientierungsnavigation {
position: absolute; /* Orientierungsnavigation ist absolut in der Box positioniert */
background-color: transparent;
color:#5d5d5d;
font-size: 0.85em;
top: 140px; /* Höhe des Layoutfotos + 20px */
left: 285px;
height: 20px;
z-index: 1000;
}

#orientierungsnavigation ul {
list-style-type: none;
text-align: left;
}

#orientierungsnavigation li {
float: left; /* Die Menüpunkte stehen nun hintereinander */
width: auto; /* Breitenangabe notwendig, wenn ein float gesetzt wird */
background-color: #ffffff;
color: #5d5d5d;
}

#orientierungsnavigation a {
display: block; /* a wird zu einem Block-Element gemacht, um den Rollover-Effekt zu erzielen*/
padding: 2px 11px;
}

#orientierungsnavigation a:link {
text-decoration: underline;
color: #5d5d5d;
background-color: transparent;
}

#orientierungsnavigation a:visited {
text-decoration: underline;
color: #860f02;
background-color: #ffffff;
}

#orientierungsnavigation a:hover {
background-color: #023985;
color: #ffffff;
text-decoration: underline;
}

#orientierungsnavigation a:focus, #orientierungsnavigation a:active {
/* Durchsteppen" mit der Tabulator-Taste   */
background-color: #023985;
color: #f0f8ff;
text-decoration: underline;
}

/* =============  Brotkrümelnavigation ============= */

#brotkruemelnavigation {
position: absolute;
background-color: transparent;
top: 155px; /* Höhe des Layoutfotos + 20px */
left: 285px;
height: 20px;
z-index: 1000;
font-size: 0.85em;
color: #023985;
padding: 1% 11px;
text-align: left;
}

#brotkruemelnavigation a:link {
text-decoration: underline;
color: #023985;
background-color: #FFFFFF;
}

#brotkruemelnavigation a:visited {
text-decoration: underline;
color: #023985;
background-color: #FFFFFF;
}

#brotkruemelnavigation a:hover {
background-color: #023985;
color: #ffffff;
}

#brotkruemelnavigation a:focus, #brotkruemelnavigation a:active {
/* Durchsteppen" mit der Tabulator-Taste   */
background-color: #023985;
color: #ffffff;
}

/* =============  Navigation ============= */

#navigation { /* Die Navigation ist absolut in der Box positioniert */
position: absolute;
top: 18em;
left: 0;
width: 271px; /* 285 Breite des Logos - 14px Rand links) */
color: #023985;
background-color: transparent;
z-index:18;
font-size: 100%;
}

#navigation ul {
list-style: none;
padding: 0;
width: 100%;
}

#navigation a {
display: block; /* a wird zu einem Block-Element, um den Rollover-Effekt zu erzielen */
height: 1.2em; /* Höhe angeben ist notwendig, für IE 6; em-Angabe wegen Skalierbarkeit */
background-color: transparent;
color: #023985;
text-decoration: none;
padding: 8px;
border-bottom: 1px dotted #7d8591;
overflow: hidden;
}

#navlist {
margin-top: 0em;
margin-left: 14px; /* Abstand links für den Deko-Rand */
}

#navlist a:link, #navlist a:visited {
text-decoration: none;
}

#navlist a:hover {
color: #f0f8ff;
background-color: #023985;
padding: 8px;
text-decoration: underline;
}

#navlist a:focus, #navlist a:active {
color: #f0f8ff;
background-color: #023985;
}

#navlist a.aktuell { /* Aktuelle Seite wird mit dieser Klasse hervorgehoben */
color: #023985;
background-color: transparent;
font-weight: bolder;
margin: 0px 0px 0px -14px;
border-left: 14px solid #023985;
}

#ausleihe a.aktuell, #ausleihe-daisy a.aktuell, #ausleihe-daisygesamt a.aktuell, #ausleihe-blind a.aktuell, #ausleihe-kassetten a.aktuell, #ausleihe-kataloge a.aktuell, #information a.aktuell, #information-anmeldung a.aktuell, #information-daisy a.aktuell, #information-versand a.aktuell, #ueberuns a.aktuell, #kontakt a.aktuell, #leitbild a.aktuell, #presse a.aktuell, #sprecher a.aktuell, #spenden a.aktuell, #jubel a.aktuell, #faq a.aktuell, #netzwerk a.aktuell, #kontakt-anfahrt a.aktuell { /* Für die Unternavigationen wird der untere Rahmen des Hauptpunktes gelöscht */
border-bottom: 0px;
}

#unternavi {
margin: 0px 0px 0px -14px;
padding: 0;
font-size: 95% !important; /* Wichtig für IE 6.0 */
}

#unternavi a {
padding-left: 20px;
color: #023985;
background-color: transparent;
height: 1.3em; /* Hier aufpassen, dass der Wert nicht zu klein gesetzt wird, wegen Netscape */
border: none;

}

#unternavi a.letzter { /* Der letzte Unternavi-Punkt bekommt wieder eine gestrichelte Linie verpasst. */
border-bottom: 1px dotted #7d8591;
}

#unternavi li {
border-left: 14px solid #023985;
width: 100%;
}

#unternavi a:hover {
color: #ffffff;
background-color: #023985;
padding-left: 20px;
width: 242px;
}

#unternavi a:focus, #unternavi a:active {
color: #ffffff;
background-color: #023985;
padding-left: 20px;
width: 242px;
}

/* Zweite Ebene */

#unterunternavi {
margin: 0px 0px 0px -14px;
padding: 0;
font-size: 90%;
}

#unterunternavi a {
padding-left:30px;
color: #023985;
background-color: transparent;
height: 1em;
border: none;
}

#unterunternavi a.letzter { /* Der letzte Unternavi-Punkt bekommt wieder eine gestrichelte Linie verpasst. */
border-bottom: 1px dotted #7d8591;
}

#unterunternavi li {
border-left: 14px solid #023985;
width: 100%;
}

#unterunternavi a:hover {
color: #ffffff;
background-color: #023985;
padding-left:30px;
width: 232px;
}

#unterunternavi a:focus, #unterunternavi a:active {
color: #ffffff;
background-color: #023985;
padding-left:30px;
width: 232px;
}

/* Leider musste ich hier ein sog. Sternchen-Hack für IE 6 und kleiner einbauen, da die schicke Unternavigation hier noch nicht funktioniert.  */

* html #unternavi {
margin: 0px 0px 0px 0px;
padding: 0;
font-size: 105%;
}

* html #navlist a#aktuell {
color: #023985;
background-color: transparent;
font-weight: bolder;
margin: 0px 0px 0px 0px;
border-left: 14px solid #023985;
}

* html #unternavi a.letzter {
border-bottom: 1px dotted #7d8591;
width: 228px;
}

* html #unternavi a:hover {
color: #ffffff;
background-color: #023985;
padding-left: 20px;
width: 228px;
}

* html #unternavi a:focus, * html #unternavi a:active {
color: #ffffff;
background-color: #023985;
padding-left: 20px;
width: 228px;
}
/* ################## Ende Sternchen-Hack  */


/* =============  Suche ============= */

/* =============  Suchfeld auf jeder Seite ============= */

#suche {
position: absolute;
top: 13em;
left: 19px;
width: 290px;
background-color: transparent;
color: #023985;
}

#suchtext {
width: 10em;
background-color: #ffffff;
color: #023985;
border: 1px solid #808080;
padding: 2px;
}

#suche .los {
border: 1px solid #808080;
background-color: #ffffff;
color:#023985;
width: 3em;
padding: 0px;
}

#suche label {
color: #a65551;
background-color: transparent;
padding: 2px;
font-size: 0.8em;
font-weight: bolder;
font-family: Arial, Helvetica, sans-serif;
}

#suche legend {
display: none;
}

#suche input.los:active, #suche input.los:focus, #suche input.los:hover {
background-color: #023985;
color: #ffffff;
}

#suche fieldset {
border: 0;
border-style: solid; /* Für opera 7 */
}

/* =============  Erweiterte Suche  auf der Ergebnisseite ============= */

#erweitertesuche {
        padding: 5px;
        background-color: #f3f6f9;
        border: 0px dashed #b2b2b2;
        width: 80%;
        color: #023985;
        font-size: 0.8em;
}

#erweitertesuche fieldset {
        padding: 5px;
        margin: 5px;
        width: 90%;
        border: 1px solid #ded4c1;
}

#erweitertesuche legend {
        color: #6d5d3a;
        width: auto;
        padding: 4px;
        font-weight: bold;
}

#erweitertesuche input.sform {
        width: 80%;
        background-color: #ffffff;
        color: #023985;
        border: 1px solid #808080;
        padding: 2px;
        margin: 10px;
}

#erweitertesuche input.sbutton {
        width: 80%;
        margin: 12px 12px 12px 20px;
        border: 1px solid #808080;
        background-color: #e3e9f1;
        color:#023985;
        font-weight: bold;
}

#erweitertesuche label.radiob {
        padding: 0px 0px 0px 4px;
}

#erweitertesuche input.sbutton:active, #erweitertesuche input.sbutton:focus, #erweitertesuche input.sbutton:hover {
background-color: #023985;
color: #ffffff;
}


/* =============  Suchergebnis ============= */


#suchergebnis .ergebnis {
        padding:10px 0 0 0;
        margin: 5px 5px 0px 0;
}

#suchergebnis .titel a{
font-weight: bold;
color: #023985;
background-color: #ffffff;
margin: 0px;
}

#suchergebnis .textausschnitt {
        color: #023985;
        background-color: #ffffff;
}

#suchergebnis .seiten {
        font-size: 0.9em;
        font-weight: bolder;
}

#suchergebnis .digits .aktuell {
        font-size: 0.9em;
        font-weight: normal;
        text-decoration: none !important;
}

#suchergebnis .treffer {
color: #a65551;
font-style: italic;
}

.hitword {
color: #a65551;
font-weight: bold;
}




/* =============  Inhalt ============= */

#inhalt {  /* Keine Breite angeben, dann sitzt es exakt in der box */
background-color: #ffffff;
color: #023985;
margin: 0em 0em 0px 285px; /* Linker Abstand = Logo-Breite */
padding: 14em 0px 20px 15px; /* 16em: Abstand oben zum Box-Rand */
}

#inhalt img {
display: block; /* Damit ein Bild-Link in Firefox keinen hover-Effekt bekommt */
}


/* Standardgröße für den Inhaltsbereich */

#inhalt-haupttext {
width: 70%; /* im IE 6.0 bei 800x600 prüfen */
}

#startseite #inhalt-haupttext {
width: 52%; /* im IE 6.0 bei 800x600 prüfen */

}

#information-daisyabspielgeraete #inhalt-haupttext { /* nimmt viel mehr Platz ein, da keine rechte Spalte */
width: 80%; /* im IE 6.0 bei 800x600 prüfen */
}

#ausleihe-daisygesamt #inhalt-haupttext {
        overflow: scroll;
        height: 2400px;
        z-index:133;
}

#inhalt-haupttext li {
margin: 7px 0;
}

#inhalt-haupttext h2 + #sitemap {
margin-top: 2em;
}

#sitemap li {
color: #860f02;
background-color: #ffffff;
font-style: italic;

}

#sitemap li a {
font-weight: bolder;
}

#sitemap ul {
font-size: 1em;
}

#sitemap li li {
font-weight: normal;
list-style-image: url(../bilder/liste.gif);
margin: 0.8em 0px 0.8em 20px;
line-height: 1.4em;

}

#sitemap li li a {
font-weight: normal;
font-style: normal;
}

#sitemap li li li {
font-weight: normal;
list-style-image: url(../bilder/liste2.gif);
margin: 0.8em 0px 0.0em 20px;
line-height: 1.4em;
}

#sitemap li li li li {
font-weight: normal;
list-style-image: url(../bilder/liste.gif);
margin: 0.8em 0px 0.0em 20px;
line-height: 1.4em;
}

#ausleihe #inhalt-haupttext p.fett {
margin-top: 22px;
}

#ausleihe #inhalt-haupttext p {
margin: 6px 0px 6px 0px;
}

#inhalt-haupttext .buchnummer {
color: #a65551;
background-color: #ffffff;
margin: 0 0 10px 0;
}

.pressemitteilung {
border: 1px dotted #a3b7d2;
background-color: #edecec;
color:#023985;
padding: 5px 20px 5px 5px;
}

.pressemitteilung h3, .pressemitteilung h4 {
background-color: transparent;
color: #023985;
}

.pressemitteilung p.datum {
background-color: transparent;
color:#a65551;
font-size: 0.7em;
font-weight: bold;
}


.sprechertext {
        margin-left: 180px;
}



/* =============  Links ============= */

#inhalt a:link {
text-decoration: underline;
color: #023985;
background-color: #FFFFFF;
}

#inhalt a:visited {
text-decoration: underline;
color: #860f02;
background-color: #FFFFFF;
}

#inhalt a:hover {
background-color: #023985;
color: #ffffff;
}

#inhalt a:focus, #inhalt a:active { /* Durchsteppen" mit der Tabulator-Taste   */
background-color: #023985;
color: #ffffff;
}

/* =============  Links Ausnahmen ============= */

#presse .pressemitteilung a:link {
text-decoration: underline;
color: #023985;
background-color: #edecec;
}

#presse .pressemitteilung a:visited {
text-decoration: underline;
color: #5178a6;
background-color: #edecec;
}

#presse .pressemitteilung a:hover {
background-color: #023985;
color: #ffffff;
}

#presse .pressemitteilung a:focus, #inhalt .pressemitteilung a:active { /* Durchsteppen" mit der Tabulator-Taste   */
background-color: #023985;
color: #ffffff;
}

/* ==  Rechte Spalte == */

#rechtespalte {
position: absolute;
right: 0;
top: 14em;
width: 17%;
margin: 0px 0.5em 20px 0px;
background-color: transparent;
color: #023985;
border-left: 1px dashed #ded4c1;
padding-left: 10px;
}

#startseite #rechtespalte {
position: absolute;
right: 0;
top: 14em;
width: 29%;
margin: 0px 0.5em 20px 0px;
background-color: transparent;
color: #023985;
border-left: 1px dashed #ded4c1;
padding-left: 10px;
}

* html #startseite #rechtespalte { /* Die Spalte wird im IE einfach viel zu klein angezeigt.. */
position: absolute;
right: 0;
top: 15em;
width: 39%;
margin: 0px 0.5em 20px 0px;
background-color: transparent;
color: #023985;
border-left: 1px dashed #ded4c1;
padding-left: 10px;
}


#rechtespalte h2 { /* Überschrift: Aktuelle Farbe braun */
color: #6d5d3a;
background-color: #ffffff;
}

.bildunterschrift {
margin: 5px 0 25px 0px;
padding: 0;
}

#rechtespalte ul {
list-style-type: disc;
list-style-position: outside;
margin: 0px 20px;
}

#rechtespalte li {
margin: 7px 0;
}


/* Rechte Spalte Startseite */

.infobox {
margin: 1px 0.9em 0px 0px;
background-color: #f3f6f9;
color: #023985;
text-align: left;
padding: 5px;
border: 1px solid #b2b2b2;
font-size: 0.9em;
}
.infobox a img {
float: left;
width: 100px;
padding: 3px;
border: 1px solid #B2B2B2;
background-color: #f3f6f9;
color: #023985;
margin: 0px 5px 5px 0;
}

* html #startseite .infobox a img { /* Der Text ist im IE 6 immer hinter dem Bild verschwunden... */
float: none;
padding: 3px;
border: 1px solid #B2B2B2;
background-color: #f3f6f9;
color: #023985;
margin: 0px 5px 5px 0;
}

.infobox p {
padding: 3px;
background-color: #f3f6f9;
color: #023985;

}

#rechtespalte .infobox h3 {
background-color: #f3f6f9;
color: #6d5d3a;
margin: 0;
padding: 0 0 10px 0;
}


.infobox .datum {
padding-left: 0px;

}

.infobox .clearweiter {
clear: both;
padding: 10px 0px 0px 0px;
background-color: #f3f6f9;
color: #023985;
}

hr.trenn { /* Trennlinie */
width: 98%;
clear: both;
color: white;
background-color:#ffffff;
border: none;
height: 0px;
margin: 5px 0px;
}

/* Formate der Links in der rechten Spalte*/
#rechtespalte a:link {
text-decoration: underline;
background-color: transparent;
color: #860f02;

}

#rechtespalte a:visited {
background-color: transparent;
color: #023985;
}

#rechtespalte a:hover {
background-color: transparent;
color: #a65551;

}

#rechtespalte  a:focus, #rechtespalte a:active { /* Durchsteppen" mit der Tabulator-Taste   */
background-color: transparent;
color: #860f02;
}




/* =============  Fußbereich ============= */

#fussbereich {
background-color: #a3b7d2;
color: #023985;
padding: 5px 0;
border-left: 285px solid #e3e9f1;
border-top: 1px solid white;
text-align: center;
}

address { /* Adresse im Fuß */
font-size: 0.9em;
font-style: normal;
font-weight: bold;
color: #023985;
background-color: transparent;
margin: 0px 0px 0px 0px;
display: inline;
}

.copyright {
text-align: center;
margin-top: 10px;
}


#fussbereich a:link {
text-decoration: underline;
background-color: #a3b7d2;
color: #023985;
}

#fussbereich a:visited {
text-decoration: none;
background-color: #a3b7d2;
color: #5178a6;
}

#fussbereich a:hover {
background-color: #023985;
color: #ffffff;
}

#fussbereich a:focus, #fussbereich a:active { /* Durchsteppen" mit der Tabulator-Taste   */
background-color: #7d8591;
color: #ffffff;
}

/* =============  Allerlei Nützliches ============= */

hr { /* Trennlinie */
width: 98%;
color: #023985;
background-color:#ffffff;
border: none;
border-top: 1px dashed #a3b7d2;
height: 1px;
margin: 20px 0px;
}

.inline { /* Einen Absatz, z. B. für eine Telefonnummer, die links stehen soll, einfügen, jedoch unsichtbar im Layout */
        display: inline;
}

.block {/* Wieder einen richtigen Absatz zuweisen */
display: block;
}

.fett { /* Text fett setzten z. B. in einem span-Tag */
font-weight: bold;
}

.kursiv { /* Text kuisiv setzten z. B. in einem span-Tag */
font-style: italic;
}

img {
border: 0px;
vertical-align: bottom;
}

.links { /* Ein Bild nach links setzen, so dass der Text rechts vorbeifließt */
float: left;
margin-right: 20px;
margin-bottom: 10px;
}

.rechts {/* Ein Bild nach links setzen, so dass der Text rechts vorbeifließt */
float: right;
margin-left: 20px;
margin-bottom: 10px;
}

#information-daisyabspielgeraete .rechts {
        float: right;
margin: 0 40px 0 0;
}

.clear { /* Float auflösen, ab hier alles wieder im normalen Textfluss */
clear: both;
}

.top { /* "Nach oben-Link in den Listen */
font-size: xx-small;
color: #6d5d3a;
padding: 20px 0px 0px 0px;
}

span.ex { /* für die Barrierefreiheit: externen Link ohne css sichtbar machen */
position: absolute;
left: -3000px;
top: -3000px;
width: 0;
height: 0;
overflow: hidden;
display: inline;
}

.unsichtbar {
position: absolute !important;
top: -4000px !important;
left: -4000px !important;
height: 1px !important;
width: 1px !important;
}

.fuellen { /* Abstand nach unten, wenn zu wenig Text im Inhaltsbereich */
margin: 0px 0px 200px 0px;
}

.fuellenstart { /* Startseite erhält mehr Abstand */
margin: 0px 0px 600px 0px;
}


.mitrand { /* Fotos mit einem Rand versehen, aktuell: Hellblau */
border: 1px solid #a3b7d2;
padding: 3px;
}

.farbe {
color:#a65551;
background-color: #ffffff;
}

.listemitpunkt {
        list-style-type: disc;
        list-style-position: outside;
        margin: 0px 30px;
        line-height: 1.3;
        padding: 0;
}

.mitzahl {
        list-style-position: outside;
        list-style-type: decimal;
        margin: 0px 30px;
        line-height: 1.3;
        padding: 0;
}

.kasten {
        background-color:#f3f6f9;
        border: 1px solid #ded4c1;
        padding: 5px;
        width: 80%;
        margin: 20px 0;
}

.kasten-weiss {
        background-color:#ffffff;
        border: 1px solid #ded4c1;
        padding: 5px;
        width: 100%;
        margin: 20px 0;
}

.abstand {
        margin: 10px 0px 0px 0px;
}

.daisy-liste li {
        padding: 10px 0px 20px 0px;
}

.bildunterschrift {
        color: #860f02;
        background-color: #FFFFFF;
        font-size: small;
        font-weight: bold;
}
/* Link-Bilder werden in neueren Browsern auch kenntlich gemacht als Link */

a:hover img {
background-color: #b2b2b2;
color: #023985;
}

a:focus img, a:active img { /* Durchsteppen" mit der Tabulator-Taste   */
background-color: #808080;
color: #023985;
}