* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body {
    background-color: #808080;
}

#wrapper {
    background-image: url(/assets/bookshelf.svg);
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    height: 900px;
}


.shelf { position: relative; }
    .shelf > * { position: absolute; }

.kerze {
    background-image: url(/assets/kerze.png);
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
}
.kopf {
    background-image: url(/assets/kopf.png);    
    background-repeat: no-repeat;
    width: 80px;
    height: 80px;    
}
.spinnennetz {
    background-image: url(/assets/spinnennetz.png);
    background-repeat: no-repeat;
    width: 120px;
    height: 120px;    
}
.kristallKugel {
    background-image: url(/assets/kristallKugel.png);
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
}
.augenInFlasche {
    background-image: url(/assets/augenInFlasche.png);
    background-repeat: no-repeat;
    width: 120px;
    height: 120px;
}
.globus {
    background-image: url(/assets/globus.png);
    background-repeat: no-repeat;
    width: 180px;
    height: 180px;
}
.schriftrolle {
    width: auto;
    position: absolute;
    bottom: 0;
}
    .schriftrolle:before {
        content: "";
        background-image: url(/assets/schriftrolleLeft.png);
        background-repeat: no-repeat;
        width: 17px;
        height: 140px;
        float: left;
    }
    .schriftrolle > .center {
        background-image: url(/assets/schriftrolleCenter.png);
        background-repeat: repeat-x;
        width: 0px;
        height: 140px;
        overflow: hidden;
        float: left;
    }
    .schriftrolle img {
        position: relative;
        top: 45px;
    }
    .schriftrolle:after {
        content: "";
        background-image: url(/assets/schriftrolleRight.png);
        background-repeat: no-repeat;
        width: 17px;
        height: 140px;
        float: left;
    }


#shelf1 {
    width: 578px;
    height: 145px;
    position: absolute;
    left: 178px;
    top: 29px;
}
    #spinnennetz1 {
        left: 15px;
        top: 16px;
    }
    #MarianSchriftrolle {
        left: 55px;
        bottom: -2px;
    }
    #MatteoSchriftrolle {
        left: 400px;
        bottom: -5px;
    } 
    #kerze1 {
        right: 0px;
        bottom: 0px;
    }

#shelf2 {
    width: 578px;
    height: 147px;
    position: absolute;
    left: 178px;
    top: 190px;
}
    #HannaSchriftrolle {
        left: 212px;
        bottom: -3px;      
    }
    #kopf1 {
        left: 50px;
        bottom: -15px;
    }

#shelf3 {
    width: 578px;
    height: 147px;
    position: absolute;
    left: 178px;
    top: 355px;
}
    #AnisaSchriftrolle {
        left: 191px;
        bottom: 5px;
    }
    #kerze2 {
        left: 0px;
        bottom: 0px;
    }

#shelf4 {
    width: 578px;
    height: 148px;
    position: absolute;
    left: 178px;
    top: 517px;
}
    #FlorianSchriftrolle {
        left: 71px;
        bottom: -7px;
    }
    #kopf2 {
        left: 180px;
        bottom: -5px;
    }

#shelf5 {
    width: 578px;
    height: 145px;
    position: absolute;
    left: 178px;
    top: 681px;
}
    #kristallKugel1 {
        left: 190px;
        bottom: 0;
    }
    #augenInFlasche1 {
        left: 390px;
        bottom: -6px;
    }
    #globus1 {
        left: 0px;
        bottom: -17px;
    }


#secretChamber {
    background-color: #000000;
    width: 160px;
    height: 117.5px;
    right: 20px;
    bottom: 23px;
}
    #secretChamber:after {
        content: "";
        background-color: #683116;
        width: inherit;
        height: inherit;
        position: absolute;
    }
    #secretChamber.open:after {
        display: none;
    }
    #secretChamber.open:before {
        content: "";
        width: inherit;
        height: inherit;
        position: absolute;
        top: -15px;
        bottom: 0;
        border-style: solid;
        border-width: 15px 40px 15px 0;
        border-color: transparent #683116 transparent transparent;
    }


a {
    text-decoration: none;
}
.clearfix {
    clear: both;
}