@charset "utf-8";
/* CSS Document */
/* Background pattern from subtlepatterns.com */

body
{
	background-image:	url(../img/dark_wall.png);
}

.fadeIn{
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0px;
	left: 0px;
	background-image:url(../../Assets/basic/dark_exa.png);
	z-index: 1000;
}

#banner
{
	position:relative;
	background-image:url(../img/Banner.png);
	width: 1169px;
	height: 370px;
	z-index: 25;
}

#toRoom
{
	position: absolute;
	top: -270px;
	left: 0px;
	width: 167px;
	height: 129px;
	background-image: url(../img/toRoom.png);
	z-index: 51;
}

#topBar
{
	position:relative;
	background-color:	#585858;
	width: 1200px;
	height: 100px;
	margin-top: -57px;
	-webkit-box-shadow: 0px 20px 30px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 20px 30px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 20px 30px 0px rgba(0,0,0,0.75);
	z-index: 50;
}

#botBar
{
	position:relative;
	background-color:	#585858;
	width: 1200px;
	height: 50px;
	margin-top: -17px;
	-webkit-box-shadow: 0px 20px 30px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 20px 30px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 20px 30px 0px rgba(0,0,0,0.75);
	z-index: 49;
}

#screen
{
	position:relative;
	width: 1100px;
	height: 1565px;
	margin-top: -1px;
	background-color: #c1c1c1;
	z-index: 10;
}

#comicFrame
{
	position: absolute;
	width: 870px;
	height: 1345px;
	margin-top: 100px;
	margin-left: 115px;
	background-color: #FFF;
	-webkit-box-shadow: 0px 0px 20px 30px rgba(255,255,255,1);
	-moz-box-shadow: 0px 0px 20px 30px rgba(255,255,255,1);
	box-shadow: 0px 0px 20px 30px rgba(255,255,255,1);
	z-index: 25;
}

#bottomSpacer
{
	position: relative;
	width:1200px;
	height: 650px;
}

#remoteAlign
{
	position: relative;
	width: 1px;
	height: 1px;
}

#remote
{
	position:fixed;
	width: 341px;
	height: 534px;
	bottom: -125px;
	background-image:url(../img/remoteMenu.png);
	z-index: 100;
}
	#remoteMenu
	{
		position: absolute;
		width: 132px;
		height: 413px;
		margin-top: 15px;
		margin-left: 75px;
	}
	
	#pageL
	{
		cursor: pointer;
		position: absolute;
		width: 61px;
		height: 34px;
		background-image:url(../img/pleftIcon.png);
		top: 53px;
		left: 1px;
	}
	#pageR
	{
		cursor: pointer;
		position: absolute;
		width: 61px;
		height: 34px;
		background-image:url(../img/prightIcon.png);
		top: 53px;
		left: 70px;
	}
	#epL
	{
		cursor: pointer;
		position: absolute;
		width: 61px;
		height: 34px;
		background-image:url(../img/eleftIcon.png);
		top: 112px;
		left: 1px;
	}
	#epR
	{
		cursor: pointer;
		position: absolute;
		width: 61px;
		height: 34px;
		background-image:url(../img/erightIcon.png);
		top: 112px;
		left: 70px;
	}
	
	#firstB
	{
		cursor: pointer;
		position: absolute;
		width: 125px;
		height: 35px;
		background-image:url(../img/firstIcon.png);
		top: 170px;
		left: 1px;
	}
	#lastB
	{
		cursor: pointer;
		position: absolute;
		width: 125px;
		height: 35px;
		background-image:url(../img/LastIcon.png);
		top: 210px;
		left: 1px;
	}

#page
{
	position: fixed;
	width: 919px;
	height: 590px;
	background-image:url(../img/pageSection.png);
	bottom: -600px;
	margin-left: -200px;
	z-index: 99;
}

	#pageContent
	{
		position: absolute;
		width: 600px;
		height: 515px;
		top: 34px;
		left: 287px;
	}
		
		#commentSection
		{
			position: absolute;
			width: 100%;
			height: 250px;
			top: 0px;
			left: 0px;
		}
		#commentSection img
		{
			position:absolute;
			left:0px;
		}
		
		#newsSection
		{
			position: absolute;
			width: 100%;
			height: 250px;
			margin-top: 15px;
			top: 50%;
			left: 0px;
		}
		#newsSection img
		{
			position:absolute;
			left:0px;
		}
		
		.commentText
		{
			font-family: 'vtc_letterer_proregular';
			font-size: 20px;
			position: absolute;
			width: 423px;
			height: 100%;
			left: 177px;
			top: 0px;
		}

/*Tools*/
.scrollOverflow{
	overflow:scroll;
}

.linkOfDiv
{
	position:absolute; 
	width:100%;
	height:100%;
	top:0;
	left: 0;
	
	z-index: 800;
}

/*Special Effects*/
.window a:hover {
	color:#f2f2f2;
}

.window h1
{
	font-weight: bold;
}
.window h6
{
	text-align: left;
}

.thumbBorder
{
	-webkit-box-shadow:inset 0px 0px 0px 4px #FFF;
    -moz-box-shadow:inset 0px 0px 0px 4px #FFF;
    box-shadow:inset 0px 0px 0px 4px #FFF;;
}

.blurAble {
}

#disableFX
{
	cursor: pointer;
	position: fixed;
	padding-top: 3px;
	bottom: 5px;
	left: 5px;
	width: 90px;
	height: 20px;
	z-index: 999;
	background-color: #FFF;
	opacity: .6;
}

#facebookLink
{
	position: fixed;
	padding-top: 3px;
	bottom: 35px;
	left: 5px;
	width: 49px;
	height: 20px;
	z-index: 997;
}

#twitterLink
{
	position: fixed;
	padding-top: 3px;
	bottom: 35px;
	left: 59px;
	width: 60px;
	height: 20px;
	z-index: 998;
}

/*Font from: http://www.fontsquirrel.com/fonts/VTC-Letterer-Pro*/
@font-face {
    font-family: 'vtc_letterer_proregular';
    src: url('../VTC_letterer_pro-webfont.eot');
    src: url('../VTC_letterer_pro-webfont.eot?#iefix') format('embedded-opentype'),
url('../VTC_letterer_pro-webfont.woff') format('woff'),
url('../VTC_letterer_pro-webfont.ttf') format('truetype'),
url('../../Unanimated/VTC_letterer_pro-webfont.svg#vtc_letterer_proregular') format('svg');
    font-weight: normal;
    font-style: normal;

}