lasertank-js/style.css

/** stylesheet for lasertank-js **/

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

.game {
  position: relative;

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

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

/** menu **/
.game ul.menu,
.game ul.menu ul {
  list-style: none;

  margin:  0;
  padding: 0;

  cursor: default;
}

.game ul.menu > li {
  display: inline-block;
  padding: 0px;
  margin:  1px;
}
.game ul.menu > li:hover {
  margin: 0px;
  border: 1px outset #d3d7cf;
}

.game ul.menu > li ul {
  position: absolute;
  display:  none;

  background-color: #c0c0c0;

  margin:    -1px 0px 0px -1px;
  min-width: 7em;
}
.game ul.menu > li li {
  padding: 0.2em 0.5em 0.2em 1em;
  border:  1px outset #d3d7cf;

  color: gray;

  white-space: no-wrap;
}
.game ul.menu > li a {
  position: relative;
  background-color: #c0c0c0;

  cursor: default;
  color:  black;
  text-decoration: none;

  padding: 0px 0.4em;
  margin:  0px;

  line-height: 1.4em;
}
.game ul.menu > li li > a {
  background-color: transparent;
}
.game ul.menu > li li:hover {
  background-color: #729fcf;
}
.game ul.menu.focus > li:hover ul {
  display: block;
  margin-top: -3px;
  z-index: 1000;
}
.game ul.menu.focus > li:hover > a {
  z-index: 1001;
}


.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%;
}


/** dialogs **/
.dialog {
  position: absolute;
  display:  none;

  background-color: rgba( 0, 0, 0, 0.5 );

  top: 0px;
  left:  0px;
  right: 0px;
  bottom: 0px;

  /* by setting the z-index > the menu z-index, it will automatically lose focus
   * and be hidden */
  z-index: 2000;
}
.dialog.show {
  display: block;
}
.dialog > .body {
  position: absolute;

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

  min-width: 150px;
  width:     150px;
  margin:    0px auto;
  padding:   0.5em;
  top:       250px;
  left:      0px;
  right:     0px;

  z-index: 2001;
}
.dialog > .body > .title {
  background-color: #000080;
  background-image: -webkit-linear-gradient( left, #000080, #1084d0 );
  background-image:    -moz-linear-gradient( left, #000080, #1084d0 );
  background-image:     -ms-linear-gradient( left, #000080, #1084d0 );
  background-image:      -o-linear-gradient( left, #000080, #1084d0 );
  margin: -0.5em -0.5em 0.5em -0.5em;

  font-weight: bold;
  color: white;

  padding: 0.4em;
}
.dialog .close {
  float: right;
  margin-top: 0.5em;
}
.dialog > .body > p:first-of-type {
  margin-top: 0;
}
.dialog > .body > p:last-of-type {
  margin-bottom: 0;
}

#noscript .body {
  width: 500px;
}

#todo .body {
  width: 350px;
}
#todo:target {
  display: block;
}

a.button {
  -webkit-appearance: push-button;
  -moz-appearance:    button;

  text-decoration: none;
  cursor: default;

  padding: 0.2em 1em;

  color: inherit;
}