/*  ===============================================
Stylesheet für www.fruechte-maier.de
Stand:  Entwurf 2009 - Remake 2010-03-15
Datei:  bildschirm.css
Datum:  2010-03-15
Autor:  Martin Z.
Aufbau: 1. Kalibrierung und Restauration
        2. Allgemeine Styles
        3. Styles für Layoutbereiche
        4. Sonstige Styles
================================================ */

/* ======================================
  1. Kalibrierung und Restauration
  ====================================== */
/* Reset - alle Abstände auf NULL */
*  { padding: 0; margin: 0; }
/* optional: erzwingt Scrollbar im Firefox */
html { height: 100%; margin-bottom: 1px; }
h2, h3, p, ul, ol { margin-bottom: 1em; }
ul ul { margin-bottom: 0; }
li { margin-left: 1em ; }
/* hier ggfs. Abstände für weitere Elemente restaurieren */

/* ======================================
  2. Allgemeine Styles
  ====================================== */
body {
  background-color: #005F30;
  color: white;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: small;
}

/* Allgemeine Gestaltung der Überschriften */

h1 { font-size: 150%; }
h2 { font-size: 130%; }
h3 { font-size: 110%; }

/* Allgemeine Gestaltung der Hyperlinks */
a {
  text-decoration: none;
  color: #E7531F;
}
a:link {  }
a:visited {  }
a:hover, a:focus {}
a:active {}

/* Allgemeine Klassen und IDs */

/* Skiplink ausblenden */
.invisible {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
}

/* Bilder floaten und mit Rahmen versehen */

/*
.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; }

/* ======================================
  3.  Styles für die Layoutbereiche
  ====================================== */
  
/*	***************************************************
	INFO:
	Im Wrapper ist übrigens die Fruchtleiste als
	Hintergrundbild für das Menü definiert, bei
	bedarf ist dieser also im eigentlichen Template
	zu überladen!
*************************************************** */  

#wrapper {
  background-color: white;
  color: black;
  width: 960px;
  margin: 10px auto;
  background-image: url("img/menu_fruchtmix.jpg"); /* <-- ÜBERLADEN */
  background-repeat: no-repeat;
  background-position:0 170px;
}

/*	***************************************************
	INFO:
	Im Kopfbereich ist übrigens die ein Teil der
	Fruchtleiste enthalten, dieses wird ebenfalls als
	Hintergrundbild geladen und, bei bedarf ist dieser 
	also im eigentlichen Template zu überladen!
*************************************************** */  

#kopfbereich {
  position: relative;
  background-color: white;
  background-image: url("img/header_fruchtmix.jpg"); /* <-- ÜBERLADEN */
  color: black;
  height: 170px;
  padding: 0;
}

/*	***************************************************
	Navigation:
	Hier ist alles für die Navigation definiert 
	es ist zu beachten, das Untergruppen eine andere
	Farbe haben als die Hauptpunkte. Per Definition
	Der Seite ist nur eine Untergruppe vorgesehen!
*************************************************** */ 

#navibereich {
  float: left;
  width: 135px;
  background-color:white;
  margin-top: 5px;
  margin-left: 15px;
  padding-left: 10px;
  padding-top: 10px;
  margin-bottom:200px;
}
  #navibereich ul {
    width: 6em;
  }
    #navibereich ul ul{
    width: 6em;
	margin-left:7px;
	}
	
  #navibereich ul li{
    list-style-type: none;
    margin: 0;
	font-weight:bold;
  }
  
  #navibereich li {
    list-style-type: none;
    margin: 0;
	font-weight:bold;
  }
  #navibereich a {
    display: block;
    padding: 4px;
	padding-left:0px;
  }
  
  .active span{
		display: block;
		padding: 4px;
		padding-left:0px;
		font-weight:bold;
	}
/*	.level_1:link {
					color:#E7531F; 
					text-decoration:none;
				}
	.level_1:visited {
					color:#E7531F; 
					text-decoration:none;
				}
	.level_1:focus {
					color:#E7531F; 
					text-decoration:underline;
				}
	.level_1:active {
					color:#E7531F; 
					text-decoration:underline;
				}
	.level_1:hover {
					color:#E7531F; 
					text-decoration:underline;
				}
  
	.level_2:link {
					color:#005F30; 
					text-decoration:none;
				}
	.level_2:visited {
					color:#005F30; 
					text-decoration:none;
				}
	.level_2:focus {
					color:#005F30; 
					text-decoration:underline;
				}
	.level_2:active {
					color:#005F30; 
					text-decoration:underline;
				}
	.level_2:hover {
					color:#005F30; 
					text-decoration:underline;
				}

 */ 
 /*	***************************************************
	Imagebox:
	Diese ist dafür vorgesehen, den im Entwuf gezeigten
	Fotowürfel im unteren rechten Eck zu behandeln.
*************************************************** */ 

#imagebox {
  float: right;
  width: 10px;
  padding: 5px;
  padding-top: 20px;
}

 /*	***************************************************
	Textbereich:
	In diesem Div befindet sich der eigentlich Inhalt
	der Webseite. Sie soll so gestaltet sein, dass der
	Text die Imagebox umfließt. Der Schriftzug 
	Lagern Kühlen Liefern ist als Hintergrund für links
	Unten definiert. Per Padding halten wie den nötigen
	Abstand.
*************************************************** */ 

#textbereich {
  padding: 20px 10px 20px 20px;
  margin-left: 172px; /* Platz für #navibereich */
 /* margin-right: 130px; /* Platz für #imagebox */
 background-image: url("img/lagern_kuehlen_liefern.gif");
 background-repeat: no-repeat;
 background-position: bottom left;
 padding-bottom: 72px;
}

 /*	***************************************************
	Fußbereich:
	Beinhaltet die Fußleiste der Webseite.
*************************************************** */ 

#fussbereich {
  clear:both;
  background-color: white;
  background-image: url("img/footer.jpg");
  background-repeat: no-repeat;
  text-align:center;
  color: black;
  padding: 5px 5px 5px 5px;
  margin-top: 0;
}
#fussbereich a {
  font-weight: bold;
}
/* ====================================== 
  4. Sonstige Styles 
  ====================================== */
/* Kontaktformular */


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