body {

	background-color: #888;
	margin: 0px;
	overflow: hidden;
	color: #FFF;
	font-family: 'Lato', sans-serif;
	 -webkit-text-size-adjust: 100%;
}

#debug-text{
	position:absolute;
	top:60px;
	color:#00FF00;
	width:400px;
}

#score-text{
	position:absolute;
	top:20px;
	color:#FFFFFF;
	width:200px;
	text-align: center;
	margin: 0 auto;
	left:0;
	right:0;
	opacity:0;
	font-size:10vmin;
	text-shadow: 0 0 8px rgba(0,0,0,0.8);
	letter-spacing: 1px;
}

#splash{
	position:absolute;
	width:400px;
	height:400px;
	--background-image:url(../interface/xmas-splash.png);
	--background-color:#000000;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	opacity:1.0;
	cursor:pointer;
	text-align: center;
	font-size:24px;
}

#start-welcome{
	position:absolute;
	width:320px;
	height:320px;
	--background-image:url('../interface/start-welcome.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	opacity:1.0;
	cursor:pointer;
	text-align: center;
	font-size:24px;
}

/*
#prompt{
	position:absolute;
	width:100%;
	height:30%;
	top: 25%;
	xleft:5%;
	text-align: center;
	font-size:30px;
	text-shadow: 0 0 8px rgba(0,0,0,0.8);
	letter-spacing: 2px;
}

#prompt-top{
	position:absolute;
	width:100%;
	height:30%;
	top: 5%;
	xleft:5%;
	text-align: center;
	font-size:40px;
	text-shadow: 0 0 8px rgba(0,0,0,0.8);
	letter-spacing: 2px;
}

#prompt-bottom{
	position:absolute;
	width:100%;
	height:30%;
	top: 75%;
	xleft:5%;
	text-align: center;
	font-size:30px;
	text-shadow: 0 0 8px rgba(0,0,0,0.8);
	letter-spacing: 2px;
}

#prompt-big{
	margin-top: 4%;
}

#prompt-small{
	margin-top: 3%;
	text-align: left;
	font-size:20px;
}

#prompt-start{
	margin-top: 5%;
	text-align: center;
}
*/

#walkguide{
	position:absolute;
	bottom:0px;
	width:100%;
	text-align: center;
}

#info{
	opacity:0;
	position:absolute;
	bottom:24px;
	padding:0 10px;
	font-size:13px;
	text-shadow: 0 0 3px rgba(0,0,0,0.4);
	width:100%;
	text-align: center;
}


a { color: #fff; }

#music-toggle{
	position:absolute;
	top:0;
	right:0;
	margin:0px;
	width:40px;
	height:40px;
    --background-color: #000000;
	background-image:url(../interface/music-toggle.png);
	background-repeat: no-repeat;
	background-position: 0 0;
    --background-position: -40px 0;
	cursor: pointer;	
	opacity:1;
}

#music-toggle.off{
	background-position: -40px 0;
}

#sound-toggle{
	position:absolute;
	top:0;
	right:0;
	margin:0px;
	width:40px;
	height:40px;
    --background-color: #000000;
	background-image:url(../interface/sound-toggle.png);
	background-repeat: no-repeat;
	background-position: 0 0;
    --background-position: -40px 0;
	cursor: pointer;	
	opacity:1;
}

#sound-toggle.off{
	background-position: -40px 0;
}

#walk-toggle{
	position:absolute;
	top:0;
	right:0;
	margin:0px;
	width:40px;
	height:40px;
    --background-color: #000000;
	background-image:url(../interface/move-toggle-1.png);
	background-repeat: no-repeat;
	background-position: 0 0;
    --background-position: -40px 0;
	cursor: pointer;	
	opacity:1;
}

#walk-toggle.off{
	background-position: -40px 0;
}

#map-toggle{
	position:absolute;
	top:0;
	right:0;
	margin:0px;
	width:40px;
	height:40px;
    --background-color: #cccccc;
	background-image:url(../interface/map-toggle.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	cursor: pointer;	
	opacity:1;
}

#map-toggle.off{
	background-position: -40px 0;
}


#gamepad-toggle{
	position:absolute;
	top:0;
	right:0;
	margin:0px;
	width:40px;
	height:40px;
    --background-color: #cccccc;
	background-image:url(../interface/gamepad-toggle.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	cursor: pointer;	
	opacity:1;
}

#gamepad-toggle.off{
	background-position: -40px 0;
}

#help-button{
	position:absolute;
	top:0;
	right:0;
	margin:0px;
	width:40px;
	height:40px;
	background-image:url(../interface/auto-toggle.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	cursor: pointer;	
	opacity:1;
}

#help-button.off{
	background-position: -40px 0;
}

#model-rotate-h{
	position:absolute;
	top:0;
	right:0;
	margin:0px;
	width:40px;
	height:40px;
    background-color: #cccccc;
	background-image:url(../interface/model-rotate-h.png);
	background-repeat: no-repeat;
	background-position: 0 0;
    --background-position: -40px 0;
	cursor: pointer;	
	opacity:0.4;

}

#model-rotate-h.off{
	background-position: -40px 0;
}

#model-rotate-v{
	position:absolute;
	top:0;
	right:0;
	margin:0px;
	width:40px;
	height:40px;
    background-color: #cccccc;
	background-image:url(../interface/model-rotate-v.png);
	background-repeat: no-repeat;
	background-position: 0 0;
    --background-position: -40px 0;
	cursor: pointer;	
	opacity:0.4;

}

#model-rotate-v.off{
	background-position: -40px 0;
}

#jiahao{
	position:absolute;
	top:0;
	right:0;
	margin:0px;
	width:40px;
	height:40px;
    background-color: #cccccc;
	background-image:url(../interface/jiahao.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	cursor: pointer;	
	opacity:0.4;
}

#jiahao.off{
	background-position: -40px 0;
}

#jianhao{
	position:absolute;
	top:0;
	right:0;
	margin:0px;
	width:40px;
	height:40px;
    background-color: #cccccc;
	background-image:url(../interface/jianhao.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	cursor: pointer;	
	opacity:0.4;
}
#jianhao.off{
	background-position: -40px 0;
}

#arrow-up{
	width:40px;
	height:40px;
    background-color: #cccccc;
	background-image:url(../interface/arrow-up.png);
	background-repeat: no-repeat;
	background-position: 0 0;
    --background-position: -40px 0;
	cursor: pointer;	
	opacity:0.4;
}
#arrow-up.off{
	background-position: -40px 0;
}

#arrow-down{
	width:40px;
	height:40px;
    background-color: #cccccc;
	background-image:url(../interface/arrow-down.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	cursor: pointer;	
	opacity:0.4;
}
#arrow-down.off{
	background-position: -40px 0;
}

#arrow-left{
	width:40px;
	height:40px;
    background-color: #cccccc;
	background-image:url(../interface/arrow-left.png);
	background-repeat: no-repeat;
	background-position: 0 0;
    --background-position: -40px 0;
	cursor: pointer;	
	opacity:0.4;
}
#arrow-left.off{
	background-position: -40px 0;
}

#arrow-right{
	width:40px;
	height:40px;
    background-color: #cccccc;
	background-image:url(../interface/arrow-right.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	cursor: pointer;	
	opacity:0.4;
}
#arrow-right.off{
	background-position: -40px 0;
}

#arrow-up-l{
	width:40px;
	height:40px;
    background-color: #cccccc;
	background-image:url(../interface/arrow-up.png);
	background-repeat: no-repeat;
	background-position: 0 0;
    --background-position: -40px 0;
	cursor: pointer;	
	opacity:0.4;
}
#arrow-up-l.off{
	background-position: -40px 0;
}

#arrow-down-l{
	width:40px;
	height:40px;
    background-color: #cccccc;
	background-image:url(../interface/arrow-down.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	cursor: pointer;	
	opacity:0.4;
}
#arrow-down-l.off{
	background-position: -40px 0;
}

#arrow-left-l{
	width:40px;
	height:40px;
    background-color: #cccccc;
	background-image:url(../interface/arrow-left.png);
	background-repeat: no-repeat;
	background-position: 0 0;
    --background-position: -40px 0;
	cursor: pointer;	
	opacity:0.4;
}
#arrow-left-l.off{
	background-position: -40px 0;
}

#arrow-right-l{
	width:40px;
	height:40px;
    background-color: #cccccc;
	background-image:url(../interface/arrow-right.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	cursor: pointer;	
	opacity:0.4;
}
#arrow-right-l.off{
	background-position: -40px 0;
}

#arrow-space{
	width:40px;
	height:40px;
    background-color: #cccccc;
	background-image:url(../interface/arrow-space.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	cursor: pointer;	
	opacity:0.4;
}
#arrow-space.off{
	background-position: -40px 0;
}

#preloader{
	position: absolute;
	width: 40px;
	height: 40px;
	margin: auto;
	left:0;
	right:0;
	top: 0;
	bottom: 0;
	background:url(../interface/loader.gif) center center no-repeat;
}

#clap{
	position: absolute;
	display:none;
	width: 260px;
	height: auto;
	margin: auto;
	left:0;
	right:0;
	top: 0;
	bottom: 0;
	background:url(../interface/clap1.gif) center center no-repeat;
}
#next-button{
	position: absolute;
	display:none;
	width: 260px;
	height: 120px;
	margin: auto;
	left:0;
	right:0;
	top: 360px;
	bottom: 0;
	background-image:url(../interface/next.png);
	background-size:cover;
	opacity:0.8;
}
#start-button{
	position: absolute;
	display:none;
	width: 240px;
	height:110px;
	margin: auto;
	left:0;
	right:0;
	top: 0;
	bottom: 0;
	background-image:url(../interface/start.png);
	background-size:cover;
	opacity:0.8;
}