﻿
.page-header {
	margin: 0 60px;
}

	.page-header .header-2 {
		font-size: 60px;
		width: 75%;
	}

	.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: 175px;
		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;
	}
