/*
NAVIGATION CSS
Created by:
Danny[AT]rufwerbung.ch
Luzius[AT]rufwerbung.ch
----------------------------------------------------
based on an idea by Eric Meyer:
www.meyerweb.com

-----------------------------------------------------


// 1. generelle Einstellungen 
==============================
*/


body {
	background-color:#FFFFFF;
}



/* falls die MenuItems nebeneinander sein sollen, 
   muss width geaendert werden.
 */
ul#nav {
  position:absolute;
	width:180px;
  padding:0px;
 	margin:0px;
}



/* 2. Einstellungen fuer die "Popup"- Menus 
==========================================
*/



/* generellle Einstellungen fuer Popups
------------------------------------------ */
ul#nav ul {
  position:relative;
  padding:0px;
  margin:0px;
  list-style-type:none;
  background-color:none;
  z-index:50;
}



ul#nav li {
    position:relative;
    padding:0px;
    margin:0px;
    left:0px;
    display:block;
   
    /* 
    Dies ist ein Zugestaendnis an den IE,
    der nun darauf verzichtet, Abstaende unter den li-Tags
    einzufuegen. Display: inline waere ebenfalls gegangen, dann streikt
    aber  FiFo 
    */
    float:left;
    margin-top:0px;
}


 /* ganzen Raum fuer a Tag nutzen (display-block) */
 ul#nav li a {
 	display:block;
 	padding-bottom:2px;
 	margin-top:0px;
 	/*text-indent:15px;*/
 	padding-left:15px;
 	width:165px;
 	
 }
 
 ul#nav li li a {
 	padding-left:0px;
 	text-indent:15px;
 }
 

ul#nav li a:hover {
	background-color:#d4dce2;
}



/* Geklickte Items */
ul#nav .foldout li.clicked a,
ul#nav .foldout li ul.foldout li.clicked a {
  	color:#0c68e3;
}






/* Popups
(auch fuer Popups in der foldout Klasse):
 */

/*
 ul#nav li ul * a,
 ul#nav li ul.foldout li ul li a {
  	
  	border-left:0px solid #FFFFFF;
  	border-right:0px solid #FFFFFF;
  	padding-top:0px;
  	padding-bottom:3px;
  	width:auto;
	  font-style:normal;
	  font-size:18px;
}
*/



ul#nav li.active ul.foldout li.active ul.foldout li a {
  text-indent:30px;
}



/* first level popupmenu-Item: Einstellungen 
-------------------------------------------------------*/
ul#nav li ul {
    display:none;
    position:absolute;
    top:-1px; /* ie Explorer needs that */
    left:180px;
    width:180px; /* gleiche Breite wie li-Element + border*/
    padding-top:0px;
    z-index:15;
    background-color:#a7afb6;
    padding:0px;
    margin:0px;
    z-index:300;
    padding-bottom:1px;
}
  
  
  
 /* Erste Popup-Ebene Items */
  ul#nav li ul li, .firstLevel {
  position:relative;
  width: 180px;
  padding-top:1px;
  background-color:#a7afb6;
  top:0px;
  left:0px;
 }
 
ul#nav li ul li ul li, .secondLevel {
  position:relative;
  width: 180px;

  background-color:#a7afb6;
  top:0px;
  left:0px;
 }

/* 1. Popup-Ebene Mausover: Hintergrundfarbe aendern bei hover */
ul#nav li ul li:hover {
    position:relative;
    background-color:#d4dce2;
    z-index:300;
}



/* second level popup menu: generelle Einstellungen 
----------------------------------------------------*/
ul#nav li ul li ul{
    display: none;
    position: absolute;
    top:-1px; /* den Border abzaehlen */
    left:180px; 
    padding-top:0px;
    z-index:25;
    padding:0px;
    margin:0px;
    
  }
 
 

/* second Level Items - mouseover */
ul#nav li ul li ul li:hover
 {
    position:relative;
    background-color:white;
    z-index:300;
} 





/* 
3.) MENUEINSTELLUNEN (keine Popups)
=====================================================

Falls die Foldout- Klasse gesetzt ist, sollen die Menus sichtbar sein.
*/


/* Mainitems
-------------*/
/* mainItem: reset background-color-change */
 ul#nav li, .mainItem {
    background-color:transparent;
    width:180px;
    margin-top:5px;
    
}

ul#nav li li {
    background-color:transparent;
    width:180px;
    margin-top:0px;
    
}




li.active a, li.mainItem_active a {
  background-color:#d4dce2;
}

li.active ul.foldout li a {
  color:black;
  background-color:white;
}

ul#nav ul.foldout li.active:hover {
  background-color:white;
}

li.active ul.foldout li.active a {
  background-color:white;
}







/* Verhalten der Main-Items beim hovern oder beim foldout: */
 ul#nav li:hover, li.mainItem_hover,
 ul#nav.foldout li
 {
    background-color:#d4dce2;
    z-Index:80000;   
}





/* Generelles: Block und Border bei foldout  Klasse in Links wegmachen,
	und Text kursiv anzeigen:
*/

ul#nav ul.foldout {
	display:block;
	position:relative;
	left:0px;
}

ul#nav ul.foldout a {
	font-style:italic;
	border: none;
	font-size:11px;
}


/* 1. Submenu aufgeklappt angezeigt (kein Popup) */
ul#nav ul.foldout li {
	background-color:white;
	width:180px;
	display:block;
	
}

ul#nav ul.foldout li a {
	
	/*padding-left:10px;*/
}

ul#nav ul.foldout li ul.foldout li a {
  /*padding-left:15px;*/
  
}

ul#nav ul.foldout li:hover,
ul#nav ul.foldout li.firstLevel_hover
 {
	background-color:#d4dce2;
}

ul#nav li.clicked {
	background-color:#d4dce2;
}







/* 2. Submenu aufgeklappt angezeigt (kein Popup) */
ul#nav ul.foldout li ul.foldout {
	left:0px;
}


ul#nav ul.foldout li ul {
	left:180px;
}

/* Die dritte Ebene: Popup Menu */
ul#nav ul.foldout li ul li {
	background-color:darkgray;
	
}


/* Die dritte Ebene: Vererbung auf Navigation rückgängig machen */
ul#nav ul.foldout li ul.foldout li a {
  font-style:italic;
  /* padding-left:15px; */
}

ul#nav ul.foldout li ul li a{
  background-color:darkgray;
}

/* Die dritte Ebene: Vererbung auf Navigation rückgängig machen */
ul#nav ul.foldout li ul.foldout li {
  background-color:white;
}

ul#nav ul.foldout li ul.foldout li a {
  background-color:white;
  font-size:10px;
  
}

ul#nav ul.foldout li ul li a:hover {
  background-color:#d4dce2;
  color:#0c68e3;
  color:black;
}

ul#nav ul.foldout li.active a {
  	color:black;
  	text-indent:30px;
}


// Die Sitemap:
ul#sitemap {
	margin-left:15px;
}



/* ENGINE:
===============================================================
   Herzstueck der CSS Menus:
   Bewirkt das Ausklappen der Menus in Mozilla based Browsers.
   IE: Einbinden von nav.js bewirkt das gleiche.
*/

ul#nav li:hover>ul {
    display:block;
}