/* ===========================================================================
   www.getlazarus.org - the stylesheet of the site

   Every rule the site has is here, in the order the separate files it was
   made from used to be loaded, so a later rule still wins over an earlier one
   exactly as it did. mobile.css is loaded after this file and holds only what
   changes on a narrow screen.

   Font sizes are kept to five: 12px, 13px, 15px, 20px and 26px (docs/plan.txt).

   Contents
     1. The gutter of line numbers beside a text box
     2. The site: the page, its header and footer, and the words of a page
     3. The page editor, its panels and its history
     4. The steps which carry the words of a page round the curve of the header
     5. Dialogs
     6. Code samples
     7. The sign in page and the administration pages
     8. The consoles and the forum
     9. The Codebot reference
   =========================================================================== */


/* ===========================================================================
   1. The gutter of line numbers beside a text box
   (was linedtextarea.css)
   =========================================================================== */

/**
 * jQuery Lined Textarea Plugin
 *   http://alan.blog-city.com/jquerylinedtextarea.htm
 *
 * Copyright (c) 2010 Alan Williamson
 *
 * Released under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Usage:
 *   Displays a line number count column to the left of the textarea
 *   
 *   Class up your textarea with a given class, or target it directly
 *   with JQuery Selectors
 *   
 *   $(".lined").linedtextarea({
 *   	selectedLine: 10,
 *    selectedClass: 'lineselect'
 *   });
 *
 */

.linedwrap {
	border: 1px solid #c0c0c0;
	padding: 3px;
}

.linedtextarea {
	padding: 0px;
	margin: 0px;
}

.linedtextarea textarea, .linedwrap .codelines .lineno {
	font-size: 13px;
	font-family: monospace;
	line-height: normal !important;
}

.linedtextarea textarea {
	padding-right:0.3em;
	padding-top:0.3em;
	border: 0;
}

.linedwrap .lines {
	margin-top: 0px;
	width: 50px;
	float: left;
	overflow: hidden;
	border-right: 1px solid #c0c0c0;
	margin-right: 10px;
}

.linedwrap .codelines {
	padding-top: 5px;
}

.linedwrap .codelines .lineno {
	color:#AAAAAA;
	padding-right: 0.5em;
	padding-top: 0.0em;
	text-align: right;
	white-space: nowrap;
}

.linedwrap .codelines .lineselect {
	color: red;
}


/* ===========================================================================
   2. The site: the page, its header and footer, and the words of a page
   (was home.css)
   =========================================================================== */

/* The scrollbar is always there, so that the page does not move sideways
   over its background when its length changes. */

html {
	overflow-y: scroll;
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;	
	font-weight: 400;	
	color: black;
	background: 
		url(//cache.getlazarus.org/images/top.png) 50% 0 repeat-x,
		url(//cache.getlazarus.org/images/bottom.png) 50% 0 repeat;
}

a {
	cursor: pointer;
	color: #e26004;
	text-decoration: none;
	border-bottom: 2px dotted transparent;
	font-weight: 500;
	transition: border-bottom .2s ease-out;
}

a:hover {
	border-bottom: 2px dotted #e26004;
	transition: border-bottom .2s ease-out;
}

#breadcrumb a {
	opacity: 0.7;
	transition: opacity .3s ease-out;
}


#breadcrumb a:hover {
	opacity: 1;
	transition: opacity .3s ease-out;
}

#editor li {
	opacity: 0.7;
	transition: opacity .3s ease-out;
}

#editor li:hover {
	opacity: 1;
}

/* The download button. It was a picture once, and is drawn here instead so
   that it and the sign in button beside it are made the same way. */

#download {
	position: absolute;
	display: flex;
	box-sizing: border-box;
	cursor: pointer;
	left: 640px;
	top: 33px;
	width: 138px;
	height: 35px;
	z-index: 20;
	color: white;
	font-family: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 36px;
	letter-spacing: .2px;
	text-transform: uppercase;
	text-shadow: 0 1px 0 rgba(190, 50, 0, .55);
	white-space: nowrap;
	user-select: none;
	border-left: 1px solid #dc8205;
	border-bottom: 1px solid #c95305;
	background: linear-gradient(to bottom, #e79e00 0%, #fd6400 100%);
	opacity: 0.75;
	transition: opacity .3s ease-out;
}

#download span {
	flex: 1 1 auto;
	text-align: center;
}

#download i {
	flex: 0 0 40px;
	font-size: 20px;
	line-height: 34px;
	text-align: center;
	text-shadow: none;
	color: #f0f8fb;
	border-left: 1px solid #e07905;
	background: linear-gradient(to bottom, #e7b000 0%, #fd8600 100%);
}

#download:hover {
	opacity: 1;
	transition: opacity .3s ease-out;
}

/* The sign in button, drawn to match the download button beside it. The
   lettering of that button is a picture, and Bebas Neue is the face nearest
   to it. */

#signin {
	position: absolute;
	left: 528px;
	top: 33px;
	width: 104px;
	height: 35px;
	z-index: 20;
	font-family: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
	font-size: 15px;
	font-weight: 400;
	font-style: normal;
	letter-spacing: .2px;
	text-transform: uppercase;
	white-space: nowrap;
}

#signin a, #signin a:hover {
	color: white;
	font-weight: 400;
	font-style: normal;
	border: 0;
	text-shadow: 0 1px 0 rgba(190, 50, 0, .55);
}

#signin .signin-button, #signin .signin-button:hover {
	display: flex;
	box-sizing: border-box;
	height: 35px;
	line-height: 36px;
	border-left: 1px solid #dc8205;
	border-bottom: 1px solid #c95305;
	background: linear-gradient(to bottom, #e79e00 0%, #fd6400 100%);
	opacity: 0.75;
	transition: opacity .3s ease-out;
}

#signin:hover .signin-button {
	opacity: 1;
}

#signin .signin-button span {
	flex: 1 1 auto;
	text-align: center;
}

#signin .signin-button i {
	flex: 0 0 40px;
	font-size: 20px;
	line-height: 34px;
	text-align: center;
	text-shadow: none;
	color: #f0f8fb;
	border-left: 1px solid #e07905;
	background: linear-gradient(to bottom, #e7b000 0%, #fd8600 100%);
}

/* The menu of somebody who is signed in, which opens beneath the button
   while the pointer is over either of them. */

#signin .signin-menu {
	display: none;
	position: absolute;
	left: 0;
	top: 35px;
	width: 100%;
	box-sizing: border-box;
	border-left: 1px solid #dc8205;
	border-bottom: 1px solid #c95305;
	background: #fd6400;
	box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
}

#signin:hover .signin-menu {
	display: block;
}

#signin .signin-menu a, #signin .signin-menu a:hover {
	display: block;
	padding: 0 11px;
	line-height: 30px;
	border-top: 1px solid #e07905;
	transition: background .2s ease-out;
}

#signin .signin-menu a:hover {
	background: #e79e00;
}


/* The page shown for an address which names nothing. It is set to the left,
   beside the curve of the header, in the orange of the banner buttons. */

.lost {
	margin: 4px 0 40px 0;
}

.lost-code {
	display: inline-block;
	margin: 0 0 -6px -3px;
	font-family: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
	font-size: 150px;
	line-height: 130px;
	letter-spacing: 4px;
	color: #e07902;
	background: linear-gradient(to bottom, #f0b000 0%, #fd6400 85%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 3px 0 rgba(160, 60, 0, .25));
	user-select: none;
}

/* The words run as wide as the curve of the header leaves room for, as the
   words of any other page do. */

.lost .para {
	color: #444;
}

.lost-pascal {
	display: inline-block;
	margin: 6px 0 18px 0;
	padding: 12px 18px 12px 14px;
	font-family: 'Inconsolata', monospace;
	font-size: 15px;
	line-height: 20px;
	color: #e8e8e8;
	background: #2b2b2b;
	border-left: 4px solid #e07902;
	border-radius: 5px;
	box-shadow: 1px 2px 6px rgba(0, 0, 0, .25);
}

.lost-pascal b {
	font-weight: 700;
	color: #ffb347;
}

.lost-pascal i {
	font-style: normal;
	color: #9ed3a6;
}

.lost-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
}

.lost-links a, .lost-links a:hover, .lost-links button {
	padding: 0 16px;
	font-family: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
	font-size: 15px;
	font-weight: 400;
	font-style: normal;
	line-height: 34px;
	letter-spacing: .2px;
	text-transform: uppercase;
	color: white;
	text-shadow: 0 1px 0 rgba(190, 50, 0, .55);
	border: 0;
	border-left: 1px solid #dc8205;
	border-bottom: 1px solid #c95305;
	background: linear-gradient(to bottom, #e79e00 0%, #fd6400 100%);
	opacity: 0.85;
	transition: opacity .3s ease-out;
}

.lost-links a:hover, .lost-links button:hover {
	opacity: 1;
}

/* The button which creates a page stands out from the one which goes back. */

.lost-links button {
	height: 35px;
	border-top: 0;
	border-right: 0;
	cursor: pointer;
	opacity: 1;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
}

.lost code {
	padding: 1px 6px;
	font-family: 'Inconsolata', monospace;
	font-size: 15px;
	color: #c66c04;
	background: #fceddc;
	border-radius: 4px;
	overflow-wrap: anywhere;
}


ul {
	list-style-type: none;
	padding: 0;
	padding-left: 10px;
}

#breadcrumb {
	height: 33px;
}

#breadcrumb>a {
	background: url(//cache.getlazarus.org/images/path.png) 100% 0 no-repeat;
	display: inline-block;
	float: left;
	font-weight: 400;
	font-size: 15px;
	color: white;
	line-height: 33px;
	font-style: normal;
	border-bottom: 0;
	padding-right: 30px;
	margin-left: -6px;
	opacity: 0.75;
}

#breadcrumb>a:hover {
	border-bottom: none;
}

#breadcrumb>a:last-child {
	font-weight: 400;
}

#breadcrumb>a:first-child {
	padding-left: 28px;
	background: url(//cache.getlazarus.org/images/home.png) 0 4px no-repeat,    url(//cache.getlazarus.org/images/path.png) 100% 0 no-repeat;
}

#box {
	position: absolute;
	top: 0;
	left: 0;
	margin-left: 0;
	width: 1000px;
	min-height: 100%;
	padding: 0;
	visibility: hidden;
}

#clouds {
	position: absolute;
	margin: 0;
	top: 68px;
	left: 0;
	width: 1000px;
	height: 279px;
}

#clouds.static {
    position: relative;
    background: url(//cache.getlazarus.org/images/lazarus-curve.png);
    z-index: 9;
    margin-top: -1px;
    pointer-events: none;
    /* background: url(//cache.getlazarus.org/images/clouds.gif); */
}

#wrapper {
	position: absolute;
	margin: 0;
	top: -1px;
	left: 0;
	width: 100%;
	min-height: 100%;
	/* background: url(//cache.getlazarus.org/images/page.png) 0 68px no-repeat; */
}

#page {
	height: auto;
	min-height: 100%;
	width: 1000px;
	margin-bottom: 170px;
	padding-left: 10px;
}

#content {
	margin: 10px;
	margin-right: 30px;
}

blockquote {
	clear: both;
	border-left: 4px solid rgba(224, 121, 2, 1);
	padding-left: 8px;
	margin-left: 5px;
	margin-right: 5px;
	background: linear-gradient(to right, #D6D6D6 0%, rgba(255, 255, 255, 0) 100%);
}

h1 {
	font-size: 26px;
	font-weight: 700;
	line-height: 30px;
	margin: 0;
	margin-top: 5px;
	margin-bottom: 5px;
	background: url(//cache.getlazarus.org/images/bar.png) 0 95% no-repeat;
}

h2 {
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
	margin: 0;
	margin-top: 15px;
	margin-bottom: 10px;
	background: url(//cache.getlazarus.org/images/bar.png) 0 95% no-repeat;
}

h3 {
	font-size: 15px;
	line-height: 26px;
	font-weight: 700;
	margin: 0;
	margin-top: 14px;
	margin-bottom: 5px;
	background: url(//cache.getlazarus.org/images/bar.png) 0 90% no-repeat;
}

h4 {
	display: inline;
	margin-right: 0.5em;
	font-size: 15px;
	font-weight: 700;
}

p {
	margin: 0;
	margin-bottom: 1em;
}

.code {
	font-family: 'Inconsolata';
	font-style: normal;
}

code {
	font-family: 'Inconsolata';
	background: lightgrey;
	padding-left: 5px;
	padding-right: 5px;
}

a.extern {
	background: url(//cache.getlazarus.org/images/extern.png)  100% 2px no-repeat;	 
	padding-right: 15px;
}

.para {
	margin-bottom: 1em;
}

.leftout {
	color: #323232;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	float: left;
	clear: left;
	margin: 20px;
	margin-left: 0;
	display: inline-block;
	width: auto;
	max-width: 250px;
	padding: 5px;
	padding-left: 10px;
	font-weight: 500;
	font-style: italic;
	box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.2);}

.rightout {
	color: #323232;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	float: right;
	clear: right;
	margin: 10px;
	display: inline-block;
	width: auto;
	max-width: 250px;
	padding: 5px;
	padding-left: 10px;
	font-weight: 500;
	font-style: italic;
	box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.2);
}	

a.fancybox, a.fancybox:hover {
	padding: 4px;
	border: 1px solid rgb(179, 179, 179);
	background: white;
	overflow: auto;
	display: inline-block;
	margin:  4px;
	box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.2);
}

.fancybox-overlay a:hover {
	border: none;
}

h1 a, h2 a, h3 a, h4 a {
	color: black;
	border: none;
	padding-left: 18px;
	margin-left: -18px;
	font-style: normal;
	font-weight: 700;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
	border: none;
	background: url(//cache.getlazarus.org/images/link.png) 0 50% no-repeat;
}

.my-custom-theme {
	border-radius: 5px; 
	border: 2px solid #000;
	background: #4c4c4c;
	color: #fff;
}

.my-custom-theme .tooltipster-content {
	font-family: Arial, sans-serif;
	font-size: 13px;
	line-height: 16px;
	padding: 8px 10px;
}


blockquote.notes {
	padding: 7px;
	display: inline-block;
	min-width: 50%;
	margin-top: 0;
	padding-right: 10px;
}

blockquote.notes>div {
	font-weight: 700;
}

blockquote.notes>ul {
	padding-left: 20px;
	list-style-type: square;
	margin: 0;
	margin-top: 5px;
	margin-bottom: 5px;
}

/* What a terminal showed. It is not a code sample and has no editor, but it
   is drawn on the same ground as one: charcoal, with the orange edge down its
   side and the same corners (source.css). */

pre.terminal {
	font-family: 'Inconsolata';
    font-weight: 700;
    background: #2b2b2b;
    color: white;
    border: 0;
    border-left: 4px solid #e07902;
    border-radius: 5px;
    padding: 8px;
	text-shadow: 1px 1px #424242;
}

pre.terminal strong {
	color: #6FF16F;
}

.gallery {
  height: 110px;
  overflow: auto;
  overflow-y: hidden;
  padding-top: 14px;
}

.gallery a {
  margin-top: 4px;
  padding-top: 8px;
}

.showcase a {
  margin-top: 8px;
}

.showcase.big {
	height: 450px;
}

#footer {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 1000px;
	height: 150px;
	margin-top: -170px;
	background-color: rgba(224, 121, 2, 1);
	background-image: url(//cache.getlazarus.org/images/footer_shadow.png);
	background-repeat: repeat-x;
}

.footLink {
	opacity: 0.5;
	transition: opacity .2s ease-out;
}

.footLink:hover {
	opacity: 1;
	transition: opacity .2s ease-out;
}

#footer>div {
	float: left;
	width: 33%;
	height: 100%;
}

#footer>div:nth-child(2) {
	background: rgba(0, 0, 0, 0.05);
	width: 34%;
}

#footer>div div {
	background: rgba(0, 0, 0, 0.2);
	margin: 5px;
	margin-top: 10px;
	margin-bottom: -7px;
	padding: 5px;
	padding-left: 13px;
	border-radius: 5px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	font-weight:  700;
	color: white;
	text-shadow: 1px 1px black;
	font-size: 15px;
	opacity: 0.7;
}

#footer>div a {
	color: white;
	margin-left: 24px;
	font-size: 15px;
	line-height: 20px;
	font-style: normal;
}

#footer>div a:hover {
	border-bottom: none;
}

.listing tr td:first-child {
	background: rgba(0, 0, 0, 0.04);
	width: 150px;
	border-left: 3px solid rgb(224, 121, 2);
	padding: 8px;
	vertical-align: top;
}

.listing tr td:last-child {
	background: rgba(0, 0, 0, 0.08);
	padding: 8px;
	border-radius: 10px;
}

.fancybox-close {
	border: none;
}

#dialogContent .subtitle {
	text-align: center;
	margin: 8px;
}

.snip {
	display: inline;
	font-family: 'Inconsolata';
	font-weight: 600;
	border: 2px dotted #BABABA;
	background: white;
	padding-left: 5px;
	padding-right: 5px;
	margin-left: 5px;
	margin-right: 5px;
	color: #383838;
}

#videoSpacer {
	width: 800px;
	height: 20px;
}

#videoCaption {
	width: 100%;
	height: 63px;
	background: url(//cache.getlazarus.org/images/player-captions.png) 0 100% repeat-x;
	background-color: #fef2c1;
	border: 1px solid rgb(223, 221, 197);
	border-radius: 6px;
	position: relative;
	clear: both;
}

#videoTitle {
	font-weight: 700;
	font-size: 20px;
	position: absolute;
	padding: 4px;
	padding-left: 26px;
	padding-right: 8px;
	top: -16px;
	left: 8px;
	border: 1px solid rgb(208, 207, 193);
	background: url(//cache.getlazarus.org/images/player-captions.png) 0 50% repeat-x;
	border-radius: 6px;
}

#videoCaption img {
	position: absolute;
	top: -26px;
	left: -15px;
}

#videoMessage {
	margin: 15px;
	margin-top: 25px;
}

#videoScrubber {
	width: 100%;
	position: relative;
}

#videoControl {
	float: left;
	width: 20px;
	height: 20px;
	margin-right: 5px;
	cursor: pointer;
	background: url(//cache.getlazarus.org/images/player-controls.png);
}

#videoSeek {
	float: left;
	width: 880px;
	height: 10px;
	background: #943D00;
	border-radius: 5px;
	margin-top: 5px;
	overflow: hidden;
}

#videoCursor {
	height: 10px;
	width: 0;
	background: #fc6800;
}

#videoRefresh {
	float: left;
	width: 20px;
	height: 20px;
	cursor: pointer;
	background: url(//cache.getlazarus.org/images/player-refresh.png);
}

#videoTime {
	float: right;
	line-height: 20px;
}

.deb, .zip {
    margin: 1em;
    background: #FFFFFF;
    height:  48px;
    border-radius: 4px;
    border: 1px solid transparent;
    overflow: hidden;
    display: inline-block;
	transition: border .4s ease-out;
}

.deb:hover, .zip:hover {
    border: 1px solid #C45A10;
	transition: border .4s ease-out;
}

#downloadLink {
    color:  white;
    display: block;
	background-color: #D2D2D2;
    background-repeat: no-repeat
}

.deb #downloadLink {
    background-image: url(//cache.getlazarus.org/images/deb-package.png);
}

.zip #downloadLink {
    background-image: url(//cache.getlazarus.org/images/package-generic-icon.png);
}

#downloadLink #downloadName  {
    font-family: 'Open Sans';
    line-height: 51px;
    margin-left: 48px;
    padding-right: 2em;
    border-left: 1px solid #DA7A37;
    text-indent: 14px;
    font-weight: 600;
    font-size: 15px;
    font-style: normal !important;
    text-shadow: 2px 1px rgba(0, 0, 0, 0.4);
    background: linear-gradient(to bottom, #FFBC24 0%, #CE9245 30%, #C45A10 70%);
}

ul.dots {
	list-style-type: disc;
	margin-left: 2em;
}

#galleryBlock {
    background-image: url(//cache.getlazarus.org/images/overhang.png);
    background-repeat: repeat-x;
    background-color: #D4D4D4;
    margin: -20px;
    margin-top: 0px;
    padding-bottom: 20px;
    padding-top: 10px;
    margin-bottom: 0;
    position: relative;
    top: 20px;
}    

img.icon {
	display: block; 
	width: 64px; 
	height: 64px;
}

span.icon {
	margin-left: 72px; 
	margin-top: -68px; 
	display: block;
}

pre#wrapped {
	white-space: pre-wrap; 
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word;
}

.vodbox {
	position: relative;
	overflow: hidden;
	border: 1px solid #E07902;
	width: 800px;
	height: 450px;
}

.vodbox .title {
    color: white;
    background: rgba(50, 45, 40, 0.8);
    text-shadow: 2px 2px black;
    line-height: 30px;
    font-size: 15px;
    font-family: 'Open Sans';
    position: absolute;
    z-index: 9;
	left: 0;
	top: 0;
	width: 100%;
	height: 30px;
    pointer-events: none;
    margin-top: -30px;
	transition: margin-top .2s ease-out;
}

.vodbox:hover .title {
    margin-top: 0;
	transition: margin-top .2s ease-out;
}


.vod {
	position: absolute;
    z-index: 8;
	left: 0;
	top: 0;
	width: 800px;
	height: 450px;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity .2s ease-out;
}

.vod:hover {
	opacity: 1;
	transition: opacity .2s ease-out;
}

.vodPlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 800px;
	height: 450px;
}

/* main banner */

#bannerContainer.main {
	position: absolute;
	display: block;
	width: 1000px;
	height: 280px;
	left: 0;
	top: 76px;	
	overflow: hidden;
}

#bannerContainer.main #bannerScroll {
	display: block;
	width: 10000px;
	height: 280px;
}

#bannerContainer.main #bannerScroll .bannerPage {
	position: relative;
	width: 1000px;
	height: 280px;
	float: left;
}

#bannerContainer.main #bannerScroll .linkBubble {
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    width: 310px;
    height:  100px;
    border-radius: 10px;
    position: absolute;
    top: 162px;
    left: 20px;
    text-indent: 20px;
	transition: color .2s ease-out;
	box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.75);
}

#bannerContainer.main #bannerScroll .linkBubble:hover {
    color: rgba(255, 255, 255, 1);
	transition: color .2s ease-out;
}

#bannerContainer #bannerDots {
	position: absolute;
	bottom: 10px;
	right: 10px;
	height: 16px;
	width: 300px;
}

#bannerContainer #bannerDots .dotButton {
	float: right;
	margin-left: 4px;
	cursor: pointer;
	border: 2px solid white;
	width: 14px;
	height: 14px;
	border-radius: 8px;
	box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
	background-color: rgba(0, 0, 0, 0.2);
	transition: background-color .3s ease-out;
}

#bannerContainer #bannerDots .dotButton:hover {
	background-color: rgba(255, 255, 255, 0.75);
	transition: background-color .3s ease-out;
}

#bannerContainer #bannerDots .dotButton.selected {
	cursor: default;
	background-color: white;
	transition: background-color .3s ease-out;
}

#bannerContainer.main #bannerScroll .linkBubble .bubbleIcon {
	display: block; 
	width: 64px; height: 64px;
	margin-left:  8px;
	margin-top: 20px;
}

#bannerContainer.main #bannerScroll .linkBubble .bubbleTitle {
	display: block;
	font-size: 20px;
	font-weight: 500;
	margin-top: -62px;
	margin-left: 65px;
}

#bannerContainer.main #bannerScroll .linkBubble .bubbleText {
	display: block;
	font-size: 26px;
	font-weight: 600;
	margin-left: 62px;
	margin-top: 4px;
}

/* secondary banner */

#bannerContainer.secondary {
    clear: both;
    position: relative;	
    margin: 0;
	display: block;
	width: 1000px;
	height: 212px;
	overflow: hidden;
    margin-left: -20px;
    top: -5px;
}

#bannerContainer.secondary #bannerScroll {
	display: block;
	width: 10000px;
	height: 212px;
}

#bannerContainer.secondary #bannerScroll .bannerPage {
	position: relative;
	width: 1000px;
	height: 212px;
	float: left;
}

/* mini banner */

#bannerContainer.mini {
	clear: both;
    position: relative;
    margin: 0;
    display: block;
    width: 1000px;
    height: 212px;
    overflow: hidden;
    margin-left: -20px;
    top: -170px;
    margin-bottom: -170px;
}

#bannerContainer.mini #bannerScroll {
	display: block;
	width: 10000px;
	height: 212px;
}

#bannerContainer.mini #bannerScroll .bannerPage {
	position: relative;
	width: 1000px;
	height: 212px;
	float: left;
}

.gallery a, .showcase a {
	border: 1px solid #505050;
	-webkit-transition: all 0.2s;
	transition: all 0.2s;

}

.gallery a:hover, .showcase a:hover {
	border: 1px solid #888888;
	transform: scale(1.15);
	padding-top: 8px;
}

.bullet { 
	list-style-type: square; 
	font-size: 15px; 
	margin-left: 2em; 
}

.bullet ul  { 
	list-style-type: circle;
	padding-left: 25px;
}

.hierarchy {
	margin-bottom: 1em;
}

.hierarchy span {
	margin-right: 0.5em;
	padding-left: 1em;
	padding-right: 1em;
	background: #ffff97;
	border-radius: 4px;
	border: 1px solid #d0ca00;
	color: gray;
}

.hierarchy span:last-child {
	font-weight: bolder;
	color: black;
}

.vjs-resolution-button .vjs-menu-icon:before {
  content: '\f110';
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
  font-size: 1.8em;
  line-height: 1.67em;
}

.vjs-resolution-button .vjs-resolution-button-label {
  font-size: inherit;
  line-height: 3em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  box-sizing: inherit;
}

.vjs-resolution-button .vjs-menu .vjs-menu-content {
  width: 4em;
  left: 50%; /* Center the menu, in it's parent */
  margin-left: -2em; /* half of width, to center */
}

.vjs-resolution-button .vjs-menu li {
  text-transform: none;
  font-size: inherit;
}

.guide {
    cursor: pointer;
    color: #e26004;
    text-decoration: none;
    border-bottom: 2px dotted #e26004;
    font-weight: 500;
}

#overview-gutter {
	position: absolute;
    background: white;
    left: 50%;
    top: 0;
    font-family: monospace;
    font-size: 4px;
    margin-left: -700px;
    white-space: pre;
    padding: 6px;
    border-radius: 8px;
    margin-top: 6px;
}

.tip-line {
	margin-left: 12px;
	font-family: monospace;
}

#footer>p#account {
	position: absolute;
	right: 14px;
	bottom: 4px;
	margin: 0;
	font-size: 12px;
	line-height: 16px;
	color: rgba(255, 255, 255, 0.7);
}

#footer>p#account a {
	color: white;
	font-style: normal;
}


/* ===========================================================================
   3. The page editor, its panels and its history
   (was editor.css)
   =========================================================================== */

ul#editor {
	color: #c66c04;
	list-style-type: none;
	padding-left: 10px;
	margin-top: 70px;
	margin-bottom: -10px;
	line-height: 21px;
	position: relative;
	z-index: 2;
}

ul#editor>li {
	display: inline-block;
	text-indent: 0;
	margin: 0;
	padding-right: 10px;
	padding-left: 5px;
	border-right: 1px solid #c66c04;
	opacity: 0.75;
}

ul#editor>li:last-child {
	border-right: 1px solid transparent;
}

ul#editor>li#edit {
	background: url(//cache.getlazarus.org/images/edit.gif) no-repeat;
	padding-left: 25px;
	border-right: 1px solid transparent;
}

ul#editor>li.hidden {
	display: none;
}

ul#editor>li a {
	font-weight: 500;
	font-style: normal;
}

.confirm {
	width: 500px;
	line-height: 40px;
	height: 40px;
	margin: 16px;
	margin-left: 9px;
	padding-left: 45px;
	border-radius: 10px;
	background: url(//cache.getlazarus.org/images/confirm.png) 7px 3px no-repeat;
	background-color: #fceddc;
	border: 1px solid #D2D1B2;
	position: relative;
	z-index: 3;
}

.confirm .button {
	cursor: pointer;
	text-align: center;
	display: inline-block;
	width: 76px;
	height: 26px;
	line-height: 26px;
	background: url(//cache.getlazarus.org/images/button.png) 0 0;
	position: absolute;
	top: 7px;
}

.confirm .button:hover {
	background: url(//cache.getlazarus.org/images/button.png) -76px 0;
}

.confirm .one {
	right: 94px;
}

.confirm .two {
	right: 10px;
}

div.hidden {
	display: none;
}

.confirm.hidden .button {
	display: none;
}

#wikititle {
	width: 500px;
	font-family: monospace;
	resize: none;
}

#wikieditor {
	width: calc(100% - 10px);
	height: 400px;
	font-family: monospace;
	resize: none;
}

#wrapToggle {
	cursor: pointer;
}

/* The panel shown while a page is being edited: Save and Cancel, History and
   Visual, and under them the slider which steps through the versions of the
   page. It is taller and wider than the other panels, so it is laid out by
   its contents. It is named by its id because the script which shows and
   hides the panels writes their class afresh each time. */

#editConfirm {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	box-sizing: border-box;
	width: auto;
	max-width: 600px;
	height: auto;
	min-height: 42px;
	padding: 7px 10px 7px 45px;
	line-height: 20px;
}

#editConfirm.hidden {
	display: none;
}

/* The question has a line to itself above the buttons, so that it is never
   broken over several beside them. */

#editConfirm .edit-ask {
	flex: 1 1 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#editConfirm .edit-buttons {
	display: flex;
	gap: 6px;
}

#editConfirm .button {
	position: static;
	flex: none;
	user-select: none;
}

#editConfirm .button.off {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

/* History or Visual, while it is the one open. */

#editConfirm .button.on {
	background-position: -76px 0;
	font-weight: 700;
}

/* The panel follows the page down: once it would leave the top of the window
   it is pinned there, so the way out of an edit is always in reach. */

#editConfirm[data-following] {
	position: fixed;
	z-index: 40;
	margin: 0;
	max-width: none;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
}

.editor-follow-space {
	height: 0;
}

.history-bar {
	flex: 1 1 100%;
	margin-top: 2px;
}

.history-bar[hidden] {
	display: none;
}

.history-track {
	position: relative;
	padding: 0 10px 2px 0;
}

.history-track input[type=range] {
	display: block;
	width: 100%;
	margin: 0;
	background: transparent;
	accent-color: #e07902;
}

.history-pips {
	position: relative;
	height: 14px;
	margin: 0 8px;
}

.history-pip {
	position: absolute;
	top: 2px;
	width: 9px;
	height: 9px;
	margin-left: -5px;
	background: #b8b8b8;
	border: 1px solid #a0a0a0;
	border-radius: 50%;
	transition: transform 0.1s ease-out;
}

.history-pip:hover {
	background: #c66c04;
	border-color: #c66c04;
	transform: scale(1.2);
}

.history-pip.is-chosen {
	background: #e07902;
	border-color: #c66c04;
	transform: scale(1.5);
}

.history-when {
	margin: 0;
	font-size: 13px;
	color: #555;
}

/* What a pip stands for, said beneath it while the pointer is over it. */

.history-tip {
	position: fixed;
	z-index: 60;
	padding: 3px 10px;
	font-size: 13px;
	line-height: 18px;
	white-space: nowrap;
	color: #ffd9a8;
	background: #333;
	border-radius: 5px;
	pointer-events: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

.history-tip[hidden] {
	display: none;
}

.history-tip::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: var(--tail, 50%);
	margin-left: -6px;
	border: 6px solid transparent;
	border-top: 0;
	border-bottom-color: #333;
}

/* The editing form. It is one editor until History is opened, when the
   version being read is put beside it, and Visual puts the version drawn as
   a page in place of both. */

.edit-panes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 14px;
	clear: both;
}

#edit-form.is-history .edit-panes {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

#edit-form.is-visual .edit-panes {
	display: none;
}

.edit-pane {
	min-width: 0;
}

.edit-pane[hidden], #edit-visual[hidden] {
	display: none;
}

.edit-content-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}

.edit-when {
	font-size: 13px;
	color: #555;
}

.edit-pane #wikititle, .edit-pane #pasttitle {
	box-sizing: border-box;
	width: 100%;
	max-width: 500px;
	font-family: monospace;
}

#pastcontent {
	width: calc(100% - 10px);
	height: 400px;
	font-family: monospace;
	resize: none;
}

/* The gutter of line numbers measures its box once, in pixels, when it is
   made. These let the box change width afterwards, as it does when the
   editor is halved to make room for the version beside it. */

.edit-panes .linedwrap {
	display: flex;
	box-sizing: border-box;
	width: auto !important;
	background: white;
}

.edit-panes .linedwrap .lines {
	float: none;
	flex: none;
}

.edit-panes .linedtextarea {
	flex: 1 1 auto;
	min-width: 0;
}

.edit-panes .linedtextarea textarea {
	box-sizing: border-box;
	width: 100% !important;
	outline: 0;
}

/* A version is read and copied from, and never written to. */

.edit-pane-past input, .edit-pane-past textarea, .edit-pane-past .linedwrap,
.edit-pane-now input[readonly], .edit-pane-now textarea[readonly] {
	background: #f1efe9;
}

#edit-visual {
	clear: both;
}

#visualpage {
	padding: 10px 14px;
	overflow-x: auto;
	background: white;
	border: 1px solid #c0c0c0;
	box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.12);
}

#visualpage img, #visualpage video {
	max-width: 100%;
	height: auto;
}

#diff {
	white-space: pre-wrap; 
}

#frame3d, #prior3d, #next3d {
  display: inline-block;
}

#prior3d, #next3d {
    position: relative;
    width: 60px;
    height: 60px;
    color: white;
    border-radius: 30px;
    font-size: 26px;
    line-height: 60px;
    background: #e07902;
    top: -205px;
    cursor: pointer;
    transition: background 0.2s;
}

#prior3d:hover, #next3d:hover {
    background: #e9b477;
    transition: background 0.2s;
}    

#prior3d {
    text-indent: -6px;
}

#next3d {
    text-indent: 3px;
}

#frame3d {
  display: inline-block;
  width: 800px;
  height: 420px;
  margin: 0;
  padding: 0;
  border: 0;
}

#template {
  display: inline-block;
  border: 2px dotted #e26004;
}

#blurb {
    background: #c0c0c024;
    border: 1px solid #b8b8b8;
    padding: 5px;
    border-radius: 10px;
}

#toc {
    float: left;
    margin-top: -130px;
    width: 190px;
    background: #c0c0c024;
    border: 1px solid #b8b8b8;
    padding: 1em;
    padding-left: 0;
    padding-bottom: 0;
    padding-top: 0.5em;
    margin-bottom: 2em;
}

#toc.mini {
    margin-top: 0;
}

#toc.plain .tocno  {
	display: none;
}

#toc > div {
    font-weight: bolder;
    text-align: center;
    margin-bottom: -0.6em;
}

#toc ul li a {
  font-weight: 400;
}

#toc ul ul {
  padding-left: 20px;
}

#opening {
    display: block;
    padding-left: 225px;
}

.block {
  padding-left: 4em;
}

ul#editor.none {
	min-height: 21px;
}


/* ===========================================================================
   4. The steps which carry the words of a page round the curve of the header
   (was wrap.css)
   =========================================================================== */

#page>span {
	display: block;
	width: 250px;
	height: 10px;
	float: right;
	clear: right;
}

#page>span:nth-child(3) {
	width: 100%; 
	height: 1px;
}

#page>span:nth-child(4) {
	width: 100%; 
	height: 60px;
}

#page>span:nth-child(5) {
	width: 650px;
}

#page>span:nth-child(6) {
	width: 554px;
}

#page>span:nth-child(7) {
	width: 492px;
}

#page>span:nth-child(8) {
	width: 446px;
}

#page>span:nth-child(9) {
	width: 401px;
}

#page>span:nth-child(10) {
	width: 364px;
}

#page>span:nth-child(11) {
	width: 330px;
}

#page>span:nth-child(12) {
	width: 303px;
}

#page>span:nth-child(13) {
	width: 280px;
}

#page>span:nth-child(14) {
	width: 254px;
}

#page>span:nth-child(15) {
	width: 231px;
}

#page>span:nth-child(16) {
	width: 210px;
}

#page>span:nth-child(17) {
	width: 197px;
}

#page>span:nth-child(17) {
	width: 186px;
}

#page>span:nth-child(18) {
	width: 164px;
}

#page>span:nth-child(19) {
	width: 152px;
}

#page>span:nth-child(20) {
	width: 133px;
}

#page>span:nth-child(21) {
	width: 114px;
}

#page>span:nth-child(22) {
	width: 100px;
}

#page>span:nth-child(23) {
	width: 86px;
}

#page>span:nth-child(24) {
	width: 75px;
}

#page>span:nth-child(25) {
	width: 57px;
}

#page>span:nth-child(26) {
	width: 43px;
}

#page>span:nth-child(27) {
	width: 31px;
}

#page>span:nth-child(28) {
	width: 19px;
}

#page>span:nth-child(29) {
	width: 7px;
}

#page>span:nth-child(30) {
	width: 7px;
}


/* ===========================================================================
   5. Dialogs
   (was dialog.css)
   =========================================================================== */

#dialogBackground {
	position: absolute;
	z-index: 10;
	background: rgba(0, 0, 0, 0.35);
	display: none;
}

#dialogBusy {
	position: absolute;
	width: 105px;
	height: 16px;
	top: calc(50% - 8px);
	left: calc(50% - 102px);
	display: none;
}

#dialogContainer {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

#dialogWindow {
	display: inline-block;
	min-width: 200px;
	max-width: 1000px;
	position: absolute;
	left: 50%;
	top: 50%;
	border: 1px solid rgba(0, 0, 0, 0.25);
	background-color: white;
    background-image: url(http://cache.dotaplayer.info/images/dialog-footer.png);
    background-size: 100% 38px;
    background-position: left bottom;
    background-repeat: no-repeat;
	box-shadow: 0 0 50px 10px rgba(0, 0, 0, 1);
	border-radius: 10px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

#dialogWindow.buttonsNone {
    background-image: none;
}

#dialogWindow #dialogTitle {
	color: black;
	text-shadow: 1px 1px rgba(0, 0, 0, 0.25);
	font-size: 15px;
	opacity: 0.75;
	background: rgba(192, 192, 192, 0.6);
	line-height: 29px;
	padding-left: 4px;
	border-radius: inherit;
	text-align: center;
	padding-right: 4px;
}

#dialogWindow.closable #dialogTitle {
	padding-right: 20px;
}

#dialogWindow #dialogClose {
	background-image: url(http://cache.dotaplayer.info/images/black-close.png);
	position: absolute;
	margin: 0;
	padding: 0;
	border: 0;
	width: 18px;
	height: 18px;
	top: 5px;
	right: 5px;
	cursor: pointer;
	opacity: 0.5;
	display: none;
}

#dialogWindow.closable #dialogClose {
	display: block;
}

#dialogWindow #dialogContent {
	margin-bottom: 35px;
	color: black;
	padding: 10px;
}

#dialogWindow #dialogContent {
	margin-bottom: 35px;
	color: black;
	padding: 10px;
}

#dialogWindow.buttonsNone #dialogContent {
	margin-bottom: 0;
}

#dialogWindow #cancelButton, #dialogWindow #acceptButton {
	position: absolute;
	margin: 0;
	padding: 0;
	bottom: 0;
	background: rgb(200, 200, 200);
	margin: 8px;
	width: 75px;
	height: 25px;
	cursor: pointer;
	line-height: 25px;
	text-align: center;
	color: black;
	border-radius: 6px;
	opacity:  0.5;
	box-shadow: inset -1px -1px 10px 2px rgba(0, 0, 0, 0.25);
}

#dialogWindow #cancelButton:hover, #dialogWindow #acceptButton:hover {
	opacity:  0.8;
}


#dialogWindow.buttonsNone #acceptButton {
	display: none;
}

#dialogWindow.buttonsNone #cancelButton {
	display: none;
}

#dialogWindow.buttonsAcceptCancel #acceptButton {
	display: inherit;
	right: 80px;
}

#dialogWindow.buttonsAcceptCancel #cancelButton {
	display: inherit;
	right: 0;
}

#dialogWindow.buttonsAccept #acceptButton {
	display: inherit;
	right: 0;
}

#dialogWindow.buttonsAccept #cancelButton {
	display: none;
}

#dialogWindow.buttonsCancel #acceptButton {
	display: none;
}

#dialogWindow.buttonsCancel #cancelButton {
	display: inherit;
	right: 0;
}

#dialogWindow.lazarus {
	border: 1.5px solid rgba(255, 255, 255, 0.21);
	background-color: white;
}

#dialogWindow.lazarus #dialogTitle {
	color: white;
	text-shadow: 1px 1px rgba(255, 248, 248, 0.2);
	background: rgb(215, 118, 4);
	line-height: 29px;
	opacity: 1;
}

#dialogWindow.lazarus #dialogClose {
	background: url(http://cache.dotaplayer.info/images/white-close.png);
}

#dialogWindow.lazarus #dialogClose:hover {
	opacity: 1;
}

#dialogWindow.lazarus #cancelButton, #dialogWindow.lazarus #acceptButton {
	background: initial;
	border-radius: initial;
	box-shadow: initial;
	opacity: 1;
	margin: 8px;
	width: 76px;
	height: 26px;
	line-height: 26px;
	background: url(http://cache.getlazarus.org/images/button.png) 0 0;
}

#dialogWindow.lazarus #cancelButton:hover, #dialogWindow.lazarus #acceptButton:hover {
	background: url(http://cache.getlazarus.org/images/button.png) -76px 0;
	opacity: 1;
}


/* ===========================================================================
   6. Code samples
   (was source.css)
   =========================================================================== */

/* Code samples (typescript/source/source.ts).

   A page writes <pre class="source pascal"> and the script draws it as a
   panel: the name of the language and its buttons along the top, the code
   beneath, with a gutter of line numbers when the block is also "numbered".

   The colours are the ones of the Pascal on the page shown for an address
   which names nothing: charcoal, with the site's orange down its left edge,
   keywords in a warm orange, strings in a soft green, and everything else in
   a light grey. They are custom properties of the panel. To give one language
   a scheme of its own, set them again for it: the data-language attribute
   carries the class the author wrote.

       .source-block[data-language="glsl"] {
           --src-keyword: #f0a6c0;
       }
*/

.source-block {
	/* The panel. */
	--src-back: #2b2b2b;
	--src-head: #353535;
	--src-edge: rgba(255, 255, 255, .12);
	--src-stripe: #e07902;
	--src-text: #e8e8e8;
	--src-gutter: #7d7d7d;
	/* The kinds of word. Identifiers are the text itself. */
	--src-keyword: #ffb347;
	--src-string: #9ed3a6;
	--src-comment: #8f8f8f;
	/* Numbers, and true, false and nil, are drawn as identifiers are. */
	--src-number: #e8e8e8;
	--src-literal: #e8e8e8;
	--src-type: #8cc4e8;
	/* The name of a function is an identifier like any other, and is not
	   picked out. */
	--src-function: #e8e8e8;
	--src-property: #7fd4c1;
	--src-variable: #c9b3ee;
	--src-tag: #8cc4e8;
	--src-attr: #f0c674;
	--src-meta: #a9b4c0;
	--src-operator: #c8c8c8;
	--src-punct: #b3b3b3;

	clear: both;
	max-width: 100%;
	margin: 14px 0 18px 0;
	overflow: hidden;
	background: var(--src-back);
	border-left: 4px solid var(--src-stripe);
	border-radius: 5px;
	box-shadow: 1px 2px 6px rgba(0, 0, 0, .25);
}

/* Along the top: the language at one end, the buttons at the other. */

.source-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 30px;
	padding: 0 8px 0 12px;
	background: var(--src-head);
	border-bottom: 1px solid var(--src-edge);
}

.source-lang {
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #bdbdbd;
}

.source-lang.failed {
	color: #f0a48c;
}

.source-lang.saved {
	color: var(--src-string);
}

.source-tools {
	display: flex;
	align-items: center;
	gap: 5px;
}

.source-tools button {
	margin: 0;
	padding: 2px 9px;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0;
	text-transform: none;
	color: #d6d6d6;
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--src-edge);
	border-radius: 4px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.source-tools button:hover {
	color: white;
	background: rgba(255, 255, 255, .14);
}

.source-tools .source-numbers,
.source-tools .source-edit {
	color: #a8a8a8;
}

.source-tools .source-numbers.on {
	color: var(--src-keyword);
	border-color: rgba(255, 179, 71, .45);
}

.source-tools .source-copy.copied {
	color: #1f1f1f;
	background: var(--src-string);
	border-color: transparent;
}

.source-tools .source-save {
	color: #1f1f1f;
	background: var(--src-keyword);
	border-color: transparent;
}

.source-tools .source-save:hover {
	color: #1f1f1f;
	background: #ffc673;
}

/* The code, and the gutter beside it. Both are set in the same face at the
   same line height, which is what keeps a number level with its line. */

.source-body {
	position: relative;
	display: flex;
	align-items: stretch;
}

/* A sample written shut shows only its heading until it is opened. */

.source-block.collapsed .source-body {
	display: none;
}

.source-block.collapsed .source-head {
	border-bottom: 0;
}

.source-tools .source-fold {
	color: var(--src-keyword);
}

/* A line of a listing which the words of the page are pointing at: a band
   laid across the panel behind it (sourceMark in source.ts). */

.source-mark {
	position: absolute;
	left: 0;
	right: 0;
	background: rgba(255, 179, 71, .22);
	pointer-events: none;
}

.source-lines {
	flex: 0 0 auto;
	padding: 12px 0;
	overflow: hidden;
	background: rgba(0, 0, 0, .18);
	border-right: 1px solid var(--src-edge);
	user-select: none;
}

.source-lines .lineno {
	padding: 0 10px 0 12px;
	font-family: 'Inconsolata', monospace;
	font-size: 15px;
	line-height: 20px;
	color: var(--src-gutter);
	text-align: right;
}

pre.source {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 12px 18px 12px 14px;
	overflow-x: auto;
	font-family: 'Inconsolata', monospace;
	font-size: 15px;
	font-weight: 400;
	line-height: 20px;
	color: var(--src-text, #e8e8e8);
	background: var(--src-back, #2b2b2b);
	tab-size: 2;
	white-space: pre;
}

/* A page gives every code element a grey ground; a sample has its own. */

pre.source code {
	padding: 0;
	font: inherit;
	color: inherit;
	background: none;
}

/* A sample the script has not reached, or never will with scripting off, is
   still a dark block of code with the orange edge. */

pre.source:not(.highlighted) {
	clear: both;
	margin: 14px 0 18px 0;
	border-left: 4px solid #e07902;
	border-radius: 5px;
	box-shadow: 1px 2px 6px rgba(0, 0, 0, .25);
}

/* The editor an administrator is given in place of the code. */

.source-block .source-editor {
	flex: 1 1 auto;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 12px 18px 12px 14px;
	font-family: 'Inconsolata', monospace;
	font-size: 15px;
	font-weight: 400;
	line-height: 20px;
	color: var(--src-text);
	background: var(--src-back);
	border: 0;
	border-radius: 0;
	outline: 0;
	box-shadow: none;
	resize: vertical;
	tab-size: 2;
	white-space: pre;
	overflow: auto;
	caret-color: var(--src-keyword);
}

.source-block .source-editor:focus {
	border: 0;
	outline: 0;
	box-shadow: none;
}

.source-block .source-editor::selection {
	background: rgba(255, 179, 71, .3);
}

.source-block.editing {
	border-left-color: var(--src-keyword);
}

/* The kinds of word. */

.source-block .tok-keyword {
	color: var(--src-keyword);
	font-weight: 700;
}

.source-block .tok-string {
	color: var(--src-string);
}

.source-block .tok-comment {
	color: var(--src-comment);
	font-style: italic;
}

.source-block .tok-meta {
	color: var(--src-meta);
	font-style: italic;
}

.source-block .tok-number {
	color: var(--src-number);
}

.source-block .tok-literal {
	color: var(--src-literal);
}

.source-block .tok-type {
	color: var(--src-type);
}

.source-block .tok-function {
	color: var(--src-function);
}

.source-block .tok-property {
	color: var(--src-property);
}

.source-block .tok-variable {
	color: var(--src-variable);
}

.source-block .tok-tag {
	color: var(--src-tag);
}

.source-block .tok-attr {
	color: var(--src-attr);
}

.source-block .tok-operator {
	color: var(--src-operator);
}

.source-block .tok-punct {
	color: var(--src-punct);
}

/* Scrollbars thin and dark, so a wide line does not put a pale bar across the
   foot of a dark panel. */

pre.source,
.source-block .source-editor {
	scrollbar-width: thin;
	scrollbar-color: #666 transparent;
}

pre.source::-webkit-scrollbar,
.source-block .source-editor::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

pre.source::-webkit-scrollbar-thumb,
.source-block .source-editor::-webkit-scrollbar-thumb {
	background: #666;
	border-radius: 999px;
}

pre.source::-webkit-scrollbar-track,
pre.source::-webkit-scrollbar-corner,
.source-block .source-editor::-webkit-scrollbar-track,
.source-block .source-editor::-webkit-scrollbar-corner {
	background: transparent;
}


/* ===========================================================================
   7. The sign in page and the administration pages
   (was admin.css)
   =========================================================================== */

/* The sign in page and the administration console. */

.admin-form {
	width: 360px;
	margin: 12px 0 20px 0;
}

.admin-form label, .admin-detail label {
	display: block;
	font-weight: 700;
	margin-top: 10px;
}

.admin-form input, .admin-form select, .admin-detail input, .admin-detail select,
.admin-detail textarea, .admin-list input[type="search"], .admin-create input, .admin-create select {
	box-sizing: border-box;
	width: 100%;
	padding: 6px 8px;
	font: inherit;
	border: 1px solid #b8b8b8;
	border-radius: 5px;
	background: white;
}

/* The search box is named by its id, which is what it takes to be narrower
   than the consoles make every input. */

.admin-toolbar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 4px;
}

.admin-toolbar #account-search {
	flex: 0 1 320px;
	width: auto;
	min-width: 0;
}

.admin-toolbar .admin-count {
	margin-left: auto;
	white-space: nowrap;
}

.admin-detail textarea {
	height: 90px;
	resize: vertical;
}

.admin-button {
	margin-top: 12px;
	margin-right: 6px;
	padding: 6px 14px;
	font: inherit;
	font-weight: 500;
	color: white;
	background: #e07902;
	border: 1px solid #c66c04;
	border-radius: 5px;
	cursor: pointer;
}

.admin-button:hover {
	background: #c66c04;
}

.admin-button:disabled {
	opacity: 0.4;
	cursor: default;
}

.admin-button.plain {
	color: #c66c04;
	background: white;
}

.admin-button.danger {
	background: #b3261e;
	border-color: #8c1d18;
}

.admin-message {
	min-height: 20px;
	margin: 8px 0;
}

.admin-message.error {
	color: #b3261e;
}

.admin-count {
	opacity: 0.7;
}

.admin-empty {
	opacity: 0.7;
	font-style: italic;
}

.admin-table {
	width: 100%;
	margin: 10px 0;
	border-collapse: collapse;
}

.admin-table th {
	text-align: left;
	padding: 5px 8px;
	border-bottom: 2px solid #e07902;
}

.admin-table td {
	padding: 5px 8px;
	border-bottom: 1px solid #d8d8d8;
	overflow-wrap: anywhere;
	vertical-align: top;
}

/* The console's own table rules are roomier than this page wants, and its
   stylesheet is read after this one, so these are named by the content. */

#content .admin-table th {
	padding: 6px 8px;
}

#content .admin-table td {
	padding: 7px 8px;
}

/* A role and a date are short, and read badly broken over two lines. */

.admin-table th:nth-child(n+3), .admin-table td:nth-child(n+3) {
	white-space: nowrap;
	overflow-wrap: normal;
}

.admin-table tr.account-row {
	cursor: pointer;
}

.admin-table tr.account-row:hover, .admin-table tr.account-row.selected {
	background: #fceddc;
}

.admin-table tr.inactive td {
	opacity: 0.5;
}

.admin-tag {
	margin-left: 6px;
	padding: 1px 6px;
	font-size: 12px;
	color: white;
	background: #e07902;
	border-radius: 8px;
}

.admin-tag.off {
	background: #888;
}

.admin-columns {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

/* Each part of the page starts beneath the curve of the header rather than
   being squeezed beside it. */

.admin-section {
	clear: both;
	margin-top: 26px;
}

.admin-section > h2 {
	margin-top: 0;
}

/* The consoles, as tiles. They are inline blocks so that they run along the
   curve of the header like the text of any other page, one to a line where
   the curve is widest and four where it has gone. */

.console .admin-tools {
	margin: 14px 0 0 0;
	padding: 0;
	list-style: none;
	font-size: 0;
}

.console .admin-tools li {
	display: inline-block;
	box-sizing: border-box;
	vertical-align: top;
	width: 224px;
	min-height: 92px;
	margin: 0 12px 12px 0;
	padding: 9px 12px 10px 12px;
	font-size: 13px;
	line-height: 17px;
	background: white;
	border: 1px solid #d8d8d8;
	border-left: 3px solid #e07902;
	border-radius: 5px;
	transition: background .2s ease-out, border-color .2s ease-out;
}

.console .admin-tools li:hover {
	background: #fceddc;
	border-color: #e07902;
}

.console .admin-tools a {
	display: block;
	margin-bottom: 3px;
	font-size: 15px;
	font-weight: 700;
	font-style: normal;
	line-height: 20px;
	border-bottom: 0;
}

.console .admin-tools span {
	display: block;
	color: #666;
}

/* Adding an account, as one row of fields with its button at the end. */

.admin-create {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0 14px;
	padding: 4px 14px 6px 14px;
	background: #c0c0c024;
	border: 1px solid #b8b8b8;
	border-radius: 10px;
}

.admin-create .admin-field {
	flex: 1 1 160px;
	min-width: 0;
}

.admin-create .admin-field.wide {
	flex: 1.4 1 200px;
}

.admin-create .admin-field.narrow {
	flex: 0 0 130px;
}

.admin-create .admin-button {
	flex: 0 0 auto;
	min-height: 34px;
	margin: 12px 0 0 0;
}

.admin-create .admin-message {
	flex: 0 0 100%;
}

.admin-list {
	flex: 1 1 auto;
	min-width: 0;
}

.admin-detail {
	flex: 0 0 300px;
	box-sizing: border-box;
	padding: 4px 14px 10px 14px;
	background: #c0c0c024;
	border: 1px solid #b8b8b8;
	border-radius: 10px;
}

.admin-detail .admin-name {
	font-size: 20px;
	font-weight: 700;
	margin-top: 8px;
}

.admin-detail .admin-facts {
	margin: 4px 0;
	font-size: 13px;
	opacity: 0.8;
}

#content .admin-pager {
	justify-content: flex-start;
	padding-top: 4px;
	margin-bottom: 0;
}

.admin-pager .admin-button {
	margin: 0;
}

.admin-pager span {
	margin: 0 4px;
	opacity: 0.7;
}

/* The buttons of the account panel sit in a row and wrap together. */

.admin-detail .admin-button {
	margin-right: 4px;
}

.admin-detail .admin-tag {
	vertical-align: 2px;
}

/* The roles the list of accounts is narrowed to: a row of toggle buttons,
   each with how many accounts hold its role. */

.admin-roles {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 8px 0 6px 0;
}

.admin-roles button {
	padding: 3px 10px;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	color: #c66c04;
	background: white;
	border: 1px solid #b8b8b8;
	border-radius: 999px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.admin-roles button:hover {
	border-color: #e07902;
}

.admin-roles button.on {
	color: white;
	background: #e07902;
	border-color: #c66c04;
}

.admin-roles button span {
	display: inline-block;
	min-width: 16px;
	margin-left: 3px;
	padding: 0 5px;
	font-size: 12px;
	line-height: 16px;
	color: #555;
	background: #ececec;
	border-radius: 999px;
	text-align: center;
}

.admin-roles button.on span {
	color: #c66c04;
	background: white;
}

/* The sign in page: two tabs, Sign in and Sign up, over one narrow form, with
   the steps of making an account taking the form's place in their turn. */

.login {
	width: 360px;
	max-width: 100%;
	margin: 12px 0 30px 0;
	margin-left: calc(50% - 200px);
}

.login [hidden] {
	display: none !important;
}

.login-tabs {
	display: flex;
	gap: 2px;
	border-bottom: 1px solid #b8b8b8;
}

.login-tabs button {
	margin-bottom: -1px;
	padding: 5px 16px;
	font: inherit;
	font-weight: 700;
	color: #666;
	background: transparent;
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: 5px 5px 0 0;
	cursor: pointer;
}

.login-tabs button:hover {
	color: #222;
}

.login-tabs button.active {
	color: #222;
	background: white;
	border-color: #b8b8b8;
	border-top: 2px solid #e07902;
}

.login-view {
	padding: 6px 14px 10px 14px;
	background: white;
	border: 1px solid #b8b8b8;
	border-top: 0;
	border-radius: 0 0 5px 5px;
}

/* The form which asks for a password has no tabs above it, so it is closed
   along the top as well. */

#join-form.login-view {
	padding-top: 10px;
	border-top: 2px solid #e07902;
	border-radius: 5px;
}

/* What is said once a link has been sent, or cannot be used, is only words,
   and is not put in a box. */

.login-view.login-sent {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.login-view label {
	display: block;
	margin: 10px 0 3px 0;
	font-size: 13px;
	font-weight: 700;
}

.login-view input {
	box-sizing: border-box;
	width: 100%;
	padding: 6px 8px;
	font: inherit;
	border: 1px solid #b8b8b8;
	border-radius: 5px;
	background: white;
}

.login-view h3 {
	margin: 0 0 4px 0;
	background: none;
}

.login-view p {
	margin: 6px 0;
}

.login-note {
	font-size: 13px;
	color: #555;
}

.login-view a {
	cursor: pointer;
}

/* The captcha: the picture, a button for a different one, and the box the
   numbers are typed into. */

.captcha-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.captcha-image {
	display: block;
	flex: none;
	width: 150px;
	height: 44px;
	border-radius: 5px;
	background: #2b2b2b;
}

.captcha-refresh {
	flex: none;
	width: 34px;
	height: 34px;
	padding: 0;
	font-size: 20px;
	line-height: 30px;
	color: #c66c04;
	background: white;
	border: 1px solid #b8b8b8;
	border-radius: 5px;
	cursor: pointer;
}

.captcha-refresh:hover {
	border-color: #e07902;
}

.login-view .captcha-input {
	flex: 1 1 auto;
	min-width: 0;
	letter-spacing: 0.15em;
}

/* The button which signs in, with the way to a new password beside it. */

.login-actions {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.login-actions a {
	font-size: 13px;
}


/* ===========================================================================
   8. The consoles and the forum
   (was console.css)
   =========================================================================== */

/* The consoles and the forum.

   The rules below the variables were taken from www.orbliterate.com, whose
   consoles these are, and every one is scoped to .console so nothing here
   reaches the page around it. Loaded only by the pages that use them. */

.console {
	--fs-label: 12px;
	--fs-ui: 13px;
	--fs-body: 15px;
	--fs-h3: 15px;
	--fs-h2-sm: 20px;
	--fs-h2: 20px;
	--fs-h1: 26px;
	--fs-h1-hero: 26px;
	--cloud: #f3f1ed;
	--paper: #fbfaf8;
	--pearl: #eeeaf1;
	--lavender: #d3ccd8;
	--lavender-mid: #b6b1c3;
	--violet: #565167;
	--violet-deep: #312b55;
	--muted: #6f6a7c;
	--blue: #5fa5e1;
	--blue-deep: #267fc8;
	--orange: #a85d2f;
	--orange-deep: #5f240a;
	--gold: #e3b958;
	--green: #758d52;
	--danger: #bb4a34;
	--line: rgba(86, 81, 103, .2);
	--line-soft: rgba(86, 81, 103, .1);
	--shadow: 0 18px 50px rgba(66, 59, 87, .13);
	--shadow-soft: 0 9px 24px rgba(66, 59, 87, .1);
	--display: "Gorditas", Georgia, serif;
	--body: "Inter", system-ui, sans-serif;
	--shell: min(1280px, calc(100% - 56px));
	--header-height: 60px;
	--header-offset: 74px;
	--logo-shadow-opacity: .8;

	/* This site's own colours and faces in place of the ones above. */
	--orange: #e07902;
	--orange-deep: #c66c04;
	--violet: #c66c04;
	--violet-deep: #222222;
	--muted: #666666;
	--paper: #ffffff;
	--cloud: #f4f4f4;
	--pearl: #fceddc;
	--lavender: #d8d8d8;
	--lavender-mid: #b8b8b8;
	--line: rgba(0, 0, 0, .2);
	--line-soft: rgba(0, 0, 0, .1);
	--shadow: 0 2px 8px rgba(0, 0, 0, .12);
	--shadow-soft: 0 1px 4px rgba(0, 0, 0, .1);
	--display: 'Roboto', sans-serif;
	--body: 'Roboto', sans-serif;
	--shell: 100%;
	--fs-h3: 15px;
	--fs-h2-sm: 20px;
	--fs-h2: 20px;
	--fs-h1: 26px;
	--fs-body: 15px;
	/* The accent the consoles were drawn with was blue. Here it is the
	   orange of the rest of the site. */
	--blue: #e07902;
	--blue-deep: #c66c04;
	--danger: #b3261e;
}

.console [hidden] {
	display: none !important;
}

#content-after {
	margin: 0 30px 10px 10px;
}

/* Form controls, which the consoles assume are styled before any class is. */

.console button,
.console input,
.console select,
.console textarea {
	font: inherit;
}

.console input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.console textarea,
.console select {
	box-sizing: border-box;
	width: 100%;
	min-height: 34px;
	padding: 6px 10px;
	border: 1px solid var(--lavender-mid);
	border-radius: 5px;
	outline: 0;
	color: var(--violet-deep);
	background: white;
}

.console textarea {
	line-height: 1.4;
	resize: vertical;
}

.console input:focus,
.console textarea:focus,
.console select:focus {
	border-color: var(--orange);
	box-shadow: 0 0 0 3px rgba(224, 121, 2, .16);
}

.console label {
	display: block;
	margin-top: 10px;
	font-weight: 700;
}

.console section {
	margin: 16px 0;
}

.console .console-links {
	margin: 12px 0 20px 0;
	padding-left: 20px;
}

.console .console-links li {
	margin: 4px 0;
}

.console .console-links a {
	display: inline-block;
	min-width: 120px;
	font-weight: 700;
	font-style: normal;
}

.console .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.console .site-nav {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: clamp(12px, 1.6vw, 28px);
}

.console .site-nav a {
	position: relative;
	padding: 13px 0;
	white-space: nowrap;
	color: var(--violet);
	font-size: var(--fs-label);
	font-weight: 800;
	letter-spacing: .085em;
	text-decoration: none;
	text-transform: uppercase;
}

.console .site-nav a:hover::after,
.console .site-nav a.active::after {
	transform: scaleX(1);
}

.console .site-nav a.active {
	color: var(--violet-deep);
}

.console .button {
	min-height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	padding: 13px 22px;
	border: 1px solid transparent;
	border-radius: 5px;
	font-size: var(--fs-ui);
	font-weight: 800;
	letter-spacing: .075em;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.console .button:hover {
	transform: translateY(-2px);
}

.console .button-primary {
	color: white;
	border-color: #3089cf;
	background: linear-gradient(#78baf0 0%, var(--blue) 45%, var(--blue-deep) 100%);
	box-shadow: inset 0 2px 0 rgba(255,255,255,.46), 0 7px 0 #1c6fae, 0 13px 22px rgba(38,127,200,.22);
}

.console .button-primary:hover {
	box-shadow: inset 0 2px 0 rgba(255,255,255,.52), 0 5px 0 #1c6fae, 0 13px 27px rgba(38,127,200,.32);
}

.console .button-secondary {
	color: var(--violet-deep);
	border-color: #a99bd5;
	background: linear-gradient(#fff, #f2eef5);
	box-shadow: inset 0 2px 0 #fff, 0 5px 0 #b9afd2, 0 11px 18px rgba(66,59,87,.1);
}

.console .button-secondary:hover {
	border-color: var(--blue);
}

.console .text-link {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	color: var(--blue-deep);
	font-size: var(--fs-label);
	font-weight: 800;
	letter-spacing: .075em;
	text-decoration: none;
	text-transform: uppercase;
}

.console .form-message {
	min-height: 24px; margin: 12px 0 0; color: var(--blue-deep); font-size: var(--fs-body);
}

.console .form-message.error {
	color: var(--danger);
}

@media (prefers-reduced-motion: reduce) {
	.console .button {
		transition: none;
	}
}

.console .hidden {
	display: none !important;
}

.console .confirm {
	max-width: 720px;
	margin-top: 14px;
	padding: 16px 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	border: 1px solid var(--line);
	border-left: 4px solid var(--orange);
	border-radius: 5px;
	background: rgba(251,250,248,.94);
	box-shadow: var(--shadow-soft);
}

.console .confirm p {
	margin: 0; color: var(--violet-deep); font-size: var(--fs-body); font-weight: 600;
}

.console .confirm .button {
	padding: 10px 20px; font-size: var(--fs-ui);
}

.console textarea.nowrap {
	white-space: pre; overflow-x: auto;
}

.console .linedwrap {
	display: flex;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: white;
}

.console .linedwrap .lines {
	flex: 0 0 auto;
	width: 52px;
	padding: 12px 0;
	overflow: hidden;
	border-right: 1px solid var(--line-soft);
	background: var(--pearl);
	user-select: none;
}

.console .linedwrap .lineno {
	padding-right: 11px;
	color: var(--lavender-mid);
	font: 400 15px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
	text-align: right;
}

/* Code samples are styled by source.css, which every page loads. */

.console .admin-panel {
	padding: 24px 26px;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: rgba(251,250,248,.9);
	box-shadow: var(--shadow-soft);
}

.console .admin-panel-head {
	margin-bottom: 16px;
	padding-bottom: 14px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
}

.console .admin-panel-head h2 {
	margin: 0; font-size: var(--fs-h3);
}

.console .admin-count {
	color: var(--muted); font-size: var(--fs-ui); font-weight: 700;
}

.console .admin-empty {
	color: var(--muted); font-size: var(--fs-body);
}

.console .admin-table-scroll {
	overflow-x: auto;
}

.console .admin-table {
	width: 100%; border-collapse: collapse; font-size: var(--fs-body);
}

.console .admin-table th {
	padding: 0 10px 9px;
	color: var(--violet);
	font-size: var(--fs-label);
	font-weight: 800;
	letter-spacing: .1em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.console .admin-table td {
	padding: 11px 10px; color: var(--muted);
}

.console .admin-table td strong {
	color: var(--violet-deep);
}

.console .account-row {
	cursor: pointer; transition: background .15s ease;
}

.console .account-row:hover {
	background: rgba(224,121,2,.09);
}

.console .account-row.selected {
	background: rgba(224,121,2,.16);
}

.console .account-row.inactive td {
	opacity: .55;
}

.console .account-tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	color: white;
	background: var(--blue-deep);
	font-size: var(--fs-label);
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	vertical-align: 1px;
}

.console .account-tag.off {
	background: var(--lavender-mid);
}

.console .admin-detail h3 {
	margin: 22px 0 8px; font-size: var(--fs-body);
}

.console .account-facts {
	margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; font-size: var(--fs-body);
}

.console .account-facts dt {
	color: var(--violet); font-weight: 700;
}

.console .account-facts dd {
	margin: 0; color: var(--muted);
}

.console .button-danger {
	color: white;
	border: 1px solid transparent;
	background: var(--danger);
	box-shadow: inset 0 2px 0 rgba(255,255,255,.22), 0 4px 0 #8d3625;
}

.console .button-danger:hover {
	background: #cc5540;
}

.console .button-danger.confirming {
	background: #8d3625;
}

.console .admin-fields {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px;
}

.console .admin-fields input {
	width: 100%;
	padding: 11px 13px;
	color: var(--violet-deep);
	border: 1px solid var(--line);
	border-radius: 5px;
	background: white;
	font: 400 15px/1.4 var(--body);
}

.console .admin-fields input:focus {
	border-color: var(--blue); outline: none;
}

.console .admin-fields select {
	min-height: 0;
	padding: 11px 38px 11px 13px;
	background-color: white;
	background-position: right 13px center;
	font: 400 15px/1.4 var(--body);
}

.console .admin-fields select:focus {
	border-color: var(--blue); outline: none;
}

.console .admin-fields label {
	display: block;
	margin-bottom: 7px;
	color: var(--violet);
	font-size: var(--fs-label);
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.console .unread-badge {
	display: inline-grid;
	place-items: center;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	border-radius: 999px;
	color: white;
	background: var(--danger);
	box-shadow: 0 3px 8px rgba(187,74,52,.35);
	font: 800 12px/1 var(--body);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.console .unread-badge:hover {
	background: #cc5540;
}

.console .site-nav .unread-badge {
	height: 24px;
	min-width: 24px;
	padding: 0 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: var(--fs-label);
	letter-spacing: 0;
	text-transform: none;
	line-height: 1;
}

.console .site-nav .unread-badge::after {
	display: none;
}

.console .account-panels {
	padding: 20px 0 0;
	display: grid;
	grid-template-columns: 1.3fr .9fr;
	gap: 20px;
	align-items: start;
}

.console .account-sent {
	padding: 16px 0 0;
}

.console .message {
	padding: 15px 17px;
	margin-bottom: 12px;
	border: 1px solid var(--line);
	border-left: 3px solid var(--lavender-mid);
	border-radius: 0 5px 5px 0;
	background: rgba(255,255,255,.6);
}

.console .message:last-child {
	margin-bottom: 0;
}

.console .message.unread {
	border-left-color: var(--orange); background: rgba(168,93,47,.05);
}

.console .message-head {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 7px;
}

.console .message-head strong {
	color: var(--violet-deep); font-size: var(--fs-body);
}

.console .message-when {
	margin-left: auto; color: var(--muted); font-size: var(--fs-ui); font-variant-numeric: tabular-nums;
}

.console .message-body {
	margin: 0; color: var(--violet); font-size: var(--fs-body); white-space: pre-wrap;
}

.console .message-note {
	margin: 0 0 7px; color: var(--muted); font-size: var(--fs-ui);
}

.console .message-actions {
	margin-top: 11px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}

.console .message-actions .button {
	padding: 8px 14px; font-size: var(--fs-ui);
}

.console .compose-remaining {
	margin: 8px 0 14px; color: var(--muted); font-size: var(--fs-ui);
}

.console .compose-remaining.error {
	color: var(--danger); font-weight: 700;
}

.console .admin-search {
	margin-bottom: 14px;
}

.console .admin-search input {
	width: 100%;
	padding: 10px 14px;
	color: var(--violet-deep);
	border: 1px solid var(--line);
	border-radius: 999px;
	background: white;
	font: 400 13px/1.4 var(--body);
}

.console .admin-search input:focus {
	border-color: var(--blue); outline: none;
}

.console .admin-pager {
	padding-top: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 1em;
}

.console .admin-pager .button {
	padding: 9px 16px; font-size: var(--fs-ui);
}

.console .admin-pager .button:disabled {
	opacity: .4; cursor: not-allowed; transform: none;
}

.console .admin-page-of {
	color: var(--muted); font-size: var(--fs-ui); font-weight: 700;
}

.console .post-edit {
	margin: 0 0 12px;
}

.console .post-edit a {
	display: inline-flex; align-items: center; gap: 7px; color: var(--orange); font-size: var(--fs-label); font-weight: 800; letter-spacing: .085em; text-decoration: none; text-transform: uppercase;
}

.console .post-edit a:hover {
	color: var(--orange-deep);
}

.console .admin-posts {
	padding-bottom: 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start;
}

.console .admin-fields .wide {
	grid-column: 1 / -1;
}

.console .admin-search {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}

.console .admin-search input[type="search"] {
	flex: 1 1 220px; min-width: 0;
}

.console .admin-search select {
	flex: 0 1 210px; min-height: 0; padding: 10px 36px 10px 13px; background-color: white; background-position: right 12px center; font-size: var(--fs-ui);
}

.console .field-note {
	display: block; margin-top: 6px; color: var(--muted); font-size: var(--fs-ui);
}

.console .post-tools {
	display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px;
}

.console .post-tools .button {
	padding: 7px 12px; font-size: var(--fs-label);
}

.console .post-switches {
	display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 14px 0; font-size: var(--fs-ui);
}

.console .post-switches label {
	display: inline-flex; align-items: center; gap: 7px; font-weight: 700;
}

.console .post-author {
	color: var(--muted); margin-left: auto;
}

.console .admin-actions {
	display: flex; flex-wrap: wrap; gap: 10px;
}

.console .admin-table tr.current {
	background: rgba(211,204,216,.42);
}

.console .admin-table tr[data-id] {
	cursor: pointer;
}

.console .state-pill {
	padding: 3px 10px; border-radius: 999px; font-size: var(--fs-label); font-weight: 800;
}

.console .state-pill.on {
	color: #1d5b2a; background: rgba(64,160,86,.18);
}

.console .state-pill.off {
	color: var(--muted); background: var(--pearl);
}

.console .comment-note {
	color: var(--muted); font-size: var(--fs-body);
}

.console .comment {
	padding: 18px 20px;
	margin-bottom: 12px;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: rgba(251,250,248,.9);
}

.console .comment.hidden-comment {
	border-style: dashed; background: rgba(211,204,216,.3); opacity: .8;
}

.console .comment-head {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 8px;
}

.console .comment-head strong {
	color: var(--violet-deep);
}

.console .comment-when {
	color: var(--muted); font-size: var(--fs-ui);
}

.console .comment-edited,
.console .comment-hidden-tag {
	padding: 2px 9px;
	border-radius: 999px;
	font-size: var(--fs-label);
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.console .comment-edited {
	color: var(--violet); background: var(--pearl);
}

.console .comment-hidden-tag {
	color: white; background: var(--danger);
}

.console .comment-tools {
	display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0;
}

.console .comment-tools button {
	padding: 6px 13px;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--violet);
	background: white;
	font-size: var(--fs-label);
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}

.console .comment-tools button:hover {
	border-color: var(--blue); color: var(--blue-deep);
}

.console .comment-editor {
	margin-top: 12px;
}

.console .compose-remaining.error {
	color: var(--danger); font-weight: 700;
}

.console .accent-orange {
	background: var(--orange);
}

.console .accent-orange-deep {
	background: var(--orange-deep);
}

.console .accent-blue {
	background: var(--blue);
}

.console .accent-blue-deep {
	background: var(--blue-deep);
}

.console .accent-violet {
	background: var(--violet);
}

.console .accent-violet-deep {
	background: var(--violet-deep);
}

.console .accent-lavender {
	background: var(--lavender);
}

.console .accent-danger {
	background: var(--danger);
}

.console .accent-text-orange {
	color: var(--orange);
}

.console .accent-text-orange-deep {
	color: var(--orange-deep);
}

.console .accent-text-blue {
	color: var(--blue-deep);
}

.console .accent-text-blue-deep {
	color: var(--blue-deep);
}

.console .accent-text-violet {
	color: var(--violet);
}

.console .accent-text-violet-deep {
	color: var(--violet-deep);
}

.console .accent-text-lavender {
	color: var(--violet);
}

.console .accent-text-danger {
	color: var(--danger);
}

.console .board-list {
	padding: 10px 0 70px; display: grid; gap: 14px;
}

.console .board-card {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 24px 26px 24px 34px;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: rgba(251,250,248,.92);
	box-shadow: var(--shadow);
	color: inherit;
	text-decoration: none;
	transition: transform .16s ease, border-color .16s ease;
}

.console .board-card:hover {
	transform: translateY(-2px); border-color: var(--lavender-mid);
}

.console .board-card.board-off {
	opacity: .62; border-style: dashed;
}

.console .board-accent {
	position: absolute; top: 0; bottom: 0; left: 0; width: 10px;
}

.console .board-text {
	display: grid; gap: 4px; flex: 1 1 auto; min-width: 0;
}

.console .board-text strong {
	font: 700 var(--fs-h3)/1.2 var(--display); color: var(--violet-deep);
}

.console .board-text span {
	color: var(--muted);
}

.console .board-count {
	display: grid;
	gap: 6px;
	justify-items: end;
	flex: 0 0 auto;
	color: var(--muted);
	font-size: var(--fs-ui);
	font-weight: 700;
	white-space: nowrap;
}

.console .board-dot {
	display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 3px; vertical-align: middle;
}

.console .topic-list {
	padding-bottom: 70px;
}

.console .topic-row {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 16px 20px;
	margin-bottom: 8px;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: rgba(251,250,248,.9);
	color: inherit;
	text-decoration: none;
}

.console .topic-row:hover {
	border-color: var(--blue);
}

.console .topic-row.topic-hidden {
	border-style: dashed; opacity: .75;
}

.console .topic-main {
	display: grid; gap: 3px; flex: 1 1 auto; min-width: 0;
}

.console .topic-main strong {
	color: var(--violet-deep); overflow-wrap: anywhere;
}

.console .topic-by {
	color: var(--muted); font-size: var(--fs-ui);
}

.console .topic-meta {
	display: grid; gap: 3px; justify-items: end; flex: 0 0 auto; color: var(--muted); font-size: var(--fs-ui); white-space: nowrap;
}

.console .topic-tag {
	display: inline-block;
	margin-right: 8px;
	padding: 2px 9px;
	border-radius: 999px;
	color: white;
	font-size: var(--fs-label);
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: middle;
}

.console .topic-tag.pinned {
	background: var(--orange);
}

.console .topic-tag.locked {
	background: var(--violet);
}

.console .topic-tag.hidden-tag {
	background: var(--danger);
}

.console .topic-head {
	padding: 8px 0 22px; max-width: 900px;
}

.console .topic-head h1 {
	margin: 6px 0 10px;
}

.console .topic-tools {
	margin-top: 16px;
}

.console .forum-thread {
	padding-bottom: 70px; max-width: 900px;
}

.console .forum-post {
	padding: 20px 22px;
	margin-bottom: 12px;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: rgba(251,250,248,.92);
}

.console .forum-post.first-post {
	border-color: var(--lavender-mid); background: white;
}

.console .forum-post.hidden-comment {
	border-style: dashed; background: rgba(211,204,216,.3); opacity: .8;
}

.console .forum-body {
	overflow-wrap: anywhere;
}

.console .forum-body p {
	margin: 0 0 10px;
}

.console .forum-body p:last-child {
	margin-bottom: 0;
}

/* A sample in a message sits a little closer to the words around it. */

.console .forum-body .source-block {
	margin: 10px 0;
}

.console .post-quote {
	margin: 10px 0;
	padding: 8px 0 8px 16px;
	border-left: 3px solid var(--lavender-mid);
	color: var(--muted);
	font: inherit;
}

.console .post-image-inline {
	max-width: 100%; margin: 12px 0; border-radius: 5px;
}

.console .mention {
	color: var(--blue-deep); font-weight: 700; text-decoration: none;
}

.console .mention:hover {
	color: var(--orange);
}

.console .forum-compose {
	margin-top: 34px;
}

.console .forum-compose h2 {
	margin-bottom: 14px;
}

.console .forum-form label {
	display: block;
	margin-bottom: 8px;
	color: var(--violet);
	font-size: var(--fs-label);
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.console .forum-form input {
	margin-bottom: 16px;
}

.console .forum-form textarea {
	margin-bottom: 6px;
}

.console .forum-form .button {
	margin-top: 6px;
}

.console .forum-actions {
	display: flex; flex-wrap: wrap; gap: 10px;
}

.console .button.waiting,
.console .comment-tools button.waiting {
	opacity: .55; cursor: progress;
}

.console .comment-editor .post-tools {
	margin: 0 0 8px;
}

.console .comment-editor textarea {
	margin-bottom: 6px;
}

.console .edit-message {
	min-height: 0; margin: 0 0 8px;
}

.console .admin-limits {
	padding-bottom: 60px;
}

.console .limit-group {
	margin-bottom: 28px;
}

.console .limit-group h2 {
	margin-bottom: 14px; font-size: var(--fs-h3);
}

.console .limit-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 130px;
	gap: 6px 18px;
	align-items: center;
	padding: 12px 0;
}

.console .limit-row label {
	color: var(--violet-deep); font-weight: 700;
}

.console .limit-row input {
	grid-row: 1 / 3; grid-column: 2; text-align: right;
}

.console .limit-note {
	grid-column: 1; color: var(--muted); font-size: var(--fs-ui);
}

.console .sql-console {
	padding-bottom: 60px; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start;
}

.console .sql-schema {
	position: sticky; top: 125px; max-height: 78vh; overflow: auto;
}

.console .sql-table > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 4px;
	color: var(--violet-deep);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.console .sql-table > summary::-webkit-details-marker {
	display: none;
}

.console .sql-table > summary::before {
	content: "";
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 6px solid var(--lavender-mid);
	transition: transform .14s ease;
}

.console .sql-table[open] > summary::before {
	transform: rotate(90deg);
}

.console .sql-table > summary:hover {
	color: var(--blue-deep);
}

.console .sql-table-name {
	flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
}

.console .sql-table-rows {
	flex: 0 0 auto; color: var(--muted); font-size: var(--fs-label); font-weight: 800;
}

.console .sql-columns {
	margin: 0 0 8px; padding: 0 0 0 16px; list-style: none;
}

.console .sql-columns li {
	display: flex; align-items: baseline; gap: 8px; padding: 3px 0;
}

.console .sql-insert {
	padding: 0;
	border: 0;
	background: none;
	color: var(--blue-deep);
	font: 400 var(--fs-ui)/1.4 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	cursor: pointer;
}

.console .sql-insert:hover {
	color: var(--orange); text-decoration: underline;
}

.console .sql-pick {
	margin-left: 16px; font-size: var(--fs-label); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}

.console .sql-type {
	color: var(--muted); font-size: var(--fs-label);
}

.console .sql-flag {
	padding: 1px 7px; border-radius: 999px; background: var(--pearl); color: var(--muted); font-size: var(--fs-label); font-weight: 800;
}

.console .sql-flag.key {
	color: white; background: var(--orange);
}

.console .sql-editor .post-tools {
	margin-bottom: 10px;
}

.console .sql-hint {
	margin: 8px 0 0; color: var(--muted); font-size: var(--fs-ui);
}

.console .sql-result {
	margin-top: 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 5px; background: rgba(251,250,248,.9);
}

.console .sql-result.bad {
	border-color: var(--danger); background: rgba(187,74,52,.06);
}

.console .sql-statement {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px;
}

.console .sql-statement code {
	overflow-wrap: anywhere;
}

.console .sql-timing {
	color: var(--muted); font-size: var(--fs-label); font-weight: 800; white-space: nowrap;
}

.console .sql-note {
	margin: 0; color: var(--muted); font-size: var(--fs-ui);
}

.console .sql-error {
	margin: 0; color: var(--danger); font-weight: 700; overflow-wrap: anywhere;
}

.console .sql-grid-scroll {
	overflow-x: auto; margin-top: 12px;
}

.console .sql-grid {
	width: 100%; border-collapse: collapse; font-size: var(--fs-ui);
}

.console .sql-grid th {
	padding: 8px 12px;
	color: var(--violet);
	font-size: var(--fs-label);
	font-weight: 800;
	letter-spacing: .08em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.console .sql-grid td {
	padding: 7px 12px; color: var(--violet-deep); vertical-align: top; max-width: 460px; overflow-wrap: anywhere;
}

.console .sql-grid tbody tr:nth-child(odd) {
	background: rgba(211,204,216,.22);
}

.console .sql-null {
	color: var(--lavender-mid); font-style: italic;
}

.console .sql-pager {
	margin-top: 12px;
}

/* The mail room, taken from kazman.codebot.org and kept small: Read, Compose
   and History tabs, a narrow list of messages beside the one being read, and
   buttons the height of a line of text.

   It begins straight beneath the heading of the page, beside the curve of
   the header, and not beneath it. Neither the mail room nor a view has a
   width or a border of its own for that reason: each row inside them is laid
   out by itself, so each is as wide as the curve leaves room for where it
   happens to be, and the rows grow wider down the page as the curve falls
   away. */

/* The address of the mailbox, at the far end of the row of tabs. */

.console .mail-address {
	margin-left: auto;
	align-self: center;
	color: var(--muted);
	font-size: 13px;
}

.console .mailroom {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.4;
}

.console .mailroom [hidden] {
	display: none !important;
}

.console .mailroom .mail-tabs {
	display: flex;
	gap: 2px;
	border-bottom: 1px solid var(--lavender-mid);
}

.console .mailroom .mail-tabs button {
	margin-bottom: -1px;
	padding: 5px 16px;
	color: var(--muted);
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: 5px 5px 0 0;
	background: transparent;
	font-weight: 700;
	cursor: pointer;
}

.console .mailroom .mail-tabs button:hover {
	color: var(--violet-deep);
}

.console .mailroom .mail-tabs button.active {
	color: var(--violet-deep);
	border-color: var(--lavender-mid);
	border-top: 2px solid var(--orange);
	background: white;
}

.console .mailroom .mail-view {
	padding-top: 10px;
}

.console .mailroom .mail-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-bottom: 8px;
}

.console .mailroom .mail-head h2 {
	margin: 0;
	font-size: 15px;
	line-height: 26px;
	background: none;
}

.console .mailroom .mail-count {
	margin-right: auto;
	color: var(--muted);
	font-size: 13px;
}

.console .mailroom .mail-note {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
}

.console .mailroom .mail-note:empty {
	display: none;
}

.console .mailroom .mail-note.bad {
	color: var(--danger);
	font-weight: 700;
}

.console .mailroom #inbox-message, .console .mailroom #mail-message, .console .mailroom #mail-ready {
	margin: 0 0 8px 0;
}

/* Buttons. */

.console .mailroom .mail-button {
	display: inline-block;
	margin: 0;
	padding: 4px 11px;
	color: var(--violet);
	border: 1px solid var(--lavender-mid);
	border-radius: 5px;
	background: white;
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.console .mailroom .mail-button:hover {
	border-color: var(--orange);
}

.console .mailroom .mail-button.primary {
	color: white;
	border-color: var(--orange-deep);
	background: var(--orange);
}

.console .mailroom .mail-button.primary:hover {
	background: var(--orange-deep);
}

.console .mailroom .mail-button:disabled {
	opacity: .45;
	cursor: default;
}

.console .mailroom .mail-tools {
	display: inline-flex;
	gap: 6px;
}

.console .mailroom .mail-tools:empty {
	display: none;
}

.console .mailroom .mail-pager {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--muted);
	font-size: 13px;
}

.console .mailroom .mail-step {
	width: 24px;
	height: 24px;
	padding: 0;
	color: var(--violet);
	border: 1px solid var(--lavender-mid);
	border-radius: 5px;
	background: white;
	font-size: 15px;
	line-height: 20px;
	cursor: pointer;
}

.console .mailroom .mail-step:disabled {
	opacity: .4;
	cursor: default;
}

/* The folders, and the search beside them. */

.console .mailroom .mail-folder-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin-bottom: 8px;
}

.console .mailroom .mail-folders {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.console .mailroom .mail-folders button {
	padding: 3px 10px;
	color: var(--violet-deep);
	border: 1px solid var(--lavender);
	border-radius: 999px;
	background: white;
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	cursor: pointer;
}

.console .mailroom .mail-folders button:hover {
	border-color: var(--orange);
}

.console .mailroom .mail-folders button.active {
	color: white;
	border-color: var(--violet-deep);
	background: var(--violet-deep);
}

.console .mailroom .mail-unread {
	display: inline-block;
	min-width: 16px;
	margin-left: 2px;
	padding: 0 5px;
	color: white;
	border-radius: 999px;
	background: var(--orange);
	font-size: 12px;
	line-height: 16px;
	text-align: center;
}

.console .mailroom .mail-search {
	flex: 1 1 220px;
	max-width: 320px;
	margin-left: auto;
}

/* Named by the id of the mail room, which is what it takes to be smaller
   than the consoles make every input. */

#mail-root .mail-search input {
	min-height: 0;
	padding: 4px 9px;
	font-size: 13px;
}

/* The search of the history, with the two days it runs between. */

.console .mailroom .mail-filter-row label {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	font-weight: 700;
}

#mail-root .mail-filter-row input {
	width: auto;
	min-height: 0;
	padding: 3px 8px;
	font-size: 13px;
}

#mail-root .mail-filter-row input[type="search"] {
	flex: 1 1 220px;
	max-width: 320px;
}

.console .mailroom .mail-filter-row #history-purge {
	margin-left: auto;
}

.console .mailroom .mail-button.danger {
	color: var(--danger);
}

.console .mailroom .mail-button.danger:hover {
	border-color: var(--danger);
}

.console .mailroom .mail-row-item.refused {
	border-left-color: var(--danger);
}

.console .mailroom .mail-row-subject b {
	color: var(--danger);
}

/* The list, and the message beside it. */

.console .mailroom .mail-split {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}

.console .mailroom .mail-list {
	max-height: 68vh;
	overflow-y: auto;
	border: 1px solid var(--lavender);
	border-radius: 5px;
}

.console .mailroom .mail-list .mail-note {
	padding: 8px 10px;
}

/* The column of the list: the checkbox which ticks every row, and the button
   which deletes what is ticked, above the list itself. */

.console .mailroom .mail-list-side {
	min-width: 0;
}

.console .mailroom .mail-pick-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 28px;
	margin-bottom: 4px;
	padding-left: 12px;
}

.console .mailroom .mail-pick-bar label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	font-weight: 400;
	cursor: pointer;
}

.console .mailroom .mail-pick-bar .mail-button {
	padding: 2px 9px;
}

.console .mailroom .mail-pick,
.console .mailroom .mail-pick-bar input {
	flex: none;
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--orange);
	cursor: pointer;
}

/* A row: its checkbox, and the message itself, which is a button. */

.console .mailroom .mail-row-line {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--lavender);
	background: white;
}

.console .mailroom .mail-row-line:last-child {
	border-bottom: 0;
}

.console .mailroom .mail-row-line .mail-pick {
	margin: 0 0 0 8px;
}

.console .mailroom .mail-row-line .mail-row-item {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	margin-left: 5px;
	border-bottom: 0;
	border-left: 0;
	background: transparent;
}

/* The stripe which marks a row as unread, open or refused runs down the edge
   of the list, outside the checkbox, so it belongs to the row and not to the
   button inside it. */

.console .mailroom .mail-row-line {
	border-left: 3px solid transparent;
}

.console .mailroom .mail-row-line:hover {
	background: var(--cloud);
}

.console .mailroom .mail-row-line:has(.mail-row-item.unread) {
	border-left-color: var(--orange);
}

.console .mailroom .mail-row-line:has(.mail-row-item.refused) {
	border-left-color: var(--danger);
}

.console .mailroom .mail-row-line:has(.mail-row-item.chosen) {
	border-left-color: var(--orange-deep);
	background: var(--pearl);
}

.console .mailroom .mail-row-item {
	display: flex;
	flex-direction: column;
	gap: 1px;
	width: 100%;
	padding: 6px 8px;
	color: var(--violet-deep);
	border: 0;
	border-bottom: 1px solid var(--lavender);
	border-left: 3px solid transparent;
	background: white;
	text-align: left;
	cursor: pointer;
}

.console .mailroom .mail-row-item:last-child {
	border-bottom: 0;
}

.console .mailroom .mail-row-item:hover {
	background: var(--cloud);
}

.console .mailroom .mail-row-item.unread {
	border-left-color: var(--orange);
}

.console .mailroom .mail-row-item.chosen {
	border-left-color: var(--orange-deep);
	background: var(--pearl);
}

.console .mailroom .mail-row-top {
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

.console .mailroom .mail-row-top strong {
	overflow: hidden;
	font-weight: 400;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.console .mailroom .mail-row-when {
	flex: none;
	color: var(--muted);
	font-size: 12px;
}

.console .mailroom .mail-row-subject {
	overflow: hidden;
	color: var(--muted);
	font-size: 13px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.console .mailroom .mail-row-item.unread strong,
.console .mailroom .mail-row-item.unread .mail-row-subject {
	color: var(--violet-deep);
	font-weight: 700;
}

.console .mailroom .mail-detail {
	min-width: 0;
}

.console .mailroom .mail-subject {
	margin: 0 0 6px 0;
	font-size: 15px;
	line-height: 22px;
	background: none;
}

.console .mailroom .mail-lines {
	margin: 0 0 6px 0;
	font-size: 13px;
}

.console .mailroom .mail-line {
	display: flex;
	flex-wrap: wrap;
	gap: 1px 20px;
}

.console .mailroom .mail-line > span {
	overflow-wrap: anywhere;
}

.console .mailroom .mail-line b {
	margin-right: 6px;
	color: var(--violet);
}

.console .mailroom .mail-attachments a {
	margin-right: 2px;
}

.console .mailroom .mail-attachments small {
	color: var(--muted);
}

.console .mailroom .mail-body {
	max-height: 60vh;
	margin: 0;
	padding: 9px 10px;
	overflow: auto;
	color: var(--violet-deep);
	border: 1px solid var(--lavender);
	border-radius: 5px;
	background: var(--cloud);
	font: 400 13px/1.5 var(--body);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* Writing a message. */

.console .mailroom .mail-row {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 8px;
	align-items: center;
	margin-bottom: 6px;
}

.console .mailroom .mail-row.tall {
	align-items: start;
}

.console .mailroom .mail-row label {
	margin: 0;
	color: var(--violet);
	font-size: 13px;
	font-weight: 700;
}

.console .mailroom .mail-row.tall label {
	margin-top: 6px;
}

#mail-root .mail-row input,
#mail-root .mail-row textarea {
	min-height: 0;
	padding: 5px 8px;
	font-size: 13px;
}

#mail-root .mail-row textarea {
	min-height: 220px;
	line-height: 1.5;
}

.console .mailroom #mail-replying {
	margin: 0 0 6px 72px;
}

.console .mailroom .mail-send-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-left: 72px;
}

.console .mailroom .mail-send-row #mail-clear {
	margin-left: auto;
}

#mail-root .mail-upload {
	position: absolute;
	width: 1px;
	height: 1px;
	min-height: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	opacity: 0;
}

.console .mailroom .mail-file-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 0 72px;
	padding: 0;
	list-style: none;
}

.console .mailroom .mail-file-list:empty {
	display: none;
}

.console .mailroom .mail-file {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 4px 2px 9px;
	border-radius: 999px;
	background: var(--pearl);
	font-size: 13px;
}

.console .mailroom .mail-file small {
	color: var(--muted);
}

.console .mailroom .mail-file button {
	padding: 0 4px;
	color: var(--muted);
	border: 0;
	background: none;
	font-size: 15px;
	line-height: 18px;
	cursor: pointer;
}

.console .mailroom .mail-file button:hover {
	color: var(--danger);
}

.console .mailroom #mail-message {
	margin: 8px 0 0 72px;
}

.console .css-editor {
	padding-bottom: 20px;
}

.console .css-search {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px;
}

.console .css-search input[type="search"] {
	flex: 1 1 260px;
	min-width: 0;
	padding: 10px 13px;
	color: var(--violet-deep);
	border: 1px solid var(--line);
	border-radius: 5px;
	background: white;
	font: 400 var(--fs-ui)/1.4 var(--body);
}

.console .css-search input[type="search"]:focus {
	border-color: var(--blue); outline: none;
}

.console .css-search .button {
	padding: 9px 14px; font-size: var(--fs-label);
}

.console .css-found {
	color: var(--muted);
	font-size: var(--fs-ui);
	font-weight: 700;
	white-space: nowrap;
	min-width: 84px;
}

.console .css-editor .linedwrap {
	max-height: 62vh;
}

.console .css-editor textarea {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 420px;
	max-height: 62vh;
	padding: 12px 14px;
	border: 0;
	background: white;
	color: var(--violet-deep);
	font: 400 15px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
	resize: vertical;
	white-space: pre;
	overflow: auto;
}

.console .css-editor textarea:focus {
	outline: none;
}

.console .css-editor textarea::selection {
	background: rgba(232,124,58,.34);
}

.console .css-hint {
	margin: 8px 0 0; color: var(--muted); font-size: var(--fs-ui);
}

.console .css-editor .comment-tools {
	margin-top: 14px;
}

.console .css-escape {
	padding-bottom: 60px;
}

.console .tpl-console {
	display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; align-items: start;
}

.console .tpl-files {
	max-height: 82vh; overflow-y: auto;
}

.console .tpl-files .css-search {
	margin-bottom: 6px;
}

.console .tpl-file {
	display: block;
	width: 100%;
	padding: 9px 12px;
	text-align: left;
	color: var(--violet-deep);
	border: 1px solid transparent;
	border-radius: 5px;
	background: none;
	font: 700 var(--fs-ui)/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
	overflow-wrap: anywhere;
	cursor: pointer;
}

.console .tpl-file:hover {
	border-color: var(--line); background: white;
}

.console .tpl-file.open {
	border-color: var(--blue); background: white;
}

.console .tpl-file.hit {
	box-shadow: inset 3px 0 0 var(--orange);
}

.console .tpl-meta {
	display: block; margin-top: 2px; color: var(--muted); font: 600 var(--fs-label)/1.3 var(--body);
}

.console .tpl-hits {
	display: block; color: var(--danger); font: 700 var(--fs-label)/1.3 var(--body);
}

.console .tpl-kind {
	font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}

.console .tpl-kind.fragment {
	color: var(--blue-deep);
}

.console .tpl-kind.shell {
	color: var(--danger);
}

.console .tpl-kind.static {
	color: var(--muted);
}

.console .tpl-kind-note {
	margin: -4px 0 12px; color: var(--muted); font-size: var(--fs-ui);
}

.console .tpl-kind-note.shell {
	color: var(--danger); font-weight: 700;
}

.console .tpl-line {
	display: block;
	width: 100%;
	padding: 3px 8px 3px 22px;
	text-align: left;
	color: var(--muted);
	border: 0;
	border-radius: 8px;
	background: none;
	font: 400 var(--fs-label)/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
	white-space: pre;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}

.console .tpl-line:hover {
	color: var(--violet-deep); background: white;
}

.console .tpl-lineno {
	display: inline-block; min-width: 2.6em; color: var(--lavender-mid);
}



/* ---------------------------------------------------------------------------
   The consoles, made to sit in this site.

   The rules above came from another site, where a console fills the window:
   buttons two fingers tall, panels with deep padding, labels in spaced
   capitals. Here a console is one part of a page a thousand pixels wide, so
   the rules below draw the same things small and plain. They come last and
   name the same things, so they are the ones which hold.
   ------------------------------------------------------------------------ */

.console .button {
	min-height: 0;
	gap: 6px;
	padding: 5px 14px;
	border: 1px solid var(--lavender-mid);
	border-radius: 5px;
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	box-shadow: none;
	transition: border-color .15s ease, background .15s ease;
}

.console .button:hover {
	transform: none;
}

.console .button:disabled {
	opacity: .45;
	cursor: default;
}

.console .button-primary,
.console .button-primary:hover {
	color: white;
	border-color: var(--orange-deep);
	background: var(--orange);
	box-shadow: none;
}

.console .button-primary:hover {
	background: var(--orange-deep);
}

.console .button-secondary,
.console .button-secondary:hover {
	color: var(--orange-deep);
	border-color: var(--lavender-mid);
	background: white;
	box-shadow: none;
}

.console .button-secondary:hover {
	border-color: var(--orange);
}

.console .button-danger,
.console .button-danger:hover,
.console .button-danger.confirming {
	color: white;
	border-color: #8c1d18;
	background: var(--danger);
	box-shadow: none;
}

.console .button-danger:hover,
.console .button-danger.confirming {
	background: #8c1d18;
}

/* The buttons which were given a size of their own are the size of the rest. */

.console .admin-pager .button,
.console .confirm .button,
.console .message-actions .button,
.console .post-tools .button,
.console .css-search .button,
.console .forum-form .button {
	padding: 5px 12px;
	font-size: 13px;
}

.console .comment-tools button {
	padding: 4px 11px;
	border-radius: 5px;
	font-size: 12px;
	letter-spacing: 0;
	text-transform: none;
}

/* A button which follows a field in a form stands clear of it. */

.console form > .button,
.console form > .comment-tools,
.console form > .admin-actions {
	margin-top: 10px;
}

.console .text-link,
.console .post-edit a,
.console .site-nav a {
	letter-spacing: 0;
	text-transform: none;
	font-size: 13px;
}

/* Panels. */

.console .admin-panel {
	padding: 12px 16px 14px 16px;
	border: 1px solid var(--lavender-mid);
	background: white;
	box-shadow: var(--shadow-soft);
}

.console .admin-panel-head {
	margin-bottom: 8px;
	padding-bottom: 0;
}

.console .admin-panel-head h2,
.console .limit-group h2 {
	margin: 0;
	font-size: 15px;
	line-height: 24px;
	background: none;
}

.console .admin-panel h3,
.console .admin-detail h3 {
	margin: 12px 0 4px 0;
	font-size: 13px;
	line-height: 20px;
	background: none;
}

.console .account-panels,
.console .admin-posts,
.console .mail-sent {
	gap: 14px;
	padding-top: 10px;
}

/* The two panels of the settings page are small forms, and are not stretched
   across the page. The messages page keeps its wider left-hand panel. */

.console .account-panels.settings {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	max-width: 780px;
}

/* The two panels are the same height, and the button of each sits at the
   foot of its panel, so the two buttons are level with one another. What a
   form has to say is said above its button, so saying it moves neither. */

.console .account-panels.settings .admin-panel,
.console .account-panels.settings form {
	display: flex;
	flex-direction: column;
}

.console .account-panels.settings form {
	flex: 1 1 auto;
}

.console .account-panels.settings form > .button {
	order: 2;
	align-self: flex-start;
	margin-top: auto;
}

.console .account-panels.settings form > .form-message {
	margin: 6px 0 10px 0;
}

.console section {
	margin: 10px 0;
}

/* Fields and their labels. */

.console label,
.console .admin-fields label,
.console .forum-form label {
	margin: 8px 0 3px 0;
	color: var(--violet-deep);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.console input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.console textarea,
.console select {
	min-height: 30px;
	padding: 4px 8px;
	font-size: 13px;
}

.console .admin-fields {
	gap: 8px 12px;
	margin-bottom: 10px;
}

.console .admin-fields input,
.console .admin-fields select,
.console .admin-search input,
.console .css-search input[type="search"] {
	padding: 4px 8px;
	border-radius: 5px;
	font: 400 13px/1.4 var(--body);
}

.console .form-message {
	min-height: 0;
	margin: 8px 0 0 0;
	font-size: 13px;
}

.console .form-message:empty {
	display: none;
}

.console .account-facts {
	gap: 3px 16px;
	font-size: 13px;
}

.console .field-note,
.console .limit-note,
.console .sql-hint,
.console .css-hint {
	font-size: 13px;
}

/* Tables. */

.console .admin-table th {
	padding: 4px 8px;
	letter-spacing: 0;
	text-transform: none;
	font-size: 13px;
	font-weight: 700;
}

.console .admin-table td {
	padding: 6px 8px;
}

.console .account-tag,
.console .state-pill,
.console .topic-tag,
.console .comment-edited,
.console .comment-hidden-tag,
.console .sql-flag {
	padding: 1px 7px;
	font-size: 12px;
	letter-spacing: 0;
	text-transform: none;
}

/* Messages, comments and the forum. */

.console .message {
	padding: 9px 12px;
	margin-bottom: 8px;
}

.console .comment,
.console .forum-post {
	padding: 11px 14px;
	margin-bottom: 8px;
}

.console .topic-row {
	gap: 14px;
	padding: 9px 14px;
	margin-bottom: 6px;
}

.console .board-card {
	gap: 16px;
	padding: 12px 16px 12px 24px;
	box-shadow: var(--shadow-soft);
}

.console .board-card:hover {
	transform: none;
}

.console .board-accent {
	width: 6px;
}

.console .board-list {
	gap: 8px;
	padding-bottom: 30px;
}

.console .topic-list,
.console .forum-thread,
.console .admin-limits,
.console .sql-console,
.console .css-escape {
	padding-bottom: 30px;
}

.console .limit-row {
	padding: 6px 0;
}

.console .limit-group {
	margin-bottom: 16px;
}

.console .sql-result {
	margin-top: 12px;
	padding: 10px 12px;
}

.console .confirm {
	padding: 10px 14px;
	margin-top: 10px;
}

/* Pushed to the foot, a button has no space of its own above it, so the last
   field of each form keeps the two apart. */

.console .account-panels.settings form > input:last-of-type {
	margin-bottom: 10px;
}

/* The list which chooses the stylesheet to edit, in the heading of its panel. */

.console .admin-panel-head h2 select {
	width: auto;
	min-width: 180px;
	font-size: 15px;
	font-weight: 700;
}


/* ===========================================================================
   9. The Codebot reference
   =========================================================================== */

/* The note beneath the heading of an item: the unit it is declared in, which
   links to the page of the unit, and the line. */

.reference-source {
	font-size: 13px;
	color: #666666;
	margin-bottom: 1em;
}

/* The list of items at the foot of a unit page, with the filter above it and
   the buttons which turn its pages below it. */

.reference-list {
	margin-top: 2em;
}

.reference-search {
	width: 100%;
	max-width: 320px;
	box-sizing: border-box;
	padding: 5px 8px;
	margin-bottom: 8px;
	font-size: 13px;
	border: 1px solid #c8c8c8;
	border-radius: 3px;
}

.reference-items {
	width: 100%;
	border-collapse: collapse;
}

.reference-items th {
	text-align: left;
	font-size: 13px;
	color: #666666;
	border-bottom: 1px solid #c8c8c8;
	padding: 4px 8px;
}

.reference-items td {
	padding: 3px 8px;
	border-bottom: 1px solid #e4e4e4;
}

/* Kind and line are narrow, and the line is a number. */
.reference-items td:nth-child(2) {
	width: 1%;
	white-space: nowrap;
	color: #666666;
}

.reference-items td:nth-child(3) {
	width: 1%;
	white-space: nowrap;
	text-align: right;
}

/* A child is indented one step further than its parent. */
.reference-items td.reference-depth-1 {
	padding-left: 28px;
}

.reference-items td.reference-depth-2 {
	padding-left: 48px;
}

.reference-pager {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	font-size: 13px;
	color: #666666;
}

.reference-pager button {
	font-size: 13px;
	padding: 3px 10px;
	cursor: pointer;
}

.reference-pager button:disabled {
	cursor: default;
}