body{
    max-width: 52em;
    margin: 0em auto;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #2c2c2c;
	line-height: 1.566;	
	padding: 0px;
	overflow:auto;
	background-color:rgba(208, 208, 208, 1);
	
}


/*
header {
  position: relative;
  height: 99.5vh; 	
	margin: 0;
	padding: 0;
}
header, h1, h2, h3{
position: absolute;
top: 2em;
}
header h2{
position: absolute;
top: 5em;
}
header p{
position: absolute;
top: 6em;
}
*/


p {
margin: 1.3em 0 1.3em 0;
}

a:link, a:visited, a:hover {
	color: rgb(191, 35, 35);
	text-decoration: none;
}
a:hover {
	background-color: #efdfd2;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Arial,sans-serif;
	margin: 0px;
	padding: 0px;
}

h1{
  	font-family: Verdana,Arial,sans-serif;
	 font-size: 116%;
	 color:#71925D;
	 margin-top: 0.75em;
	 margin-bottom: 0.5em;
}

h2{
 font-size: 150%;
 color: #663333;
}

h3, h4, h5, h6 {
 font-size: 100%;
 color: #334d55;
}

img.banner {
 border: 1px solid #CCCCCC;
 border-radius: 25% 40% 20% 45%;
}

input{
	color: #663333;
	background-color: #D1BDB5;
	font-family: Georgia, "Times New Roman", Times, serif;
    border-radius: 0.5em;
}

button{
	color: #663333;
	background-color: #D1BDB5;
	font-family: Georgia, "Times New Roman", Times, serif;
    border-radius: 0.5em;
}

dialog{
	font-size: 1.2em;
	background-color: #D1BDB5; 
	border: 10px solid #663333;
  	border-radius: 0.5em;
  /* transition: all .25s ease-in;	
   opacity: 0.7; */
}

dialog button{
	color: white;
	background-color: #663333;
	font-size: 1.35em;
	padding: 2px 2px 2px 2px;
  	border-radius: 0.5em;
	cursor: auto;
}

dialog p {
	margin: 0 0 0 0;
}

/* Dreieck an Sprechblase */
dialog::before {
  	content: "";
  	position: absolute;
  	top: -2em;
  	left: 35%;
  	margin-left: -9px;
  	border-width: 19px;
  	border-style: solid;
  	border-color:  transparent transparent #663333 transparent ;
}
/*
.bgimage {
	margin: 0;
	background-image: url("../images/Esel.jpg");
	min-height: 95vh; 
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: block;
}
*/
.nav{
	margin: 0;
	padding: 10px 10px 10px 10px;
	font-size: 120%;
 	 color:#92745d;
}

.nav h2{
	margin: 0.8em 0 0.4em 0;
	font-size: 110%;
 	color:#71925D;
}


.nav ul {
	list-style: none; 
	margin: 0; 
	padding: 0;
}

.nav ul a:link, .nav ul a:visited {
	display: block;
	line-height: 120%;
} 

.nav li {
	padding: 2px 0 2px 0;
	/*list-style-image: url(../images/penlogo_an.gif);*/
}

.nav a:link{
	padding: 10px 2px 16px 20px;
}

.nav a:hover{
	padding: 10px 2px 16px 15px;
	background-color: #DED0CB;
}

.nav a:active{
	background-color: #F4D1CC;
	padding: 10px 2px 16px 22px;
}

.nav a:visited{
    color: #AA6666;
}

.description{
	font-size: 0.82em;
	font-style: inherit ;
	color: #AB6363;
}

.description::before {
	content: ': ';
}

.logo {
  	width: 1.5em;
  	line-height: 1.1em;
	background-color: #bbcea3;
	/*color:#71925D;*/
	color: #AB6363;
	letter-spacing: 0.01em;
	margin: 0.5em 0 1em 1.5em;
	border-radius: 0.3em;
	padding: 0.2em;
}

.news{
	font-size: 0.82em;
	font-style: inherit ;
	color: #AB6363;
	margin: 1em 1em 1em 2em;
}


#navBar{
	position: fixed;
	top: 0em;
	right: 0em;
	z-index:5;
 	display: flex;
 	align-items: center;
 	justify-content: center;
	/*width: 100%;*/
	margin: 0em;
	padding: 0em 0.3em 0 0.3em;
	font-family: Arial,sans-serif;
	font-size: 100%;
	border-radius: 0.5em;
	background-color: rgba(233, 233, 233, 0.93);
	opacity: 95%;
}

#navBar a:hover{
	background-color: #D6E3C6;
	border-radius: 0.5em;
}

#navBar img {
	border: 0;
	/*border-radius: 0.4em; */
	padding: 0.2em  0.5em  0.2em  0.5em;
	vertical-align: middle;
}

#navtag {
	position: absolute;
	top: 1.7em;
  	right: 1.6em; 
 	display: flex;
 	align-items: center;
 	justify-content: center;
	z-index: 1;
  	width: 7.5em;
  	line-height: 1.0em;
	color: #FBEEEE; 
	background-color: #C1D6A7;
	opacity: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: 0.05em;
	border-radius: 0.5em;
}

#navtag img{
	border: 0;
	border-radius: 0.5em;
/*	margin: 0.1em; */
	padding: 0.1em  0.9em  0.1em  0.9em;
	vertical-align: middle;
}

#navtag a:hover{
    background-color: #D6E3C6;
	border-radius: 0.5em;
}



@media print {
  #navBar, #navtag, #tickfield {
    display: none;
   }
}


#content{
	margin: 0em 0 0 0;
	padding: 8.5em 1.75em 2em 2em;
	overflow: auto;
 	background-color:#FFFFFE;
	-ms-hyphens: auto;
  	-webkit-hyphens: auto;
  	hyphens: auto;  
}

#content img {
border: none;
border-radius: 0;
}

#siteInfo{
  	position: relative;
  	bottom: 0;
  	left: 0;
  	padding: .5em .5em .5em .5em;
	display: block;
	border-top: 1px solid #aaaaaa;
	font-size: 0.85em;
	color: #aaaaaa;
	background-color:#eeeeee;
}

#siteInfo img{
	border: 0;
	padding: 0.5em;
	vertical-align: middle;
}


.subtitle{
	color: #334c55;
	margin-top: 8px;
	font-size: 105%;
}

.copyright{
	border-top: 1px solid #cccccc;
	color: #b2b2b2;
	font-size: 100%;
	padding: 0.9em;
	margin-top: 2em;
	height: 2.5em;
}

.emphasize{
 	border: 0.05em solid #663333;
	padding: 1px 2px 1px 2px;
	border-radius: 0.3em;
}

.kasten{
	margin-top: 2.5em;
	border: 1px solid #bcbcbc;
	padding:0.2em 0.75em;
}



/** Tooltips **/

/**** 
 <div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div> 
***/

 /* Tooltip container */
 
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; 
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 4em;
  background-color: rgba(31, 146, 112, 0.99);;
  color: #FBEEEE;
  text-align: center;
  padding: 2px 3px 2px 3px;
  border-radius: 10px;
  font-size: 90%;
  line-height: 1.1em;
  position: absolute;
  z-index: 1;
  bottom: 40%;
  left: 35%;
  margin-left: -20px;
  opacity: 0;
  transition: opacity 0.4s; 
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 36%;
  margin-left: -9px;
  border-width: 11px;
  border-style: solid;
  border-color: #428049 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
} 

/*#tickfield {
font-size: 120%;
color:#666666;
border-top: 0px solid #cccccc;
border-right: 0px solid #cccccc;
border-bottom: 0px solid #cccccc;
border-left: 0px solid #cccccc;
padding: 2px 2px 2px 2px;
}*/

/*
section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  vertical-align: top;
}

section p {
  padding: 1em 1em 1em 1em;	
}

section h2 {
  grid-column: 1 / -1;
}
*/

  /* 
.columns {
    column-width: 12em;
 	max-width: 40em;
} 

.columns {  
  columns: 3 8em;  
  column-rule: 5px dotted gold;  
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;  
}


dialog:::backdrop, #backdrop {      
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);    
}
*/