lasertank-js/style.css

/** stylesheet for lasertank-js **/

body {
  background-image: url('images/dirt.gif');
}

.game {
  position: relative;

  background-color: #c0c0c0;
  border: 2px outset;

  margin: 0px auto;
  width: 696px;
}

.game ul.menu {
  list-style: none;

  margin:  0;
  padding: 0;

  line-height: 1.4em;
  cursor: default;
}

.game ul.menu li {
  margin:  0px 1px;
  padding: 0px 0.4em;

  float: left;
}

.game ul.menu li:hover {
  border-left:  1px solid #d3d7cf;
  border-right: 1px solid #888a85;

  margin: 0px;
}

.game img.opening {
  display: none;

  width:  512px;
  height: 512px;
}
.game.opening img.opening {
  display: inline-block;
}

/* 16x16 board */
.game canvas {
  width:  512px;
  height: 512px;
  border: 2px inset gray;
}
.game.opening canvas {
  display: none;
}

.game .hud {
  position: absolute;

  background-image:  url('images/hud.bmp');
  background-repeat: no-repeat;

  width:  180px;
  height: 245px;
  right:  0px;
  top:    0px;
}

/** control buttons (cloned to the pixel for margins/padding) **/
.game .control {
  position: absolute;

  /* intentionally 10px on left and 15px on right to stay consistent with
   * original game */
  border: 1px inset #d3d7cf;
  width:  145px;
  top:    249px;
  right:  15px;

  /* bottom handled by button margin */
  padding: 4px 5px 0px 5px;
  margin:  0px;
}

.game .control button {
  font-weight: bold;
  margin-bottom: 5px;
}

.game .control .gapl {
  margin-right: 5px;
  width: 70px;

  float: left;
  clear: left;
}
.game .control .gapr {
  width: 70px;
  float: left;
}
.game .control .full {
  width: 100%;
}