/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)htmlis 
available at http://www.cssplay.co.uk/menus/simple_vertical.html 
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. 
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.

08.11.07 KH (flip-flop) Enhanced: Start[ID] {NAV_HORIZ_DD:ID}
http://www.phpwcms.de/forum/viewtopic.php?p=94688#94688
(http://www.phpwcms.de/forum/viewtopic.php?p=89743#89743)
=================================================================== */



/* margin hinzugefuegt - ausschlie§lich fuer diese demo - und ein "relative position" mit einem hohen z-index Wert um sicherzustellen dass das Menue ueber jedem nachfolgenden Element aufklappt. */

#menu_container {
   margin: 0;
   position: relative; 
   width: 900px;
   height: 22px;      /* ORG 20px */
   z-index: 1000;
}



/* margin und padding auf 0, AufzŠhlungszeichen der unsortierten Liste unterdruecken */
#pmenu, #pmenu ul {
   padding: 0;
   margin: 0;
   list-style-type: none;
}



/* Einstellen der Groeszen, Farben und Rahmen fuer die Links */
#pmenu a, #pmenu a:visited {
   /* min-height: 22px; */
   padding-left: 1px;
   display: block;
   width: 102px;
   font-size: 11px;
   color: #21306b;      /* ORG 25px */
   line-height: 14px; /* ORG 24px */
   text-decoration: none;
   padding-top: 4px;
   padding-left: 4px;
   padding-bottom: 4px;
   border: 1px solid #fff;
   border-width: 1px 0 1px 1px;
   
}



/* Einstellen der Rahmen fuer die Unterebenen  */
#pmenu li ul li a, #pmenu li ul li a:visited {
   border-width: 0 1px 1px 1px;
   
}
#pmenu li a.horiz_enclose, #pmenu li a.horiz_enclose:visited {
   border-width: 1px;
}



/* Einstellen der Listeneinzelheiten */
#pmenu li {
	float: left;
	list-style-type: none;
	background:transparent url(/_pix/menu-bgr.png); 
	margin-right: 1px;

}



/* Fuer Safari */
#pmenu li:hover {
	position: relative;
}



/* Festlegen der Farbe fuer hover li */
#pmenu li:hover > a {
	/* background: #D1D5DF;  ORG #dfd7ca; */
	color: #961718;      /* ORG #c00; */
}



/* Einstellen der Unterebenenlisten mit einer absoluten Positionierung fuer die FlyOuts und dem "Ueberfahren-Abstand" 
   Das transparente gif (leer.gif) ist fuer den IE gedacht */
#pmenu li ul {
	display: none;
}



/* Fuer Safari wird die Unterebenenliste sichtbar bei einem Ueberfahren (hover) */
#pmenu li:hover > ul {
   display: block;
   position: absolute;
   top: -7px;         /* ORG -11px */
   left: 80px;
   padding: 9px 30px 30px 30px; /* ORG padding: 10px */
   background:transparent url(../../img/article/leer.gif);
   width: 102px;
   margin-right: 2px;
}




/* Positioniere die erste Unterebene nach dem Topebenenlink */
#pmenu > li:hover > ul {
   left: -30px;
   top: 16px; 
}


/* Tabelle neu einstellen */
#pmenu table {
   position: absolute;
   border-collapse: collapse;
   top: 0;
   left: 0;
   z-index: 1000;
   font-size: 1em;
}

/* Fuer den IE5 und IE6 gebe dem hover-Link eine relative Position und wechsele die Hinter- und Vordergrundfarbe. Das ist notwendig damit der IE angestoszen wird die Unterebenen auszugeben */
* html #pmenu li a:hover {
   position: relative;
  /* background: #D1D5DF; /* ORG #dfd7ca; */
   color: #961718;
}

/* Fuer die Aktivierung der ersten Ebene, wenn im Menue geblŠttert wird */
#pmenu li a:active, #pmenu li a:focus {
   /* background: #dfd7ca; */
   color: #961718;      /* ORG #c00; */
}

/* Einstellen der Symbole/Pfeile fŸr die Unterebenenanzeige */
#pmenu li.fly_ul {
 /*  background: #7484ad url(../../img/symbols/klapp_zu.gif) no-repeat 107px center;
   background: #7484ad url(../../img/article/navi/fly.gif) no-repeat right center;
*/
}

#pmenu li.drop_ul {
 /*  background: #7484ad url(../../img/symbols/klapp_auf.gif) no-repeat 105px center;
    background: #7484ad url(../../img/article/navi/drop.gif) no-repeat right center;
*/
}

/* KH: Ausgabe des aktiven Pfads */
#pmenu li.act_path {
/*   background:#4161AF url(../../img/symbols/klapp_auf.gif) no-repeat 105px center;
   background:#cccccc url(../../img/article/navi/drop.gif) no-repeat right center;
   */
}


/* Dies ist fuer den IE5.5 und IE6 notwendig um die Unterebenen anzuzeigen */
/* Wechselt die Unterebenen von display:none; nach visibility:hidden; */

* html #pmenu li ul {
   visibility: hidden;
   display: block;
   position: absolute;
   top: -11px; 
   left: 80px;
   padding: 10px 30px 30px 30px; 
   background: transparent url(../../img/article/leer.gif);
}
/* keep the third level+ hidden when you hover on first level link */
#pmenu li a:hover ul ul {
   display: block;
   visibility: hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
#pmenu li a:hover ul a:hover ul ul {
   visibility: hidden;
}
/* keep the fifth level hidden when you hover on third level link */
#pmenu li a:hover ul a:hover ul a:hover ul ul {
   visibility: hidden;
}
/* keep the sixth level hidden when you hover on fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul {
   visibility: hidden;
}
/* make the second level visible when hover on first level link and position it */
#pmenu li a:hover ul {
   visibility: visible;
   left: -30px;       /*          (IE5 ONLY) */
   top: 13px;         /* ORG 14px (IE5 ONLY) */
   lef\t: -31px;      /*          (IE6 ONLY) */
   to\p: 14px;        /* ORG 15px (IE6 ONLY) */
}
/* make the third level visible when you hover over second level link and position it and all further levels */
#pmenu li a:hover ul a:hover ul {
   visibility: visible;
   top: -11px;        /* ORG -11px (IE6 ONLY) */
   left: 80px;
}
/* make the fourth level visible when you hover over third level link */
#pmenu li a:hover ul a:hover ul a:hover ul {
   visibility: visible;
}
/* make the fifth level visible when you hover over fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul {
   visibility: visible;
}
/* make the sixth level visible when you hover over fifth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul {
   visibility: visible;
}
/* If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like */