/* Redesign der Webpräsenz der becker + flöge GmbH, Hannover
   in der webtechnischen Umsetzung von Kay Wischkony, Dr. Hagen GmbH, Braunschweig.
 */

/* Einen kontrollierten Ausgangszustand für alle Elemente schaffen */
* {margin: 0; border-style: none; padding: 0; background-color: transparent; color: #000;}
/* Immer mind. das ganze sichtbare Fenster belegen */
html {min-height: 100%;}
body {height: 100%;}
body {background-color: #f7f7f7;
      /* Schriftgröße zwecks interaktiver Beeinflussung in separaten style ausgelagert */
      font-family: Verdana,Arial,Officina,Helvetica,sans-serif;
      font-style: normal}
/* Voreingestellte Eigenschaften aller Links */
a:link, a:visited {text-decoration: none;}
a:focus, a:hover, a:active {text-decoration: none;}
a.extern:focus, a.extern:hover, a.extern:active {text-decoration: underline;}

/* Auch in Browsern ohne min/max-Breiten zumindest einen schmalen linken Rand anzeigen
   und somit #blatt auch richtig zentrieren. */
#minrand {margin-left: 32px; height: 100%}

/* Zentrierter breitenkontrollierter Container mit Schattenkante für das ganze Dokument */
#blatt {min-width: 75em; max-width: 90em;
        height: 100%; margin: 0 auto;
        padding-right: 33px; /* =Breite des Schattenkantenbildes */
        border-left: 1px solid #fff;
        background: #fff url("/img/shared/schattenkante.png") right repeat-y;
       }
/* Logo und Standardlinks rechts oben*/
#schild {float: right; width: 30em; min-width: 280px; height: 135px;}
#schild div {position: relative; width: 100%; height: 100%; font-size: 80%; }
#schild div img {display: block; position: absolute; right: 20px; top: 25px; width: 210px; height: 70px; /* 3:1 */ }
#schild div object { /* display: block; */ position: absolute; right: 20px; top: 25px; width: 210px; height: 70px; /* 3:1 */ }
#schild div span {display: block; position: absolute; right: 6em; top: 10px; color: #ccc;}
#schild div span a:link, #schild div span a:visited
        {color: #999; /* eigtl. 'inherit' aber dafür ist der IE zu blöd. */ }
#schild div span a:hover, #schild div span a:focus
        {text-decoration: underline}

/* (Farbcodierte s. farben-??.css) Siteanzeige und Slogan links oben */
#bereichsanzeige {float: left; width: 20em; height: 135px; }
#bereichsanzeige div {position: relative; width: 100%; height: 100%; }
#bereichsanzeige strong {display: block; position: absolute; left: 1em; bottom: 1em;
                         font-size: 120%; font-weight: bolder; text-transform: uppercase; font-stretch: expanded; }

/* Kopfbild mit Überblendanimation */
#kopf {position: relative;
       height: 135px; width: auto; min-width: 15em;
       margin-left: 20em; margin-right: 30em;
       background-color: #fff; 
       background-image: url("/img/shared/lady21.jpg");   /* Sollte der default-Folge der site entsprechen */
       background-repeat: no-repeat }
#ani1 {position: absolute; left: 0%; width: 0%; height: 135px /*100% scheitert am IE */; visibility: hidden; }
#ani2 {position: absolute; left: 0%; width: 0%; height: 135px /*100% scheitert am IE */; visibility: hidden; }
#ani3 {position: absolute; left: 0%; width: 0%; height: 135px /*100% scheitert am IE */; visibility: hidden; }
#ani4 {position: absolute; left: 0%; width: 0%; height: 135px /*100% scheitert am IE */; visibility: hidden; }

/* Begin Holly Hack: IE only, but hide from IE5-mac. Only IE-win sees this. \*/
* html #bereichsanzeige { margin-right: -3px; /* 3pixel bug des IE 5,6 */ }
* html #kopf { height: 135px; margin-left: 0; }
/* End Holly Hack */

/* Den Kopfteil nach unten abschließende Leiste mitsamt einiger Bedienelemente */
#leiste { clear: both;
          margin-top: 1px; padding: 2px 0 2px 0;
          background-color: #999;
		  font-size: 80%
        }
#stellradcontainer { float: left; width: 20em
	               }
#stellradcontainer .inkrement{ /* margin-top: -0.2em; */
                     width: 3.82em; height: 1em;
                     font-weight: bold; }		
#stellrad {position: relative; top: 0; left: 0;
		  margin: 0.2em 3.82em;
          }					 
#stellradzeiger { position: absolute;
                  top: 0; bottom: 0; left: 0; right: 0;
                  border: 2px inset #999; 
                  background-color: transparent;
                  background-image: url(/line.png);
                  background-repeat: repeat-y;
                  background-position: 30% /* entspricht default_font-size */
                }
#stellradsensor
                { width: 100%; height: 100%; cursor: pointer }	              
#stellradbild
                { width: 100%; height: 1em; }	              
#leiste ul { display: inline;
             list-style-type: none;
             background-color: #999;
             text-transform: uppercase;
/*             padding-right: 1em; */
           }
#leiste li { display: inline;
             padding-left: 3em;  /* *** Noch auf die kleinere Schrift umrechnen */
             color: #fff;
             /* font-size: 80%; */
           }
#leiste li.last { text-transform: none; }
#leiste li:first-child.last {text-transform: uppercase;} /* Sonderfall: Genau ein Element im Brotkrumenpfad */
#leiste a:link, #leiste a:visited { color: #fff; }
#leiste a:focus, #leiste a:hover, #leiste a:active { color: #000; background-color: #999 }
#leiste a:active { outline: 1px dashed #000; }

#suchmaske {float: right; margin-right: 2em; width: 20em;}
#suchmaske form { display: inline; white-space: nowrap;} /* Opera bricht da um */
#suchmaske form input { width: 75%; border: 1px #999 inset;
                    font-family: Verdana,Arial,Officina,Helvetica,sans-serif;
                    font-size: 100%; background-color: #fff; }
#suchmaske form button { width: 25%; border-left: 0.1em #999 outset; border-right: 0.1em #999 outset;
                         background-color: #666; color: #fff;
						 font-family: Verdana,Arial,Officina,Helvetica,sans-serif;
                         font-size: 100%; font-weight: bolder; text-transform: uppercase; }

/* Pfeile zum Aus- und Einklappen der Menüs im rechten und linken Rand */
.klapppfeil {clear: right; float: right; margin-top: 0.15em; margin-right: 1em; width: 0.8em; height: 0.8em; cursor: pointer; /* margin-right: 1em; border-bottom: 1px solid transparent;  Platzhalter */ }
/* Farbsetzungen für die Link-Pseudoklassen s. bei den jeweiligen Menüs */

#innen {width: 100%; table-layout: fixed; border-collapse: collapse;}
#innen tbody {vertical-align: top;}
#innen tbody tr td+td+td {vertical-align: top;} /* Extra-Einladung für Opera */

#spalte1 {width: 20em; background-color: #6cf;}
.sp1 {background-color: #6cf;}     /* damit's der IE auch merkt */
#spalte3 {width: 26em; /* background-color: #f7f7f7; */ } 

#themenmenue { width: 100%;
               border-bottom: 1px solid #f7f7f7;
               background-color: #fff;
               list-style-type: none;
               font-size: 90%; }  /* Betrag = Kehrwert des paddings von '#themenmenue li a' */
#themenmenue ul { list-style-type: none; }
#themenmenue li a {padding-left: 1.11em; }  /* Betrag = Kehrwert von font-size für #themenmenue,
                                               damit der Abstand 1em der Ausgangsschrift entspricht. */
#themenmenue li
             {border-top: 1px solid #f7f7f7; background-color: #6cf;}
#themenmenue li.aktuell
             {background-color: #09f;}
#themenmenue li a:link, #themenmenue li a:visited
             {text-transform: uppercase; font-weight: bolder;
              font-stretch: expanded; color: #fff;}
#themenmenue li a:focus, #themenmenue li a:hover
             {color: #09f}
#themenmenue li a:active /* gilt für alle Ebenen */
             {outline: 1px dashed #000}

#themenmenue li li
             {background-color: #cef;}
#themenmenue li li.aktuell
             {color: #000;}
#themenmenue li li a:link, #themenmenue li li a:visited
             {text-transform: none; color: #666;}
#themenmenue li li a:focus, #themenmenue li li a:hover
             {color: #000}
             
#themenmenue li li li
             {border-top: none;
             text-transform: none; background-color: #cef; color: #666;}                 
#themenmenue li li li a:link, #themenmenue li li li a:visited
             {margin-left: 1em;
             text-transform: none; color: #666;}                 
#themenmenue li li li.aktuell a:link, #themenmenue li li li.aktuell a:visited
             {margin-left: 1em; border-top: none;
             text-transform: none; color: #000;}                 
#themenmenue li li li a:focus, #themenmenue li li li a:hover
             {color: #000}

/* #themenmenue a:link, #themenmenue a:visited
             { color: #fff; }
#themenmenue a:focus, #themenmenue a:hover {color: #000; text-decoration: none;}
#themenmenue a:active { background-color: #fff;}
*/

/* *** Die folgenden beiden Farbsetzungen müssen je Menü unterschiedlich erfolgen *** */
#themenmenue img.klapppfeil:focus, klapppfeil:hover {border-bottom-color: #fff;}
#themenmenue img.klapppfeil:active {outline: 1px dashed #000}


#navigation { float: right; width: 20em;
              margin: 0 2em 0 1em; border-top: 1px solid #fff;/* eigtl.: "transparent", kann der IE aber nicht */
              /* border-bottom: 100em solid #f7f7f7; */
              min-height: 100%;
              list-style-type: none;
              text-transform: uppercase; font-stretch: expanded;
            }
#navigation ul {list-style-type: none;}
#navigation li.l1 { border-bottom: 1px solid #f7f7f7;
                    /* padding-bottom: 1px; */
                    background-color: #999;
                  }
#navigation li.l1.aktuell { background-color: #666; }
#navigation li.l1 a { padding: 0 1em;}
#navigation li.l1 span { padding: 0 1em; color: #fff }
#navigation li.l1 a:link, #navigation li.l1 a:visited
                    { color: #fff; }
#navigation li.l1 a:focus, #navigation li.l1 a:hover
                    { color: #9ef; text-decoration: none; }
#navigation li.l1 a:active
                    { background-color: #fff; }

#navigation ul.l2 { /* border-top: 1px solid #f7f7f7; */
/*                    list-style-type: none; */
                    background-color: #f7f7f7;
                    text-transform: none;
                  }
#navigation li.l2 { margin: 0 1em; border-bottom: 1px solid #666;
                    color: #666;
                  }
#navigation li.l2 a { margin-left: -1em;}
#navigation li.l2 span { margin-left: -1em;}
#navigation li.l2 a:link, #navigation li.l2 a:visited
                    { color: #999; }
#navigation li.l2.aktuell a:link, #navigation li.l2.aktuell a:visited
                    { color: #000; }
#navigation li.l2 a:focus, #navigation li.l2 a:hover
                    { color: #09f; text-decoration: none; }
#navigation li.l2 a:active
                    { background-color: #fff; }


#navigation ul.l3 { margin: 0; border-top: 1px solid #f7f7f7; padding: 0;
/*                    list-style-type: none; */
                    background-color: #f7f7f7;
                  }
#navigation li.l3 { /* margin: 0 1em; */ border-bottom: 1px solid #666;
                    color: #999;
                  }
#navigation li.l3 a { margin-left: 0em;}
#navigation li.l3 span { margin-left: 0em;}

#navigation ul.l4 { margin: 0; border-top: 1px solid #f7f7f7; padding: 0;
                    list-style-type: disc;
                    background-color: #f7f7f7;
                  }
#navigation li.l4 { margin-left: 2.5em; /* border-bottom: 1px solid #666; */
                    color: #999;
                  }
#navigation li.l4 a { margin-left: -0.75em;}
#navigation li.l4 span { margin-left: -0.75em;}

/* #navigation li.l3 a:link, #navigation li.l3 a:visited
                    { color: #666; } */
/* #navigation li.l3 a:focus, #navigation li.l3 a:hover
                    { color: #09f; text-decoration: none; } */
/* #navigation li.l3 a:active
                    { background-color: #fff; } */

/* Überschreibende Eigenschaften für alle Ebenen */
#navigation li.last { border-bottom: none; }
img.klapppfeil:focus, img.klapppfeil:hover {outline: 1px solid #09f;}
img.klapppfeil:active {background-color: #cef; outline: 1px dotted #999}


/* Holly Hack: IE only, but hide from IE5-mac. Only IE-win sees this. \*/
* html #themenmenue { margin-right: -3px; /* 3pixel bug des IE */ }
/* * html #content { height: 1%; margin-left: 0; } */
/* End hide from IE5/mac */

/* Gestaltung im Inhaltsbereich */
#content {padding: 1em 1em 1200px 3em; background-color: #fff; /* overflow: scroll; */ }

/* Textauszeichnungen */
#content strong, #content em
         {color: inherit; font-style: normal;}
#content .teaser, #content .fielderror
         {color: #f90}

/* links */
#content a:link, #content a:visited
         { color: #000; text-decoration: underline; }
#content .teaser a:link
         { color: #f90 }
#content .teaser a:visited
         { color: #666 }
#content a:focus, #content a:hover
         { color: #09f;}
#content em a:link, #content em a:visited
         { color: #09f; text-decoration: none; }
#content em a:focus, #content em a:hover
         { color: #000; text-decoration: underline;}
#content a:active { outline: 1px dashed #000; }


/* Vorschlag Tabellen
#content table {border: 1px solid #ccc; border-spacing: 0; border-collapse: separate; background-color: #f7f7f7; }
#content th {font-weight: bolder; border: 1px solid #fff; padding: 0.3ex 0.75ex; background-color: #cef;}
#content td {border: 1px solid #fff; padding: 0.3ex 0.75ex; }
#content tr.erledigt th {background-color: #f7f7f7; color: #999;}
#content tr.erledigt td {background-color: #fff; color: #999;}
 */
 
/* Listen einziehen */
/* Ggf. andere Listentypen ergaenzen */
#content ul {margin: 1em 1.5em;}
#content dt {margin-top: 1ex; margin-bottom: 0.5ex;}
#content dd {margin: 1em 1.5em;}

/* Überschriften */
#content h1 {margin-bottom: 1em; font-size: 100%; /* eigtl. 'inherit' aber dafür ist der IE zu blöd. */ font-weight: bolder;}
#content h2, #content h3, #content h4, #content h5, #content h6,
#content table th {text-align: left; font-size: 100%; /* eigtl. 'inherit' aber dafür ist der IE zu blöd. */ font-weight: bolder;}

/* Andere Blockelemente */
#content p, #content table {margin-bottom: 1em;}
#content .trenner {margin: 1em 0; text-align: center;}
#content .trenner img {width: 61.8%; height: 5px;}
#content .rkasten {float: right; margin-left: 1.5em}
#content .lkasten {float: left; margin-right: 1.5em}


/* Fußzeile mit dem Kleingedruckten */
#fusz {vertical-align: bottom; width: 20em;
       font-size: 70%; color: #09f;}
#fusz span {padding-left: 1.43em; /* Kehrwert von vorstehendem font-size */ color: #09f}
#fusz a:link, #fusz a:visited {color: #09f; }
#fusz a:focus, #fusz a:hover  {color: #fff; }
#fusz a:active                {color: #09f; background-color: #fff; }