body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  margin-top: 4em;
  background-color: #efefef;
  background-image: url("../img/cream-paper.jpg");
  background-attachment: scroll;
  background-repeat: repeat;
  background-position: top left;
}

ul {
  font-size: small;
  margin-left: 25px;
  margin-right: 25px; 
}

#navibereich li {
  display: inline;            /* Listenelemente nebeneinander */
  list-style-type: none;      /* Aufzählungszeichen entfernen */
  font-size: medium;
}

#navibereich {
  background-color: #F7FFC3;        /* Hintergrundfarbe für die Navigation */
  padding: 4px 0;                   /* Innenabstand: oben/unten 4px, li/re 0 */
  border-top: 3px solid #668BCC;    /* Rahmenlinie oben */
  border-bottom: 3px solid #668BCC; /* Rahmenlinie unten */
  margin: 0;                        /* Keinen Außenabstand */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

#navibereich a {
  color: black;                  /* Schriftfarbe schwarz */ 
  text-decoration: none;         /* Unterstreichung entfernen */ 
  padding: 4px 8px;              /* oben/unten 4px, re/li 8px */
}

#navibereich a:hover {
  background-color: #EDEDF8;
}

#navibereich a:hover,        
#home #navi01 a,
#stories #navi02 a,
#stories_en #navi03 a,
#contact #navi04 a {
  background-color: #c3d9ff;
  background-image: url("../img/farbverlauf.png");/* Hintergrundgrafik einfügen */
  background-repeat: repeat-x;           /* von links nach rechts wiederholen */
  background-position: top left;         /* oben links beginnen */
}

#head {
  font-size: x-large;
  font-weight: bold;
  margin-left: 25px;
  margin-right: 25px;
}

#regtxt {
  font-size: small;
  margin-left: 25px;
  margin-right: 25px;
}

#regintro {
  font-size: medium;
  font-weight: bold;
  margin-left: 25px;
  margin-right: 25px;
}

#storyhead {
  font-size: x-large;
  font-weight: bold;
  margin-left: 25px;
  margin-right: 25px;
}

#storytxt {
  font-size: small;
  margin-left: 25px;
  margin-right: 25px;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

#storyintro {
 font-size: small;
  margin-left: 25px;
  margin-right: 25px;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  margin-bottom: 3em;
}

#storyintro_ind {
  font-size: small;
  padding-left: 1.5em;
  text-indent: -1.5em;
  margin-left: 25px;
  margin-right: 25px;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  margin-top: -2.5em;
  margin-bottom: 3em;
}

.center_content {
  display: table;
  margin-left: auto;
  margin-right: auto;	
}

.center_element  {
  display: table-cell; 
}

#arrownav {
  vertical-align: middle;
  text-align: center;
  position: fixed;
  top: 3px;
}

#arrownav a {
  color: black;
  text-decoration: none;
  text-underline: none;
}

.mirror {
  -webkit-transform: scale(-1, 1);  /* für Safari, Android */
  -ms-transform: scale(-1, 1);      /* für IE9 */
  transform: scale(-1, 1);
}

#mirrored {
  display:inline-block;
}

#contacthead {
  font-size: x-large;
  font-weight: bold;
  margin-left: 25px;
  margin-right: 25px;
}

#contactintro {
  font-size: medium;
  margin-left: 25px;
  margin-right: 25px;
}

#contacttxt {
  font-size: small;
  margin-left: 25px;
  margin-right: 25px;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    font-style: italic;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 50vw;
    background-color: rgba(221, 221, 221, .99);
    opacity: 0.9;
    color: black;
    text-align: center;
    border-radius: 6px;
    border-style: outset;    
    padding: 5px 0;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    font-style: italic;
    font-size: small;


    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

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