/*  =========================================================
Stylesheet für Mieterschutzverein Berlin 
Stand:  21.08.2008 
Datei:  cssBildschirm.css
Media:  screen 
Autor:  xyz 
Aufbau  1) Kalibrierung und allgemeine Styles 
        2) Styles für Layoutbereiche    
        3) Sonstige Styles 
Reihenfolge der Deklarationen: 
        a)  Positionierung der Box auf der Seite (float, position, top, right, bottom, left)
        b)  Eigenschaften des Inhaltsbereichs (font-size, font-style, letter-spacing)
        c)  Definitionen für die Box selbst (width, height, background, padding, border, margin)
Kurzschreibweisen für padding und margin: 
        z.B.  #kopfbereich { padding: 20px; padding-bottom: 0; }  bedeutet: 
                20px für alle vier padding-Seiten, aber padding-bottom wird anschliessend sofort auf 0px gesetzt. 
        z.B.  #kopfbereich { padding: 10px 20px 0 20px; }  bedeutet: 
                padding-top = 10px, dann die Angaben weiter im Uhrzeigersinn, endend mit padding-left
        z.B.  #wrapper { margin: 10px auto; }  bedeutet: 
                oben/unten (10px)  und  rechts/links (auto) haben jeweils gleiche Werte.
========================================================== */

/* ======================================   
   1) Kalibrierung und allgemeine Styles    
   ====================================== */

/* Kalibrierung der wichtigsten Abstände */
*  { padding: 0; margin: 0; }
h2, h3, p { margin-bottom: 1em; }
ul, ol, li { margin-bottom: 0; font-size: small; }
ul ul { margin-bottom: 0; }
li { margin-left: 2em; }

/* Allgemeine Selektoren */
html { height: 101%; } /* erzwingt Scrollbar im Firefox */
body { 
   color: white; 
   background-color: #c0c0c0;   /* hellgrau, ganz aussen */
   font-family: Verdana, Arial, Helvetica, sans-serif; 
   font-size: small; 
   line-height: 1.5em;   /* Zeilenabstand:  1,5-fache der Schriftgröße */
   margin: 0px; 
   padding: 30px; 
   padding-top: 0; 
}

h1 { font-size: 150%; }
h2 { font-size: 130%; }
h3 { font-size: 110%; }

address {
   text-align: center;  
   font-size: 80%;      
   font-style: normal;  
   letter-spacing: 2px; 
   line-height: 1.5em;  
}

/* Hyperlinks */
a { 
   text-decoration: underline; 
   outline: none; 
   color: #ffffff; 
}
a:link { color: #ffffff; }
a:visited { color: #cc6666; }   /* blasses rot */
a:hover, 
a:focus { 
   color: #000000; 
}
a:active { color: #ffff00; }   /* knallgelb */

/* Allgemeine Klassen und IDs */
.skiplink { 
   position: absolute; 
   left: -3000px; 
   top: -2000px; 
   width: 0px; 
   height: 0px; 
   overflow: hidden; 
   display: inline; 
}
.clearing { clear: both; }

#Logo { 
   color: black; 
/*   background-color: white; */   /* kein background für Grafik !! */
}

#Logo-pdf { 
   margin: 0px; 
   padding: 0px; 
   border: 0px; 
}

/* ===========================================   
   ==   2) Styles für die  Layoutbereiche   ==   
   =========================================== */

#wrapper { 
   color: white; 
/*   background: #ff0000; */   /* rot */
   background: #00cc00;   /* grün */
   width: 750px; 
   padding: 0; 
   margin-left: auto; 
   margin-right: auto; 
   margin-top: 0px; 
   border-top: 0; 
   border-left: #90a0be solid 60px;   /* stahlblaugrau */
   border-right: #90a0be solid 60px;   /* stahlblaugrau */
   border-bottom: #90a0be solid 60px;   /* stahlblaugrau */
}

#Kopf-Bereich {
   color: #ffffff; 
/*   background: #000000;   /* schwarz */ /* kein background für Grafik !! */
   width: 750px; 
   height: 95px; 
   margin-left: auto; 
   margin-right: auto; 
}

#Spalten-Bereich {
   position: relative; 
/*   background: #ff00ff; */   /* helles lila */
   width: 750px;   /* width muss hier unbedingt sein */
   padding: 0;
   margin: 0;
}

#Navi-Bereich { 
   position: absolute; 
   top: 0; 
   left: 0; 
/*   background: #00cc00; */   /* grün */
   width: 180px; 
   padding-left: 20px; 
   padding-top:  100px; 
   padding-bottom: 20px; 
   margin: 0; 
   font-family: Verdana, Arial, Helvetica, sans-serif; 
   font-size: small; 
}
   #Navi-Bereichh ul { 
      width: 12em; 
   } 
   #Navi-Bereich li { 
      font-size: small; 
   }
   #Navi-Bereich ul li {
     list-style-type: none; 
     list-style-position: outside;   /* dieser Menü-Punkt wird markiert */
     margin-left: 15px;   /* Untermenü-Punkte werden eingerückt */
   }
   #Navi-Bereich a { 
/*      display: block; */   /* ganze Fläche anklickbar machen */
      color: #ffffff; 
   }
   #Navi-Bereich a:hover,
   #Navi-Bereich a:focus {
      color: black;
   }
   #Navi-Bereich a:active { 
      color: #ffff00;   /* knallgelb */
   }
   #Navi-Bereich #Download-Bereich a { 
      text-decoration: underline;
      color: #ffffff; 
      width: 10em; 
   }
   #Navi-Bereich #Download-Bereich a:hover,
   #Navi-Bereich #Download-Bereich a:focus {
     color: #000000;
   }

#Navi-Bereich #Download-Bereich { display: none; }

#Text-Bereich { 
/*   background: #ffff00; */   /* knallgelb */
   font-family: Verdana, Arial, Helvetica, sans-serif; 
   font-size: small; 
   padding: 60px 20px 20px 20px; 
   margin: 0;
   margin-left: 200px; 
}
   #Text-Bereich #nach-oben { 
      margin-left: 200px; 
   }
   #Text-Bereich #nach-oben a { 
      color: #ffffff; 
   }
   #Text-Bereich #nach-oben a:hover,
   #Text-Bereich #nach-oben a:focus { 
         color: black;
   }

#Fuss-Bereich {
   clear: both; 
   color: black; 
   background-color: white; 
}

/* ====================================   
   3) Sonstige Styles 
   ==================================== */

/* Das Kontaktformular */
form {
   color: #000000; 
   background-color: #eeeeee;
   width: 370px;   /* Breite des Formulars */ 
   height: 200px;   /* Höhe des Formulars */ 
   padding: 20px; 
   border: 1px solid #8c8c8c;
}

label {   /* Beschriftung auf eigener Zeile */ 
   display: block; 
   cursor: pointer; 
} 
input#Absender, 
textarea { 
   width: 300px;
   border: 1px solid #8c8c8c;
   margin-bottom: 1em;
}
textarea { 
   height: 7em; 
}
input#Absender:focus, 
textarea:focus {
   background-color: #d9d9d9; 
}

/* ============================== 
   ==   Ende des Stylesheets   == 
   ============================== */