html,body {
  margin: 0;
  padding: 0;
  font-family: helvetica, arial, san-serif;
  font-size: 12pt;
  color: #fff;
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 768px) {

  html,body {
    background-color: #333;
  }

  #canvas {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }

}


@media only screen and (max-width : 640px) {

  html,body {
    background-color: #000;
    min-height: 416px;
    position: relative;
  }

  #canvas.mobile {
    width: 320px;
    height: 320px;
  }
}

.button {
  background-image: url(media/iphone-buttons.png);
  background-repeat: no-repeat;
  width: 80px;
  height: 96px;
  position: absolute;
  bottom: 0px;
  
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-text-size-adjust: none;
}


#buttonLeft { left: 0; background-position: 0, 0; }
#buttonRight { left: 80px; background-position: -80px, 0; }
#buttonShoot { right: 80px; background-position: -160px, 0; }
#buttonJump { right: 0px; background-position: -240px, 0; }