/* GlkOte default stylesheet - for Inform 7 with changes by Dannii
 * Designed by Andrew Plotkin <erkyrath@eblong.com>
 * <http://eblong.com/zarf/glk/glkote.html>
 * 
 * This CSS stylesheet is in the public domain. Do whatever you want
 * with it.
 */

:root {
  --glkote-mono-family: "Source Code Pro", monospace;
  --glkote-prop-family: "Lora", Georgia, serif;
  --glkote-buffer-bg: #fff;
  --glkote-buffer-fg: #222;
  --glkote-buffer-reverse-bg: #222;
  --glkote-buffer-reverse-fg: #ddd;
  --glkote-grid-bg: #fff;
  --glkote-grid-fg: #222;
  --glkote-grid-reverse-bg: #222;
  --glkote-grid-reverse-fg: #ddd;
}

#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. */
  background: var(--glkote-buffer-bg);
  box-sizing: border-box;
  margin: 0px;
  position: absolute;
}

.BufferWindow {
  color: var(--glkote-buffer-fg);
  font-family: var(--glkote-prop-family);
  font-size: 15px;
  line-height: 1.4;
  overflow-x: hidden; /* hide the horizontal scrollbar */
  padding: 6px 10px 6px 10px;
  scrollbar-gutter: stable; /* preserve space for the vertical scrollbar */
  z-index: 1;
}

/* Make the scrollbar transparent grey */
.BufferWindow::-webkit-scrollbar {
  width: 10px;
}
.BufferWindow::-webkit-scrollbar-thumb {
  background: rgba(50%,50%,50%,20%);
}

.BufferWindow .reverse {
  background: var(--glkote-buffer-reverse-bg);
  color: var(--glkote-buffer-reverse-fg);
}

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

.GridWindow {
  background: var(--glkote-grid-bg);
  color: var(--glkote-grid-fg);
  overflow: hidden;
  font-family: var(--glkote-mono-family); /* necessary! */
  font-size: 14px;
  padding: 6px 10px 6px 10px;
  z-index: 2;
}

.GridWindow.reverse {
  background: var(--glkote-grid-reverse-bg);
}

.GridWindow .reverse {
  background: var(--glkote-grid-reverse-bg);
  color: var(--glkote-grid-reverse-fg);
}

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

.InvisibleCursor {
  /* This provides the padding 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. */
  position: relative;
  /* Commented out until https://github.com/erkyrath/glkote/issues/42 has a proper solution */
  /*padding-bottom: 14px;*/
}

.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;
  background: #603010;
  color: #FFFFCC;
  opacity: 0.5;
  padding: 2px 6px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

.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;
  font-weight: bold;
}

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

.BufferWindow .Input {
  font-family: var(--glkote-prop-family);
  font-size: 15px;
}

.GridWindow .Input {
  font-family: var(--glkote-mono-family); /* necessary! */
  font-size: 14px;
}

/* 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: var(--glkote-buffer-bg);
}

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

span.Style_normal {
}

span.Style_emphasized {
  font-style: italic;
}

span.Style_preformatted {
  font-family: var(--glkote-mono-family);
}

span.Style_header {
  font-weight: bold;
}

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

span.Style_subheader {
  font-weight: bold;
}

span.Style_alert {
  font-weight: bold;
}

span.Style_note {
  font-style: italic;
}

span.Style_blockquote {
  background: #FFF0C0;
}

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

.Style_user1 {
}

.Style_user2 {
}

/* End of GlkOte default stylesheet. */