/* @authors: 
Danny@rufwerbung.ch
Luzius@rufwerbung.ch
www.rufwerbung.ch

based on an idea by Eric Meyer:
www.meyerweb.com

-----------------------------------------------------
Bugtracking-Section:
-----------------------------------------------------
@state: Template funktioniert auf Mac
Mozilla: funzt(inkl. first-child)
Firefox: funzt  (inkl. first-child)
Opera: funzt (box model differs from Moz./FiFo, but useable) (with
first-child)
Safari: funzt (first child)
IE: anderes Template verwendet->funktioniert. (inkl. first-child!)
-------------------------------------------------------
PC:
Firefox: Border passt nicht (1 px bei Subnavs verschoben)
IE: Bug mit Abständen zwischen den Elementen. (werden dargestellt).
float-left eingefügt bei li tag.
Funktioniert nun auf IE6 (frühere Versionen???)
TODO: first-child in script implementieren.
Lösung: width im a Tag anstatt im li Tag.
Opera bleibt bedienbar.
----------------------------------------------------
 */



/* general */

ul {
  position:relative;
  padding: 0px;
  margin: 0px;
  list-style-type:none;
  background-color:transparent;
  margin-left:0px;
  z-index:50;
}

li {
    position:relative;
    padding:0px;
    margin:0px;
    left:0px;
    display:block;
    
    /* Dies ist ein Zugeständnis an den IE,
    der nun darauf verzichtet, Abstände unter den li-Tags
    einzufügen. Display: inline wäre ebenfalls gegangen, dann streikt
    aber  FiFo */
    float:left;
}
 
ul#nav {
	width:100%;
	
}

 /* use whole space for a-tag */
 ul#nav * a {
 display:block;
 padding-left:0px;
 }


/* set border for submenus */
 ul#nav li ul li a {
  height:auto;
  border-bottom:1px solid #FFFFFF;
  border-left:1px solid #FFFFFF;
  border-right:0px solid #164088;
  padding-top:0px;
  
  
  width:auto;
}

 ul#nav li ul li ul li a {
border-left:5px solid white;
border-right:1px solid #FFFFFF;

}
 
 
 /* first sub level Items */
  ul#nav li ul li, .firstLevel {
  position:relative;
  width: 108px; /* margin + padding + border + width=90 */
  background-color:#999999;
  z-index:5;
  height:auto;
  left:0px;
 
 }


/* first level: general settings (x/y, width etc) */
ul#nav li ul {
    display: none;
    position:absolute;
    top:1.4em; /* ie Explorer needs that */
    left:0em;
    width:108px; /* gleiche Breite wie li-Element + border*/
    padding-top:0px;
    z-index:15;
    background-color:transparent;
    left:-1px;
    padding:0px;
    margin:0px;
  }
  

/* second level: general settings */
ul#nav li ul li ul {
    display: none;
    position: absolute;
    top:0px; /* den Border abzählen */
    left:108px; 
    padding-top:0px;
    z-index:25;
    padding:0px;
    margin:0px;
  }
 
  
 ul#nav li ul li ul li, .secondLevel {
    position:relative;
    background-color:#999999;
    border-left:0px solid #FFFFFF;
    width:175px;
    bottom:0px;
    z-index:35;
 }


/* mainItem: reset background-color-change,
and set floating to left */  
 ul#nav li.mainItem {
    text-align:center;
    background-color:none; 
    width:104px;   
    float:left;
    z-Index:1;
    border:1px solid transparent;
    border-left:1px solid #FFFFFF;
    margin:1px;
}




ul#nav li ul li ul li:first-child ,.firstChild {
	border-top: 0px solid transparent;
}


/* separarator-classes */

ul#nav li.separator {
    background-color:transparent;
    background-image:url("img/1pix_transp.gif");
    height:5px;
    line-height:5px;
    font-size:5px;
}



/* hover-classes */
 ul#nav li.mainItem:hover, li.mainItem_hover {
    background-color:none; 
    float:left;
    width:104px;
    z-index:500;
    margin:1px;
    
    text-align:center;    
    float:left;
    border:1px solid transparent;
    border-left:1px solid #FFFFFF;
    

}


/* display children ul from li-tag
doesnt work in ie, use javascript instead.
 */

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



ul#nav li.separator:hover {
    background-color:transparent;
    background-image:url("img/1pix_transp.gif");
    height:5px;
    line-height:5px;
    font-size:5px;
}


/* set background color 1stLevel hover */
ul#nav li ul li:hover, ul#nav li ul li.firstLevel_hover {
	width:108px;
	position:relative;
    
 }


/* set background color 2ndLevel hover */
ul#nav li ul li ul li:hover, ul#nav li ul li.secondLevel_hover {
    position:relative;
    width:175px;
    z-index:300;
 }