/* 
 * z-indices:
 *
 * 1000 for pause/game over overlays
 *  900 for nuke
 *  800 for drag handlers
 *  700 for canvas mask
 *  600 for ui elements
 *  400 for sky
 *   10 for sprite container
 *   10 for background container
 *
 * sprite z-indices between 100-200 are set based on y-axis
 *
 */

body {
  font-family: Impact, Helvetica, sans-serif;
  background-color: #888;
}

a {
  color: #AFA;
  text-decoration: none;
}

#container {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  position:relative;
  width:900px;
  height:600px;
  border:5px solid black; 
  overflow: hidden;
  border-radius: 5px;
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.overlay {
  position:absolute;
  display:none;
  top:0px;
  left:0px;
  width:900px;
  height:600px;
  z-index:1000;
}

.centering-container {
  position:absolute;
  left:50%;
  top:50%;
}

#loading-screen {
  color: white;
  background-color: black;
  display: block;
}

#main-screen {
  color: white;
  background-color: black;
  z-index:1001;
}

#main-content {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
}

#menu li {
  font-size: 150%;
  color: #ccc;
  list-style: none;
}

#menu li.selected {
  color: #aaa;
  list-style-type: disc;
}

#menu li:hover {
  color: #aaa !important;
  list-style-type: disc !important;
  cursor: pointer !important;
}

#menu ul:hover li.selected {
  color: #ccc;
  list-style-type: none;
}

#menu li:active {
  color: #eee;
}

#title {
  color: #ddd;
  font-size:600%;
  margin-top:80px;
  margin-left:100px;
  margin-bottom:20px;
  color: #202c2d;
  text-shadow:
    0 1px #808d93,
    -1px 0 #cdd2d5,
    -1px 2px #808d93,
    -2px 1px #cdd2d5,
    -2px 3px #808d93,
    -3px 2px #cdd2d5,
    -3px 4px #808d93,
    -4px 3px #cdd2d5,
    -4px 5px #808d93,
    -5px 4px #cdd2d5,
    -5px 6px #808d93,
    -6px 5px #cdd2d5,
    -6px 7px #808d93,
    -7px 6px #cdd2d5,
    -7px 8px #808d93,
    -8px 7px #cdd2d5;
}

#graphic {
  float: left;
  clear: right;
  margin-left: 200px;
}

#menu {
  position:absolute;
  right: 220px;
  top: 360px;
}

#menu.center {
  right: auto;
  left: 50%;
  top: 50%;
}

#menu.center ul {
  position:relative;
  left:-50%;
  top:-80px;
}

#resume-game {
  display:none;
}

#main-screen.pause {
  background-color: transparent;
  background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.6), rgba(0,0,0,0.7), rgba(0,0,0,0.6));
  background-image: -moz-linear-gradient(top, rgba(0,0,0,0.6), rgba(0,0,0,0.7), rgba(0,0,0,0.6));
  background-image: -ms-linear-gradient(top, rgba(0,0,0,0.6), rgba(0,0,0,0.7), rgba(0,0,0,0.6));
  background-image: linear-gradient(top, rgba(0,0,0,0.6), rgba(0,0,0,0.7), rgba(0,0,0,0.6));
}

.pause #resume-game {
  display:list-item;
}

#game-over-screen {
  background-image: -webkit-radial-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1));
  background-image: -moz-radial-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1));
  background-image: -ms-radial-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1));
  background-image: radial-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1));
}

#game-over-screen.winning {
  background-image: none;
}

#intro-screen {
  background-image: -webkit-radial-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1));
  background-image: -moz-radial-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1));
  background-image: -ms-radial-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1));
  background-image: radial-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1));
}
#intro-text {
  position:relative;
  text-align: center;
  background: #145;
  padding: 5px 15px;
  color: #DDD;
  -webkit-border-radius: 10px;
  -moz-border-radius   : 10px;
  border-radius        : 10px;
  border: 2px solid #034;
  left: -50%;
  top: -240px;
  font-size:115%;
}

#game-over {
  font-size:300%;
  position:relative;
  left:-50%;
  top:-55px;
  padding:8px;
  font-weight:bold;
  color: rgba(30,78,94,1);
  text-shadow: 0px 4px 3px rgba(0,18,34,0.4),
               0px 8px 13px rgba(0,18,34,0.2);
}

#stats-screen {
  background-color: black;
  overflow-y: scroll;
  color: #DDD;
}

#stats-screen .text-content {
  margin-left: 30px;
}

#stats-content h2 {
  margin-bottom: 2px;
}
#stats-content p {
  margin-left: 10px;
  margin-bottom: 0px;
  margin-top: 2px;
}

.game-over-button {
  display:none;
  position:relative;
  left:-50%;
  top: 100px;
  padding: 10px;
  margin: 20px;
  color: rgba(30,78,94,0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius   : 10px;
  border-radius        : 10px;
  border: 1px solid rgba(30,78,94,0.4);
  white-space: nowrap;
  font-size:150%;
  font-weight:bold;
  -webkit-transition:0.3s ease;
  -moz-transition:0.3s ease;
  -ms-transition:0.3s ease;
  -o-transition:0.3s ease;
  transition:0.3s ease;
  text-decoration: none;
}

.game-over-button:hover {
  -webkit-transition:0.15s ease;
  -moz-transition:0.15s ease;
  -ms-transition:0.15s ease;
  -o-transition:0.15s ease;
  transition:0.15s ease;

  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);

  color: rgba(40,88,104,1);
  border-color: rgba(40,88,104,1);
  background: rgba(0,48,64,0.3);
}

#continue-button:active {
  border-width: 2px;
}

.text-content {
  font-size: 18px;
  color: #ccc;
  padding: 30px;
}

#about-screen {
  background-color: black;
}

#about-screen .sc {
  font-variant: small-caps;
}

#html5logo {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

#help {
  background-color: black;
  overflow-y: scroll;
}

#help table {
  margin: 10px 30px;
}

#help table td {
  padding-right: 10px;
}

.back {
  float: right;
  cursor: pointer;
  color: #ccc;
}

.back:hover {
  color: #aaa;
}

.back:active {
  color: #eee;
}

#figures {
  width: 300px;
  float: right;
}

#figures figure {
  margin-bottom: 20px;
}

#sky-canvas {
  pointer-events: none;
  position:absolute;
  -moz-transform: translateZ(400px);
  -webkit-transform: translateZ(400px);
  -o-transform: translateZ(400px);
  transform: translateZ(400px);
}

#sprites {
  position:absolute;
  width:900px;
  height:600px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

#canvas-mask {
  position:relative;
  overflow:hidden;
  z-index: 0;
}

.sprite {
  position: absolute;
  visibility: hidden;
}

#background { position:relative; background:#93803A; width:900px; height:600px; overflow:hidden; z-index: -1; }
.tile { position:absolute; width:60px; height:60px; background-color:#000; background-image:url(../assets/tiles.png); background-position:60 0px; }

#lower-right { position:absolute; z-index:600; right:5px; bottom:5px; cursor:default; }
#lower-right > span {
  color:#000;
  background-color:#FFF;
  padding:4px;
}
#framerate { display:none; float:left; width:42px; }
#distance { float:right; width:100px; }
#time { float:right; }
#time.clock {
  width: auto;
}
#time-remaining { display:none; float:right; }

.active { display:block !important; }
#leveldata { display:block }
#progress { position:absolute; left:0px; top:50%; width:100%; height:10px; background-color:#000; z-index:600; opacity:0.8; display:none; }
#progress-slider { width:0%; height:10px; background-color:red; }

#life {
  position:absolute;
  z-index:600;
  left:0px;
  top:0px;
  padding:2px 4px;
}
.heart {
  font:1.5em bold;
  overflow:hidden;
  float:left;
  text-shadow: 0px 0px 2px black;
}
.heart.full {
  color:#DC143C;
}
.heart.left-half {
  color:#DC143C;
}
.heart.right-half {
  color:#2F4F4F;
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: fliph; /*IE*/
}
.heart.empty {
  color:#2F4F4F;
}
.crosshair { cursor: crosshair; }

#dude-inventory {
  position: absolute;
  right: 4px;
  top: 4px;
  z-index: 600;
  visibility: hidden;
}

#other-inventory {
  position: absolute;
  left: 4px;
  bottom: 4px;
  z-index: 600;
  visibility: hidden;
}

.inventory {
  float: left;
  border: 3px solid #034;
  border-radius: 5px;
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px;
  border-spacing: 0px;
  cursor: pointer;
}
.inventory td {
  border: 1px solid #034;
  /* 46 because of the border */
  width: 46px;
  height: 46px;
}
.inventory caption {
  color: #AAA;
  font-weight: bold;
}
.inventory .occupied {
  background: rgba(70,100,120,0.3);
}
.inventory-item {
  position: absolute;
  cursor: pointer;
}
.inventory-item .readout {
  position: absolute;
  top: 0px;
  right: 0px;
  color: #BBB;
}
.ui-draggable {
  z-index: 800;
}
.click-dragging {
  z-index: 800;
}

#dude-hands {
  margin-left: 6px;
}
#dude-hands td:first-child {
  border: 0px;
  border-right: 1px solid #034;
  background-image:url(../assets/left-hand.png);
}
#dude-hands td:last-child {
  border: 0px;
  border-left: 1px solid #034;
  background-image:url(../assets/right-hand.png);
}
#dude-hands tr:nth-child(2) td {
  background-position:0 92px; 
}
#dude-hands tr:last-child td {
  background-position:0 46px; 
}

#fuel-gauge {
  position: absolute;
  width: 120px;
  height: 60px;
  left: 10px;
  top: 30px;
  display: none;
  z-index: 600;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow: hidden;
  background-image:url(../assets/fuel-gauge.png);
  background-color:black;
}

#fuel-gauge-needle {
  position: absolute;
  width: 16px;
  height: 58px;
  left: 52px;
  bottom: -8px;
  background-image:url(../assets/gauge-needle.png);
  -moz-transform-origin: 8px 50px;
  -webkit-transform-origin: 8px 50px;
  -o-transform-origin: 8px 50px;
  -ms-transform-origin: 8px 50px;
  transform-origin: 8px 50px;
}

#check-engine-light {
  display: none;
  position: absolute;
  width: 45px;
  height: 31px;
  left: 10px;
  top: 110px;
  background-image:url(../assets/check-engine.png);
  z-index: 600;
}

#check-engine-light.lit {
  background-position:45px 0px; 
}

#low-fuel-light {
  display: none;
  position: absolute;
  width: 29px;
  height: 30px;
  left: 20px;
  top: 158px;
  background-image:url(../assets/fuel-low.png);
  z-index: 600;
}

#low-fuel-light.lit {
  background-position:29px 0px; 
}

#lower-right > span {
  text-align: right;
  margin: 2px;
  background: #256;
  padding: 5px 15px;
  color: #DDD;
  -webkit-border-radius: 10px;
  -moz-border-radius   : 10px;
  border-radius        : 10px;
  border: 1px solid #034;
  white-space: nowrap;
  opacity: 0.8;
}

.tip {
  position: absolute;
  text-align: center;
  background: #256;
  padding: 5px 15px;
  color: #DDD;
  -webkit-border-radius: 10px;
  -moz-border-radius   : 10px;
  border-radius        : 10px;
  border: 1px solid #034;
  white-space: nowrap;
  pointer-events: none;
}

.tip:after, .tip:before {
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  left: 50%;
}

.tip.bottom:after {
  top: 100%;
  border-top-color: #256;
  border-width: 10px;
  margin-left: -10px;
}
.tip.bottom:before {
  top: 100%;
  border-top-color: #034;
  border-width: 11px;
  margin-left: -11px;
}

.tip.top:after {
  bottom: 100%;
  border-bottom-color: #256;
  border-width: 10px;
  margin-left: -10px;
}
.tip.top:before {
  bottom: 100%;
  border-bottom-color: #034;
  border-width: 11px;
  margin-left: -11px;
}

.tip.left:after, .tip.left:before {
  left: 30%;
}

.tip.right:after, .tip.right:before {
  left: 70%;
}

.tip b {
  font-weight: bold;
  font-size: 140%;
}

.tip.clickable {
  pointer-events: visiblePainted !important;
}

.pump #canvas-mask, .pump .inventory, .pump .inventory-item {
  cursor: url(../assets/pump-nozzle.png), auto !important;
}
.gascan #canvas-mask, .gascan .inventory, .gascan .inventory-item {
  cursor: url(../assets/gascan-cursor.png), auto !important;
}
.rubber-tubing #canvas-mask, .rubber-tubing .inventory-item, .rubber-tubing .inventory {
  cursor: url(../assets/rubber-tubing-cursor.png), auto !important;
}

#intro {
  font-family: Trebuchet, Helvetica, sans-serif;
  width: 80%;
  margin-top: 100px;
  margin-left: 50px;
}

#nuke {
  position: absolute;
  left: 0px;
  top: -1000px;
  width: 2000px;
  height: 2000px;
  display: none;
  background-color: #A22;
  z-index: 900;
  -webkit-transform-origin: left center;
}

.choice {
  display: inline-block;
  margin-left: 10px;
  vertical-align: 2px;
  font-size: medium;
  background: #444;
  color: #666;
  -webkit-border-radius: 10px;
  -moz-border-radius   : 10px;
  border-radius        : 10px;
  white-space: nowrap;
  overflow: hidden;
}

.choice span {
  padding: 0px 10px;
}

.choice .on {
  background: #CCC;
}

.choice .on:first-child {
  color: #464;
}

.choice .on:last-child {
  color: #644;
}

#skip-hints {
  font-size: 85%;
  color: #F77;
  cursor: pointer;
}

.sprite.glow {
  -webkit-animation: glow 0.65s ease-in-out infinite alternate;
  -webkit-box-shadow: 0px 0px 10px 1px rgba(255,255,0,0.7), inset 0px 0px 3px 1px rgba(255,255,0,0.2);
  -moz-animation: glow 0.65s ease-in-out infinite alternate;
  -moz-box-shadow: 0px 0px 10px 1px rgba(255,255,0,0.7), inset 0px 0px 3px 1px rgba(255,255,0,0.2);
}

@-webkit-keyframes glow {
  from { -webkit-box-shadow: 0px 0px 10px 1px rgba(255,255,0,0.7), inset 0px 0px 3px 1px rgba(255,255,0,0.2) }
  to   { -webkit-box-shadow: 0px 0px 30px 1px rgba(255,255,0,0.7), inset 0px 0px 3px 1px rgba(255,255,0,0.2) }
}

@-moz-keyframes glow {
  from { -moz-box-shadow: 0px 0px 10px 1px rgba(255,255,0,0.7), inset 0px 0px 3px 1px rgba(255,255,0,0.2) }
  to   { -moz-box-shadow: 0px 0px 30px 1px rgba(255,255,0,0.7), inset 0px 0px 3px 1px rgba(255,255,0,0.2) }
}

#messages {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #BBB;
  font-size: 14px;
}

.pause #messages {
  display: none;
}

#messages div {
  margin-top: 4px;
}

#moz-warn {
  display: none;
  color: #A22;
  font-style: italic;
}

#version {
  font-size: 60%;
}