#stage {
  background-image: url("img/spielfeld.png");
	background-repeat: no-repeat;
	background-size: contain;
	left: 0; top: 0; right: 0; bottom: 0;
}

#bike-page {
	position: absolute;
	right: 0%;
	top: 0%;
	width: 30%;
	height: 40%;
  background-image: url("img/fahrrad.png");
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
}

#tool-page {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
  background-image: url("img/text/go-phase1.png");
	background-repeat: no-repeat;
	background-size: contain;
	display: none;
}

#game-page {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	background-repeat: no-repeat;
	background-size: contain;
	display: none;
	overflow: hidden;
}

#done-page {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
  background-image: url("img/text/done-fail.png");
	background-repeat: no-repeat;
	background-size: contain;
	display: none;
}

#nogo-page {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	display: none;
}

#navi-page {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	background-repeat: no-repeat;
	background-size: contain;
	display: none;
	overflow: hidden;
}

#tool-btn-besen          {position: absolute; width: 10.47%; height: 18.61%; left:  1.56%; top:  2.78%; background-image: url("img/btn/tool-btn-besen-lo.png");          background-repeat: no-repeat; background-size: contain;}
#tool-btn-kehrmaschine   {position: absolute; width: 10.47%; height: 18.61%; left: 13.91%; top:  2.78%; background-image: url("img/btn/tool-btn-kehrmaschine-lo.png");   background-repeat: no-repeat; background-size: contain;}
#tool-btn-laubblaeser    {position: absolute; width: 10.47%; height: 18.61%; left: 26.25%; top:  2.78%; background-image: url("img/btn/tool-btn-laubblaeser-lo.png");    background-repeat: no-repeat; background-size: contain;}
#tool-btn-schneeschaufel {position: absolute; width: 10.47%; height: 18.61%; left: 38.59%; top:  2.78%; background-image: url("img/btn/tool-btn-schneeschaufel-lo.png"); background-repeat: no-repeat; background-size: contain;}
#tool-btn-schwamm        {position: absolute; width: 10.47%; height: 18.61%; left: 50.94%; top:  2.78%; background-image: url("img/btn/tool-btn-schwamm-lo.png");        background-repeat: no-repeat; background-size: contain;}
#tool-btn-spachtel       {position: absolute; width: 10.47%; height: 18.61%; left: 63.28%; top:  2.78%; background-image: url("img/btn/tool-btn-spachtel-lo.png");       background-repeat: no-repeat; background-size: contain;}
#tool-btn-spaten         {position: absolute; width: 10.47%; height: 18.61%; left: 75.63%; top:  2.78%; background-image: url("img/btn/tool-btn-spaten-lo.png");         background-repeat: no-repeat; background-size: contain;}
#tool-btn-zahnbuerste    {position: absolute; width: 10.47%; height: 18.61%; left: 87.97%; top:  2.78%; background-image: url("img/btn/tool-btn-zahnbuerste-lo.png");    background-repeat: no-repeat; background-size: contain;}

#back-btn						     {position: absolute; width: 20%; height: 15%; right:  3.00%; bottom:  5.00%; background-image: url("img/back-btn.png");    background-repeat: no-repeat; background-size: contain;}

#clockface            	 {position: absolute; width: 17%; height: 40%; right:  0.00%; bottom:  0.00%; background-image: url("img/stoppuhr.png");        background-repeat: no-repeat; background-size: contain;}
#clockarm								 {position: absolute; width: 20%; height: 40%; right: 32.00%; bottom: 25.00%; background-image: url("img/stoppuhr-zeiger.png"); background-repeat: no-repeat; background-size: contain;}
#clockarm                {transform-origin: 17% 73.5%;}

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

#output {
    position: absolute;
    top: 0%;
    left: 0%;
    background-color: red;
    color: #fff;
}