@charset "utf-8";

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-family:Verdana,Tahoma,Arial,Sans-Serif;
	color:#CCCCCC;
	background-color:#000000;
	
	-khtml-user-select: none;
	-webkit-user-select: none; /* Chrome/Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	-o-user-select: none; /* Opera */
	user-select: none;
}

.myfont {	
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; 
    font-style: normal; font-weight: normal; 
	font-variant: normal; text-transform: none;
}
	       
.myheadline {	
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; 
	font-style: normal; font-weight: normal; 
	font-variant: normal; text-transform: none;
}

td {	
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; 
    font-style: normal; font-weight: normal; 
	font-variant: normal; text-transform: none;
}

A:link { color: #e45854; }
A:visited { color: #BF7F7F; }
A:active { color: #BF3F3F; }

#menuRow A:link { text-decoration: none; color: #DDDDDD;}
#menuRow A:visited { text-decoration: none; color: #DDDDDD;}
#menuRow A:active { text-decoration: none; color: #DDDDDD;}

ul{
	list-style: none;
}

#Menu {
	position:absolute;
	width: 100%;
	height: 100%;
	left:0;
	top:0;
}
#fontpreloader{
	font-family:SourceSansPro-Light,Tahoma,Verdana,Arial,Sans-Serif;
	width:0;
	height:0;
}
#paperCanvas{
	font-family:SourceSansPro-Light,Tahoma,Verdana,Arial,Sans-Serif;
}
#selChapter {
	position:absolute;
	overflow: hidden;
	left:0px;
	top:0;
	width: 100%;
	height: 100%;
}

#selChapter {
	pointer-events:none; 
}
.chapter {
	pointer-events:none; 
	position:absolute;
	width: 22%;
	height: 25%;
	margin-left:-12.5%;
	margin-top:-12.5%;
}

.ChTitle {
	white-space: nowrap;
	display: none;
}

.ChTitleOut {
	position:absolute;
	top:-20%;
	left:50%;
}
.ChTitle {
	position:absolute;
	font-family:SourceSansPro-Regular,Tahoma,Verdana,Arial,Sans-Serif;
	font-size:28px;
	text-align: center;
	width: 500px;
	left:0;
	top:0;
	margin-left:-250px;
	margin-right:250px;
}
.Subs {
	position:absolute;
	width: 300px;
	height:200%;
	top:0;
}
.Subs.IE {
	/* background-size:cover; only while active, only in IE */
	background-image:url('../images/pixel_transparent.png');
	background-repeat:no-repeat;
	/* background-size:0px 0px; */
	background-size:cover; 
}
.SubsInner {
	position:absolute;
	overflow: hidden;
	width:100%;
	height:100%;
	pointer-events:none; 
}
.SubIcons {
	position:absolute;
	top:0;
}
.SubsRight, .SubsLeft {
	pointer-events:none; 
	position:absolute;
	overflow: hidden;
	top:0px;
	height:100%;
	font-size:11px;
}
.SubsRight {
	right:-240px;
	width:250px;
}
.SubsLeft {
	left:-340px;
	width:350px; 
	text-align: right;
}
.subRight, .subLeft {
	position:absolute;
	white-space: nowrap;
	display: none;
	visibility:hidden;
}
.subRight {
	/*left:-100%;*/
	left: 19px;
	-o-transform: translate3d(-120%,0,0);
	-ms-transform: translate3d(-120%,0,0);
	-moz-transform: translate3d(-120%,0,0);
	-webkit-transform: translate3d(-120%,0,0);
}
.subLeft A:link {
	pointer-events:auto;
	cursor: url(../../images/cursors/HandPointer.cur), pointer;
}
.subLeft A:link[target="_blank"] {
	pointer-events:all;
	cursor: url(../../images/cursors/NewPage.cur), pointer;
}
.subRight.dbl, .subLeft.dbl { margin-top:-1em;}
.subLeft {
	/*right:-200px;*/
	right: 19px;
	-o-transform: translate3d(120%,0,0);
	-ms-transform: translate3d(120%,0,0);
	-moz-transform: translate3d(120%,0,0);
	-webkit-transform: translate3d(120%,0,0);
}
.SubLine {
	pointer-events:none; 
	display: none;
	position:absolute;
	width: 1px; /* -> 300px; */
	height: 1px;
	right: 0;
	background-color:rgba(255, 255, 255, 0.7);
}
/* #experiments .SubLine { right:20px;} */
.SubLine.tTop { top:0px; }
.SubLine.tBottom { bottom:0px; }

.scrollarrow {
	pointer-events:auto;
	display: none;
	position:absolute;
	width: 50px;
	height: 30px;
	left:auto;
	right:0;
	margin-left: -7px;
	margin-right: -8px;
	background-size:50px 90px;
	background-position:0px 0px;
}
#experiments .scrollarrow { right:86px;}

.scrollarrow:hover{ background-position:0px -30px; }

.scrollarrow:active{ background-position:0px -60px; }

.scrollarrow.tUp { 
	background-image:url('../images/scrollArrow_up.png');
	bottom:0px; 
	/*cursor:  url(../images/cursors/UpArrow.cur), pointer; */
}
.scrollarrow.tDown { 
	background-image:url('../images/scrollArrow_down.png');
	top:0px; 
	/* cursor:  url(../images/cursors/DownArrow.cur), pointer; */
}
/* ------------------------------ */

#home { left: 50%; top: 50%; }

#aboutme { left: 25%; top: 25%; }
#aboutme .Subs { left: 111%; top:20%; width: 200px; height:75%; }

#specials { left: 20%; top: 75%; }
#specials .Subs { left: 111%; top:10%; width: 220px; height:75%; }

#projects { left: 83%; top: 30%; }
#projects .Subs { right: 110%; top:-25%; height: 240%;}
#projects .SubIcons { right: 41px;}
#projects .SubsInner{ width:135%; right:0;}

#experiments { left: 75%; top: 80%; }
#experiments .Subs { width:600px; right: 110%; top:-125%; height: 200%;}
#experiments .SubIcons { right: 130px;}
#experiments .SubsInner{ width:135%; right:0;}
#experiments .SubsRight { right:-170px; width:180px; }
#experiments .SubsLeft { left:-570px; width:580px; }

/* ------------------------------ */

#Content,#ContentCover {
	pointer-events:none;
	display:none;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
#ContentCover {
	opacity:0;
	background-color:#000000;
}
#ContentCover.show {
	opacity:0.8;
	transition: opacity 0.6s ease-out;
	-o-transition: opacity 0.6s ease-out;
	-ms-transition: opacity 0.6s ease-out;
	-moz-transition: opacity 0.6s ease-out;
	-webkit-transition: opacity 0.6s ease-out;
}

#iframe_container {
	position:absolute;
	left:0;
	top:0;
	overflow: hidden;
	pointer-events:auto;
}
#iframe_container iframe {
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
}
#content_loading {
	position:absolute;
	top:50%;
	width:200px;
	margin-left:-100px;
	text-align:center;
	
}
#content_div {
	pointer-events:auto;
	display:none;
	position:absolute;
	width:100%;
	/*min-height:100%;*/
	left:0;
	top:0;
	padding-top:0px;
	padding-bottom:0px;
	-webkit-transform-style:preserve-3d;
	-webkit-backface-visibility: hidden;
}
/*
#content_div.mrgn {
	margin-top:30px;
	margin-bottom:30px;
	min-height: -moz-calc(100% - 60px);
    min-height: -webkit-calc(100% - 60px);
    min-height: calc(100% - 60px);
}
*/
#content_iframe {
	pointer-events:auto;
}
.ChapterImgs {
	display:none;
}

#closeButton {
	pointer-events:auto;
	display:none;
	position:absolute;
	/*cursor: url("images/cursors/HandPointer.cur"), pointer;*/
	background-image:url('../images/pixel_transparent.png');
	background-size:cover; 
}

#scrollUpButton, #scrollDownButton {
	pointer-events:auto;
	display:none;
	position:absolute;
	background-image:url('../images/pixel_transparent.png');
	background-size:cover; 
}
	
#paperCanvas_content {
	position:absolute;
	pointer-events:none;
}
#paperCanvas_BG{
	/*display:none;*/
	position:absolute;
}

/* ------------------------------ */

#menuRow {
	position:absolute;
	display:block;
	width:100%;
	height:27px;
	left:0;
	top:0;
	font-size:11px;
	color:#DDDDDD;
	overflow: hidden;
}
#menuRow.standalone {
	top:20px;
}
#menuArrow {
	position:absolute;
	float: left;
	left:0;
	top:0;
	width:20px;
	height:100%;
	background-image:url('../images/menu_arrow.png');
	background-size:6px 11px;
	background-repeat:no-repeat;
	background-position:center;
	opacity:0.7;
	
	transform: rotate(0deg);
	-o-transform: rotate(0deg); /* Opera */
	-ms-transform: rotate(0deg); /* IE 9 */
	-moz-transform: rotate(0deg); /* Firefox */
	-webkit-transform: rotate(0deg); /* Safari and Chrome */
	
	transition: all 0.5s ease-in-out 1s;
	-o-transition: all 0.5s ease-in-out 1s;
	-ms-transition: all 0.5s ease-in-out 1s;
	-moz-transition: all 0.5s ease-in-out 1s;
	-webkit-transition: all 0.5s ease-in-out 1s;
}
#menuArrow.standalone {
	transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
}
#menuArrow.show {
	transform: rotate(90deg);
	-o-transform: rotate(90deg); /* Opera */
	-ms-transform: rotate(90deg); /* IE 9 */
	-moz-transform: rotate(90deg); /* Firefox */
	-webkit-transform: rotate(90deg); /* Safari and Chrome */
	
	transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
}

#menuMoveRow {
	position:absolute;
	white-space:nowrap;
	background-color:#333333;
	min-width:100%; width: auto !important; width: 100%;
	height:26px;
	left:0;
	top:0;
	border-width:0px;
	border-bottom-width:1px;
	border-bottom-color:#777777;
	border-style:solid;
	
	transform: translate3d(0,-200%,0);
	-o-transform: translate3d(0,-200%,0);
	-ms-transform: translate3d(0,-200%,0);
	-moz-transform: translate3d(0,-200%,0);
	-webkit-transform: translate3d(0,-200%,0);
	
	transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
}
#menuMoveRow.notstandalone {
	transform: translate3d(0,-100%,0);
	-o-transform: translate3d(0,-100%,0);
	-ms-transform: translate3d(0,-100%,0);
	-moz-transform: translate3d(0,-100%,0);
	-webkit-transform: translate3d(0,-100%,0);
	
	transition: all 0.5s ease-in-out 1s;
	-o-transition: all 0.5s ease-in-out 1s;
	-ms-transition: all 0.5s ease-in-out 1s;
	-moz-transition: all 0.5s ease-in-out 1s;
	-webkit-transition: all 0.5s ease-in-out 1s;
}
#menuMoveRow.show{
	transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	
	transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
}
.floatLeft {
	float: left;
	white-space:nowrap;
	margin-left:25px;
	margin-top: 6px;
	display:inline-block;
}
.menuRight {
	max-width: 100%;
	text-align: right;
	margin-right:20px;
	margin-top: 6px;
}
.fb-like {
	float: left;
	margin-left:6px;
	margin-top: 3px;
}

#fps_container {
	position:absolute;
	left: 0px;
	bottom: 0px;
	width:15px;
	height:15px
}
#fps {
	display:none;
	position:absolute;
	font-size:11px;
	left: 15px;
	bottom: 0px;
	width: 100px;
	height: 20px;
	color:#AAAAAA;
}
#fps.show {
	display:block;
}

/* -------------------------------------------------- */