.page-header { margin: 45px 60px; }
.page-header .header-2{ font-size: 60px; width: 50%; }
.page-header .subheader-2 { color: #AD835A; }

/* story */
.short-story { width: 874px; margin: 0 auto; padding-bottom: 150px; background: url("../../../images/game/lore/short-story/wrapper-bg.jpg") 20% 100% no-repeat; }
.short-story .story-top,
.short-story .story-bot { height: 85px; padding: 90px 100px 0 100px; background-image: url("../../../images/game/lore/short-story/wrapper-top.png"); }
.short-story .story-bot { padding: 60px 100px 30px 100px; background-image: url("../../../images/game/lore/short-story/wrapper-bot.png"); }
.short-story .story-mid { padding: 1px 100px; background: url("../../../images/game/lore/short-story/wrapper-mid.png") 0 0 repeat-y; }
.short-story .story-page p { font-size: 14px; line-height: 150%; margin: 25px 0; }
.short-story .story-page p:first-child { margin-top: 0; }
.short-story .story-page p:last-child { margin-bottom: 0; }
.short-story .story-page em { color: #7B6D55; }
.ko-kr .short-story .story-page i { font-style: normal; color: #7b6333; }
.short-story .story-page .media-frame { float: right; margin: 0 0 25px 35px; }
.short-story .separator { font-style:normal; text-align:center; display:block; }

/* details */
.story-details { text-align: center; padding: 25px 0; }
.story-details .download-pdf { margin-top: 20px; display: inline-block; vertical-align: middle; }
.story-details .download-pdf .icon-16 { position: relative; top: -2px; margin-right: 5px; background: url("../../../images/game/lore/short-story/story-sprite.png") -124px -10px no-repeat; }

/* controls */
.story-controls { text-align: center; position: relative; }
.story-controls .next { position: absolute; top: 0; right: 0; }
.story-controls .prev { position: absolute; top: 0; left: 0; }
.story-controls ul { padding-top: 4px; }
.story-controls li { display: inline-block; }
.story-controls li a { display: inline-block; width: 30px; height: 30px; overflow: hidden; text-indent: -999px; background: url("../../../images/game/lore/short-story/story-sprite.png") -3px -3px no-repeat; }
.story-controls li a:hover { background-position: -36px -3px; }
.story-controls li.current a,
.story-controls li.current a:hover { background-position: -69px -3px; }

/* bgs */
.body-bot { min-height: 800px; }
.short-story-barbarian .body-top { background-image: url("../../../images/game/lore/short-story/barbarian/bg.jpg"); }
.short-story-demon-hunter .body-top { background-image: url("../../../images/game/lore/short-story/demon-hunter/bg.jpg"); }
.short-story-monk .body-top { background-image: url("../../../images/game/lore/short-story/monk/bg.jpg"); }
.short-story-witch-doctor .body-top { background-image: url("../../../images/game/lore/short-story/witch-doctor/bg.jpg"); }
.short-story-wizard .body-top { background-image: url("../../../images/game/lore/short-story/wizard/bg.jpg"); }
.short-story-crusader .body-top { background-image: url("../../../images/game/lore/short-story/crusader/bg.jpg"); }
.short-story-jeweler .body-top { background-image: url("../../../images/game/lore/short-story/jeweler/bg.jpg"); }
.short-story-brothers-in-arms .body-top { background-image: url("../../../images/game/lore/short-story/brothers-in-arms/bg.jpg"); }
.short-story-middlewick .body-top { background-image: url("../../../images/game/lore/short-story/middlewick/bg.jpg"); }
.short-story-turn-of-a-card .body-top { background-image: url("../../../images/game/lore/short-story/turn-of-a-card/bg.jpg"); }

/* unique element fixes for non-class short story pages */
.short-story-jeweler .db-page-jumper, .short-story-brothers-in-arms .db-page-jumper, .short-story-middlewick .db-page-jumper, .short-story-turn-of-a-card .db-page-jumper { display:none; }
.short-story-jeweler hr, .short-story-brothers-in-arms hr, .short-story-turn-of-a-card hr { height:1px; width:80%; border-width:0px 0px 1px 0px; border-color:#a99877; }
.short-story-jeweler .short-story .story-page .footnote { font-size:11px; }
.short-story-brothers-in-arms .d3-class-jeweler, .short-story-middlewick .d3-class-jeweler, .short-story-turn-of-a-card .d3-class-jeweler { display:none; }


/* ie */
.ie6 .story-controls .next { right: 100px; }
.ie6 .story-controls .prev { left: -335px; }
.ie6 .db-page-jumper { right: 30px; }
.ie6 .story-details .download-pdf .icon-16,
.ie6 .story-controls li a { background-image: url("../../../images/game/lore/short-story/story-sprite-ie.png"); }
.ie6 .short-story .story-top { background: url("../../../images/game/lore/short-story/wrapper-top.jpg") 50% 100% no-repeat; }
.ie6 .short-story .story-bot { background: url("../../../images/game/lore/short-story/wrapper-bot.jpg") 50% 0 no-repeat; }
.ie6 .short-story .story-mid { background: url("../../../images/game/lore/short-story/wrapper-mid.jpg") 50% 0 repeat-y; }

.ie67 .story-controls li { display: inline; width: 30px; }
.ie67 .story-controls li a { display: block; width: 30px; }