/* ######################################################################################################
** # "Yet Another Multicolum Layout" (c) by Dirk Jesse (http://www.yaml.de) #############################
** ######################################################################################################
**
**  YAML Version: 2.5.2
**  Dateiversion: 22.10.06
**  Datei       : nav_vlist.css
**  Funktion    : Vertikale Navigationsliste "Sliding Doors"
**
*/

@media all
{
/* ######################################################################################################
** ### Vertikale Listennavigation #######################################################################
** ######################################################################################################
*/

	#submenu {
		width: 100%;
		overflow: hidden;
		margin: 4.2em 0 0 0;
		list-style-type: none;
                 background-color: transparent;
                 /* border-top: 1px #c7f9f4 solid; */
                 /* border-left: 1px #c7f9f4 solid; */
		/* border-bottom: 1px #bae8e4 solid; */
                 /* border-right: 1px #bae8e4 solid; */
}

/* wegen besserer Lesbarkeit NavLinks Schrift auf Verdana */
	#submenu a { display:block; background-color: transparent; font-family: Verdana; text-decoration: none;}
	#submenu li { background-color: transparent; float:left; width: 100%; margin:0; padding: 0 }

	#submenu li span {
		display:block;
		width: 90%;
		padding: 3px 0px 3px 10%;
		background-color:#f7f2c9;
		color: #282a9c;
		font-weight: bold;
}

	#submenu li a {
                 width: 90%;
                 margin-bottom: 1px;
                 margin-left: 10%;
		padding: 1px 0px 1px 10%;
 		color: #ad4241;
                 background-color: transparent;
                 background: url(../images/submenu_hg.gif) 0% 0% repeat-y;
                 border-top: 1px #bae8e4 solid;
                 border-bottom: 1px #bae8e4 solid;
}

	#submenu li a:hover { color: #2da99d; }

	#submenu li ul { list-style-type: none; margin:0; padding: 0; }
	#submenu li ul li { float:left; width: 100%; margin:0; padding:0; }
	#submenu li ul li a {
		width: 80%;
		padding: 3px 0px 3px 20%;
		background-color:#f8f8f8;
		color: #666;
		border-bottom: 1px #ddd solid;
}

	#submenu li ul li a:hover { color: #2da99d; }

	#submenu li#title {
		width: 90%;
		padding: 3px 0px 3px 10%;
		font-weight: bold;
		color: #444;
		background-color: #fff;
		border-bottom: 4px #888 solid;
}

	#submenu li#active {
		width: 90%;
                 margin-bottom: 1px;
                 margin-left: 10%;
		padding: 1px 0px 1px 10%;
		font-weight: normal;
                 font-family: Verdana;
		color: #2d49a0;
                 border-bottom: 1px #d7c5b8 solid;
                 border-top: 1px #d7c5b8 solid;
                 background-color: transparent;
		background: url(../images/navbutton_active_hg.gif) 0% 0% repeat-y;
}

	#submenu li ul li#active {
		width: 80%;
		padding: 3px 0px 3px 20%;
		font-weight: bold;
		color: #fff;
		background-color:#aab;
		border-bottom: 1px #fff solid;
}

/* ######################################################################################################
** ### Vertikale Listennavigation nach CSS Float, Beispiel 4 ############################################
** ######################################################################################################
*/

#nav {
	background: url(../images/onepx_line.gif) 80% 0% repeat-y;
         position: absolute;
         width: 90%;
         margin: 2px 0 0 0;
         padding: 15px 0;
}

#nav ul {
	list-style: none;
         margin: 0;
         padding: 0;
}

#nav li {
	margin: 0;
         padding: 0;
}


/* ######################################################################################################
** ### Wieder macht IE Probleme. Der reagiert nämlich nur, wenn die Maus direkt über den Linktext fährt.#
** ### Normalerweise müsste aber die komplette Linkfläche einschließlich padding maussensitiv sein. Vor #
** ### allem für ein Menü wie unseres hier ist das ziemlich essentiell.##################################
** ### Man kann das Problem beheben, indem man den Links eine Angabe für width oder height zuweist. Mit #
** ### width gibt es in anderen Browsern z.T. Darstellungsunterschiede, daher nehmen wir hier height ####
** ### und geben der Eigenschaft den Wert 1em, also die einfache Schriftgröße. Dieser Wert funktioniert #
** ### gut im IE. Damit nun aber die anderen Browser, die die Webstandards besser beherrschen, die Höhe #
** ### der Linkelemente korrekt berechnen können (line-height + padding + border), bieten wir ihnen #####
** ### eine Regel an, mit der wir im Effekt die feste Höhenangabe wieder aufheben. ######################
** ### html>body #nav a:link, #nav a:visited { height:auto;} ############################################
** ### Die Angabe html>body (die der IE nicht versteht) dient nur dazu, diese Regel für den IE ##########
** ### „unsichtbar“ zu machen (mit dem Höhenwert auto funktioniert nämlich unser Trick nicht). ##########
** ### Es handelt sich um einen sog. child selector. ####################################################
** ######################################################################################################
*/

#nav a:link, #nav a:visited {
	display: block;
         height: 1em; /* nur IE */
         margin: 2px 0;
         padding: 10px 10px 10px 20px;
         font-size: 12px;
         color: #fff;
         line-height: 16px;
         background: #945b23 url(../images/navbutton_hg.gif) bottom right no-repeat;}
}

html>body #nav a:link, #nav a:visited {
	height: auto;
}
/** ######################################################################################################
*/

#nav a:hover {
	background: #a8a8a8 url(../images/navbutton_hover.gif) bottom right no-repeat;}
}

#nav li#active {
	/* width: 90%; */
         margin-bottom: 1px;
	padding: 10px 10px 10px 20px;
         font-size: 12px;
         color: #fff;
         line-height: 16px;
	background: #ffb400; /* url(../images/navbutton_active_hg.gif) bottom left no-repeat; */
}

} /* Ende Media All */