#big-cite {
    background-color: #444;
    color: white;
    padding: 0;
    margin: 0;
    background-size: 100%;
    background-position: 50% 68%;
    background-repeat: repeat-y;

    background-image: url(/static/img/backdrop/book-drawer2.jpg);

    @media screen and (min-width: 62.5em) {
        background-image: url(/static/img/backdrop/book-drawer2.jpg);
    }

    &.banner {
        background: none;
    }

    .cite {
        @include size(padding, 46px 10px 48px 0);
        background: none;
        color: white;

        @media screen and (min-width: 30em) {
            @include size(padding-right, 40px);
        }

        .vip {
            @include size(margin-left, 10px);
            @include size(margin-top, 2.5px);
            @include size(margin-bottom, 5px);
            @include size(font-size, 11px);

            @media screen and (min-width: 16em) {
                padding-left: 10%;
                @include size(margin-left, -18px);
            }

            @media screen and (min-width: 62.5em) {
                float: left;
                padding-left: 0;
                @include size(margin-left, 16px);
                text-align: right;
                @include size(width, 147px);
            }
        }

        .cite-body {
            @include size(margin, .5px);
            @include size(font-size, 20px);
            line-height: 1.16em;

            @media screen and (min-width: 30em) {
                @include size(font-size, 30px);
            }
        }

        .source {
            @include size(margin-top, 16px);
            @include size(margin-bottom, 16px);
            @include size(margin-right, 2px);
            @include size(font-size, 12px);
        }

        /* Make cite body and source slide to the left. */
        .cite-body, .source {
            @include size(margin-left, 10px);

            @media screen and (min-width: 16em) {
                padding-left: 21.9%;
                @include size(margin-left, -38px);
            }

            @media screen and (min-width: 62.5em) {
                padding-left: 0;
                @include size(margin-left, 175px);
            }
        }

        /* Semi-transparent background. */
        .cite-body span,
        .vip span,
        .source span {
            color: white;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.6);
            /* For IE 5.5 - 7*/
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
            /* For IE 8*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
        }
    }

    /* a long cite displays smaller */
    .cite-small .cite-body {
        @include size(font-size, 16px);
        @media screen and (min-width: 30em) {
            @include size(font-size, 20px);
        }
    }

    h2 {
        margin: 0;
        @include size(font-size, 11px);
        color: #575c63;
    }
}


#main-library {
    .main-library-row {
        position: relative;

        .covers {
            white-space: nowrap;
            width: 90%;
            overflow-x: hidden;
            padding-bottom: 2px;

        }
        .note {
            position: absolute;
            right: 0;
            top: 1px;
            width: 139px;
            height: 289px - 22px;
        }
    }
}


#main-last {
    h1 {
        @include size(height, 32px);
        margin: 0;
        @include size(padding-top, 19px);
        @include size(padding-left, 10px);

        @include size(font-size, 11px);
        @include mono;
        font-weight: normal;

        @media screen and (min-width: 33em) {
            @include size(padding-left, 19px);
        }

        a {
            color: black;

            &:after {
                content: " >";
            }
        }
    }
    .book-mini-box:nth-child(3) {
        @media screen and (min-width: 30em) {
            margin-right: 3em;
        }
        @media screen and (min-width: 33em) {
            margin-right: 0;
        }
    }
}


.infopages-box {
    margin: 0;
    @include size(margin-top, 5px);
    @include size(padding, 0 5px);
    vertical-align: top;
    color: #989898;

    @media screen and (min-width: 20em) {
        display: inline-block;
        @include size(width, 206px);
        @include size(padding-left, 17px);
        @include size(padding-right, 17px);
    }

    h1 {
        @include size(height, 28px);
        margin: 0;
        @include size(padding-top, 25px);
        @include size(font-size, 11px);
        color: #017e85;
        font-weight: normal;
        @include mono;
    }

    a {
        color: black;
    }

    ol, ul {
        @include size(font-size, 11px);
        list-style: none;
        padding: 0;
        margin: 0;
        line-height: 1.45em;

        li {
            @include size(margin-bottom, 8px);
            @media screen and (min-width: 62.5em) {
                @include size(margin-bottom, 2.5px);
            }
        }
    }

    .social-links {
        @include size(margin-top, 10px);

        a {
            @include size(margin-right, 6px);
        }
    }
}

.more {
    display: block;
    margin-top: .5em;
}


section {
    margin-top: 2em;
}


.tag-box-section {
    @media screen and (min-width: 768px) {
        display: inline-block;
        width: 48%;
        margin-right: 2%;
        vertical-align: top;

        .tag-box {
            display: block;
            width: 100%;
        }
    }
}

#main-theme {
    .white-box {
        position: relative;

        .cite {
            display: none;

            @media screen and (min-width: 768px) {
                display: block;
                position: absolute;
                right: 1em;
                top: 7em;
                background: #F7F7F7;
                width: 200px;
                padding-left: 20px;
            }

            @media screen and (min-width: 1024px) {
                width: 340px;
                padding-left: 80px;
            }
        }
    }
}