@charset "utf-8";
/* CSS Document */
html {
	width: 100%;
	height: 100%;
	font-family: 'Open Sans', sans-serif;
}

body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #3D3838;
	font-family: 'Open Sans', sans-serif;
	background-color: #3D3838;
	background-image: url("../imgs/main-background-fade.jpg");
	background-repeat: repeat-x;
}

p {
	font-family: 'Open Sans', sans-serif;
}

video {
	/* max-width:624px;
min-height:250px; */
	
}
/* -- main layouts -- */
.zoom:after {
	background: url("../imgs/zoom_side.png") no-repeat top right;
	background-size: 50px 50px;
	content: '';
	display: block;
	width: 50px;
	height: 50px;
	position: absolute;
	top: 0;
	right: 0;
}

/* #headerBlock { */
/* 	width: 100%; */
/* 	height: 50px; */
/* 	position: relative; */
/* 	z-index: 10000; */
/* } */

/* #headerBlock .logoNav { */
/* 	overflow: hidden; */
/* 	z-index: 51; */
/* 	max-width: 800px; */
/* 	position: absolute; */
/* } */
#superContainer {
	position: relative;
	overflow: hidden;
	min-width: 768px;
}

#mainScrollerContainer {
	min-width: 768px;
	overflow: hidden;
	width: 100%;
	position: relative;
}

.nextController {
	position: fixed;
	top: 60px;
	right: 0px;
	width: 70px;
	display: none;
	z-index: 2000;
}

.nextController a {
	display: block;
	height: 100%;
	width: 100%;
}

.previousController {
	position: fixed;
	top: 60px;
	left: 0px;
	width: 70px;
	display: none;
	background: url(../imgs/nextPreviousBG.png);
	z-index: 2000;
}

.previousController a {
	display: block;
	height: 100%;
	width: 100%;
}

#mainScrollerContainer .container {
	position: absolute;
	padding-left: 60px;
	top: 10px;
}

/* hover div */
#hoverAlt {
	display: none;
	position: absolute;
	width: 300px;
	height: 250px;
	z-index: 2000;
}

#hoverAlt .info {
	height: 200px;
}

#hoverAlt .info h4 {
	font-size: 19px;
	padding: 10px 10px 0px 10px;
	margin: 0px;
}

#hoverAlt .info p {
	font-size: 10px;
	padding: 10px;
	margin: 0px;
	line-height: 150%;
}

#hoverAlt .arrow {
	height: 28px;
	width: 21px;
	position: absolute;
	left: 139px;
}
/* end hover div */
#scrollerBox {
	position: absolute;
	bottom: 25px;
	width: 100%;
}

#scrollerBox .drgBarScroller {
	margin: -19px 7px 0px 7px;
	position: relative;
}

#scrollerBox .scrollerBoxTitle {
	font-family: 'Open Sans', sans-serif;
	margin: 0px 0px 7px 7px;
	font-size: 120%;
	color: #EAE2E3;
}

#frameContainer {
	margin-top: 60px;
}

.drgBarScroller .scrllTrack {
	height: 3px;
	position: relative;
}

.drgBarScroller .drgBar {
	height: 9px;
	position: absolute;
	left: 0px;
	top: -1px;
}

.drgBarScroller .drgBar:hover {
	cursor: pointer;
}

.timelineLoader {
	width: 42px;
	height: 42px;
	position: absolute;
	left: 50%;
	top: 40%;
	z-index: 6000;
	background-color: #E7E5E5;
	-moz-border-radius: 4px;
	border-radius: 4px;
	opacity: 0.7;
}

.timelineLoader img {
	padding: 5px;
}

.overlayLoader {
	width: 42px;
	height: 42px;
	position: absolute;
	left: 50%;
	top: 40%;
	z-index: 6000;
	background-color: #E7E5E5;
	-moz-border-radius: 4px;
	border-radius: 4px;
	opacity: 0.7;
}

.overlayLoader img {
	padding: 5px;
}
/* separated topic selector */
.topicBlock {
	margin: 0px 7px 10px 7px;
	overflow: hidden;
}

.topicBlock .element {
	float: left;
	min-height: 30px;
	font-size: 12px;
	margin-bottom: 2px;
	-webkit-box-shadow: inset 0 10px 10px -12px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: inset 0 10px 10px -12px rgba(0, 0, 0, 0.5);
	box-shadow: inset 0 10px 10px -12px rgba(0, 0, 0, 0.5);
}

.topicBlock .element:hover {
	cursor: pointer;
	border-bottom: 1px solid #fff;
	margin-bottom: 0px;
}
/* end separated topic selector */

/* -- end main layouts -- */

/* --- introduction layouts -- */
.introductionBody {
	overflow: auto;
	background: url(../imgs/main-background.jpg) top left;
}

#mainBlockIntroduction {
	min-width: 768px;
}

.scrollingContainer {
	overflow-x: auto;
	position: relative;
	background-color: #ffcc00;
	padding: 40px 20px 40px 40px;
	border-bottom: 1px solid #ff0000;
}

.introductionBlock {
	width: 400px;
}

.outerWrap {
	padding: 10px 0px 0px 10px;
	background: url(../imgs/corner-t-left-1.png) top left no-repeat;
}

.innerWrap {
	padding: 0px 10px 10px 0px;
	background: url(../imgs/corner-b-right-1.png) bottom right no-repeat;
}

.introductionContent {
	background-color: #B5A45D;
	padding: 10px;
	height: 450px;
}
/* end introduction layouts -- */