.Fueb {
 font-weight: bold;
 text-align: center;
 font-size: 25px;
}

/* Größe des FotoGalerie ---------------------------------------------------------------------------------------- */

#fotogalerie {width: 710px; height: 435px;   /* Breite und Höhe */
              padding: 10px;                 /* Innenabstand alle Seiten */
              border: 2px solid #FFD1C0;     /* Rand: stärke form farbe */
              background: #808080;           /* ### Hintergrundfarbe */
              position: relative;            /* relativ zum vorherigen element */
             }


/* Startbild und Text -------------------------------------------------------------------------------------------- */

#fotogalerie b.default {position: absolute;              /* Position innerhalb der FotoGalerie */
                        left: 10px;                      /* abstand links */
                        top: 10px;                       /* abstand oben */
                        width: 528px; height: 361px;     /* Breite und Höhe */
                        text-align: center;              /* Inhalt zentriert ausrichten */
                        /* border: 1px solid #FFFFFF;        Rand: stärke form farbe */
                       }

/* Startbild */
#fotogalerie b.default img {display: block;                      /* Darstellung: im Block - untereinander */
                            width: 200px; height: 200px;         /* Breite und Höhe */
                            margin: 0 auto 10px auto;            /* Außenabstand: oben, rechts, unten, links  */
                            border: 1px solid;                   /* Rand: stärke form */
                            border-color: #555 #ddd #eee #333;}  /* Rand-Farbe: oben, rechts, unten, links */

/* Text */
#fotogalerie b.default span {display: block;             /* Darstellung: im Block - untereinander */
                             color: #000000;             /* Textfarbe */
                             font-family: arial;         /* Schriftart */
                             font-weight: normal;        /* Schriftschnitt */
                             font-size: 16px;            /* Schriftgröße */
                             width: 518px;               /* Breite */
                             margin: 0 auto;             /* Außenabstand: oben/unten links/rechts */
                             /* border: 1px solid #00A0FF;  Rand: stärke form farbe */
                            }

/* Auswahlliste der Bilder ---------------------------------------------------------------------------------------- */
/* Ungeordnete Liste */
#fotogalerie ul {list-style: none;               /* Kein Aufzählungszeichen */
                 padding: 0;                     /* Innenabstand: alle */
                 margin: 0;                      /* Außenabstand: alle */
                 width: 180px;                   /* Breite */
                 position: relative;             /* relativ zum vorherigen element */
                 float: right;                   /* rechts von den Elementen plaziert, die es umfließen */
                 /* border: 1px solid #00FF00;      Rand: stärke form farbe */
                }

/* Ungeordnete Liste - Listenelement */
#fotogalerie ul li {display: inline;             /* Darstellung: nebeneinander */
                    width: 52px; height: 52px;   /* Breite und Höhe */
                    float: left;                 /* links von den Elementen plaziert, die es umfließen */
                    margin: 0 0 5px 5px;         /* Außenabstand: oben, rechts, unten, links */
                    /* border: 1px solid #FF00FF;  Rand: stärke form farbe */
                   }

/* Vorgaben für Hyperlink */
#fotogalerie ul li a {display: block;                            /* Darstellung: im Block - untereinander */
                      width: 50px; height: 50px;                 /* Breite und Höhe */
                      text-decoration: none;                     /* Keine Hervorhebung */
                      border: 1px solid;                         /* Rand: stärke form */
                      border-color: #eee #555 #333 #ddd;}        /* Rand-Farbe: oben, rechts, unten, links */

/* Hyperlink - Text zum Bild */
#fotogalerie ul li a span {display: none; }       /* Darstellung: keine Anzeige */

/* Hyperlink - Bild */
#fotogalerie ul li a img {display: block;                /* Darstellung: im Block - untereinander */
                          width: 50px; height: 50px;     /* Breite und Höhe */
                          border: 0; }                   /* Rand: alle */


/* Anzeige der Bilder bei hover -----------------------------------------------------------------------------------

:visited
         Besuchter Hyperlink
:active
         Aktiver Hyperlink (Wenn der User mit der Maus auf den Link klickt.)
:hover
         Mouseover-Effekt. Wenn der User den Mauszeiger über einen Hyperlink oder ein anderes Element bewegt.
:focus
         Wenn ein Element den Fokus hat. Z.B. Texteingabefelder, in denen der Cursor steht.
*/
/* Ungeordnete Liste - Listenelement */
#fotogalerie ul li a:hover {white-space: normal;                 /* Zeilenumbruch */
                            border-color: #555 #ddd #eee #333;   /* Rand-Farbe: oben, rechts, unten, links */
                            background: #FFD1C0;                 /* Hintergrundfarbe */
                           }

/* Ungeordnete Liste - Listenelement / bei fett */
#fotogalerie ul li a:hover b {position: absolute;                /* Position innerhalb der FotoGalerie */
                              left: -532px;                      /* abstand links */
                              top: 0;                            /* abstand oben */
                              width: 532px; height: 401px;       /* Breite und Höhe */
                              text-align: center;                /* Inhalt zentriert ausrichten */
                              background: #808080;               /* ### Hintergrundfarbe */
                              z-index: 2;}                      /* Layer / Ebene */

/* Hyperlink - Text zum Bild */
#fotogalerie ul li a:hover span {display: block;         /* Darstellung: im Block - untereinander */
                                 color: #000000;         /* Textfarbe */
                                 background: #FCFCDF;    /* Hintergrundfarbe */
                                 font-family: arial;     /* Schriftart */
                                 font-weight: normal;    /* Schriftschnitt */
                                 font-size: 16px;        /* Schriftgröße */
                                 width: 532px;           /* Breite */
                                 margin: 0 auto;         /* Außenabstand: oben/unten links/rechts */
                                }

/* Hyperlink - Bild */
#fotogalerie ul li a:hover img {margin: 0 auto 10px auto;                /* Außenabstand: oben, rechts, unten, links */
                                width: auto; height: auto;               /* Breite und Höhe */
                                border: 1px solid;                       /* Rand: stärke form */
                                border-color: #555 #ddd #eee #333;       /* Rand-Farbe: oben, rechts, unten, links */
                               }


/* Anzeige der Bilder bei anklicken / Mouseover -------------------------------------------------------------------- */
/* Ungeordnete Liste - Listenelement */
#fotogalerie ul li a:active,
#fotogalerie ul li a:focus {white-space: normal;                 /* Zeilenumbruch */
                            border-color: #555 #ddd #eee #333;   /* Rand-Farbe: oben, rechts, unten, links */
                            background: #FFEBC0;                /* Hintergrundfarbe */
                           }

/* Ungeordnete Liste - Listenelement / bei fett */
#fotogalerie ul li a:active b,
#fotogalerie ul li a:focus b {position: absolute;                /* Position innerhalb der FotoGalerie */
                              left: -532px;                      /* abstand links */
                              top: 0;                            /* abstand oben */
                              width: 532px; height: 401px;       /* Breite und Höhe */
                              text-align: center;                /* Inhalt zentriert ausrichten */
                              background: #808080;               /* ### Hintergrundfarbe */
                              z-index: 1;}                      /* Layer / Ebene */

/* Hyperlink - Text zum Bild */
#fotogalerie ul li a:active span,
#fotogalerie ul li a:focus span {display: block;         /* Darstellung: im Block - untereinander */
                                 background: #FCFCDF;    /* Hintergrundfarbe */
                                 color: #000000;         /* Textfarbe */
                                 font-family: arial;     /* Schriftart */
                                 font-weight: normal;    /* Schriftschnitt */
                                 font-size: 16px;        /* Schriftgröße */
                                 width: 532px;           /* Breite */
                                 margin: 0 auto;}        /* Außenabstand: oben/unten links/rechts */

/* Hyperlink - Bild */
#fotogalerie ul li a:active img,
#fotogalerie ul li a:focus img{margin: 0 auto 10px auto;                 /* Außenabstand: oben, rechts, unten, links */
                               width: auto; height: auto;                /* Breite und Höhe */
                               border: 1px solid;                        /* Rand: stärke form */
                               border-color: #555 #ddd #eee #333;       /* Rand-Farbe: oben, rechts, unten, links */
                              }