/*
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 
==============================
*/

/* falls die MenuItems nebeneinander sein sollen, 
   muss width geaendert werden.
 */


ul#nav li a {
	font-size:12px;
	line-height:14px;
	font-weight:bold;
	color:rgb(100,100,100);
}


ul#nav {
  position:absolute;
	width:180px;
  padding:0px;
  padding-top:23px;
 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;
  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;
 	padding-left:15px;
 	width:185px;
 }
 
  ul#nav li a:hover {
 	color:rgb(50,50,50);
 }




/* Geklickte Items */
.clicked,
ul#nav .foldout li.clicked a,
ul#nav .foldout li ul.foldout li.clicked a {
  	color:rgb(50,50,50);
}

ul#nav .foldout li ul.foldout li a {

}






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

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


ul#nav ul.foldout li.active a,
ul#nav li.active a {
  color:rgb(50,50,50);
}
 
ul#nav li ul li ul li, .secondLevel, .secondLevel_hover {
  position:relative;
  width: 160px;
  top:1px;
  left:-5px;
 }
 
 


/* 1. Popup-Ebene Mausover: Hintergrundfarbe aendern bei hover */
ul#nav li ul li a:hover {
    position:relative;
   color:rgb(80,80,80);
    z-index:300;
}



/* second level popup menu: generelle Einstellungen 
----------------------------------------------------*/
ul#nav li ul li ul {
    display: none;
    position: absolute;
    top:-1px; /* den Border abzaehlen */

    padding-top:0px;
    z-index:25;
    padding:0px;
    margin:0px;
    width:125px;
    left:175px;
}

ul#nav li ul.foldout li ul li {
    background-image:url(../../img/transp.png);
    left:50px;
}


html > body ul#nav li ul li ul li {
    background-image:url(../../img/transp.png);
    margin-left:10px;
}

ul#nav li ul li ul.foldout li {
    background-image:url(../../img/transp.png);
    left:15px;
}

ul#nav li ul li a, ul#nav li ul li ul li a,
ul#nav ul.foldout li ul li a {
	color:black;
	font-size:12px;
	font-weight:normal;
}

ul#nav ul li ul li {
	text-indent:-15px;
	
}

ul#nav ul.foldout li ul.foldout li {
	text-indent:0px;
}

ul#nav ul.foldout li ul li {

}


ul#nav li ul.foldout li a,
ul#nav li ul.foldout li ul.foldout li a
{
  font-weight:bold;
	color:rgb(100, 100, 100);
}

ul#nav li ul.foldout li ul li a {
  font-weight:normal;
}

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




 
 /* second Level Items - mouseover */
ul#nav li ul li ul li a:hover
 {
    position:relative;
	color:rgb(50,50,50);
    z-index:300;
} 
 
  /* second Level Items - background */
 ul#nav li ul li ul a {
 	color:rgb(100, 100, 100);
 }









/* 
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, .mainItem_hover {
    width:150px;
    margin-top:5px;
}

ul#nav li li {
    width:160px;
    margin-top:0px;
}





li.active a, li.mainItem_active a {
}

li.active ul.foldout li a {
	color:rgb(100, 100, 100);

}

ul#nav ul.foldout li.active:hover {

}

ul#nav ul.foldout li ul li.active:hover {

}

li.active ul.foldout li.active a {

}







/* Verhalten der Main-Items beim hovern oder beim foldout: */
 ul#nav li:hover, li.mainItem_hover,
 ul#nav.foldout li
 {

    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 {
	border: none;
	font-size:11px;
}


/* 1. Submenu aufgeklappt angezeigt (kein Popup) */
ul#nav ul.foldout li {
	width:160px;
	display:block;
	background-image:none;
	padding-left:7px;
}



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


ul#nav ul.foldout li:hover,
ul#nav ul.foldout li.firstLevel_hover
 {
}







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

/* 2. Submenu aufgeklappt angezeigt (kein Popup) */
ul#nav ul.foldout li ul.foldout li a {
  padding-left:25px;
  font-size:10px;
}

ul#nav ul.foldout li ul.foldout li {
  background-image:url(../../img/transp.png);
  left:0px;
  padding-left:0px;
}





ul#nav ul.foldout li ul {
	left:125px;

}


ul#nav ul.foldout li ul li, li.secondLevel {
	background-image:url(../../img/transp.png);
	width:175px;
}

ul#nav ul.foldout li ul.foldout li {
	background-image:none;
}

ul#nav ul.foldout li ul.foldout li a {
	color:rgb(100,100,100);
	padding-left:10px;
	font-size:9px;
	font-weight:normal;
}


/* Die dritte Ebene: Vererbung auf Navigation rückgängig machen */


ul#nav ul.foldout li ul li a:hover {

}

ul#nav ul.foldout li.active a {

}

ul#nav li.clicked a {
	color:rgb(50,50,50);
}

ul#nav li.clicked li a {
	color:rgb(80,80,80);
}

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