/* Font Setup */
@font-face {
	font-family: 'Chantelli Antiqua Regular';
	src: url('../Fonts/Chantelli_Antiqua.eot');
	src: local('../Fonts/Chantelli Antiqua Regular'), local('../../Fonts/ChantelliAntiqua'), url('../../Fonts/Chantelli_Antiqua.woff') format('woff'), url('../../Fonts/Chantelli_Antiqua.ttf') format('truetype'), url('../../Fonts/Chantelli_Antiqua.svg#ChantelliAntiqua') format('svg');
}

@font-face {
	font-family: 'UglyQua Italic';
	src: url('../../Fonts/UglyQua-Italic.ttf') format('truetype');
}

@font-face {
  font-family: '1942 report';
  src: url('../Fonts/1942.ttf') format('truetype');
}

/* Scroll Bars */
::-webkit-scrollbar {
  height: 10px;
  width: 10px;

}

::-webkit-scrollbar-thumb {
  background-color:rgba(0,0,0,0.2);
  -webkit-border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background-color:rgba(0,0,0,0.6);
}

::-webkit-scrollbar-track {
  background-color:white;
  border: none;
  margin: 20px 5px 20px 5px;
  -webkit-border-radius: 16px;
}

::-webkit-scrollbar-track:hover {
  border:1px solid rgba(0,0,0,0.6);
}


/* Main Elements and Page Layout */
html {
	background-color:white;
	width: 98%;
	min-width:800px;
	}

body {

	width: 100%;
	}

h1 {font: 60px/68px '1942 report', Arial, sans-serif;letter-spacing: 0;}
h2 {font: 36px/42px '1942 report', Arial, sans-serif;}
h3 {font: 19px/22px '1942 report', Arial, sans-serif;}
p, th, td, li, span {font: 18px/27px '1942 report', Arial, sans-serif;}
span.option {
  font: 60px/100px '1942 report', Arial, sans-serif;
  vertical-align:top;
}

a {
	color:#3366aa;
	text-decoration: none;
}

a:hover {
	color:#6699aa;
}

a:visited {
	color:#778877;
}

#clock {
	position:absolute;
	top:28%;
	left: 18%;
	width: 12%;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(5px);
	-webkit-transform-style: preserve-3d;
	-webkit-transition-property: z-index;
    -webkit-transition-duration: 1.5s;
}

#container {
	position:relative;
	margin: auto;
	overflow:hidden;
	height: 100%;
	-webkit-perspective: 500;
}

#options {
	display:none;
	position: absolute;
	width: 60%;
	margin:auto;
	top: 40%;
	left: 18%;
	text-align:center;
	vertical-align: middle;
	z-index:1;
	-webkit-transform: translateZ(-4px) rotateY(180deg);
	-webkit-backface-visibility: hidden;
}

#post_board {
	position:absolute;
	top: 28%;
	left: 62%;
	width: 22%;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(5px);
	-webkit-transform-style: preserve-3d;
	-webkit-transition-property: z-index;
	-webkit-transition-duration: 1.5s;
}

#room {
	position:relative;
	margin: auto;
	width: 100%;
	-webkit-transform-style: preserve-3d;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1.5s;
}

#tree {
	left: 1%;
	position: absolute;
	top: 27%;
	width: 27%;
	z-index: 1;
	-webkit-transform: translateZ(15px) rotateY(5deg);
	-webkit-transform-style: preserve-3d;
	-webkit-transition-property: -webkit-transform left;
    -webkit-transition-duration: 1.5s;
	}

.closer {
  display: none;
}

.face {
	position:absolute;
	top: 36%;
	left: 27%;
	width: 42%;
	z-index:4;
	-webkit-transform: translateZ(60px);
	-webkit-transform-style: preserve-3d;
	-webkit-transition-property: -webkit-transform top;
    -webkit-transition-duration: 1.5s;
	}

.face img {
	position:absolute;
	}

.face.flipped {
	top: 80%;
}

.flipped {
	-webkit-transform: rotateY(180deg);
}

.flipped #post_board {
	z-index: -1;
	}

.flipped #clock {
	z-index: -1;
	}

.flipped #options {
  display: block;
}

.flipped #tree {
	-webkit-transform: translateZ(-15px) rotateY(-5deg);
}

.flipped .window {
	left: 90%;
	-webkit-transform: translateZ(0px) rotateY(90deg);
	}

.flipped .pScreen {
	z-index: 2;

}

.light {
	cursor:pointer;
	left: 29%;
	position:absolute;
	top: 6%;
	width: 40%;
	z-index:2;
	-webkit-transform: translateZ(30px);
	-webkit-transform-style: preserve-3d;
}

.open .closer {
  display: block;
  height: 25px;
  left: 95%;
  position: absolute;
  top: 11%;
  width: 25px;
}

.open .screen {
  background-color: white;
  border-left: 4px solid black;
  border-right: 4px solid black;
  height: 80%;
  margin: -10px auto 0 auto;
  overflow: auto;
  padding: 10px;
  width: 91%;
	}

.option {
  cursor:pointer;
  height: 10%;

}

.pScreen {
	height: 10%;
	position: absolute;
	top: 15%;
	left: 11%;
	width: 76%;
	z-index: -1;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(-5px) rotateY(180deg);
	-webkit-transition-property: z-index height;
	-webkit-transition-duration: 1.5s;
}

.pScreen.open {
  height: 70%;
}

.pScreen.open + #tree {
	left: -11%;
	-webkit-transform: translateZ(-28px) rotateY(-5deg);
}

.room {
	width:100%;
	z-index:0;
	-webkit-transform-style: preserve-3d;
	}
.rssItem {
	margin-bottom: 5px;
	margin-top: 5px;
}
.screen {

}


.sTop {

	}

.twitter p, .rssItem {
	border: 1px solid rgba(0,0,0,0.2);
	padding: 2px 5px;
	-webkit-border-radius: 10px 20px;
}

.twitter a {
	text-decoration: none;
}

.twitter p:hover, .rssItem:hover {
	background-color: rgba(255,255,0,0.4);
}

.window {
	position:absolute;
	top:25%;
	left:87%;
	width:20%;
	-webkit-transform: translateZ(30px) rotateY(-90deg);
	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: left;
	-webkit-transition-property: -webkit-transform top left;
    -webkit-transition-duration: 1.5s;
}

/* .face img, .room img, .light img, #clock img, #post_board img, .window img, .pScreen img, #tree img */
.decor {
	width:100%;
}