/**
 * Copyright(c) 2012, Jeff Schiller
 */

/** Always show vertical scrollbar when needed on OSX */
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0,0,0,.5);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

body {
  background-color: #000;
  color: #bbb;
  font-size: 80%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
}

.pdg-flat-button {
  cursor: pointer;
  outline: none;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

.fullScreen {
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
}

@font-face {
  font-family: chiller;
  src: url("data/fonts/chiller.woff");
}

.tabStrip {
  font-size: 1.2em;
}

.tabButton {
  border-left: solid 1px black;
  border-right: solid 1px black;
  border-top: solid 1px black;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  color: #666;
  cursor: pointer;
  display: inline-block;
  margin-bottom: -2px;
  padding: 4px;
  position: relative;
  top: 2px;
  user-select: none;
}

.tabButton:hover {
  font-weight: bold;
}

.tabButton.active {
  background-color: rgb(180, 180, 180);
  border-color: black;
  border-width: 2px;
  color: black;
  margin-bottom: 0;
}

.tabPanelArea {
  background-color: rgb(180, 180, 180);
  border: solid 2px black;
}

.tabPane {
  display: none;
}

.tabPane.active {
  display: block;
}

/*********************/
/** Loading Styles */
/*********************/
.loading {
  color: dimgrey;
  font-family: chiller;
  font-size: 2em;
  text-align: center;
  top: 30%;
}

.loadingResource {
  font-size: 0.5em;
}

.loaderDiv {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
}

.loaderDiv progress {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.loaderStatus {
  position: absolute;
  bottom: 1.5em;
  font-size: 0.5em;
}

/*********************/
/** Title Styles     */
/*********************/

.alphaBubble {
  background-color: yellow;
  border: 10px solid white;
  border-radius: 15px;
  color: red;
  font-family: chiller;
  font-size: 2em;
  font-weight: bold;
  padding: 10px;
  position: absolute;
  right: 10px;
  top: 10px;
}

/*********************/
/** Main Menu Styles */
/*********************/

#mainmenu .fullScreen {
  background-color: rgba(0, 0, 0, 0.3);
}

.menuCentered {
  text-align: center;
}

.menuText {
  color: rgb(170, 0, 0);
  font-family: chiller;
  /* Prevent menu items from being selected when clicked. */
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

.menuTextButton {
  cursor: pointer;
}

.menuTextLarge {
  display: inline-block;
  font-size: 3em;
  font-weight: bold;
}

.menuTextSmaller {
  font-size: 1.5em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.menuTextSmallest {
  font-size: 1;
  margin-bottom: 0.2em;
  text-transform: uppercase;
}

.menuTextSmaller a, .menuTextSmallest a {
  color: inherit;
  text-decoration: none;
}

#optionsMenu hr {
  border-color: rgb(170, 0, 0);
  max-width: 4em;
}

#studentStats.menuTextSmaller {
  font-size: 1.3em;
}

.studentStat.studentPoints {
  display: inline-block;
  font-size: 1.6em;
  font-weight: bold;
  margin-left: 10%;
  text-align: center;
}

.studentStat.studentPoints .studentFieldValue {
  color: #fa0;
}

.menuTextButton:hover,
.menuText.pdg-flat-button-focused,
.studentButton.pdg-flat-button-focused .menuText {
  color: rgb(224, 0, 0);
}

.pickStudentItem.menuTextSmaller {
  font-size: 1.0em;
  margin-bottom: 0;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

.studentItem {
  display: inline;
}

.studentButton {
  float: right;
}

.studentButton.hover {
  color: rgb(170, 0, 0);
}

.studentItemLast {
  border-bottom: solid 1px rgb(170, 0, 0);
}

.studentName, .studentViewButton {
  display: inline-block;
}

.studentButtonPanel {
  float: right;
}

.studentViewButton:hover {
  color: rgb(224, 0, 0);
}

.menuTitleSmaller {
  color: rgb(170, 0, 0);
  font-family: chiller;
  font-size: 1.8em;
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.mainMenuUpdates {
  background-color: rgba(0, 0, 0, 0.5);
  border: solid 1px rgb(200, 200, 0);
  border-radius: 15px;
  color: rgb(200, 200, 0);
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  margin-top: 1px;
  padding: 5px;
}

.mainMenuUpdates:hover {
  border: solid 2px yellow;
  color: yellow;
  margin-bottom: -1px;
  margin-top: 0;
}

input.filechooser {
  position: absolute;
  height: 0;
  overflow: hidden;
  width: 0;
}

ul.savedGameList {
  list-style: none;
  max-height: 13em;
  overflow: scroll;
  overflow-x: hidden;
}

ul.savedGameList::-webkit-scrollbar {
  background-color: rgb(170, 0, 0);
  width: 0.5em;
}

li.savedGameItem span.savedGameName {
  min-width: 10em;
  display: inline-block;
}

.studentMenu {
  height: 14em;
  overflow: scroll;
  text-align: left;
  margin: 0.5em 6em 0 6em;
  padding: 0 1em 0 1em;
}

.savedGameItem {
  cursor: pointer;
}

.savedGameItem:hover {
  font-weight: bold;
}

ul.victoryActions {
  color: #444;
  list-style: none;
  max-height: 8em;
  overflow: scroll;
}

.victoryAction {
  border-bottom: solid 1px #444;
}

.victoryAction.dialogButton {
  color: rgb(170, 0, 0);
  cursor: pointer;
}

.victoryAction.dialogButton:hover {
  background-color: #aaa;
  font-weight: bold;
}

.victoryActionCell {
  display: table-cell;
}

.victoryActionName {
  width: 12em;
}

.victoryActionDesc {
  width: 50%;
}

.victoryActionCost {
  width: 20%;
}

/*********************/
/** Updates Styles   */
/*********************/
.pressEscape {
  text-align: center;
}

.updates {
  background-color: rgba(0, 0, 0, 0.7);
  color: yellow;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
}

.allUpdates {
  border: solid 1px yellow;
  border-radius: 15px;
  font-size: 0.45em;
  height: 80%;
  margin: 10px;
  overflow-y: scroll;
  padding: 25px 60px 25px 60px;
}

.singleUpdate a {
  color: orange;
}

/*********************/
/** Shopping Styles  */
/*********************/

.shopping .blackboardContents {
  padding: 50px;
}

/* shoppingNavStrip */
.shoppingPrevStudent, .shoppingCurrentStudent,
.shoppingNextStudent, .shoppingCash {
  display: inline-block;
  font-size: 0.7em;
}

.shoppingHighlight {
  background-color: yellow;
  color: rgb(224, 0, 0);
  font-weight: bold;
}

.shoppingCurrentStudent {
  padding: 0 10px 0 10px;
  width: 8em;
}

.shoppingCash {
  padding-left: 100px;
}

#shoppingTabPane {
  color: black;
  background-color: rgb(180, 180, 180);
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: 0.45em;
  margin-top: 20px;
  padding: 10px;
  width: 80%;
}

#shoppingTabPane .tabPanelArea {
  max-height: 21em;
  min-height: 10em;
  overflow-y: scroll;
}

.shoppingTab {
  text-align: left;
}

.shoppingItemName {
  width: 20em;
}

.shoppingItemPrice {
  text-align: center;
}

.shoppingItemAction {
  text-align: center;
}

.shoppingItemHelpButton {
  margin-right: 5px;
}

#shopping .bottomButtons {
  margin-bottom: 1.5em;
}

#shopping div.bottomButtons div.doneButton {
  color: #bbb;
}

/** In Game Styles */

.bottomButtonPanel {
  bottom: 10px;
  position: absolute;
  width: 100%;
}

.bottomButtons {
  text-align: center;
}

.bottomButton {
  display: inline-block;
  padding: 0 0.5em 0 0.5em;
}

.studentDiv {
  margin-top: 2em;
  margin-left: 21%;
}

.studentCreateDiv {
  margin-top: 0.5em;
  margin-left: 21%;
}

.studentStatList {
  display: inline-block;
  line-height: 0.9em;
  vertical-align: top
}

.studentStat {
  color: rgb(170, 0, 0);
  font-family: chiller;
  margin: 0;
  padding: 0;
}

.studentFieldName {
  display: inline-block;
}

.studentFieldValue {
  display: inline-block;
  color: black;
}

.studentName .studentFieldValue {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 7em;
}

.studentStatButtons {
  float: right;
}

.iconPreviewDivOuter {
  height: 4em;
  overflow: hidden;
  position: relative;
  right: 2em;
  width: 4em;
}

.iconPreviewDiv {
  background-size: 20em;
  height: 20em;
  width: 20em;
}

.studentIconPreview {
  background-size: 10em;
  height: 2em;
  margin-right: 5.15em;
  width: 2em;
}

.pickTeamTable {
  margin-left: 18%;
  width: 80%;
}

.pickTeamColumn,
.pickTeamColumn {
  text-align: left;
  user-select: none;
  vertical-align: top;
  width: 50%;
}

.studentList {
  max-height: 14.25em;
  overflow: scroll;
}

/*********************/
/** Clipboard Styles */
/*********************/

#clipboard .bottomButtons {
  font-size: 0.8em;
}

.clipboardContents {
  color: black;
  margin-top: 7.5em;
  font-family: 'Roboto', sans-serif;
  font-size: .85em;
  font-weight: bold;
}

.clipboardTitle,
.clipboardSubTitle {
  padding-bottom: .2em;
}

.clipboardNote {
  color: blue;
  font-family: 'Shadows Into Light Two', cursive;
  position: absolute;
  right: 2em;
  top: 6.5em;
  transform: rotate(30deg);
}

.briefingText {
  font-size: 0.75em;
  line-height: 1.4em;
  margin: 0.5em 6em 0 6em;
  text-align: justify;
}

.clipboardTeacherDetails, .clipboardStudentDetails {
  font-size: 0.75em;
  margin: 0.5em 6em 0 6em;
  text-align: left;
}

.clipboardTeacherMoonlights,
.clipboardTeacherStats {
  margin-bottom: 0.5em;
}

.clipboardTeacherInfo span,
.clipboardStudentInfo span {
  margin-right: 0.75em;
}

.clipboardStudentInventory, .clipboardStudentEffects {
  display: inline-block;
  vertical-align: top;
}

.clipboardStudentEffects {
  margin-left: 10em;
}

.clipboardStudentHeading {
  margin: 0;
  padding: 0;
  text-decoration: underline;
}

.clipboardStudentEffectsList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.clipboardTeacherStats span.teacherMovementStat,
.clipboardTeacherStats span.teacherMeleeStat,
.clipboardTeacherStats span.teacherMissileStat,
.clipboardTeacherStats span.teacherBodyStat,
.clipboardTeacherStats span.clipboardStudentStat {
  margin-right: 0.75em;
}

.clipboardTeacherDescription, .clipboardStudentDescription {
  text-align: justify;
}

.clipboardTeacherTable, .clipboardStudentTable {
  border-spacing: 1em .3em;
  display: inline-block;
}

.studentInjured
.clipboardTeacherInjured,
.clipboardStudentInjured {
  color: rgb(170, 0, 0);
}

.clipboardTeacherDead, .clipboardStudentDead {
  opacity: 0.3;
  text-decoration: line-through;
}

.teacherName, .studentName, .studentEditStatButton {
  cursor: pointer;
  display: inline-block;
}

.studentEditStatButton:hover {
  color: rgb(224, 0, 0);
}

.studentEditStatButtonHint {
  font-size: 0.5em;
  position: absolute;
  right: 3.5em;
}

.teacherPhoto, .studentPhoto {
  background-color: black;
  height: 1.2em;
  width: 1.2em;
}

.teacherPhotoDetail, .studentPhotoDetail {
  float: right;
}

.clipboardStudentItem {
  padding-right: 1.5em;
}

.bottomClipboardButton, .bottomClipboardButtonNoUnderline {
  color: black;
  cursor: pointer;
  display: inline-block;
  font-size: 1em;
  margin-bottom: -10px;
  padding: 0 1em 0 1em;
  text-transform: uppercase;
}

.bottomClipboardButton:hover, bottomClipboardButtonNoUnderline:hover {
  font-weight: bold;
}

.bottomClipboardButtonNoUnderline.pdg-flat-button-disabled {
  color: grey;
  cursor: default;
  font-weight: normal;
}

.clipboardItemNum::first-letter,
.tabButton::first-letter,
.bottomClipboardButton::first-letter {
  font-weight: bold;
  text-decoration: underline;
}

/**********************/
/** Debriefing Styles */
/**********************/

.blackboardContents {
  font-color: white;
  font-family: 'Shadows Into Light Two', cursive;
  padding-top: 2em;
}

.debriefingStats {
  font-size: 0.75em;
}

.debriefingParagraph {
  font-size: 0.75em;
  padding: 1em 2em 1em 3em;
  text-align: left;
}


/**********************/
/** Options Styles    */
/**********************/

.optionsAuthWarn {
  color: yellow;
  font-family: 'Roboto', sans-serif;
  font-size: 0.3em;
  text-transform: none;
}

/*********************/
/* View Map Styles   */
/*********************/

.viewMapScreen {
  padding-top: 0.5em;
}

#viewMapCanvas {
  border: solid 1px yellow;
  height: 18em;
  width: 100%;
}

#viewmap .bottomButtons .bottomClipboardButton,
#viewmap .bottomButtons .bottomClipboardButtonNoUnderline {
  color: yellow;
}

/*********************/
/** In-Game Styles   */
/*********************/

.inGameTable {
  border-spacing: 10px;
  height: 99%;
  width: 99%;
}

.viewportAndStudentInfo {
  height: 70%;
  margin-top: 0.2em;
  width: 100%;
  white-space: nowrap;
}

.messagesAndButtonPanel {
  height: 25%;
  margin-top: 0.2em;
  width: 100%;
  white-space: nowrap;
}

.viewportCell {
  background-color: black;
  border: 1px outset white;
  display: inline-block;
  width: 70%;
  height: 100%;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

.viewportCanvas {
  height: 100%;
  width: 100%;
}

.viewportCanvasPanning {
  cursor: move;
}

.viewportCanvasStudentMove {
  cursor: pointer;
}

#viewportTooltip {
  background-color: #ff8;
  border:solid 2px rgb(170, 0, 0);
  border-radius: 5px;
  color: rgb(170, 0, 0);
  font-size: 0.3em;
  max-width: 15em;
  opacity: 0.8;
  padding: 0.3em;
  position: absolute;
  text-align: left;
  white-space: pre-wrap;
}

progress.healthbar {
  display: inline-block;
  max-height: 0.3em;
  max-width: 3em;
  vertical-align: middle;
}

/* background: */
progress.healthbar::-webkit-progress-bar {background-color: red; width: 100%;}
progress.healthbar {background-color: red;}

/* value: */
progress.healthbar::-webkit-progress-value {background-color: green !important;}
progress.healthbar::-moz-progress-bar {background-color: green !important;}
progress.healthbar {color: green;}

.studentInfo {
  display: inline-block;
  height: 100%;
  background-color: rgb(180, 180, 180);
  color: #000;
  font-family: 'Roboto', sans-serif;
  margin-left: 0.2em;
  padding: 0px 5px 0px 5px;
  text-align: left;
  width: 25%;
  vertical-align: top;
}

.studentInfo .entityName {
  color: rgb(170, 0, 0);
  font-family: chiller;
  font-size: 1.65em;
}

#studentInfoTabPane {
  font-size: 0.55em;
}

.studentInfo .entityStatLabel,
.studentInfo .entityStatValue {
  color: black;
}

.studentInfo .entityStatNotMax,
.clipboardTeacherInjured,
.teacherStatNotMax {
  color: rgb(170, 0, 0);
}

.entityAlmostDead {
  color: rgb(224, 0, 0);
  display: inline-block;
  font-weight: bold;
  animation: scaleHealth 0.5s ease-in-out infinite;
}

@keyframes scaleHealth {
  0% { transform: scale(1); }
  50% { transform: scale(2); }
  100% { transform: scale(1); }
}

.studentInfoInventoryList {
  padding: 2px;
}

.studentInfoInventoryList li {
  list-style-type: none;
}

.studentStatusIcon {
  display: inline-block;
  height: 1.5em;
  width: 1.5em;
}
.studentShoppingStatusIcon {
  display: inline-block;
  height: 1.25em;
  margin-left: 0.5em;
  vertical-align: bottom;
  width: 1.25em;
}

.inventoryItem {
  display: inline-block;
  width: 100%;
}

.inventoryItemText {
  float: left;
}

.equippedInventoryItem {
  color: rgb(170, 0, 0);
}

.equippedItemLabel {
  font-size: 0.65em;
}

.inventoryItemEquipButton, .inventoryItemUseButton {
  float: right;
  font-size: 0.7em;
}

.inventoryItemDropButton {
  float: right;
  font-size: 0.7em;
}

/** Buttons that should look like standard 3D buttons */

.inventoryItemEquipButton .pdg-flat-button,
.inventoryItemUseButton .pdg-flat-button,
.inventoryItemDropButton .pdg-flat-button,
.shoppingPrevStudent.pdg-flat-button,
.shoppingNextStudent.pdg-flat-button,
.shoppingItemBuyButton.pdg-flat-button,
.shoppingItemSellButton.pdg-flat-button,
.shoppingItemHelpButton.pdg-flat-button {
  background: threedface;
  border: 1px solid;
  border-color: threedhighlight threedshadow threedshadow threedhighlight;
  color: black;
  cursor: pointer;
  margin-left: 3px;
  padding: 2px;
}

.dialog-buttons .pdg-flat-button:hover,
.inventoryItemEquipButton .pdg-flat-button:hover,
.inventoryItemUseButton .pdg-flat-button:hover,
.inventoryItemDropButton .pdg-flat-button:hover,
.shoppingPrevStudent.pdg-flat-button:hover,
.shoppingNextStudent.pdg-flat-button:hover,
.shoppingItemBuyButton.pdg-flat-button:hover,
.shoppingItemSellButton.pdg-flat-button:hover,
.shoppingItemHelpButton.pdg-flat-button:hover {
  cursor: pointer;
  font-weight: bold;
}

.pdg-flat-button:focus {
  outline: 5px auto rgb(94, 158, 214);
  font-weight: bold;
}

.shoppingItemBuyButton, .shoppingItemSellButton, .shoppingItemHelpButton {
  display: inline-block;
}

.shoppingItemBuyButton.pdg-flat-button-disabled {
  color: grey;
}

.shoppingItemBuyButton.pdg-flat-button-disabled:hover {
  color: grey;
  font-weight: normal;
}


.inventoryItemEquipButton .pdg-flat-button-active,
.inventoryItemUseButton .pdg-flat-button-active,
.inventoryItemDropButton .pdg-flat-button-active,
.shoppingPrevStudent.pdg-flat-button-active,
.shoppingNextStudent.pdg-flat-button-active,
.shoppingItemBuyButton.pdg-flat-button-active,
.shoppingItemSellButton.pdg-flat-button-active,
.shoppingItemHelpButton.pdg-flat-button-active {
  border-color: threedshadow threedhighlight threedhighlight threedshadow;
}

.helpScreen {
  background-color: rgba(0, 0, 0, 0.75);
  color: yellow;
  text-align: left;
  vertical-align: middle;
}

.helpTitle {
  color: rgb(170, 0, 0);
  margin-bottom: 0.25em;
  text-align: center;
}

.helpListDiv {
  font-size: 0.70em;
  padding-left: 10%;
}

.helpSection {
  display: inline-block;
  padding: 1%;
  width: 45%;
}

.helpSubheading {
  color: rgb(170, 0, 0);
  font-size: 0.85em;
  margin: 0 0 0.5em 0;
  text-align: left;
}

.helpList {
  display: table;
  margin-top: 0px;
  text-align: center;
}

.helpItem {
  display: table-row;
}

.helpList dt,
.helpList dd {
  display: table-cell;
  font-size: 0.75em;
}

.helpList dt {
  color: orange;
  text-align: left;
  width: 8em;
}

.helpList dd {
  text-align: left;
}

.statusAndSightingsPanel {
  background-color: rgb(180, 180, 180);
  border: 1px outset white;
  color: black;
  display: inline-block;
  font-size: 80%;
  height: 100%;
  text-align: left;
  white-space: pre-wrap;
  width: 70%;
}

.statusPanel {
  height: 5em;
}

.statusHidden, .tooltipHidden {
  display: none;
}

#sessionLog {
  background-color: rgb(180, 180, 180);
  border: 1px outset white;
  bottom: 1em;
  color: black;
  font-size: 80%;
  left: 1em;
  right: 1em;
  top: 1em;
  padding: 0.5em;
  position: absolute;
  white-space: pre-wrap;
}

#sessionLogButton {
  background-color: #777;
  border: solid 1px black;
  border-radius: 0.1em;
  color: black;
  cursor: pointer;
  left: calc(70% - 0.75em);
  height: 1em;
  position: absolute;
  top: calc(72% - 0.1em);
  width: 1em;
}

#sessionLogButton:hover {
  background-color: #888;
  border-color: #888;
  color: #444;
}

#statusMessages {
  max-height: 100%;
  overflow: scroll;
}

#finalStatusButton {
  color: rgb(170, 0, 0);
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  position: absolute;
}

.targetSighting {
  background-color: red;
  color: yellow;
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  margin-left: 5px;
  padding: 5px;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

.targetSighting:focus, .targetSighting:hover {
  font-weight: bold;
}

.buttonPanel {
  display: inline-block;
  height: 100%;
  margin-left: 0.2em;
  padding: 5px 5px 0 5px;
  text-align: left;
  vertical-align: top;
  white-space: pre-wrap;
  width: 25%;
}

.gameButton {
  background-size: 100%;
  cursor: pointer;
  display: inline-block;
  height: 1.5em;
  margin: 0 4px 4px 0;
  width: 1.5em;
}

/** The Attack Button */
#attackButton {
  background-image: url("data/gfx/ui/attackbutton_normal.png");
}
#attackButton:hover,
#attackButton:focus {
  background-image: url("data/gfx/ui/attackbutton_highlighted.png");
}
#attackButton.pdg-flat-button-active,
#attackButton.pdg-flat-button-disabled {
  background-image: url("data/gfx/ui/attackbutton_depressed.png");
}

/** The End Turn Button */
#endTurnButton {
  background-image: url("data/gfx/ui/stopbutton_normal.png");
}
#endTurnButton:hover,
#endTurnButton:focus {
  background-image: url("data/gfx/ui/stopbutton_highlighted.png");
}
#endTurnButton.pdg-flat-button-active {
  background-image: url("data/gfx/ui/stopbutton_depressed.png");
}


/** The Wait Button */
#waitButton {
  background-image: url("data/gfx/ui/waitbutton_normal.png");
}
#waitButton:hover,
#waitButton:focus {
  background-image: url("data/gfx/ui/waitbutton_highlighted.png");
}
#waitButton.pdg-flat-button-active {
  background-image: url("data/gfx/ui/waitbutton_depressed.png");
}

/** The Map Button */
#mapButton {
  background-image: url("data/gfx/ui/mapbutton_normal.png");
}
#mapButton:hover,
#mapButton:focus {
  background-image: url("data/gfx/ui/mapbutton_highlighted.png");
}
#mapButton.pdg-flat-button-active {
  background-image: url("data/gfx/ui/mapbutton_depressed.png");
}

/** The Options Button */
#optionsButton {
  background-image: url("data/gfx/ui/optionbutton_normal.png");
}
#optionsButton:hover,
#optionsButton:focus {
  background-image: url("data/gfx/ui/optionbutton_highlighted.png");
}
#optionsButton.pdg-flat-button-active {
  background-image: url("data/gfx/ui/optionbutton_depressed.png");
}

/** The Clipboard Button */
#clipboardButton {
  background-image: url("data/gfx/ui/clipboardbutton_normal.png");
}
#clipboardButton:hover,
#clipboardButton:focus {
  background-image: url("data/gfx/ui/clipboardbutton_highlighted.png");
}
#clipboardButton.pdg-flat-button-active {
  background-image: url("data/gfx/ui/clipboardbutton_depressed.png");
}

/** The Pickup Button */
#pickupButton {
  background-image: url("data/gfx/ui/inventorybutton_normal.png");
}
#pickupButton:hover,
#pickupButton:focus {
  background-image: url("data/gfx/ui/inventorybutton_highlighted.png");
}
#pickupButton.pdg-flat-button-active {
  background-image: url("data/gfx/ui/inventorybutton_depressed.png");
}

/** The Fountain Button */
#fountainButton {
  background-image: url("data/gfx/ui/fountainbutton_normal.png");
}
#fountainButton:hover,
#fountainButton:focus {
  background-image: url("data/gfx/ui/fountainbutton_highlighted.png");
}
#fountainButton.pdg-flat-button-active {
  background-image: url("data/gfx/ui/fountainbutton_depressed.png");
}

/** The Food Button */
#foodButton {
  background-image: url("data/gfx/ui/foodbutton_normal.png");
}
#foodButton:hover,
#foodButton:focus {
  background-image: url("data/gfx/ui/foodbutton_highlighted.png");
}
#foodButton.pdg-flat-button-active {
  background-image: url("data/gfx/ui/foodbutton_depressed.png");
}

/** The Phone Button */
#phoneButton {
  background-image: url("data/gfx/ui/phonebutton_normal.png");
}
#phoneButton:hover,
#phoneButton:focus {
  background-image: url("data/gfx/ui/phonebutton_highlighted.png");
}
#phoneButton.pdg-flat-button-active {
  background-image: url("data/gfx/ui/phonebutton_depressed.png");
}

/** The Extinguisher Button */
#extinguisherButton {
  background-image: url("data/gfx/ui/extinguisherbutton_normal.png");
}
#extinguisherButton:hover,
#extinguisherButton:focus {
  background-image: url("data/gfx/ui/extinguisherbutton_highlighted.png");
}
#extinguisherButton.pdg-flat-button-active {
  background-image: url("data/gfx/ui/extinguisherbutton_depressed.png");
}

/** The BS Button */
#bsButton {
  background-image: url("data/gfx/ui/bullshitbutton_normal.png");
}
#bsButton:hover,
#bsButton:focus {
  background-image: url("data/gfx/ui/bullshitbutton_highlighted.png");
}
#bsButton.pdg-flat-button-active {
  background-image: url("data/gfx/ui/bullshitbutton_depressed.png");
}

/** The Trade Button */
#tradeButton {
  background-image: url("data/gfx/ui/tradebutton_normal.png");
}
#tradeButton:hover,
#tradeButton:focus {
  background-image: url("data/gfx/ui/tradebutton_highlighted.png");
}
#tradeButton.pdg-flat-button-active {
  background-image: url("data/gfx/ui/tradebutton_depressed.png");
}

/** The Help Button */
#helpButton {
  background-image: url("data/gfx/ui/helpbutton_normal.png");
}
#helpButton:hover,
#helpButton:focus {
  background-image: url("data/gfx/ui/helpbutton_highlighted.png");
}
#helpButton.pdg-flat-button-active {
  background-image: url("data/gfx/ui/helpbutton_depressed.png");
}

/** The VP Button */
#vpButton {
  background-image: url("data/gfx/ui/victorypointsbutton_normal.png");
}
#vpButton:hover,
#vpButton:focus {
  background-image: url("data/gfx/ui/victorypointsbutton_highlighted.png");
}
#vpButton.pdg-flat-button-active {
  background-image: url("data/gfx/ui/victorypointsbutton_depressed.png");
}

.moveButton {
  background-color: #555;
  border: solid 1px #999;
  border-radius: 5px;
  height: 40px;
  position: absolute;
  width: 40px;
}

#northButton {
  background-image: url("data/gfx/ui/arrow-up.png");
  left: 35px;
  top: 0;
}

#westButton {
  background-image: url("data/gfx/ui/arrow-west.png");
  left: 10px;
  top: 45px;
}

#eastButton {
  background-image: url("data/gfx/ui/arrow-east.png");
  left: 60px;
  top: 45px;
}

#southButton {
  background-image: url("data/gfx/ui/arrow-south.png");
  left: 35px;
  top: 90px;
}

#turnLeftButton {
  background-image: url("data/gfx/ui/arrow-turn-left.png");
  right: 55px;
  top: 45px;
}

#turnRightButton {
  background-image: url("data/gfx/ui/arrow-turn-right.png");
  right: 5px;
  top: 45px;
}

.mainTarget {
  color: #fff;
  font-weight: bold;
}

.leftControls {
  position: fixed;
  left: 0px;
  top: 40%;
}

.rightControls {
  position: fixed;
  right: 0px;
  top: 40%;
}


/* Styles for Dialogs */

.dialog-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.dialog-overlay-wait {
  cursor: wait;
}

.dialog-base {
  background-color: #888;
  border: 0.1em solid rgb(170, 0, 0);
  border-radius: 0.2em;
  color: rgb(170, 0, 0);
  font-family: chiller;
  font-size: 1em;
  left: 25%;
  padding: 0.25em;
  position: absolute;
  right: 25%;
  text-align: center;
  top: 15%;
}

.dialog-base.dialog-wide {
  left: 10%;
  right: 10%;
}

.dialog-title {
  font-weight: bold;
}

.dialog-buttons {
  padding-top: 0.25em;
}

div.dialog-buttons div.pdg-flat-button {
  display: inline-block;
  padding-right: 1em;
}

div.dialog-buttons div.pdg-flat-button-disabled {
  cursor: none;
  opacity: 0.5;
}

#endgame {
  color: rgb(170, 0, 0);
  font-family: chiller;
  max-width: 800px;
}

div.endgame {
  margin-left: 4em;
  margin-right: 4em;
  padding: 0.25em;
  background-color: #aaab;
}

#endgame h1, #endgame h2, #endgame h3 {
  margin-bottom: 0.25em;
  margin-top: 0.25em;
}

#end-game-stats {
  text-align: left;
}

#endgame progress {
  margin-left: 0.25em;
}