html,
body {
	background: #000;
	color: #fff;
	font-family: helvetica, arial, sans-serif;
	margin: 0;
	padding: 0;
	font-size: 12pt;
}

* {
	margin: 0;
	padding: 0;
}

.hide {
	position: absolute;
	left: -5999px;
	top: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@font-face {
	font-family: "Magic Forest";
	src: url("media/Magic Forest.ttf");
}

#container,
#inner {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 960px;
	height: 690px;
	background: #000;
}

	#container:-moz-full-screen {
		margin: auto;
		width: 100%;
		height: 100%;
	}

	:-moz-full-screen:not(:root) {
		width: 90% !important;
	}

#canvas,
#content {
	position: absolute;
	left: 0;
	top: 50px;
}

#content,
#toolbar {
	font-family: "Magic Forest";
	font-size: 16px;
	line-height: 1.5em;
	-webkit-font-smoothing: none;
}

#toolbar {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	opacity: 1;
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-o-transition: opacity 1s;
	-ms-transition: opacity 1s;
	transition: opacity 1s;
}

	#toolbar.loading {
		opacity: 0;
	}

	#toolbar:hover {
		opacity: 1 !important;
	}

	#social {
		float: left;
		position: relative;
		width: 55%;
	}            

		#social div.fb-like {
			position: absolute;
			left: 20px;
			top: 0;
		}

		#social p {
			position: absolute;
			left: 174px;
			top: 0;
		}

	#icons {
		float: right;
		position: relative;
		width: 45%;
		list-style: none;
	}

		#icons li {
			float: right;
			padding-right: 20px;
			cursor: pointer;
		}

			#icons li span {
				display: inline-block;
				width: 20px;
				height: 14px;
				background: url(media/icons-ui.png) 0 0 no-repeat;
			}

			#icons #fullscreen span {
				background-position: 0 -14px;
			}

				#icons #fullscreen.on span {
					background-position: -20px -14px;
				}

			#icons #mute.on span {
				background-position: 0 0;
			}

				#icons #mute.on span {
					background-position: -20px 0;
				}

#content {
	background: #111;
	width: 100%;
	height: 640px;
}

	#content .copy {
		background: #1c1c1c;
		color: #bfbfbf;
		display: none;
	}

		#content .copy h2 {
			font-size: 32px;
			margin-bottom: 0.5em;
		}

		#content .copy h3 {
			font-size: 24px;
		}

		#content .copy h4 {
			font-size: 16px;
		}

		#content .copy h2,
		#content .copy h3,
		#content .copy h4 {
			color: #fff;
			font-weight: normal;
			color: #2BFF07;
			text-shadow: 1px 2px 0px #0F4A02;
		}

		#content .copy p {
			margin: 0.5em 0 2em 0;
		}
	
		#content .copy strong,
		#content .copy a {
			color: #fff;
		}
		
			#content .copy a:hover {
				text-decoration: none;
			}

	#titles,
	#about,
	#theEnd {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	#about,
	#theEnd {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		padding: 40px;
		border: 4px inset #ccc;
		background: #1c1c1c;
	}
	
	#titles {
		background: url(media/bg-title.png) 0 0 no-repeat;
	}
	
		#menu {
			position: absolute;
			left: 44px;
			top: 236px;
			padding: 0;
			margin: 0;
			list-style: none;
			visibility: hidden;
		}
		
			#menu li {
				padding: 0;
				margin: 0;
				width: 320px;
				height: 76px;
			}
			
				#menu li a {
					display: block;
					height: 100%;
					text-indent: -999em;
					background: url(media/bg-menu.png) 0 0 no-repeat;
				}
				
					#menu a#menu_play {
						background-position: 0 0;
					}
					
					#menu a#menu_about {
						background-position: 0 -76px;
					}
					
					#menu a#menu_reset {
						background-position: 0 -152px;
					}
					
						#menu a#menu_play.selected {
							background-position: -320px 0;
						}

						#menu a#menu_about.selected {
							background-position: -320px -76px;
						}

						#menu a#menu_reset.selected {
							background-position: -320px -152px;
						}
	
	#content #about {
		
	}

		#about a#about_back {
			display: inline-block;
			margin-top: 1em;
			color: #bfbfbf;
			font-size: 32px;
			text-decoration: none;
		}
	
			#about a#about_back:hover {
				color: #fff;
			}

		#about p.thanks {
			margin-top: -2em;
			font-size: 8px;
		}
	
	#content #theEnd {
		padding-top: 60px;
	}

		.acheivements {
			overflow: hidden;
			margin: 50px 0 20px 0;
			padding: 20px;
			padding-top: 18px;
			border: 4px outset #ccc;
			-webkit-box-shadow: 8px 12px 0px #000;
			-moz-box-shadow: 8px 12px 0px #000;
			box-shadow: 8px 12px 0px #000;
		}

		#theEnd .col {
			float: left;
			width: 30%;
			padding-top: 1%;
			overflow: hidden;
		}

			#theEnd .col p {
				margin-bottom: 0;
			}

			#theEnd .col.list {
				width: 35%;
			}

			#theEnd .col.playagain {
				width: 35%;
				text-align: center;
			}

				#theEnd .col.playagain h3,
				#theEnd .col.share h3 {
					padding-bottom: 0.75em;
				}

				#theEnd .col.playagain p {
					margin-top: 0;
				}

				#theEnd #replay {
					display: inline-block;
					font-size: 24px;
				}

			#theEnd .col.share {
				text-align: right;
			}
		
		#theEnd .clear {
			clear: left;
			padding-top: 1.5em;
		}

		#theEnd .heart {
			color: #e00;
		}

		#theEnd .stat:before {
			content: "* ";
			color: #ee0;
		}

		#theEnd .gold {
			color: #ee0;
		}

		#theEnd .privacy {
			font-size: 8px;
			clear: both;
			padding-left: 8em;
		}

		form {
			padding-bottom: 1.5em;
		}

		label,
		input {
			-ms-border-radius: 0;
			-moz-border-radius: 0;
			-webkit-border-radius: 0;
			-o-border-radius: 0;
			border-radius: 0;
		}

		label {
			float: left;
			width: 3.75em;
			color: #fff;
			line-height: 1.75em;
		}

			label:after {
				content: ":";
			}

		input {
			float: left;
			width: 10em;
			background: #000;
			border: 2px inset #ccc;
			margin: 0 1.5em 0 0;
			height: 1.5em;
			color: #fff;
			padding: 0 0.5em;
			font-family: "Magic Forest";
			-webkit-font-smoothing: none;
			font-size: 16px;
			line-height: 1.75em;
		}

			input#email {
				width: 20em;
			}

			input.button {
				width: auto;
				background: #ddd;
				border: 2px outset #ccc;
				color: #000;
				height: 1.75em;
				cursor: pointer;
			}

				input.button:hover {
					background: #fff;
					border-color: #ddd;
				}



	#loading {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 60%;
		height: 48px;
		background: #095a00;
		border: 4px solid #0f0;
	}
		
		#loading span {
			display: block;
			height: 100%;
			background: #0f0;
			width: 0;
			color: #0f0;
			line-height: 56px;
			font-size: 32px;
			text-indent: 1em;
		}