/* =================================================
Stylesheet für die Beispielsite aus "Little Boxes"  
Stand: Dreispaltiges Layout mit opposing floats   
Datei: bildschirm.css
Datum: 28. Juni 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; }

h1, h2, h3, p, ul, ol { margin-bottom: 1em; }  
ul ul { margin-bottom: 0; } 
li { margin-left: 1em ; } 
/* hier ggfs. Abstände für weitere Elemente restaurieren */

/* ====================================== 
  2. Allgemeine Styles 
  ====================================== */
body { 
  background-color: white; 
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  font-size: small; 
}
h1 { font-size: 150%; } 
h2 { font-size: 130%; } 
h3 { font-size: 110%; }
address {
  text-align: left;  
  font-size: 80%;     
  font-style: normal; 
  letter-spacing: 2px;
  line-height: 1.5;   
}
a { 
  text-decoration: none; 
  outline: none; 
} 

/* Allgemeine Klassen und IDs */ 
img#logo { 
  background-color: white;
  color: black;
  padding: 10px;
  border: 10px solid #d9d9d9; 
} 
.bildlinks { 
  float:left; 
  padding: 0px;
  margin-top: 30px; 
  margin-right: 30px; 
  margin-bottom: 80px; 
}
.bildrechts {
  float:right; 
  padding: 3px; 
  border: 5px solid #ccc; 
  margin-bottom: 10px;
  margin-left: 10px; 
}
.clearing { clear: both; } 
/* ====================================== 
  3.  Styles für die Layoutbereiche 
  ====================================== */
  
#kasten {
   position:absolute;
   bottom: -280px;
   left: 10px;
   z-index: 3;
}

#wrapper { 
  position: relative;
  background-color: white; 
  color: black; 
  width: 1120px; 
  margin: 10px auto; 
}
#kopfbereich {
  position: relative; 
  background-color: white;
  color: black;
  padding: 10px 20px 10px 20px; 
  
}
  p#slogan {
    position:absolute;
    top: 10px ; 
    right: 20px ; 
    padding: 5px 0 5px 0; 
    margin-bottom: 0; 
    color: white;
  }
  p#slogan span {
    color: #d90000; 
  }
  
#navibereich { 
  position: relative;
  float: left; 
  background-color: white;
  color: #0e3d75;
  width: 300px; 
  
  padding-left: 20px; 
  padding-top: 0px; 
  line-height: 0.8; 
}
* html #navibereich { width: 200px; }
  #navibereich ul { 
    width: 21em; 
}
  #navibereich li { 
    list-style-type: none; 
    margin: 0;
}
  #navibereich a { 
    display: block;  /* ganze Fläche anklickbar machen*/
    text-decoration: none;
    color: #0e3d75; 
    background-color: #c0c0c0;
    padding: 3px 3px 3px 16px; 
    white-space: Nowrap;
    background-image: url(img/pfeil0.gif);
    background-repeat: no-repeat;
    background-position: left;
}
  
  #navibereich a:link { color: #0e3d75; }
  #navibereich a:visited { color: #0e3d75; }
  
  #navibereich a:hover,
  #navibereich a:focus { 
    color: white; 
    background-color: #c0c0c0; 
}
 
  #navibereich a:active { 
    color: #0e3d75; 
}
  
  #navi02 { line-height: 0.1; visibility: hidden;}
  
  #menue {
    position: absolute;
    clear: both;
    color: black; 
    background-color: white;  /* Deckweiß */ 
    width: 220px; 
    height: 320px;
    padding-left: 20px; 
    padding-top: 20px;
    top: 200px;
    left: 40px;
}
  
  
  #anschriftbereich {
    position: absolute;
    clear: both;
    color: #0e3d75; 
    background-color: white;  /* Deckweiß */ 
    padding: 10px 0px 0px 0px;
    border-top: 1px solid #8c8c8c; 
    top: 480px; 
    left: 40px;
}
 
#textbereich { 
  float: right; 
  width: 790px; 
  
}
    #textbereich a {
       
      color: #0e3d75; 
      background-color: #c0c0c0; 
}

    #textbereich a:link {
      color: #0e3d75; 
      background-color: #c0c0c0; 
}

   #textbereich a:visited {
      text-decoration: none; 
      color: #0e3d75; 
      background-color: #c0c0c0; 
  }

  #textbereich a:hover { 
      border-bottom: 1px solid #0e3d75; 
  }
  
  
  
  #textbereich a:active {
      text-decoration: none; 
      color: #0e3d75; 
      background-color: #c0c0c0; 
  }
  
  #inhalt2 {
  width: 460px;
  padding: 0px; 
  background-color: white;
  color: #0e3d75;
}

#inhalt3 {
  float: left;
  width: 440px;
  padding: 10px 0px 0px 20px; 
  background-color: #0e3d75;
  color: #c0c0c0;
}

#inhalt4 {
  float: left;
  width: 400px;
  padding: 20px; 
  background-color: #c0c0c0;
  color: #0e3d75;
  border-top: 5px solid white;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  text-align: center;
}

#inhalt4 li {
  display: inline;
  list-style-type: none;
  margin-left: 20;
  margin-right: 20px;
  padding-bottom: 2px;
}

#inhalt4 ul {
  margin-bottom: 30px;
}

#inhalt {
  float: left; 
  width: 420px;
  padding: 20px; 
  background-color: #c0c0c0;
  color: #0e3d75;
}

#sidebar {
  float: right;  
  width: 320px; 
  padding: 0px;
  background-color: white;
}




/* ====================================== 
  4. Sonstige Styles 
  ====================================== */
/* Das Kontaktformular */
form {
  background-color: #d9d9d9;
  width: 370px; /* Breite des Formulars */
  padding: 20px;
  border: 1px solid #8c8c8c;
}
label { /* Beschriftung auf eigener Zeile */
  display: block;
  cursor: pointer;  /* Mauszeiger wird zur Hand */
}
input#besuchername, 
input#besuchermail,
input#besuchertelefon,
input#betreff, 
textarea { 
  width: 300px;
  border: 1px solid #8c8c8c;
  margin-bottom: 1em;
}
input:focus, 
textarea:focus {
  background-color: #c0c0c0; 
}
.snackbars {
  width: auto;
  max-width: 280px;
  padding: 9px 16px;
  margin-left: auto;
  margin-right: auto;
  color: #000;
  text-align: left;
  background-color: #c0c0c0;
  
}

.snackbars .icon-xxs {
  font-size: 20px;
}

.snackbars p span:last-child {
  padding-left: 14px;
}

.snackbars-left {
  display: inline-block;
  margin-bottom: 0;
}

.snackbars-right {
  display: inline-block;
  float: right;
  text-transform: uppercase;
}

.snackbars-right:hover {
  text-decoration: underline;
}

/* Die kleine Galerie */
div.galerie { 
   overflow: hidden; /* zum Einschließen der gefloateten Fotos */
   padding: 0px 10px 10px 0; 
   margin: 0 3px 3px 0; 
 }
div.galerie img { 
   float: left; 
   padding: 4px;
   margin-right: 15px; 
   margin-bottom: 15px;  
}
/* Sternchen-Hack und Holly-Hack 
   bewirken hasLayout im IE6 */
* html div.galerie { height: 1%; } 
  
  
/* ======================================= 
   E N D E   D E S   S T Y L E S H E E T S 
   ======================================= */