/* overrides */
body, h1, h2, h3, h4, h5, h6, button, input, textarea, small, big {
    font-size: 13px;
}

.page-body {
    background: url("/images/db/overview/features-bg.jpg") 100% 0 no-repeat;
    margin: 0;
    padding: 30px 30px 0 30px;
}

.page-header {
    height: 235px;
}

    .page-header .header-2 {
        font-size: 42px;
    }

        .page-header .header-2 small.serif {
            font-size: 18px;
        }

/* layout */
.overview-left {
    width: 580px;
    float: left;
}

    .overview-left p {
        margin: 0 0 20px 0;
    }

        .overview-left p:last-child {
            margin-bottom: 0;
        }

.overview-right {
    width: 325px;
    float: right;
    margin-top: 35px;
}

/* lore */
.lore .quote {
    margin-bottom: 20px;
    font-style: italic;
    font-size: 24px;
    color: #f3e6d0;
    ;
}

.zh-tw .lore .quote {
    font-style: normal
}

.ko-kr .lore .quote {
    font-style: normal;
    font-size: 16px;
}

.lore .read-story {
    text-align: right;
    padding-right: 10px;
}

/* features */
.features {
    color: #221103;
    position: relative;
    background: url("/images/db/overview/features-mid.jpg") repeat-y;
}

.features-bot {
    background: url("/images/db/overview/features-bot.jpg") 0 100% no-repeat;
}

.features-top {
    padding: 45px 25px 55px 25px;
    background: url("/images/db/overview/features-top.jpg") 0 0 no-repeat;
    min-height: 480px;
}

.features .header-3 {
    color: #000000;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 0 BLACK;
    letter-spacing: 1px;
}

.features .crest {
    width: 250px;
    height: 250px;
    position: absolute;
    top: -160px;
    left: 35px;
    background: no-repeat;
}

.features .d3-color-green {
    color: #3f4220 !important;
    font-weight: bold;
}

.features li {
    position: relative;
    margin-top: 25px;
}

    .features li .d3-icon-trait {
        position: absolute;
        top: 5px;
        left: -2px;
    }

    .features li .d3-icon-skill {
        position: absolute;
        top: 5px;
        left: -2px;
    }

    .features li .subheader-3 {
        color: #660000;
        text-transform: uppercase;
        padding-bottom: 5px;
        text-shadow: 0 0 BLACK;
    }

.de-de .features li .subheader-3 {
    word-break: break-word;
}

.features li .desc {
    font-size: 12px;
    line-height: 130%;
    display: block;
}

    .features li .desc p {
        margin: 0 0 10px 0;
    }

/* armor */
.armor {
    margin-bottom: 0;
}

    .armor .section-body {
        padding-top: 0;
    }

    .armor .tiers {
        padding-top: 325px;
        background: no-repeat;
    }

    .armor .tier {
        float: left;
        width: 152px;
        padding: 0 20px;
        border-left: 1px solid #262119;
    }

        .armor .tier:first-child {
            border: 0;
        }

/* equipment */
.equipment .section-body {
    min-height: 185px;
    background: url("/images/db/overview/equipment-bg.jpg") right 0 no-repeat;
}

.equipment .bullet-list {
    margin-top: 25px;
    color: #5F584D;
}

.equipment .equipment-icons {
    float: right;
    white-space: nowrap;
    margin: 10px 5px 20px 20px;
}

    .equipment .equipment-icons a {
        display: inline-block;
        vertical-align: top;
        margin-left: 10px;
    }

.equipment .view-all {
    text-align: right;
    padding-top: 14px;
}

/* resource */
.resource {
    position: relative;
    background: url("/images/db/overview/resource-bg.jpg") repeat-y;
}

.resource-bot {
    background: url("/images/db/overview/resource-bot.jpg") 0 100% no-repeat;
}

.resource-top {
    background: url("/images/db/overview/resource-top.jpg") 0 0 no-repeat;
    padding: 35px 25px 50px 25px;
}

.resource p {
    margin: 15px 0 0 0;
    color: #7B6D55;
}

.resource .header-3 {
    text-align: center;
}

/* links */
.more-links {
    width: 304px;
    min-height: 310px;
    margin: 15px auto;
    padding: 20px;
    background: url("/images/db/overview/links-bg.jpg") 0 0 no-repeat;
}

    .more-links dt {
        margin-top: 15px;
    }

    .more-links a {
        display: block;
    }

        .more-links a span {
            color: #4E4536;
        }

/* screenshots */
.screenshots {
    margin-top: 10px;
    padding: 30px 0 10px 0;
    background: url("/images/db/overview/screenshots-bg.jpg") 50% 0 no-repeat;
}

    .screenshots .media-frame {
        margin-left: 6px;
    }

    .screenshots .view-all {
        text-align: right;
        padding-top: 14px;
        padding-right: 8px;
    }

.media-frame .mm a:hover .frame {
    background: rgba(0, 0, 0, .3) url("/images/media/view-image.png") 50% 50% no-repeat;
}

/* artwork */
.artwork {
    padding: 34px 0 0 15px;
    height: 215px;
    background: url("/images/db/overview/artwork-bg.jpg") 0 0 no-repeat;
}

    .artwork .artwork-frame {
        width: 250px;
        height: 143px;
        margin: 1px;
        float: left;
    }

        .artwork .artwork-frame a {
            display: block;
            width: 249px;
            height: 141px;
            border: 1px solid #000000;
            position: relative;
        }

            .artwork .artwork-frame a:hover {
                border-color: #824c06;
            }

            .artwork .artwork-frame a .frame {
                display: block;
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                box-shadow: inset 0 0 5px 2px #000;
            }

            .artwork .artwork-frame a:hover .frame {
                background: rgba(0, 0, 0, .3) url("/images/media/view-image.png") 50% 50% no-repeat;
            }

        .artwork .artwork-frame.frame-0 {
            margin-right: 45px;
        }

    .artwork .view-all {
        text-align: right;
        padding-top: 26px;
        padding-right: 9px;
    }

/* model */
.character-model {
    float: left;
    width: 0;
    height: 0;
    left: 0;
    top: 0;
    position: relative;
    z-index: 1;
}

    .character-model .model-canvas,
    .character-model .model-canvas-holder,
    .character-model .model-canvas .fallback {
        display: block;
        width: 315px;
        height: 371px;
        background: no-repeat;
    }

    .character-model .model-canvas {
        position: absolute;
        left: -26px;
        top: 0;
    }

    .character-model .model-toggler {
        position: absolute;
        width: 140px;
        height: 72px;
        left: 45px;
        top: 380px;
    }

        .character-model .model-toggler a {
            display: block;
            width: 70px;
            height: 72px;
            float: left;
            background: url("/images/db/overview/model-toggler.png") no-repeat;
        }

            .character-model .model-toggler a.toggler-male {
                background-position: left top;
            }

            .character-model .model-toggler a.toggler-female {
                background-position: right top;
            }

            .character-model .model-toggler a.toggler-male:hover {
                background-position: left -72px;
            }

            .character-model .model-toggler a.toggler-female:hover {
                background-position: right -72px;
            }

    .character-model.hero-male .model-toggler a.toggler-male {
        background-position: left bottom !important;
    }

    .character-model.hero-female .model-toggler a.toggler-female {
        background-position: right bottom !important;
    }

/* ie */
.ie67 .features,
.ie67 .features-top,
.ie67 .features-bot,
.ie67 .resource,
.ie67 .resource-top,
.ie67 .resource-bot,
.ie67 .more-links,
.ie67 .artwork,
.ie67 .screenshots,
.ie67 .character-model,
.ie67 .character-model .model-canvas,
.ie67 .character-model .model-canvas .fallback,
.ie67 .armor,
.ie67 .armor .tiers,
.ie67 .gameplay {
    display: block;
    zoom: 1;
}

    .ie67 .features li {
        margin-top: 10px;
    }

    .ie67 .screenshots .media-frame {
        float: left;
        zoom: 1;
        display: block;
        position: relative;
    }

.ie6 .features li .d3-icon-trait {
    left: -75px;
    top: 15px;
}

.ie6 .features-top {
    height: 300px;
}

.ie7 .features li .d3-icon-trait {
    top: 25px;
}

.ie7 .artwork .view-all,
.ie7 .screenshots .view-all,
.ie7 .equipment .view-all {
    padding-top: 0;
}

.page-body .header-3 {
    margin-top: 0px;
    margin-bottom: 20px;
}