@font-face {
  font-family: console;
  src: url('../fonts/glass_tty_vt220.ttf');
}

* {
  box-sizing: border-box;
  line-height: 150%;
}
body {
  background: rgba(0, 0, 0, 1);
  color: rgba(0, 150, 250, 1);
  font-family: console;
  font-size: 20px;
}

@keyframes cursorBlinkKey {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  70%   { opacity: 1; }
  100% { opacity: 0; }
}
@-moz-keyframes cursorBlinkKey {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  70%   { opacity: 1; }
  100% { opacity: 0; }
}
@-webkit-keyframes cursorBlinkKey {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  70%   { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes pulseBlinkKey {
  0%   { opacity: 0.5; }
  50%   { opacity: 1; }
  100% { opacity: 0.5; }
}
@-moz-keyframes pulseBlinkKey {
  0%   { opacity: 0.5; }
  50%   { opacity: 1; }
  100% { opacity: 0.5; }
}
@-webkit-keyframes pulseBlinkKey {
  0%   { opacity: 0.5; }
  50%   { opacity: 1; }
  100% { opacity: 0.5; }
}

.cursor, #cursor {
  display: inline-block;
  width: 12px;
  height: 22px;
  vertical-align: middle;
  background: rgba(0, 150, 250, 1);
  border-bottom: 2px solid #000;
  animation: cursorBlinkKey 2s infinite;
-moz-animation: cursorBlinkKey 2s infinite;
-webkit-animation: cursorBlinkKey 2s infinite;
}

#stage {
  width: 1600px;
  height: 700px;
  background: rgba(0, 0, 0, 1);
  border-top: rgba(0, 150, 250, 0.2);
  border-bottom: rgba(0, 150, 250, 0.2);
  position: relative;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}


#stage > * {
  position: absolute;
  left: 0; top: 0;
}

svg {
  position: absolute;
  pointer: cursor;
}

@keyframes dash { 
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 1000; }
  }
@-moz-keyframes dash { 
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 1000; }
  }
@-webkit-keyframes dash { 
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 1000; }
  }
.dashPath {
  stroke-dasharray: 50;
  animation: dash 5s linear infinite;
-moz-animation: dash 5s linear infinite;
-webkit-animation: dash 5s linear infinite;
}
@keyframes dashLeftKey { 
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1000; }
  }
@-moz-keyframes dashLeftKey { 
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1000; }
  }
@-webkit-keyframes dashLeftKey { 
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1000; }
  }
.dashLeft {
  stroke-dasharray: 50;
  animation: dashLeftKey 5s linear infinite;
-moz-animation: dashLeftKey 5s linear infinite;
-webkit-animation: dashLeftKey 5s linear infinite;
}

.pulseBlink {
  animation: pulseBlinkKey 2s linear infinite;
-moz-animation: pulseBlinkKey 2s linear infinite;
-webkit-animation: pulseBlinkKey 2s linear infinite;
}

header, .bordered {
  background: rgba(0, 150, 250, 0.2);
  border: 1px solid rgba(0, 150, 250, 0.2);
  padding: 4px;
}

header {
  position: absolute;
  top:0;left:0;right:0;
}

#content {
  margin-top: 48px;
}

#content > p {
  padding: 4px;
}

#actionPalette {
  position: absolute;
  left:0; top:40px; width: 60px; 
  min-height: 48px;
  text-align: center;
}

.toolicon {
  cursor: pointer;
  color: rgba(0, 150, 250, 0.5);  
  transition: color 0.5s;
-moz-transition: color 0.5s;
-webkit-transition: color 0.5s;
}

.toolicon:hover {
  color: rgba(0, 150, 250, 1);  
}

.divider {
  border-top: 1px solid rgba(0, 150, 250, 0.5);
  width: 100%; height:1px; margin-top: 4px; padding-top: 4px;
}

svg text {
  font-size: 30px;
}

#killbot {

}

.mob {
  position: absolute;
}

.mobsize3 {
  width: 320px;
  height: 320px;
}

.hintzone {
  transition: opacity 1s;
  opacity: 0;
  /*cursor: pointer;*/
}

/*.hintzone:hover,*/ .hintHL {
  opacity: 1;
}

.hintNoHL {
  opacity: 0;
}

.itemLabel {
  margin-left: 6px;
  margin-top: -26px;
  font-size: 80%;
  position: absolute;
  opacity: 0;
  line-height: 180%;
  transition: opacity 3s;
}

.slowFading {
  transition: opacity 5s, color 5s;
}
.textColor {
  color: rgba(0, 150, 250, 1)}
.mediumFading {
  transition: opacity 1.5s linear, color 1.5s linear;
}
#chatBubble {
  transition: opacity 2s;
  opacity: 0;
  left: 0; right: 0; top: 80px;
  width: 500px; margin-left: auto; margin-right: auto;
  text-align: center;
  color: #fff;
  background-color: rgba(0,0,0,0.75);
  padding: 16px;
  border-radius: 16px;
}

#talkWindow {
  font-size: 80%;
  max-height: 400px; overflow: auto;
  transition: opacity 1s, height 2s;
  opacity: 0;
  left: 0;
  top: 150px;
  right: 0;
  width: 500px;
  margin-left: auto; margin-right: auto;
  background-color: rgba(0,0,0,0.75);
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(0, 150, 250, 0.5);
  padding: 8px;
  z-index: 5001;
}

.talkOpt {
  transition: color 0.5s;
  color: rgba(0, 150, 250, 1);
  cursor: pointer;
}
.talkOpt:hover {
  color: white;
}

#curtain {
  width:100%;height:1024px;background:#000;pointer-events:none;
  transition: opacity 5s;
  z-index:3000;
}

#guru {
  left:0;right:0;top:150px;
  width: 400px; margin-left: auto; margin-right: auto;
  padding: 16px; border: 1px solid red;
  background: #000;
  color: red;
}

#loadingPlzWait {
  left:0;right:0;top:350px;
  width: 400px; margin-left: auto; margin-right: auto;
  padding: 16px; border: 1px solid rgba(0, 150, 250, 1);
  background: #000;
}

.menuIcon {
  color: rgba(0, 150, 250, 1);
  transition: color 0.5s;
  cursor:pointer;
}
.menuIcon:hover {
  color: white;
}
.tile_mob {
  transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
}
.bgImgPos {
  margin-top: -110px;
  position: absolute;
  left: 0;
  right: 0;
}

#help {
  top:auto;left:0;bottom:10px;right:0;text-align:center;
}

#frameWindow {
  left:0; top: 50px; right: 0; height: 400px; width: 600px;
  margin-left: auto; margin-right: auto;
  padding: 12px; z-index: 4001;
  border: 2px solid rgba(0, 150, 250, 1); border-radius: 10px;
  background: #000;
}