/*!	common.css */

/* --------------------------------------------------------------
	* Common shared styles preferred by GPB for each page. Load boostrap first (reset.css??).
	* Override with custom.css after.
	* portions adopted from Blueprint-css, and YUI base
-------------------------------------------------------------- */

:root {
	/* https://www.w3schools.com/cssref/css_colors.asp */
	--color-main: #063; /* SeaGreen		#2E8B57, DarkGreen		#006400 */
	--color-accent-dark: #c60; /* Darkorange		#FF8C00 */
	--color-accent-light: #FC6;
	--color-inverse: #600;
	/* to do: apply following space units throughought (.35em), investigate rem: */
	--space-unit:	1rem;
	--space-xxxxs: calc(0.125 * var(--space-unit)); 
	--space-xxxs:	calc(0.25 * var(--space-unit));
	--space-xxs:	 calc(0.375 * var(--space-unit));
	--space-xs:		calc(0.5 * var(--space-unit));
	--space-sm:		calc(0.75 * var(--space-unit));
	--space-md:		calc(1.25 * var(--space-unit));
	--space-lg:		calc(2 * var(--space-unit));
	--space-xl:		calc(3.25 * var(--space-unit));
	--space-xxl:	 calc(5.25 * var(--space-unit));
	--space-xxxl:	calc(8.5 * var(--space-unit));
	--space-xxxxl: calc(13.75 * var(--space-unit));
	--component-padding: var(--space-md);
	/* type scale: */
	--text-scale-ratio: 1.2;
	--text-xs: calc((1rem / var(--text-scale-ratio)) / var(--text-scale-ratio));
	--text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
	--text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
	--text-lg: calc(var(--text-md) * var(--text-scale-ratio));
	--text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
	--text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
	--text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
	
	--ab-violet: rgba(227, 9, 252, 0.954);

	--bs-primary-rgb: 181, 137, 0;
}

* {
	padding: 0;
	margin: 0;
}
html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
/*html { font: 12px/1.2 'Orbitron', Arial, sans-serif; }*/
html, button, input, select, textarea { font-family: Verdana,Arial,Helvetica,sans-serif; color: #222; }
html, body { height: 100%; }
body { margin: 0; font-size: 1rem; line-height: 1.2; }

::selection {
	background: var(--color-accent-dark);
	color: #fff;
	text-shadow: none;
}

body, div, td, p, ul, ol, button, input, select, textarea {
	font: 1rem/1.25 Verdana, Arial, Helvetica, sans-serif;/* default. customize this elsewhere */
	color: #000;
}
p, dl, ol, ul, dt, dd, h1, h2, h3, h4, h5, h6, form, fieldset, table {/*so things don't bump into each other vertically. no li - use .double */
	line-height: 1;
	margin: 0 0 1rem 0;
	padding: 0;
}
/* STANDARD TAG REDEFINITION STYLES */
blockquote, pre, th, td, div {
	line-height: 1.1;/* questionable - turning off 1.1em from reset.css. 1.05? 1.15? */
}
blockquote {
	display: flex;
	border: 0.0625rem solid #CCC;
	border-radius: 0.75rem;
	padding: 0.5rem 2.2rem 0.5rem 3.2rem;
	font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
	color: #366;
	justify-content: space-between;
	align-items: center;
}
blockquote::before, blockquote::after {
	content: open-quote;
	content: "\201c";
	padding: 0.25rem;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 4rem;
	opacity: 0.25;
}
blockquote::after {
	content: close-quote;
	content: "\201d";
}
blockquote cite { display: block; }
blockquote cite span {
	display: block;
	font-style: normal;
}
blockquote.float-end {/* ie: pull-quote. .box optional */
	width: 12rem;
	margin-left: 1rem;
}
figcaption {
	color: var(--color-inverse);
	font-style: italic;
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
}
hr, .hr, .under-hr {
	min-height: 0;
	height: 0.0625rem;
	margin: 1.25em 0;/* override BS px */
	background: var(--color-accent-light);
	padding: 0.5rem 0 0;
	border-top: 3px double var(--color-accent-dark);
	border-bottom-width: 0;
	color: var(--color-inverse);
}
.black20 hr,
.black20 .hr {
	border-color: #999;
}
.under-hr {
	border-top-width: 0;
	border-bottom: 3px double var(--color-accent-dark);
	padding: 0 0 1.5em;
}
.hr-dashed {
	border-style: dashed none;
}

.text-justify {
	text-align: justify !important;
}
.align-center th {
	text-align: center !important;
}
.grey {
	color: #666;
}
.whitetext {
	color: #fff;
}
.no-border {
	border: 0;
}


abbr, acronym {
	/* indicating to users that more info is available */
	border-bottom: 0.0625rem dotted #000;/* also consider 	border: 0 none; */
	cursor: help;
}
em {
	/* margin-right: .35em; Well maybe they fixed this. Used to look much better in paragraphs, both browsers */
	font-weight: bold;
	font-style: italic;/* bringing italics back to the em element */
	color: #333;
}
sup {
	/* top: -1.5rem; */
	font-size: 0.6em;
}
a sup { text-decoration: none; }
sup.small { font-size: 0.66rem; }
small {
	font-size: 80%;
}
ilayer { display: none; }
q { color: #555; }
iframe {
	width: 100%;
	border: 0 none;
}
pre {/* to do: needs work for codeblock verb */
	position: relative;
	background: #eee;
	border: 0.0625rem solid #666;
	color: var(--color-inverse);
	margin-top: 1.5rem;
	margin-left: 3rem;
	min-height: 15rem;
	overflow: auto;
	white-space: pre;
}
pre:before {
	position: absolute;
	top: -1.25em;
	background: #ddd;
	border-bottom: 4px solid #666;
	content: " viewing monospaced \3c pre\3e	code: \a";
	font-family: "Noto Sans", "Lucida Grande", Lucida, "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", Helvetica, Verdana, Arial, ArialMT, sans-serif;/* mono not needed here */
	font-size: 0.8rem;
	color: var(--color-main);
} /* just check this out and decide */
s {
	opacity: 0.4;
}
img {
	border: 0px none;
	color: var(--color-accent-dark);
	font-size: 0.85rem; /* for ALT attrib, old IE */
}
img:before { content: attr(alt) }
img.icon {
	margin-right: 4px;
	vertical-align: baseline;
}




/* HEADING STYLES */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	margin: 0.75rem 0 0 0;
	line-height: 1.1;/* 2.25vw */
	font-weight: 700;
	color: var(--color-accent-dark);
}
h1, .h1 { font-size: 3.25rem; font-weight: 900; }/* 3.5vw override Bootstrap px sizes for all headers. BS=36px=1.5rem. */
h2, .h2 { font-size: 3.0rem; }/* 3.375vw */
h3, .h3 { font-size: 2.5rem; margin: 0; }/* 3.25vw */
h4, .h4 { font-size: 2.0rem; margin: 0; }/* 2.7vw */
h5, .h5 { font-size: 1.5rem; }/* 2.5vw */
h6, .h6 { font-size: 1.0rem; }




/* TABLES STYLES */
table {
	width: 100%;
	margin: 0.0625rem;
	padding: 0;
	border-spacing: 0.0625rem;
	/* border-collapse: collapse; */
	/*table-layout: fixed;*/
	font-size: 1em; /* doesn't inherit font-size correctly */
}
caption {
	/*coordinated marking to match cell's padding*/
	margin-bottom: 0.5rem;
	padding: 4px;
	text-align: center;/* space and center so it doesn't blend into other content */
	font-weight: bold;
}
tr.subhead th {
	background-color: #cc9;
	text-align: left;
}
table.text tbody td,
table.text tbody th { /* text table should be top and left aligned */
	text-align: left;
	vertical-align: top;
}
tr.head th {
	background-color: var(--color-main);
	color: #fff;
	padding: 0.25rem 0.75rem;
}
tr.head th a {
	color: #fff;
}
.total td {
	background-color: #cc9;
	font-weight: bold;
}
.TableOddRow {
	background-color: #ebebd6;
}
tr.bg0 td,
table.calc-report td.bg0 {
	background-color: #fff;
}

tr.brick td, td.brick { background: var(--color-inverse) !important; }
.brick strong {/*outside who. see areabeyond.css for inside who*/
	background: transparent url(../img/nav-arrow-lt-closed.gif) no-repeat 0 0.25rem;
	padding-left: .75rem;
	color: #0B0;
}
th {/* hmm, for AB only? */
	background-color: #666;
	color: #F99;
}
th, td {
	/* borders and padding to make the table readable */
	border: 0.0625rem solid #000;
	padding: 0.35rem;
}
.cellless {
	border-spacing: 0;
	border-collapse: separate;
}
.cellless th, .cellless td {
	border: none;
	padding: 2px;
}

/* GRID LAYOUT */
.wrapper-grid-2-1 {
	width: 100%;
	display: grid;
	grid-template-columns: 66% 33%;
	grid-gap: 0.5rem;
}
.grid-a {}
.grid-b {}


/* LISTS and DISPlAY STYLES */
ol { margin-left: 1.75rem; }
ol.tight { margin: 0.125rem 3rem; }
ul { margin-left: 1.25rem; }
ul ul, ol ol, ul ol, ol ul { margin-left: 2.5rem; }
li h6 { margin-bottom: 0; margin-top: 0; }
li p, ul.double li, ol.double li, dl.double dd { margin-bottom: 0.75rem; } /* double-spaced lists */

blockquote, ul, ol, dl {
	margin: 0 0 1em 3em;
}
dt {
	font-weight: bold;
}
/* replace with boostrap: 
dl {margin-left: 0;}
dd { margin-left: 0.5rem; }
*/
dt.header, dd.header { margin-top: 1.25rem; }
ol li {
	list-style: decimal outside;/* giving OL's LIs generated numbers */
}
ul li {
	list-style: disc outside;/* giving UL's LIs generated disc markers */
}
ul.square li {
	list-style: square outside;/* whatever */
}

li ul, li ol { margin-left: 2.5em; }/* multi-nested lists */
.inline, .inline .button, .inline.button, ul.inline li, ol.inline li { display: inline; }
.inline fieldset { margin: 0; display: inline; padding: 0; }/* ? */
dl.inline dt, dl.inline dd { float: left; display: initial; width: 85%; }
dl.inline dt { clear: left; width: 10%; text-align: right; }
dl.inline:after { /* not working?, use BR.clear */
	clear: left;
}
dt.header, dd.header { margin-top: 1.25rem; }

.gentle-flex {/* real centering */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1ch;
}
.flex { display: flex; }
.block { display: block; }
.inline-block { display: inline-block; }
.it { display: inline-table; }
.hidden { visibility: hidden; }
.hide { display: none; }
.show{ visibility: visible; display: block; }
.invisible{ visibility: hidden; }
.kill, .disappear { display: none; }/* Definition to remove elements from view. */
.sr-only {
	/* content made available only to screen readers */
	position: absolute;
	clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
	clip-path: inset(50%);
	width: 0.0625rem;
	height: 0.0625rem;
	overflow: hidden;
	padding: 0;
	border: 0;
	white-space: nowrap;
}
.offscreen {
	position: absolute;
	left: -1000px;
}

tr.bg0 td, table.calc-report td.bg0,
.even TD, .odd TD.bg0 {
	background-color: #FFF;
}
.odd TD, li.odd, dt.odd, dd.odd,
ul.striped li:nth-child(odd),
table.striped tr:nth-child(odd) td {
	background-color: #EBEBD6
}


/* FORMS AND BUTTONS STYLES */
fieldset {
	border: 0 none;
	margin: 0;
	/* padding: .75em .625em; stolen from moz default stylesheet */
}
fieldset span { font-size: 0.9rem; }
legend {
	background-color: #91bd91;
	border: 0.0625rem solid var(--color-main);
	border-radius: 0.75rem;
	color: var(--color-main);
	font-weight: bold;
	margin-left: -0.55rem;
	padding: 0 .5rem;
}
.legendbox {
	border: 0.0625rem solid #000;
	margin: 0 .25rem 0 .75rem;
	background: #CCC;
	width: .82rem;
	height: .82rem;
	display: inline-block;
}
::placeholder { /* Chrome/Edge, Firefox, Opera, Safari 10.1+ */
	font-weight: normal;
	color: #666;
	opacity: 0.4;/* override Firefox default */
}
label {
	font-weight: bold;
}
input, table, textarea, iframe, button, .button {
	box-shadow: 0.25rem 0.25rem 0.35rem #333;
}
input, option, select, textarea {
	margin-bottom: 0.5rem;
	background-color: #F6F8F8;
	font: 1rem Verdana, sans-serif; /* doesn't inherit font correctly */
}
textarea, input { vertical-align: text-top; }
input {
	font: 0.92rem "Lucida Grande", Lucida, "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, ArialMT, Helvetica, sans-serif;/* wouldn't inherit font correctly 	padding: 0.0625rem 0; */
	color: var(--color-main);
	font-weight: bold;
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
	width: 11rem;
	padding: 0.05rem 0.25rem;
}
input[type="checkbox"],
input[type="radio"] {
	background-color: #f8e598;
	width: auto;
	vertical-align: middle;
}
input[type="radio"] {
	position: relative;
	border: 0.0625rem solid #696;
	width: 1rem;
	height: 1rem;
	border-radius: 1rem;
	-webkit-appearance: inherit;
}
input[type="radio"]:checked:before {
	content: "";
	position: absolute;
	border-radius: 1rem;
	left: 15%;
	top: 15%;
	width: 70%;
	height: 70%;
	background: #c60;
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
	background-color: #f7f7f7;
	border: 0.0625rem solid #ccc;
	border-top-color: #777;
	border-left-color: #777;
}
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a.button {
	display: block;
	/*background: #CCC url(../img/button-bg.gif) repeat-x 50%; replaced with gradients */
	background-image: linear-gradient(#F5F5F5,#ABABAB);/* override/lose this for button icons */
	background-position: 0.5rem 50%;
	background-size: 1.75rem;
	border: 3px double var(--color-accent-dark);
	border-left-color: var(--color-accent-light);
	border-top-color: var(--color-accent-light);
	border-radius: .6rem;
	/*width: 7rem;*/
	margin: 0.125rem 0.125rem 0.375rem 0.125rem;
	padding: 0.25rem;
	text-align: center;
	cursor: pointer;
	font-size: 1rem;
	font-weight: bold;
	text-decoration: none !important;
}
a.button,
a.button:visited {
	display: initial;
	color: var(--color-main) !important;
}
a.button:hover,
a.button:active {
	color: #fff;
}
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"],
a.button:hover,
button.light,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
a.button:active {
	/* background: linear-gradient(#666,#EBEBEB);override/lose this for button icons like FA! */
	background-position: 0.575rem 70% !important;/* depress button */
	padding: 0.375rem 0.125rem 0.125rem 0.375rem;/* depress button */
	border: 3px double var(--color-accent-dark);
	border-bottom-color: var(--color-accent-light);
	border-right-color: var(--color-accent-light);
	color: #eee;
}
input[type="reset"],
input.light {/* needs work! */
	color: #555;
}
input[type="reset"]:hover,
input.light:hover {/* needs work! */
	color: #FFF;
}
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
a.button:active {
	background-color: var(--color-accent-dark);
	border: 3px double #ccc;
	border-top-color: #999;
	border-left-color: #999;
}
input:focus,
textarea:focus {
	background-color: #ddd;
}
input[type="hidden"] {
	/* NS 7.0 fix */
	background-color: #fff;
	border: none;
}

.disabled {
	cursor: default;
}
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
button:disabled,
.button:disabled,
a.disabled {
	/*background: #CCC url(../img/button-bg.gif) repeat-x 50%; replaced with gradients */
	background: #999 !important;
	border-color: #666;
	color: #bcbcbc !important;
	cursor: default;
	text-decoration: none !important;
}

input.w2,
a.button.w2 {
	padding: 0.215em 0.35em;
} /* single char button different centering */
input.button-small,
button.button-small,
a.button-small {
	width: 3.25em;
}
/* 
input.button,
button.button {
	width: 7rem;
}
 */
input.button-long,
button.button-long {
	width: 13.5em;
}
input.button-max,
button.button-max {
	width: 24em;
}

/* BUTTON element */
.buttons a, .buttons button {
	display: block;
	float: left;
	margin: 0 7px 0 0;
	background-color: #f5f5f5;
	border: 0.0625rem solid #dedede;
	border-top: 0.0625rem solid #eee;
	border-left: 0.0625rem solid #eee;
	font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
	font-size: 100%;
	line-height: 130%;
	text-decoration: none;
	font-weight: bold;
	color: #565656;
	cursor: pointer;
	padding: 5px 10px 6px 7px; /* Links */
}
.buttons button {
	width: auto;
	overflow: visible;
	padding: 4px 10px 3px 7px; /* IE6 */
}
.buttons button[type] {
	padding: 5px 10px 5px 7px; /* Firefox */
	line-height: 17px; /* Safari */
}
*:first-child + html button[type] {
	padding: 4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img {
	margin: 0 3px -3px 0 !important;
	padding: 0;
	border: none;
	width: 16px;
	height: 16px;
}
/* BUTTONS - STANDARD */
button:hover, .buttons a:hover {
	background-color: #dff4ff;
	border: 0.0625rem solid #c2e1ef;
	color: #336699;
}
.buttons a:active {
	background-color: #6299c5;
	border: 0.0625rem solid #6299c5;
	color: #fff;
}
/* BUTTONS - POSITIVE */
button.positive, .buttons a.positive {
	color: #529214;
}
.buttons a.positive:hover, button.positive:hover {
	background-color: #E6EFC2;
	border: 0.0625rem solid #C6D880;
	color: #529214;
}
.buttons a.positive:active {
	background-color: #529214;
	border: 0.0625rem solid #529214;
	color: #fff;
}
/* BUTTONS - NEGATIVE */
.buttons a.negative, button.negative {
	color: #d12f19;
}
.buttons a.negative:hover, button.negative:hover {
	background: #fbe3e4;
	border: 0.0625rem solid #fbc2c4;
	color: #d12f19;
}
.buttons a.negative:active {
	background-color: #d12f19;
	border: 0.0625rem solid #d12f19;
	color: #fff;
}
/* overriding Boostrap */
.btn {
	height: auto;
	background: linear-gradient(#093,#030);/* green */
	border: 2px solid #244868;
	border-radius: 0.5rem;
	margin: 2px;
	padding: 0.25rem 0.5rem 1.1rem 0.5rem;
	line-height: 1.35em;
	font-weight: bold;
	color: #fff;
	text-decoration: none !important;
	text-shadow: 0 -0.0625rem 4px rgba(0,0,0,.4);
	box-shadow: 0 0.0625rem 4px rgba(0,0,0,.2), inset 0 0.0625rem 0 rgba(255,255,255,.2), inset 0 -0.0625rem 0.0625rem rgba(255,255,255,.1);
}
a.btn:visited {
	color: #fff;
}
.btn:hover {
	padding: 0.3rem 0.45rem 1.05rem 0.55rem;
	color: #fff;
	box-shadow: 0 0.0625rem 2px rgba(0, 0, 0, 0.4),
		inset 0 0.0625rem 0 rgba(255, 255, 255, 0.4),
		inset 0 -0.0625rem 0px rgba(255, 255, 255, 0.2);
}
.btn span {
	margin: 0;
	line-height: 0;
	font-size: 2em;
	color: #fff;
}
.btn.dark {
	background: linear-gradient(#34495e, #2c3e50);
	border-color: #333;
}
.btn.brick {
	background: linear-gradient(#c60, #511);
	border-color: var(--color-inverse);
}
.btn.red {
	background: linear-gradient(#e74c3c, #c0392b);
	border-color: brown;
}
.btn.green {
	background: linear-gradient(#2ecc71, #27ae60);
	border-color: #2e8a25;
}
.btn.yellow {
	background: linear-gradient(#f1c40f, #f39c12);
	border-color: #e67e22;
}
.btn.purple {
	background: linear-gradient(#9b59b6, #8e44ad);
	border-color: #34495e;
}
.btn.light {
	background: linear-gradient(#ecf0f1, #bdc3c7);
	border-color: #666;
	color: #ddd;
}



/*** anchor links styles ***/
a[rel~=external]:after,
[href^="https://"]:not([href*="localhost"]):not([href*="areabeyond.com"]):not([href*="beyondozone.com"]):not([href*="chatsector.com"]):not([href*="noisycafe.com"]):not([href*="genebiondo.com"]):after {
	padding-left: .15rem;
	/*
	content: url(data:image/png;base64,R0lGODlhCQAMAMQAAPr7/Cpdi6q/0X2duURxmjRlkfz9/vz8/TVlkae8z4+qwoWivTlplDVmkvv8/Up1nUVymvn6/LrL2i1gjStejKS6zkNwmUFvmD5slkJwmbjJ2DZnkqm90Cdbiv///wAAACH5BAEAAB4ALAAAAAAJAAwAAAU6oCeOY7R0aNoByWURQUoOMTpqD0p1Ird1hEGGJ/gVJB5Ip9gpcESYDqOD4BxEFcWkwTGMHACSeDwKAQA7);
	padding-left: 2px;
	content: "\00A0\8657\00A0"; how to get to show for other browsers? 
	content: "\2x66";
	content: "\066a";
	content: "\219d";
	content: "\27B6";		full NE fletched small
	content: "\27A4";		heavy tri right
	content: "\2fff";
	content: "\00A0\2197\00A0";	NE arrow 
	content: "\279A";			heavy NE arrow, can't find Mac font 
	content: "\00a0\fffc\00a0"; |obj| 
	content: "\21d7";		ext. NE double arrow 
	font-family: Tahoma, "Arial Unicode MS", "Arial Black", Arial, "Lucida Sans", "Microsoft Sans Serif", sans-serif;
	*/
	font-size: .9rem;
	content: '\f35d';/* fa-external-link-alt	*/
	font-family: 'Font Awesome 6 Duotone';
	font-weight: 600;
	color: var(--color-accent-dark);
}
/*a[rel~=email]:before,
a[rel~=comments]:before,*/
a[href^="mailto:"] {
	position: relative;
	padding-left: 2.25rem;
}
a[href^="mailto:"]:before {
	position: absolute;
	margin-left: -2rem;
	color: var(--color-accent-dark);
	content: "\2709\0020";
	font-size: 1.3em;
}
a[rel~="nofollow"]:after {
	content: "\2620";/* skull */
	color: #933;
	font-size: small;
}
a[data-rel~="abpopup"]:not(.helpOpener):not(.playerpageOpener):after,
a[data-rel~="popup"]:after,
a[rel~="popup"]:after {
	content: "\27A4";/* heavy tri right */
	color: #933;
	font-size: small;
}
a[rel~="tag"]:after {
	content: url('https://genebiondo.com/favicon.ico');
}
:link[hreflang]:not([hreflang|="en"]):after {
	content: " [" attr(hreflang) "]";
	font-size: x-small;
	font-weight: 100;
	vertical-align: super;
}
a:link {
	color: #036;
	text-decoration: underline;
}
a:visited {
	color: #666;
	text-decoration: underline;
}
a.plain, .plain a {
	text-decoration: none;
}
a:link:hover,
a:visited:hover {
	background-color: var(--color-accent-light);
	color: var(--color-accent-dark);
}
a:link:active,
a:visited:active {
	background-color: var(--color-accent-dark);
	color: #fff;
}




/*** Utility classes ***/
.clear {/* clearing element */
	clear: both;
	overflow: hidden;
}
.clearfix:after, .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden; }
.clearfix, .container { display: block; }
small, .small, .legal,
.legal sup.small, table.legal td,
.small sup.small, .small td {
	font-size: 80% !important;/* relative to whatever rems, so don't use rems here. 13/16px */
	color: #444;
}
input.small { font-size: 0.5rem;}
.uppercase { text-transform: uppercase; }
.jumbo {
	font-size: 130%;
	color: var(--color-main);
}
.bold, .header {
	font-weight: bold;
}
.unbold {
	font-weight: normal;
}
.nowrap { white-space: nowrap; }

div.debug,
div.warn,
div.info {
	background-color: #ffc;
}
.debug {
	background: #ffc url(../img/error-exclaim.gif) no-repeat 5px 6px;
	border: 0.0625rem solid #930;
	left: 25%;
	padding: 0 0.25rem 0 3.2rem;
	position: absolute;
	top: 25%;
	width: 50%;
}

.success {
	background: #efd;
	color: #0c0;
	font-weight: bold;
}
.error,
.descriptive,
div.debug p {
	font-weight: bold;
	line-height: 1.25em;
}
.error,
.error p {
	color: #e33 !important;
}
div.error {
	background: #FED url(../img/error-exclaim.gif) no-repeat .5rem .65rem;
	border: 2px solid #930;
	padding: .35rem .25rem 0 3.2rem;
	margin-bottom: .5rem;
}
div.error h2 { margin-top: .7em; }
div.error p { margin-bottom: .5em; }
div.error strong { color: var(--color-accent-dark); }
input.error {
	background: linear-gradient(#900, #f55);
	color: #ddf;
}
input.error:hover {
	background: linear-gradient(#633, #900);
}

.red { color: #F00; }
.black { color: #000; }
.gold { color: #FFD700 !important; }
.orange { color: #FFA500 !important; }
.brick { color: #600 !important; }
.brickbg { background-color: #600; }
.green { color: #090; }/* or var(--color-main) */
.white { color: #FFF !important; }
.whitebg { background-color: #FFF !important; }
.grey { color: #878 !important; }
.grey3 { color: #333 !important; }
.greybg { background-color: #BBB !important; }
.ccc { background-color: #CCC; }
.dark { background-color: #777 !important; }
.darker { background-color: #444 !important; }
.darkest { background-color: #222 !important; }
.blackbg { background-color: #000 !important;}
.accent { color: var(--color-accent-dark) !important; }
.highlight { background-color: #FF6; }
.inverse {
	background-color: var(--color-main);
	color: #ccc;
}
.inverse a:link {
	display: block;
	padding: 0.25rem;
	color: var(--color-accent-light) !important;
}
.inverse a:link:hover {
	color: var(--color-inverse) !important;
}

/* p.close { margin-bottom: 0; } */
.close { /* tight to preceding P, indented, good for lists */
	margin-top: -1em;
	padding-top: 0;
	padding-left: 1em;
}
.border { border: .1rem solid #666 !important; }
a.border,
a img.border {
	border: 0.0625rem solid var(--color-accent-dark);
}
.borderfff { border: 0.0625rem solid #FFF; }
.border-round {
	border-radius: 0.5rem;
}
.border-right {
	border-right: 0.0625rem solid #aaa;
	margin-right: -0.0625rem !important;
}
.divtop { border-top: 0.0625rem solid #666; }
.noradius { border-radius: 0 !important; }

.keyline {
	border: 0.0625rem solid var(--color-main);
	margin: 0.75rem 0 0.75rem 0;
}
.underline { text-decoration: underline; }
a.underline { text-decoration: none; border-bottom: 0.0625rem solid #036; }
a span.underline { text-decoration: none; border-bottom: 3px double var(--color-main); }/* accesskeys */
.button span.underline { min-width: .75em; display: inline-block; text-align: center; line-height: 1; letter-spacing: initial; }/* accesskeys in buttons */
.underscore, .underscore td, .underscore th { border-bottom: 0.0625rem solid #666 !important; }
.underdash, .underdash td, .underdash th { border-bottom: 0.0625rem dashed #666 !important; }
.overscore, .overscore td, .overscore th { border-top: 0.0625rem solid #666 !important; }
.thick, .thick td, .thick th {border-width: 2px !important;}
.accesskey:first-letter, a.accesskey:first-letter, input.accesskey:first-letter { /* not functional */
	text-decoration: underline; 
	border-bottom: 0.1875rem double #036;
}
del, s, strike, .strikethrough, a.strikethrough {
	text-decoration: line-through;
	color: red;/* typically wrap an element which has its own color for contrast effect */
}

/* Tooltips, switching to Bootstrap: */
.ab-tooltip {
	--bs-tooltip-bg: rgba(0, 0, 0, 0.8);
	--bs-tooltip-color: var(--bs-white);
	--bs-tooltip-arrow-width: 1.75rem;
	--bs-tooltip-arrow-height: 0.75rem;
	--bs-tooltip-border-radius: 1rem;
	/* ruins arrow: box-shadow: 0.5rem 0.5rem 0.75rem rgba(0, 0, 0, 0.7); */
	transition: all 0.33s ease-in-out; /* add some smoothness */
}
.datatooltip,
.htmltooltip {
	position: relative;
	border-bottom: 2px dotted #777;
	cursor: help;
}
.datatooltip::after,
.htmltooltip span {
	/* The appearance of our tooltip */
	position: absolute;
	visibility: hidden; /* Make it hidden */
	width: 23rem;
	margin-left: 2px;
	margin-top: -5rem;
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 1rem 1rem 1rem 0;
	box-shadow: 0.5rem 0.5rem 0.75rem rgba(0, 0, 0, 0.7);
	color: #fff;
	opacity: 0;/* and transparent */
	padding: 0.5rem 0.65rem;
	text-decoration: none;
	transition: all 0.4s ease-in-out; /* add some smoothness */
	z-index: 10;
}
.htmltooltip span {
	padding-right: 4.5rem;
}
.htmltooltip span img {
	/* example image */
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	visibility: hidden;
	border: 0 none;
	opacity: 0;
	z-index: -1;
}
.datatooltip::after {
	width: auto;
	margin-top: -1rem;
	content: attr(data-tooltip); /* The main part determining the content of the tooltip popup */
}
.datatooltip:hover::after,
.htmltooltip:hover span,
.htmltooltip:hover span img {
	/* show the tooltip and image on hover */
	visibility: visible;
	opacity: 0.9; /* Make it visible */
}

/* 
	<a href="?section=guest" title="Enter as guest" class="htmltooltip icon guest">Guest&nbsp;pass<span>Check it out, before deciding whether to join! <img src="img/objects/coin.gif" /></span></a>

	<a href="?section=guest" title="Enter as guest" class="datatooltip icon guest" data-tooltip="Check it out, before deciding whether to join!">guest&nbsp;pass</a>
*/


/* to do: eliminate more, use bootstrap: */
.pull-left { float: left; margin: 0 .5rem .5rem 0; }/* float styles for image thumbnails, etc. to do: move margin? */
.pull-right { float: right; margin: 0 0 .5rem .5rem; }

.padded { padding: .75rem; }/* p, div, fieldset */
.padsmall { padding: 0.125rem; }
.padtop { padding-top: 1rem; }
.padtopsmall { padding-top: .5rem; }
.pull-up { margin-top: -1rem; }
.pull-center { margin: 0 auto !important; }
.pull-down { margin-top: 1rem; }
.push-down { padding-bottom: 1rem !important; }
.push-both { margin: 4rem auto; }/* not in use */
.double, .double a { margin-bottom: 1.25rem; }/* also see lists */
.tight { margin: 0.125rem 0.5rem; }
.indent { margin-left: 3rem; }/* good for lists? */
.outdent { padding-left: 0; margin-left: 0; }
.gap { margin-right: 0.5rem !important; }
.spread { margin-right: 2rem; }
.spreadFar { margin-right: 4rem; }
.break { margin-bottom: 1rem !important; }
.nomargin, .no-margin { margin: 0; }
.element-margin { margin-bottom: .5rem; }
.sub-section-margin { margin-bottom: 1rem; }
.section-margin { margin-bottom: 2rem; }

.abstop { position: absolute; top: 0; }
.absright { position: absolute; right: 0; }
.absleft { position: absolute; left: 0; }
.absright { position: absolute; right: 0; }
.absbottom { position: absolute; bottom: 0;}

.left, .left th, .align-left, tr.align-left th, tr.align-left td { text-align:left !important; }
.right, .align-right, tr.align-right th, tr.align-right td { text-align:right; }
.center, .align-center, tr.align-center th, tr.align-center td { text-align:center; }
div.center table {
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.top { vertical-align: top; }
.texttop { vertical-align: text-top; }
.middle, .middle th, .middle td { vertical-align: middle !important; display: inline-block; } /* good for IMG */
.bottom { vertical-align: bottom; }

.z-max { z-index: 9999; }
.over { z-index: 20; }
.under { z-index: 1; }


.box {
	border: 2px solid #aaa;
	border-left: none;
	background-color: #f7f7f7;
}
.box:not(:last-child) { 
	border-right: none;
	/* margin-right: -0.0625rem; */
}
.transback {
	background: transparent;
}
.transparent {
	opacity: 0.65; /* see also IE */
}
.transbox {/* depricating this in favor of rgb alpha */
	position: relative;
	min-height: 1.5em; /* 1 row */
	margin: 0.5em;
}
.transbox > div {
	position: absolute;
	padding: 0.35em 0.75em;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}
.transbox .transparent {/* default gets overridden for different areas, different colors */
	background-color: #747;
	border: 2px solid transparent;
}
.transbox .border {
	border: 2px solid #96f !important;
}
.transbox h2 { color: #FF6; }
.transbox p { color: #036; }
.transbox em { color: #FFF !important; }
.transbox li { color: #036 !important; }


/* Columns.	To-do:	replace with flex/bootstrap: */
div.two-col {
	float: left;
	width: 45%;
	margin-right: 1em;
	background-color: #ebebd6;
	padding: 0.3em;
}
.columns { /* default 6 columns */
	float: left;
	width: 13.7%;
	font-size: 0.87em;
	margin-right: 3px;
}
.columns ul, .columns li {
	margin: 0;
	list-style-position: inside;
	/*list-style-type: none;*/
}
/*.columns span {
	line-height: .78em;
	display: block;
}*/
.row1 { background-color: #EDE; }

/* Fixed widths - good for buttons, etc. */
.w1half { width: 1.5rem !important; }
.w2 { width: 2rem !important; }
.w3 { width: 3rem !important; }
.w4 { width: 4rem !important; }
.w5 { width: 5rem !important; }
.w7 { width: 7rem !important; }
.w8 { width: 8rem !important; }
.w10 { width: 10rem !important; }
.w12 { width: 12rem !important; }
.w15 { width: 15rem !important; }
.w20 { width: 20rem !important; }
.w25 { width: 25rem !important; }
.w30 { width: 30rem !important; }
.w50 { width: 50rem !important; }
/* Percentage widths - good for text blocks like dl.inline dt and dd */
.w5p { width: 5% !important; }
.w10p { width: 10% !important; }
.w12p { width: 12% !important; }
.w15p { width: 15% !important; }
.w20p { width: 20% !important; }
.w25p { width: 25% !important; }
.w30p { width: 30% !important; }
.w40p { width: 40% !important; }
.w50p { width: 50% !important; }
.w60p { width: 60% !important; }
.w70p { width: 70% !important; }
.w75p { width: 75% !important; }
.w80p { width: 80% !important; }
.w85p { width: 85% !important; }
.w90p { width: 90% !important; }
.w95p { width: 95% !important; }
.w98p { width: 98% !important; }
.w100p { width: 100% !important; }
.w7w { width: 7vw !important; }
.widthauto { width: auto !important; }
.widthinitial { width: initial !important; }
.full { width: 100%; margin-left: 0 !important; margin-right: 0 !important; } /* full width. (div.dropshadow would be 97.5% with margins) */


/* common font stacks */
pre,
code,
kbd,
samp,
.mono {
	font-family: monospace, monospace;/* https://github.com/necolas/normalize.css/issues/519#issuecomment-197131966 */
	font-family: "Fira Code", "Alma Mono", "Bergen Mono", "Alt System Code", Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Monotype.com", "OCR A Extended", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Vera, Courier, Fixed, Terminal, "VT 100", monospace, ui-monospace;
	letter-spacing: normal;
}
.script,
.cursive,
.decorative,
.fantasy {
	font-family: "Apple Chancery", "Zapf Chancery", "Lucida Calligraphy", "Lucida Handwriting", "Monotype Corsiva", "Brush Script", "Brush Script MT", "Comic Sans MS", cursive
}
.times {
	font-family: Minion, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", Georgia, Palatino, serif;
}
.georgia {
	font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
}
.garamond {
	font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; 
}
.arial {
	font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.verdana {
	font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
}
.trebuchet {
	font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
}
.impact {
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
}
span.amp {
	font-family: Constantia, Palatino Linotype, Palatino, Baskerville, "Book Antiqua", serif;
	font-style: italic;
}
.drop-neon-orange, .drop-neon-orange a {
	color: #FFF !important;
	text-shadow: 0 0 .35rem #FC9, 0 0 .5rem var(--color-accent-light), 0 0 .75rem var(--color-accent-dark), 0 0 1rem #FC9, 0 0 1.125rem var(--color-accent-dark);
}
.drop-neon {
	color: #FFF;
	text-shadow: 0 0 .075rem #FFF, 0 0 .15rem #FFF, 0 0 .225rem #FFF, 0 0 .3rem #FF00DE, 0 0 .525rem #FF00DE, 0 0 .6rem #FF00DE, 0 0 .75rem #FF00DE, 0 0 1.125rem #FF00DE;
}
.drop-retro, .drop-retro a {
	color: #666;
	text-shadow: .03rem .03rem 0 #EEE, .05rem .05rem 0 #707070;
}
.drop-inset, .drop-inset a {
	color: #222;
	text-shadow: 0 .02rem .035rem #666;
}
.drop-anaglyphic, .drop-anaglyphic a {
	color: rgba(0, 168, 255, 0.5);
	text-shadow: .065rem .065rem 0 rgba(255,0,180,0.5);
	text-transform: uppercase;
}
.drop-fire, .drop-fire a {
	color: #FFF;
	text-shadow: 0 0 .15rem #FEFCC9, .075rem -.075rem .225rem #FEEC85, -.15rem -.15rem .3rem #FFAE34, .15rem -.3rem .4rem #EC760c, -.15rem -.45rem .45rem #CD4606, 0 -.6rem .5rem #973716, .075rem -.7rem .6rem #451B0E;
}
.drop-boardgame, .drop-boardgame a {
	color: #FFF;
	text-shadow: .06rem .06rem 0 #FFD217, .12rem .12rem 0 #5AC7FF, .18rem .18rem 0 #FFD217, .24rem .24rem 0 #5AC7FF;
	text-transform: uppercase;
}
/* also see input, table, textarea, iframe */
.drop-shadow-box {
	box-shadow: 0.25rem 0.25rem 0.35rem #333;
}
.drop-shadow-box-glow {
	box-shadow: 0 0 2.5rem 0.25rem var(--color-accent-light);
}
.drop-shadow-box-inner {
	box-shadow: inset 0 0 2rem #333;
}





.chromeframe {
	background: none repeat scroll 0 0 #ccc;
	color: #000;
	margin: 0.2em 0;
	padding: 0.2em 0;
}

.pipes li,
.pipes > a {
	margin-right: 0.25em;
	padding-right: 0.25em;
	border-right: 0.0625rem solid var(--color-main); /* pipe separator */
}
.pipes li {
	display: inline;
	list-style-type: none;
	white-space: nowrap;
}
.pipes li:last-child {
	padding-right: 0;
	margin-right: 0;
	border-right: 0;
}




@media (max-width: 767px) {/* Landscape phone to desktop/tablet */
	.hidden-phone {
		display: none !important;
	}
}
@media (min-width: 768px) and (max-width: 1024px) {
	.hidden-tablet {
		display: none !important;
	}
}
@media (min-width: 1025px) {
	.hidden-desktop {
		display: none !important;
	}
}


.fullheight .modal-content {
	height: 92vh;
}



/* temp until I get rid of jQ UI: */
.ui-tabs .ui-tabs-panel {
	border: 2px solid #cc6600;
	padding: 0.5rem;
}
.ui-accordion .ui-accordion-content {
	height: 44vh;
}




/* missing from bootstrap 5: */
.m-n1 {
	margin: -0.25rem !important;
}
.mt-n1,
.my-n1 {
	margin-top: -0.25rem !important;
}
.me-n1,
.mx-n1 {
	margin-right: -0.25rem !important;
}
.mb-n1,
.my-n1 {
	margin-bottom: -0.25rem !important;
}
.ms-n1,
.mx-n1 {
	margin-left: -0.25rem !important;
}
.m-n2 {
	margin: -0.5rem !important;
}
.mt-n2,
.my-n2 {
	margin-top: -0.5rem !important;
}
.me-n2,
.mx-n2 {
	margin-right: -0.5rem !important;
}
.mb-n2,
.my-n2 {
	margin-bottom: -0.5rem !important;
}
.ms-n2,
.mx-n2 {
	margin-left: -0.5rem !important;
}
.m-n3 {
	margin: -1rem !important;
}
.mt-n3,
.my-n3 {
	margin-top: -1rem !important;
}
.me-n3,
.mx-n3 {
	margin-right: -1rem !important;
}
.mb-n3,
.my-n3 {
	margin-bottom: -1rem !important;
}
.ms-n3,
.mx-n3 {
	margin-left: -1rem !important;
}
.m-n4 {
	margin: -1.5rem !important;
}
.mt-n4,
.my-n4 {
	margin-top: -1.5rem !important;
}
.me-n4,
.mx-n4 {
	margin-right: -1.5rem !important;
}
.mb-n4,
.my-n4 {
	margin-bottom: -1.5rem !important;
}
.ms-n4,
.mx-n4 {
	margin-left: -1.5rem !important;
}
.m-n5 {
	margin: -3rem !important;
}
.mt-n5,
.my-n5 {
	margin-top: -3rem !important;
}
.me-n5,
.mx-n5 {
	margin-right: -3rem !important;
}
.mb-n5,
.my-n5 {
	margin-bottom: -3rem !important;
}
.ms-n5,
.mx-n5 {
	margin-left: -3rem !important;
}