/*
Angaben können ein bis vier Werte, die wie folgt verwendet werden:
Ein Wert   = für alle vier Seiten
Zwei Werte = oben und unten, links und rechts
Drei Werte = oben, links und rechts, unten
Vier Werte = oben, rechts, unten, links

auto = Browser berechnet selbst
*/

html{ overflow-y:scroll; }
/* Scrollbalker erzwingen */

body {
font-family: Arial;
text-align: center;
background-color: #f2fff6;
margin-top: 20px;
padding: 0;
}

#mitte {
background: transparent;
margin: auto;
text-align: center;
width: 910px;
/*  border: 1px solid #FF0000; zum Testen */
}

/* ---- Links allgemein */

a {
text-decoration: none;
}

a, a:link, a:visited {
color: #005F00;
}

a:hover {
color: #0060FF;
}
/* Speziell Floristik */
/* Startauswahl */
.aw {font-size: larger;
     font-weight: bold;
     background: #EFEFEF;
    }
.aw img {margin-top:2px;
         width: 150px; height: 98px;
        }
.aw a {text-decoration: none;
       color: #008000;}

/* einzelne */
.box {width: 110px; height: 99px;
      margin : 5px;
      float: left;
      background: #EFEFEF;
      /* border: 1px solid lime; */
     }
.box img {margin-top:2px;
          width: 110px; height: 78px;
         }
.box a {text-decoration: none;
       color: #008000;}


.ueb {font-size: 25px;
      font-weight : bold;
      margin: 5px;
      text-align: center;
     }
/* Ende Floristik */

div.daten { padding-left: 10px; color:#008000; text-align: left; }

h2 { text-align: center; color:#008000; }

#daten { margin-top: 30px; }

#daten td { vertical-align: top; }

#kontakt td { vertical-align: middle; text-align: right; }
/* Menü */
#menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        }

#menu {
        width: 145px;
        }

#menu li a {
        height: 32px;
          voice-family: "\"}\"";
          voice-family: inherit;
          height: 24px;
        text-decoration: none;
        margin-top: 2px;
        }

#menu li a:link, #menu li a:visited {
        color: #000;
        display: block;
        background:  url(menu.gif);
        padding: 8px 0 0 0;
        }

#menu li a:hover {
        color: #C04040;
        background:  url(menu.gif) 0 -32px;
        padding: 8px 0 0 0;
        }

#menu li #current {
        color: #fff;
        background:  url(menu.gif) 0 -32px;
        padding: 8px 0 0 0;
        }



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

#fotogalerie {width: 728px; height: 405px;   /* Breite und Höhe */
              padding: 10px;                 /* Innenabstand alle Seiten */
              border: 1px solid #008000;     /* Rand: stärke form farbe */
              background: #f2fff6;           /* 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: 538px; 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: #008000;             /* Textfarbe */
                             font-family: arial;         /* Schriftart */
                             font-weight: normal;        /* Schriftschnitt */
                             font-size: 16px;            /* Schriftgröße */
                             width: 538px;               /* 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: #60FF00;                 /* Hintergrundfarbe */
                           }

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

/* Hyperlink - Text zum Bild */
#fotogalerie ul li a:hover span {display: block;         /* Darstellung: im Block - untereinander */
                                 color: #008000;         /* Textfarbe */
                                 background: #f2fff6;    /* Hintergrundfarbe */
                                 font-family: arial;     /* Schriftart */
                                 font-weight: normal;    /* Schriftschnitt */
                                 font-size: 16px;        /* Schriftgröße */
                                 width: 538px;           /* 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: #777;}                   /* 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: -548px;                      /* abstand links */
                              top: 0;                            /* abstand oben */
                              width: 538px; height:361px;        /* Breite und Höhe */
                              text-align: center;                /* Inhalt zentriert ausrichten */
                              background: #f2fff6;                  /* Hintergrundfarbe */
                              z-index: 10;}                      /* 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: #f2fff6;    /* Hintergrundfarbe */
                                 color: #008000;         /* Textfarbe */
                                 font-family: arial;     /* Schriftart */
                                 font-weight: normal;    /* Schriftschnitt */
                                 font-size: 16px;        /* Schriftgröße */
                                 width: 538px;           /* 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 */