* {
	margin: 0;
	padding: 0;
	-webkit-touch-callout: none;
	  -webkit-user-select: none;
	   -khtml-user-select: none;
		 -moz-user-select: none;
		  -ms-user-select: none;
			  user-select: none;
	cursor: default;
}

ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

a {
	text-decoration: none;
	color: inherit;
	display:block;
}

body{
	font-size: 32px;
	background: #ededff;
}

html, body {
	width: 100%;
	height: 100%;
}

div{
	position: absolute;
}

#background,
.overlay{
    box-sizing: border-box;
	overflow: hidden;
    position: fixed;
    top: 0;
    bottom: 0;
	left: 0;
	right: 0;
    background: #333;
}

#map{
	text-align: center;
    bottom: 10%;
	left: 10%;
	right: 10%;
}

	#map ul{
		height: 40px;
		width: 600px;
		margin: 0 auto;
		padding: 0;
	}

		#map ul li{
			box-sizing: border-box;
			display: inline-block;
			width: 40px;
			height: 40px;
			background: #63b48b;
			border: 1px solid rgba(0,0,0,0.5);
		}

		#map ul li.player{
			background: white;
		}

		#map ul li.tree{
			background: #b84d5d;
		}

		#map ul li.wasteland{
			background: rgba(33,33,33,0.7);
		}

#background.wasteland{
    background: url(../images/wasteland.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}

#background.tree0{
    background: url(../images/tree0.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}
#background.tree1{
    background: url(../images/tree1.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}
#background.tree2{
    background: url(../images/tree2.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}

#background.field0{
    background: url(../images/field0.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}
#background.field1{
    background: url(../images/field1.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}
#background.field2{
    background: url(../images/field2.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}

#background.won{
    background: url(../images/won.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}

#background.lost{
    background: url(../images/lost.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}

#background .album{
    background: url(../images/album.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}
#background .anchor{
    background: url(../images/anchor.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}
#background .bear{
    background: url(../images/bear.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}
#background .flower{
    background: url(../images/flower.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}
#background .guitar{
    background: url(../images/guitar.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}
#background .lego{
    background: url(../images/lego.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}
#background .puppy{
    background: url(../images/puppy.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}
#background .ring{
    background: url(../images/ring.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}
#background .seal{
    background: url(../images/seal.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}
#background .wine{
    background: url(../images/wine.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}
#background .bed{
    background: url(../images/bed.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}
#background .burger{
    background: url(../images/burger.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}

#background .player0{
    background: url(../images/player0.png);
	background-size: contain cover;
    background-repeat: no-repeat;
    background-position: center; 
}
#background .player1{
    background: url(../images/player1.png);
	background-size: contain cover;
    background-repeat: no-repeat;
    background-position: center; 
}
#background .player2{
    background: url(../images/player2.png);
	background-size: contain cover;
    background-repeat: no-repeat;
    background-position: center; 
}
#background .player3{
    background: url(../images/player3.png);
	background-size: contain cover;
    background-repeat: no-repeat;
    background-position: center; 
}

#score{
	padding: 5%;
	font-size: 48px;
}

#coords{
	padding: 5%;
	font-size: 72px;
	right: 0;
}


#dialog{
	display: none;
	color: white;
    box-sizing: border-box;
	font-size: 62px;
	overflow: hidden;
	padding: 10% 10% 10% 10%;
	/* text-align: center; */
    position: fixed;
	top: 0;
    bottom: 0;
	left: 0;
	right: 0;
    text-shadow: 0 0 10px #000;
	-webkit-box-shadow: inset 0px 0px 189px 49px rgba(255,255,255,255.75);
	-moz-box-shadow: inset 0px 0px 189px 49px rgba(255,255,255,0.75);
	box-shadow: inset 0px 0px 189px 49px rgba(255,255,255,0.75);
}
#dialog.wasteland{
	font-size: 32px;
    background-color: rgba(0,0,0,0.66);
	-webkit-box-shadow: inset 0px 0px 189px 49px rgba(0,0,0,0.75);
	-moz-box-shadow: inset 0px 0px 189px 49px rgba(0,0,0,0.75);
	box-shadow: inset 0px 0px 189px 49px rgba(0,0,0,0.75);
}

	#dialog .warmth{
		color: red;
	}
	#dialog .joy{
		color: yellow;
	}
	#dialog .hope{
		color: #39FF14;
	}
	#dialog .comfort{
		color: orange;
	}
	
	#dialog #fade{
		-webkit-transition:	opacity 2000ms linear;
		   -moz-transition:	opacity 2000ms linear;
			-ms-transition:	opacity 2000ms linear;
			 -o-transition:	opacity 2000ms linear;
				transition:	opacity 2000ms linear;
	}
	
	#dialog #fade.fadeout{
		opacity: 0;
	}

#nav{
	color: white;
    box-sizing: border-box;
	text-align: center;
	width: auto;
    bottom: 0;
	left: 0;
	right: 0;
}
	#nav img{
		position:relative;
		bottom: 70px;
		padding: auto;
	}

	#nav div{
		max-width: 351px;
		text-align: center;
		position: relative;
		display: inline-block;
	}

		#nav div img{
			position: static;
		}

		#nav div img:first-child{
			margin-bottom: 30px;
		}

#soundHolder,
#textHolder{
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
	max-width: 0;
	max-height: 0;
	overflow:hidden;
}