/*THEMISTOKLIS KOUTSOURIS - TUC - GRAPHICS COURSE - BLOXORZ IMPLEMENTED WITH WEBGL*/

@font-face {	/*include the arial black font if it is not installed*/
font-family: ArialBlack;
src: url('Arial-Black.woff');
}

*{
	margin:0;
	padding:0;
}

body, html{
	height:100%;
	background-color:rgb(50,0,0);
	background-image:url('projectTextures/bck1.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center;
	overflow:hidden;
	font-family: 'ArialBlack', 'Arial Bold', Gadget, Impact, sans-serif;
	cursor:default;
}
ul{
	list-style:none;
}
body:before {
	content: "";
	-webkit-box-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000;
	-moz-box-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000;
	box-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000;
	height: 10px;
	left: 0;
	position: fixed;
	z-index: 10;
	top: -10px;
	width: 100%;
}
body:after {
	content: "";
	-webkit-box-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000;
	-moz-box-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000;
	box-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000;
	right: -11px;
	position: fixed;
	z-index: 10;
	top: 0;
	height: 100%;
	width:10px;
}

#c{
	display:none;
    position:absolute;
	width:100%;		/*for smaller canvas size in js when user wants performance*/
	height:100%;	/*over quality. The canvas will still scale to size*/
}

.prompt{
	transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	font-size:200%;
	text-align:center;
	position:absolute;
	top:40%;
	bottom:50%;
	right:20%;
	left:20%;
	color: #ffaa00;
	letter-spacing:-1px;
	transform: scale(1.9);
	-o-transform: scale(1.9);
	-moz-transform: scale(1.9);
	-webkit-transform: scale(1.9);
	transform-origin: 50% 10%;
	-o-transform-origin: 50% 10%;
	-moz-transform-origin: 50% 10%;
	-webkit-transform-origin: 50% 10%;
	white-space:nowrap;
	display:none;
	z-index:3;
}

.scorePrompt{
	transition: all 0.5s ease-in;
	-moz-transition: all 0.5s ease-in;
	-webkit-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	text-align:center;
	width:6.5em;
	color: #ffaa00;
	font-size:150%;
	transform: scale(4);
	-o-transform: scale(4);
	-moz-transform: scale(4);
	-webkit-transform: scale(4);
	transform-origin: 0% 50%;
	-o-transform-origin: 0% 50%;
	-moz-transform-origin: 0% 50%;
	-webkit-transform-origin: 0% 50%;
	white-space:nowrap;
	display:none;
	z-index:3;
	position:fixed;
	bottom:50%;
	left:20%;
	letter-spacing:0px;
}

#help{
	/*border: 3px dashed #000000;*/
	padding: 5px;
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	font-size:110%;
	position:fixed;
	right:0.4em;
	bottom:0.2em;
	z-index:1;
	color: #ffaa00;
	letter-spacing:0px;
	text-align:right;
	line-height:1.5em;
	opacity:0.5;
}
/*
#help:hover{
	font-size:180%;
}
*/
#glass{
	transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	display:none;
	opacity:1;
	z-index:2;
	position: absolute;
	top:50%;
	left:50%;
	width:640px;
	height:400px;
	margin-top:-200px;
	margin-left:-200px;
}

#score{
	font-size:150%;
	position:fixed;
	bottom:0.2em;
	left:0.4em;
	z-index:2;
	color: #ffaa00;
	letter-spacing:0px;
}

#popup{
	padding: 5px;
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	font-size:110%;
	position:fixed;
	bottom:0.2em;
	right:0.4em;
	z-index:1;
	color: #ffaa00;
	letter-spacing:0px;
	text-align:right;
	line-height:1.5em;
	opacity:0;
	display:none;
}

.textshading {
	text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000, 
	2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 
	-3px 1px 0  #000,-4px 2px 0  #000, -1px 3px 0  #000,-2px 4px 0  #000, -3px 3px 0  #000,-4px 4px 0  #000;
}
.textshadingLight {
	text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000, 
	2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
}