/* =================================================
Stylesheet für die Beispielsite aus "Little Boxes"  
Stand: Dropdown-Navi, eingebunden via zentrale.css
       basiert auf floatbasierter horizontaler Navi
       mit Suchfeld rechts in der Navileiste   
Datei: navi_dropdown.css
Datum: 28. Juni 2011
Autor: Peter Müller 
================================================== */
@media screen {

/* ====================================== 
   navigation standard
   ====================================== */ 
   
#headnavi{
	float: right;
	width: 300px;
	height: 20px;
	display: inline;
	margin-bottom: 10px;
}

#headnavi li {
	float: right;
	list-style: none;
	padding: 4px 15px 0 0; 
	font-family: Verdana, Arial,Helvetica,sans-serif;
    font-size: 0.6rem;
	color: #aaaaaa;
}
	
#headnavi a:link { text-decoration:none; color:#aaaaaa; }
#headnavi a:visited { text-decoration:none; color:#aaaaaa; }
#headnavi a:hover { text-decoration:none; border-bottom: 1px dotted #aaaaaa; color: #aaaaaa; }
   
   
   
div#navibereich {
  position: relative;
  float: left;
  width: 680px;
  height: 30px;
  overflow:hidden; 
  background: #e0e0e0; 
  padding: 0 250px 0 0;
  margin: 0;
  font-family: Verdana, Arial,Helvetica,sans-serif;
  font-size: 0.75rem;
  color: #6c6c6c;
}
/* hasLayout für IE6 */
* html #navibereich { height: 1%; }

div#navibereich ul {
  padding: 0; 
  margin: 0;
  font-size: 100%;
  font-weight: normal;
}
div#navibereich li {
  float: left;
  width: auto;
  list-style-type: none;
  border-right: 1px solid #aaaaaa;
  padding: 0; 
  margin: 0;
}
div#navibereich a {
  display: block;
  color: #6c6c6c;
  padding: 7px 1em 7px 1em;
  text-decoration: none;
}
/* Schritt 3 Linkzustände gestalten */
#navibereich li.sie-sind-hier a { 
	background: #c0c0c0;
	color: black;
}
 
div#navibereich ul a:hover, 
div#navibereich ul a:focus {
  background: #c0c0c0 -30px;
  border-bottom: none;
  color: black;
  text-decoration: none;
}
div#navibereich ul a:active {
  background: #000000;
  color: white;
}


/* ====================================== 
   Suchformular gestalten
   ====================================== */
div#navibereich form {
  position: absolute; 
  top: 5px; 
  right: 20px; 
  width: 150px;  
  background: none; 
  border: 0;
  padding: 0; 
  margin: 0; 
}

#navibereich input#suchfeld {
  width: 115px; 
  font-size: 11px; 
  border: none;
  border-radius: 4px;   
  padding: 3px 25px 3px 9px; 
  margin: 0; 
} 
#navibereich input:focus { background: white; }

#navibereich input.lupe {
  position: absolute;
  right: 7px;
  top: 3px;
  padding: 0;
  margin: 0;
}

#textbereich {
  width: 368px;
  height: 320px;
  padding: 30px 8px 8px;
  margin: auto;
  color: black;
  font-size: 75%;
  line-height: 1.6em;
}

#textbereich_references {
  width: 230px;
  padding: 20px 17px 4px;
  margin: auto;
  color: black;
  font-size: 75%;
  line-height: 1.6em;
}

#gesamtbereich_examples {
  width: 796px;
  padding: 20px 0 0 0;
  color: #000000;
  font-family: Verdana, Arial,Helvetica,sans-serif;
  font-size: 0.75rem;
  line-height: 1.25rem;

  /* color: black;
  font-size: 75%;
  line-height: 1.6em; */
}

/* ==============================================
   Styles für die Dropdown Navigation ab hier  
   ============================================== */ 

/* Schritt 1 - Listenelemente in Ebene 2 clearen */ 
div#navibereich ul.level2 li { clear: both; }

/* Schritt 2 - Zweite Ebene verstecken */ 
div#navibereich ul.level2 {
  position: absolute; 
  left: -32768px; 
  top: -32768px; 
  width: 0; 
  height: 0;  
}

/* Schritt 3 - Zweite Ebene wieder einblenden */
div#navibereich li:hover ul.level2,
div#navibereich li.sfhover ul.level2 { 
  left: auto; 
  top: auto; 
  display: block; 
  width: auto; 
  height: auto; 
  border-bottom: 2px solid #000000;   
}

/* Schritt 4 - Links in der zweiten Ebene gestalten */ 
div#navibereich ul.level2 a { 
  background: #c0c0c0;
  color: black; 
  min-width: 6em;   
} 
* html div#navibereich ul.level2 a { width: 6em; }

/* Schritt 5: Moment des Klicks in der zweite Ebene */
div#navibereich ul.level2 a:active { 
  background: #000000;
  color: white; 
}

/* Schritt 6: Hover-Effekt für die zweite Ebene */
div#navibereich ul.level2 a:hover { 
  background: #c0c0c0; 
  color: black; 
}


} /* Ende @media - nicht löschen! */  
/* ======================================= 
   E N D E   D E S   S T Y L E S H E E T S 
   ======================================= */