/* -- Allgemeines -- */
body {
  background: url(../img/back3.gif) #e7f3f7; background-attachment: fixed;/* Hier sollte man, auch wenn man ein Bild als Hintergrund hat, nicht vergessen die Hintergrundfarbe zu setzen. Es könnte nämlich sein dass man aus versehen für den Text die gleiche Farbe hat wie für den Hintergrund wobei die Leute mit ausgeschalteten Bildern nichts erkennen können. */
  color: black;
  margin: 0;
  padding: 1%; /* Ein wenig Abstand, damit der Anschein eines Blattes auf der Wand immer erhalten bleibt. */
  min-width: 962px; /* Bei weniger als 640px Breite soll ein Scrollbalken erscheinen. */
  font-size: 100.01%; /* umgeht den Font-Size-Bug im Safari, älteren Operas und IE */
  font-family: arial, sans-serif ;
}
h1 { /* Die Überschrift jeder Seite stellen wir besonders da, denn sie ist sehr wichtig. */
  font-size: 2.7em;
  font-weight: normal;
  line-height: 0.8em;
  padding: 0.6em 0 0.2em 2%;
  margin: 0;
}
h2, h3, { font-weight: normal; }
h1, h2, h3, h5, h6 { /* Alle Überschriften bekommen eine besondere Farbe, und da sie sehr groß sind, können wir es uns erlauben hier eine Schrift mit Serifen zu wählen. Wir spielen hier ein wenig mit Typographie, und entgegen dem Einheitsbrei auf vielen Seiten. */
  color: #91887E;
  font-family: Georgia, "Times New Roman", Times, serif;
}
h4 { font-weight: normal; }
h4, { /* Alle Überschriften bekommen eine besondere Farbe, und da sie sehr groß sind, können wir es uns erlauben hier eine Schrift mit Serifen zu wählen. Wir spielen hier ein wenig mit Typographie, und entgegen dem Einheitsbrei auf vielen Seiten. */
  color: #E85431;
  font-family: Georgia, "Times New Roman", Times, serif;
}



/* -- layoutspezifisches -- */
#container {
	width: 960px; /* Eine Begrenzung der Breite auf höhstens 70em. Das machen wir um nicht zu lange Textbreiten zu erhalten, welche dann schlecht zu lesen sind. Für den IE gibt es in ielte6.css einen Woraround. */
	margin: auto; /* Hiermit zentrieren wir unsere Seite. */
	border: 1px solid #91887E; /* Eine kleine optische Abgränzung. */
	border-top: 0; /* Ganz oben allerdings würde es mit dem grauen komisch aussehen, deshalb weg damit. */
	background: white url(../img/back1.gif);
	min-height: 700px;
}
#container1 {
	width: 960px; /* Eine Begrenzung der Breite auf höhstens 70em. Das machen wir um nicht zu lange Textbreiten zu erhalten, welche dann schlecht zu lesen sind. Für den IE gibt es in ielte6.css einen Woraround. */
	margin: auto; /* Hiermit zentrieren wir unsere Seite. */
	border: 1px solid #91887E; /* Eine kleine optische Abgränzung. */
	border-top: 0; /* Ganz oben allerdings würde es mit dem grauen komisch aussehen, deshalb weg damit. */
	background: white url(../img/back2.gif);
	min-height: 700px;
}
#container2 {
	width: 960px; /* Eine Begrenzung der Breite auf höhstens 70em. Das machen wir um nicht zu lange Textbreiten zu erhalten, welche dann schlecht zu lesen sind. Für den IE gibt es in ielte6.css einen Woraround. */
	margin: auto; /* Hiermit zentrieren wir unsere Seite. */
	border: 1px solid #91887E; /* Eine kleine optische Abgränzung. */
	border-top: 0; /* Ganz oben allerdings würde es mit dem grauen komisch aussehen, deshalb weg damit. */
	background: white;
	min-height: 700px;
}

#footer {
  clear: both; /* Damit #main mindestens so hoch ausgedehnt wird wie #subnav, falls #subnav länger sein sollte. */
  padding: 0 20px;
}


/* - Kopf - */
#logo {
  background: url(../img/logo1deu.png) 0 0 no-repeat navy; /* Das Bild mit der Blume hat einen Übergang zum Schwarzen das nutzen wir aus. Wir lassen es oben links beginnen und wiederholen es nicht. Dadurch dass die Hintergrundfarbe auch schwarz ist, entsteht der Eindruck als ob das Bild unendlich lang wäre. */
  height: 100px; /* Das Blumenbild ist 64px hoch also wählen wir das auch als höhe für unseren Kopf. */
  text-align: right;
  overflow: hidden; /* Einzig der Mozilla könnte den Text unverhältnissmäßig zum Hintergrund verändern. Damit dann wenigstens das Menü benutzbar bleibt schneiden wir alles was herausragt ab. */
  margin: 0; /* Manche Browser haben das schon voreingestellt aber nicht alle, deshalb vereinheitlichen wir das. */
  width: 960px;
}
#logo2 {
  background: url(../img/logo2deu.png) 0 0 no-repeat navy; /* Das Bild mit der Blume hat einen Übergang zum Schwarzen das nutzen wir aus. Wir lassen es oben links beginnen und wiederholen es nicht. Dadurch dass die Hintergrundfarbe auch schwarz ist, entsteht der Eindruck als ob das Bild unendlich lang wäre. */
  height: 100px; /* Das Blumenbild ist 64px hoch also wählen wir das auch als höhe für unseren Kopf. */
  text-align: right;
  overflow: hidden; /* Einzig der Mozilla könnte den Text unverhältnissmäßig zum Hintergrund verändern. Damit dann wenigstens das Menü benutzbar bleibt schneiden wir alles was herausragt ab. */
  margin: 0; /* Manche Browser haben das schon voreingestellt aber nicht alle, deshalb vereinheitlichen wir das. */
  width: 960px;
}
#logo3 {
  background: url(../img/logo3deu.png) 0 0 no-repeat navy; /* Das Bild mit der Blume hat einen Übergang zum Schwarzen das nutzen wir aus. Wir lassen es oben links beginnen und wiederholen es nicht. Dadurch dass die Hintergrundfarbe auch schwarz ist, entsteht der Eindruck als ob das Bild unendlich lang wäre. */
  height: 100px; /* Das Blumenbild ist 64px hoch also wählen wir das auch als höhe für unseren Kopf. */
  text-align: right;
  overflow: hidden; /* Einzig der Mozilla könnte den Text unverhältnissmäßig zum Hintergrund verändern. Damit dann wenigstens das Menü benutzbar bleibt schneiden wir alles was herausragt ab. */
  margin: 0; /* Manche Browser haben das schon voreingestellt aber nicht alle, deshalb vereinheitlichen wir das. */
  width: 960px;
}
/* - Menü - */
#menu {
	padding: 5px 5%; /* Je kleiner das Fenster desto kleiner soll auch der Abstand des Menüs rechts und links sein. */
	margin: 0;
	text-align: right;
	color: #E85431; /* Hier definieren wir die Farbe des Menüpunktes, der kein Link ist, also den Menüpunkt der Seite auf der wir uns gerade befinden. */
	background: #A59D90;
}
#menu li {
  font-size: 10pt;
  display: inline; /* Damit die Menüpunkte nebeneinander und nicht untereinander erscheinen. */
  list-style-type: none; /* Die Bullets vor den Menüpunkten schalten wir ab. */
  border-left: 1px solid #E5E1DB; /* Ein optischer Trennungsstrich */
  padding: 0 10px 0 15px;
  font-weight: bold;
  font-family: "Frutiger LT 47 LightCn", Arial, Helvetica, sans-serif;
}
#menu li a {
  color: white; 
  text-decoration: none;
}
#menu li a:visited {
  color: white; 
  text-decoration: none;
}
#menu li a:hover {
  color: black; background-color: white;
}
#menu li a:active {
  color: #E85431; background-color: white;
}

/* - Abteilungsdirektor - */
#chef {
	margin: 0;
	margin-top: 15px;
	color: white;
	float: right; 
	width: 300px
}
#chef li {
	font-size: 11pt;
	display: list-item; 
	list-style-type: none; 
	font-weight: bold;
	font-family: "Frutiger LT 47 LightCn", Arial, Helvetica, sans-serif;
	margin-right: 0px;
	text-align: center; 
}
#chef li a {
  color: white; 
  text-decoration: none;
}
#chef li a:visited {
  color: white; 
  text-decoration: none;
}
#chef li a:hover {
  color: black;
}
#chef li a:active {
  color: #E85431;
}

/* - Kontaktleiste - */
#kontakt {
	padding: 5px 5%; /* Je kleiner das Fenster desto kleiner soll auch der Abstand des Menüs rechts und links sein. */
	margin: 180px 0 0 0;
	text-align: right;
	color: white; /* Hier definieren wir die Farbe des Menüpunktes, der kein Link ist, also den Menüpunkt der Seite auf der wir uns gerade befinden. */
	background: /*#A59D90*/navy;
}
#kontakt li {
  font-size: 9pt;
  display: inline; /* Damit die Menüpunkte nebeneinander und nicht untereinander erscheinen. */
  list-style-type: none; /* Die Bullets vor den Menüpunkten schalten wir ab. */
  border-left: 1px solid #E5E1DB; /* Ein optischer Trennungsstrich */
  padding: 0 10px 0 15px;
  font-weight: normal;
  font-family: "Frutiger LT 47 LightCn", Arial, Helvetica, sans-serif;
}

/* - Leiste Arbeitsgruppentitel - */
#titel {
	padding: 5px 5%; /* Je kleiner das Fenster desto kleiner soll auch der Abstand des Menüs rechts und links sein. */
	margin: 0 0 0 0;
	text-align: right;
	color: white; /* Hier definieren wir die Farbe des Menüpunktes, der kein Link ist, also den Menüpunkt der Seite auf der wir uns gerade befinden. */
	background: /*#A59D90*/navy;
	font-weight: bold;
}
#titel li {
  font-size: 10pt;
  display: inline; /* Damit die Menüpunkte nebeneinander und nicht untereinander erscheinen. */
  list-style-type: none; /* Die Bullets vor den Menüpunkten schalten wir ab. */
  padding: 0 10px 0 15px;
	font-weight: bold;
  font-family: "Frutiger LT 47 LightCn", Arial, Helvetica, sans-serif;
}