body {
  background: #E6E6E9;
  color: black;
  margin: 0;
  font-size: 100.01%; /* umgeht den Font-Size-Bug im Safari, älteren Operas und IE */
  font-family: arial;
}

#container { 
  position:absolute;left:20px; right:20px; top:5px;  
  max-width: 1000px;
  min-width: 800px; 
  margin: 0 auto; 
  border:1px solid #000000; /* Eine kleine optische Abgränzung. */
  background: white;
  -moz-border-radius-topleft:30px;
  -moz-border-radius-topright:30px;
  -khtml-border-radius-topleft:30px;
  -khtml-border-radius-topright:30px;

  -moz-border-radius-bottomleft:10px;
  -moz-border-radius-bottomright:10px;
  -khtml-border-radius-bottomleft:10px;
  -khtml-border-radius-bottomright:10px;
}

#footer {
  background: #83817F;
  clear: both; /*Damit #main mindestens so hoch ausgedehnt wird wie #subnav, falls #subnav länger sein sollte. */
  padding: 0 20px;
  margin: 0;
  text-align: right;

  -moz-border-radius-bottomleft:10px;
  -moz-border-radius-bottomright:10px;
  -khtml-border-radius-bottomleft:10px;
  -khtml-border-radius-bottomright:10px;
}

/* - Logo bzw. Kopf - */
#logo {	
  color: white;
  height: 120px; 
  padding: 0 20px;
  overflow: hidden; /* Einzig der Mozilla könnte den Text unverhältnismässig zum Hintergrund verändern. Damit dann wenigstens das Menü benutzbar bleibt schneiden wir alles was herausragt ab. */
  letter-spacing: +1px; /* Wieder ein wenig Typografie damit das Logo besser aussieht. */
  margin: 0; /* Manche Browser haben das schon voreingestellt aber nicht alle, deshalb vereinheitlichen wir das. */
   -moz-border-radius-topleft:30px;
   -moz-border-radius-topright:30px;
  -khtml-border-radius-topleft:30px;
  -khtml-border-radius-topright:30px;
	background-image: url(../img/hg-verlauf.jpg);
}
#p1{position:absolute; top: 20px; right:0px; width:250px; height:50px;}
#p2{position:absolute; top:50px; right:100px; width:250px; height:50px;}
#p3{position:absolute; top:80px; right:200px; width:250px; height:50px;}



#menu {
  background:#868889;
  padding: 5px 1%; /* Je kleiner das Fenster desto kleiner soll auch der Abstand des Menüs rechts und links sein. */
  margin: 0;
  text-align: center;
  color: black  ; /* Hier definieren wir die Farbe des Menüpunktes, der kein Link ist, also den Menüpunkt der Seite auf der wir uns gerade befinden. */
}
#menu li {
  font-size: 1.1em;
  display: inline; /* Damit die Menüpunkte nebeneinander und nicht untereinander erscheinen. */
  list-style-type: none;
  font-weight: bold;
}
#menu li a {
  color: white;
  text-decoration: none;
  margin: 0.2em;
  padding: 0.2em 1em;
  border: 1px solid #868889;
  }
#menu span { margin:1em; }
#menu a:hover { 
color: blue;
background-color: #E6E6E9; 
border-color: white;
border-left-color: black; border-top-color: black;
}
#menu div {
     clear: left;
  }

/* --- Navigation ---*/

dt { /* Die einzelnen Überschriften in der Subnavigation */
  font-size: 1.3em;
  font-family: Georgia, "Times New Roman", Times, serif;
  padding: 0.5em;
  margin-top: 0.2em;
  border-top:  1px dotted grey; /* Hier eine optische Trennungslinie zwischen den einzelnen Bereichen der Subnavigation. */
  font-weight: bold;
}
dd { /* Die Unterpunkte der Subnavigation. */  padding: 0;  margin: 0.2em 0;}
#subnav {
  width: 25%; 
  min-width: 10em; /* Damit uns die Subnavigarion nicht zu sehr zusammengeschoben wird. */
  float: right; /* Damit erreichen wir dass der Inhalt links neben der Subnavigation vorbeifließt und nicht erst unten drunter anfängt. */
  padding: 20px 1% 1em 1%;
  margin: 1em 1% 0 1%;
  border-left: 1px solid grey; /* Hiermit trennen wir optisch die Subnavigation vom eigentlichen Inhalt ab. */
  font-size: 0.9em; /* Die Schriftgröße setzen wir hier ein wenig herunter damit erkennbar wird dass das Informationen zweiter Rangordnung sind. */
}
#subnav_impressum {
  width: 30%;
  height: 2000px;
  min-width: 10em; /* Damit uns die Subnavigarion nicht zu sehr zusammengeschoben wird. */
  float: right; /* Damit erreichen wir dass der Inhalt links neben der Subnavigation vorbeifließt und nicht erst unten drunter anfängt. */
  padding: 20px 1% 1em 1%;
  margin: 1em 1% 0 1%;
  border-left: 2px solid grey; /* Hiermit trennen wir optisch die Subnavigation vom eigentlichen Inhalt ab. */
  font-size: 0.9em; /* Die Schriftgröße setzen wir hier ein wenig herunter damit erkennbar wird dass das Informationen zweiter Rangordnung sind. */
}


#main {
  background: white;  
  padding: 5px 31% 0 20px;  /*Der rechte Abstand (31%) stellt sicher, dass auch nach dem Umfließen der Subnavigation der Text genau so breit wird wie oben und ein zwei-Spalten Eindruck entsteht. */
  line-height: 1.5em; /* Zur besseren Lesbarkeit erhöhen wir die Zeilenhöhe. */
}



/* --- Allgemeine Formatierungen ---*/

a:hover { color:blue;}
a { color: black; text-decoration: underline; } /* Alle unbesuchten Links bekommen eine leicht bläuliche Farbe und werden unterstrichen, damit man Sie gleich im Text erkennt. */
.skip { /* Da ein wichtiger Screenreader das display: none; auch für sich versteht und nichts vorließt obwohl das hier sich vor allem an Blinde richtet, muss man es so lösen dass man diesen Link außerhalb des Sichtfeldes bringt. Somit wird er trotzdem vorgelesen. */
  position: absolute;
  margin-left: -999px;
  width: 990px;
}

h1 { font-size: 2.3em;  font-weight: bold;  line-height: 1em;  padding: 0.7em 0em 0 0.5em;  margin: 0;}
h1.logo { font-size: 1em; padding: 0 0 0 0; border-bottom: none; font-weight: normal;}
h2 { font-weight: bold; padding: 5px 0 0 0; font-size: 1.2em}
h3 {font-weight: bold; font-size: 1.2em; padding-left: 20%;}
h4 {font-size: 0.8em; font-weight: normal; margin: 20px 0 0px 0px;}

img {  border: solid 0px #aaa;  padding: 1px;  max-width: 95%; /* Gute Browser machen ein zu großes Bild, welches das Design sprengen würde, entsprechend kleiner. Funktioniert beim IE leider nicht. */
}
p {  margin: 0em 0em 0em 1em ;}

.bild{	margin: 0.7em 3em 0em 0.5em;	padding: 1px;   float: left;	}
.startbild {margin: 2em 1.8em 0em 0em;  float: left;}
.rechtsbild {  margin: 2em 2em 1em 2em ;  padding: 1px;  float: right;}
.michbild{	margin: 4em 2em 5em 1em;	width: 220px;	float: left;	text-align: center;	}

.rot  {	color: #D5071F;	}
.grün {	color: green;	}
.gelb {	color: #FF9000;	}
.fett {	font-weight: bold;}
.fettrot {font-weight: bold;	color: red;}
.klein {	font-size: 0.85em;	font-weight: normal;}
.fettgross {font-weight: bold;	font-size: 1.3em;}
.mittig{  text-align: center;  font-style: italic;} 
.fettrotgross {font-weight: bold;	color: red;	font-size: 1.3em;}

ul {line-height: 200%; font-size: 0.9em;}
li  {line-height: 130%;padding: 0.3em 0 0 0;} 

.unterpunkte {line-height: 130%; font-size: 0.9em;}
li.unterpunkte  {line-height: 130%;padding: 0.3em 0 0 0;} 

#referenzen {line-height: 130%; width: 650px;}
#referenzen h2 {margin-top: 300px;}
#referenzen p {font-size: 0.9em;}
#referenzen b {font-size: 1 em;}


#serviceangebote ul li{ 	padding: 0.5em 0 0.2em 0.3em;	font-size: 1.1em;}
#beitragstabellen {	width: 100%;	border: 1px dotted #FF6309;}









/* -- Layouts -- */


div.grau { 
 	background: #E6E6E9;
 	padding: 0 5px 0 5px;
 	margin-top: 10px;
  -moz-border-radius-topleft:20px;
  -moz-border-radius-topright:20px;
  -khtml-border-radius-topleft:20px;
  -khtml-border-radius-topright:20px;

  -moz-border-radius-bottomleft:20px;
  -moz-border-radius-bottomright:20px;
  -khtml-border-radius-bottomleft:20px;
  -khtml-border-radius-bottomright:20px;
}

div.grau-schmal { 
	width: 400px;
 	background: #E6E6E9; 	
 	padding: 0 5px 0 5px;
  -moz-border-radius-topleft:20px;
  -moz-border-radius-topright:20px;
  -khtml-border-radius-topleft:20px;
  -khtml-border-radius-topright:20px;

  -moz-border-radius-bottomleft:20px;
  -moz-border-radius-bottomright:20px;
  -khtml-border-radius-bottomleft:20px;
  -khtml-border-radius-bottomright:20px;
}

div.start {  padding: 0 5px 0 5px; 	text-align: justify; 	border-bottom:0px solid grey;}


span.angebotsbuttons {font-weight: normal; font-size:0.9em; line-height: 1.1em;}
.servicebild {margin: 2em 1.8em 0em 0em;  float: left;}

/* Nun Angebotsliste */

  ul#angebotsliste {	padding: 1em 1em 0 0;}
  ul#angebotsliste li {    list-style: none; display: inline;   }
  ul#angebotsliste a {
	float: left;
    display: block; text-align: left; width: 12em; height: 6em;
    margin: 1em 0.5em 1.5em 0.5em; padding: 0.2em 1em;
    text-decoration: none; font-weight: bolder;
    border: 1px solid white;
    border-left-color: white; border-top-color: white;
    color: black; background-color: #E6E6E9;
   
  -moz-border-radius-topleft:10px;
  -moz-border-radius-topright:10px;
  -khtml-border-radius-topleft:10px;
  -khtml-border-radius-topright:10px;

  -moz-border-radius-bottomleft:10px;
  -moz-border-radius-bottomright:10px;
  -khtml-border-radius-bottomleft:10px;
  -khtml-border-radius-bottomright:10px;
  
  }
  * html ul#angebotsliste a, * html ul#angebotsliste span {  /* Korrektur fuer IE 5.x */
    width: 8em;
    width: 6em;
  }
  ul#angebotsliste a:hover {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: blue; background-color: white;
  }
  ul#angebotsliste div {
     clear: left;
  }

/* -------------- ----------------------Formatierungen Fernwartung -------------------------------------- */

body.fernwartung {  background: white;}
ul.fernwartung {}