* {
	outline: none;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
		    box-sizing: border-box;
}

img {
	vertical-align: bottom;
}


html, body {
	margin:0;
	padding:0;
	height: 100%;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
	font-size: 101%;
	overflow: hidden;
	color: #6e6e6e;
}

	#Badge {
		margin: 0px auto;
		width: 100%;
		max-width: 1400px;
		position: relative;
		z-index: 102;
		text-align: right;
	}
	
		#Badge img {
			margin: 0px 70px 0px 0px;
		}

	#Map {
		margin: 0px auto 0px auto;
		width: 100%;
		max-width: 1400px;
		height: 600px;
		overflow: hidden;
		position: relative;
	}
	
		#Legend {
			position: absolute;
			bottom: 10px;
			right: 10px;
			width: 200px;
			height: 160px; 
			border: 2px #FFF solid;
			z-index: 100;			
			background: url("../Gfx/legende_03.png") no-repeat;
			background-size: 100%;
			-webkit-box-shadow: 0 0 4px 0 #A3A3A3;
			        box-shadow: 0 0 4px 0 #A3A3A3;
		}
		
		#TimeInfo {
			position: absolute;
			bottom: 10px;
			margin: 0px 0px 0px 10px;
			width: auto;
			height: 44px; 
			font-size: 12px;
			z-index: 100;						
		}

			#TimeInfo p,
			#TimeInfo a p { margin: 0px; }
		
		.TimeInfoContent {
			margin: 0px 5px 0px 0px;
			padding: 10px;
			float: left;
			width: 275px;
			background: #FFFFFF;
			border: solid 2px #db9e26;
			display: none;
			-webkit-box-shadow: 0 0 4px 0 #A3A3A3;
			        box-shadow: 0 0 4px 0 #A3A3A3;
		}
		
			.MagnificInline {
				margin: 0px 0px 0px 0px;
				padding: 0px 20px 0px 35px;
				width: auto;
				height: 30px;
				line-height: 15px;
				display: block;
				background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeBAMAAADJHrORAAAAJFBMVEUAbqv///9ElcFmqM3d7PTu9fmt0OTM4u672OmIu9h3stIigbalLEJaAAAAOUlEQVQY02NIYEAGbAy0ASbOqPxAUXQ+hnp8QFFQCIVviMbnRuMz0JlvLigyAZm/UFCwgYEuAD0+AddnBnFZcefiAAAAAElFTkSuQmCC');
				background-repeat: no-repeat;
				text-decoration: none;
				color: #6e6e6e;
			}
	
		#Overview {
			position: absolute;
			bottom: 10px;
			right: 10px;
			width: 180px;
			height: 120px;
			border: 2px #6e6e6e solid;
			z-index: 100;			
			background: url("../../Bilder/Karte.png");
			background-repeat: no-repeat;
			background-size: 100%;
			-webkit-box-shadow: 0 0 4px 0 #A3A3A3;
			        box-shadow: 0 0 4px 0 #A3A3A3;
		}
		
			#OverviewInner {
				width: 100%;
				height: 100%;
				position: relative;
				
			}
			
				#OverviewHolder {
					position: absolute;
					width: 140px;
					height: 60px;
					border: 1px #e3051a solid;
					cursor: grabbing;
				}
			
	
		#MapContentHolder {
			margin: -600px 0px 0px -400px;
			padding: 0px 0px 0px 0px;
			width: 2200px;
			height: 1800px;
			position: relative;
		}
		
			#MapContent {
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				width: 1800px;
				height: 1200px;
				position: relative;
				cursor: move;
				top: 9%;
				left: 11%;
			}
			
				.MapContentItem {
					position: absolute;
					top: 0px;
					left: 0px;
					width: 100%;
					height: 100%;
					display: none;
				}
						
					.MapContentItem img {
						max-width: 100%;
						height: auto;
					}
	
	#Spacer {
		margin: 0px auto;
		width: 100%;
		max-width: 1400px;
		height: 3px;
		background: #e3051a;
	}
	
	#Navigation {
		margin: 0px auto 40px auto;
		width: 100%;
		max-width: 1400px;
		height: 150px;
		border-bottom: 1px #CCCCCC solid;
		position: relative;
		background: #FFFFFF;

		z-index: 10;
	}
	
		#Calendar {
			width: 90%;
			float: left;
			height: 100%;
		}

			#CalendarInner {
				width: 100%;
				height: 100%;
				position: relative;
			}
		
			#Calendar .Month {
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				width: 5%;
				height: 100%;
				float: left;
				text-align: center;
				font-size: 12px;				
				position: relative;
			}

			#Calendar .Month .Title {
				position: absolute;
				left: 50%;
				bottom: 20px;
				width: 16px;
				line-height: 16px;
				white-space: nowrap;
				transform-origin: bottom center;
				-webkit-transform: rotate(-90deg);
				   -moz-transform: rotate(-90deg);
				    -ms-transform: rotate(-90deg);
					 -o-transform: rotate(-90deg);
					    transform: rotate(-90deg);
						   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
			}

			#Calendar .Year {
				padding: 0px 10px;
				position: absolute;
				bottom: 0%;
				top: 100%;
				height: 40px;
				line-height: 40px;
				color: #e3051a;
				text-align: center;
			}

			#Calendar .Year.Year2021 { left: 0%; width: 30%;}
			#Calendar .Year.Year2022 { left: 30%; width: 60%;}
			#Calendar .Year.Year2023 { left: 90%; width: 5%;}
			#Calendar .Year.Year2024 { left: 95%; width: 5%;}

			
			#Calendar .Month:after,
			#Calendar .Year:after {
				content: "";
				width: 1px;
				height: 100%;
				display: block;
				position: absolute;
				right: -1px;
				top: 0px;
				margin-left: -1px;
				background: #CCC;
			}
			
		#sliderHolder {
			position: absolute;
			z-index: 10;
			top: 0px;
			left: 5%;
			width: 90%;
			height: 100%;
		}
		
			#slider {
				height: 100%;
			}
			
				.ui-slider .ui-slider-handle {
					top: 2px !important;
					height: 145px !important;
					width: 72px !important;
					margin-left: -36px !important;			
					background-image: url("../Gfx/Slider.png");
					background-size: 100%;
					cursor: pointer !important;
				}
				
			.BauPhase {
				position: absolute;
				top: 15px;
				padding: 0px 0px;
				height: 23px;
				line-height: 25px;
				text-align: center;
				font-size: 0.7em;
				color: #FFFFFF;
				text-align: left;
			}

				.BauPhase:nth-child(even) { background: #114377;}
				.BauPhase:nth-child(odd) { background: #db9e26; top: 25px;}
				
				/*
				/ Für die Berechnung
				/ in der Zeitleiste ist ein Tag = 0.166%
				*/

				#BauPhase01 {	left: 3.204%;	width: 1.162%;}	
				#BauPhase02 {	left: 4.366%;	width: 3.32%;}			
				#BauPhase03 {	left: 7.686%;	width: 4.482%;}			
				#BauPhase04 {	left: 12.168%;	width: 2.490%;}
				#BauPhase05 {	left: 14.658%;	width: 3.984%;}
				#BauPhase06 {	left: 18.642%;	width: 0.664%;}
				#BauPhase07 {	left: 19.306%;	width: 1.162%;}
				#BauPhase08 {	left: 20.468%;	width: 3.32%;}
				#BauPhase09 {	left: 23.788%;	width: 0.664%;}
				#BauPhase10 {	left: 24.452%;	width: 3.154%;}
				#BauPhase11 {	left: 27.606%;	width: 4.98%;}
				#BauPhase12 {	left: 32.586%;	width: 19.92%;}
				#BauPhase13 {	left: 52.506%;	width: 14.94%;}
				#BauPhase14 {	left: 67.446%;	width: 3.486%;}				
				#BauPhase15 {	left: 70.932%;	width: 21.912%;}
				#BauPhase16 {	left: 92.844%;	width: 6.793%;}

				
	
		.Button {		
			width: 5%;
			height: 100%;
			overflow: hidden;
			float: left;
			display: block;			
			color: #FFFFFF;
			text-decoration: none;
			text-indent: -1000px;
			background-position: center center;
			background-color: #CCC;
			background-repeat: no-repeat;
			-webkit-transition: all 0.3s ease-in-out;
			   -moz-transition: all 0.3s ease-in-out;
			     -o-transition: all 0.3s ease-in-out;
			        transition: all 0.3s ease-in-out;
	}
		
			.Button:hover { background-size: 30px auto;}
		
			#ButtonLeft { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAA9CAMAAABr/+JMAAAAaVBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8G612AAAAInRSTlMAN+MGDPDZzF3169S9o5mDRSAbEsa3fXBVLCcWkGqsqUpMFq5MEQAAALFJREFUOMvdkskOwjAMRJ20TdO9UPZCAf//RxLfx5EiFqHO9V3sN0Ofjen6rYI2BXOLUVYys8Ws55ABIi9olyF0rgKq4Sm545CRUBZBB4iOgvb4aUF2Qmi2wgyhtIJuEA2COogegppcM8zFRTXMJ93w9UeG7/9veIwYrgOqkg1P8Eb8G3aS5BJ3gLvTO0/dCjaAt6lvWm8qtWGav2N9WYv153vWfcS6I916Q0q8Kw3F8gKmfiR6RJEi8QAAAABJRU5ErkJggg==')}
			#ButtonRight { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAA9CAMAAABr/+JMAAAAaVBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8G612AAAAInRSTlMAN+PtBgzZzF311L2jmYNFIBsSxrd9cFUsJxbxkGqsqUpMTGLw+wAAALVJREFUOMvd09kOgjAQhWHKUnZQXBFFnPd/SDtXvZnpiXGJobdfJoF/2ih4TG4LzSoiMopZZ/FFtsIZ1cpgw9jJllWMDxnHyVmykfHEg3kq45WxlS3dMSoJtomz8ixjz4M2k/HAOCsJ9oxH2YaY9OqGAtVv71Vf1lL9/p3qw6sFxtKXE4v3YFN4w/hm+H9DTXBLvAO/O7xzfFdw4QkUXv6/8Pyjwl3gNcaBV1xrhflT2sZEHz1PjiMkVfpZyacAAAAASUVORK5CYII=')}
	
	#BadgeBottom {
		position: fixed;
		left: 50%;
		bottom: 0px;
		width: 128px;
		height: 42px;
		background: #e3051a;
		margin-left: 502px;
	}
	
.ui-tooltip {
	z-index: 100%;
	background: #FFF;
}

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
  font-size: 13px;
  line-height: 17px;
  
}