html, body {
  margin:0px;
  padding:0px;
}


/* ********************************************************************
* Dr. Presto
*
******************************************************************** */

body {
  margin:0px auto;
  padding:0px;
  width:323px;
  /* height:462px;*/
  height:562px;
  position:relative;
  background:transparent url(img/chrome.png) no-repeat scroll center top;
}
body canvas#field {
  background-color:#000000;
  position:absolute;
  top:100px;
  left:30px;
}
body canvas#tosser {
  position:absolute;
  top:0px;
  left:90px;
}
body span#close,
body span#config {
  display:block;
  position:absolute;
  top:44px;
  width:15px;
  height:15px;
  cursor:pointer;
}
body span#close {
  right:13px;
  background:transparent url(img/close.png) no-repeat scroll left top;
}
body span#config {
  right:30px;
  background:transparent url(img/config.png) no-repeat scroll left top;
}
body span#sound {
  display:block;
  position:absolute;
  top:44px;
  right:295px;
  width:16px;
  height:16px;
  background:transparent url(img/sound.png) no-repeat scroll left top;
  cursor:pointer;
}
body span#close:hover,
body span#config:hover {
  background-position:left -15px;
}
body span#sound.enabled {
  background-position:left -16px;
}
body div#pause {
  position:absolute;
  top:100px;
  left:30px;
  width:160px;
  height:320px;
  background-color:#000000;
  opacity:0.8;
}
body form {
  position:absolute;
  top:100px;
  left:30px;
  width:140px;
  height:210px;
  text-align:center;
  color:#ffffff;
  font:normal 13px "Comic Sans MS",Arial,sans-serif;
  margin:0px;
  padding:100px 10px 10px 10px;
}
body form label {
  display:block;
  margin:5px 0px;
  text-align:left;
  height:1.8em;
}
body form label select {
  float:right;
  font-size:inherit;
  background-color:#000000;
  color:#ffffff;
  font-weight:bold;
  border:0px none;
}
body form img {
  cursor:pointer;
}
body img#bottle {
  position:absolute;
  top:50px;
  left:10px;
}
body dl#info {
  position:absolute;
  top:262px;
  right:27px;
  width:81px;
  height:145px;
  font:normal 12px "Comic Sans MS",Arial,sans-serif;
}
body dl#info dt {
  font-weight:bold;
  float:left;
}
body dl#info dd {
  text-align:right;
  margin:0px;
  padding:0px;
}

body img#nextlevel,
body img#gameover,
body img#paused {
  position:absolute;
  top:215px;
  left:30px;
  cursor:pointer;
  display:none;
}

body midi-player {
  display:none;
}

body div#rear {
  position:absolute;
  top:40px;
  left:8px;
  background:transparent url(img/rear.png) no-repeat scroll left top;
  width:277px;
  height:339px;
  padding:50px 15px 15px 15px;
  font:normal 12px Arial,sans-serif;
  display:none;
}
body div#rear p {
  margin:5px 0px 0px 0px;
}
body div#rear h2 {
  text-align:right;
  font-size:16px;
  border-bottom:2px groove #808080;
  margin:3px 0px;
}
body div#rear dl {
  margin:3px 0px;
}
body div#rear dl dt {
  font-weight:bold;
}
body div#rear dl dt em {
  font-weight:normal;
}
body div#rear dl dd {
  margin-bottom:5px;
}
body div#rear dl dd img {
  vertical-align:middle;
}
body div#rear var {
  float:right;
}
body div#rear ul {
  margin:5px 0px 0px 0px;
  padding:0px 0px 0px 1.5em;
}
body div#controls {
  visibility:hidden;
  position:absolute;
  bottom:0;
  left:25px;
  width:273px;
  height:146px;
}
body div#controls > div {
  background:rgba(180,180,180,0.5) url(img/arrow.png) no-repeat scroll center center;
}
body div#controls > div {
  position:absolute;
  height:65px;
  width:111px;
  border-radius:50%;
  background-size:50%;
  border:1px solid rgba(0,0,0,0.3);
}
body div#controls > div:hover {
  background-color:rgba(220,220,220,0.5);
}
body div#controls > div#rotate {
  left:76px;
  top:0px;
  background-image:url(img/rotate.png);
}
body div#controls > div#down {
  left:76px;
  bottom:0px;
  transform:rotate(180deg);
}
body div#controls > div#right {
  right:-22px;
  bottom:40px;
  transform:rotate(90deg);
}
body div#controls > div#left {
  left:-22px;
  bottom:40px;
  transform:rotate(270deg);
}