﻿/* ===============================================================================================
Stylesheet für Seiet Glas Kitzmann Essen"
Datei: bildschirm.css
Media: screen
Datum: July 2007
Autor: Stephan Gehring

Aufbau: 1. Kalibrierung und allgemeine Style
        2. Styles und Layoutbereiche
        3. Sonstige Styles
=================================================================================================== */


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

* { padding: 0; margin: 0; }
/* Abstand nach unten */
ol { margin-bottom: 1em; }

ul { margin-bottom: 1em; }

p { margin-bottom: 1em; }

h2 { margin-bottom: 1em; }

/* Verschachtele Listen ohne Abstand */
ul ul { margin-bottom: 0; }

/* Verschachtelte Listen Abstand von links */
li { margin-left: 1em; }

html { height: 101%; }

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

h1 { font-size: 150%; }
h2 { font-size: 120%; }

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

/* Hyperlinks gestalten */
a { text-decoration: none; outline: none }

a:link { color: #d90000; }
a:visited { color: #cc6666; }
a:focus { border-bottom: 1px solid #900000; }
a:hover { border-bottom: 1px solid #900000; }
a:active { color: white; background-color: #d90000; }

.skiplink {
   position: absolute;
   top: -2000px;
   left: -3000px;
   width: 0px;
   height: 0px;
   overflow: hidden;
   display: inline;
}

#logo {
   color: black;
   background-color: white;
   padding: 5px;
   border: 1px solid #d9d9d9;
}

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

#wrapper {
   color: black;
   background-color: white;
   width: 720px;
   margin-top: 10px;
   margin-right: auto;
   margin-bottom: 10px;
   margin-left: auto;
}

#kopfbereich {
   color: black;
   background-color: #ffe574;
   background-image: url(farbverlauf.jpg);
   background-repeat: repeat-y;
   background-position: top left;
   padding: 10px 20px 0 20px;
 }
   #kopfbereich p {
      padding: 5px 0 5px 0;
      margin-bottom: 0;
 }     
 
#navibereich {
   text-align: right;
   color: black;
   background: #ffe574 url(farbverlauf.jpg) repeat-y top left;
   padding: 5px 20px 5px 20px;
}   
   #navibereich ul { margin-bottom: 0; }
   #navibereich li {
      display: inline;
      list-style-type: none;
      margin: 0;
   }      
   #navibereich a { 
      color: black;
      background-color: #ffeda0;
      padding: 4px 8px 4px 8px;
      border: 1px solid #8c8c8c;
      }
   
   #impressumseite #navi03 a {
      color: black;
      background-color: white;
      border-bottom-color: white;
   }   
   
   #kontaktseite #navi02 a {
      color: black;
      background-color: white;
      border-bottom-color: white;
   }   
   #startseite #navi01 a {
      color: black;
      background-color: white;
      border-bottom-color: white;
   }   
   #navibereich a:focus {
      color: black;
      background-color: white;
      border-bottom-color: white;
   }   
   #navibereich a:hover {
      color: black;
      background-color: white;
      border-bottom-color: white;
   }   
   #navibereich a:active {
      color: black;
      background-color: white;
   }   
         
#textbereich {
   padding-top: 20px;
   padding-right: 10px;
   padding-bottom: 20px;
   padding-left: 20px;
}   
   #textbereich a { border-bottom: 1px dotted #cc0000 }
   #textbereich a:focus { border-bottom: 1px solid #d90000 }

   #textbereich a:hover { border-bottom: 1px solid #d90000 }

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