body {
  font-family: sans-serif;
  color: #333333;
  padding: 1em 1em 5em 1em;
}

p {
  line-height: 1.3;
}

blockquote {
  font-family: serif;
  font-style: italic;
  font-size: 110%;
  max-width: 50em;
  margin-right: 5em;
}

pre.code {
  margin: 2em 1em 2em 0;
  padding: 1.3em;
  border: 1px solid #aaaaaa;
  background-color: #f7f7f7;
  border-radius: 3px;
}

table.options-list {
  border-collapse: collapse;
}

table.options-list th {
  padding: 1.4em 2em 0.4em 0;
  border-bottom: 1px solid #aaaaaa;
}

table.options-list td {
  border-bottom: 1px solid #aaaaaa;
  padding: 1em;
}

table.options-list td:first-child {
  vertical-align: top;
  max-width: 40em;
  border-right: 1px solid #aaaaaa;
}

.arena {
  position: relative;
  width: 300px;
  height: 240px;
  background-color: #ffffee;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

#drag1,
#drag2,
#drag3,
#drag4,
#drag14,
#drag15,
#drag16,
#drag17,
#drag18,
#drag19,
.sub-drag {
  position: absolute;
  top: 105px;
  left: 135px;
  width: 26px;
  height: 26px;
  border: 2px solid #6666cc;
  background-color: #ccccff;
  border-radius: 4px;
}

#drag4 {
  top: 0;
  left: 0;
}

.blk-red {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid #cc6666;
  background-color: #ffcccc;
  border-radius: 4px;
}

.blk-green {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid #66cc66;
  background-color: #ccffcc;
  border-radius: 4px;
}

#drag5 { top:  33px; left: 125px; }
#drag6 { top: 180px; left:  77px; }
#drag7 { top: 110px; left:  16px; }
#drag8 { top:  79px; left: 270px; }
#drag9 { top: 150px; left: 230px; }
#drag10 { top:  7px; left: 169px; }

#map-container {
  overflow: hidden;
  border: 1px solid #777777;
}

#map {
  position: absolute;
  left: -460px;
  top: -60px;
  width: 1280px;
  height: 635px;
  background-image: url(images/world-map.jpg);
}

#drag11 {
  position: absolute;
  border: 4px solid #339933;
  border-radius: 4px;
  width: 150px;
  height: 120px;
  top: 30px;
  left: 60px;
}
#drag12 { top:  60px; left: 30px; }
#drag13 { top:  30px; left: 90px; }

#drag14.udraggable-dragging {
  border: 2px solid #cc6666;
  background-color: #ffcccc;
  box-shadow: 1px 1px 3px 3px rgba(100, 100, 100, 0.3);
}

#status-bar {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 24px;
  font-size: 16px;
  line-height: 1.4;
  background-color: #666666;
  color: #cccccc;
}

#status-bar .value {
  color: #ffffff;
}

#status-bar span {
  position: absolute;
  bottom: 1px;
}

#lbl-mode  { left:  10px; }
#stat-mode { left:  63px; }
#lbl-x     { left: 165px; }
#stat-x    { left: 185px; }
#lbl-y     { left: 237px; }
#stat-y    { left: 257px; }

#dialog {
  position: absolute;
  top: 30px;
  left: 50px;
  width: 200px;
  padding: 2px;
  background-color: #dddddd;
  font-family: sans-serif;
  font-size: 12px;
  border: 3px outset #dddddd;
}

#dialog h1 {
  background-color: #0000aa;
  color: #eeeeee;
  margin: 0 0 10px 0;
  padding: 3px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  border: 1px inset #0000aa;
  cursor: move;
}

#dialog label {
  display: inline-block;
  width: 85px;
  padding: 0 0 0 2px;
}

#dialog input.text {
  width: 95px;
  padding: 1px 2px;
  margin: 1px 0;
}

#dialog select {
  width: 104px;
  padding: 1px 0px;
}

#dialog button {
  float: right;
}

.dice {
  position: absolute;
  width: 72px;
  height: 72px;
  background-color: #cc0000;
  border-radius: 10px;
}

.dot {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #eeeeee;
  border-radius: 6px;
}

.dot1 { top:  12px; left:  14px; }
.dot2 { top:  12px; left:  46px; }
.dot3 { top:  30px; left:  14px; }
.dot4 { top:  30px; left:  46px; }
.dot5 { top:  48px; left:  14px; }
.dot6 { top:  48px; left:  46px; }
.dice1 { top: 20px; left: 10px; }
.dice2 { top: 60px; left: 150px; }

#destroy-btn {
  width: 80px;
  position: absolute;
  bottom: 6px;
  left: 110px;
}

#disable-btn,
#sml-grid-btn,
#zone-red-btn {
  width: 80px;
  position: absolute;
  bottom: 6px;
  left: 45px;
}

#enable-btn,
#big-grid-btn,
#zone-blue-btn {
  width: 80px;
  position: absolute;
  bottom: 6px;
  left: 175px;
}

#zone-red {
  position: absolute;
  width: 120px;
  height: 150px;
  left: 89px;
  top: 29px;
  background-color: #ff6666;
  border: 1px solid #881111;
  opacity: 0.4;
  border-radius: 4px;
}

#zone-blue {
  position: absolute;
  width: 240px;
  height: 80px;
  left: 29px;
  top: 59px;
  background-color: #6666ff;
  border: 1px solid #111188;
  opacity: 0.4;
  border-radius: 4px;
}