/* 
 * main.css, primary game styles
 * responsive styles are in mobile.css
 */
body {
	font-size:16px;
	margin:0;
	overflow:hidden;
	/* HTML5 Games: Listing 3-28, p. 73, 
	disables inappropriate browser behavior */
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-text-size-adjust: none;
	-webkit-user-select:none;
	/* ADDED our own custom typeface */
	font-family: OpenSansRegular, sans-serif;
}

main {
	width:100%;
	height:100%;
}

/* 
 * ============================
 * PAGE ELEMENTS
 * ============================
 */

/* Brand logo */
.identity {
	width:80%;
	font-family:BlackoutMidnight;
	font-size:60px;
	line-height:0.9em;
	text-shadow:0.03em  0.03em  0.03em rgb(255,255,0),
				-0.03em -0.03em  0.03em rgb(255,255,0),
				0.10em  0.15em  0.15em rgb(0,0,0);
	margin:0 auto;
	text-align:center;
	color:rgb(70,120,20);
}

/* 
 * create a tiled background pattern 
 * NOTE: no vendor prefixes used due to Prefix Free
 * @link http://leaverou.github.io/prefixfree
 */
.pattern {
	background-color: rgb(30, 30, 30);
	background-image:
	linear-gradient(45deg, 
	transparent 0%, rgb(20,20,20) 25%, 
			transparent 50%, rgb(20,20,20) 75%, 
			transparent 100%),
		linear-gradient(-45deg, 
			transparent 0%, rgb(20,20,20) 25%, 
			transparent 50%, rgb(20,20,20) 75%, 
			transparent 100%);
}

/* 
 * ============================
 * ALL SCREENS
 * ============================
 */

/* screen background <div id="screen"> */
.screen {
	width:100%;
	height:100%;
	margin:0 auto;
	padding:0;
	color:rgb(200,200,100);
	background-color:rgb(60,60,40);
	background-size:10px 10px;
	/* hide by default */
	display:none;
	visibility:hidden; /* NOTE: Hack for IE */
	z-index:10;
	text-align:center;
}

/* screen is visible <div id="screen active">... */
.screen.active {
	display:block; /* we assign this dynamically using JavaScript */
	visibility:visible; /* NOTE: Hack for IE */
}

/* 
 * ============================
 * INDIVIDUAL SCREENS
 * ============================
 */

/* splash screen */
#screen-splash {

}

/* progress in splash screen during the load */
.progress {
	margin:0 auto;
	font-size:0.65em;
	font-family:open_sansregular, sans-serif;
}

/* progress bar on splash screen */
.progress .indicator-wrapper {
	margin:0 auto;
	width:144px; /*same width as loader image*/
	border-radius:0.1em;
	border:1px solid rgb(200,200,100);
}

.progress .indicator {
	width:10%;
	margin-left:0;
	background-color:red;
	height:10px;
}

/* install screen */
#screen-install {

}

/* main menu at start */
#screen-menu {

}

/* menu buttons */
ul.menu {
	text-align:center;
	padding:0;
	margin:0;
	list-style:none;
}

ul.menu li button {
	font-family:OpenSansRegular, sans-serif;
	font-size:1.5em;
	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;
	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);
}

/* game screen
   floats in larger screens, fills smaller ones
   additional styles in mobile.css
*/
#screen-game {
	position:relative;
	margin:0 auto;
	height:100%;
}

#screen-game canvas {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

#screen-join {

}

#screen-about {

}

#screen-scores {

}

#screen-exit {

}