/*  =========================================================
Stylesheet für www.soehnel-tech.de
Datei:  bildschirm.css
Datum:  September 2009
Autor:  Oliver Wild
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; }


/* Allgemeine Selektoren */

html { height: 101%; } /* erzwingt Scrollbar im Firefox */
body {
   color: #000000;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   background: #F0F0F0;
   font-size: small;
}
h1 { font-size: 150%; }
h2 { font-size: 120%; }
h3 { font-size: 100%; font-weight: bold; }


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


/* Allgemeine Klassen und IDs */
.skiplink {
   position: absolute;
   left: -3000px;
   top: -2000px;
   width: 0px;
   height: 0px;
   overflow: hidden;
   display: inline;
}

.logo {  padding-top: 10px;
         padding-left:550px;}

.bildrechts {
   float:right;
   padding: 3px;
   margin-bottom: 10px;
   margin-left: 10px;
}

.bildlinks {
   float:left;
   padding: 3px;
   margin-bottom: 10px;
   margin-left: 10px;
}

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

#wrapper { /* Das HTML-Element mit dem Attribut id="wrapper" */
   color: black;
   width: 960px; /* Breite des Inhaltsbereiches */
   border: 2px solid #D6D6D6;
   margin: 10px auto;
}

  #kopfbereich {
  color: black;
  padding: 0;
  margin: 0;
  background: url(bilder/header_dt.gif) no-repeat top left;
  height: 192px; }

    #navibereich {
    position: relative;
    font-variant:small-caps;
    font-size: 14px;
    color: white;
    padding: 160px 10px 2px 10px; }

    #navibereich li {display: inline;}

    #navibereich ul { margin: 0;          }
    #navibereich li { display: inline;    }

    #navibereich a {
      color: white;
      list-style-type: none;
      list-style-position: inside;
      margin: 0 10px;
      padding: 2px;}

    #navibereich a:hover,
    #navibereich a:focus,
    #wir #navi01 a,
    #projekte #navi02 a,
    #mitgliedschaft #navi03 a,
    #impressum #navi04 a,
    #links #navi05 a,
    #homepage #navi06 a { color: silver; border-bottom: 1px solid silver}


/* =========== ENDE Kopfbereich ========================= */

#content {background: url(bilder/background.gif) top left no-repeat;
          padding: 0; margin: 0;
          width: 960px;
          min-height: 500px;}


/*>>>>>>>>>>>> BEGINN breiter Text ohne linke Spalte <<<<<<<<<<<<<<<<<<<<<< */

#inhaltbreit { padding: 25px 20px 20px 20px;}

#inhaltbreit h1 {font-size:130%;
                font-face:sans-serif, helvetica, arial;
                font-weight: bold;
                line-height:120%;
                padding: 10px 0 15px 0;
                color:#002C61 }

#inhaltbreit h2 {font-size:110%;
                 font-face:verdana, sans-serif, helvetica, arial;
                 font-weight: bold;
                 line-height:110%;
                 padding: 10px 0 15px 0;
                 color:#002C61 }

#inhaltbreit p {font-face: sans-serif, helvetica, arial;
                line-height:140%;
                padding: 0 0 15px 0;}

#inhaltbreit ol {margin:0 50px 0 20px;}

#inhaltbreit ul {margin-left:15px;}

#inhaltbreit li {margin-bottom: 7px;
                 font-weight: bold;
                 color: #4F4F4F; }

#inhaltbreit a {padding-left:10px;
                background: url(bilder/link.gif) 0 8px no-repeat;
                color: #086028;}

#inhaltbreit a:hover, a:visited, a:active
                { color: #4A4A4A;}


/*>>>>>>>>>>>> BEGINN Linke Spalte <<<<<<<<<<<<<<<<<<<<<< */

#navilinks { float: left;
             width: 200px;
             margin: 0;
             padding: 25px 0 0 20px;
             background-color: white; }



/*>>>>>>>>>>>> BEGINN Rechte Spalte <<<<<<<<<<<<<<<<<<<<<< */


#inhalte {float: right;
          width: 650px;
          margin: 10px;
          padding: 10px 30px 30px 10px;}


#inhalte h1 {font-size:130%;
             font-face:sans-serif, helvetica, arial;
             font-weight: bold;
             line-height:120%;
             padding: 0 0 15px 0;
             color:#002C61 }

#inhalte h2 {font-size:110%;
             font-face:verdana, sans-serif, helvetica, arial;
             font-weight: bold;
             line-height:110%;
             padding: 0 0 15px 0;
             color:#002C61 }

#inhalte p {font-face: sans-serif, helvetica, arial;
            line-height:140%;
            padding: 0 0 15px 0;}

#inhalte ul {margin-left:15px;}

#inhalte li {margin-bottom: 7px;
             font-weight: bold;
             color: #4F4F4F; }

#inhalte a {padding-left:10px;
            background: url(bilder/link.gif) 0 8px no-repeat;
            color: #086028;}

#inhalte a:hover, a:visited, a:active
            { color: #4A4A4A;}



/* =========== ENDE conten ========================= */


#fussbereich {
   clear: both;
   background: #002C61;
   color:#fff;
   padding: 13px 10px 5px 10px;
   text-align: center;
   }


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

/* Das Kontaktformular */
form {
   width: 650px; /* Breite des Formulars */
   padding: 0;
   /*border: 1px solid #8c8c8c;*/
}

label { cursor: pointer; }


input#firma,input#vorname,input#nachname,input#email,input#strasse,input#ort
        { width: 300px;   border: 1px solid #8c8c8c; margin-bottom: 5px;
        }

input#termin
        { width: 100px;   border: 1px solid #8c8c8c;}

input#servicegeraet
        { width: 200px;   border: 1px solid #8c8c8c;}

textarea { height: 7em; }

input#absender:focus, textarea:focus {   background-color: #d9d9d9; }

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