/*********** 
    BOOKS
***********/
p
{
    font-family: myFont;
}


/*
    LEFT BOOKCASE
*/
/* SHELVES */
.shelf1
{
    /* border: 2px solid rgb(0, 255, 76); */
    background-color: rgba(207, 14, 14, 0.151);
    position: absolute;
    padding: 0%;
    left: 13.5%;
    width: 30.3%;

    top: 18.4%;
    height: 12.3122%;
}

.shelf2
{
    /* border: 2px solid rgb(0, 255, 76); */
    background-color: rgba(14, 40, 207, 0.151);
    position: absolute;
    padding: 0%;
    left: 13.5%;
    width: 30.3%;

    top: 33.1%;
    height: 13.2%;
}

.shelf3
{
    /* border: 2px solid rgb(0, 255, 76); */
    background-color: rgba(14, 207, 56, 0.151);
    position: absolute;
    padding: 0%;
    left: 13.5%;
    width: 30.3%;

    top: 49.1%;
    height: 14.1%;
}

.shelf4
{
    /* border: 2px solid rgb(0, 255, 76); */
    background-color: rgba(207, 14, 14, 0.151);
    position: absolute;
    padding: 0%;
    left: 13.5%;
    width: 30.3%;

    top: 66.09%;
    height: 17.22%;
}

.shelf5
{
    /* border: 2px solid rgb(0, 255, 76); */
    background-color: rgba(69, 14, 207, 0.151);
    position: absolute;
    padding: 0%;
    left: 13.5%;
    width: 30.3%;

    top: 86.1%;
    height: 9.8%;
}


/* BOOKS */
.books /* box */
{
    position: absolute;
    /* border: 1px solid rgb(0, 68, 255); */
    /* padding: 4%; */
    top: 0%;
    left: 0%;
    height: 100%;
    width: 10%;

    /* Center art */
    display:inline-block;
    align-items:start;
}

.book /* picture in box */
{
    position: relative;
    /* border: 1px solid rgb(255, 255, 0); */
    width: 100%;
    height: 100%;
}


/*
    tootltips
*/

.books:hover .bookText
{
    opacity: 0.9;
}

.bookText
{
    /* border: 1px solid pink; */
    position:absolute;

    background-color: rgb(67, 14, 14);
    color: beige;

    padding: 4px;

    font-size: 14px;
    opacity: 0;
    transition: opacity 0.15s;
    bottom: -38px;
    left: -10px;
    white-space: nowrap;

}


/*
    RIGHT BOOKCASE
*/
/* SHELVES */
.shelf6
{
    /* border: 2px solid rgb(0, 255, 76); */
    background-color: rgba(207, 14, 14, 0.151);
    position: absolute;
    padding: 0%;
    left: 51.5%;
    width: 33.16%;

    top: 18.4%;
    height: 12.2%;
}

.shelf7
{
    /* border: 2px solid rgb(0, 255, 76); */
    background-color: rgba(14, 40, 207, 0.151);
    position: absolute;
    padding: 0%;
    left: 51.5%;
    width: 33.16%;

    top: 32.9%;
    height: 13.2%;
}

.shelf8
{
    /* border: 2px solid rgb(0, 255, 76); */
    background-color: rgba(14, 207, 56, 0.151);
    position: absolute;
    padding: 0%;
    left: 51.5%;
    width: 33.16%;

    top: 48.9%;
    height: 14.1%;
}

.shelf9
{
    /* border: 2px solid rgb(0, 255, 76); */
    background-color: rgba(207, 14, 14, 0.151);
    position: absolute;
    padding: 0%;
    left: 51.5%;
    width: 33.16%;

    top: 65.9%;
    height: 17.22%;
}

.shelf10
{
    /* border: 2px solid rgb(0, 255, 76); */
    background-color: rgba(69, 14, 207, 0.151);
    position: absolute;
    padding: 0%;
    left: 51.5%;
    width: 33.16%;

    top: 86.1%;
    height: 9.8%;
}




/* foyer button */
.foyerButtonLib
{
    /* border: 5px solid rgb(255, 0, 195); */
    position:absolute;

    left: 17%;
    top: 1%;

    height: 10.5%;
    width: 13.8%;

    z-index: 130;
}