@charset "UTF-8";
/* CSS Document */

body{
	margin:0px;
	/* Disable Native touch right-clicking */
	-webkit-touch-callout:none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-size-adjust:none;
	-webkit-user-select:none;
}
#game{
	position:absolute;
	left:0px;
	top:0px;
	font-size:40px;
	width:8em;
	height:12em;
	background-color:rgb(30, 30, 30);
	color:rgb(200, 200, 100);
}
#game .background{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:0;
}
#game .background canvas{
	width:100%;
	height:100%;
}
#game .screen{
	position:absolute;
	width:100%;
	height:100%;
	display:none;
	z-index:10;
}
#game .screen.active{
	display:block;
}
#game-screen .game-board{
	position:relative;
	width:8em;
	height:8em;
	-webkit-perspective: 16em;
}
#game-screen .game-board .board-bg, #game-screen .game-board .board{
	position:absolute;
	width:100%;
	height:100%;
}
#game-screen .game-board .board{
	z-index:10;
}
#game-screen .game-board .board-bg{
	z-index:0;
}
#game-screen .game-board .dom-container{
	position:absolute;
	width:100%;
	height:100%;
}
#game-screen .game-board .dom-container .jewel{
	position: absolute;
	width:1em;
	height:1em;
	overflow:hidden;
}
/* Game info */
#game-screen .game-info{
	width:100%;
	float:left;
}
#game-screen .game-info label{
	display: inline-block;
	height:1.5em;
	float:left;
	font-size:0.6em;
	padding:0.25em;
}
#game-screen .game-info .score{
	float:right;
}
#game-screen .time{
	0.25em;
	border-radius:.5em;
}
#game-screen .time .indicator{
	width:100%;
}
/* Announcements */
#game-screen .announcement{
	position:absolute;
	left:0;
	top:50%;
	margin-top:-0.5em;
	width:100%;
	font-family:"Times New Roman", Times, serif;
	color: rgb(150, 150 75);
	text-shadow: 0.03em 0.03em 0.03em rgb(255, 255, 0),
				 0.03em 0.03em 0.03em rgb(255, 255, 0),
				 0.1em 0.15em 0.15em rgb(0,0,0);
	text-align:center;
	white-space:nowrap;
	z-index:20;
	opacity:0;
	cursor:default;
}
/* Modernizr class */
.no-textshadow #game-screen .announcement{
	filter: glow(color: #ffff00, strength=1),
			dropshadow(color=#000000, offX=3, offY=3);
}
/* Keyframes for Webkit */
@-webkit-keyframes zoomfade{
	0% {
		opacity:1;
		-webkit-transform:scale(0.5);
	}
	25% {
		opacity: 1;
	}
	100% {
		opacity:0;
		-webkit-transform:scale(1.5);
	}
}
/* Keyframes for Gecko */
@-moz-keyframes zoomfade{
	0% {
		opacity:1;
		-moz-transform:scale(0.5);
	}
	25% {
		opacity: 1;
	}
	100% {
		opacity:0;
		-moz-transform:scale(1.5);
	}
}
.zoomfade{
	-webkit-animation-name: zoomfade;
	-webkit-animation-duration:2s;
	-moz-animation-name: zoomfade;
	-moz-animation-duration:2s;
}
/* Fallback for browers without css animation */
.no-cssanimations #game-screen .announcement{
	display:none;
}
.no-cssanimations #game-screen .announcement.active{
	opacity:1;
	display:block;
}

/* Canvas Fallback */
#game-screen .game-board .board-bg{
	background-image: -webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 75%,
						rgba(255,255,255,0.15) 75%, rgba(255,255,255,0.15)),
					  -webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 75%,
					  	rgba(255,255,255,0.15) 75%, rgba(255,255,255,0.15)					  
					  );
	background-size:2em 2em;
	background-position:0 0, 1em 1em;
}

#splash-screen{
	text-align:center;
	padding-top:0.5em;
}
#splash-screen .continue{
	cursor: pointer;
	font-size:.75em;
	display:none;
}
/* Progress bar */
.progress{
	margin:1em auto .5em auto;
	width:6em;
	height:0.5em;
	border-radius:0.5em;
	overflow:hidden;
	border: 1px solid rgb(200, 200, 100);
}
.progress .indicator{
	background-color: rgb(200, 200, 100);
	height:100%;
	width:0%;
}
.logo{
	font-size:1.5em;
	line-height:.9em;
	margin:0;
	text-align:center;
	color:rgb(70,120,20);
	text-shadow:1px 1px 3px rgb(255, 255, 0), -1px -1px -2px rgb(255, 255, 0), 5px 8px 8px rgb(0, 0, 0);
}

#main-menu{
	padding-top:0.5em;
}
ul.menu{
	text-align:center;
	padding:0;
	margin:0;
	list-style:none;
}
ul.menu li{
	margin: 0.8em 0;
}
ul.menu li button{
	font-size:0.6em;
	color:rgb(100, 120, 0);
	width:10em;
	height:1.5em;
	background: rgb(10, 20, 0);
	border:0.1em solid rgb(255, 255, 0);
	border-radius:0.5em;
	-webkit-box-shadow:0.2em 0.2em 0.3em rgb(0, 0, 0);
	-moz-box-shadow:0.2em 0.2em 0.3em rgb(0, 0, 0);
	box-shadow:0.2em 0.2em 0.3em rgb(0, 0, 0);
}
ul.menu li button:hover{
	background:rgb(30,40,0);
}
ul.menu li button:active{
	color:rgb(255,255,0);
	background:rgb(30,40,0);
}


/* Install screen for iOS device */
#install-screen {
	padding-top:0.5em;
	text-align:center;
}
#install-screen span{
	font-size:0.75em;
	display:inline-block;
	padding:1.5em 0.5em 0 0.5em;
}

/* This element is only used to pass it's properties to javascript */
.jewel-size{
	font-size:40px;
}
#jewel-proto{
	position:absolute;
	width:1em;
	height:1em;
	left:-100px;
}


/* =================================
		  Mobile Devices 
================================= */
/* Smartphone Landscape */
/*@media (orientation: landscape){
	#game-screen .game-board{
		float:left;
	}
	#game-screen .game-info{
		width:auto;
		height:2em;
		white-space:nowrap;
	}
	#game-screen .game-info label{
		font-size:0.5em;
	}
	#game-screen .game-info .score{
		float:left;
		clear:both;
	}
	#game-screen .time{
		font-size: 0.5em;
		margin: 0;
		float:left;
		width: 6.5em;
		-webkit-transform: rotate(-90deg) translate(-3em, -1.75em);
		-moz-transform: rotate(-90deg) translate(-3em, -1.75em);
		-ms-transform: rotate(-90deg) translate(-3em, -1.75em);
		transform: rotate(-90deg) translate(-3em, -1.75em);
	}
	.jewel-size{
		font-size: 32px;
	}
}*/
/* Small Screens Landscape*/
/*@media (orientation: landscape) and (max-device-width: 480px){
	.jewel-size{
		font-size: 24px;
	}
}*/
/* Tablets */
/*@media (min-device-width: 768px){
	#game-screen .game-board{
		margin:.75em;
	}
	.jewel-size{
		font-size: 80px;
	}
}*/
/* Tablet Landscape */
/*@media (orientation: landscape) and (min-device-width: 768px){
	#game-screen .game-board{
		margin:.25em;
	}
	.jewel-size{
		font-size: 64px;
	}
}*/