
body {
 background:#585858; /* Hintergrundfarbe-hell blau */
 color: #000000; /* Textfarbe schwarz*/
 margin: 0;
 padding: 1%;
 font-size: 100.01%; /* umgeht den Font-Size-Bug im Safari, älteren Operas und IE */
 font-family: verdana, arial, sans-serif ;

}

h1 { /* Die Überschrift*/
 font-size:medium;
 line-height: 0.8em;
 padding: 20px 0 5px 5%;
 margin: 0;
 border-bottom:1px dashed #aaa;}

.fleft {
 float: left;
 margin: 0 1em 0.2em 0; }


#box { /* Rahmen fur ganzem Fenster */
 font-size: 0.8em;
 width: 980px; /* zu lange Textbreite */
 margin: auto; /*  Zentrierung */
 border: 1px solid #aaa; /* Eine kleine optische Abgränzung */
 background:#E6E6E6 repeat-x;
 }

#kopf {background: url(bilder/lia4.jpg) no-repeat;  /* die oberste Zelle*/
      height:100px;
      padding:0px;
      margin:0px;
      line-height:40px;
      overflow:hidden; }

#kopf h1 {color: white;
         font-size:x-large;
         border:0px ;
         letter-spacing:0.009em;
         padding-left:4px;
         margin: 0px;
         }

#kopf  h3{
         color:#000000 ;
         font-size:small;
         padding: 0px;
         margin:0px;
         text-align:right;
         letter-spacing:2px;
         font-weight:bolder;}

#menu {
        background: #585858  ;
        color:#E6E6E6;
        padding:5px 5%;
        margin:0;}

#menu li{
       font-size:0.9em;
       font-weight:bolder;
       display: inline;
       list-style-type: none; /* Die Bullets */
       border-left: 1px solid white; /* Trennungsstrich */
       padding: 0 10px 0 15px;
}

 #menu li a{
       text-decoration:none;
       color:#E6E6E6;
}

a:link { color:#120A2A; text-decoration: underline; } /* Alle unbesuchten Links bekommen eine leicht bläuliche Farbe und werden unterstrichen, damit man Sie gleich im Text erkennt. */
a:visited { color:#120A2A; }
a:hover  { color: #120A2A; }

#menurecht  {background: #FFFFFF;
            background-position:80% 5px;
            color:#000000;
            width:26%;
            float: right;
            padding:20px 10px;
            margin:1%;
            border-left:1px dashed #aaa;
            font-size: 0.9em;
           }

#menurecht dt {font-size: medium;
               font-family: verdana, arial, sans-serif;
               padding: 5px;
               margin-top: 5px;
               border-top: 1px dotted #aaa;
               font-weight:bold;  }

#menurecht dd {padding: 0;
              margin: 0.2em 0;
              text-align:left;}

#inhalt {
         background:#E6E6E6; /* Hintergrund von Inhalt, hell blau */
         padding: 0 31% 10px 20px;
         line-height: 1.2em;
         text-align:justify;
}
#indexinhalt {
         background:#E6E6E6; /* Hintergrund von Inhalt, hell blau */
         padding: 0 31% 10px 20px;
         line-height: 1.2em;
         text-align:justify;
         margin: 0.1em 0;
         padding-left:50px;  padding-right:50px;    text-align:left;
}

img { /* alle Bilder bekommen keinen Rahmen */
 border:0;
 padding: 0px;
 max-width: 95%; /* gute Broser machen ein zu großes Bild, welches das Design sprengen würde, funktioniert beim IE leider nicht */
}
table {font-size: 0.9em; } /* Schriftgroesse in Tabellen */

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

.zoomeffekt {transition: transform 0.8s;
width: 400px;
height: 280px;
}
.zoomeffekt:hover,
.zoomeffekt:focus {
-ms-transform: scale (1.5); /* IE */
-webkit-transform: scle(1.5); /* Safari */
transform: scale(1.5);
}


.dropbtn {
  background-color: #585858;
  color: #E6E6E6;
  display: inline;
  list-style-type: none; /* Die Bullets */
  border-left: 1px solid white; /* Trennungsstrich */
  padding: 0 10px 0 15px;
  border: none;
  font-size: 100.01%; /* umgeht den Font-Size-Bug im Safari, älteren Operas und IE */
 font-family: verdana, arial, sans-serif ;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background: #585858  ;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: #E6E6E6;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #585858}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #585858;
}

.gallery {
        width: 20em;
        height: 15em;
        margin: 0 auto;
        overflow: hidden;
}

@media (min-width: 40em) {
        .gallery {
                width: 40em;
                height: 30em;
        }
}

@media (max-width: 60em) {
        .gallery {
                width: 100%;
                height: 45em;
        }
}

.gallery figure {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
        animation: slide 25s infinite ease-in-out
}

.gallery figcaption {
        position: absolute;
        left: 1em;
        bottom: 1em;
        color: white;
}

.gallery img {
        width: 100%;
        margin: 0;
        padding: 0;
}
/*Animation */

.gallery figure {
        height: 100%;
        animation: slide 18s infinite ease-in-out;
}

.gallery:hover figure {
        animation-play-state: paused;
}

@keyframes slide {
        0% {
                top: 0
        }
        12% {
                top: 0
        }
        16% {
                top: -100%
        }
        28% {
                top: -100%
        }
        32% {
                top: -200%
        }
        44% {
                top: -200%
        }
        48% {
                top: -300%
        }
        60% {
                top: -300%
        }
        65% {
                top: -400%
        }
        78% {
                top: -400%
        }
        83% {
                top: -500%
        }
        95% {
                top: -500%
        }
        100% {
                top: 0
        }
}