@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);

#menu ul
{
	display:				none;
}

ul.menu, ul.menu ul 
{
    list-style-type: 		none;
	margin:					0px;
	padding:				0px;
	z-index:				100;
}

ul.menu a 
{
    display: 				block;
	height:					50px;
	line-height:			50px;
	text-decoration: 		none;
	padding-left:			20px;
	padding-right:			20px;
	font-family: 			'Roboto Condensed', sans-serif;
	font-weight:			400;
	font-size:				17px;
	color:					#ececec;
	
}

ul.menu a:hover
{
	background-color:		#ffffff;
	color:					#cc0000;
}

ul.menu a.active {
	background-color:		#ffffff;
	color:					#cc0000;
}

ul.menu li 
{
    padding: 				0;
    margin: 				0;
    float: 					left;
    height: 				50px;
	line-height: 			50px;
}

#menu li:hover ul
{
	display:				block;
}

/* Für Unterpunkte keine Float-Eigenschaft */
ul.menu ul li 
{
    float:					none;
	border-right:			none;
	color:					#000000;
}

/* Links auf Unterpunkten sollen die Hintergrundfarbe ändern */
ul.menu ul li.hover, ul.menu ul li:hover 
{
    background-color: 		#000000;
	color:					#ffffff;
}

/* Zweite Ebene */
ul.menu ul {
    margin: 0px 0 0 -1px;
    padding: 0;
    position: absolute;
    background-color: rgba(204,0,0,0.6);
    color: #ececec;
    display: none;
    min-width: 190px;
    height: auto;
    border-bottom: 2px solid #fff;
    border-top: 2px solid #fff;
}
ul.menu ul li {
    text-align: left;
}

ul.menu ul li, ul.menu ul li a {
    height: 32px;
    line-height: 32px;
    color: #ececec;
    font-size: 15px;
    border-top: 1px solid rgba(256,256,256,0.5);
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
}

   /* Zweite Ebene anzeigen */
ul.menu li.hover ul, ul.menu li:hover ul  
{
    display: 				block;
}

/* Dritte Ebene */
ul.menu li.hover ul ul, ul.menu li:hover ul ul 
{
    display: 				none;
    margin-left: 			300px; /* Breite eines Listenelements - Überlagerung */
    margin-top: 			-40px; /* Höhe eines Listenelements */
}

/* Dritte Ebene anzeigen */
ul.menu li.hover ul li.hover ul, ul.menu li:hover ul li:hover ul 
{
    display: 				block;
}


/* Vierte Ebene */
ul.menu li.hover ul li.hover ul ul, ul.menu li:hover ul li:hover ul ul {
    display: 				none;
}

   /* Vierte Ebene anzeigen */
ul.menu li.hover ul li.hover ul li.hover ul , ul.menu li:hover ul li:hover ul li:hover ul {
    display: 				block;
}
