@charset "utf-8";


/* Container ist der Behälter für Galerie */
#box { position:relative; width:550px; height:600px; background:white; margin:10px 5px; border: solid 1px maroon; }
#box b { font-weight:normal; width:600px; text-align:center; position:absolute; bottom:250px; left:10px; color:#939393; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande", verdana, sans-serif; letter-spacing:1px; line-height:1.7em; z-index:1; }

a.galerie, a.galerie:visited {display:inline; color:#727272; text-decoration:none; border:solid 1px #676767; width:75px; height:75px; float:left; margin:7px 10px; position:relative; cursor:crosshair;}
/* Tumbnail Bilder */
a.bild01 {background:url(01_tumb.jpg);}
a.bild02 {background:url(02_tumb.jpg);}
a.bild03 { background-image: url(03_tumb.jpg); }
a.bild04 { background-image: url(04_tumb.jpg); }
a.bild05 { background-image: url(05_tumb.jpg); }
a.bild06 { background-image: url(06_tumb.jpg); }
a.bild07 { background-image: url(07_tumb.jpg); }
a.bild08 { background-image: url(08_tumb.jpg); }
a.bild09 { background-image: url(09_tumb.jpg); }
a.bild10 { background-image: url(10_tumb.jpg); }
/* Ende Tumbnail Bilder */

a.galerie span { visibility:hidden; display:block; position:absolute; width:500px; height:400px; top:189px; left:2px; font-size: 12px; background:white; text-align:center; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande", verdana, sans-serif; letter-spacing:1px; cursor:crosshair; }

/* Galerie Bilder */ 
/* -2px = abstand zu container */ 
a.bild01 span {left:-2px; top:180px;}
/* -100px = 1x tumbnailbild 75px + margin 20px + ca 5px abstand zu container */
a.bild02 span {left:-100px; top:180px;}
/* -195px = 2x tumbnailbild 75px + 2x margin 20px + ca 5px abstand zu container */
a.bild03 span {left:-195px; top:180px;}
/* -295px = 3x tumbnailbild 75px + 3x margin 20px + 10px abstand zu container */
a.bild04 span {left:-293px; top:180px;}
/* -390px = 4x tumbnailbild 75px + 4x margin 20px + 10px abstand zu container 
   auf diese art wird sichergestellt das die galeriebilder immer zentriert im container sind  */
a.bild05 span {left:-390px; top:180px;}
a.bild06 span {left:-2px; top:89px;}
a.bild07 span {left:-100px; top:89px;}
a.bild08 span {left:-195px; top:89px;}
a.bild09 span {left:-293px; top:89px;}
a.bild10 span {left:-390px; top:89px;}

/* Ende Galerie Bilder */

a.galerie:hover {white-space:normal; z-index:100;}

a.galerie:hover span {visibility:visible; z-index:100;}

a.galerie:hover span img { position:relative; z-index:100; margin-top: 10px; margin-bottom: 10px; }
a.galerie:active span, a.gallery:focus span {visibility:visible; z-index:10;}
a.galerie:active span img, a.gallery:focus span img { position:relative; z-index:10; margin-top: 10px; margin-bottom: 10px; }