@charset "utf-8";
/*--------------CSS Document-----------*/
html,body { margin: 0; padding: 0; height: 100%; width: 100%; position: absolute; overflow: hidden;}
a { text-decoration: none; color: inherit; }
object{ pointer-events:none; padding: 40px 0px 40px 0px; }

/*--------------INTRO-------------------*/
#intro{height: 100%; width: 100%; background: #000; margin-top: 0px; /*display: none;*/}
	div.biglogo{top:34%;}
	.biglogo{ /*height: 10%; width: 30%;*/ position: relative; margin: auto; display: none;}
	div.repo{ top: 46%; }
	.repo { height: 5%; width: 15%; position: relative; margin: auto; display: none; }
	div.introbar{ width:100%; height: 20px; background: #000; position: absolute; bottom: 0; display: none; cursor: pointer; }
	div.introbar:hover{ background: #FFF; }
	.introimg{ height: 2%; width: 5%; position: relative; margin: auto; }
/*--------------MAINSITE: MENU & SLIDER-----------------*/
#mainsite{height: 100%; width: 100%; }
	#menu{ overflow: hidden; height: 40px; width: 100%; background: #000; position: absolute; font-family: 'Oswald', sans-serif; text-transform:uppercase; color: #FFF; font-size: 14px; font-weight: 300; }
		#centermenu{ height: 100%; width: 80%; margin: auto;}
			.menuitem { /*height: 100%;*/ float: left; padding: 10px 10px 10px 10px; cursor: pointer; }
			.menuitem.red {padding: 8px 10px 8px 0px; color:#D20024; font-weight:400; font-size:16px;}
			.menuitem.submenu { z-index:0; margin-top: 80px; background: url('../image/chapter_arrow.png') no-repeat 0px 14px; padding: 10px 0px 0px 14px; font-size: 13px; }
			.menuitem.submenu a{ text-decoration: none; color: inherit;}
			span.chaptize { padding: 0px 5px 0px 0px; cursor: pointer;}
			span.chaptize:hover, .selected{ color:#D20024;}
			.menuitem.right{ float: right; }
			.menuitem.grid{padding-right: 0px;}
	#scrollmask{ width: 100%; height: 85%; background: #000; padding-top: 40px; overflow: hidden;/**/}
		#next { height:100%; width: 20%; position:absolute; right:0px; z-index:2;  cursor: pointer; }
		#next:hover { background:url('../image/next.png') no-repeat; background-position: right center; }
		#prev { height:100%; width: 20%; position:absolute; left:0px; z-index:2;  display:none; cursor: pointer; }
		#prev:hover { background:url('../image/prev.png') no-repeat; background-position: left center; }
		#slider{ width: 600%; height: 100%; background: #000; position: absolute;}
			.chapternumber { position: relative; margin-top: 10%; z-index: 1; margin-left: -200px; left: 50%;}
			.img{ position: absolute; top: 0; /**/}
			.cover{ width: 10%; height: 100%; margin-right: 20px; opacity:0.20;	}
			.cover.active{ opacity: 1; }
/*--------------INFORMATION & FOOTER-------------*/
#information{height: 100%; width: 100%; margin-top: -40px; }
	#headinfo{ height: 40px; width: 100%; }
		.who{ float:left; margin: 6px 87px 0px 13px; position: relative; display:none;}
		#more { height: 100%; width: 30%; margin: auto; position: relative; }
		.learnmore{ font-family: 'Droid Serif', serif; text-align:center; font-style:italic; cursor:pointer; width: 200px; top: -5px; position: absolute; margin-left: -100px; left: 50%; }
		.learnmore p{ margin-top:0px; font-size:14px; padding-top: 18px;}
		.thumbinfo{ font-family: 'Oswald', sans-serif; text-transform: uppercase; font-weight: 100; font-size: 14px; float: right; padding: 8px 0px 8px 22px; display: none; background: url('../image/ithumb.png') no-repeat; background-position: 0px 10px; cursor: pointer; }
		.point{ height: 20px; width: 20px; position: absolute; margin: -5px 0px 0px 90px; z-index: 2; background: url('../image/more_open.png') no-repeat;}
		.point.open{background: url('../image/more_close.png') no-repeat; }
		.ribbon {font-family: 'Oswald', sans-serif; text-transform:uppercase; width: 156px; float: right; margin: 8px 0px 0px 0px; }
		.ribbon span {position: relative; font-size:11px; top: -5px; padding: 7px 5px 7px 0px; }
	#content{ width: 100%; overflow: hidden; }
		.centercontent{ width: 60%; margin: auto; }
		.allbgcontent{ width: 100%; background: #000; margin: auto; padding-right: 8px; }
		.fixedmenu {position: fixed; width: 110px; }
		#content .fixedmenu p{ font-family: 'Droid Serif',serif; color:#b1b3b4; font-style: italic; padding: 12px 0px 12px 40px; font-size: 11px;}
		
		.row { background: url('../image/infochapter.png') no-repeat; margin: 5px 0px 0px -5px; }
		.row.one { background-position: 0px 0px; }
		.row.one:hover , .row.one.selected { background-position: -160px 0px; }
		.row.two { background-position: 0px -45px; }
		.row.two:hover , .row.two.selected { background-position: -160px -45px; }
		.row.three { background-position: 0px -90px; }
		.row.three:hover , .row.three.selected { background-position: -160px -90px; }
		.row.four { background-position: 0px -135px; }
		.row.four:hover , .row.four.selected { background-position: -160px -135px; }
		.row.five { background-position: 0px -180px; }
		.row.five:hover , .row.five.selected { background-position: -160px -180px; }
		.button {cursor: pointer; }


		#content h1, h2 { font-size: 16px; font-family: 'Oswald', sans-serif; font-weight: 100; padding: 5px 0px 5px 0px; }		
		#content h1{ width: 100%; border-bottom: 1px solid #1a171b; border-top: 1px solid #1a171b; color: #1a171b; margin-bottom:20px;}
		#content h1 span.normal { font-weight: normal; }
		#content h1 span.light { font-weight: 300; font-size: 16px; text-transform: uppercase;}
		#content h3 { font-family: 'Oswald', sans-serif; color: #b1b3b4; }
		#content h3 span.normal { font-weight: normal; font-size: 16px; }
		#content h3 span.light { font-weight: 300; font-size: 16px; text-transform: uppercase;}
		#content h1 span.creditext { font-size:12px; font-family: 'Droid Serif', serif; font-weight: 300; text-transform: none; font-style: italic; float: right; padding: 8px 0px 0px 0px;	}
		#content h2{ font-size:12px; padding: 10px 0px 10px 0px; border-bottom: 1px solid #b1b3b4; border-top: 1px solid #b1b3b4; color: #b1b3b4; font-weight: 400; margin-bottom:15px;}
		#content p{	font-size:13px; font-family: 'Droid Serif', serif; text-align:justify; width: 100%; margin: auto; padding: 0px 0px 20px 0px;}
		
		#content p.quote{ font-style: italic; padding: 0px 0px 5px 0px; }
		#content p.author{ font-style: normal; font-size: 13px; color: #999; padding: 5px 0px 15px 30px; }
		
		.next { height:100%; width: 20%; float: right; z-index:2; position: relative; }
		.next:hover { background:url('../image/next.png') no-repeat; background-position: right center; }
		.prev { height:100%; width: 20%; float: left; z-index:2;  display:none; position: relative; }
		.prev:hover { background:url('../image/prev.png') no-repeat; background-position: left center; }
		.stories_scrollmask{ overflow: hidden; }
		.stories_slider{ position: relative;}
		.img_story {margin: 0px -4px 0px 0px; border-right: 1px solid #000;}

		#content img.img_thumb { border-bottom:6px solid #FFF; margin: 0 1% 0 0; cursor: pointer;}
		#content img.img_thumb.selected{ border-bottom:6px solid #D20024;}
		#content span.caption { float: right; width: 25%; text-align: left; font-family: 'Droid serif',serif; font-size: 13px; height: 50px; display: none; }
		#content span.caption.show { display: inline; }