@charset "utf-8";

nav ul, nav ol {
    list-style: none;
    list-style-image: none;
	padding:0;
	margin:0;
}

/* Box sizing. Awesome thing. Read about it here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp */
* {	
	box-sizing:border-box;
	-moz-box-sizing:border-box;
}


/* Navigation */

#topnav {
	padding-top:40px;
}

.menu-mobile {
	display:block;
	padding:10px;
	margin:20px 0 0;
	background:#8f1e76 url(../../images/icons/navigation.png) no-repeat 98%;
	color:#fff;
	cursor:pointer;
	text-transform:uppercase;
	font-size:20px;
}

.menu-mobile.umschalten {
	background:#8f1e76 url(../../images/icons/navigation.png) no-repeat 98%;
}

.navigation {
	display:none;
}	

.navigation.umschalten {
	display:block;
	position:relative;
	z-index:10;
}

.navigation {
	clear:both;
	margin-bottom:60px;
}

.navigation li a {
	display:block;
	padding:10px;
	text-decoration:none;
	background: rgba(204, 169, 199);
	background-color: rgba(204, 169, 199, 0.95);
}

.navigation li a:hover {
	color:#fff;
}

.navigation li li a {
	background: rgba(204, 169, 199);
	background-color: rgba(204, 169, 199, 0.95);
	padding-left:40px;
}

.navigation li li li a {
	background:#efefef;
	padding-left:80px;
}

@media only screen and (min-width: 501px) 
{
	#topnav {
		padding-top:inherit;
	}
	
	.menu-mobile {
		background:#8f1e76 url(../../images/icons/navigation.png) no-repeat 95%;
		margin-top:0px; /*this depends on the height of the logo*/
		float:right;
		width:105px;
	}
	
	.menu-mobile.umschalten {
		background:#8f1e76 url(../../images/icons/navigation.png) no-repeat 95%;
	}
} 

@media only screen and (min-width: 860px) 
{
	/*** MAIN MENU - ESSENTIAL STYLES ***/
	.menu-mobile { display:none; }
	
	#menu-desktop { display:block; }
	
	.navigation, .navigation * {
		margin:0;
		margin-top:-12px;
		padding:0;
		list-style:none;
	}
	.navigation ul {
		position:absolute;
		display:none;
		width:12em; /* left offset of submenus need to match (see below) */
	}
	
	.navigation ul li {
		width:100%;
	}
	
	.navigation li:hover {
		visibility:inherit; /* fixes IE7 'sticky bug' */
	}
	
	.navigation li {
		float:left;
		position:relative;
		margin-left:1px;
		background:url(../images/navi_strich.png) right no-repeat;
	}
	
	.navigation li:last-child {
		background:inherit;
	}
	
	.navigation li li {
		margin-left:0px;
		background:inherit;
		height:56px;
	}
	
	.navigation a {
		display:block;
		position:relative;
	}
	
	.navigation li:hover ul,
	.navigation li.sfHover ul {
		display:block;
		left:2px;
		top:68px; /* match top ul list item height */
		z-index:99;
		width:135px;
	}
	
	.navigation li:hover:last-child ul {
		left:-13px;
	}
	
	ul.navigation li:hover li ul,
	ul.navigation li.sfHover li ul {
		top:-999em;
	}
	
	ul.navigation li li:hover ul,
	ul.navigation li li.sfHover ul {
		left:12em; /* match ul width */
		top:0;
	}
	
	ul.navigation li li:hover li ul,
	ul.navigation li li.sfHover li ul {
		top:-999em;
	}
	
	ul.navigation li li li:hover ul,
	ul.navigation li li li.sfHover ul {
		left:10em; /* match ul width */
		top:0;
	}
	
	/*** DEMO1 SKIN ***/
	#topnav, .navigation {
		float:right;
		margin: .35em 0 0 0;
	}
	
	.navigation a {
		text-decoration:none;
	}
	
	.navigation li a {
		margin:0; 
		padding:10px 25px 10px;
		height:45px;
		font-size:25px;
		font-weight:bold;
		line-height:25px;
		background:inherit;
		
		-moz-transition: 0.3s ease-in-out;
		-webkit-transition: 0.3s ease-in-out;
		-o-transition: 0.3s ease-in-out;
		-ms-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}
	
	.navigation a, .navigation a:visited { /* visited pseudo selector so IE6 applies text colour*/
		color:#8f1e76;	
	}
	
	.navigation li li a {
		background:#8f1e76;
		color:#fff;
		padding:10px 5px 10px 5px;
		font-size:16px;
		font-weight:inherit;
		text-align:center;
	}
	
	.navigation li li:first-child a {
		-webkit-border-top-left-radius: 12px;
		-webkit-border-top-right-radius: 12px;
		-moz-border-radius-topleft: 12px;
		-moz-border-radius-topright: 12px;
		-khtml-border-radius-topleft: 12px;
		-khtml-border-radius-topright: 12px;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
	}
	
	.navigation li li:last-child a {
		-webkit-border-bottom-left-radius: 12px;
		-webkit-border-bottom-right-radius: 12px;
		-moz-border-radius-bottomleft: 12px;
		-moz-border-radius-bottomright: 12px;
		-khtml-border-radius-bottomleft: 12px;
		-khtml-border-radius-bottomright: 12px;
		border-bottom-left-radius: 12px;
		border-bottom-right-radius: 12px;
	}
	
	.navigation li li a:visited {color:#fff;}
	
	.navigation li li li a,
	.navigation li.current * li a {
		padding-left:20px;
		background:rgba(0,0,0,.6);
	}
	
	.navigation li:hover > a,
	.navigation li.current a { 
		color:#fff;
	}
	
	.navigation li li:hover > a {
		color:#fff;
		background:#cca9c7;
	}

}

@media only screen and (min-width: 1024px) 
{
	.navigation li:hover ul {
		left:22px;
	}
	
	.navigation li:hover:last-child ul {
		left:13px;
	}

	.navigation li a {
		padding:10px 45px 10px;
	}
}

@media only screen and (min-width: 1220px) 
{	
	.navigation li:hover ul {
		left:52px;
	}
	
	.navigation li:hover:last-child ul {
		left:43px;
	}
	
	.navigation li a {
		padding:10px 75px 10px;
	}
}