/* General Style */

body {
	background: #DCDCDC;
	background-color:#99CCFF;

	background-image: url(../images/pattern1.jpg);  
	background-repeat:no-repeat;
	background-position:center top;
	background-attachment:fixed;
	font-size: 120%;
    background-size: cover;  
	margin: 0em;
	padding: 0em;
	
	font-family: "arial narrow","helvetica s","Segoe UI", "San Franciso", roboto;
}


.error {
   color: yellow;
}




h1 {
	font-size: 2.5em;
	line-height: 1.4em;

	font-weight: 100;
	color: #FFFFFF;
	margin: 0em;
}
/*h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}
*/
/*h1, p {
 clear: right;
 line-height: 6.8em;
}
*/
/*h2 {
	font-size: 1.563em;
	line-height: 1.8em;
	font-family: Helvetica;
	font-weight: 100;
	color: #2F2D2C;
	margin: 0em;
	padding: 1.25em;
	text-align: left;
}*/

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight:lighter;
}

h3 {
	font-size: 1.23em;
	line-height: 1.8em;
	/*font-weight: 100;               */
	color: #fff;
	margin: 0em;
	padding: 1.25em;
	text-align: left;
}
/*h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}
*/ /*
h4 {
    font-size: 1.563em;
    line-height: 1.8em;
    font-weight: 100;
    color: #fff;
    margin: 0em;
    padding: 1.25em;
    text-align: left;
}*/
h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color: #fff;
}  
h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}
p {
	line-height: 1.2em;
	/*font-family: Helvetica;*/
	font-weight: 100;
	color: #fff;
	margin: 0em 0em 0em 0em;
	padding: 1.25em;
	text-align: justify;
}
h6 {
  display: block;
  font-size: .67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

ul {
	margin: 0px;
	padding: 0px;
}

li {
	list-style: none;
	font-weight: 100;
	color: #fff;
	line-height: 1.25;
	padding: 0em;
	margin: 0.313em 0em 0.313em 0em;
}

img {
	/*width: 90%;*/
	height: auto;
	max-width: 100%;
}

a {
	text-decoration: none;
	color: #fff;
}

/*on Top Bar
#menubar {
	display: block;
	background: #ffffff;
}
#menubar ul {
	display: block;
	width: 2em;
	padding: 0.9em;
}
#menubar ul li {
	display: inline;
}

#menubar ul li a.menubutton {
	display: none;
}*/
/*header*/
header {
	display: inline;
	background: #0a3b88;
	text-align: center;
	margin: auto;
	width:  100%;
	max-width: 1170px;
}
#logo{
	width: 6em;
	height:6em;
	float: left;
	margin:0em 0em 0em 0em;
}
#logo:hover{
	opacity: 0.2s;
}
#logo img{
	width: 94%;
	margin: 0em 0em 0em 0em;
}

/* Navigation */

nav {
 /*width: 100%;*/
 max-width: 75%;
 list-style: None;
 margin: 0.2em 0em 2.5em auto;
 
}

ul#navigation, ul#navigation ul {
 margin: 0;
 padding: 0;
 list-style-type: None;
 height: 22px;
 
}

ul#navigation li {
 float: Left;
 width: 70px;
 position: Relative;
 margin: auto;
 list-style: None;
}

ul#navigation li a {
 display: Block;
 width: 167px;
 line-height: 28px;
 text-align: left;
 color: #000000;
 text-decoration:word-spacing 50px;
 background-color: #97EDF4; 
 
 background: linear-gradient(to bottom, #46DDE9, #6A86C8);
 border-radius: 3px;
 transition: background-color 1s;
 box-shadow: 1px 1px 3px 1px #C0C0C0;
}

ul#navigation li a:hover,
 ul#navigation li a:active {
 background: linear-gradient(to bottom, #97EDF4, #F25EF2);
 cursor: Pointer;
}

ul#navigation li ul {
 opacity: 0.0;
 visibility: Hidden;
 position: Absolute;
 left: 0px;
 top: 20px;
 z-index: 100;
 transition: Opacity 1s;
}

ul#navigation li:hover > ul,
 ul#navigation li:active > ul {
 opacity: 1.0;
 visibility: Visible;

}

ul#navigation li ul a {
 
 background-color: #B7C8F0;


}

ul#navigation li ul li ul {
 display: None;
 position: Absolute;
 left: 110px;
 top: 0px;
 z-index: 100;
 margin:0em 0em 0em 1.25em;
}

ul#navigation li ul li:hover > ul {
 display: Block;
}

/* Smartphone Menu */
#burger {
 display: None;
}

@media screen and (max-width: 380px) {
  ul#navigation li,
  ul#navigation li a {
  width: 100%;
 }

 #burger {
  display: Block;
  margin-right: 25px;
  /*-moz-appearance: None;
  -webkit-appearance: None;*/
  width: 25px;
  height: 25px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeAQAAAAATS5MPAAAAAnRSTlMAAHaTzTgAAAAUSURBVHjaY2DAC/7///8HN0EzvQD48y+tFbUTjAAAAABJRU5ErkJggg==");
  background-size: 25px 25px;
  background-position: Center Center;
  background-color: #97EDF4;
 
  vertical-align: Middle;
  border: None;
  outline: None;
  cursor: Pointer;
 }

 #burger:checked ~ ul#navigation {
  animation: fadeIn 1.2s;
  display: Block;
  margin-top: 5px;
 }

 #burger:not(:checked) ~ ul#navigation {
  display: None;
 }

 @keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
 }

}


/* Content Area*/


#main {
	display: block;
	/*width: 49.6%;*/
	width: 100%;
	max-width: 1170px;
	margin: 0em auto;
	padding: 0em ;
}
#main article {
	display: inline-block;
	width: 100%;
	background: #0fa1e0;
  	vertical-align: top;
	margin:  -0.10em 0em 0em 0em;
	padding: 0em 0em 0em 0em;
	text-align: center;
	border-radius: 5px; 
}
#main article p{
	margin:  -1.5em 0em 0em 0em;
	height: auto;
	/*padding: 0em 0em 0em 0em;*/
}
#main article img {	
	width:100%;
	max-width: 1170px;
	box-shadow: 0px 0px 10px -5px #4c4948;
	border-radius: 5px;
	margin: 0em 0em 0em 0em;
	text-align: center;
}

#main aside {
	display: inline-block;
	width: 49%;
	margin-left: 0%;
	padding: 1em 0em 0em 0em;
	vertical-align: top;
}
#main aside section {
	margin-bottom: 1.563em;
	background: #ffffff;
	border-bottom: 0.188em solid #E7590B;
	border-radius: 5px 5px 0px 0px;
}
#main aside img {
	/*max-width: 560px;*/
	box-shadow: 0px 0px 10px -5px #4c4948;
	border-radius: 5px;
}
#main aside h3 {
	padding: 1em 0em 0.5em 0.5em;
	margin: 0em 0em -2em 0em;
}
#main aside h4 {
	padding: 2em 0em 0em 0.5em;
	margin: -2em 0em -1em 0em;
}
#main aside section p{
	line-height: 1.3em;
	font-weight: 100;	
	margin: 0.5em 0em 0em 1em;
	padding: 0.3em 0.6em 0.5em 0em;
	text-align: justify;
}
	
#main article h2 {
	padding: 0em 0em 0em 0.5em;
	margin: -0.3em 0em 0em 0em;
	/*padding: 0.25em;
	text-align: left;*/
}
#main article p{
	line-height: 1.3em;
	font-weight: 100;
	color: #fff;
	margin: 0em 0em 1em 0.4em;
	padding: 0.5em 0.5em 0em 0em;
	text-align: justify;
}
#main article h3 {
	padding: 0em 0em 0em 0em;
	margin: 0em 0em 0em 0em;
}
#main article h4 {
	padding: 0em 0em 0em 0.5em;
	margin: 0em 0em 0em 0em;
}

#main aside section ul {
	padding: 0em 0em 0em 0.5em;
}

/* Footer*/
footer {
	display: block;
	background: #2F2C2C;
	text-align: center;
	width: 100%;
	max-width: 1170px;
	margin: auto;
}

footer ul {
	display: block;
	width: 100%;
	/*max-width: 80px;*/
	text-align: left;
	margin: 0px auto;
}







footer ul li {
	display: inline;
	font-size: 0.8em;
	line-height: 2.8em;
	color: #E2DBDB;
	padding: 0em 0.625em 0em 0.625em;
}
footer ul li a {
	color: #E2DBDB;
}
/* Mobile Style*/
@media screen and (max-width: 800px) {
	body {
		font-size: 100%;
	}
}
@media screen and (max-width: 580px) {
	#main aside, #main article, #video article, #buchen aside, #buchen article {
		width: 100%;
		display: block;
		margin:  -0.10em 0em 0em 0em;
		padding: 0.2em ;

	}
}
/*
@media screen and (min-width: 550px) {
	#nav.nav{
		display: block !important;
	}
}*/
@media screen and (max-width: 580px) {
	body {
		font-size: 100%;
	}
	/*
	#menubar ul li a.menubutton {
		display: block;
	}
	#nav {
		display: none;
		height: auto;
	}
	#nav ul li {
		display: block;
		margin: 0.3em 0em 0.3em 0em;
	}*/
}



/*Aufklapp Text*/
details {
	background-color: #89d5f9;

}
details details {
	background-color: #89d5f9;

	margin-left: 1em;
}



#buchen {
	display: block;
	/*width: 49.6%;*/
	max-width: 1170px;
	margin: 0em auto;
	padding: 0em ;
}
#buchen article {
	display: inline-block;
	width: 49.6%;
	background: #ffffff;
    background-color: #0fa1e0;
	vertical-align: top;
	margin:  -0.10em 0em 0em 0em;
	padding: 0em 0em 0em 0em;
	text-align: center;
	border-radius: 5px; 
}
#buchen article p{
	margin:  -1.5em 0em 0em 0em;
	height: auto;
	/*padding: 0em 0em 0em 0em;*/
}
#buchen article img {
	/*max-width: 560px;*/
	box-shadow: 0px 0px 10px -5px #4c4948;
	border-radius: 5px;
	margin: 0em 0em 0em 0em;
	text-align: center;
}

#buchen aside {
	display: inline-block;
	width: 100%;
	margin-left: 0%;
	padding: 1em 0em 0em 0em;
	vertical-align: top;
}
#buchen aside section {
	margin-bottom: 1.563em;
	background: #ffffff;
	border-bottom: 0.188em solid #E7590B;
}
#buchen aside img {
	/*max-width: 560px;*/
	box-shadow: 0px 0px 10px -5px #4c4948;
	border-radius: 5px;
}
#buchen aside h3 {
	padding: 1em 0em 0em 0.5em;
	margin: 0em 0em -2em 0em;
}
#buchen aside h4 {
	padding: 2em 0em 0em 0.5em;
	margin: -2em 0em -1em 0em;
}
#buchen aside section p{
	
	margin: 0em 0em 0em 0em;
}


#buchen article h2 {
	padding: 0em 0em 0em 0.5em;
	margin: 0em 0em 0em 0em;
	padding: 0.25em;
	text-align: left;
}
#buchen article p{
	line-height: 1.3em;
	font-weight: 100;
	color: #000;
	margin: -1em 0em 0em 1em;
	padding: 0.3em;
	text-align: justify;
}
#buchen article h3 {
	padding: 0em 0em 0em 0.5em;
	margin: 0em 0em 0em 0em;
}
#buchen article h4 {
	padding: 0em 0em 0em 0.5em;
	margin: 0em 0em 0em 0em;
	color: #fff;
}

#buchen aside section ul {
	padding: 0em 0em 0em 0.5em;
}

/* remove standard-styles */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border:none;
  border-radius: 0;
  font-size: 1em;
  width: 96%
} 


/* styling */
select {
  width:96%;
  height: 1.6em;
  border: 1px solid #bbb;
  /*padding:.75em 1em .5em 1em;  */
  box-shadow: 0 2px 1px 0 rgba(0,0,0,0.2);
  /*background-color:white;     */
   background-color: #9be8ee;

  background-image:url(select-arrow1.png);
  background-position: right;
  background-repeat: no-repeat;
}

select:hover {
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
}


/* hide browser-styling (arrow) in IE10 */
select::-ms-expand {
  display:none;
}


.lt-ie10 select {
    background-image: none;
	
}

:root{
	--akzentfarbe: #fefefe;
}

input[type='email'], 
input[type="text"]
 {
  border-radius: 0;  
  border:none;
  font-size: 1.3em;
  width: 98%;
 }	
/* remove standard-styles*/
input[type='email']:focus, 
input[type="text"]:focus
 {
  /* -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;*/
  border-radius: 0;  
  border:none;
  font-size: 1.5em;
  font-style:italic ;
  width: 98%;
  accent-color: rgb(255, 0, 0);
  background-color: rgb(255, 251, 0);
  --akzentfarbe: #0a06f8;
} 
/* graceful degradation for ie8 */
input[type='checkbox'],
input[type='radio'] {
  width:5%;
  float:left;
  margin-right: 0.4em;
  margin-top: 0.4em;
  background: #31B7F1 ;
  border:none;
  transform: scale(1.4);
}
/*anpassung messagefenster*/
textarea:focus
 {
	font-size: 1.5em;
  font-style:italic ;
 --akzentfarbe: #0a06f8;
}

::placeholder {
   color: var(--akzentfarbe);/*schriftfarbe wechseln bei focuserhalt*/
}


.responsive-video {
	position: relative;
	padding-bottom: 56%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.responsive-video iframe,  
.responsive-video object,  
.responsive-video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.container{
	max-width: 540px;
	width: 100%;
}
video {
  width: 100%;
  height: auto;
}

.table_box {
    border-radius:8px; 
    width : auto;
    height : auto;
    border : 1px solid #ffffff;
   /* padding : 10px*/
}
.m_date_toplist_first {
    background-color:#3772fc;

    font-weight:bold;
    padding : 1px;                                     
    border-top : 1px solid #ffffff;
    border-bottom : 1px solid #ffffff;
    border-left : 1px solid #ffffff;
}
.m_date_toplist {
    background-color:#3772fc;

    font-weight:bold;
    padding : 3px;
    border-top : 1px solid #ffffff;
    border-bottom : 1px solid #ffffff;
    border-left : 1px solid #ffffff;
}
.m_date_toplist_last {
    background-color:#3772fc;

    font-weight:bold;
    padding : 3px;
    border : 1px solid #ffffff;
}
.m_table_box {
    width : auto;
    height : auto;
    border : 1px solid #ffffff;
    padding : 10px
}

.m_tablecolumn {
    border-left : 1px solid #ffffff;
}

.m_table_lastcolumn {
    border-left : 1px solid #ffffff;
    border-right : 1px solid #ffffff;
}

.m_tablerow {
    border-left : 1px solid #ffffff;
    border-bottom : 1px solid #ffffff;
}    

.m_table_lastrow {
    border-left : 1px solid #ffffff;
    border-right : 1px solid #ffffff;
    border-bottom : 1px solid #ffffff;
}

.m_toplist {
    background-color:#0a3b88;

    font-weight:bold;
    padding : 3px;
}

/* text im Bild*/

.bild_beschriftung {
  position: relative;
}
.bild_beschriftung img {
  display: block;
}
.bild_beschriftung span {
  position: absolute;
  bottom: 0;
  left: 0;
  width: auto;
  color: #fff;
  text-align: center;
  height: 2em;
  line-height: 1.5em;
  border-top: 1px solid #ababab;
  background: #404040; /* Fallback IE 6-8 */
  background-color: rgba(40, 40, 40, 0.6);

}

#video {
	display: block;
	/*width: 49.6%;*/
	width: 100%;
	max-width: 1170px;
	margin: 0em auto;
	padding: 0em ;
}
#video article {
	display: inline-block;
	width: 32.6%;
	background: #ffffff;
	vertical-align: top;
	margin:  -0.10em 0em 0em 0em;
	padding: 0em 0em 0em 0em;
	text-align: center;
	border-radius: 5px; 
}
#video article p{
	margin:  -1.5em 0em 0em 0em;
	height: auto;
	/*padding: 0em 0em 0em 0em;*/
}
#video article img {	
	width:100%;
	max-width: 1170px;
	box-shadow: 0px 0px 10px -5px #4c4948;
	border-radius: 5px;
	margin: 0em 0em 0em 0em;
	text-align: center;
}



@media screen and (max-width: 580px) {
	#main aside, #main article, #video article, #buchen aside, #buchen article {
		width: 100%;
		display: inline-block;
		/*background: #0fa1e0;  */
		margin:  -0.10em 0em 0em 0em;
		padding: 0.2em ;

	}
}


/* ----- Lightbox ----- */

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }



.fotos {
	width : auto;
	height : auto;
	float : left;
	padding : 8px 0 12px 0;
	
}

/* ----- Vorschau Bild Thums 130x130----- */
.einbild {
	width : 130px;
	height : 130px;
	float : left;
	padding : 0px;
	border : 1px solid #ffffff;
	margin-right : 10px;
}
@media screen and (max-width: 800px) {
	.einbild  {
		width :160px;
	height : 160px;
		
		float : left;
	padding : 0px;
	border : 1px solid #ffffff;
	margin-right : 10px;

	}
}


/*--	Pos des Textes vor zurück   --*/	
#imageContainer>#hoverNav{ left:  0%;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
    background-color: #0fa1e0;
	display: block;
	}
	
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #0fa1e0;/*background-color: #fff; */   
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%	
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #0fa1e0;
	}
	
/* ----- Ende Lightbox ----- */