/* CSS Document */

#navi {
	width: 200px;
}

#navi ul { 
	font-size: 12px;
	font-family: "Courier New", Courier, monospace;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 22px;
	word-spacing: -3px;
}

/* --- 1. ebene --- */

ul.level1 {
	list-style: none;
	margin: 0;
	padding: 0 0 0 20px;
}

ul.level1 li a {
	color: #fff;
}

ul.level1 li a:hover {
	text-decoration: none;
}

ul.level1 li {
	position: relative;
	padding: 0 0 0 10px;
	background: url("../images/dymo02.gif") no-repeat;
}

ul.level1 li.firstitem {
	background: url("../images/dymo01.gif") no-repeat;
}

ul.level1 li.lastitem {
	background: url("../images/dymo03.gif") no-repeat;
}

/* --- mouseover funktion --- */

ul.level1 ul {
	position: absolute;
	top: 15px;
	left: 55px;
	z-index: 100;
	display: none;
	width: 200px;
}

ul.level1 li:hover ul {
	display: block;
	z-index: 101;
	cursor: pointer;
}

ul.level1 li.over ul {
	display: block;
	z-index: 102;
	cursor: pointer;
}

/* --- mouseover box --- */

ul.level2 {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-image: none;
}

ul.level2 li {
	line-height: 15px;
	background: #fc0;
	padding: 3px 10px;
}

ul.level2 li a {
	color: #c00;
	text-transform: none;
}

ul.level2 li a:hover {
	color: #000;
	text-decoration: underline;
}

ul.level2 li.firstitem {
	background: url("../images/mouseover_bg_first.gif") top no-repeat;
}

ul.level2 li.lastitem {
	background: url("../images/mouseover_bg_last.gif") bottom no-repeat;
}

/* --- 2. ebene --- */

ul.level1 li.active a {
	color: #c00;
}

ul.level1 li.active {
	background: url("../images/dymo02_active.gif") no-repeat;
}

ul.level1 li.firstitem.active {
	background: url("../images/dymo01_active.gif") no-repeat;
}

ul.level1 li.lastitem.active {
	background: url("../images/dymo03_active.gif") no-repeat;
}

ul.level1 li.active ul {
	position: relative;
	top: 0;
	left: -10px;
	z-index: 100;
	width: 180px;
	display: block;
	margin-bottom: 3px;
}

li.active ul.level2 li {
	padding: 3px 10px;
	background: #f90;
}

li.active ul.level2 li a:hover {
	color: #000;
}

li.active ul.level2 li.firstitem {
	background: url("../images/ebene2_bg_first.gif") top no-repeat;
}

li.active ul.level2 li.lastitem {
	background: url("../images/ebene2_bg_last.gif") bottom no-repeat;
}

li.active ul.level2 li.active a {
	color: #fff;
	text-transform: uppercase;
}

/* --- 3. ebene --- */



/* --- nobg --- */

ul.level1 li ul.level2 li a,
ul.level1 li.firstitem ul.level2 li a,
ul.level1 li.lastitem ul.level2 li a {
	background: none;
}