* {
    margin: 0px;
    padding: 0px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: Roboto, Arial, sans-serif;
    font-size: 100%;
    background: #f1f4fc;
	overflow-x: hidden;
    color: #223;
}

.HorCentered {
    position: relative;
    left: 50%;
    transform: translate(-50%);
}

.Centered {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
}





header {
    position: fixed;
    width: 100vw;
    height: 50px;
    z-index: 1000;

    background-image: url(../Resources/Images/HeaderBackground.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

#HeaderBar {
    position: absolute;
    top: 13px;
    right: 5vw;
}

#HeaderBar > a {
    color: #eff;
    text-decoration: none;
    padding-right: 10px;
}

#HeaderPanel {
    position: relative;
    height: 100%;
    width: 100%;
    background: rgba(200, 210, 250, 0.3);
}

#HeaderPanel > a > img {
    position: relative;
    top: 15%;
    left: 5vw;
    height: 60%;
}





main {
    min-height: 80vh;
    padding-top: 60px;
}

main > div {
    width: 100vw;
}

body > main > div > div {
    max-width: 800px;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-bottom: 5vh;
    display: inline-block;
}

main > div > div > h1 {
    border-bottom: solid 1px #223;
    padding-bottom: 1vh;
    margin-bottom: 5vh;
    text-align: center;
}

#ImgPanel, #BookDetailPanel {
    position: relative;
    display: inline-block;
    width: 50%;
    float: left;
}


@media all and (max-width: 610px) {
    #ImgPanel, #BookDetailPanel {
        left: 50%;
        transform: translate(-50%);
    }
}

#ImgPanel {
    max-width: 250px;
}

#BookDetailPanel {
    min-width: 300px;
    padding-left: 25px;
}

#ImgPanel > a > img {
    width: 100%;
    max-width: 300px;
    min-width: 150px;
}

.BookDetails {
    width: 100%;
    display: inline-block;
}

.BookDetails > table {
    width: 100%;
}

.BookDetails > table > tbody > tr > td {
    font-size: 100%;
}

.BookDetails > table > tbody > tr > td:nth-child(1) {
    width: 25%;
    vertical-align: text-top;
}

.BookDetails > table > tbody > tr > td:nth-child(2) {
    padding-left: 1%;
    width: 75%;
}

.BookDetails > table > tbody > tr:nth-child(3) > td > span {
    cursor: pointer;
}

.BookDetails > table > tbody > tr > td > span > i {
    position: relative;
    top: 50%;
    transform: translate(0, 20%);
    font-size: 120%;
    margin-right: 0.5em;
}

.DetailsSectionTitle {
    font-size: 90%;
    font-weight: bold;
    padding-top: 2%;
}

main > div > div > p, main > div > div > ul {
    padding-top: 1vh;
    padding-bottom: 5vh;
}

main > div > div > ul > li {
    margin-left: 1.2em;
}