@charset "UTF-8";
* {
        margin: 0px;
        padding: 0px;
}

html, body  {
        height: 100%;
}
body  {
        font: 0.8em Verdana, Arial, Helvetica, sans-serif;
        background-color: #BFBFBF;
        color: #000000;
}

h1, h2, h3, h4, h5, h6 {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #5F5F5F;
        padding-top: 0.5em;
        padding-bottom: 0.2em;
        font-weight: bold;
        text-align: center;
}

h1 {
   font-size: 2em;
}

h2 {
   padding-top: 1em;
   text-decoration: underline;
}

p {
   margin-bottom: 1em;
}

#wrapper {
   min-height: 101%;
   width: 90%;
   margin: 0 auto;
   background-color: #DFDFDF;
   /*background-position: 0px 0px;*/
}

a:link, a:visited, a:active, a:hover {
   outline: none;
}
/* ------------------ Ende allgemeine Angaben --------------------*/

/* ------------------ Anfang Kopfdefinition --------------------*/
#kopfbereich {
   position: relative;
   height: 86px;
   background: url(../bilder/himmel.jpg) no-repeat;
   text-align: center;
   color: #5F5F5F;   
}

#kopfbereich p {
   position: relative;
   top: -25px;
   font-size: small;
   font-weight:bold;
}

#logo_l {
   position: absolute;
   top: 5px;
   left: 0;
}

#ueberschrift {
   color: #5F5F5F;
   margin-left: 62px;
   margin-right: 62px;
   height: 53px;
   padding-top:25px;
   font-size: 2em;
   font-weight: bold;
   border-bottom: 3px solid #5F5F5F;
}

#logo_r {
   position: absolute;
   right: 0;
   top: 5px;
}
/* ------------------ Ende Kopfdefinition --------------------*/

/* -------------------- Start Navigation  --------------------*/
#navigation {
   position: relative;
   width: 606px;
   height: 22px;
   top: 0;
   margin: 0 auto;
   z-index: 7;
   background: #DFDFDF;
}

#navigation ul {
   font-size: 0.8em;
   font-weight: bold;
   height: 22px;
   list-style:none;

}

#navigation ul li {
   float: left;
   width: 100px;
   height: 20px;
   padding-top: 1px;
   padding-left: 1px;
   text-align: center;
}

#navigation ul a {
   height: 20px;
   padding-top:3px;
   color: #DFDFDF;
   text-decoration: none;
   display: block;
   background-image: url(../bilder/button_out.jpg);
   background-repeat: no-repeat;
}

*+ html #navigation ul a {
   padding-top: 4px;
}

#navigation ul a.aktseite {
   color: #009F00;
}

#navigation ul a:hover {
   color: black;
   height: 20px;
   background-image: url(../bilder/button_over.jpg);
   background-repeat: no-repeat;
}

#navigation ul a.aktseite:hover {
   color: #009F00;
   cursor: default;
   background-image: url(../bilder/button_out.jpg);
   background-repeat: no-repeat;
}

#navigation ul ul {
   list-style: none;
   position: absolute;
   left:-9999px;
   font-size: 0.9em;
   position: relative;
}

#navigation ul li:hover ul,
#navigation ul li.sfhover ul {
   left: auto;
}

#navigation ul li li {
   float: none;
   width: 100px;
   height: 20px;
   text-align: center;
   margin-top:-3px;
}

#navigation ul li li a {
   height: 20px;

   text-decoration: none;
   display:block;
   background-image: url(../bilder/button_out.jpg);
   background-repeat: no-repeat;
}

#navigation ul li li a:hover {
   height: 20px;
   color: black;
   background-image: url(../bilder/button_over.jpg);
   background-repeat: no-repeat;
}
/* ------------------ Ende Navigation --------------------*/

/* ------------------ Anfang Datenbereich --------------------*/
#datenbereich {
   position: absolute;
   /*min-height: 714px; /* gleiche Größe wie Navigationsleiste */
   width: 90%;
   min-height: 101%;
   margin: 0;
   background: #DFDFDF url(../bilder/logo_hg.gif);
   font-size: 1em;
   text-align: center;
}

#datenkopf {
   position: relative;
   min-height: 50%;
   width: 100%;
   margin: 0 auto;
   padding-bottom: 10px;
   border-bottom: 3px solid #5F5F5F;
}

#datenkopf img.bild_normal {
   position: relative;
   left: 20px;
   top: 10px;
   width: 35%;
   float: left;
   margin-top: 10px;
   margin-right: 30px;
   margin-bottom: 20px;
}

#datenkopf div {
   padding-right: 30px;
   padding-left: 30px;
}
#datenseite {
   position: relative;
   height: 100%;
   width: 80%;
   margin: 0 auto;
   padding-bottom: 10px;
   font-size: 1.2em;
   line-height: 1.5;
}

/*#datenseite .bild_popup {*/
.bild_popup {
    position: fixed;
    right: 7%;
    top: 120px;
    border: 3px solid #7F7F7F;
    padding: 3px;
    height: 320px;
    /*height: 380px;*/
    display: none;
}

/*#datenseite a:hover .bild_popup {*/
a:hover .bild_popup {
    display: block;
}

#datenlinks {
   position: relative;
   left: 0;
   /*top: 55%;*/
   height: 100%;
   width: 48%;
   margin: 0 5px 0 5px;
   padding-right: 10px;
   float:left;
}

#datenlinks img {
   width: 75%;
   padding-bottom: 10px;
}

#datenrechts {
   position: relative;
   width: 47%;
   height: 100%;
   left: -1%;
   /*top: 55%;*/
   padding: 0 5px 0 10px;
   float:right;
   border-left: 3px solid #5F5F5F;
}

#datenrechts img {
   width: 75%;
   padding-bottom: 10px;
}

/* --------------------  Ende Datenbereich -----------------------*/


/* ------------------ Spezielle Definitionen --------------------*/
/* ------------------ Google-Map in Kontakt  --------------------*/
#googlemap {
   margin: auto;
   width: 460px;
   height: 400px;
   padding:5px;
   font-size: 70%;
   font-weight: bold;
   /*display: block;*/
   border: 3px solid #993366;
   background-color: white;
}

/* ------------------ Bildergalerie --------------------*/

#bildliste {
   position: fixed;
   overflow: scroll;
   left: 6%;
   top: 120px;
   height: 390px;
   width: 45%;
   /*width: 570px;*/
   overflow: scroll;
   color: #7F7F7F;
}


#bildliste h2 {
   margin: 0;
   padding: 0;
   margin-bottom: 5px;
}

#bildliste table {
   overflow: scroll;
   empty-cells: show;
}

#bildliste td {
   text-align: center;
   /*width: 104px;*/
   width: 5%;
}

#bildliste img {
   border: 0;
}

#bildliste .preview {
    position: fixed;
    right: 7%;
    top: 120px;
    border: 3px solid #7F7F7F;
    padding: 3px;
    height: 320px;
    /*height: 380px;*/
    display: none;
}

#bildliste a:hover .preview {
    display: block;
}

#bildliste td.bildlink {
    background-image: url(../bilder/button_out.jpg);
    font-size: 0.6em;
    font-weight: bold;
}

#bildliste td.bildlink a {
    color: black;
}
/* ----------     Ende   Bildershow             ---------- */

/* Abweichend von der'normalen' id 'inhalt' wird hier die Überschrift (<h3>) und der Text linksbündig
   dargestellt, z. B. auf der Seite 'Impressum'. Die Breite der Seite ist so groß wie #navigation */

.seitenende {
   text-align: center;
}

.textlinks {
   width: 714px;
   margin:0 auto;
   text-align: left;
}

.textlinks h3 {
   text-align: inherit;
   padding-top: 10px;
   text-decoration: underline;
}

.textmitte {
   text-align: center;
}

.textrechts {
   text-align: right;
}

.textoben {
   vertical-align: top;
}

.clearfloat {
   clear: both;
}

.abschnitt {
   display: block;
   width: 96%;
   line-height: 1.5em;
   font-size: 1em;
   font-weight: bold;
   text-align: center;
   border-bottom: 3px solid #7F7F7F;
   margin: 1em auto;
   padding-bottom: 0.5em;
}

.trennlinie { /* Wird z.B. Index.shtml benutzt, um Bildschirmbereiche voneinander abzuteilen,
                 wenn der obere kleiner als der untere Teil ist */
   border-bottom: 3px solid #5F5F5F;
}

a.begriff { /* Begriffserklärung */
   color : #5F5F5F;
   font-style: italic;
   font-weight: bold;
   text-decoration: none;
}