<style>
	
	/* FONTS */
	@font-face {
        font-family: 'GiraffacondaSans';
        src: url('fonts/GiraffacondaSans/GiraffacondaSans.eot');
   	}
  	@font-face {
        font-family: 'GiraffacondaSans';
        src: url('fonts/GiraffacondaSans/GiraffacondaSans.woff') format('woff'),
        url('fonts/GiraffacondaSans/GiraffacondaSans.svg#GiraffacondaSans') format('svg');
	}

	@font-face {
        font-family: 'NokiaCellphone';
        src: url('fonts/NokiaCellphone/nokiafc22.eot');
   	}
  	@font-face {
        font-family: 'NokiaCellphone';
        src: url('fonts/NokiaCellphone/nokiafc22.woff') format('woff'),
        url('fonts/NokiaCellphone/nokiafc22.svg#NokiaCellphone') format('svg');
	}

	/* END FONTS */

	html {
		height:100%;
		width:100%;]
		font-smoothing:none;
	}

	body {
		font-family: Monospace;
		background-color: #000;
		color: #fff;
		margin: 0px;
		overflow: hidden;
		font-family: 'NokiaCellphone';]
		line-height:20px;
		visibility: hidden;
		height:100%;
		width:100%;
		-webkit-font-smoothing:none;
	}

	a {
		text-decoration:none;
		color:#fff;
	}

	ul {
		margin:0;
		padding:0;
	}


	h1 {
		
		font-weight: normal;
		font-family:"GiraffacondaSans";
		font-size: 105px;
		line-height: 100px;
		margin-top: 40px;
		margin-bottom: 18px;
		text-shadow: 0px 10px #000000;
		text-transform: uppercase;
	}

	#game-screen {
		position: relative;
		top:50%;
		left:50%;
	}

	#game-screen canvas {
		
		cursor:none;
	}

	#interface {
		position: absolute;
		top:0;
		left:0;
		z-index:1;
		width:100%;
		height:100%;
		pointer-events:none;
		display: none;
		font-size: 17px;
	}

	/*LOAD SCREEN */
	#level-load-screen {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		background-color:rgba(0,0,0,1);
		display: none;
	}


	#level-load-screen .contents {
		
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left:-230px;
		margin-top:-200px;
		/*width: 100%;
		height: 100%;*/
	}

	#level-load-screen .level-info {
		text-align: center;
		overflow: hidden;
	}

	#level-load-screen h3 {
		
		font-weight: normal;
		font-family:"NokiaCellphone";
		font-size: 27px;
		margin-bottom: 20px;
		letter-spacing:2px;
	}

	#level-load-screen h2 {
		
		font-weight: normal;
		font-family:"NokiaCellphone";
		letter-spacing:2px;
	}

	#level-load-screen p {
		font-family:Helvetica, Arial;
		font-size: 11px;
		width:420px;
		text-align: center;
		margin:0 auto;
		line-height: 18px;
		letter-spacing:2px;
		-webkit-font-smoothing: auto;
	}

	#level-load-screen video {
		
		position: absolute;
		top: 0;
		left: 0;
		z-index:-1;
		margin-left: -70px;
		margin-top: 0px;
		width:600px;
		display: none;
	}
	
	.loader.bar {
		margin: 0 auto;
		height:20px;
		width:410px;
		background-color:rgba(0,0,0,1);
		/*margin-top:40px;*/
		margin-bottom: 30px;
		display: none;
	}

	.loadProgress {
		background-color:#d0ff82;
		height:100%;
		width:0;
		background-size:contain;
	}


	/* LEVEL COMPLETE SCREEN */
	#level-complete-screen {
		
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		background-color:rgba(0,0,0,.8);
		display: none;
	}

	#level-complete-screen .contents {
		
		height: 100%;
		width: 100%;
	}

	#level-complete-screen h1 {
		
		font-size:165px;
		white-space: nowrap;
		/*width: 1280px;*/
	}

	#level-complete-screen .contents #level-points-container, 
	#level-complete-screen .contents #level-enemy-kill-container, 
	#level-complete-screen .contents #level-bonus-container {
		
		position: absolute;
		top:50%;
		left:50%;
		margin-top:-106px;
		visibility:hidden;
	}

	#level-complete-screen .contents #video-container {
		
		position: absolute;
		width:1280px;
		top:50%;
		left:50%;
		margin-left:-640px;
		margin-top:-120px;
		text-align: center;
	}

	#level-complete-screen .contents #level-complete-video-output {

		transform-origin:50% 50%;
	}

	#level-complete-screen .contents canvas {
		
		/*display: none;*/
	}

	#level-complete-video-output {
		
	}
	#level-complete-video-buffer {
		display: none;
	}

	/* GAME OVER SCREEN */
	
	#game-end-screen {
		
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		background-color:rgba(255,0,0,.8);
		display: none;
	}

	#game-end-screen h1 {
		
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 3;
		white-space: nowrap;
		margin-left: -280px;
		margin-top: -59px;
	}

	/* GAME COMPLETE SCREEN */
	
	#game-complete-screen {
		
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		background-color:rgba(0,0,0,.8);
		display: none;
	}

	#game-complete-screen h1 {
		
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 3;
		white-space: nowrap;
		margin-left: -380px;
		margin-top: -59px;
	}

	#credits {
		
		position: absolute;
		top:50%;
		left:50%;
		margin-left:-100px;
		margin-top:115px;
		font-family:Helvetica, Arial;
		font-size: 11px;
		text-align: center;
		letter-spacing: 3px;
		line-height: 18px;
	}

	/* GAME START SCREEN */
	
	#game-start-screen {

		width: 100%;
		height: 100%;
		position: absolute;
		top:0;
		left:0;
		z-index:3;
		background-color:#fff;
		overflow: hidden;
		visibility: hidden;
	}

	#game-start-screen-background {
		
		background-image: url("assets/img/titlescreen/titlescreen_background.jpg");
		background-size:cover;
		width: 100%;
		height: 100%;
	}

	#game-start-screen-foreground {
		
		position: absolute;
		top: 0;
		left: 0;
		/*z-index:3;*/
		width: 100%;
		height: 100%;
		text-align: center;
	}

	#game-start-screen-scale {
		
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -320px;
		margin-top: -277px;
		/*height:100%;
		width:100%;*/
	}

	#game-start-titles {
		
		width:100%;
		height:100%;
		position:relative;
	}
	
	#as-logo img {
		
		width:130px;
	}

	#as-logo {
		position: relative;
		z-index:3;
		text-align: center;
		margin-bottom: 160px;
	}

	#game-start-video-container {
		width: 100%;
		/*height: 100%;*/
		text-align: center;
		margin-bottom: 20px;
	}


	#game-start-video-output {

		width: 640px;
		text-align: center;
	}

	#game-start-video-buffer {
		display: none;
	}

	#game-start-video-container {

		/*position: absolute;
		top: 50%;
		left: 50%;
		z-index: 3;*/
	}

	#game-start-giraffe {
		z-index:4;
		transform-origin:center bottom;
	}

	#game-start-giraffe img{
		width: 100%;
	}

	.game-start-giraffe-frame {
		
		position: absolute;
		bottom:-30px;
		left:50%;
		margin-left:-170px;	
	}

	#game-start-giraffe div {

		display: none;
	}

	#game-start-subtitle {
		text-align: center;
		position: relative;
		z-index:3;
	}

	#game-start-subtitle-container {
		transform-origin:top left;
	}

	#game-start-subtitle-text {
		text-shadow: 0px 4px #000000;
		font-size: 20px;
		white-space: nowrap;
		margin: 0;
	}

	#start-button {
		text-align: center;
		margin-top:20px;
		position: relative;
		z-index:3;
	}

	#start-button-img {
		width:123px;
		cursor:pointer;
	}

	#start-button-img-over {
		width:123px;
		cursor:pointer;
		display: none;
	}

	#highscores-button {
		margin-top: 140px;
		cursor:pointer;
		position: relative;
		z-index:3;
	}

	#high-scores-video-output {

		width: 640px;
		text-align: center;
	}


	#highscores-button-text {
		
	}

	/* HIGH SCORE SCREEN */
	
	#high-scores-screen {
		position: absolute;
		top: 0;
		left: 0;
		z-index:5;
		background-color:#000;
		width: 100%;
		height: 100%;
		font-size:22px;
		display: none;
	}

	#high-scores-screen-scale {
		
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -320px;
		margin-top: -277px;
		text-align: center;		
	}

	#high-scores-screen #as-logo {
		position: static;
		top:auto;
		left:auto;
		margin:0;
		margin-top:0px;
		margin-bottom:20px;
		text-align: center;
	}

	#high-scores-screen #as-logo img {
		
		width:130px;
	}

	#high-scores-video-buffer {
		display: none;
	}

	#high-scores-video-container {

		/*position: absolute;
		top: 25%;
		left: 50%;*/
		text-align: center;
		margin-bottom: 17px;
	}

	#high-scores-screen table {
		
		width:320px;
		text-transform: uppercase;
		margin: 0 auto;
		margin-top:30px;
		font-size:18px;
	}

	#high-scores-screen #high-score-title {
		text-align: center;
	}

	#high-scores-screen td.index {
		
		text-align: left;
		width: 20px;
	}

	#high-scores-screen td.name {
		
		text-align: left;
	}

	#high-scores-screen td.score {
		
		text-align: right;
	}

	#close-highscore {
		
		display: inline-block;
		width:200px;
		text-align: center;
		font-size:18px;
		margin-top: 51px;
	}

	/* HIGH SCORE ENTER SCREEN */

	#high-score-enter-screen {
		position: absolute;
		top: 0;
		left: 0;
		z-index:5;
		background-color:#000;
		width: 100%;
		height: 100%;
		display: none;
		text-align: center;
		/*font-size:22px;*/
	}

	#high-score-enter-screen .valign {
		
		position: absolute;
		top:50%;
		left: 50%;
		margin-top:-150px;
		margin-left:-425px;
		width:850px;
	}

	#high-score-label {
		
	}

	#high-score-save-success {
		display: none;
	}

	#high-score-save-success h1 {
		
		line-height: 120px;
	}

	#high-score-enter-screen input {
		
		font-weight: normal;
		font-family:"GiraffacondaSans";
		font-size: 105px;
		line-height: 140px;
		text-shadow: 0px 10px #000000;
		text-transform: uppercase;
		background-color:#000;
		color:#fff;
		border:0;
		padding-top: 0;
		width:100%;
		text-align: center;
		opacity:.3;
		outline:none;
	}

	#high-score-enter-screen input:focus
	{
	    outline: none;
	}

	/* **** */
	
	.dg {
		display: none;
	}

	#stats {
		z-index:2;
		/*display: none;*/
	}

	#interface .score {
		position: absolute;
		left:35px;
		top:30px;
		z-index:1;
	}

	#interface .high-score {
		position: absolute;
		left:176px;
		top:30px;
		z-index:1;
		/*display: none;*/
	}

	#interface .sound-toggle {
		
		position: absolute;
		right: 30px;
		top: 25px;
		z-index:1;
		pointer-events:initial;
	}

	#interface .sound-toggle #unmute {
		display: none;
	}

	#interace-tl {
		position: absolute;
		top:0;
		left:0;
	}

	#interace-tr {
		position: absolute;
		top:0;
		right:0;
	}

	#interace-bl {
		position: absolute;
		bottom:0;
		left:0;
	}

	#interace-br {
		position: absolute;
		bottom:0;
		right:0;
	}

	.bar {
		position: relative;
		margin-top:4px;
		height:9px;
		width:220px;
		background-color:rgba(102,102,102,.7);
	}

	.bar.glow {

		-webkit-box-shadow: 0px 0px 1px 2px rgba(255,255,255,1);
		-moz-box-shadow: 0px 0px 1px 2px rgba(255,255,255,1);
		box-shadow: 0px 0px 1px 2px rgba(255,255,255,1);
	}

	.bar .gloss {
		background-image: url("assets/img/interface-glow.png");
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		opacity:.5;
	}

	.health {
		position: absolute;
		bottom:65px;
		left:130px;
	}

	.health .text {
		font-size:13px;
		display: none;
	}

	.bar #health {
		height:100%;
		width:100%;
		background-color:#00ff00;
	}

	.strength {
		position: absolute;
		bottom:45px;
		left:130px;
	}

	.strength .text {
		font-size:13px;
		display: none;
	}

	.bar #strength {
		height:100%;
		width:220px;

		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00ffff+0,ff00ff+100 */
		background: #00ffff; /* Old browsers */
		background: -moz-linear-gradient(left,  #00ffff 0%, #ff00ff 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,#00ffff), color-stop(100%,#ff00ff)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(left,  #00ffff 0%,#ff00ff 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(left,  #00ffff 0%,#ff00ff 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(left,  #00ffff 0%,#ff00ff 100%); /* IE10+ */
		background: linear-gradient(to right,  #00ffff 0%,#ff00ff 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffff', endColorstr='#ff00ff',GradientType=1 ); /* IE6-9 */
	}

	.bar #mask-strength {
		height:100%;
		width:100%;
		overflow:hidden;
	}

	.lives {
		position: absolute;
		left: 25px;
		bottom:35px;
		background-image: url("assets/img/interface-lives.png");
		background-repeat:no-repeat;
		width: 80px;
		height: 50px;
	}

	#lives-count {
		margin-top: 13px;
		margin-left: 10px;
	}

	.storage {
		position: absolute;
		right:40px;
		bottom: 30px;
		width: 80px;
		height: 50px;
		background-image: url("assets/img/special_back.png");
		background-repeat:no-repeat;
		background-position: 0 6px;
	}

	#storage-count {
		margin-top: 13px;
		margin-left: 10px;
	}

	.storage .leaf{
		position: absolute;
		top:0;
		right:0;
	}

	.storage img {
		/*width:100%;*/
	}

</style>