body {
  background: #000;
  color: #fff;
  font-family: 'Droid Sans', 'Liberation Sans', FreeSans, 'Helvetica Neue LT Std', 'Helvetica LT Std', Helvetica, Arial, Tahoma, 'Lucida Grande', 'Lucida Sans', sans-serif;
}

a {
  color: #29f;
}

#ipad {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  left: 0px;
  top: 0px;
}

#ipad.landscape {
  background: url('orig/landscape.png');
  width: 1108px;
  height: 852px;
}

#ipad.portrait {
  background: url('orig/portrait.png');
  width: 852px;
  height: 1108px;
}

#ipad #rotate {
  height: 42px;
  position: absolute;
  left: 0px;
  top: 0px;
  cursor: pointer;
}

#ipad.landscape #rotate {
  width: 1108px;
}

#ipad.portrait #rotate {
  width: 852px;
}

#ipad #reload {
  width: 18px;
  height: 18px;
  position: absolute;
  cursor: pointer;
  top: 89px;
}

#ipad.landscape #reload {
  left: 745px;
}

#ipad.portrait #reload {
  left: 582px;
}

#ipad #kbd {
  position: absolute;
  left: 42px;
  top: 116px;
  display: none;
  z-index: 10;
}

#ipad.landscape #kbd {
  background: url('orig/landscape_kbd.png');
  width: 1024px;
  height: 694px;
}

#ipad.portrait #kbd {
  background: url('orig/portrait_kbd.png');
  width: 768px;
  height: 950px;
}

#ipad #url {
  position: absolute;
  left: 282px;
  top: 87px;
  height: 21px;
  background: #fff;
  border: none;
  font-family: 'Droid Sans', 'Liberation Sans', FreeSans, 'Helvetica Neue LT Std', 'Helvetica LT Std', Helvetica, Arial, Tahoma, 'Lucida Grande', 'Lucida Sans', sans-serif;
}

#ipad.landscape #url {
  width: 460px;
}

#ipad.portrait #url {
  width: 300px;
}

#ipad #google {
  position: absolute;
  top: 87px;
  height: 21px;
  background: #fff;
  border: none;
  font-family: 'Droid Sans', 'Liberation Sans', FreeSans, 'Helvetica Neue LT Std', 'Helvetica LT Std', Helvetica, Arial, Tahoma, 'Lucida Grande', 'Lucida Sans', sans-serif;
}

#ipad.landscape #google {
  left: 790px;
  width: 250px;
}

#ipad.portrait #google {
  left: 625px;
  width: 160px;
}

#ipad #frame {
  border: none;
  background: #fff;
  position: absolute;
  left: 42px;
  top: 120px;
}

#ipad.landscape #frame {
  width: 1024px;
  height: 690px;
}

#ipad.portrait #frame {
  width: 1024px;   /* 768 * 4 / 3 - 1*/
  height: 1261px;  /* 946 * 4 / 3 */
  -moz-transform: scale(0.75);
  -moz-transform-origin: 0 0;
  -webkit-transform: scale(0.75);
  -webkit-transform-origin: 0 0;
  -o-transform: scale(0.75);
  -o-transform-origin: 0 0;
}

.info {
  margin: 16px;
  text-align: center;
}

#about {
  display: none;
}