ui.css

/* Panels */

#section.abdest .panel {
  background: #475682;
  border-radius: 5px;
  padding: 3px 4px;
  margin: 0 3px 3px;
}

/* hack to stop whitespace from messing with inline-block positioning */
#section.abdest { font-size: 0; }
#section.abdest .panel { font-size: 10pt; }

#section.abdest .panel.left,
#section.abdest .panel.right {
  display: inline-block;
  width: calc(50% - 12.5px);
  vertical-align: top;
}
#section.abdest .panel.right {
  margin-left: 0;
}

/* Contents */

#section.abdest .coord { cursor: inherit; }

#section.abdest .level {
  color: #F7F700;
  background: #FF6600;
  border: solid thin #F08000;
  border-radius: 1em;
  font-weight: bold;
  font-size: 90%;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1em;
  vertical-align: baseline;
  text-align: center;
}

#section.abdest input[type=number] {
  display: inline-block;
  margin: 0.25ex;
  background: #374460;
  text-align: center;
  color: inherit;
  box-shadow: inset 1px 1px 2px -1px black;
  border: none;
}

#dest-x, #dest-y {
  border-radius: 4px;
  font-weight: bold;
  font-size: 1.25em;
  width: 4.5em;
}

#radar {
  width: 2.5em;
}

/* table */

#section.abdest table {
  border-collapse: separate;
  border-spacing: 1px;
  width: 100%;
}

#section.abdest td,
#section.abdest th {
  font-weight: normal;
  background: #374460;
  padding: 1px 1ex;
}

#section.abdest thead td {
  width: 70%;
  padding: 0;
  background: none;
}

#section.abdest thead th { width: 15%; }

#section.abdest tbody th { text-align: right; }
#section.abdest tbody td { text-align: center; }

/* canvas and pictures */

#section.abdest canvas,
#section.abdest img {
  vertical-align: middle;
}

/* the following rules are used by the script to paint the canvas */

#cape .grid {
  color: #404870;
  background-color: #374460;
}

#cape .vernier {
  color: #B8B8B8;
}

#cape .compass {
  color: white;
}

#cape .arrow {
  color: rgb(187, 252, 99);
  background-color: rgba(187, 252, 99, 0.3);
}