/*  =========================================================
Stylesheet für die Übungsseiten aus dem Buch "Little Boxes"
Stand:  Kap. 15 - Layouts für Fortgeschrittene - Elastisch
Datei:  bildschirm.css
Media:  screen
Datum:  22. Januar 2007
Autor:  Peter Müller
Aufbau  1. Kalibrierung und allgemeine Styles
        2. Styles für Layoutbereiche
        3. Sonstige Styles
========================================================== */

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

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

/* Allgemeine Selektoren */

html { height: 101%; }
body {
   color: white ;
   background: #DFDFDF ;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 62.5%; /* NEU */
}
h1 { font-size: 200%; }
h2 { font-size: 175%; }
h3 { font-size: 150%; }
p, ul, ol { font-size: 130%; }
ul ul { font-size: 100%; }

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

/* Hyperlinks */
a { text-decoration: none; /* outline: none; */ }
a:link { color: grey; }
a:visited { color: lightgrey; }
a:hover,
a:focus {
      border-bottom: 1px solid #d90000;  /* links rote Unterstreichung */
}
a:active {
   color: white;
   background-color: grey;
}

/* Allgemeine Klassen und IDs */
.skiplink {
   position: absolute;
   left: -3000px;
   top: -2000px;
   width: 0px;
   height: 0px;
   overflow: hidden;
   display: inline;
}
.bildlinks {
   float:left;
   padding: 3px;
   border: 5px solid #ccc;
   margin-right: 10px;
   margin-bottom: 10px;
}
.bildrechts {
   float:right;
   padding: 3px;
   border: 5px solid #ccc;
   margin-bottom: 10px;
   margin-left: 10px;
}
.clearing { clear: both; }
#logo {
   color: black;
   background-color: white;
   padding: 5px;
   border: 5px solid #d9d9d9;
}

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

#umschlag {
  color: black;
   /* background: white url(farbverlauf_navi.jpg) repeat-y ; */
   background: /* #DFDFDF */   url(farbverlauf1.jpg) repeat-y top left;
   margin: 1%;
   padding: 1px;
 }

#wrapper {
   color: black;
   /* background: white url(farbverlauf_navi.jpg) repeat-y ; */
   background: #DFDFDF /* url(farbverlauf.jpg) repeat-y top left */ ;
   width: 72em;  /* NEU */
   margin: 5% 10% 5% 10%;
   padding: 5px;
   border: 5px solid white;
}

#kopfbereich {
   position: relative;
   color: black;
   background: #DFDFDF /* url(farbverlauf.jpg) repeat-y top left */ ;
   padding: 10px 20px 10px 20px;
}

   #kopfbereich p {
      position:absolute;
      top: 10px ;
      right: 10px;
      font-weight: bold;
      padding: 5px 0 5px 0;
      margin-bottom: 0;
   }
   #kopfbereich p span {
      color: #d90000;
   }
#navibereich {
   float: left;
   width: 11em; /* NEU */
   padding-left: 2em; /* NEU */
   padding-top: 20px;
}
/* für IE6 */
* html #navibereich { width: 10em; }

   #navibereich ul {
      width: 6em;
      border-top: 1px solid black;
   }
   #navibereich li {
      list-style-type: none;
      border-left,
      border-right: 1px solid black;
      border-bottom: 1px solid black;
      margin: 0;
   }
   #navibereich a {
      display: block;
      text-decoration: none;
      color: black;
      background-color: lightgrey;
      padding: 4px;
      border-left: 1px solid lightgrey;
   }
   #navibereich a:hover,
   #navibereich a:focus,
   #startseite #navi01 a,
   #galerieseite #navi02 a,
   #kontaktseite #navi03 a {
      color: black;
      background-color: white;
      border-left-color: black;
      border-bottom: none;
   }
   #navibereich a:active {
      color: black;
      background-color: #d9d9d9;
   }

#textbereich {
   float: right;
   width: 56em;  /* NEU */
}
   #textbereich a {
      border-bottom: 1px dotted #126012;
   }
   #textbereich a:hover,
   #textbereich a:focus {
      border-bottom: 1px solid #d90000;  /* links rote Unterstreichung */
   }
#text01 {
   float: left;
   width: 37em; /* NEU */
   color: black;
   background-color: white ;
   padding: 20px 1em 20px 2em; /* NEU */
}
#text02 {
   float: right;
   width: 11em; /* NEU */
   padding: 10px 1em; /* NEU */
}
#fussbereich {
   clear: both;
   color: black;
   background: #DFDFDF /* url(farbverlauf.jpg) repeat-y top left */ ;
   padding: 10px 20px 20px 20px;
   /* border-top: 1px solid #8c8c8c; */
}

/* ====================================
   3. Sonstige Styles
   ==================================== */

/* Das Kontaktformular */
form {
   background-color: #eee;
   width: 370px; /* Breite des Formulars */
   padding: 20px;
   border: 1px solid #8c8c8c;
}
/* Beschriftung auf eigener Zeile */
label {
   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;
}

/* Die Fotogalerie */
div.galerie {
   overflow: hidden;
   padding: 25px 10px 10px 0;
   margin: 0 3px 3px 0;
 }
/* für IE6 */
* html div.galerie { height: 1%; }

div.galerie img {
   float: left;
   padding: 4px;
   border: 1px solid #ddd;
   border-right-color: #aaa;
   border-bottom-color: #aaa;
   margin-right: 15px;
   margin-bottom: 15px;
}

/* =======================================
   E N D E   D E S   S T Y L E S H E E T S
   ======================================= */