/* GlkOte stylesheet for Quixe/I7 Template
 * Designed by Andrew Plotkin <erkyrath@eblong.com>
 * <http://eblong.com/zarf/glk/glkote.html>
 * <http://eblong.com/zarf/glulx/quixe/>
 * 
 * This CSS stylesheet is in the public domain. Do whatever you want
 * with it.
 */

#gameport {
  /* The host page is supposed to define the gameport's layout, but
     this property is needed to prevent possible overflow scrollbars.
     We'll enforce it here. */
  overflow: hidden;
}

#windowport {
  width: 100%;
  height: 100%;
}

#errorpane {
  position: absolute;
  top: 0px;
  width: 100%;
  background: #FFA0A0;
  border-bottom: 3px solid #FF4040;
}

#errorpane.WarningPane {
  background: #B0B0FF;
  border-bottom: 3px solid #6060FF;
}

#errorpane:hover {
  background: rgba(255, 160, 160, 0.5);
  border-bottom: 3px solid rgba(255, 64, 64, 0.3);
}

#errorpane.WarningPane:hover {
  background: rgba(176, 176, 255, 0.5);
  border-bottom: 3px solid rgba(96, 96, 255, 0.3);
}

#errorcontent {
  font-size: 1.1em;
  padding: 1em;
  text-align: center;
}

#loadingpane {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 20%;
}

.WindowFrame {
  /* This class provides the default background color of windows. You
     can change that, but don't touch the position or margin. */
  position: absolute;
  margin: 0px;
  background: #FFF4DD;
}
.DarkTheme .WindowFrame {
  background: #382800;
  color: #FFF4EE;
}

.BufferWindow {
  overflow: scroll;   /* vertical scrollbar is mandatory */
  overflow-x: hidden; /* but horizontal scrollbar is forbidden */
  font-family: "Libre Baskerville", serif;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 16px 10px 16px;
}

.BufferLine {
  white-space: pre-wrap; /* required for spaces to work right */
}

.BlankLineSpan {
  /* Work around an annoying corner case: if the BlankLineSpan is
     followed by an input line, we don't need or want the placeholder
     space. Suppress it. */
  display: none;
}

.BlankLineSpan:only-child {
  /* No input line, so no suppress. */
  display: inline;
}

.GridWindow {
  background: #D8C8A8;
  overflow: hidden;
  font-family: "Courier Prime", "Courier", monospace; /* necessary! */
  font-size: 15px;
  padding: 8px 10px 7px 10px;
}
.DarkTheme .GridWindow {
  background: #644C22;
  color: white;
}

.GridLine {
  white-space: pre; /* required for spaces to work right */
}

.InvisibleCursor {
  /* We need this wrapper to perform the measurement on the ZWJ in
     the InvisibleCursor. */
  position: relative;
}

.BufferLine:last-child {
  /* This provides the margin below the last line of text (and the input
     prompt). Without this, they'd be flush against the bottom of the
     window, which would be ugly. Do not modify this CSS class. */
  margin-bottom: 14px;
}

.HasNoInputField .BufferLine:last-child .BlankLineSpan {
  /* If the last line in a buffer window is blank, and there is no
     char/line input occurring, we suppress the blank line in the DOM.
     (The div still exists, but it has no visible contents, so it
     collapses.) This aids fixed-height buffer wins which contained
     exactly the right number of lines. */
  display: none;
}

.HasNoInputField .BufferLine:last-child .InvisiblePos {
  /* We also have to suppress the measurement ZWJ in the InvisibleCursor. */
  display: none;
}

.MorePrompt {
  /* This describes the "More" prompt that flashes in the bottom right corner
     of a window when it needs paging. */
  font-weight: bold;
  position: absolute;
  pointer-events: none;
  background: #603010;
  color: #FFFFCC;
  opacity: 0.5;
  padding: 2px 6px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}
.DarkTheme .MorePrompt {
  background: #FDA;
  color: #420;
}

.PreviousMark {
  /* This describes the small horizontal mark that appears in a window
     when it needs paging. */
  position: absolute;
  background: #B09888;
  height: 2px;
  width: 12px;
  top: 0px;
  right: 0px;
}

.Input {
  /* This class mimicks the Style_input class. It also eliminates the 
     usual decoration of an <input> field, as much as possible. */
  border: none;
  margin: 0px;
  padding: 0px;
  outline-width: 0px;
  outline-style: none;
  background: none;
  color: #300000;
  font-weight: bold;
}
.DarkTheme .Input {
    color: #FEE;
}

.BufferWindow .Input {
  font-family: "Libre Baskerville", serif;
  font-size: 14px;
}

.GridWindow .Input {
  font-family: "Courier Prime", "Courier", monospace; /* necessary! */
  font-size: 15px;
}

.Input:focus::placeholder {
  /* Hide "Tap here to type" placeholder when the input is focused */
  color: transparent;
}

/* The following are used for image alignment (in buffer windows). */

.ImageMarginLeft {
  float: left;
  margin-right: 0.5em;
}

.ImageMarginRight {
  float: right;
  margin-left: 0.5em;
}

.ImageInlineDown {
  vertical-align: text-top;
}

.ImageInlineUp {
  vertical-align: text-bottom;
}

.ImageInlineCenter {
  vertical-align: middle;
}

.FlowBreak {
  clear: both;
}

.GraphicsWindow canvas {
  display: block;
  background-color: white;
}

/* The following are the standard Glk styles. */

.Style_normal {
}

.Style_emphasized {
  font-style: italic;
}

.Style_preformatted {
  font-family: "Courier Prime", "Courier", monospace;
}

.Style_header {
  font-weight: bold;
}

.BufferWindow .Style_header {
  font-size: 17px;
}

.Style_subheader {
  font-weight: bold;
}

.Style_alert {
  font-weight: bold;
}

.Style_note {
  font-style: italic;
}

.Style_blockquote {
  background: #FFF0C0;
}

.Style_input {
  font-weight: bold;
  color: #300000;
}
.DarkTheme .Style_input {
  color: #FEE;
}

.Style_user1 {
}

.Style_user2 {
}

/* End of GlkOte default stylesheet. */