@charset "UTF-8";
/* CSS Document */

/* thin-navigation */
.thin-navigation {
	position:absolute;
	width:60%;
	height:25px;
	top:65%;
	left:20%;
	overflow:hidden;
	z-index:200;
	margin-top:-30px;	
}

.thin-navigation li {
	height:100%;
	width:12.5%;
	padding:0;
	margin:0;
	text-align:center;
	float:left;
}

.thin-navigation li a {
	display:block;
	height:100%;
	width:100%;
	padding:0;
	margin:0;
}

.thin-navigation li a span {
	display:block;
	height:100%;
	width:100%;
	padding:0;
	margin:0 0 0 0;
	background-image:url(common/thin-nav-circle.png);
	background-repeat:no-repeat;
	background-size: 25px 50px;
	background-position:center 0;
	-ms-behavior: url(backgroundsize.min.htc); /* IE 8 */	
}

.thin-navigation li a:hover span {
	background-position:center -25px;
}

.thin-navigation li .aktiv span {
	background-position:center -25px;
}

#scroll-to-footer {
	display:none;	
}

@media screen and ( min-width:600px ) {
	.thin-navigation {
		width:40%;
		left:30%;
		margin-top:-35px;
	}
}

/* nur fuer landscape mobile geraete kleiner iPad */
@media screen and ( max-width:800px ) and (orientation: landscape) {
	.thin-navigation {
		position:absolute;
		width:35%;
		height:25px;
		bottom:40%;
		left:60%;
		overflow:hidden;
		z-index:200;
		margin-top:-30px;
	}

	.thin-navigation li {
		margin:0;
	}
}

@media screen and ( min-width:900px ) {
	.thin-navigation {
		position:absolute;
		width:30%;
		height:25px;
		bottom:45px;
		top:auto;
		left:30%;
		margin-top:-30px;
	}
}

@media screen and ( min-width:1030px ) {
	.thin-navigation {
		position:fixed;
		width:60px;
		height:60%;
		top:25%;
		left:0;
		overflow:hidden;
		z-index:200;	
	}
	
	.thin-navigation li {
		height:12.5%;
		width:100%;
		padding:0;
		margin:0;
		text-align:center;
	}
	
	.thin-navigation li a {
		display:block;
		height:100%;
		width:100%;
		padding:0;
		margin:0;
		background-image:url(common/ie9-needs-background.png);
	}
	
	.thin-navigation li a span {
		display:block;
		height:100%;
		width:2px;
		padding:0;
		margin:0 0 0 30px;
		background-image:none;
		background-color:#ffffff;
	}
	
	.thin-navigation li a:hover span {
		background-image:none;
		background-color:#e60000;
	}
	
	/* fuer ie10: graues feld */
	.thin-navigation li a:active{
		background-color: transparent;
	}

	.thin-navigation li .aktiv span {
		background-image:none;
		background-color:#e60000;
	}
	
	#scroll-to-footer {
		display:block;	
	}
	
}


@media screen and ( min-width:1200px ) {
	.thin-navigation {
		top:17%;
	}
}

@media screen and ( min-width:1600px ) {
	.thin-navigation {
		left:0;
	}
}