html, body {
  margin: 0; padding: 0;  
  background: #000;
  height: 100%;
}
body {
}
#sarien
{
  position: relative;
  background: #000;
  margin: 0 auto;
  overflow: hidden;
  top: 0px;
}
#canvas
{
  position: absolute;
  top: 0px; left: 0px;
  z-index: 42;
  overflow: hidden;
}
#canvas img {
  -moz-image-rendering: -moz-crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}
.priority
{
  position:absolute;
}
.view
{
  position:absolute;
  overflow:hidden;
  z-index:100;
}
.view img
{
  position:absolute;
}
.text-screen .view,
.text-screen .priority,
.view-hidden
{
  display: none !important;
}
#actions
{
  display: none;
  position: absolute;
  z-index: 99999;
  text-align: center;
  width: 100%;
  min-height: 200px;
  background: #BFBFBF -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, rgb(157,156,167)),
    color-stop(1, rgb(66,67,74))
  ) 0 1px no-repeat;
  border-top: solid #000 1px;
}
.command {
  position: relative;
  z-index: 999999;
  display: inline-block;
  background: #fff -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.11, rgb(238,238,240)),
    color-stop(0.66, rgb(210,210,216))
  ) 0 1px no-repeat;
  border: solid #000 1px;
  -webkit-border-radius: 7px;
  padding: 5px;
  color: #000;
  text-align: center;
  padding: 10px 10px;
  font: normal normal normal 20px/30px 'Heiti K', 'Helvetica';
  text-decoration: none;
  -webkit-box-shadow: 1px 1px 2px #555;
  margin: 7px 12px 5px 0;
}
.iPhone #actions {
  background: #000;
  min-height: inherit;
}
.iPhone .command {
  -webkit-box-shadow: 0 0 5px #555;
}
.desktop #actions {
  background: #000;
}
.command.blue {
  background: #9CBBED -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.11, rgb(58,120,220)),
    color-stop(0.66, rgb(21,67,187))
  ) 0 1px no-repeat;
  color: #fff;
}
.command.red {
  background: #DE1F00 -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.11, rgb(110,16,0)),
    color-stop(0.66, rgb(58,8,0))
  ) 0 1px no-repeat;
  color: #fff;
}
.command.icon {
  padding: 10px 10px 10px 30px;
}
.command.single {
  display: block;
  width: 48px;
  margin-left: auto;
  margin-right: auto;
}
.command .location-command {
  width: 160px;  height: 84px;
}
.command .view-command {
  zoom: 0.5;
}
.command.twitter {
  width: 30px;
  background:url(/ipad/twitter.png);  
}
.waytogo-icon {
  position: absolute;
  margin: -5px 0 0 -22px;
  display: inline-block;
  background: url(/ipad/skull-black.png);
  width: 30px; height: 40px;
}
.command.keyboard {
  width: 31px;
}
.keyboard-icon {
  position: absolute;
  margin: 2px 0 0 -7px;
  display: inline-block;
  background: url(/ipad/keyboard.png) no-repeat;
  width: 40px; height: 40px;
}
.red .waytogo-icon {
  background: url(/ipad/skull.png);
}
.char
{
  display: block;
  position: absolute;
  z-index: 999;
  font-family: Courier New;
  font-weight: bold;
  font-size: 16px;
  line-height: 100%;
  border:solid transparent 1px;
}
.ie .char 
{
  line-height: 19px;
  height: 20px;
}
.char_fg_0 { color: #000; }
.char_fg_1 { color: #0000A0; }
.char_fg_2 { color: #00A000; }
.char_fg_3 { color: #00A0A0; }
.char_fg_4 { color: #A00000; }
.char_fg_5 { color: #8000A0; }
.char_fg_6 { color: #A05000; }
.char_fg_7 { color: #A0A0A0; }
.char_fg_8 { color: #505050; }
.char_fg_9 { color: #5050FF; }
.char_fg_10 { color: #00FF50; }
.char_fg_11 { color: #50FFFF; }
.char_fg_12 { color: #FF5050; }
.char_fg_13 { color: #FF50FF; }
.char_fg_14 { color: #FFFF50; }
.char_fg_15 { color: #FFFFFF; }
.char_bg_0 { background-color: #000; }
.char_bg_1 { background-color: #0000A0; }
.char_bg_2 { background-color: #00A000; }
.char_bg_3 { background-color: #00A0A0; }
.char_bg_4 { background-color: #A00000; }
.char_bg_5 { background-color: #8000A0; }
.char_bg_6 { background-color: #A05000; }
.char_bg_7 { background-color: #A0A0A0; }
.char_bg_8 { background-color: #505050; }
.char_bg_9 { background-color: #5050FF; }
.char_bg_10 { background-color: #00FF50; }
.char_bg_11 { background-color: #50FFFF; }
.char_bg_12 { background-color: #FF5050; }
.char_bg_13 { background-color: #FF50FF; }
.char_bg_14 { background-color: #FFFF50; }
.char_bg_15 { background-color: #FFFFFF; }

#menu
{
  position: absolute;
  left: 0; top:0;
  width: 640px; height: 16px;
  background: #fff; color: #000;
  z-index: 999;
  font-family: Courier New;
  font-weight: bold;
  font-size: 18px;
  line-height: 18px;
  text-decoration: none;
}
#dialog,
#loading,
#slotDialog,
#install-dialog
{
  display: none;
  position: absolute;
  background: rgba(0,10,30, .8);
  z-index: 998;
  left: 0px; top: 0px;
  color: #fff;
  font: normal normal normal 24px/32px 'Heiti K', 'Helvetica';
  padding: 20px;
  border: solid #fff 2px;
  -webkit-border-radius: 9px;
  -webkit-box-shadow: 0 0 3px #000;
  text-align: center;
  z-index: 9999999;
}
#dialog.red {
  background: rgba(80,10,10, .8);
}
#loading {
  display: block;
  width: 260px;
  left:50%;top: 50%; 
  margin-left:-125px;margin-top:-30px;
  z-index:999999;
}
#border
{
  display: none;
  position: absolute;
  left: 4px; top: 2px; right: 4px; bottom: 2px;
  border-left: solid #AA0000 4px;
  border-right: solid #AA0000 4px;
  border-top: solid #AA0000 2px;
  border-bottom: solid #AA0000 2px;
}
.zoom1 #border {
  border-width: 1px;
  left: 2px; top: 1px; right: 2px; bottom: 1px;
}
#messageContainer
{
  position: absolute;
  top: 0; left: 0;
  width: 2000px; height: 100%;
  z-index: 500;
  overflow: hidden;
}
.avatarName
{
  position: absolute;
  -moz-user-select: none;
  color: #fff;
  font-family: Arial;
  font-size: 10px;
}
.message
{
  position: absolute;
  -moz-user-select: none;
}
.message td,
.message div
{
  line-height: 1px;
  font-size: 1px;
}
.message .tl
{
  width: 5px; height: 3px;
  background: url(/img/tl.gif);
}
.message .tr
{
  width: 5px; height: 3px;
  background: url(/img/tr.gif);
}
.message .bl
{
  width: 5px; height: 3px;
  background: url(/img/bl.gif);
}
.message .br
{
  width: 5px; height: 3px;
  background: url(/img/br.gif);
}
.message .t,
.message .r,
.message .b,
.message .l,
.message .c
{
  background: #fff;
}
.message .c
{
  color: #000;
  font-family: Courier New;
  font-size: 18px;
  line-height: normal;
  font-weight: bold;
}
.message .teut
{
  position: absolute;
  width: 16px; height: 8px;
  left: 50%;
  margin-left: -15px;
  background: url(/img/teut.gif);
}
#useractions
{
  position: relative;
  z-index: 501;
}
#pointer {
  position: absolute;
  top: 0; left: 0;
  z-index:99999;
  width: 1px; height: 1px;
  border: solid #fff 4px;
  -webkit-border-radius: 100px;
  opacity: 0;
}
.landscape #sarien,
.landscape #pointer {
  display: block;
}
.portrait #sarien,
.portrait #pointer {
  display: none;
}
.landscaoe #actions {
  display: block;
}
.portrait #actions {
  display: none !important;
}
#saves {
  position: fixed;
  top: 0px; left: 0px;
  width: 768px; height: 1004px;
  z-index: 1;
  display: none;
  background: #BFBFBF -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, rgb(157,156,167)),
    color-stop(1, rgb(66,67,74))
  ) 0 1px no-repeat;
}
.slot {
  position: relative;
  font-size: 0; line-height: 0;
  width: 320px; height: 160px;
  display: inline-block;
  margin: 25px 0 0 42px;  
  -webkit-box-shadow: 2px 2px 8px #333;
  overflow: hidden;
}
.slot.unused .load {
  opacity: .2;
}
.slot.unused img {
  display:none;
}
.slot img {
  width: 320px; height: 168px;
}
.slot .command {
  position: absolute;
  top: 45px;
}
.slot .restart {
  left: 110px;
}
.slot .save {
  left: 55px; 
}
.slot .load {
  left: 198px;
}
.slot .score {
  position: absolute;
  background: rgba(0,10,30, .8);
  width: 60px;
  z-index: 998;
  left: 50%; top: 40px;
  margin-left: -52px;
  color: #fff;
  font: normal normal normal 24px/32px 'Heiti K', 'Helvetica';
  padding: 20px;
  border: solid #fff 2px;
  -webkit-border-radius: 9px;
  -webkit-box-shadow: 0 0 3px #000;
  text-align: center;
}
.portrait #saves {
  display: block;
}
.portrait {
  width: 768px;
  overflow: hidden;
}
/* splash screen */
body.splash {
  overflow: hidden;
}
#splash {
  position: fixed;
  width: 1024px; height: 768px;
}
#author {
  display: none;
  position: absolute;
  background: rgba(0,10,30, .8);
  z-index: 998;
  color: #fff;
  font: normal normal normal 24px/32px 'Heiti K', 'Helvetica';
  padding: 20px;
  border: solid #fff 2px;
  -webkit-border-radius: 9px;
  -webkit-box-shadow: 0 0 3px #000;
  text-align: center;
  right: 20px; bottom: 40px;
}
.splash-portrait #splash {
  left: -128px; top: 128px;
  -webkit-transform: rotate(-90deg);
}
.splash-portrait #author {
  bottom: 20px;
}
#install-dialog {
  position: absolute;
  left: 20px; top: 20px;
}
.splash-portrait #install-dialog {
  left: 100px;
}

.zoom1 .char { font-size: 9px; }
.zoom1-5 .char { font-size: 12px; }
.zoom2 .char { font-size: 17px; }
.zoom3 .char { font-size: 24px; }
.zoom1-5 #dialog,
.zoom1-5 #loading,
.zoom1-5 #slotDialog,
.zoom1-5 #install-dialog { zoom:.625;}
.zoom1-5 #actions * { zoom:.625;}
.zoom1-5 #saves { zoom:.625;}