/*.console {
    position: fixed;
    background: white;
    top: 0px;
    z-index: 20000;
    font-size: 11px;
    color: black;
    overflow: hidden;
    font-family: Courier, Arial, sans-serif;
}
.console > div {
    border-bottom: 1px solid #eee;
}*/

body {
	padding: 0;
	margin: 0;
	font-family: Arial, sans-serif;
  font-size: 18px;
}

img {
	border: none;
}

ul, li {
    padding: 0;
    margin: 0;
}

* {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}

#controlBar, #extendedBar {
	width: 100%;
	position: absolute;
	height: 42px;
	background-color: #EE7F01;
}

#controlBar {
    z-index: 100;
}

.button {
  cursor: pointer;  
  display: inline-block;
  color: #ffffff;
  background-color: #EE7F01;
  text-decoration: none;
  border: 2px solid #EE7F01;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 4px 15px;
}

#controlBar > .button {
	position: absolute;
	top: 4px;
  border: none;
  color: #ffffff;
  border: 2px solid white;
  background-color: #EE7F01;
}

/*.button:hover {
	background: #3cb0fd;
	background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
	background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
}*/

#backButton, #helpButton {
  background: transparent;
  font-size: 24px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  border: none !important;
}

#backButton {
  color: #ffffff;
  left: 20px;
  top: 2px !important;
}

#backButton:before {
  width: 20px;
  height: 32px;
  background: url(../images/back.png) 50% 50% no-repeat;
  position: absolute;
  content: ' ';
  display: block;
  background-size: auto 100%;
  left: -10px;
  top: 3px;
}

#backButton, #infoButton {
	left: 20px;
}

#infoButton {
	left: auto;
	right: 70px;
}

#helpButton {
	width: 34px;
	height: 34px;
	line-height: 30px;
	text-align: center;
	right: 20px;
  padding: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background: url(../images/help.png) 50% 50% no-repeat;
  background-size: 100%;
}

.button.info {
    background-image: none;
    background-color: #ffffff;
    color: #323232;   
    cursor: default;
}

#checkButton {
	position: absolute;
	left: 50%;
	margin-left: -80px;
  display: none;
}

#popupWrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0,0,0,0.25);
}

#popup, .border {
    background-color: white;
    /*border: 3px #EE7F01 solid;*/
    border-radius: 3px;
    box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.75);
    color: #444444;
}

#popup {
    position: absolute;
    top: 60px;
    left: 50%;
    width: 550px;
    margin-left: -275px;
}

#popupContent, #popupButtons {
    padding: 20px;
}

#popupContent {
	text-align: left;
}

#popupContent p {
	margin: 0 0 10px;
}

#popupButtons {
    padding-top: 0;
}

#popupButtons > .button {
	margin-right: 10px;
}
#popupButtons > .button:last-child {
	margin-right: 0px;
}

#gameContainer {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

#gameContainer > .controlBarOffset {
    margin-top: 42px
}

.clearFloat { clear: both; }
.hidden { display: none; }
.bold { font-weight: bold; }
.pointer { cursor: pointer; }
.floatLeft { float: left; }
.floatRight { float: right; }
.center { text-align: center; }

.scaleable {
  -webkit-transform: scale(1.0, 1.0);
      -ms-transform: scale(1.0, 1.0);
          transform: scale(1.0, 1.0);
  -webkit-transition: -webkit-transform 0.2s;
          transition: transform 0.2s;
}
.scaleable.scale {
  -webkit-transform: scale(1.15, 1.15);
      -ms-transform: scale(1.15, 1.15);
          transform: scale(1.15, 1.15);
}
.shake { -webkit-animation-name: shake-horizontal; -ms-animation-name: shake-horizontal; animation-name: shake-horizontal; -webkit-animation-duration: 1500ms; -ms-animation-duration: 1500ms; animation-duration: 1500ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }


@-webkit-keyframes shake-horizontal { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
  2% { -webkit-transform: translate(-6px, 0px) rotate(0deg); }
  4% { -webkit-transform: translate(5px, 0px) rotate(0deg); }
  6% { -webkit-transform: translate(3px, 0px) rotate(0deg); }
  8% { -webkit-transform: translate(-3px, 0px) rotate(0deg); }
  10% { -webkit-transform: translate(2px, 0px) rotate(0deg); }
  12% { -webkit-transform: translate(6px, 0px) rotate(0deg); }
  14% { -webkit-transform: translate(5px, 0px) rotate(0deg); }
  16% { -webkit-transform: translate(5px, 0px) rotate(0deg); }
  18% { -webkit-transform: translate(5px, 0px) rotate(0deg); }
  20% { -webkit-transform: translate(-4px, 0px) rotate(0deg); }
  22% { -webkit-transform: translate(5px, 0px) rotate(0deg); }
  24% { -webkit-transform: translate(-1px, 0px) rotate(0deg); }
  26% { -webkit-transform: translate(7px, 0px) rotate(0deg); }
  28% { -webkit-transform: translate(-5px, 0px) rotate(0deg); }
  30% { -webkit-transform: translate(8px, 0px) rotate(0deg); }
  32% { -webkit-transform: translate(-8px, 0px) rotate(0deg); }
  34% { -webkit-transform: translate(-2px, 0px) rotate(0deg); }
  36% { -webkit-transform: translate(2px, 0px) rotate(0deg); }
  38% { -webkit-transform: translate(6px, 0px) rotate(0deg); }
  40% { -webkit-transform: translate(-10px, 0px) rotate(0deg); }
  42% { -webkit-transform: translate(-6px, 0px) rotate(0deg); }
  44% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
  46% { -webkit-transform: translate(3px, 0px) rotate(0deg); }
  48% { -webkit-transform: translate(-3px, 0px) rotate(0deg); }
  50% { -webkit-transform: translate(6px, 0px) rotate(0deg); }
  52% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
  54% { -webkit-transform: translate(-6px, 0px) rotate(0deg); }
  56% { -webkit-transform: translate(-3px, 0px) rotate(0deg); }
  58% { -webkit-transform: translate(-9px, 0px) rotate(0deg); }
  60% { -webkit-transform: translate(-4px, 0px) rotate(0deg); }
  62% { -webkit-transform: translate(-3px, 0px) rotate(0deg); }
  64% { -webkit-transform: translate(-3px, 0px) rotate(0deg); }
  66% { -webkit-transform: translate(-2px, 0px) rotate(0deg); }
  68% { -webkit-transform: translate(6px, 0px) rotate(0deg); }
  70% { -webkit-transform: translate(-8px, 0px) rotate(0deg); }
  72% { -webkit-transform: translate(9px, 0px) rotate(0deg); }
  74% { -webkit-transform: translate(-6px, 0px) rotate(0deg); }
  76% { -webkit-transform: translate(-10px, 0px) rotate(0deg); }
  78% { -webkit-transform: translate(-7px, 0px) rotate(0deg); }
  80% { -webkit-transform: translate(1px, 0px) rotate(0deg); }
  82% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
  84% { -webkit-transform: translate(-2px, 0px) rotate(0deg); }
  86% { -webkit-transform: translate(-3px, 0px) rotate(0deg); }
  88% { -webkit-transform: translate(-5px, 0px) rotate(0deg); }
  90% { -webkit-transform: translate(-9px, 0px) rotate(0deg); }
  92% { -webkit-transform: translate(7px, 0px) rotate(0deg); }
  94% { -webkit-transform: translate(8px, 0px) rotate(0deg); }
  96% { -webkit-transform: translate(-8px, 0px) rotate(0deg); }
  98% { -webkit-transform: translate(4px, 0px) rotate(0deg); } }

@-ms-keyframes shake-horizontal { 0% { -ms-transform: translate(0px, 0px) rotate(0deg); }
  2% { -ms-transform: translate(-9px, 0px) rotate(0deg); }
  4% { -ms-transform: translate(-6px, 0px) rotate(0deg); }
  6% { -ms-transform: translate(-2px, 0px) rotate(0deg); }
  8% { -ms-transform: translate(5px, 0px) rotate(0deg); }
  10% { -ms-transform: translate(-1px, 0px) rotate(0deg); }
  12% { -ms-transform: translate(9px, 0px) rotate(0deg); }
  14% { -ms-transform: translate(-5px, 0px) rotate(0deg); }
  16% { -ms-transform: translate(-4px, 0px) rotate(0deg); }
  18% { -ms-transform: translate(7px, 0px) rotate(0deg); }
  20% { -ms-transform: translate(8px, 0px) rotate(0deg); }
  22% { -ms-transform: translate(7px, 0px) rotate(0deg); }
  24% { -ms-transform: translate(-5px, 0px) rotate(0deg); }
  26% { -ms-transform: translate(-2px, 0px) rotate(0deg); }
  28% { -ms-transform: translate(-5px, 0px) rotate(0deg); }
  30% { -ms-transform: translate(3px, 0px) rotate(0deg); }
  32% { -ms-transform: translate(-7px, 0px) rotate(0deg); }
  34% { -ms-transform: translate(7px, 0px) rotate(0deg); }
  36% { -ms-transform: translate(4px, 0px) rotate(0deg); }
  38% { -ms-transform: translate(-10px, 0px) rotate(0deg); }
  40% { -ms-transform: translate(3px, 0px) rotate(0deg); }
  42% { -ms-transform: translate(-6px, 0px) rotate(0deg); }
  44% { -ms-transform: translate(-5px, 0px) rotate(0deg); }
  46% { -ms-transform: translate(0px, 0px) rotate(0deg); }
  48% { -ms-transform: translate(-8px, 0px) rotate(0deg); }
  50% { -ms-transform: translate(0px, 0px) rotate(0deg); }
  52% { -ms-transform: translate(-5px, 0px) rotate(0deg); }
  54% { -ms-transform: translate(4px, 0px) rotate(0deg); }
  56% { -ms-transform: translate(-2px, 0px) rotate(0deg); }
  58% { -ms-transform: translate(-9px, 0px) rotate(0deg); }
  60% { -ms-transform: translate(-6px, 0px) rotate(0deg); }
  62% { -ms-transform: translate(4px, 0px) rotate(0deg); }
  64% { -ms-transform: translate(-10px, 0px) rotate(0deg); }
  66% { -ms-transform: translate(8px, 0px) rotate(0deg); }
  68% { -ms-transform: translate(0px, 0px) rotate(0deg); }
  70% { -ms-transform: translate(4px, 0px) rotate(0deg); }
  72% { -ms-transform: translate(-4px, 0px) rotate(0deg); }
  74% { -ms-transform: translate(-1px, 0px) rotate(0deg); }
  76% { -ms-transform: translate(-3px, 0px) rotate(0deg); }
  78% { -ms-transform: translate(0px, 0px) rotate(0deg); }
  80% { -ms-transform: translate(-10px, 0px) rotate(0deg); }
  82% { -ms-transform: translate(4px, 0px) rotate(0deg); }
  84% { -ms-transform: translate(-7px, 0px) rotate(0deg); }
  86% { -ms-transform: translate(7px, 0px) rotate(0deg); }
  88% { -ms-transform: translate(-1px, 0px) rotate(0deg); }
  90% { -ms-transform: translate(9px, 0px) rotate(0deg); }
  92% { -ms-transform: translate(-6px, 0px) rotate(0deg); }
  94% { -ms-transform: translate(-8px, 0px) rotate(0deg); }
  96% { -ms-transform: translate(-1px, 0px) rotate(0deg); }
  98% { -ms-transform: translate(-5px, 0px) rotate(0deg); } }

@keyframes shake-horizontal { 0% { transform: translate(0px, 0px) rotate(0deg); }
  2% { transform: translate(-4px, 0px) rotate(0deg); }
  4% { transform: translate(2px, 0px) rotate(0deg); }
  6% { transform: translate(-3px, 0px) rotate(0deg); }
  8% { transform: translate(9px, 0px) rotate(0deg); }
  10% { transform: translate(2px, 0px) rotate(0deg); }
  12% { transform: translate(-6px, 0px) rotate(0deg); }
  14% { transform: translate(-7px, 0px) rotate(0deg); }
  16% { transform: translate(2px, 0px) rotate(0deg); }
  18% { transform: translate(7px, 0px) rotate(0deg); }
  20% { transform: translate(-1px, 0px) rotate(0deg); }
  22% { transform: translate(-10px, 0px) rotate(0deg); }
  24% { transform: translate(-10px, 0px) rotate(0deg); }
  26% { transform: translate(3px, 0px) rotate(0deg); }
  28% { transform: translate(-5px, 0px) rotate(0deg); }
  30% { transform: translate(4px, 0px) rotate(0deg); }
  32% { transform: translate(-6px, 0px) rotate(0deg); }
  34% { transform: translate(-2px, 0px) rotate(0deg); }
  36% { transform: translate(-6px, 0px) rotate(0deg); }
  38% { transform: translate(-2px, 0px) rotate(0deg); }
  40% { transform: translate(4px, 0px) rotate(0deg); }
  42% { transform: translate(8px, 0px) rotate(0deg); }
  44% { transform: translate(-3px, 0px) rotate(0deg); }
  46% { transform: translate(-10px, 0px) rotate(0deg); }
  48% { transform: translate(4px, 0px) rotate(0deg); }
  50% { transform: translate(-6px, 0px) rotate(0deg); }
  52% { transform: translate(6px, 0px) rotate(0deg); }
  54% { transform: translate(-8px, 0px) rotate(0deg); }
  56% { transform: translate(5px, 0px) rotate(0deg); }
  58% { transform: translate(9px, 0px) rotate(0deg); }
  60% { transform: translate(7px, 0px) rotate(0deg); }
  62% { transform: translate(1px, 0px) rotate(0deg); }
  64% { transform: translate(2px, 0px) rotate(0deg); }
  66% { transform: translate(-2px, 0px) rotate(0deg); }
  68% { transform: translate(-7px, 0px) rotate(0deg); }
  70% { transform: translate(-1px, 0px) rotate(0deg); }
  72% { transform: translate(-6px, 0px) rotate(0deg); }
  74% { transform: translate(5px, 0px) rotate(0deg); }
  76% { transform: translate(0px, 0px) rotate(0deg); }
  78% { transform: translate(9px, 0px) rotate(0deg); }
  80% { transform: translate(-3px, 0px) rotate(0deg); }
  82% { transform: translate(8px, 0px) rotate(0deg); }
  84% { transform: translate(-2px, 0px) rotate(0deg); }
  86% { transform: translate(-1px, 0px) rotate(0deg); }
  88% { transform: translate(-3px, 0px) rotate(0deg); }
  90% { transform: translate(4px, 0px) rotate(0deg); }
  92% { transform: translate(0px, 0px) rotate(0deg); }
  94% { transform: translate(4px, 0px) rotate(0deg); }
  96% { transform: translate(2px, 0px) rotate(0deg); }
  98% { transform: translate(-2px, 0px) rotate(0deg); } }