/* HAREROD CSS for LBR MAH2204111915 */

@viewport {
   width:	device-width;
   zoom:	1.0;
}

body {
  background-color:	#114;
  font-family:			Verdana, Arial, Helvetica, sans-serif;
  font-weight:			normal;
  font-style:				normal;
  color:						navy;
  font-size:				14px;
}

#Seite {
  width:			95%;
  min-width:	540px;
  max-width:	1080px;
  margin:			auto;
}

#Header {
  clear:				both; 
  height:				150px;
  /*min-width: 540px;*/
  /*max-width: 1000px;*/
  background-color:	#fff; 
  font-size:		0.9em; 
  font-weight:	bold; 
}

.header-image {
  width:						145px;
  height:						120px;
  float:						left;
  background-color:	#ffc;
  padding:					20px 0px 10px 40px;
  margin-right:			20px;
}

.header-image img { width:120px; }

h1 {
  padding-top:	18px;
  margin-left:	1em;
  margin:				0;
  font-family:	Verdana, Arial, Helvetica, sans-serif;
  font-size:		45px;
}

h2 {
  padding-top:	25px;
  margin-left:	1em;
  margin:				0;
  font-family:	Verdana, Arial, Helvetica, sans-serif;
  font-size:		25px;
}

h3 {
  padding-top:		15px;
  padding-bottom:	0px;
  margin:					0;
  margin-bottom:	0;
  font-family:		Verdana, Arial, Helvetica, sans-serif;
  font-size:			20px;
}

hr {
  clear:		both; 
  margin:		0;
}
	
#Main {	
  background-color:	#fff; 
}

#Main p { 
  font-size:		0.8em; 
  font-weight:	normal; 
}
	
#Navigation {
  float:		top;
  width:		100%;
  height:		auto;
  /*min-width: 540px;*/
  /*max-width: 1000px;*/
  padding-bottom:		10px;
  display:					inline-block;
  background-color:	#ffc;
  clear:						both;
  border-top:			1px navy solid; 
  border-bottom:	1px navy solid; 
}

#Navigation p{
}

#Navigation li
{
	float:		left;
	list-style:	none;	
}

#Links li
{
	float:						left;
	margin-left:			5px;
	margin-bottom:		5px;
	width:						110px;
	height:						34px;
	background-color:	white;
	border:						1px navy solid;
	border-radius:		4px 4px 4px 4px;
	padding-left:			0.9em;
	padding-right:		0.9em;
	line-height:			32px;
	text-align:				center;
}

#Links li.active {
  background-color:	#bbf;
}


#Links li:hover {
  background-color:	#bbf;
}


.language-active 
{
	padding-top:	4px;
	height:				25px;
}

.language-inactive{ 
	height:		15px;
}

#Links p{
  background-color:	#fff;
  padding:		10px;
  border:		1px solid navy;
}

#Links p.active {
  background-color:	#bbf;
}

#Links a {
  text-decoration:	none;
  font-weight:			bold;
}

#Inhalt {
	line-height: 		140%;
	display:				inline-block;
	width:					auto;
	margin-left:		45px;
	min-width:			16em; 
	/*max-width:		50em; */
	max-width:			90%;
}

div#Inhalt {
  margin-left:	45px;
  min-width:		16em; 
  /*max-width: 50em; */
  max-width:		90%;
}

#Inhalt p {
	line-height: 		140%;
  padding-top:		0.3em;
  padding-bottom:	0.7em;
  margin:					0px;
  margin-bottom:	0px;
  font-family:		Verdana, Arial, Helvetica, sans-serif;
  font-weight:		normal;
  font-style:			normal;
  color:					navy;
  font-size:			14px;
}

aside {
  width: 						30%;
  padding-left:			15px;
  margin-left: 			15px;
  float: 						right;
  font-style: 			italic;
  background-color: lightgray;
}

pre {
  padding-top:		0px;
  padding-bottom:	1em;
  margin:					0px;
  margin-bottom:	0px;
  font-family:		courier;
  font-weight:		normal;
  font-style:			normal;
  color:					navy;
  font-size:			16px;
}

#Footer {
  padding:		20px;
  font-size:	11px;
}


/* use if objects should not overflow container */
/* simple adds some empty content with property clear after last element */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


/* START js stuff */
.previmg {
	border-radius:	5px;
	cursor: 				pointer;
	transition:			0.8s;
	float:					left;
	margin-right:		10px;
	margin-bottom:	10px;
	width: 					300px;
	height:					200px;
	object-fit:			contain;
	background-color: #202020;
}

.previmg:hover {opacity: 0.8;}

/* picture info hover text */
.picInfo {
  display: 					none;		/* Hidden by default */
  z-index: 					1;			/* Sit on top */
  font-family:			Verdana, Arial, Helvetica, sans-serif;
  font-weight:			normal;
  font-style:				normal;
  color:						rgb(240,240,192);
  font-size:				14px;	
  background-color: rgb(0,0,0); 			/* Fallback color */
  background-color: rgba(0,0,0,0.4); 	/* Black w/ opacity */
	text-align: 			center;
}


/* The Modal (background) */
.modal {
	display: 					none;		/* Hidden by default */
	position:					fixed;	/* Stay in place */
	z-index: 					1;			/* Sit on top */
	left: 						0;
	top: 							0;
	width: 						100%;		/* Full width */
	height:						100%;		/* Full height */
	object-fit:				contain;
	overflow:					hidden;	/* Enable scroll if needed */
	background-color:	rgb(0,0,0); 			/* Fallback color */
	background-color:	rgba(0,0,0,0.9); 	/* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
	max-width:	100%;
	max-height:	100%;
	position:		absolute;
	top:0; left:0; right:0; bottom:0;
	margin:			auto;
	display:		block;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
    object-fit: contain;
  }
}
/* END js stuff */