/* 
Cube Experiment
Date: 26th March 2009
Author: Paul Hayes
*/
body {
	margin:0; padding:0;
	background:#f1eee8;
	font-family:Verdana, Helvetica, sans-serif;
	font-size:12px;
	color:#663333;
}

h1 {
	font-size:22px;
	color:#990000;
}
h2 {
	font-size:22px;
	color:#990000;
}
#messagescreen, #video-object, #message-object {
	display:none;
}
#messagescreen {
	z-index:2000;
	position:absolute;
	top:0; left:0; width:100%; height:100%;
	background:#000;
	text-decoration:none;
	opacity:0.0;filter:alpha(opacity=80);
}
#video-object object{
	border:4px solid #fff;
	position:absolute; 
	z-index:2100;
	top:10%; bottom:0; left:0;right:0;
}
#close-video-button {
	color:#fff;
		position:absolute; 
		z-index:2200;
		top:-30px;right:10px;
		font-size:100px;
		cursor:pointer;
}
#close-video-button:hover {
	color:yellow;
}

#message-object {
	border:2px solid orange;	
	width:300px;
	height:200px;
	background:#fff;
	position:absolute; 
	z-index:2100;
	top:200px;
	left:0;right:0;
	margin:0 auto;
	padding:20px;
	-webkit-border-radius:8px;
	text-decoration:center;
}
#message-controls {
	background:orange;
	padding:10px;
	color:#fff;
	cursor:pointer;
	height:20px;
}
#topnavleft {

		text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
		
	position:absolute;
	top:-8px;
	left:0;
	width:300px;
	height:140px;
	z-index:1000;

		text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
		background: url(images/UpperLeft.png);
}


#topnavright {
	position:absolute;
	top:-8px;
	right:0;
	width:300px;
	height:140px;
	z-index:1000;

	background: url(images/UpperRight.png);
}
#gawkbox {
	position:absolute;
	top:0;
	left:0;
	width:290px;
	height:100px;
	z-index:900;

	background: url(images/Gawk.png) bottom left no-repeat;
}
#gawkcontent {
	position:relative;
	margin-top:-20px;
	margin-left:35px;
	width:180px;
	height:10px;
	overflow:hidden;
	padding:0 20px 0 20px;
	background:#fff;
}

#chatbox {
	position:absolute;
	top:0;
	right:0;
	width:290px;
	height:100px;
	z-index:900;
	overflow:hidden;
	background: url(images/Chat.png) bottom left no-repeat;
}
#chatcontent {
	position:relative;
	margin-top:-20px;
	margin-left:35px;
	width:220px;
	height:10px;
	overflow:auto;
	background:#fff;
}
#chatinput {
	position:absolute;
	bottom:0;
}
#chatoutput {
	overflow:auto;
	max-height:340px;
	width:100%;
	position:absolute;
	bottom:20px;
}
#missionbox {
	position:absolute;
	bottom:0;
	left:0;
	width:380px;
	height:100px;

	z-index:1000;

		background: url(images/Missions.png);
		overflow:hidden;
		
}
#challengesbox {
	position:absolute;
	bottom:0;
	right:0;
	width:380px;
	height:100px;

	z-index:1000;

		background: url(images/Challenges.png);
		overflow:hidden;
		}
	#challengesbox div.shell, #missionbox div.shell {
		margin-top:110px;
		margin-left:60px;
		background:#fff;
		overflow:auto;
		width:280px;
		height:430px;
	}
	#missionbox div.shell {
		padding:20px;
		width:240px;
		
	}
#bottomnavcenter {
	position:absolute;
	left:0; right:0; bottom:0;
	margin-left:auto; margin-right:auto;
	margin-bottom:0;
	width:600px;
	height:140px;

	z-index:1000;

		text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
		background: url(images/MainTab.png) top center;}
#wrapper {
	overflow:hidden;
	background:#f1eee8;
}


#wrapper {
	overflow:hidden;
	background:#f1eee8;
}
#overlay {
	width:100%;
	height:100%;
	background:#000;
	opacity:.25;
	position:absolute;
	top:0;
	left:0;
	z-index:450;
}


.cube {
	-webkit-perspective:200;
	position: relative;
}

#grid {
	position:absolute;
	top:0;
	left:0;
	z-index:800;
	list-style:none;
	padding:0; margin:0;
	overflow:hidden;
}
#grid li {
	width:20px; height:20px;
	margin:1px; float:left;
	opacity:.15;
}



.ui-state-active {
	background:yellow;
}
#map {
	z-index:2;
}

.playground div.internal {	
	padding: 10px;
	height: 100px;
	width:100px;
	/*-webkit-transform: skewY(-30deg) scaleY(1.16);
	-moz-transform: skewY(-30deg) scaleY(1.16);*/
	background-color: #f1eee8;
	font-size: 0.862em;
}


.playground {
	/*-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);*/
	position: absolute;

}

#missionscreen {
	display:none;
	position:absolute;
	top:0;
	left:0;
	z-index:950;
	overflow:hidden;
	margin:0;
	padding:0;
	border:none;
}
#challengescreen {
	display:none;
	
	position:absolute;
	top:0;
	left:0;
	z-index:3050;
	overflow:hidden;
	margin:0;
	padding:0;
	border:none;
}
#gawkscreen {
	display:none;
	
	position:absolute;
	top:0;
	left:0;
	z-index:3050;
	overflow:hidden;
	margin:0;
	padding:0;
	border:none;
}
#close-screen-button {
	display:none;
	color:#000;
		position:absolute; 
		z-index:6200;
		top:-30px;right:10px;
		font-size:100px;
		cursor:pointer;
}
#close-screen-button:hover {
	color:yellow;
}

#challengesbox ul {
	margin:0;
	padding:0;
	list-style:none;
}
#challengesbox li {
	padding:10px;
	margin:0;
	border-top:1px solid orange;
	border-bottom:1px solid orange;
	
}
#challengesbox li.alt {
	background:#fff;
	border:none;
}
#challengesbox li.urgent {
	background:orange;
}
#challengesbox li.urgent div.box {
	background:#fff  url(images/Challenges_Icon_50.png);
}
#challengesbox li:hover {
	background:yellow;
}
#challengesbox li h2, li h3, li p {
	margin:0;
	padding:0;
	font-size:14px;
}
#challengesbox li h2 {
	font-size:16px;
}
#challengesbox li div.box {
	float:left;
	margin-right:5px;
	width:50px; height:50px;
	-webkit-border-radius: 4px;
	background:  url(images/Challenges_Icon_50.png) orange;
}

#score {
	margin-left:243px;
	margin-top:63px;
	height:;
}
#score div.s1 { width:31px; height:26px; background:url(images/score/1.png); float:left;}
#score div.s2 { width:31px; height:26px; background:url(images/score/2.png); float:left;}
#score div.s3 { width:31px; height:26px; background:url(images/score/3.png); float:left;}
#score div.s4 { width:31px; height:26px; background:url(images/score/4.png); float:left;}
#score div.s5 { width:31px; height:26px; background:url(images/score/5.png); float:left;}
#score div.s6 { width:31px; height:26px; background:url(images/score/6.png); float:left;}
#score div.s7 { width:31px; height:26px; background:url(images/score/7.png); float:left;}
#score div.s8 { width:31px; height:26px; background:url(images/score/8.png); float:left;}
#score div.s9 { width:31px; height:26px; background:url(images/score/9.png); float:left;}
#score div.s0 { width:31px; height:26px; background:url(images/score/0.png); float:left;}
#score div.blank { width:31px; height:26px; background:url(images/score/-.png);float:left; }

/* Optional WebKit Animations */
/*

.rightFace {
	-webkit-transition: -webkit-transform 1s linear;
}

.leftFace {
	-webkit-transition: -webkit-transform 1s linear;	
}

.topFace {
	-webkit-transition: -webkit-transform 1s linear;
}

.cube:hover .rightFace {
	-webkit-transform: skew(0deg, -30deg) translate(100px, 100px);
}

.cube:hover .leftFace {
	-webkit-transform: skew(0deg, 30deg) translate(-100px, 100px);
}

.cube:hover .topFace {
	-webkit-transform: rotate(60deg) translate(-50px, -50px);
}