/************************************
** Interaktive Grafiken Styles 1.0.2
************************************/

/* 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; }
#interaktive_grafik h1, #interaktive_grafik h2, #interaktive_grafik h3{ position: relative; z-index:6; }

.overlay{
	position:absolute;
	top:0px;
	left:0px;
	}
.orientationlock{
	position:fixed;
	top:0px;
	left:0px;
	bottom:0px;
	right:0px;
	z-index:1000000;
	background-color: rgba(0,0,0,0.8);
	display:none;
	}
/*#orientationlock_landscape,#orientationlock_portrait{ width:100%; height:100%; }*/
#orientationlockImage{
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-75px;
	margin-left:-75px;
	background-color:#000;
	border-radius:10px;
	}

@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; height: auto;
	max-width: 500px;
	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;
	-o-box-shadow:2px 2px 2px #333;
	-ms-box-shadow:2px 2px 2px #333;
	filter:progid:DXImageTransform.Microsoft.Shadow(strength=3,color=#666666,direction=135);/* Für IE */
	}
#legendTextbox b{
	display: inline-block;
	width: 60px;
	}
#legendBtn{
	position: absolute;
	width: 35px; height: 30px;
	font-family: "Times New Roman";
	font-weight: bold;
	font-size: 24px;
	bottom:50px;
	line-height: 30px;
	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;
	-o-box-shadow:2px 2px 2px #333;
	-ms-box-shadow:2px 2px 2px #333;
	filter:progid:DXImageTransform.Microsoft.Shadow(strength=3,color=#666666,direction=135);/* Für IE */
	}
#legendBtn i{
	margin-right:-4px;
	}
#legendImg{ margin: 10px 0; }

/********************************
************ POIs ***************
********************************/
.icon{
	position: absolute;
	cursor: pointer;
	z-index: 50;
	}
/*.icon img { 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;
	-o-box-shadow: 3px 3px 3px #333;
	-ms-box-shadow: 3px 3px 3px #333;
	border-radius:100px;
	-moz-border-radius:100px;
	-webkit-border-radius:100px;
	-o-border-radius:100px;
	-ms-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.5; } 100% { opacity: 1; } }
@-webkit-keyframes poiAnimation { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
@-o-keyframes poiAnimation { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
@-moz-keyframes poiAnimation { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
@-ms-keyframes poiAnimation { 0% { opacity: 1; } 50% { opacity: 0.5; } 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;
	-o-box-shadow: 0px 0px 3px #333;
	-ms-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{
	max-width:100%;
	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;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	-o-border-radius:20px;
	-ms-border-radius:20px;
	border: 1px solid #bbb;
	}
.ttArrowBorder{
	height:0; width:0;
	position: absolute;
	z-index:-1;
	border: none;
	}
.ttArrowBorderTop{
	top:-30px;
	border-width:15px;
	border-style:solid;
	border-color:transparent transparent #bbb transparent;
	}
.ttArrowBorderBottom{
	bottom:-30px;
	border-width:15px;
	border-style:solid;
	border-color:#bbb transparent transparent transparent;
	}
.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;
	}
.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;
	-o-box-shadow: 2px 2px 2px #333;
	-ms-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;
	}
.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;
	-o-box-shadow: none !important;
	-ms-box-shadow: none !important;
	}
.activeInkl{
	border: 5px solid #fff;
	}

/********************************
*********** Slider **************
********************************/
.slider{
	position:absolute;
	top:100px; left:60px;
	height:20px; width:900px;
	background-color:#fff;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-o-border-radius:10px;
	-ms-border-radius:10px;
	border: 1px solid #ccc;
	z-index:50;
	}
.bobbel{
	position:absolute;
	top:95px; left:60px;
	height:30px; width:30px;
	cursor:pointer;
	z-index:100;
	background-color:#fff;
	border-radius:15px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	-o-border-radius:15px;
	-ms-border-radius:15px;
	user-select: none;
    -moz-user-select: none;
	-webkit-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
	box-shadow:0px 0px 3px #333;
	-moz-box-shadow:0px 0px 3px #333;
	-webkit-box-shadow:0px 0px 3px #333;
	-o-box-shadow:0px 0px 3px #333;
	-ms-box-shadow:0px 0px 3px #333;
	}
.sliderOverlay{
	display:none;
	position:absolute;
	top:0px;
	left:0px;
	z-index:5;
	background-repeat: no-repeat;
	user-select: none;
    -moz-user-select: none;
	-webkit-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
	}
.beschriftung{
	position:absolute;
	top:130px;
	font-size:16px;
	width:auto;	height:18px;
	text-align:center;
	z-index:60;
	cursor:pointer;
	color:#fff;
	user-select: none;
    -moz-user-select: none;
	-webkit-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
	}
.fontweightbold{ font-weight:bold; }

/********************************
********** 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;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	-o-border-radius:2px;
	-ms-border-radius:2px;
	box-shadow: 1px 1px 2px #333;
	-moz-box-shadow: 1px 1px 2px #333;
	-webkit-box-shadow: 1px 1px 2px #333;	
	-o-box-shadow: 1px 1px 2px #333;	
	-ms-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;
	}

/********************************
******** Startscreen ************
********************************/
#startscreen{
	position:absolute;
	top: 50%; left: 50%;
	max-width:400px;
	padding: 10px;
	background-color:#f0f0f0;
	z-index:400;
	box-shadow: 3px 5px 5px #333;
	-moz-box-shadow: 3px 5px 5px #333;
	-webkit-box-shadow: 3px 5px 5px #333;
	-o-box-shadow: 3px 5px 5px #333;
	-ms-box-shadow: 3px 5px 5px #333;
	}
#startscreen h1{ margin: 15px 35px 15px 15px; font-size: 20px; font-weight: bold; }
#startscreen h2{ margin: 10px 15px; font-size: 16px; }
#startscreen p{ margin: 10px 15px; font-size: 14px; line-height:18px;}
#close_btn_startscreen{
	position:absolute;
	text-align:center;
	margin:5px 5px 0 0;
	top:0px; right:0px;
	width:20px; height:20px;
	font-size:18px;
	line-height: 17px;
	color:#bbb;
	cursor:pointer;
	border:1px solid #bbb;
	border-radius:20px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	-o-border-radius:20px;
	-ms-border-radius:20px;
	}
#startscreen_hg{
	position:absolute;
	top:0px; left:0px;
	width:100%;	height:100%;
	background-color:#333;
	opacity:.6;
	z-index:300;
	}
#startscreenbutton{
	position: absolute;
	width: 35px; height: 30px;
	bottom:10px;
	font-family:Times New Roman;
	font-weight: bold;
	font-size: 24px;
	line-height: 30px;
	text-align: center;
	background-color: #fff;
	z-index: 149;
	cursor: pointer;
	box-shadow:2px 2px 2px #333;
	-moz-box-shadow:2px 2px 2px #333;
	-webkit-box-shadow:2px 2px 2px #333;
	-o-box-shadow:2px 2px 2px #333;
	-ms-box-shadow:2px 2px 2px #333;
	filter:progid:DXImageTransform.Microsoft.Shadow(strength=3,color=#666666,direction=135);
	}
#startscreenbutton i{
	margin-right:-4px;
	}