@charset "utf-8";
/* CSS Document */

body {
  min-height: 100vh;
  min-width: 80vw;
  max-width: 95vw;
  background-color:#FFFFFF;
	font-family:Verdana, Geneva, sans-serif;
  font-size:14px;
//  max-width:1024px;
  /* hyphens */
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;   
}

#wrapper {
  color: rgb(28,28,28);
  width: 80%;
  margin: 0px auto;
  padding-right: 10px;
  position: relative;
  background-color: rgba(255, 255, 255, 0.9);
}

header { 
//  background-color: rgba(255, 0, 0, 0.5);
	clear:both;
	color:#7A7B7B;
//	font-size:large;
//	font-style:normal;
//	font-weight:bolder;
	padding-top:10px;
	padding-bottom:10px;
  margin: 0px 0px;
	width: 100%;
}

nav {
  width: 18%;
  margin: 0 0;
}

main {
  width: 100%;
  float:left;
  line-height: 1.5;
}
	
main.mainsmall {
  width: 80%;
  float:left;
  line-height: 1.5;
}

main h2 {
  font-size: 120%;
	font-weight:bold;
 	margin-bottom: 0px;
	margin-top: 0px;
}

main h3 {
  font-size: 110%;
	font-weight:bold;
 	margin-bottom: 0px;
	margin-top: 0px;
}	

main h4 {
  font-size: 105%;
	font-weight:bold;
 	margin-bottom: 0px;
	margin-top: 0px;
}	

main ul {
	font-size:100%;
  margin:0px 0px; 
  padding:0px;
  width:100%;
  list-style-type:circle;
}	

main ul li {
	font-size:100%;
  text-decoration:none;
	margin-left:20px;
}

aside {
  width: 1%;
  float: right;
  margin: 0 0;
}

a:hover {
	font-size:100%;
//	font-weight:bold;
  background-color: rgb(204, 204, 179);
}

footer { 
	clear:both;
	color:#B20059;
	font-style:normal;
	font-weight:bolder;
  margin: 0px 0px;
	padding:5px 0px 5px 0px;
	width: 100%;
  bottom: 0;
  position: relative;
}

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

.bildmittext {position: relative;}
.bildmittext img{display: block;}
.bildmittext span {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #FFFFFF;
  text-align: center;
  border-top: 1px solid #ababab;
  background: #B0BEC5;
}

/** format Lightbox to show pictures in a frame **/
#lightbox{
	background-color:#eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	}
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; } 

@media screen and (max-width: 600px) {//**https://alicepeters.de/blog/reines-css-html-burger-menue/
  #wrapper {
    width: 100%;
    margin: 0 0 0 0;
    position: relative;
  }
}