@charset "utf-8";
/* CSS Document */

body {
background-color:#F1DCC8;
background-image:url(../bilder/neu-der-hase.jpg);
background-repeat:no-repeat;
background-position:center top;
}

/* Die Seite ist insgesamt 900 hoch und 1000 px breit */

#seite {
width: 1000px;
height: 800px;
/* position relative, da sonst andere absolute Container (extra) NICHT daran orientieren würden */
position:relative; top:0px; left:0px;
margin: 0 auto;
font: normal 13px verdana, sans-serif;
color:#000000;
text-decoration:none;
}

#schmetterling {
position: absolute; top:500px; left:830px;
float: left;
z-index: 1;
}

#erbsen {
position: absolute; top:530px; left:1200px;
float: left;
z-index: 2;
}

/* ein linkdiv, in dem alle links platziert werden und somit alle eine kleine Animation haben */
/* alles was hier nur angepasst werden muss ist die absolute Position und die Größe, wobei die eingefügte */
/* Grafik groß genug ist und in jeder Größe bis 618 mal 618 Pixel den Bereich ausfüllt */
/* ausserdem bekommt der Name des Divcontainers noch den Namen des Links als Zusatz hinter linkdiv */
/* die Größe der Schrift habe ich auch hier definiert, so dass das font-size tag auch aus dem html-Code */
/* rausgenommen werden kann */
#linkdiv_zumzwergenhaus {
position: absolute; top:573px; left:943px;
width:175px;
height:35px;
padding-left:10px;
padding-top:10px;
font-size:28px;
z-index: 20;
transform: rotate(8deg);
}

#linkdiv_zumzwergenhaus a {
color:#eeeeee;
text-decoration: none;
}

#linkdiv_zumzwergenhaus a:link {
color:#eeeeee;
text-decoration: none;
}

#linkdiv_zumzwergenhaus a:active {
color:#eeeeee;
text-decoration: none;
}

#linkdiv_zumzwergenhaus a:visited {
color:#eeeeee;
text-decoration: none;
}

#linkdiv_zumzwergenhaus a:hover {
color:#666666;
text-decoration: none;
text-shadow:none;
}

#linkdiv_lomschnecke {
position: absolute; top:664px; left:967px;
width:220px;
height:35px;
padding-left:10px;
padding-top:10px;
font-size:24px;
z-index: 21;
transform: rotate(-1deg);
}

#linkdiv_lomschnecke a {
color:#eeeeee;
text-decoration: none;
}

#linkdiv_lomschnecke a:link {
color:#eeeeee;
text-decoration: none;
}

#linkdiv_lomschnecke a:active {
color:#eeeeee;
text-decoration: none;
}

#linkdiv_lomschnecke a:visited {
color:#eeeeee;
text-decoration: none;
}

#linkdiv_lomschnecke a:hover {
color:#666666;
text-decoration: none;
text-shadow:none;
}

#linkdiv_zumtor {
position: absolute; top:705px; left:930px;
width:190px;
height:35px;
padding-left:10px;
padding-top:10px;
font-size:24px;
z-index: 22;
transform: rotate(-6deg);
}

#linkdiv_zumtor a {
color:#000000;
text-decoration: none;
}

#linkdiv_zumtor a:link {
color:#eeeeee;
text-decoration: none;
}

#linkdiv_zumtor a:active {
color:#eeeeee;
text-decoration: none;
}

#linkdiv_zumtor a:visited {
color:#eeeeee;
text-decoration: none;
}

#linkdiv_zumtor a:hover {
color:#666666;
text-decoration: none;
text-shadow:none;
}

#zoomheadline {
position: absolute; top:0px; left:-340px;
font-size:12px;
color:#FF3366;
float: left;
z-index: 101;
}

#zoom {
position: absolute; top:15px; left:-320px;
float: left;
z-index: 102;
}

#zoom a{
        float: right;
        margin: 0 20px 10px 10px;
        border: 1px solid #000;
        text-indent: -1000em;
        overflow: hidden;
        display: block;
        width: 66px;
        height: 87px;
        background: url(../bilder/buch/d.jpg) no-repeat top left;
        }

#zoom a:hover {
        width: 663px;
        height: 878px;
        background-position: 0 0px;
        }