style.css

html {
    -webkit-text-size-adjust: none
}
body, html {
	margin: 0;
	padding: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
	font-size:12px;
	color:#222;
}
canvas {
	width: 100%;
	height: 100%;
}
#top,
#bottom,
#center,
#right,
#loader,
#shadow,
.debug,
#left {position:absolute;}

#top{width:100%;height:30%;top:0;left:0;}
#bottom{width:100%;height:30%;bottom:0;}
#right{width:30%;height:70%;top:30%;right:0;}
#left{width:30%;height:70%;top:30%;left:0;}
#center{width:40%;height:70%;top:30%;left:30%;text-align:center;z-index:101;}
#shadow{width:100%;height:100%;background:#FFF;opacity:1;z-index:100;}

#messages{position:relative;text-align:right;z-index:101;}
#messages > div{float:right;clear:both;padding:1%;margin:0.5% 1%;background:#DDD;border-radius:5%;-webkit-border-radius:5%;-o-border-radius:5%;}
#messages > div.error{background:red;}
#messages > div.warning{background:orange;}
#messages > div.success{background:green;}
#messages > div.info{background:blue;}

.debug{width:30%;opacity:0.8;}
.debug ul{padding:10px;}
.debug ul li{border-bottom:1px solid #666;list-style:none;padding:5px;background:#FFF;}
.debug ul li:first-child{border-top:1px solid #666;}

#btn_push{float:right;width:100px;height:100px;background:#666;border-radius:50%;margin:2%;}
/*.controller-type{position:absolute;margin:0 auto;top:30%;left:45%;z-index:101;border-color: transparent transparent transparent #00ffd5;width: 0;height: 0;border-style: solid;border-width:100px 0 100px 173.2px;}*/
.controller-type{}
.controller-type#keyboard{display:inline-block;vertical-align:middle;margin:10px;background:#FFF url(./images/keyboard.png) no-repeat center;width:110px;height:110px;border:3px solid #00ffd5;border-radius:20px;}
.controller-type#joystick{display:inline-block;vertical-align:middle;margin:10px;background:#FFF url(./images/joystick.png) no-repeat center;width:110px;height:110px;border:3px solid #00ffd5;border-radius:20px;}
#loader{width:100%;height:100%;background:url('images/loader.gif') no-repeat center center;z-index:110;}