/************************************
** Interaktive Grafiken Styles 0.9.4
************************************/

/* Allgemeine Regeln*/
body {
	margin:0;
	font-family: 'EuropaGroteskSZ-BookRegular', Arial, sans-serif;
	}
h1{ margin:15px 0 0 15px; font-size:28px; }
h2{	margin: 0 0 0 15px; font-size:18px; }
.overlay{ position:absolute; top:0px; left:0px;}
.orientationlock{
	position:absolute;
	top:0px;
	left:0px;
	z-index:1000;
	background-color: #000;
	opacity:0.8;
	display:none;
	}
#orientationlock_landscape,#orientationlock_portrait{ width:100%; height:100%; }
#orientationlockImage{
	position:absolute;
	top:50%;
	left:50%;
	height:150px;
	width:150px;
	margin-top:-75px;
	margin-left:-75px;
	background-color:#333;
	border-radius:10px;
	}
#orientationlockImage p{
	position:absolute;
	bottom:0px;
	margin:5px 8px;
	color:#fff;
	font-weight:bold;
	font-size:10px;
	text-align:center;
	}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
   #orientationlock_landscape { display: block; }
   #orientationlock_portrait { display: none; }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
   #orientationlock_landscape { display: none; }
   #orientationlock_portrait { display: block; }
}
/* Legende */
#legendArrows{
	position:absolute;
	top:50%;
	margin-top:-10px;
	color: #999;
	font-family: Comic Sans MS;
	}
#legendTextbox{
	position: absolute;
	width: auto;
	max-width: 500px;
	height: auto;
	padding: 0px 30px;
	font-size: 14px;
	background-color: #fff;
	line-height: 20px;
	z-index : 150;
	cursor: pointer;
	box-shadow:2px 2px 2px #333;
	-moz-box-shadow:2px 2px 2px #333;
	-webkit-box-shadow:2px 2px 2px #333;
	filter:progid:DXImageTransform.Microsoft.Shadow(strength=3,color=#666666,direction=135);/* Für IE */
	}
#legendBtn{
	position: absolute;
	width: 40px;
	height: 35px;
	font-family: "Times New Roman";
	font-weight: bold;
	font-size: 26px;
	bottom:50px;
	lineHeight: 35px;
	text-align: center;
	background-color: #fff;
	z-index: 200;
	cursor: pointer;
	box-shadow:2px 2px 2px #333;
	-moz-box-shadow:2px 2px 2px #333;
	-webkit-box-shadow:2px 2px 2px #333;
	filter:progid:DXImageTransform.Microsoft.Shadow(strength=3,color=#666666,direction=135);/* Für IE */
	}
#legendImg{ margin: 10px 0; }
	
/* POIs */
.icon{
	position: absolute;
	cursor: pointer;
	z-index: 50;
	}
.point{
	position: absolute;
	cursor: pointer;
	z-index:50;
	box-shadow: 3px 3px 3px #333;
	-moz-box-shadow: 3px 3px 3px #333;
	-webkit-box-shadow: 3px 3px 3px #333;
	border-radius:100px;
	-moz-border-radius:100px;
	-webkit-border-radius:100px;
	filter:progid:DXImageTransform.Microsoft.Shadow(strength=3,color=#666666,direction=135);/*für IE*/
	}
.point p{
	color:#fff;
	text-align:center;
	font-weight:bold;
	margin:0;
	}	
/* Klasse für Animation der POIs */
.poiAnimation{
	-moz-animation: poiAnimation 2s infinite;
    -webkit-animation: poiAnimation 2s infinite;
    -o-animation: poiAnimation 2s infinite;
    -ms-animation: poiAnimation 2s infinite;
    animation: poiAnimation 2s infinite;
	}
/* CSS3 Animation */
@keyframes poiAnimation { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
@-webkit-keyframes poiAnimation { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
@-o-keyframes poiAnimation { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
@-moz-keyframes poiAnimation { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
/* Gilt für IE ab Version 10 */
@-ms-keyframes poiAnimation { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
	
.tooltip{
	position:absolute;
	min-width: 100px;
	width:auto;
	display:none;
	z-index:160;
	background-color:#fff;
	color: #333;
	max-width:400px;
	padding:10px;
	box-shadow: 0px 0px 3px #333;
	-webkit-box-shadow: 0px 0px 3px #333;
	-moz-box-shadow: 0px 0px 3px #333;
}	
.tooltip h1{
	margin: 0 35px 5px 0;
	font-size: 20px;
	font-weight: bold;
	}
.tooltip h2{
	font-size: 16px;
	margin: 0 35px 5px 0;
	}
.tooltip p{
	font-size: 14px;
	margin: 0 0 5px 0;
	line-height:19px;
	}
.tooltipImg{
	width:380px;
	margin:0;
	}
.tooltipCloseBtn{
	text-align: center;
	margin:5px 5px 0 0;
	position:absolute;
	top:0px;
	right: 0px;
	width:20px;
	height:20px;
	font-size:18px;
	line-height: 17px;
	color:#bbb;
	cursor:pointer;
	z-index:170;
	border-radius:20px;
	border: 1px solid #bbb;
	}
.ttArrowBorder{
	height:0;
	width:0;
	position: absolute;
	z-index:-1;
	border: none;
	}
.ttArrowBorderTop{
	border-width:15px;
	top:-30px;
	}
.ttArrowBorderBottom{
	bottom:-30px;
	border-width:15px;
	}
.ttArrow{
	position:absolute;
	z-index:-1;
	border-style:solid;
	border-width:15px;
	height:0;
	width:0;
	}
.ttArrowTop{
	border-color: transparent transparent #fff transparent;
	top:-29px;
	}	
.ttArrowBottom{
	border-color: #fff transparent transparent transparent;
	bottom:-29px;
	}
/*MENUE*/
.menue{
	position:absolute;
	z-index:100;
	/* Optional, falls ganzes Menü Schatten haben soll
	box-shadow: 0px 0px 5px #000;
	-moz-box-shadow: 0px 0px 5px #000;
	-webkit-box-shadow: 0px 0px 5px #000;*/
	}
.menueBtn{
	margin:0px;
	cursor:pointer;
	float:left;
	box-shadow: 2px 2px 2px #333;
	-moz-box-shadow: 2px 2px 2px #333;
	-webkit-box-shadow: 2px 2px 2px #333;
	}
.menueBtn p{
	text-align: center;
	font-size: 14px;
	font-weight:bold;
	width:auto;
	margin:0 10px;
	}
.menueOverlay{
	position:absolute;
	top:0px; left:0px;
	display:none;
	/*z-index:5;
	background-repeat: no-repeat;*/
	}
.menueBgImage{
	z-index:5;
	position:absolute;
	top:0px; left:0px;
	}
.inactive{
	border:1px solid #efefef;
	background:#fff !important;
	color:#333 !important;
	}
.activeExlusive{
	border:1px solid #efefef;
	box-shadow: none !important;
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	}
.activeInkl{
	border: 5px solid #fff;
	}
	
/* Slider */
.slider{
	position:absolute;
	top:100px; left:60px; /* Kann vom Plugin überschrieben werden */
	height:20px;
	width:900px; /* Kann vom Plugin überschrieben werden */
	background-color:#fff;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border: 1px solid #ccc;
	z-index:50;
	}
.bobbel{
	position:absolute;
	top:95px;
	left:60px;
	height:30px;
	width:30px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
	z-index:100;
	background-color:#fff;
	user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
	cursor:pointer;
	-moz-box-shadow:0px 0px 3px #333;
	-webkit-box-shadow:0px 0px 3px #333;
	box-shadow:0px 0px 3px #333;
	}
.sliderOverlay{
	display:none;
	position:absolute;
	top:0px;
	left:0px;
	z-index:5;
	background-repeat: no-repeat;
	-moz-user-select:none;
	-webkit-user-select:none;
	user-select: none;
	}
.beschriftung{
	position:absolute;
	top:130px;
	font-size:16px;
	width:auto;
	height:18px;
	text-align:center;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	z-index:60;
	cursor:pointer;
	color:#fff;
	}
.fontweightbold{ font-weight:bold; }

/* Startscreen */
#startscreen{
	position:absolute;
	top: 50%; left: 50%;
	padding: 10px;
	background-color:#f0f0f0;
	z-index:400;
	-moz-box-shadow: 3px 5px 5px #333;
	-webkit-box-shadow: 3px 5px 5px #333;
	box-shadow: 3px 5px 5px #333;
	max-width:400px;
	}
#startscreen h1{ margin: 5px 10px; font-size: 20px; font-weight: bold; margin-right:35px;}
#startscreen h2{ margin: 5px 10px; font-size: 16px;}
#startscreen p{ margin: 5px 10px; font-size: 14px;}
#close_btn_startscreen{
	position:absolute;
	text-align: center;
	margin:5px 5px 0 0;
	top:0px; right:0px;
	width:20px; height:20px;
	border-radius:20px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border: 1px solid #bbb;
	font-size:18px;
	line-height: 17px;
	color:#bbb;
	cursor:pointer;
	}
#startscreen_hg{
	position:absolute;
	top:0px; left:0px;
	width:100%;	height:100%;
	background-color:#333;
	opacity:.8;
	z-index:300;
	}
#startscreenbutton{
	position: absolute;
	width: 40px; height: 35px;
	bottom:10px;
	font-family:Times New Roman;
	font-weight: bold; font-size: 26px;
	line-height: 35px; text-align: center;
	background-color: #fff;
	z-index: 149;
	cursor: pointer; 
	}
	
/* Checkbox */
.cb{
	position:absolute;
	z-index:50;
	height:35px;
	cursor:pointer;
	background-color: rgba(255, 255, 255, 0.5);
	top:100px; left:10px;
	}
.cbFrame{
	position:absolute;
	top:5px; left:5px;
	border: 1px solid #ccc;
	background-color: #fff;
	width:20px; height:20px;
	border-radius:2px;
	box-shadow: 1px 1px 2px #333;
	-moz-box-shadow: 1px 1px 2px #333;
	-webkit-box-shadow: 1px 1px 2px #333;	
	}
.cbMarker{
	margin-top:-11px; margin-left: 3px;
	font-size:30px;
	color:#333;
	}
.cbText{
	color:#333;
	font-size:16px;
	line-height:34px;
	margin:0 10px 0 35px;
	}
.cbContent{
	position:absolute;
	top:0px; left:0px;
	z-index:7;
	}