@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&display=swap');

* {
	max-height:			100000px;
}

html {
	font-family:	'Merriweather', serif;
	font-size:		16pt;
	margin:			0 !important ;
	padding:			0 ;
	--DarkBG:		#663333;
	--LightBG:		#ffffff;
	--MediumFG:		#cc9966;
	--MediumHL:		#eb8;
	--LinkWidth:	25%;
	--ResizeWidth:	1.7em;
	--ResizeCount: 3;
	--colorsets:	4;
}

body {
  background-color:	black;
  margin:				0 ;
  position:				relative;
  top:					0 ;
  left:					0 ;
  width:					100%;
	--format:			wide;
	--LogoSize:			2.5rem;
	--PageFG:			#cc9966;
	--NavFG:				#ccb090;
	--ContentBG:		#000000;
	--ContentFG:		#cc9966;
	--ContentBorder:	#904848;
	--ContentLink:		#e8b888;
	--ContentVisited:	#ccb090;
	--ContentHover:	rgba(255,255,255,0.3);
	--PanelBG:			#000000;
	--PanelFG:			#cc9966;
	--PanelLink:		#e8b888;
	--PanelVisited:	#ccb090;
	--PanelHover:		rgba(255,255,255,0.3);
}
body[colorset~="2"] {
	--PageFG:			#ffffff;
	--ContentBG:		#ffffff;
	--ContentFG:		#402020;
	--ContentBorder:	#888888;
	--ContentLink:		#000000;
	--ContentVisited:	#606060;
	--ContentHover:	rgba(0,0,0,0.1);
	--PanelBG:			#ffffff;
	--PanelFG:			#502828;
	--PanelLink:		#633;
	--PanelVisited:	#c96;
	--PanelHover:		rgba(0,0,0,0.125);
}
body[colorset~="3"] {
	--PageFG:			#ffffff;
	--ContentBG:		#000000;
	--ContentFG:		#ffffff;
	--ContentBorder:	#cc9966;
	--ContentLink:		#ffe0c0;
	--ContentVisited:	#e0c0a0;
	--PanelBG:			#000000;
	--PanelFG:			#ffffff;
}
body[colorset~="4"] {
	--PageFG:			#a0a0a0;
	--ContentBG:		#000000;
	--ContentFG:		#a0a0a0;
	--ContentBorder:	#a74;
	--ContentLink:		#ca8;
	--ContentVisited:	#988;
	--PanelBG:			#000000;
	--PanelFG:			#a0a0a0;
}

#heading, div.heading {
	background-color: var(--DarkBG);
	color:				var(--MediumFG);
	text-align:			center;
	margin:				0;
	padding-top:		0.250em;
	padding-bottom:	0.250em;
	padding-right:		var(--LogoSize); /* Balance the left-floated logo to make centering work */
	box-shadow:			inset  0.5em 0.5em 1em   -0.5em rgba(0,0,0,100%),
							inset -0.5em 0.5em 1.5em -0.5em rgba(0,0,0,50%),
							0 0.3em 0.3em rgba(0,0,0,75%);
}

#heading span, div.heading span {
/*	font-family:		Arial, Helvetica, sans-serif; */
	font-size:			calc(2.0rem * var(--Scale,1)) !important;
	line-height:		calc(2.75rem * var(--Scale,1)) !important;
	text-shadow:		0.05em 0.05em 0.1em rgb(0,0,0);
}

#heading a span.prefix {
	font-size:			100%;
	display:				inline;
}

body[format~="narrow"] #heading a span.prefix {
	display:				none;
}

body[format~="tall"] #heading {
	clear:				left;
	padding-right:		0;
}

#heading span a {
	color:				inherit;
	text-decoration:	none;
}

.hidden {
	display:			none;
}

table {
	font-size:	inherit;
	margin:		0;
}

#content {
	background-color:	var(--ContentBG);
	color:			var(--ContentFG);
	z-index:			0;
}

#content .text {
	background-color:	var(--ContentBG);
}

.sitemenu {
	font-size:		95%;
	text-align:		center;
	width:			100%;
	z-index:			0;
}

.inlinebutton {
	border-style:	solid;
	border-width:	0.1em;
	border-color:	var(--ContentBorder);
	border-radius:	0.3em;
	background-color: rgba(256,256,256,20%);
	display:			inline-block;
/*	font-family:	Arial, Helvetica, sans-serif; */
	padding-left:	0.25em;
	padding-right:	0.25em;
}
.inlinebutton a {
	text-decoration:	none;
}
.inlinebutton a:link {
	color:			var(--ContentLink);
}
.inlinebutton:hover {
	background-color: rgba(0,0,256,50%);
	border-color:	var(--MediumHL);
}
#content .inlinebutton a:visited {
	background-color: inherit;
	color:			inherit;
}
#content .inlinebutton:hover a {
	background-color: transparent;
	color:			var(--MediumHL);
}

div.pushbutton {
/*	border:			0.2em #aa8855 outset;*/
	border:			0.2em var(--ContentBorder) outset;
	padding:			0.3em;
	display:			inline-block;
	cursor:			pointer;
	user-select:	none;
	color:			var(--PanelLink);
	background-color: var(--PanelBG);
	font-family:	inherit;
	font-size:		inherit;
}
div.pushbutton:hover {
	background-color:	var(--PanelHover);
}
div.pushbutton:hover a, #content div.pushbutton a:hover {
	background-color:	transparent;
}
div.pushbutton:active {
	border-style:		inset;
	color:				var(--PanelVisited);
	background-color:	var(--PanelHover);
}

div.centered {
	text-align:		center;
}

.inset {
	margin-left:		10%;
	margin-right:		10%;
}

body[tall] .inset {
	margin-left:		2%;
	margin-right:		2%;
}

.picker {
	background-color:	var(--PanelBG);
	border:				0.10em solid var(--MediumFG);
	padding:				0.20em 0.20em 0.20em 0.20em;
	line-height:		120%;
}
.storylink a:link, .bodytable a:link {
	color:	var(--PanelLink);
}

.picker .title {
	margin-bottom:	0.5em;
	text-align:		center;
}

.popup {
	box-shadow:		0.2em 0.2em 0.4em 0 rgba(0,0,0,0.4), 0.1em 0.1em 0.2em 0 rgba(0,0,0,0.6);
	display:			none;
	z-index:			3;
}
.popup table {
	z-index:			3;
}

.fader {
	display:		none;
	position:	fixed;
	left:			0;
	top:			0;
	width:		100vw;
	height:		100vh;
	background:	rgba(64,64,64,0.50);
	z-index:		2;
}

.separate {
	margin-top:		0.20em;
}

.bodytable {
	background-color: var(--PanelBG);
	color:			var(--PanelFG);
	margin-top:		0.75em;
	margin-bottom:	0.75em;
	border:			0.10em solid var(--ContentBorder);
	width:			100%;
	margin-left:	0;
	padding-left:	0.2em;
	padding-top:	0.2em;
	padding-bottom: 0.25em;
}
/*
 * Links in the table of story names are formatted with the first line 1 em to 
 * the left of any continuation lines and with extra space above the first (or
 * only) line and after the last (or only) line, so that titles that wrap are
 * easily distinguished from separate titles. The links (i.e., titles) get a
 * a little extra padding for improved appearance when the background changes
 * in response to hovering.
 */
.bodyelement {
	padding-left:	1.5em;
	text-indent:	-1.0em;
	line-height:	110%;
	padding-bottom:	0.2em;
	padding-top:		0.1em;
}

.bodyelement a {
	padding-left:		0.3em;
	padding-right:		0.3em;
	text-decoration:	none;
}

#authorlist {
	margin-left:5px
}
/* storytable and storylink are for the Sanitaria Springs page, where the 
   link entries include images on the desktop page. */
.storytable {
	background-color: var(--ContentBG);
	display:				flex;
	flex-direction:	row;
	flex-wrap:			wrap;
	justify-content:	center;
/*	align-items:		flex-start; */
	padding-top:		1.0em;
/*	width:				95%;
	margin-left:		2.5%; /**/
}

.storylink {
	background-color: var(--PanelBG);
	color:				var(--PanelFG);
	border: 				solid 1px black;
	margin:				4px;
	text-align:			center;
	width:				var(--LinkWidth);
	padding-top:		0.5em;
	padding-bottom:	0.5em;
}

.storylink a {
	display:				inline-block;
	min-width:			6.6em;
	padding-top:		0.2em;
}

.storylink a div {
	width:				6.4em;
	height:				4.8em;
	margin-left:		calc((100% - 6.4em) / 2);
	padding-bottom:	0.5em;
	display:				flex;
	align-items:		flex-end;
	justify-content:	center;
}

body[mobile] .storylink a div {
	height:				0.8em;
}
.storylink img {
	max-height:		4.8em;
	max-width:		6.4em;
	vertical-align: bottom;
	display:	none;
}
body[desktop] .storylink img {
	display:	inline;
}

a:link {
	color:	var(--ContentLink);
}
.storylink a:link, .bodytable a:link, .picker a:link {
	color:	var(--PanelLink);
}
a:visited {
	color: var(--ContentVisited);
}
.storylink a:visited, .bodytable a:visited, .picker a:visited {
	color: var(--PanelVisited);
}
.navbar a:link, .navbar a:visited {
	color:	var(--NavFG);
}
.storylink a:link, .storylink a:visited {
	text-decoration:	none;
}
a:link .ul, a:visited .ul {
	text-decoration:	underline;
}
#content a:hover {
	background-color:	var(--ContentHover);
}
#content .storylink a:hover, #content .bodytable a:hover, #content .picker a:hover {
	background-color: var(--PanelHover);
}
/* The Sanitaria Springs page has a black background, so there we highlight
   with a white text color instead of a background color change. */
/*#content .storylink a:hover {
	background-color:	inherit;
	color:				#e8e8e8;
} /**/

.topbanner {
	background-color: black;
/*	font-family:		Arial, Helvetica, sans-serif; */
	font-size:			0.9em;
	position:			fixed;
	top:					0;
	left:					0;
	right:				0;
	z-index:				1;
}

header, footer {
	text-align:			center;
	margin-bottom: 	1em;
	padding:				0.25em 0.25em 0.25em 0.25em;
/*	padding-top:		0.25em;
	padding-bottom:	0.25em;*/
}

header {
	background-color:	transparent;
	color:				var(--ContentFG);
	margin-top:			1em;
}

header img.SanitariaSprings {
	height:				calc(1.5 * 5.15em);
	width:				calc(1.5 * 8em);
}

header p {
	text-align:			left;
}

footer {
	background-color:	var(--ContentBG);
	color:				var(--ContentFG);
	margin-top:			1.25em;
}

.copyright img {
	height:			1.67em;
	padding: 0.4em 0.4em 0.7em 0.4em;
	vertical-align: middle;
/*	background: radial-gradient(rgba(255,255,255,255,1.0),rgba(255,255,255,0.0)); */
	background: left 50% top 35% radial-gradient(circle, rgba(255,255,255,0.95), transparent 75%, transparent 100%) no-repeat border-box;
}

header div, footer div {
	margin-top:		0.75em;
	margin-bottom:	0.75em;
}

/*
 * Navigation Bar (navbar).
 * The navigation bar has two distinct parts: a logo and a menu.
 * A standard height of 5rem (50px) is used for all boxes.
 */

.navbar {
  color: var(--MediumFG);
  /* User-select causes chaos when clicking buttons, so disable it */
  user-select: none;
}


/*
 * The Navigation Bar Logo.
 * The logo is an image floated to the left of the page.
 */

.navbar.logo {
  float: left;
}

.navbar.logo * {
  display:			inline-block; 
  height:			var(--LogoSize);
  width:				var(--LogoSize);
  padding-bottom:	0.4rem;
  padding-top:		0.1rem;
  padding-left:	0.1rem;
}
body[format~="narrow"]:not([format~="tall"]) .navbar.logo * {
	padding-top:		0.2rem;
}

/*
 * The Navigation Bar Menu
 * The menu is made up of several sets of rules gathered into subsections below.
 */

/*
 * Navbar menu basic and generic styling. 
 */

.navbar.menu ul {
  /* Styling for the menu lists. */
  background-color: black;
  color:		var(--NavFG) ;
  padding:	0;
  padding-top: 0.25rem;
  margin:	0;
  list-style: none;
  display:	none; /* Hide menus by default. They are shown when needed (see later rules). */
}

.navbar.menu li >*:first-child {
  /* Styling for the the menu items.
   * The first child of the list item is the displayed as the content of the menu item.
   */
  display: flex;
  align-items: center;
  padding: 0 0.5em;
  height: 2.5rem;
}

.navbar.menu a img {
  /* Images (third party logos etc.) are displayed at twice the size of the text. */
  height:2em;
  width:	2em;
}

.navbar.menu a.patreon img {
  /* Except the over-wide Patreon logo, which we shrink. */
  height:1.25em;
  width:	calc(1.25em * 4.911);
}


/*
 * The navbar menu search item contains a magnifying glass icon that's defined here.
 */

.navbar.menu .search {
  /* Define a 1x1em box to contain the icon. The shapes in the icon are drawn
   * with child elements placed relative (anchored) to this box. The 1x1em box
   * simplifies the calculation of size and placement in the children.
   */
  position: relative;
  width: 1em;
  height: 1em;
  font-size: 2em;       /* Make the icon twice the size of the text it accompanies. */
  margin-right: 0.2em;
}
.navbar.menu .search::before {
  /* The glass (a round box) */
  content: "";
  position: absolute;
  box-sizing: border-box;
	border: 0.15em solid;
	border-radius: 50%;
  width: 0.75em;
	height: 0.75em;
  top: 0.05em;
  left: 0.05em;
}
.navbar.menu .search::after {
  /* The handle (a rotated box) */
  content: "";
  position: absolute;
  border-top: 0.15em solid;
  width: 0.35em;
  transform: rotate(45deg);
  top: 0.7em;
  right: 0.05em;
}
@media (hover: none) {
	body {
		--type:		mobile;
	}
}
@media (hover: hover) {
	body {
		--type:		desktop;
	}
}


/*
 * The navbar menu has two display styles: Horizontal and vertical.
 */

/*
 * Navbar horizontal menu style rules.
 * The horizontal style is used when the page is wide enough and supports hovering.
 * In this case the top-level menu is always shown. Submenus are shown when hovered.
 */

/* The min-width must be paired with the max-width of the vertical rules below. */
@media (min-width: 1072px) {
	body {
		--format:		wide;
		--menuLeftMgn:	0;
	}
}

body[format~="tall"] .topbanner,
body[format~="wide"] .topbanner {
	background-color: black;
}

body[format~="tall"] #content,
body[format~="wide"] #content {
	margin:			5.5rem 0 0 0;
	padding:			1rem 5% 0 5%;
}

/* Display the top-level menu horizontally */
body[format~="wide"] .navbar.menu >div >ul {
    display: flex;
}

body[format~="wide"] .navbar.menu #navmenu {
    padding-left:	var(--menuLeftMgn);
}

/* Highlight menu items as we hover over them */
body[format~="wide"] .navbar.menu li:hover {
    background-color: var(--DarkBG);
}
  
/* Display submenus when we hover over their parent */
body[format~="wide"] .navbar.menu li:hover >ul {
    display: block;
    position: absolute;
    box-shadow: 0 0 0.3em 0.15em rgba(0, 0, 0, 66%);
}

body[format~="wide"] .navbar.menu a:hover,
body[format~="wide"] .navbar.menu .button:hover,
body[format~="wide"] .navbar.menu li li >*:first-child:hover {
    outline: 1px solid;
}


/*
 * Navbar vertical menu style.
 * The vertical style is used when the horizontal style cannot be (eg. on a tablet).
 * In this case the top-level menu is shown (opened) only after a menu icon is clicked.
 * This style is more complex than horizontal and requires several sets of rules.
 */

/*
 * Navbar vertical menu icon.
 * The icon can be styled as a hamburger or a cross. The hamburger is used when 
 * the menu is closed and is clicked to open it. The cross is used when the menu
 * is open and is clicked to close it. Both icons are styled here.
*/

.navbar.menu .hamburger,
.navbar.menu .close {
  /* Define a 1x1em box to contain the icon. The shapes in the icon are drawn
   * with child elements placed relative (anchored) to this box. The 1x1em box
   * simplifies the calculation of size and placement in the children.
   */
  position: relative;
  top:		0em;
  width:		1em;
  height:	1em;
  font-size: 2.5rem;  /* The 1x1em box will be 2.5x2.5rem. */
  display:	none;    /* Hide the icons by default. They are shown when needed. */
}
/* body[format~="narrow"]:not([format~="tall"]) .navbar.menu .hamburger,
body[format~="narrow"]:not([format~="tall"]) .navbar.menu .close {
	top:	0.5rem;
}

/* Black background so the close icon looks like part of the menu */
.navbar.menu .close {
  background-color: black
}

.navbar.menu .hamburger div,
.navbar.menu .close div {
  /* Common styling for the bars in the hamburger and close icons */
  position: absolute;
  background-color: currentColor;
  border-style: solid;
  border-width: 0.05em 0;
  border-radius: 0.05em;
  top: 0.45em;  /* Place all bars in the center by default */
}

.navbar.menu .hamburger div {
  /* Hamburger specific bar styling */
  /* Width and horizontal placement. Subsequent rules adjust vertical placement. */
  width: 0.64em;
  left: 0.18em;
}
.navbar.menu .hamburger div:nth-child(2) { top: 0.19em }
.navbar.menu .hamburger div:nth-child(3) { top: 0.71em }

.navbar.menu .close div {
  /* Close (cross) specific bar styling */
  /* Width and horizontal placement. The subsequent rule adjusts rotation to form a cross. */
  width: 0.8em;
  left: 0.1em;
  transform: rotate(45deg)
}
.navbar.menu .close div:nth-child(2) { transform: rotate(135deg) }

.navbar.menu .close::before,
.navbar.menu .close::after {
 /* When the close icon is displayed, we darken the page around it. We do this by
  * overlaying two semi-transparent boxes. These boxes are defined as part of the
  * close icon, so clicking them counts as a click on the close icon. Common styling
  * is defined here. Subsequent rules place a box below or to the left of the icon
  * respectively (the order is important to avoid darkening the menu itself).
  */
	content: "";
	position: fixed;
	background-color: rgba(0,0,0,50%);
}
.navbar.menu .close::before { height: calc(100vh - 1em); width:  100vw; right: 0; top: 1em }
.navbar.menu .close::after  { width:  calc(100vw - 1em); height: 1em;   right: 1em }

/*
 * Navbar vertical menu style rules.
 */

/* The max-width must be paired with the min-width of the horizontal rules above. */
@media (max-width: 1071px) {
	body {
		--format:	narrow;
	}
}

body[format~="narrow"]:not([format~="tall"]) .topbanner {
	background-color: transparent;
}

body[format~="tall"] #navbar {
	height:			var(--LogoSize);
}

body[format~="narrow"]:not([format~="tall"]) #content {
	margin:			3.0rem 0 0 0;
	padding:			1rem 5% 0 5%;
}


/* Float the menu to the right. This embeds the menu icon into the page header. */
body[format~="narrow"] .navbar.menu {
    float: right;
}

body[format~="narrow"] .navbar.menu #navmenu {
    overflow-y:	auto;
}

/* Show the hamburger or close icon depending on whether the menu icon is clicked */    
body[format~="narrow"] .navbar.menu >div:not([data-clicked]) .hamburger,
body[format~="narrow"] .navbar.menu >div[data-clicked] .close {
    display: block;
}

/* The top-level menu is shown in front of the page on the right. */
body[format~="narrow"] .navbar.menu >div >ul {
    position:	absolute;
    top:			2.5rem;
	 max-height:calc(100vh - 2.5rem);
    right:		0;
    width:		13em;
}

/* Show menus if their parent has been clicked. */
body[format~="narrow"] .navbar.menu *[data-clicked] >ul {
    display: block;
}

/* Indent the submenu items */
body[format~="narrow"] .navbar.menu li li >:first-child {
    padding-left: 2.5em;
}
  
/* Highlight buttons and menu items as we hover over them */
body[format~="narrow"] .navbar.menu .button,
body[format~="narrow"] .navbar.menu li >*:first-child {
    margin:		1px;
}
body[format~="narrow"] .navbar.menu .button:hover,
body[format~="narrow"] .navbar.menu li >*:first-child:hover {
    background-color: var(--DarkBG);
    outline:	1px solid var(--MediumFG);
}
  
/*
 * Chevron icons are used to show when a menu item is a button to open a submenu.
 * They also show if the button has been clicked or not (ie, if the submenu is open
 * or not) by pointing right or down respectively.
 */

body[format~="narrow"] .navbar.menu .chevron {
    /* Define a 1x1em box to contain the icon. The shapes in the icon are drawn
     * with child elements placed relative (anchored) to this box. The 1x1em box
     * simplifies the calculation of size and placement in the children.
     */
    position: relative;
    width: 1em;
    height: 1em;
    margin-left: 0.75em;
}
body[format~="narrow"] .navbar.menu .chevron::before {
    /* The chevron is made from the corner of the border of a box */
    content: "";
    position: absolute;
    box-sizing: border-box;
    border-style: solid;
    border-width: 0.2em 0.2em 0 0;
    border-radius: 0.05em 0;
    height: 0.8em;
    width: 0.8em;
    left: 0.1em;
    top: 0.1em;
    transform: rotate(45deg); /* Default to right pointing chevron */
}

body[format~="narrow"] .navbar.menu li[data-clicked] .chevron::before {
    transform: rotate(135deg); /* Down pointing chevron */
}

/*
 **************** End of navbar rules ****************
 */

.resize {
	color:			#996633;
	font-size:		1.25em;
	margin-top:		calc((3rem - var(--ResizeWidth) - 0.3em) / 2);
	margin-left:	0.5em;
	width:			calc(var(--ResizeWidth) * var(--ResizeCount) + 1.2em);
	float:			left;
	text-align:		center;
}

.resize div {
	border-style:	solid;
	border-width:	0.1em;
	border-color:	var(--MediumFG);
	border-radius:	0.3em;
	background-color: rgba(256,256,256,15%);
	display:			inline-block;
	position:		relative;
	padding:			0;
	margin:			0 0.1em;
	width:			var(--ResizeWidth);
	height:			var(--ResizeWidth);
	text-align: 	center;
	vertical-align: middle;
	cursor:			pointer;
	user-select:	none;
}
body[format~="narrow"]:not([format~="tall"]) .resize div {
	margin-top:		0.25rem;
}

.resize div:hover {
	background-color: rgba(256,256,256,30%);
}

img.resizeimg {
	width:			var(--ResizeWidth);
	height:			var(--ResizeWidth);
	margin:			0;
	user-select:	none;
}

img.resizeimg:hover {
	user-select:		none;
}

.resize div .button_fader {
	position:		absolute;
	top:				-0.3em;
	left:				-0.1em;
	margin:			0;
	width:			var(--ResizeWidth);
	height:			var(--ResizeWidth);
	display:			none;
	background:		rgba(64,64,64,0.50);
	z-index:			3;
	cursor:			not-allowed;
}
body[format~="tall"] .resize div .button_fader,
body[format~="wide"] .resize div .button_fader {
	top:				-0.05em;
}
.resize div .button_fader[active] {
	display:			block;
}