/*! areabeyond.css */
/* --------------------------------------------------------------
	* additional styles added for the AreaBeyond game app
-------------------------------------------------------------- */

body {
	background-color: #333;/* overrides from index.css but still overflow hidden. not really shown. */
}
body,
div,
td,
p,
ul,
ol,
button,
input,
select,
textarea {
	font: 1.3rem/1.25 'Orbitron', Arial, sans-serif;/* 27px */
	letter-spacing: 0.125rem;
	word-spacing: 0.25rem;/* custom fonts for site */
}


/* HEADING STYLES */
#areabeyond h1, #areabeyond .h1 { font-size: clamp(3.25rem, 4vw, 4.5rem); }
#areabeyond h2, #areabeyond .h2 { font-size: clamp(3rem, 2.7vw, 3rem); }
#areabeyond h3, #areabeyond .h3 { font-size: clamp(2.5rem, 2.25vw, 2.5rem); }
#areabeyond h4, #areabeyond .h4 { font-size: clamp(1.75rem, 1.85vw, 2rem); }
#areabeyond h5, #areabeyond .h5 { font-size: clamp(1.25rem, 1.4vw, 1.5rem); }
#areabeyond h6, #areabeyond .h6 { font-size: clamp(1rem, 1.5vw, 1.325rem); }


/* --- Forms override styles --- */
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	/*background-image: none; clear gradient*/
	border-color: #CCC #666 #666 #CCC;
	color: #333;
}

button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
	border-color: #666 #CCC #CCC #666;
}
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
	border-color: #999 #CCC #CCC #999;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
	background-color: #F2F2F2;
}

option,
textarea {
	padding: 1px;
}


#inputprompt {/* form */
	background-color: #AB0616;/* 333, B00 */
	margin: 0 !important;/* for IE?! */
	white-space: nowrap;
	overflow: hidden;
	font-size: 2.15vw;
}
#inputprompt fieldset {
	border: none;
	color: #B4B4B4;
	font-family: 'Courier New Bold', 'Courier Bold', 'Courier New', Courier, monospace, Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}
#inputprompt fieldset input {
	margin: 0.125rem 0;
}
.cursor {
	font-size: 1.75rem;
	line-height: 1.75;
	font-family: 'Courier New', Courier, monospace !important;
	font-weight: bold;
	/* text-decoration: blink;  cute, Moz only - so moved to jq $.animate() */
	vertical-align: bottom;
}
#textprompt {/* text input */
	background: #CCC; /* 000 !imp */
	font-size: 1.5vw;
	font-weight: bold;
	margin-right: 0.75rem !important;
	width: 55%;
}
#inputprompt a {
	text-decoration: none;/* (reminder) could skip this, stylistic */
}
#inputprompt input[type="submit"] {
	font-size: 1.35vw;
}


/* --- Tables override styles --- */
main#command table, #history table {
	width: 92%;/* for full.  otherwise use .widthinitial */
	border-collapse: collapse;
	border-spacing: 0;
	margin-left: 7.5em;
}
th {
	background-color: #666;
	color: #F99;
	/* 
	font-size: .8em;
	height: 5px;
	*/
}
#abgame main#command td {
	font-size: auto;/*0.71em*/
}


/* --- Customized lists styles --- */






/* ### LAYOUT ### */
#main-col {
	position: relative;
	box-sizing: border-box;
	background: #333 url(../img/preloader-32-red.gif) no-repeat 50% 50%;/* preload the preloader. change to svg or fa-spin? */
	background-size: 33.33%;/* bigger preloader */
	width: 100%;
	height: 97%;/* 3% left for footer */
	font-size: 1.5vw;
}
#displaybar {
	overflow: hidden;
	height: 16%;/* 15%, 7.25em */
	padding-right: 10.5%;/* 5.5em */
	background:
		radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
		radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
		radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
		radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
		radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
		radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
		radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
		radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
		linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
		linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
	background-color: #300;
	background-size: 100px 100px;
/* alternate bg. 	to do: make this bg specific to the room you're in?:
	background-color: #666;
	background-image: url(../img/skyscrapers.jpg);
	background-position: 100% 50%;
	background-repeat: repeat;
*/
	color: #DDD;
	font-weight: bold;
	/*font-size: 1.6vw;*/
	font-size: 2.175vh;
}
#scoreboard > section {
	background-color: rgba(119, 68, 119, .6);/* #747 and opacity */
	border: 2px solid #96F !important;
	width: max-content;
	margin: .6rem;
	padding: .05rem .4rem .15rem .45rem;
}
#displaybar h4 .bright {
	color: #FC6;
}
#displaybar #avatars img {/* avatars for room */
	width: 5rem;
}
#displaybar #avatars img.svg {
	width: 10.5rem;
	margin: -0.75rem -2rem;/* because of large padding in charactercreator SVGs */
}
#skirt {
	position: absolute;
	width: 100%;
	height: 1rem;
	right: 17px;/* 1.1em or width of scrollbar */
	background: transparent url(../img/skirt.gif) repeat-x 0px 0 !important;
	border-top: 4px solid #ab0616;
	z-index: 9;
}
.touch #skirt {/* mobile only */
	right: auto;/* has no scrollbar */
}
main#command {
	box-sizing: border-box;
	z-index: 3;
	width: 100%;
	height: 78%;
	/*font-family: monospace; */
	background: #222 url(../img/newstars-vela.jpg) repeat 200px 0;
	background-attachment: fixed;
	vertical-align: text-bottom;
	overflow-x: hidden;
	overflow-y: scroll;
}
#history main#command { overflow: auto; }
main#command iframe {
	width: 100%;
	height: 100%;
	border: none;/* moz */
}
main#command section,
main#command div,
main#command p {
	font-weight: 500;
	color: #CCC;/* fallback color for history etc */
}
main#command strong,
main#command b,
main#command .bold {
	font-weight: 900;
}
#abgame main#command .line {
	margin: .2em 0 0 0;
	padding: 0;
	color: #75D075;
	opacity: 0.40;
}
#abgame main#command .line:nth-last-child(5) {
	opacity: 0.52;
}
#abgame main#command .line:nth-last-child(4) {
	opacity: 0.64;
}
#abgame main#command .line:nth-last-child(3) {
	opacity: 0.76;
}
#abgame main#command .line:nth-last-child(2) {
	opacity: 0.88;
}
#abgame main#command .line:last-child {
	opacity: 1;
}
main#command .response {
	margin-bottom: 1em !important;
	color: #FFF;/* fall back if no P tag? */
}
main#command .response > p {
	margin-bottom: .5em;/* tighter than standard */
	color: #D0D0D0;/* FFF or F3F3F3 ? */
}
main#command td { padding: 2px; background-color: #444; color: #E6FFBF; }/* who */
main#command .indent {
	margin-left: 5.5em;/* deeper than common content, to alot for timestamp */
}
main#command q {
	color: #BBF;/* brighter than Common, and than links */
}
main#command ol { margin-left: 2.75em; }
main#command li {
	color: #d0d0d0;
}
main#command .brick strong {/*inside who*/
	background: transparent url(../img/nav-arrow-lt-closed.gif) no-repeat 0 0;
	padding-left: 1em;
}
#abgame small, #history small {/* timestamp, examine, etc */
	color: #9C6;
	font-weight: bold;
}
#abgame small.timestamp {
	display: inline-block;
	width: 6em;
	color: #FC6;
}
#history small.timestamp {/* override width for history, due to long date */
	width: 21em;
}
#conversation img {
	max-width: 29%;/* for img.SVG and small screens- 19%?? */
	vertical-align: text-top;
}
#conversation img.svg {
	max-width: 225px;/* East, etc? */
	vertical-align: middle;
}
#conversation img.avatar {
	float: right;
	max-width: 12rem;
}
#conversation {
	border-left: 3px double #ab0616;
	padding: .25em;
}
#conversation > p {
	color: #EEE;/* FFC? FFF? */
}
#conversation em { color: #9D4; }/* notices.#693, #390, green */

.brightgreen { color: #3f0 !important; }/* welcome name em */
#informative {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #666 url(../img/lotusroot-tile-66.gif) repeat;
	height: 6%;/* 3em */
	font-size: 2.1vw;/* 1.75vh */
	font-size: 2vh;/* should scale with 6% height */
	vertical-align: middle;
}
#infobar {
	border: 1px solid #596f80;
	color: #000;
	font: .975em bold Verdana, Arial, Helvetica, sans-serif;
	vertical-align: middle;
	white-space: nowrap;
	overflow: hidden;
}
#infobar * { font-weight: 700; }
/* replaced previous connection images with font-awesome here. also replaced transparent class with alpha channel to show lotus bg: */
#infobar.ready   { background-color: rgba(204, 255, 204, 0.65);/* 	while ready for command */ }
#infobar.loading { background-color: rgba(170, 204, 255, 0.65);/* 	while loading */ }
#infobar.connerr { background-color: rgba(255, 204, 255, 0.65);/* 	on connection error */ }
#infobar.timeout { background-color: rgba(255, 204, 255, 0.65);/* 	on timeout error */ }
#infobar #connicon-ready,
#infobar #connicon-loading,
#infobar #connicon-connerr,
#infobar #connicon-timeout {
	display: none;/* shown as needed below, swapping classes during AJAX */
	width: 4rem;
	text-align: center;
}
#infobar.ready #connicon-ready,
#infobar.loading #connicon-loading,
#infobar.connerr #connicon-connerr,
#infobar.timeout #connicon-timeout {
	display: block;/* show one at at time */
}
#infobar strong { color: #009; }
#infobar a { background-color: #AFA; }
#infobar a:hover { background-color: #369; }
#footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3vh;/* 1.5em */
	background-color: #336;
	text-align: center;
	font-size: 1.75vh;/* should scale with 3% height */
}
#footer ul {
	font-size: .87em;
	list-style-type: square;
	margin: .25em 0 0;
}
#footer li {
	color: #fec;
	display: inline;
	margin: 0 .75em 0 .75em;
}



#areabeyond #supporting {
	top: 0;
	background-color: #779;/* 888. #99c was awfully colorful */
	background-image: linear-gradient(45deg, #779 0%, #779 25%, #888 25%, #888 50%, #779 50%, #779 75%, #888 75%);
	background-size: 10px 10px;
	width: 40%;
	height: 100vh;
	margin: 0;
	padding: .5vh .5vw;
}

#areabeyond #supporting form.absbottom > div {
	height: 3rem;
	margin: 0;
}



#util-head {
	background-color: #222;
	border: .5em solid #003;
	border-bottom: none;
	text-align: center;
	opacity: 0.5;
}
.boxhead {
	background-color: #636;
/*	background: transparent url(../img/gradient3.gif);*/
	padding-left: .35em;
	border-bottom: 2px solid #636;
}
.boxhead:hover {
	background-color: #303;
	cursor: pointer;
}
.boxhead > h5 {
	position: relative;
	line-height: 1.225;
	color: #FF3;
}
.rollicon {
	position: absolute;/* so it never wraps */
	top: .2rem;
	right: calc(0.85vw - 3px);
	width: 1rem;
	text-align: center;
}
section#supportmenu .rollicon a {
	display: block;
	background-color: transparent;
	margin-top: 12px;
	width: 0;
	text-decoration: none;
	color: rgba(255,200,55,0.75);
}
section#supportmenu .rollup {
	background: transparent;
	margin: .5rem 0;
}
.boxcontent {
	background-color: #CCF;
	border: 0 solid #636;
	border-width: 0 .25em .25em;
	border-radius: 0 0 1em 1em;
	height: auto;/* IE7 also liked 12.5% */
	padding: 0 .25em .25em;
	font-size: .8em;
}
#roll-whohere,
#roll-whothere,
#roll-tools {
	overflow: hidden auto;
}
#roll-whohere {
	max-height: 15.75rem;/* fits 9 up to players without statuses, 5 with, before scrolling starts. don't use VH */
}
#roll-whohere li p {
	border-top: 1px solid #369;
}
#roll-whohere li:first-child p {
	background: #EEF;
	border-top: none;
}
#roll-tools {/* Exception to above: fits map height and lots o links */
	height: 6.75rem;
}
#roll-tools li {
	line-height: 1.5rem;/* leaves room for the accesskey underlines */
}
#roll-whothere {
	height: 5.5rem;
}
#roll-adminmod,
#roll-whothere {
	display: none;/* start out closed */
}
#supporting div a.button {/* small emote/help btns and imgs */
	display: inline-block;
	margin: 0.1rem;
	padding: 0 0.2rem 0.1rem 0.25rem;
	min-width: 1.5rem;
}
#roll-speech > div > a > span.underline {
	line-height: 1.2rem;
}
#roll-speech img {
	width: 2rem;
}
emoji-picker {
	--background: #CCF;
	--border-color:#AAD;
	--border-size: 1px;
	--button-hover-background: #EEF;
	--input-border-color: black;
	--input-placeholder-color: #C0C;
	--emoji-padding: .25rem;
	--num-columns: 11;
	--emoji-size: 1.25rem;
	height: 15rem;
}
emoji-pick input.search {
	background-color: white;
}
.boxcontent h1 { font-size: 2.5rem; color: #FFF; }
.boxcontent h2 { font-size: 2rem; color: #06A; border: 0; }
.boxcontent h2 { padding-top: 0.5rem; }
.boxcontent ul {
	margin: 0 0 0 1.25rem; /* bullet indent */
}
.boxcontent ul.inline {
	margin: 0;
}
.boxcontent li {
	margin-bottom: .1rem;
	list-style-type: square;
	color: #C03;
	white-space: nowrap;
}
.boxcontent li p {
	margin-left: -.25rem;/* tighten up after bullet before text */
}
.boxcontent p {
	margin: 0;
	line-height: 1.05;
	letter-spacing: 1px;
}
.boxcontent .flex > a {
	flex: auto;
}
.boxcontent img {/* smiley emoticons, etc. */
	margin: 0 2px 2px;
}

.tools a { color: #DDD; background: red; }
.tools a:visited { color: #FFF; }
.tools a:hover { color: #FFF; text-decoration: none; }
.tools a:active { color: #C60; text-decoration: none; }



#movemap {
	display: inline;
}
#movemap div {
	display: block;
	float: left;
	width: 84px;
	height: 78px;
	margin: .35em .5em 0 0;
	background: #AAA url(../img/movemap.gif) 0 12px no-repeat;
	border: 1px solid #600;
	text-align: center;
	line-height: 0;
}
#movemap h6 {
	margin: 0 0 .5em;
	background: #600;
	font-size: 10px;
	color: #FFF;
}





.fpo {
	background-image: url(../img/fpo.gif);
	background-position: 50% 50%;
	background-repeat: no-repeat;
}


/* blockquote - guest note, starter note */
main#command blockquote {
	display: block;
	position: relative;
	background-color: #E3D5A3;
	border: 0.125rem solid #444;
	border-radius: 0;
	width: 24rem;
}
main#command blockquote::before, 
main#command blockquote::after {
	position: absolute;
	top: 0;/* starter note, fortune */
	left: -0.75%;
	height: 2.5rem;
}
main#command blockquote::after {
	top: calc(100% - 2.75rem);
	right: 1%;
	left: auto;
}
main#command blockquote.wide {
	width: 36rem;
}
main#command blockquote p {
	border: none;/* removing from main#command p */
	color: #000;
	font-family: "Apple Chancery", "Zapf Chancery", "Lucida Calligraphy", "Lucida Handwriting", "Monotype Corsiva", "Brush Script", "Brush Script MT", "Comic Sans MS", "Script MT", ZapfChancery, "SnellRoundhand Script", "Spumoni LP", "Ruling Script Two", Caliban, "Freestyle Script", "Ashley Script MT", Linoscript, script, cursive, fantasy;
	font-size: 0.75vw !important;
	margin: 0.25rem;
}
main#command blockquote ul {
	font-size: .92rem;
	margin-left: 4rem;
}
main#command blockquote li {
	color: #000;
}
main#command blockquote em {
	color: #900;
}
main#command blockquote a {
	color: #600;
}

/*begin notices*/
.debugbox,
.historybox,
.welcomebox {
	position: fixed;
	top: 20vh;
}

.debugbox {
	background: rgba(238,238,255,.8) url(../img/error-exclaim.gif) no-repeat 5px 6px !important;/* #EEF trans */
	border: 5px double #C93;
	width: 90vw;
	left: 2vw;
	z-index: 6;
}
.debugbox > div {
	font-family: Arial,Helvetica,sans-serif;/* undo Orbitron */
	font-size: 0.75vw;
}
.debugbox p { /* same as .error */
	color: #F30;
	font-weight: bold;
}
.debugbox img {
	position: absolute;
}
.debugbox img:after {
	clear: right;
}
.historybox {
	left: 16%;
	background-color: rgba(207, 220, 230,.8);
	border: 5px double #596F80;
	width: 62%;
	padding: .5rem .5rem 0;
	/* font-family: monospace; */
	letter-spacing: 2px;
	text-align: center;
	text-transform: uppercase;
}
.historybox h3, .historybox h5 {
	color: #900 !important;/* 596F80 */
}
.welcomebox {
	left: 3%;
	background-color: rgba(204, 153, 204,.8);/* C9C trans */
	border: 5px double #A0C;
	width: 89%;
	padding: 0 1em;
	font-size: .92em;
	z-index: 7;
}
.transparentNotice {/* welcome */
	padding: .25em .25em 0 3.2em;
	z-index: 8;
	/* For IE8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#ffcc66')";
	/* For IE5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#ffcc66');
}
.interstitial {
	position: fixed;
	width: 50%;
	height: 2.75em;
	top: 32%;
	background-color: #CFDCE6;
	border: 1px solid #596F80;
	/* border: 1px solid #0f0; */
	margin: 0 1.5em;/*help center on the debug notice*/
	padding: 1em .5em .75em .5em;
	color: #596F80; 
	/* font-family: monospace; */
	letter-spacing: 2px;
	text-align: center;
	text-transform: uppercase;
}
div.notice1, div.notice2, div.notice3, div.notice4 {
	border-color: #C0C;
	background: #C9C;
}
div.notice2 {
	background: #FFD9BF;
	border-color: #FFB380 !important;
}
div.notice3 {
	background: #BFE4FF;
	border-color: #80C9FF !important;
}
div.notice4 {
	background: #E6FFBF;
	border-color: #CF8 !important;
}
div.notice {
	background: #FFFF80;
	background-color: #BFFFBF;
	border: 1px solid #F30;
	border: 1px solid #008F00; 
	color: #000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	line-height: 14px;
	line-height: 16px;
	margin: 10px;
	margin: 1px;
	padding: 5px;
	padding: 6px 6px 10px 14px;
	width: 400px;
}
div.notice a { color: #000; }
div.notice a:visited { color: #000; }
div.notice a:hover { color: #000; }
div.notice a:active { color: #000; }

/* end notices */

/* utility classes */
.columns {
	float: left;
	/*width: auto;*/
	margin: 4px;
}
.util {
	border: 1px solid #BFBDAC;
	background: #D9D7C3; 
	padding: 0px;
	margin: 10px;
}
.descriptive, .error {
	font-weight: bold;
	line-height: 1.25em;
}
.say { color: #E6FF80 }
.shout {
	color: #FC0;
	font-weight: bold;
	text-transform: uppercase;
}
.info { color: #FFC; }/* mostly screen output */
.action { color: #80C9FF; }/* emote too. fixed from 80C9FFF ?! */
.divine { color: #FFE500 !important; font-weight: bold !important; }
.doing { color: #960; }
.entro { color: #F9F69F; }

.role-guest { color: #FFF; }						/* white   */
.role-player { color: #969; }						/* purple . or 969 or 906 or 933*/
.role-associate { color: #900; }					/* crimson */
.role-citizen { color: #3C0; }						/* green   */
.role-scrivener { color: #809FFF; }					/* blue    */
.role-tester { color: #C00; }						/* red     */
.role-leader { color: #FF6; font-weight: bold; }	/* gold    */
.role-elder { color: #EDE; font-weight: bold; }		/* silver  */
.role-moderator { color: #000; }					/* black   */
main#command .role-moderator { background: #444; font-weight: bold; }
.role-admin { color: #F90; font-weight: bold; }		/* orange  */
.idle { color: #666; font-size: .8em; }


/*** anchor links styles ***/
a:link,
a:visited,
a:active {
	color: #A30;
	text-decoration: underline;
}
a.button { /* link made to look like a form button - speech buttons. place after :visited */
	padding: 1px 4px;
	border: 3px double;
	border-color: #CCC #999 #999 #CCC;
	color: #333 !important;
	background: #FFF url(../img/button-bg.gif) repeat-x;
	font-weight: bold;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
}
.boxcontent a.button {
	margin: 0;/* only impacts l/r */
	border: 2px solid;
	border-color: #CCC #999 #999 #CCC;
	color: #C60 !important;
}
#movemap a {
	display: inline;
	padding: 1px;
	text-decoration: none;
	font-family: monospace;
	font-size: 12px;
	line-height: 18px;
}
#movemap a.bold {
	color: #000;
}
main#command a { color: #AFAFE3; }
a:visited {
	color: #C60;
}
main#command a:not(.button):visited { color: #CFC; }
a:not(.button):hover {
	background-color: #C60;
	color: #FFF !important;
	text-decoration: none;
}
main#command a:not(.button):hover {
	background-color: #066;
}
a.button:hover {
	background: #FC6;
	color: #000 !important;
}
a:active {
	background-color: #600;
	color: #CCC !important;
	text-decoration: underline;
}


/*placeholder for chat stylezz*/
#connection span {
	color: #9C9;
}
#conversation > p {
	border-bottom: 1px dotted #555;
	margin: 0;
	padding: .25em 0 .25em 0;
}
#conversation span.label {
	background: #C6C;
	margin: 0 5px 0 0;
	padding: 2px 6px;
	border-radius: 5px;
	font-weight: bold;
	color: #FEE;
}
.connected {
	color: #CCFF80;
}
/* modals */
.fixedSizedTab {
	/* display:  block;
	position: absolute;
	inset: 0;
	margin-bottom:10px;
	margin-right:0px;
	margin-left:0px; */
	height: calc(100% - 3.5rem);
	overflow: hidden;
}

#dialogTabs,
#dialogAvatarAccordion {
	height: 100%;
}

/* poker: */
.card {
	display: inline-block;
	border: 2px solid #AAA;
	background-color: #F7F7F7;
	margin-right: .35em;
	padding: 3px;
	width: 1.6180339887498948482045868343656em;/* phi */
	height: 2.6180339887498948482045868343656em;/* phi^2 */
	text-align: center;
	color: #999 !important;
}
.card span {
	margin-top: .2em;
	font-size: 1.1em;
	letter-spacing: -.08em;
}

.commanding {/* dragon img */
	position: fixed;
	left: 0;
	bottom: 12%;
	max-width: 100% !important;
}

/* iframes */
#avatar-upload,
#avatar-photobooth,
.admin-tools {
	width: 100%;
	height: 100%;
	background: #711;
	overflow-y: scroll;
}






/* Scrollbars - fancy minimal style.  Using a class to reduce usability/accessibility issues. Decided against fakescroll.js or nicescroll. Considered perfectscroller.com, but it uses a fake scrollbar = bad for accessibility.  Keep an eye on the Fall 2023 Chrome/Edge refresh - appears to implement this for Edge at least, and lots of roundness, may be less visible on Win10 than Win11: */
.styled-scrollbars {
	scrollbar-color: var(--bs-secondary) transparent;/* Standards - 1. Foreground/Thumb, 2. Track/Background */
}
/* chrome/edge not following standards yet 2023: */
.styled-scrollbars::-webkit-scrollbar {
	width: 0.1875rem;
	height: 0.1875rem;
}
.styled-scrollbars:hover::-webkit-scrollbar {
	width: 1rem;/* Mostly for vertical scrollbars */
	height: 1rem;/* Mostly for horizontal scrollbars */
}
.styled-scrollbars:hover::-webkit-scrollbar-thumb { /* Foreground */
	background-color: var(--bs-secondary);
	border-radius: 0.5rem;
	border: 0.3125rem solid #fff;/* gutter. transparent doesn't work */
	border-width: 0.125rem 0.3125rem;
}
.styled-scrollbars.inverse:hover::-webkit-scrollbar-thumb { /* Foreground */
	background-color: var(--bs-primary90);
	border-color: #00263a;/* gutter for inverse. transparent doesn't work */
}
.styled-scrollbars:hover::-webkit-scrollbar-track { /* Background */
	background: transparent;
}




/* 
	Begin responsive media queries. overriding defaults above.
	Initially basing these on screen width, and then adding specialized device styles as well:
*/

/* 1. very small screens/windows */
@media only screen and (max-width: 319px) {
	main#command {
		font-size: 2vw;
	}
	.debugbox,
	.welcomebox {
		width: 85vw;
	}
	#areabeyond #supporting {
		height: 91vh;
		font-size: 4vw;
	}
}
/* 2. all smaller screens including phones. see 667 */
@media only screen and (min-width: 320px) and (max-width: 447px) {
	main#command {
		font-size: 2vw;
	}
	.debugbox,
	.welcomebox {
		width: 86vw;
	}
	#areabeyond #supporting {
		height: 91vh;
		font-size: 4vw;
	}
}
/* Smartphone devices (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
}
/* Smartphone devices (portrait) only (altered) ----------- */
@media only screen and (max-device-width: 414px) and (orientation: portrait) {
	#main-col {
		height: 99.5%;
	}
	#supportmenu {
		font-size: 4vw;
	}
	main#command {
		font-size: 2.25vw;
	}
	#areabeyond #supporting {
		width: 70%;
		height: 88vh;
		font-size: 3.65vw;
	}
	#roll-adminmod,
	#roll-whothere {
		display: block;/* vert room show all */
	}
	#roll-tools {
		height: auto;
	}
}
/* Smartphone devices (landscape) only (altered) ----------- */
@media only screen and (min-width: 321px) and (max-device-width: 736px) and (orientation: landscape) {
/*	html,
	body,
	main#command {
		height: auto;
	}
	html#index {
		overflow-y: auto;
	}
	#main-col {
		width: auto;
		height: auto;
	}
	main#command {
		font-size: 2.75vw;
	}
*/
	#supportmenu {
		font-size: 2.2vw;
	}
	input#menulock + label {
		top: 0;
		/*right: 7em;*/
	}
	.touch #areabeyond #supporting {
		position: absolute !important;/* not fixed pos; allow to scroll on landscape phone only! */
		width: 60%;
		height: 93vh;
	}
	#areabeyond #supporting {
		font-size: 3vw;
	}
	#roll-adminmod,
	#roll-whohere,
	#roll-whothere,
	#roll-speech {
		display: none;/* start out closed */
	}
	#roll-tools {
		height: auto !important;
	}
}

/* 3. small screens including phones. see 447 */
@media only screen and (min-width: 448px) and (max-width: 667px) {
	main#command {
		font-size: 2vw;
	}
	.debugbox,
	.welcomebox {
		width: 88vw;
	}
	#areabeyond #supporting {
		height: 88vh;/* at high end, or 90% at low end? */
		font-size: 2.2vw;/* at high end, or 3.2vw at low end? */
	}
}

/* 4. ~tablet sized windows - portrait */
@media only screen and (min-width: 668px) and (max-width: 827px) {
	main#command {
		font-size: 1.9vw;
	}
	#supportmenu {
		font-size: 3vw;
	}
	#areabeyond #supporting {
		min-width: 375px;
		height: 83vh;/* 85% ? */
		font-size: 2.5vw;/* high end, or 2.75vw low end ? */
	}
	.welcomebox {
		left: 1%;
		width: 90%;
	}
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
	#main-col {
		height: 94.5%;
	}
	#supportmenu {
		font-size: 3vw;
	}
	#areabeyond #supporting {/* tall and wide */
		top: 0;
		height: 65vh;/* unneeded due to always applying below one with px-ratio2? */
		min-width: 510px;/* unneeded due to always applying below one with px-ratio2? */
		font-size: 3vw;
	}
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
	#areabeyond #supporting {
		top: 0;
		height: 81vh;
	}
}
/**********
iPad 3 and iPad Pro
**********/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
	#main-col {
		height: 99.25%;
	}
	#areabeyond #supporting {/* tall and wide */
		height: 87vh;
		min-width: 425px;
	}
	#scoreboard {
		font-size: 1.35rem;
	}
}
@media only screen and (min-width: 1025px) {/*														Desktops */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width: 1224px) {/* lock #areabeyond #supporting as visible from this point up	*/
	#main-col {
		width: 70%;
	}
	#displaybar {
		padding-right: 0;
	}
	main#command {
		font-size: 1.15vw;
	}
	.welcomebox,
	.historybox,
	.debugbox {
		left: 3vw;
	}
	.welcomebox,
	.debugbox {
		width: 63vw;
	}
	#inputprompt {
		font-size: 1.5vw;/* 70% x 2.1vw */
	}
	#areabeyond #supporting {
		transform: translateX(0);
		width: 30%;
		height: 97vh;
		font-size: 1.5vw;
	}
	#supportmenu > label {
		display: none;
	}
	.commanding {/* dragon img */
		max-width: 70% !important;
	}
}
@media only screen and (min-width: 1366px) {/*			fonts can get too huge							Desktops - extra wide */
	/* none */
}
@media only screen and (min-width: 1440px) {/*			fonts can get too huge							Desktops - very wide */
	#areabeyond #supporting {
		height: 97vh;
	}
	.historybox,
	.debugbox > div {
		font-size: .835vw;
	}
}
@media only screen and (min-width: 1600px) {/*			fonts can get too huge							Desktops - very extra wide */
	main#command {
		font-size: 1vw;
	}
	#areabeyond #supporting {
		height: 97vh;
	}
}
/* Large screens ----------- */
@media only screen  and (min-width: 1824px) {
	#areabeyond #supporting {
		height: 98vh;
	}
}
@media only screen and (min-width: 1920px) {/*			extra wide - fonts can get too huge				Desktops - seriously already */
	main#command {
		font-size: .9vw;
	}
	.debugbox > div {
		font-size: .9vw;
	}
	#areabeyond #supporting {
		height: 97vh;
		font-size: 1.35vw;
	}
}


/* iPhone, 3 & 3G 3.5" 320x480px 163ppi */

/* iPhone 4 & 4s ----------- 3.5"(diagonal) widescreen Multi-Touch display 640(/2)px x 960(/2)px at 326ppi */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
	/* iPhone 4s/iOS7 doesn't seem to understand transform, so menu always showing. Adding display none/block. */
	.touch #areabeyond #supporting {
		display: none;
	}
	.touch input#menulock:checked ~ #areabeyond #supporting {
		display: block;
	}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
}

/* iPhone 5, 5C & 5S ----------- 640x1136px */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
}

/* iPhone 6 ----------- 4.7" 750x1334px 326ppi */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
}
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
}

/* Nexus 5X ----------- 5.0" 1080p 462ppi? */
@media only screen and (min-device-width: 412px) and (max-device-height: 732px) and (orientation: landscape){
}
@media only screen and (min-device-width: 412px) and (max-device-height: 732px) and (orientation: portrait){
}

/* iPhone 6+, 7+ ----------- 5.5" 1242×2208px at 401ppi, hardware downsampled to 1080×1920 screen */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
}
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}