@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;
}

/* -----------------------------------------------------------------------
   HD REMASTER SCALE (2026-07-24): comic pages are being re-exported at
   1800px wide (was 870). The whole projection stack below is the ORIGINAL
   layout multiplied by 1800/870 = 2.069 so every ratio is preserved.
   Bitmap pieces (banner, toRoom) stretch via background-size until they
   get their own remaster pass.
   -------------------------------------------------------------------- */

/* banner + toRoom stay at their ORIGINAL bitmap size (user call 2026-07-24):
   crisp art beats matching the x2.069 stack scale */
#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: 2206px;	/* screen 2000 + the design's ~103px roller overhang per side */
	height: 150px;
	margin-top: -57px;	/* UNscaled: the overlap is against the unscaled banner,
	                       so it keeps the original 57px bite (banner uncovered,
	                       toRoom back inside the page) */
	-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: 2206px;
	height: 103px;
	margin-top: -35px;
	-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;
}

/* the screen forms tightly around the 1800px page: 100px margins all around,
   pulling the comic visuals higher while keeping full page resolution */
#screen
{
	position:relative;
	width: 2000px;
	height: 2983px;
	margin-top: -1px;
	background-color: #c1c1c1;
	z-index: 10;
}

#comicFrame
{
	position: absolute;
	width: 1800px;
	height: 2783px;
	margin-top: 100px;
	margin-left: 100px;
	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;
}

	/* legacy 870px pages upscale to fill; 1800px remasters land 1:1 */
	#comicFrame img
	{
		width: 100%;
		height: auto;
	}

#bottomSpacer
{
	position: relative;
	width:2483px;
	height: 1345px;
}

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

#remote
{
	position:fixed;
	width: 341px;
	height: 534px;
	bottom: -125px;
	/* anchored just clear of the 1800px comic (frame right edge = center +
	   900, remote starts 12px past it) -- but clamped so it never leaves the
	   viewport: on displays narrower than ~2500px it pins to the right edge
	   instead of drifting off-screen */
	left: min(calc(50% + 912px), calc(100vw - 360px));
	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;
	}
	#FFB
	{
		cursor: pointer;
		position: absolute;
		width: 125px;
		height: 35px;
		background-image:url(../img/FFIcon.png);
		top: 250px;
		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;	/* was 40px to clear the socials bar -- socials removed 2026-07-24 */
	left: 5px;
	width: 90px;
	height: 20px;
	z-index: 999;
	background-color: #FFF;
	opacity: .6;
}

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

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

#patreonLink
{
	position: fixed;
	padding-top: 3px;
	bottom: 5px;
	left: 5px;
	width: 160px;
	height: 23px;
	background-image: url(../../Assets/patreonIcon.png);
	z-index: 998;
}

#socialBar{
	position: fixed;
	bottom: 5px;
	left: 5px;
	height: 30px;
	z-index: 998;
}

#socialBar a{
	float: left;
	margin-right: 10px;
}

#fbIcon{
	width: 30px;
	height: 30px;
	background-image: url(../../Assets/basic/Facebook.png);
}
#mIcon{
	width: 30px;
	height: 30px;
	background-image: url(../../Assets/basic/Minds.png);
}
#twIcon{
	width: 30px;
	height: 30px;
	background-image: url(../../Assets/basic/Twitter.png);
}
#daIcon{
	width: 30px;
	height: 30px;
	background-image: url(../../Assets/basic/DeviantArt.png);
}
#faIcon{
	width: 30px;
	height: 30px;
	background-image: url(../../Assets/basic/FA.png);
}
#igIcon{
	width: 30px;
	height: 30px;
	background-image: url(../../Assets/basic/IG.png);
}
#pIcon{
	width: 30px;
	height: 30px;
	background-image: url(../../Assets/basic/Patreon.png);
}
/*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;

}