html {
height: 100%;
background-color: #1d292c;
touch-action: none;
}
body {
margin: 0;
max-height: 100%;
height: 100%;
overflow: hidden;
background-color: #1d292c;
font-family: Helvetica, arial, sans-serif;
position: relative;
width: 100%;
touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
}

.user_profileing{
width: calc(100% - 16px);
height: 62px;
margin: 0 8px 10px 8px;
background-color: #f3f3f3;
padding: 5px 2%;
border-radius: 5px;
overflow: hidden;
box-sizing: border-box;
border: 1px solid rgba(0,0,0,.8);
position:relative;
font-family: Arial;
top:10px;
}

.user_profileing:hover{cursor:pointer}

.user_profileing img{
float:left;
width:50px;
height:50px;
border-radius:26px;	
border: 1px solid #000;
}

.user_profileing span{
font-size:26px;
color:#000;
float:left;
display:block;
line-height:50px;
padding-left:9px;
}

.user_profileing p{
position: absolute;
  right: 6px;
text-align:center;
  width: 60px;
  z-index: 100;
  height: 36px;
  top: 50%;
  margin-top: -18px;
}

.user_profileing p span{
width: 60px;
  line-height: 18px;
  padding: 0;
  font-size: 13px;
}

.user_profileing p span:first-child{
font-weight: 600;
font-size: 14px;
}

div.control-btn{
width:90px;height:90px;bottom:8px;right:8px;position:absolute;z-index:500;opacity:0.8;background:transparent url(images/key-sprites.png) 0 0;background-size:180px 272px;
}

div.control-btn.btn-hello{
bottom:106px;
background-position:0 -141px;
width:70px;height:70px;background-size:140px 211px;	
}

div.control-btn.btn-up{
left:106px;
bottom:106px;
background-position:-90px 0;
}
div.control-btn.btn-down{
left:106px;
background-position:-90px -92px;
}
div.control-btn.btn-right{
left:204px;
background-position:-90px -182px;
}
div.control-btn.btn-left{
left:8px;
background-position:0 -92px;
}

#application-canvas {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#application-canvas.fill-mode-NONE {
margin: auto;
}
#application-canvas.fill-mode-KEEP_ASPECT {
width: 100%;
height: auto;
margin: 0;
}
#application-canvas.fill-mode-FILL_WINDOW {
width: 100%;
height: 100%;
margin: 0;
}

canvas:focus {
outline: none;
}

@media (max-width:450px){
div.control-btn{
width:70px;height:70px;bottom:5px;right:5px;background-size:140px 211px;
}

div.control-btn.btn-hello{
bottom:82px;
width:45px;height:45px;
background-size:90px 136px;
background-position: -90px -227px;
}

div.control-btn.btn-up{
left:80px;
bottom:80px;
background-position: -70px 0;
}
div.control-btn.btn-down{
left:80px;
background-position: -70px -70px;
}
div.control-btn.btn-right{
left:155px;
background-position: -70px -141px;
}
div.control-btn.btn-left{
left:5px;
background-position: 0 -70px;
}
}

@media screen and (max-height: 415px) and (orientation: landscape) { 
div.control-btn{
width:70px;height:70px;bottom:5px;right:5px;background-size:140px 211px;
}

div.control-btn.btn-hello{
bottom:82px;
width:45px;height:45px;
background-size:90px 136px;
background-position: -90px -227px;
}

div.control-btn.btn-up{
left:80px;
bottom:80px;
background-position: -70px 0;
}
div.control-btn.btn-down{
left:80px;
background-position: -70px -70px;
}
div.control-btn.btn-right{
left:155px;
background-position: -70px -141px;
}
div.control-btn.btn-left{
left:5px;
background-position: 0 -70px;
}
}