/************************************
** Interaktive Grafiken Styles 1.0.6 (letzte Änderung 03.12.2012)
************************************/


/* @font-face declaration according to  http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
 * and yes, they have to be on one line!
*/

/******************/
/* SZ Sans Fonts  */
/******************/

@font-face {
  font-family: 'SZSans';
  font-weight: normal;
  src: url('fonts/SZSans.eot?') format('eot'), url('fonts/SZSans.woff') format('woff'), url('fonts/SZoSans-Regular.otf') format('opentype');
}

@font-face  {
    font-family: 'SZSans';
    font-weight: bold;
    src: url('fonts/SZSans-Bold.eot?') format('eot'), url('fonts/SZSans-Bold.woff') format('woff'), url('fonts/SZSans-Bold.otf') format('opentype');
}


/******************/
/* SZ Text Fonts */
/******************/

@font-face {
  font-family: 'SZText';
  font-weight: normal;
  src: url('fonts/SZText.eot?') format('eot'), url('fonts/SZText.woff') format('woff'), url('fonts/SZoText-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'SZText';
  font-weight: bold;
  src: url('fonts/SZText-Bold.eot?') format('eot'), url('fonts/SZText-Bold.woff') format('woff'), url('fonts/SZText-Bold.otf') format('opentype');
}


/* Allgemeine Regeln*/
* {
	user-select: none;
    -moz-user-select: none;
	-webkit-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
	margin: 0;
	padding: 0;
}
body {
	margin:0;
	font-family: 'SZText', Arial, Helvetica, sans-serif;
	}
h1{ 
	margin:30px 0 0 30px; font-size:37px;
	font-family: 'SZSans', Arial, Helvetica, sans-serif;
	font-weight: bold;
}
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:145px;
	width:150px;
	margin-top:-75px;
	margin-left:-75px;
	background-color:#333;
	border-radius:10px;
	}

@media screen and (orientation: portrait) {
   #orientationlock_landscape { display: block; }
   #orientationlock_portrait { display: none; }
}
@media screen and (orientation: landscape) {
   #orientationlock_landscape { display: none; }
   #orientationlock_portrait { display: block; }
}

@media screen and (orientation: landscape) {
	@-ms-viewport { height: 708px } /* Windows 8 only */
} 

@media screen and (orientation: portrait) {
	@-ms-viewport { width: 708px } /* Windows 8 only */
} 

/********************************
*********** 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: 10px 30px;
	font-size: 14px;
	background-color: #fff;
	line-height: 18px;
	z-index : 150;
	cursor: pointer;
	border: 1px solid #efefef;
	box-shadow:2px 2px 2px #999999;
	-moz-box-shadow:2px 2px 2px #999999;
	-webkit-box-shadow:2px 2px 2px #999999;
	-o-box-shadow:2px 2px 2px #999999;
	-ms-box-shadow:2px 2px 2px #999999;
	font-family: 'SZSans', Arial, Helvetica, sans-serif;
	filter:progid:DXImageTransform.Microsoft.Shadow(strength=3,color=#666666,direction=135);/* Für IE */
	}
#legendTextbox b{
	display: inline-block;
	width: 90px;
	font-weight: bold;
	font-family: 'SZSans', Arial, Helvetica, sans-serif;
	}
#legendBtn{
	background-color: #FFFFFF;
    border: 1px solid #EFEFEF;
    bottom: 40px;
    cursor: pointer;
    font-family: "Times New Roman";
    font-size: 23px;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    position: absolute;
    text-align: center;
    width: 35px;
    z-index: 200;
	box-shadow:2px 2px 2px #999999;
	-moz-box-shadow:2px 2px 2px #999999;
	-webkit-box-shadow:2px 2px 2px #999999;
	-o-box-shadow:2px 2px 2px #999999;
	-ms-box-shadow:2px 2px 2px #999999;
	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 5px #999999;
	-moz-box-shadow: 3px 3px 5px #999999;
	-webkit-box-shadow: 3px 3px 5px #999999;
	-o-box-shadow: 3px 3px 5px #999999;
	-ms-box-shadow: 3px 3px 5px #999999;
	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:20px 10px 20px;
	box-shadow: 3px 3px 5px #999;
	-webkit-box-shadow: 3px 3px 5px #999;
	-moz-box-shadow: 3px 3px 5px #999;
	-o-box-shadow: 3px 3px 5px #999;
	-ms-box-shadow: 3px 3px 5px #999;
    border: 1px solid #EFEFEF;
}	

.tooltip h1{
	margin: 0px 35px 5px 10px;
	font-size: 24px;
	font-family: 'SZSans', Arial, Helvetica, sans-serif;
	font-weight: bold;
	}
.tooltip h2{
	font-size: 16px;
	font-family: 'SZSans', Arial, Helvetica, sans-serif;
	margin: 0px 35px 10px 10px;
	}
.tooltip p{
	font-size: 14px;
	margin: 10px 35px 5px 10px; 
	line-height:19px;
	}
.tooltipImg{
	width:380px;    
	margin: 0 10px;
	}
.tooltipCloseBtn{
	border: 1px solid #BBBBBB;
    color: #BBBBBB;
    cursor: pointer;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 19px;
    height: 20px;
    line-height: 18px;
    margin: 12px 11px 0 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 20px;
	border-radius:20px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	-o-border-radius:20px;
	-ms-border-radius:20px;
	z-index: 10;
	}
.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 #ddd 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: 3px 3px 5px #999999;
	-moz-box-shadow: 3px 3px 5px #999999;
	-webkit-box-shadow: 3px 3px 5px #999999;
	-o-box-shadow: 3px 3px 5px #999999;
	-ms-box-shadow: 3px 3px 5px #999999;
	}
.menueBtn p{
	text-align: center;
	font-size: 18px;
	font-family: 'SZSans', Arial, Helvetica, sans-serif;
	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;
	/* Für IE10 */
	-ms-touch-action: none;
	}
.bobbel{
	position:absolute;
	top:-5px; 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;
	/* Für IE10 */
	-ms-touch-action: none;
	}
.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{
	font-family: 'SZSans', Arial, Helvetica, sans-serif;
	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{
	font-family: 'SZSans', Arial, Helvetica, sans-serif;
	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 10px 20px;
	background-color:#f0f0f0;
	z-index:400;
	box-shadow: 5px 5px 5px #333;
	-moz-box-shadow: 5px 5px 5px #333;
	-webkit-box-shadow: 5px 5px 5px #333;
	-o-box-shadow: 5px 5px 5px #333;
	-ms-box-shadow: 5px 5px 5px #333;
	}
#startscreen h1{ margin: 10px 35px 15px 15px; font-size: 20px;  }
#startscreen h2{ margin: 10px 15px; font-size: 16px; }
#startscreen p{ margin: 10px 15px; font-size: 14px; line-height:18px;}
#close_btn_startscreen{
	border: 1px solid #BBBBBB;
    color: #BBBBBB;
    cursor: pointer;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 19px;
    height: 20px;
    line-height: 18px;
    margin: 12px 11px 0 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 20px;
	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;
    border: 1px solid #EFEFEF;
	width: 35px; height: 30px;
	bottom:10px;
	font-family:Times New Roman;
	font-weight: bold;
	font-size: 22px;
	line-height: 30px;
	text-align: center;
	background-color: #fff;
	z-index: 149;
	cursor: pointer;
	box-shadow:2px 2px 2px #999999;
	-moz-box-shadow:2px 2px 2px #999999;
	-webkit-box-shadow:2px 2px 2px #999999;
	-o-box-shadow:2px 2px 2px #999999;
	-ms-box-shadow:2px 2px 2px #999999;
	filter:progid:DXImageTransform.Microsoft.Shadow(strength=3,color=#666666,direction=135);
	}