/* Stylesheet fuer die Little Boxes Uebungsseiten */

* { padding: 0; margin: 0; }

body {
      color: black; /*Schriftfarbe*/
      background-color: #8c8c8c; /*Hintergrundfarbe*/
      font-family: Verdana, Arial, Helvetica, sans-serif;
      }
      
/*============= 1. DIV-Bereiche===========================
======================================================*/    
.skiplink { display: none; }  
#navibereich {display: none;}
#wrapper {
          color: black;
          background-color: white;
          width: 720px; /*Breite des Inhaltsbereichs*/
          margin-top: 10px; 
          margin-right: auto;
          margin-bottom: 10px; /*Abstand nach untern */
          margin-left: auto; 
          }
          
          
#kopfbereich {
              color: black;
              background-color: #f3c600;
              padding-top: 10px;
              padding-right: 20px;
              padding-bottom: 0px;
              padding-left: 20px;
              }
              
/* Verschachtelter Selektor: nur die Grafik im Kopfbereich, weil die in der originalen Uebung ein transp. *.gif ist*/
#kopfbereich img {
                  background-color: white; 
                  padding: 5px;
                  border: 5px solid #d9d9d9;
                  }
#kopfbereich p {
                padding: 5px 0 5px 0;
                margin-bottom: 0; /*war 1em*/
                }         
                                                 
                  
#textbereich {
              padding-top: 20px;
              padding-right: 10px;
              padding-bottom: 20px;
              padding-left: 20px;
              }                  


#fussbereich {
              padding: 20px;
              padding-top: 10px;
              border-top: 10px solid #8c8c8c;
              margin-top: 20px;
              }   


#navibereich {
              text-align: right;
              color: black;
              background-color: #f3c600;
              background-repeat: repeat-y;
              background-position: top left;
              padding: 5px 10px 4px 10px;
              border-bottom: 1px solid #8c8c8c;
              }
              
               
#navibereich ul {
                 margin-bottom: 0;
                 }     


#navibereich li {
                 display: inline; /*nebeneinander darstellen*/
                 list-style-type: none; /*ohne Aufzaehlungspunkte*/
                 margin: 0;
                  } 
                  
#navibereich a { 
                color: black;
                background-color: #ffeda0;
                padding: 4px 8px 4px 8px;
                border: 1px solid #8c8c8c;
                }
                
                
#navibereich a:active {
                      background-color: white; 
                      }    
                        
#navibereich a:hover {
                      text-decoration: none;
                      color: black;
                      background-color: white; 
                      padding-bottom: 5px; /*ein Pixel mehr als oben*/
                      border-bottom: none; /*untere Rahmenlinie aus*/
                      }  
                     #startseite #navi01 a, /*mit Komma am Ende*/
                     #kontaktseite #navi02 a /*ohne Komma am Ende*/           
              
              
                        
/*============= 2. Allgemeine HTML-Elemente=============
======================================================*/                    



h1, h2 { font-family: Verdana, Arial, Helvetica, sans-serif;}
h1 { font-size: 150%; }
h2 { font-size: 130%; margin-bottom: 1em; }

                        
                
               
address {
        text-align: center;/*zentrieren*/
        font-size: 80%; /* etwaskleiner*/
        font-style: normal; /*normale Schrift, nicht kursiv*/
        letter-spacing: 2px; /*Abstand zw. denBuchstaben*/
        line-height: 1.5em; /*Zeilenabstand*/   
        }
        
        
a { text-decoration: none; outline: none; }
a:link { color: #d90000; }    
a:visited { color: #cc6666; }  
a:hover, a:focus { text-decoration: underline; } 
a:active { color: white; background-color: #d90000; }


p, ul { margin-top: 0; 
        margin-right: 0;
        margin-bottom: 1em; /*Abstand nach untern */
        margin-left: 0; 
        }
ul li {
       margin: 0;
       }
       li {margin-top: 0;
           margin-right: 0;
           margin-bottom: 0; /*Abstand nach untern */
           margin-left: 1em; 
           }


/*================Kontaktformular===============
===============================================*/

form {
      background-color: #eee;
      width: 400px;
      padding: 20px;
      border: 1px solid #8c8c8c;
      }

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