body {
  font-family: MS Sans Serif,Arial,sans-serif;
  font-size: 14px;
  font-smooth: never;
}

* {
  user-select: none;
}

#loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #c0c0c0;
  font-size: 32px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

canvas {
  background-color: #004000;
}

#game {
  position: absolute;
  left: calc(50% - 384px);
  top: calc(50% - 233px);
  width: 768px;
  height: 466px;
  border: 1px solid black;
  background-color: #000000;
}

#gamecontent {
  position: relative;
}

.meter {
  background-color: #ffffc0;
}

.meter > * {
  margin: 4px;
  vertical-align: top;
}

.meterFrame {
  display: inline-block;
  border: 1px solid black;
  width: 181px;
  background-color: white;
  position: relative;
}

.meterFrame > div {
  box-sizing: border-box;
  border-style: solid;
  border-color: white;
  border-width: 1px 0 1px 0;
  height: 100%;
  background-image: linear-gradient(90deg, #ffffff 12.50%, #0000c0 12.50%, #0000c0 50%, #ffffff 50%, #ffffff 62.50%, #0000c0 62.50%, #0000c0 100%);
  background-size: 8.00px 8.00px;
}

#status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 261px;
  border-width: 3px;
  border-style: solid;
  border-color: #ffffff #808080 #808080 #ffffff;
}

#buttons {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.iconButton {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 96px;
  height: 96px;
  border-width: 3px;
  border-style: solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  margin: 10px;
  background: #c0c0c0;
  padding: 0;
  text-align: center;
  text-decoration: none;
  color: black;
}

.iconButton:not(.disabled):active, .iconButton:not(.disabled).active {
  border-style: solid;
  border-right: 0;
  border-bottom: 0;
  border-color: #808080;
}

.iconButton > img {
  margin-top: 3px;
}

.iconButton:not(.disabled):active > img, .iconButton:not(.disabled).active > img {
  position: relative;
  left: 1px;
  top: 1px;
}

.iconButton > div {
  position: absolute;
  bottom: 1px;
  left: 0;
  width: 100%;
}

.iconButton:not(.disabled):active > div, .iconButton:not(.disabled).active > div {
  bottom: 3px;
  left: 0px;
}

.disabled {
  color: #808080 !important;
  text-shadow: 1px 1px 0 #ffffff !important;
}

.iconButton > div::first-letter {
  text-decoration: underline;
}

#doc {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 0;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
  width: 350px;
  background: #c0c0c0;
  padding: 1px;
  align-items: center;
}

#doc .title {
  display: flex;
  background: #0000a0;
  color: white;
  font-weight: bold;
  padding: 0 2px;
  margin: 0;
  align-items: center;
}

#doc .title div {
  padding: 4px;
  flex-grow: 1;
}

#doc .frame {
  border-width: 2px;
  border-style: solid;
  border-color: #ffffff #808080 #808080 #ffffff;
}

#doc .editor {
  position: relative;
  background: white;
  border-width: 1px;
  border-style: solid;
  border-color: #808080 #ffffff #ffffff #808080;
  padding: 4px 20px 4px 4px;
  margin: 3px 1px 1px 1px;
  font-size: 12px;
}

#contentFrame {
  height: 150px;
  overflow: hidden;
  user-select: text;
  overflow-wrap: anywhere;
}

#content {
  user-select: text;
}

#doc .statbar {
  display: flex;
  background: #c0c0c0;
  margin-top: 1px;
  font-size: 12px;
}

#doc .statbar > div {
  flex-grow: 1;
  border-width: 1px;
  border-style: solid;
  border-color: #808080 #ffffff #ffffff #808080;
  margin: 1px 2px;
  padding: 0 4px;
}

#doc .taskbar {
  display: flex;
  background: #c0c0c0;
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: #ffffff;
  margin-top: 1px;
}

#doc .taskbar .run {
  font-weight: bold;
  border-width: 2px;
  border-style: solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  padding: 2px 6px;
}

#doc .taskbar .task {
  border-width: 2px;
  border-style: solid;
  border-color: #808080 #ffffff #ffffff #808080;
  background-color: #e0e0e0;
}

#doc .taskbar > div {
  height: 16px;
  padding: 2px;
  margin: 2px;
}

#doc .title > *, #doc .taskbar > div > * {
  vertical-align: middle;
}

#doc .taskbar .pad {
  border: none;
  flex-grow: 1;
}

#doc .taskbar #clock {
  border-width: 2px;
  border-style: solid;
  border-color: #808080 #ffffff #ffffff #808080;
  height: 16px;
  line-height: 16px;
  width: 72px;
  text-align: center;
}

#caret {
  border-left: 1px solid black;
}

#caret.blink {
  border-left: 1px solid transparent;
}

.scrollbar {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 16px;
  background-image: linear-gradient(45deg, #c0c0c0 25%, transparent 25%), linear-gradient(-45deg, #c0c0c0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c0c0c0 75%), linear-gradient(-45deg, transparent 75%, #c0c0c0 75%);
  background-size: 2px 2px;
  background-position: 0 0, 0 1px, 1px -1px, -1px 0px;
  font-size: 8px;
  text-align: center;
  line-height: 12px;
}

.scrollbar > div {
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: #c0c0c0 #000000 #000000 #c0c0c0;
  background: #c0c0c0;
}

.scrollbar > div > div {
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  background: #c0c0c0;
  height: 14px;
  width: 14px;
}

.scrollup {
  background-image: url('scrolldown.png');
}

.scrollthumb {
  position: absolute;
  bottom: 16px;
}

.disabled .scrollthumb {
  visibility: hidden;
}

.scrolldown {
  position: absolute;
  bottom: 0;
  line-height: 14px;
}

#title {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: white;
  padding: 20px;
  box-sizing: border-box;
  background-color: #000048;
  color: white;
  text-align: justify;
}

#title h1 {
  text-align: center;
  text-decoration: underline;
}

#title table {
  height: 100%;
}

#title td {
  max-width: 50%;
  line-height: 150%;
}

#startGame {
  font-size: 32px;
  border: 3px outset #e0e0e0;
  background-color: #c0c0c0;
  padding: 4px 8px;
  text-align: center;
}

#startGame:active {
  border-color: #909090;
  border-right: none;
  border-bottom: none;
  padding: 7px 8px 4px 11px;
}

#startGame > div {
  border: 1px dotted black;
  padding: 0px 4px;
}

#gamecontrols {
  background-color: #000080;
  color: white;
  display: flex;
  align-items: center;
  padding: 4px;
  font-weight: bold;
  border-bottom: 2px solid #808080;
}

#gamecontrols div {
  flex-grow: 1;
}

#gameOver {
  position: absolute;
  bottom: 0;
  right: 0;
  color: white;
  padding: 8px;
  text-align: right;
}

#gameOver > h1 {
  font-size: 32px;
  font-weight: bold;
  padding: 0;
  margin: 0;
}

#gameFS {
  position: relative;
  width: 768px;
  height: 466px;
  margin: auto;
}