/*
Full stylesheet for Quixie player.
Includes glkote.css and dialog.css
Documents theme (white background, black text)
*/
/* Style.css */
body {
	font-family: "Tomorrow", sans-serif;
	font-size: 100%;
	-webkit-text-size-adjust: none;
	margin: 0px;
	background: #fff;
	color: #000;
}

main > header {
	position: fixed;
	width: 100%;
	top: 0px;
	height: 72px; /* header height */
	margin: 0px;
	z-index: 3;
	background: #edc;
	border-bottom: 1px solid #edc;
}

main > header h1 {
	display: inline-block;
}

main > header p {
	display: inline-block;
	padding-left: 20px;
}

main > footer {
	position: fixed;
	width: 100%;
	bottom: 0;
	height: 20px;
	background: #edc;
}

article {
	font-family: "B612 Mono", monospace;
	position: absolute;
	width: 100%;
	top: 72px; /* header height */
	bottom: 20px;
	margin: 0;
}

#column {
	position: relative;
	width: 640px; /* column width */
	height: 100%;
}

#gameport {
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;
	margin: 0px;
}

.BufferLine img {
	margin: 0 auto 10px auto;
}


a,
.sndlink {
	text-decoration: none;
	color: #c50;
}

a:visited,
.sndlink:visited {
	text-decoration: none;
	color: #a30;
}

a:hover,
.sndlink:hover {
	text-decoration: underline;
	color: #e70;
}

@media screen and (max-width: 900px) {
	main > footer {
		font-size: 85%;
	}
}

@media screen and (max-width: 600px) {
	/* This stanza kicks in on phone-sized mobile browsers (but not tablet-sized
	ones). It narrows the column, including the header and footer content,
	to 320px. If you want to support this layout, you'll probably have to
	add more declarations here to simplify or shrink your header and footer
	content. */
	main > header h1 {
		font-size: 140%;
	}
	main > footer {
		font-size: 75%;
	}
	#column {
		width: 100%;
	}
}

/* Dialog.css */
/* dialog_screen is a translucent rectangle that greys out the entire root
   element (the game beneath the dialog box).
*/
#dialog_screen {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #808080;
  opacity: 0.5;
}

/* dialog_frame is an invisible pane that fills the root element. It exists
   so that the dialog can easily be centered in it.
*/
#dialog_frame {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* dialog is the dialog div itself. It is displayed near the top of
   dialog_frame. The auto margins keep it horizontally centered.
*/
#dialog {
  position: relative;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  background: white;
  border: 4px solid #aaa;
  -webkit-box-shadow: 1px 1px 15px #222;
  -moz-box-shadow: 1px 1px 15px #222;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

#dialog .DiaCaption {
  margin: 16px;
}

#dialog .DiaInput {
  margin: 16px;
}

#dialog input {
  width: 100%;
}

#dialog .DiaBody {
  margin: 16px;
  clear: both;
}

#dialog select {
  width: 100%;
}

#dialog button {
  margin-left: 8px;
}

#dialog .DiaButtons {
  margin: 16px;
  text-align: right;
}

#dialog .DiaButtonsFloat {
  margin-left: 16px;
  margin-right: 16px;
  float: right;
}

#dialog .DiaDisplayText {
  height: 200px;
  padding: 4px 8px;
  overflow: scroll;   /* vertical scrollbar is mandatory */
  overflow-x: hidden; /* but horizontal scrollbar is forbidden */
  font-size: 14px;
  white-space: pre-wrap;
  background: #edc;
  font-weight: bold;
}

/* Glkote.css */
#windowport {
  width: 100%;
  height: 100%;
}

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

#errorpane.WarningPane {
  background: #b0b0ff;
  border-bottom: 3px solid #6060ff;
  color: #000;
}

#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;
}

.BufferWindow {
  overflow: scroll;   /* vertical scrollbar is mandatory */
  overflow-x: hidden; /* but horizontal scrollbar is forbidden */
  padding: 6px 10px 6px 10px;
}

.BufferLine {
}

.GridWindow {
  background: #edc;
  color: #000;
  overflow: hidden;
  font-family: "B612 Mono", monospace; /* necessary! */
  font-size: 14px;
  padding: 6px 10px 6px 10px;
}

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

.GridLine > :last-child {
  text-align: 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;
  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;
  color: #000;
  font-family: "B612 Mono", monospace;
  font-size: 100%;
}

.BufferWindow .Input {
}

.GridWindow .Input {
  font-family: "B612 Mono", monospace; /* necessary! */
}

/* 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: monospace;
}

.Style_header {
  font-weight: bold;
}

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

.Style_subheader {
  font-weight: bold;
}

.Style_alert {
  font-weight: bold;
}

.Style_note {
  font-style: italic;
}

.Style_blockquote {
  background: #fff0c0;
}

.Style_input {
  font-weight: bold;
}

.Style_user1 {
	display: block;
	padding: 0 65px 0 0;
	text-decoration: none;
	width: 100%;
	text-align: center;
}

.Style_user2 {
	color: #09f;
}