﻿html, body, form
{
  font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
  height: 100%;
	background-color: #ffffff;
	overflow-x: hidden;
}

div#Wrapper 
{
	margin: 0px;
}




div.LoadingOverlay
{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: rgba(255,255,255,1);
	background-image: url(../images/ThermeLoad.gif);
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 500;
}





div.Schliessen
{
	position: absolute;
	right: 10px;
	top: 25px;
  font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
  font-size: 11px;
  color: #002c5a;
  z-index: 11;
  cursor: pointer;
  display: block;
}

div.Schliessen a {color: #002c5a; text-decoration: none;}
div.Schliessen a:link {color: #002c5a; text-decoration: none;}
div.Schliessen a:visited {color: #002c5a; text-decoration: none;}
div.Schliessen a:hover {color: #002c5a; text-decoration: none;}
div.Schliessen a:active {color: #002c5a; text-decoration: none;}



/* ----------------------------------------*/
/* Slider Allgemein */

div.SlideContainerKlein {width: 280px !important;	position: relative !important; margin-left: auto; margin-right: auto;}
div.SlideListKlein {width: auto;	overflow: hidden;	position: relative; z-index: 3;}
div.SlideControlsContainerKlein {height: 20px; margin-top: 10px;	overflow: visible; position: relative; width: 280px;}

div.SlideControlsContainerKlein div.MiniSliderPrev {cursor: pointer; position: absolute; left: 0px; top: 0px;	height: 40px;	z-index: 60;}
div.SlideControlsContainerKlein div.MiniSliderNext {cursor: pointer; position: absolute; right: 0px; top: 0px; height: 40px; z-index: 60;}
div.SlideControlsContainerKlein div.MiniSliderIndicator {position: absolute; width: 280px; text-align: center; bottom: 3px;	z-index: 60;}

div.SlideControlsContainerKlein div.MiniSliderIndicator span {cursor: pointer; display: inline-block; margin-right: 5px; padding: 2px;
                                                              width: 10px; height: 10px;}


ul.SlideInnerContainerKlein {margin-top: 0px !important; padding-left: 0px; margin-left: 0px; width: 20000px; position:relative;}
ul.SlideInnerContainerKlein li {float: left; width: 280px; list-style-type: none; margin: 0px !important; padding: 0px !important; display: block;}
ul.SlideInnerContainerKlein li img {max-width: 100%;}


div.ZurueckButton {margin-top: 215px; text-align: center; background-color: #002c5a; color: #ffffff; font-size: 11px;}
div.ZurueckButton a {display: block; padding: 5px; padding-left: 10px; padding-right: 10px; color: #ffffff; text-decoration: none;}
div.ZurueckButton a:link {color: #ffffff; text-decoration: none;}
div.ZurueckButton a:visited {color: #ffffff; text-decoration: none;}
div.ZurueckButton a:hover {color: #ffffff; text-decoration: none;}
div.ZurueckButton a:active {color: #ffffff; text-decoration: none;}




/* ----------------------------------------*/
/* Therme Animation */


/* Navigation */
div#NavigationAnimation {width: auto; position: relative; background-color: #ffffff; z-index: 10; box-shadow: 3px 0px 10px 0px rgba(0,0,0,0.5);
                         -webkit-box-shadow: 3px 0px 10px 0px rgba(0,0,0,0.5); -moz-box-shadow: 3px 0px 10px 0px rgba(0,0,0,0.5); 
                         padding-left: 10px; padding-right: 10px; padding-bottom: 10px;}
div#NavigationAnimation div#Logo img {max-width: 100%; max-height: 50px;}
div#NavigationAnimation ul li {cursor: pointer;	margin-bottom: 0px; font-size: 11px; font-weight: 400; color: #002c5a; display: inline-block; margin: 0px;
                               font-family: 'Open Sans', Arial, Verdana, Helvetica, Sans-Serif; padding: 6px; }
div#NavigationAnimation ul li.Markiert {background-color: #002c5a; color: #ffffff;}


div#NavigationAnimation ul li a,
div#NavigationAnimation ul li a:link,
div#NavigationAnimation ul li a:visited,
div#NavigationAnimation ul li a:hover,
div#NavigationAnimation ul li a:active {color: #002c5a; text-decoration: none;}

div#NavigationAnimation ul li.Markiert a,
div#NavigationAnimation ul li.Markiert a:link,
div#NavigationAnimation ul li.Markiert a:visited,
div#NavigationAnimation ul li.Markiert a:hover,
div#NavigationAnimation ul li.Markiert a:active {color: #ffffff; text-decoration: none;}


/* Minimap */
div#NavigationAnimation a.AnimationMiniMap,
div#NavigationAnimation a.AnimationMiniMapZurueck
{
	display: none;
}





/* Animation */
div#AnimationKomplett {margin: 0px; position: relative;}
div#AnimationViewport {position: relative;}

div.AnimationUebersicht 
{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
  overflow: auto;
  height: 480px;
}


div.AnimationKarteContainer
{
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  transform-origin: top center;
}



/* Slider */
div.AnimationKatItem
{
	position: relative;
	width: auto !important;
}


.KatItemThumb
{
  -webkit-transform: scale(0.2);
  -ms-transform: scale(0.2);
  transform: scale(0.2);
}




/* Controls Ebene */
div.AnimationKatItem div.AnimationText
{
	position: relative;
	padding: 15px;
	padding-left: 10px;
	padding-right: 10px;
	color: #313131;
	font-family: 'Open Sans', Arial, Verdana, Helvetica, Sans-Serif;
	font-size: 13px;
}

div.AnimationKatItem div.TitelAnimation
{
	position: relative;
	padding: 20px;
	padding-bottom: 0px;
	padding-left: 10px;
	padding-right: 10px;
	overflow: hidden;
	color: #002c5a;
	font-family: 'Open Sans', Arial, Verdana, Helvetica, Sans-Serif;
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
}



div.AnimationControls
{
	height: 210px;
	position: absolute;
	width: 280px !important;
	z-index: 50;
}

div.AnimationControls div.AnimationPrev
{
	background-image: url(../images/ZeitstrahlPrevKlein.png);
	background-position: right center;
	background-repeat: no-repeat;
	cursor: pointer;
	width: 40px;
	position: absolute;
	left: 0px;
	top: 0px;
	bottom: 0px;
}

div.AnimationControls div.AnimationNext
{
	background-image: url(../images/ZeitstrahlNextKlein.png);
	background-position: left center;
	background-repeat: no-repeat;
	cursor: pointer;
	width: 40px;
	position: absolute;
	right: 0px;
	top: 0px;
	bottom: 0px;
}

div.AnimationControls div.AnimationPrev:hover,
div.AnimationControls div.AnimationNext:hover {opacity: 1;}


div.AnimationControls div.AnimationIndicator
{
	position: absolute;
	height: 15px;
	bottom: 10px;
	z-index: 10;
	left: 0px;
	right: 0px;
	text-align: center;
}


div.AnimationControls div.AnimationIndicator span
{
	border: 1px solid #ffffff;
	display: inline-block;
	height: 8px;
	width: 8px;
	margin-left: 3px;
	margin-right: 3px;
	border-radius: 50%;
	cursor: pointer;
}

div.AnimationControls div.AnimationIndicator span:hover,
div.AnimationControls div.AnimationIndicator span.Aktiv {background-color: #ffffff;}

div.AnimationPOI
{
	cursor: pointer;
	position: absolute;
	height: 54px;
	width: 53px;
	line-height: 15px;
	z-index: 55;
	margin-left: -20px;
	margin-top: -20px;
}


div.AnimationPOI:hover {z-index: 60;}



div.AnimationPOIname
{
	background-color: #ffffff;
	color: #002c5a;
	font-family: 'Open Sans', Arial, Verdana, Helvetica, Sans-Serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 15px;
	margin-top: -45px;
	margin-left: 50px;
	min-width: 80px;
	padding: 8px;
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	z-index: 60 !important;
}
