/*! index.css */

/* --------------------------------------------------------------------
	* styles for the site index and -related content and admin pages
--------------------------------------------------------------------- */

#index {
	font: 16px/1.2rem Verdana, Arial, Helvetica, sans-serif !important;
}
body,
div,
td,
p,
ul,
ol,
dt,
dd,
button,
input,
select,
textarea {
	font: clamp(1.2rem, 1.65vw, 5rem)/1.2 'Orbitron', Arial, sans-serif;
	letter-spacing: 0.125rem;
	word-spacing: 0.25rem;/* custom fonts for site */
}
#index p,
#index dl,
#index ol,
#index ul,
#index dt,
#index dd,
#index h1,
#index h2,
#index h3,
#index h4,
#index h5,
#index h6,
#index form,
#index fieldset,
#index table {
	color: #063;
}
#index h1,
#index h2,
#index h3,
#index h4,
#index h5,
#index h6 {
	margin-top: 0.35rem;/* shorthand breaks Bootstrap row l/r */
	margin-bottom: 0.35rem;
	font-family: 'Exo 2', Minion, Cambria, 'Hoefler Text', Utopia, 'Liberation Serif', 'Nimbus Roman No9 L Regular',
		Times, 'Times New Roman', Georgia, Palatino, serif;
	letter-spacing: 0.05rem;
}
#index h1,
#index h2,
#index h3 {
	text-shadow: #fff 0 -2px 7px, #d82 -2px 2px 7px, #d82 2px 2px 7px;
}
#index #main-col > h1 {
	position: relative;
	height: clamp(2.5rem, calc(3.25vw + 1rem), 6rem);
	margin: 0;
	padding: 0.5rem 0;
	font-size: clamp(1.75rem, 3.35vw, 5rem);
	font-family: 'Exo 2', Revue, 'Revue Std', 'Revue BT', Renfrew, Review, 'MinstrelPosterWHGRegular', 'Quorum Medium',
		'Palatino Black', 'Optima ExtraBlack', 'Novarese Ultra', 'Minister Black', Hobo, 'Minion Black',
		MetaPlusBlack-Roman, 'Cooper Black', Aachen, 'Times ExtraBold', 'Tiepolo Black', 'Syntax UltraBlack',
		'Strayhorn MT ExtraBold', 'Stone Serif Bold', 'Slimbach Black', 'Shannon ExtraBold', 'Serpentine Medium',
		'Serif Gothic Black', 'Romic Medium', 'Wilke Black', 'Weiss ExtraBold', 'Versailles Black', 'Veljovic Black',
		Impact, Stencil, 'Utopia Black', 'Usherwood Black', 'Univers ExtraBlack', Poplar, 'Helvetica Black',
		'Futura ExtraBold', 'Arial Black', Mojo, 'TradeGothic Bold';
	font-weight: 900;
	background: #bcb;
}
#index h1 img {
	margin: 0 0.75rem .35rem 0.75rem;
	width: clamp(1.25rem, 3vw, 5.5rem);
}
.h1banner {
	position: absolute;
	top: 1rem;
	right: 6rem;
	background-color: #c60;
	border: 1px solid #063;
	padding: .25rem;
	font: bold small-caps italic 1rem/1.2 Verdana, Arial, Helvetica, sans-serif;
	font-size: clamp(.75rem, 1.35vw, 2rem);
	color: #fff; /*EE9*/
	text-shadow: none;
}
#index #main > section > h2 {
	font-size: 2.25rem;/* goes to variable over 1024 */
}
#index h4,
#index strong {
	color: #074;
}
main#main .captionbox td,
main#main .captionbox th {
	/* who */
	border: none;
	/* background-color: #444; */
	color: #e6ffbf;
}
#index .small p {/* size doesn't nest for some reason */
	font-size: 100%;
}

/* --- Forms styles --- */
button,
input[type='submit'],
input[type='reset'],
input[type='button'],
.button {
	background-color: #5b5;/* was 3C6. hover 093 */
	border-color: #6f9 #030 #030 #6f9;/* 3f9 . . 3f9 */
	/* background-image: none; clear gradient */
	/* background-image: url('../img/tiny/arrow.gif'); */
	border-radius: 0;
	color: #ff9;/* #d5ef98; */
}
button:hover,
input[type='button']:hover,
input[type='submit']:hover,
.button:hover {
	background-color: #093;
	border: 3px double #4f7;
	border-bottom-color: #030;
	border-right-color: #030;
	color: #ff6;
}
button:active,
input[type='button']:active,
input[type='submit']:active,
.button:active {
	background-color: #060;
	border-color: #393 #696 #696 #393;
	color: #df9;
}
input[type='radio'] {
	margin-top: 0.125rem;
}
input:hover.pressed {
	background-color: #063;
}
input.disabled,
button.disabled,
input.disabled:hover
button.disabled:hover {
	background-color: #777;
	color: #999;
}


/* --- Tables styles --- */
table {
	font-size: 0.8em;
}

.tools {
	background-color: #000;
	border: 2px solid #900;
	border-top: 8px solid #900;
	font-size: 0.7em;
	margin: 0 0 0.25em 0;
	padding: 2px;
}
.people {
	background-color: #000;
	border: 1px solid #777;
	color: #ccc;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	/* line-height: 14px; */
	margin: 5px 5px 5px 0px;
	padding: 3px 3px 5px 7px;
}

.descriptive {
	font-size: 0.85em;
	/* line-height: 0.95em; */
}

ul.tight li {
	margin: 0 0 0 1.25rem;
}
nav ul {
	border-bottom: 8px solid #c60;
	border-radius: 10px;
	margin: 0;
	font-weight: 500;
}
nav li {
	list-style-type: none;
	margin: 0;
}
li h6 {
	margin-bottom: 0;
	margin-top: 0;
}
li p,
ul.double li,
ol.double li {
	margin-bottom: 0.75em;
} /* double-spaced lists */

dl.aligned dt {
	clear: left;
	float: left;
	margin-right: 0.5em;
	text-align: right;
	vertical-align: middle;
	width: 30%;
}
dl.aligned dd {
	float: left;
	text-align: left;
	vertical-align: middle;
	width: 65%;
}

/*** anchor links styles ***/
a:link {
	color: #c60;
	text-decoration: underline;
}
a.plain,
.plain a {
	text-decoration: none;
}
h1 a {
	/* major header - override visited color, etc.)*/
	color: #c60 !important;
	text-decoration: none !important;
}
.jumplinks li a:before {
	margin-right: .15rem;
	content: '\f078'; /* fa-chevron-down  */
	font-family: 'Font Awesome 6 Duotone';
	font-weight: 600;
}
.jumplinks li a {
	/*background: transparent url('../img/nav-arrow-open.gif') no-repeat 0 .08em;*/
	display: block;
	padding-left: 1.5rem;
}
nav a#current {
	background-color: #fc6;
	font-weight: 700;
	color: #063;
}
nav a.icon {
	display: flex;
	background-color: #ee9;
	background-position: 0.5rem 50%;
	background-repeat: no-repeat;
	border-bottom: 1px solid #063;
	border-top: 1px solid #cfc;
	align-items: center;
	line-height: 1;
	padding: 0.5rem 0.5rem 0.5rem 2.5rem;
	text-decoration: none;
}
nav a.icon:hover {
	background-position: 0.6rem 60% !important;/* shift icon over and down */
	border-bottom: 1px solid #cfc;
	border-top: 1px solid #063;
	padding: 0.6rem 0.4rem 0.4rem 2.6rem !important;/* shift text over and down */
	text-decoration: underline !important;
}
nav a.icon .jumbo {
	padding: 0.25rem 0 0.75rem;
	line-height: 0.5;
}
.tools a {
	color: #ddd;
}

a:visited {
	color: #da0;
	text-decoration: underline;
}
.jumplinks li a:visited {
	color: #600;
}
.tools a:visited {
	color: #fff;
}
a:link:hover,
#index nav a:hover,
a:visited:hover {
	text-decoration: none;
	/* background-color: #bcb !important; */
	color: #063;
}
.tools a:hover {
	color: #fff;
	text-decoration: none;
}
.jumplinks li a:hover {
	color: #c60;
}
h1 a:hover {
	color: #ee9 !important;
} /*override drop-neon*/
a.button:hover {
	padding: 3px 3px 1px 5px;
	background: #093;
	color: #ff9 !important;
}
a:link:active,
a:visited:active {
	/* background-color: #9c9; */
	color: #fff;
	text-decoration: none;
}
.tools a:active {
	color: #c60;
}

/* Player pages */
#description {
	border: 3px solid #600;
	background: #fff;
	padding: 0.25em;
	contain: content;
}
#description img {/* Player Page .avatar */
	float: left;
	width: 12rem;
	height: auto;
	max-height: 14rem;
	object-fit: contain;
	margin: .5rem 1rem .5rem .5rem;
	border-bottom: 3px solid #666;
}
aside#float-end-50 {/* there can be only one; try parent flex and text justify */
	float: right;
	width: fit-content;
	max-width: 33%;
	height: 100vh;
	margin: .35rem 0 0 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	shape-outside:inset(calc(50% - 7.75rem) 0 );/* half the height of child 15.5 */
}
.captionbox {
	width: fit-content;
	background: #dedede;
	border: 2px dashed #999;
	padding: .35rem;
	text-align: center;
}
.captionbox > * {
	margin: .1rem auto;
}
.captionbox > div {
	height: 16rem;
}
.captionbox div > * {
	margin: 0;
	padding: 0.35rem 0 0;
	line-height: 1;
}
.captionbox img {
	/* constrain within reasonable space */
	width: 90%;
	max-width: 14.5rem;
	height: 7.25rem;
	object-fit: contain;
}
/* iframes */
#adminscr {
	display: block;
	width: 100%;
	height: 100%;
	background-color: #711;
	overflow: scroll;
}

a.icon,
h2.icon,
h4.icon,
span.icon {
	background-image: url('../img/tiny/atom.gif');/* default */
	background-repeat: no-repeat;
	background-position: 0 50%;
	background-size: 1.5rem;
	padding-left: 1.75rem;
}
#index h2.icon {
	background-size: 2.75rem;
	background-position: 0 25%;
	margin-bottom: 1.5rem;
	padding-left: 3.75rem;
	min-height: 4rem;
}
input.icon,
button.icon {
	background-repeat: no-repeat;
	background-size: 1.325rem;
}
.icon.guest {
	background-image: url('../img/tiny/rabbit.png');
}
.icon.register {
	background-image: url('../img/tiny/capsule.gif');
}
.icon.who {
	background-image: url('../img/tiny/owl.png');
}
.icon.about {
	background-image: url('../img/tiny/temple.gif');
}
.icon.commands {
	background-image: url('../img/tiny/gear.gif');
}
.icon.gameplay {
	background-image: url('../img/tiny/joystick.gif');
}
.icon.faq {
	background-image: url('../img/tiny/fire.gif');
}
.icon.news {
	background-image: url('../img/tiny/document.gif');
}
.icon.contact {
	background-image: url('../img/tiny/contact.gif');
}
.icon.admin {
	background-image: url('../img/tiny/wizard.gif');
}
.icon.login {
	background-image: url('../img/tiny/toadstool.png');
}
.icon.warning {
	background-image: url('../img/tiny/triforce.gif');
} /*triforce or alert?*/
.icon.play {
	background-image: url('../img/tiny/sword.gif');
}
.icon.shoot {
	background-image: url('../img/tiny/arrow.gif');
}
.icon.down {
	background-image: url('../img/tiny/arrow-down.png');
	background-position: 0 100%;
}
.icon.up {
	background-image: url('../img/tiny/arrow-up.png');
}
.icon.player {
	background-image: url('../img/tiny/trophy.gif');
}
.icon.time {
	background-image: url('../img/tiny/wristwatch.gif');
}
.icon.rt_arrow {
	background-image: url('../img/tiny/turn_right.gif');
}
.icon.map {
	background-image: url('../img/tiny/map.gif');
}
.h1banner .play {
	padding-left: 1.25rem !important;
	background-size: 1rem;
}

dl.aligned:after {
	/* not working, use BR.clear */
	clear: left;
}

/* Okay, now really doing some "common" styles to share for index & areabeyond. */

.biginline {
	font-size: 2.25em;
	font-weight: 700;
	line-height: 0;
}

.jumplinks h3,
#index .jumplinks h3 {
	text-shadow: none;
}
.jumplinks li {
	/* padding-left: 1.25rem; */
	text-indent: -1.25rem; /* for multi-line LIs indent; goes along with padding */
	font-size: 1.25rem;
	line-height: 1.25;
	color: #000;
	list-style-type: none;
	white-space: nowrap;
}
.jumplinks ol li {
	margin-left: 2em;
}

.jumplinks-head {
	background: #e3e3e3;
	padding-left: 1rem;
}
.jumplinks {
	background: #d4d4d4 url('../img/on-this-page.gif') no-repeat 95% 50%;
	border-top: 0.25em solid #063;
	border-bottom: 0.75em solid #ccc;
	margin-bottom: 1.25em;
	color: #063;
	font-size: 0.8em;
}

#camCapture,
#camDisplay {
	display: inline-flex;
	border: 4px solid #c60;
	margin-left: 2px;
}
#camCapture {
	width: 320px;
	height: 240px;
}

/* ### LAYOUT ### */
html#index { overflow: hidden; }
html body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #aaa;
	font-size: 1.25rem;
}
#index #main-col,
#supporting {
	position: relative;
	box-sizing: border-box;
	background: radial-gradient(#224422 15%, transparent 16%) 0 0, radial-gradient(#224422 15%, transparent 16%) 8px 8px,
		radial-gradient(rgba(255, 255, 255, 0.2) 15%, transparent 20%) 0 1px,
		radial-gradient(rgba(255, 255, 255, 0.2) 15%, transparent 20%) 8px 9px;
	background-color: #343;
	background-size: 16px 16px;
	height: calc(100vh - 1vw);/* boxing-sizing + 0border. minus margin */
	margin: 0.5vw;
	padding: 4.5vh 0.5vw;/* this makes the nice dark/patterned border via the bg */
	font-size: 2.5vw;
}
#index main#main {
	box-sizing: border-box;
	background-color: #fae9fa;
	height: calc(80vh - 1vw);
	margin: 0;
	overflow-x: hidden;
	overflow-y: auto;
}
#index .full main#main,
#index .dialog main#main {
	height: calc(94.75vh - 1vw) !important;
}
#index main#main > section {
	padding: 1vh 0.75vw;
}
#index #return-to-top {
	height: 3vh;
	width: 98%;
	padding: 0.35rem;
	font-size: clamp(.75rem, 1vw, 2rem);
	text-align: right;
}
#index #footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 99%;
	margin: 0.5%;
	background: #aaa;
	font-size: clamp(.65rem, 1.35vw, 1.25rem);
	text-align: center;
	color: #444;
}
#index #footer a {
	color: #eee;
}

#supportmenu {
	background: transparent;
	position: absolute;
	top: 0;
	right: 0;
	width: 420px;/* not sure why */
	max-width: 77%;
	height: 100%;
	pointer-events: none;
	font-size: 2.1vw;
}
#supportmenu * {
	pointer-events: auto;
}
input#menulock {
	display: none;
}
input#menulock + label {
	position: fixed;
	top: 0.35rem;
	right: 0.35rem;
	height: 4.25rem;
	max-width: 4.25rem;/* helps with hover chars */
	padding: 0.75rem .125rem 0 .35rem;
	background: #fd9;
	border: 6px solid #c60;
	border-radius: 6rem;
	font-size: 2.75rem;
	line-height: 0.75;
	color: #600;
	cursor: pointer;
	user-select: none;
	transition: 0.6s;
	opacity: 0.8;
	z-index: 11;
}
input#menulock + label:hover {
	padding: 0.75rem .125rem 0 0.375rem;
	color: #c60;
	/*background: #FC6;*/
}
input#menulock:checked + label {
	padding: 0.6rem 0 0 0.55rem;
	color: #c90;
}
input#menulock:checked + label:hover {
	color: #c60;
}
input#menulock + label:before{content:"\f07b"; font-family: "Font Awesome 6 Pro";}/* fa-folder */
input#menulock + label:hover:before{content:"\f07c"}/* fa-folder-open */
input#menulock:checked + label:before{content:"\f023\00a0"}/* fa-lock, nbsp */
input#menulock:checked + label:hover:before{content:"\f13e\00a0"}/* fa-lock, nbsp */
input#menulock + label:hover ~ #supporting,
#supporting:hover,
input#menulock:checked ~ #supporting {/* open the menu for: label hover, supporting hover, and checked/lock. 1st two (hovers) are hidden from touch devices so it can hide on uncheck, rather than keeping hover triggered */
	transform: translateX(0);
}
#supporting {
	position: fixed;
	top: -4px;
	right: 0;
	width: 33.3%;
	min-width: 280px; /* phones */
	border-bottom: 4px solid #c60;
	font-size: 1.95vw;
	transition: 0.5s;
	transform: translateX(132%);/* transform: translate3d(0,-125%,0) didn't work in my IE9 */
	z-index: 10;
}
#supporting h2 {
	margin: 0 0 0.35rem;
	font-size: clamp(1.75rem, 2.5vw, 5rem);
	font-style: italic;
}
#index #supporting form {
	/* login */
	background-color: #bcb;
	padding: 0 4px 0 0;
}
#supporting .bottom.left {
	margin-right: 3.75em;/* allow activity text to clear html5 logo */
}
#supporting .absbottom img {
	width: 2rem;/* HTML5 logo */
}
#supporting .bottom p img {/* HTML5 logo */
	height: 56px;
	width: 40px;
}
#util-main {
	position: absolute;/* just so z-index will work against the absbottom elements below it */
	width: 96%;
	z-index: 4;/* secondmost */
}

/* 
	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) {
	#index #main-col {
		height: 99.75%;
	}
	#index main#main {
		height: 92%;
		font-size: 5vw;
	}
	#index #supporting {
		height: 97%;
		font-size: 5vw;
	}
}
/* 2. all smaller screens including phones. see 667 */
@media only screen and (min-width: 320px) and (max-width: 447px) {
	main#main {
		height: 92%;
		font-size: 4vw;
	}
	#index #supporting {
		height: 96%;
		font-size: 4vw;
	}
}
/* 3. small screens including phones. see 447 */
@media only screen and (min-width: 448px) and (max-width: 667px) {
	#index main#main {
		height: 90%;
		font-size: 4vw;
	}
	#index #supporting {
		height: 94%;
		font-size: 3.75vw;
	}
}

/* Smartphone devices (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
}
/* Smartphone devices (portrait) only (altered)- Nexus5 ----------- */
@media only screen and (max-device-width: 414px) and (orientation: portrait) {
	#index #main-col {
		height: 99.5%;
		font-size: 3.5vw; /* *header)/copyright/rtt links */
	}
	#index main#main {
		height: 90%;
		font-size: 3.5vw;
	}
	#index #supporting {
		height: 94%;
		font-size: 4.5vw;
	}
	.h1banner {
		top: 2.75rem;
		right: 0.35rem;
	}
}
/* Smartphone devices (landscape) only (altered) ----------- */
@media only screen and (min-width: 321px) and (max-device-width: 736px) and (orientation: landscape) {
	html,
	body,
	#index main#main {
		height: auto;
	}
	html#index {
		overflow-y: auto;
	}
	#index #main-col {
		width: auto;
		height: auto;
	}
	#index main#main {
		font-size: 2.75vw;
	}
	#index .h1banner {
		top: 5em;
		right: 12em;
	}
	.touch #supporting {/* .touch requires Modernizr JS */
		position: absolute !important; /* not fixed pos; allow to scroll on landscape phone only! */
		top: 13px;
		height: 35em;
	}
	#index #supporting {
		font-size: 3vw;
	}
}

/* 4. ~tablet sized windows - portrait */
@media only screen and (min-width: 668px) and (max-width: 827px) {
	#index main#main {
		height: 90%;
		font-size: 3vw;
	}
	#index #supporting {
		min-width: 375px;
		font-size: 3vw;
	}
}

/* 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) {
	#index #main-col {
		height: 94.5%;
	}
	#index main#main {
		height: 80%;
	}
	#index #supporting {
		/* tall and wide */
		top: 0;
		height: 65%; /* unneeded due to always applying below one with px-ratio2? */
		min-width: 325px; /* 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) {
	/* #index #supporting {
		top: 0;
		height: 91%;
	}*/
}
/**********
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) {
	#index #main-col {
		height: 99.25%;
		max-width: 683px;/* 66.667% */
	}
	#index main#main {
		height: 91%;
	}
	#index #supporting {
		/* tall and wide */
		height: 95%;
		max-width: 341px;/* no effect (33.333%) */
	}
}

/* Desktops and laptops and iPad portrait ----------- */
@media only screen and (min-width: 1024px) {
	/* lock #supporting as visible	*/
	#index :not(.full) #main-col {
		width: 70vw;
		font-size: 2.25vw;
	}
	.h1banner {
		right: 1.25rem;
	}
	#index #main > section > h2 {
		font-size: 2.6vw;
	}
	#index #supporting {
		transform: translateX(0);
		top: 0;
		width: 28.5%;
		font-size: 1.66vw;
	}
	#index #supportmenu > label {
		display: none;
	}
}
@media only screen and (min-width: 1366px) {
	/*			fonts can get too huge							Desktops - extra wide */
	#index #main-col {
		font-size: 2vw;
	}
	#index #supporting {
		font-size: 1.75vw;
	}
}
@media only screen and (min-width: 1440px) {
	/*			fonts can get too huge							Desktops - very wide */
}
@media only screen and (min-width: 1600px) {
	/*			fonts can get too huge							Desktops - very extra wide */
	#index #main-col {
		font-size: 1.5vw;
	}
	#index main#main {
		font-size: 1.5vw;
	}
	#index #supporting {
		top: -5px;
		font-size: 1.48vw;
	}
}
/* Large screens ----------- */
@media only screen and (min-width: 1824px) {
	#index #main-col {
		height: 98%;
	}
	#index #supporting {
		top: 0;
		height: 98%;
	}
}
@media only screen and (min-width: 1920px) {
	/*			fonts can get too huge							Desktops - seriously already */
	#index #main-col {
		font-size: 1.5vw;
	}
	#index main#main {
		font-size: 1.5vw;
	}
	#index #supporting {
		font-size: 1.35vw;
	}
}

/* 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 #supporting {
		display: none;
	}
	.touch #index input#menulock:checked ~ #supporting {
		display: block;
	}
}