/* =================================================
Stylesheet für die Beispielsite aus "Little Boxes"  
Stand: Ende Kapitel "Ordnung halten" 
Datei: bildschirm.css
Datum: 20. Juli 2011
Autor:  Peter Müller 

Aufbau: 1. Kalibrierung und Restauration
        2. Allgemeine Styles 
        3. Styles für Layoutbereiche    
        4. Sonstige Styles 

================================================== */


/* ====================================== 
  1. Kalibrierung und Restauration
  ====================================== */

* { padding: 0; margin: 0; }
html { overflow-y: scroll; }

/* Abstände nach unten */ 
h2, p, ul, ol { margin-bottom: 1em; }
ul ul { margin-bottom: 0; }
li { margin-left: 1em; }
/* ggfs. weitere Abstände restaurieren */ 


/* ====================================== 
  2. Allgemeine Styles 
  ====================================== */

body { 
  background-color: #8c8c8c; 
  color: white; 
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  font-size: small;  
}

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

/* Hyperlinks gestalten */ 
a { text-decoration: none; }
a:link { color: #d90000; } 
a:visited { color: #cc6666; }
a:hover, 
a:focus { 
  border-bottom: 1px solid #d90000; 
}
a:active { 
  background-color: #d90000; color: white; 
}

/* Allgemeine Klassen und IDs */ 
img#logo {  
  background-color: white;
  color: black;
}



/* ====================================== 
   3.  Styles für die Layoutbereiche 
====================================== */

div#wrapper { 
  background-color: white; 
  color: black; 
  width: 914px; 
  margin: 10px auto; 
}

div#kopfbereich {
  background: #DEDEDE;
  color: black;
  padding: 10px 20px 0 20px;
}
  p#slogan {
    padding: 5px ;
    margin-bottom: 0px;
  }
  p#slogan span {
    color: #d90000; 
  }
div#navibereich {
  text-align: left;
  color: black;
  background: #6C6C6C;
  padding: 5px 20px 4px 20px;
  border-bottom: 1px solid #8c8c8c; 
}
  div#navibereich ul {margin-bottom: 0px;}
  div#navibereich li {
    display: inline;
    list-style: none;
    margin: 0 ;
  }
  div#navibereich a {
  color: black;
  background-color: #AB0535;
  padding: 4px 8px;
  border: 1px solid #8c8c8c;
  }
  div#navibereich li.sie-sind-hier a{
    color: black;
    background-color: white;
    border-bottom-color: white;    
  }
  div#navibereich a:hover,
  div#navibereich a:focus {
    color: black;
    background-color: white;
    border-bottom-color: white;
  }
  div#navibereich a:active {
    color: black;
    background-color: white;
    border-bottom-color: white;
  }
div#textbereich {
  padding: 20px; 
}
  div#textbereich a { 
    border-bottom: 1px dotted #cc0000; 
  }
  div#textbereich a:hover,
  div#textbereich a:focus { 
    border-bottom: 1px solid #d90000; 
    text-decoration: none; 
  }
div#fussbereich {
  padding: 10px 20px 20px 20px; 
  border-top: 1px solid #8c8c8c;
  margin-top: 0;  
}




  
  /* ====================================== 
     4. Sonstige Styles 
  ====================================== */
form {
  background-color: #9d9d9d;
  width: 370px;
  padding: 20px;
  border: 1px solid #8c8c8c;
}  
label {
  display: block;
  cursor: pointer;
}
input#besuchername,
input#besuchermail,
textarea {
  width: 300px;
  border: 1px solid #8c8c8c;
  margin-bottom: 1em;
}
textarea { heigth: 7em; }
input:focus,
textarea:focus {
  background-color: #ffeda0;
}



  
  
/* ======================================= 
   Ende des Stylesheet bildschirm.css  
   ======================================= */