app-classic.css

:root {
  --main-bg-color: black;
  --window-bg-color: #222;
  --map-margin-x: 10;
  --map-margin-y: 12;
  --map-font: Verdana;
  --map-font-size: 14;
  --text-color: white;
  --text-color-disabled: #868686;
  --text-color-log-time: #888888;
  --text-select-bg: #333333;
  --text-font: Verdana;
  --advanced-mode-font-size: 10px;
  --advanced-mode-font: Verdana;
  --advanced-mode-margin-x: 8;
  --node-error-color: #ff8888;
  --power-color-0: rgb(255, 0, 0);
  --power-color-1: rgb(0, 255, 255);
  --power-color-2: rgb(0, 255, 0);
  --power-color-3: rgb(255, 255, 0);
  --power-color-4: rgb(240, 240, 240);
  --awareness-text-color-0: white;
  --awareness-text-color-1: #e3e32b;
  --awareness-text-color-2: #ff5858;
  --awareness-color: #ff9999;
  --willpower-color: #bbbbbb;
  --adepts-color: #55dd55;
  --close-button-bottom: 6px;
  --alert-window-min-height: 105;
  --alert-window-height-2lines: 120;
  --artifact-color: #de39f9;
  --artifact-timer-color: #402b2b;
  --artifact-timer-shadow: #84aa9d;
  --fluff-color: #c37402;
}

body {
  background: var(--main-bg-color);
  color: #d3d3d3;
  font-size: 18px;
  font-family: var(--text-font);
  overflow: hidden;
}

h2 {
  margin: 0.15em;
}

input[type=textfield] {
  background: var(--text-select-bg);
  border: 1px outset #777;
  color: var(--text-color);
  padding-left: 5px;
  position: absolute;
}

#tooltip {
  font-family: sans-serif;
  position: absolute;
  z-index: 3000;
  border: 1px solid #777;
  background-color: #222;
  font-size: 14px;
  padding: 5px;
  opacity: 0.85;
  user-select: none;
}
#tooltip h3, #tooltip div { margin: 0; }

#mapTooltipWindow {
  border: 1px solid !important;
  opacity: 0.9 !important;
  padding: 5px !important;
  z-index: 1000;
}

#musicplayer
{
  bottom: 5px;
  margin-top: 10px;
  height: 75px;
  padding:0 5 0 5;
}

a {
  color: #d3d3d3;
}

fieldset {
  border:solid #999 1px;
}

legend {
  color: var(--text-color);
  padding: 0 3 0 3;
}

.topButton {
  font-size: 16px;
  height: 20px;
  top: 2px;
}

.statusButton {
  border: outset 1px #777;
  cursor: pointer;
  background: #222;
  font-weight: bold;
  font-size: 12px;
  padding: 2;
}

.uiButton {
  user-select: none;
  background: #111;
  border: 1px outset #777;
  cursor: pointer;
  text-align: center;
}

.uiButtonDisabled {
  user-select: none;
  background: #111;
  border: 1px outset #777;
  color: #868686 !important;
  cursor: not-allowed !important;
  text-align: center;
}

.musicButton2 {
  border: outset 1px #777;
  cursor: pointer;
  background: #222;
  font-weight: bold;
  font-size: 6px;
  padding: 2px;
}

.selectOption {
  background-color: #222;
  color: white;
}

#mapBorder {
  position: absolute;
  top: 34px;
  left: 240px;
  right: 4px;
  bottom: 3px;
}

#map {
  border: double #777 4px;
  width: 780px;
  height: 580px;
  overflow: hidden;
}

#topPanel {
  width: 788px;
  height: 26px;
  left: 240px;
  top: 5px;
  background: #090909;
  position: absolute;
}

#logPanelClear {
  left: 217px;
  position: absolute;
  top: 5px;
}

#logPanel {
  width: 20px;
  height: 98.7%;
  left: 217px;
  top: 5px;
  background: #090909;
  position: absolute;
}

#logText
{
  overflow: auto;
  position: absolute;
  left: 10px;
  top: 10px;
  width: 743px;
  height: 450px;
  background: #0b0b0b;
  border: 1px solid #777777;
}

#status {
  border: double #777 4px;
  font-size: 12px;
  height: 100%;
  left: -4px;
  overflow: hidden;
  padding: 5px;
  position: relative;
  top: -6px;
  user-select: none;
  width: 189px;
}

#statusBorder {
  position: absolute;
  padding: 6px;
  top: 6px;
  left: 3px;
  width: 202px;
  bottom: 13px;
}

.status\.powerMark {
  background:#222;
  border: 1px solid #777;
  font-size: 12px;
  font-weight: bold;
  height: 15px;
  text-align: center;
  width: 15px;
}

#status\.cult {
  padding: 0 5 5 5;
  background: #111;
  height: 17;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
}

#status-ritual-unveiling {
  position: absolute;
  left: 110px;
  top: 87px;
}

#status\.awareness {
  border-radius: 7px;
  font-weight: bold;
  padding: 2px;
}

#status\.musicPlus {
  font-size: 8px;
  height: 9px;
  left: 134px;
  position: relative;
  top: -70px;
  width: 9px;
}

#status\.musicMinus {
  font-size: 8px;
  height: 9px;
  left: 154px;
  position: relative;
  top: -85px;
  width: 9px;
}

#status\.debug {
  padding: 20px 5px 0px 5px;
  color: var(--text-color);
}

#status\.turns {
  font-weight: bold;
}

.statusConvert {
  background:#222;
  border:1px solid #777;
  cursor: pointer;
  font-size: 10px;
  font-weight: bold;
  height:12;
  text-align:center;
  width:12;
}

.statusUpgrade {
  color: #86ff86;
}

.statusTable {
  color: var(--text-color);
  font-size: 14px;
  width: 100%;
}

.statusNumber {
  font-weight: bold;
}

.statusResourceTable {
  color: var(--text-color);
  font-size: 11px;
}

.cultText {
  font-weight: bold;
}

.powerText {
  font-weight: 1000;
  vertical-align: middle;
}

#status\.track {
  color: var(--text-color);
  text-align: center;
  background: #222;
  font-size: 10px;
  color: #00ff00;
  user-select: text;
}

.shadow {
  text-shadow: 0.5px 0.5px 0.5px black;
}

.logPanelItemOld {
  background: #050505;
  border: 1px solid #999;
  color: white;
  font-size: 13px;
  font-weight: bold;
  height: 18px;
  position: absolute;
  width: 18px;
}

.logPanelItemNew {
  background: #151515;
  border: 1px solid #fff;
  color: white;
  font-size: 13px;
  font-weight: bold;
  height: 18px;
  position: absolute;
  width: 18px;
}

.uiWindowBorder {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.uiWindow {
  position: absolute;
  background: var(--window-bg-color);
  border: 4px double #ffffff; 
}

.uiText {
  background: #111;
  border: 1px solid #777;
  height: calc(100% - 62px);
  margin: 1%;
  overflow: auto;
  padding: 1%;
  position: relative;
  width: 96%;
}

.uiTextFG {
  color: var(--text-color);
  height: calc(100% - 37px);
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  user-select: none;
}

.uiBG {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  opacity: 0.8;
  background: #000;
}

.cultInfoLabel {
  background: #111;
  bottom: 7px;
  color: var(--text-color);
  left: 14%;
  position: absolute;
  user-select: none;
}

.cultInfoInv1 {
  font-size: 12px;
  color: #999999;
}

.cultInfoInv2 {
  color: white;
}

.cultInfoInv3 {
  color: white;
}

.uiListSects {
  padding: 5px;
}

.uiListSectsRow {
  background: black;
}

.blinking {
  animation: blinkingText 3s infinite;
}

@keyframes blinkingText {
  0% { background: black; }
  50% { background: #202020; }
  100% { background: black; }
}

.messageText {
  background: #242424;
  border: solid 2px #848484;
  color: var(--text-color);
  left: 50%;
  padding: 1%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
}

.boxes {
}

.boxleft {
  float: left;
  width: 50%;
}

.boxright {
  float: left;
  width: 50%;
}

#logConsole {
  background: #34343480;
  bottom: 12px;
  height: 98px;
  left: 247px;
  overflow: auto;
  pointer-events: none;
  position: absolute;
  user-select: none;
  width: 62%;
  z-index: 14;
  transition: 0.4s;
}

#logConsoleText {
  padding: 10px;
  font-size: 14px;
  text-shadow: 1px 1px 1px #3c3c3c;
}

.spanButton {
  background:#222;
  border:1px solid #777;
  cursor: pointer;
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  padding: 0 2px 0 2px;
  width: 8px;
}

.fluff {
  color: var(--fluff-color);
  text-justify: inter-character;
  text-align: justify;
  text-indent: 2em;
  font-style: italic;
  padding: 0 10px 0 10px;
}

.fluffNote {
  color: var(--fluff-color);
  font-style: italic;
}

#newGameMenuContents {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 310px;
  left: 0.4%;
  top: 9%;
  width: 94.6%;
}

input[type=radio] {
  transform: scale(1.5);
  margin-right: 7px;
}

#mainMenuTitle {
  top: 6px;
  left: 65%;
  transform: translate(-50%);
}

.mainMenuButton {
  height: 27px;
  margin: 6px 0px 0px 0px;
  width: 240px;
  font-size: 20px;
}

#mainMenuContents {
  display: flex;
  flex-direction: column;
  left: 50%;
  transform: translate(-50%);
  position: absolute;
  top: 29px;
}

#saveMenuTitle {
  top: 6px;
  left: 70%;
  transform: translate(-50%);
}

#saveMenuContents {
  display: flex;
  flex-direction: column;
  left: 50%;
  transform: translate(-50%);
  position: absolute;
  top: 29px;
}

.saveMenuButton {
  margin: 6px 0px 0px 0px;
  width: 240px;
  font-size: 15px;
}

.saveMenuText2 {
  font-size: 10px;
}

#loadMenuTitle {
  top: 6px;
  left: 69%;
  transform: translate(-50%);
}