styles.css

body {
  margin: 0px;
  height: 100%;
  font-family: "Trebuchet MS", sans-serif;
}

span.block {
  display: inline-block;
}

div.block {
  display: inline-block;
  vertical-align: text-top;
}

div.canvas {
  border: 1.5px solid #444444;
  width: 600px;
  height: 600px;
}

.nav_panel {
  border-right: 2px solid #444444;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #C1CBDA;
}

.nav_panel_tile {
  text-align: center;
  padding-bottom: 5px;
}

.info_panel {
  border-right: 2px solid #444444;
  padding-top: 5px;
  padding-right: 5px;
  padding-left: 5px;
  background-color: #E0E0E0;
}

div.log {
  width: calc(50% - 12px);
  height:100%;
  overflow-y: scroll;
  background-color: #F0F0F0;
}

div.tri_info {
  width: calc(50% - 12px);
  height:100%;
  overflow: hidden;
  background-color: #F0F0F0;
}

div.locate {
  width: 500px;
  padding-top: 10px;
  padding-bottom: 10px;
}

button.small {
  width: 270px;
  height: 35px;
  font-family: inherit;
  font-size: 90%;
}

button.big {
  width: 270px;
  height: 45px;
  background-color: #ffcf82;
  font-family: inherit;
  font-size: 90%;
}

input.small {
  width: 80px;
  height: 20px;
}

textarea.list {
  width:100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}