a {
  color: #00f;
}

a:visited {
  color: #808;
}

.efBackground {
  background-color: #def;
  color: #000;
}

.efDialog {
  background-color: #ccc;
  border: 1px solid black;
  color: #000;
}

.efDialogTranslucent {
  background-color: #dddd;
  border: 1px solid #bbb;
  color: #000;
}

.efDialogEthereal {
  background-color: #adfd;
  border: 1px solid #bbb;
  color: #000;
}

.efButton {
  background-color: #ddd;
  border: 1px solid black;
  color: #000;
  box-sizing: border-box;
}

.efButtonCantAfford {
  background-color: #ccc;
  border: 1px solid black;
  color: #777;
  box-sizing: border-box;
}

.efButtonHighlighted {
  background-color: #888;
  border: 1px solid black;
  color: #000;
  box-sizing: border-box;
}

.efInfo {
  border: 1px solid black;
}

.efSeasonBgSpring {
  background-color: #dbecc8;
}

.efSeasonBgSummer {
  background-color: #c3e4bc;
}

.efSeasonBgAutumn {
  background-color: #d3be9c;
}

.efSeasonBgWinter {
  background-color: #eef;
}

.efUpgradeChip {
  background-color: #ffe;
  border: 1px solid #000;
}

.efEtherealUpgradeChip {
  background-color: #9df;
  border: 1px solid #ff0;
}

.efPlantChip {
  border: 1px solid #000;
}

.efEtherealPlantChip {
  background-color: #9df;
  border: 1px solid black;
}

.efWeatherOn {
  text-shadow: 0 0 0.3em #fff, 0 0 0.3em #fff, 0 0 0.3em #fff, 0 0 0.3em #fff;
  color: #f00;
}

.efWeatherOff {
  text-shadow: 0 0 0.3em #fff, 0 0 0.3em #fff, 0 0 0.3em #fff, 0 0 0.3em #fff;
  color: #000;
}

.efWatercressHighlight {
  text-shadow: 0 0 0.3em #0f0;
}

.efWarningOnDialogText {
  color: #c00;
}


/* Indicates the element is scrollable, especially in case the device decides not to show scrollbars.
There exists a scrollbox concept in CSS that can automatically make the shadows appear/disappear,
but it doesn't work on translucent background, so cannot use it here. So this must be combined with some JS*/
.efScrollGradient {
  background:
  radial-gradient(farthest-side at 50% 0, #0003, #0000), radial-gradient(farthest-side at 50% 100%, #0003, #0000) 0 100%;
  background-repeat: no-repeat;
	background-size: 100% 5%, 100% 5%, 100% 5%, 100% 5%;
}

.efAutomatonManual {
  color: #000;
  background-color: #f00;
}

.efAutomatonAuto {
  color: #000;
  background-color: #0f0;
}