/* menustyle DSP */



.sf-menu {
	list-style:none;/*No bullets*/ 
	text-align:left;/*Allows horizontal centering of the list items*/ 
	background:none;/*Visual*/ 
	font-size: 13px;
	height: 58px;
	text-indent: 0;
}

.sf-menu ul {
	display: none;
}

.sf-menu li {
	display:inline-block;/*Lay it out inline, but retain block qualities. I can still center it via text-align*/ 
	position:relative;/*New stacking context for the submenu which is AP'd*/
	height: 58px;
	margin: 0 6px;
}

.sf-menu li a {
	text-decoration:none;/*Remove the underline*/ 
	color: #fff;/*Color*/
	padding:0;/*Visual*/
	background:none;/*Visual*/ 
	font-weight: normal;
	height: 58px;
	line-height: 65px;
	font-family: Matusik, Arial, "Lucida Sans", "DejaVu Sans Light", sans-serif;
	padding: 0 10px;
}

.sf-menu li.active {
	background: url(../images/mouseover.png) 0 5px repeat-x;
}

.sf-menu li.active a {
	background: url(../images/dreieck.png) 10px 50px no-repeat;
}

.sf-menu li:hover {
	background: url(../images/mouseover.png) 0 5px repeat-x;
}

.sf-menu li:hover a {
	color: #fff;/*Just show hover state.*/
	background: url(../images/dreieck.png) 10px 50px no-repeat;
}

.sf-menu li li { 
	float:none;/*Unfloat it so it doesnt go in a line*/ 
	list-style:none;/*Remove bullets*/ 
	width: 100%;
	height: 40px;
	border:none;/*Border to seperate the items*/ 
	text-indent: 0;
	padding: 0;
	margin: 0;
	font-family: Matusik, Arial, "Lucida Sans", "DejaVu Sans Light", sans-serif;
	border-bottom: 1px dashed #919191;
}

.sf-menu li li.last {
	border-bottom: 0;
}

.sf-menu li li a {
	background: #fff;/*Different background to distinguish it is a submenu. Visual*/  
	text-transform: none;
	line-height:40px;/*Vertical text centering*/ 
	height:40px;/*Vertical text centering*/ 
	color: #000 !important;
	display: block;
	font-weight: normal;
	letter-spacing: normal;
	margin: 0;
	padding: 0;
	text-indent: 10px;
	font-family: Matusik, Arial, "Lucida Sans", "DejaVu Sans Light", sans-serif;
	font-size: 12px;
}

.sf-menu li li a:hover {
	background: #CCCCCC;/*Just show hover state.*/
}

.sf-menu li ul {
	position:absolute;/*Allow for the dropdown to work and work with it easily*/ 
	top:100% !important;/*Move it vertically 100% of the <li>. Stable method*/ 
	left:0;/*Set a left coordinate instead of relying on auto positioning.*/ 
	background-color: #fff;
	text-indent: 0;
	margin:0;
	padding: 0;
	text-indent: 0;
	width: 200px;
}

.sf-menu li.ueber-uns ul {
	width: 100px;
}

.sf-menu li.behandlung ul {
	width: 160px;
}

.sf-menu li.kontakt ul {
	width: 115px;
}

.sf-menu li:hover {
	visibility:visible;/*Fix an IE7 sticky bug*/ 
}

.sf-menu li:hover ul, #sf-menu li.over ul { 
	margin-left:0;/*Set the left margin to 0 on hover, and the JS hover.*/ 
}
