/*!	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: #ec8;
	--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));
}

* {
	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::before, blockquote::after {
	content: open-quote;
	content: "\201c";
	padding: 1.5rem 1rem 0 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 4rem;
	opacity: .25;
}
blockquote::after {
	content: close-quote;
	content: "\201d";
}
blockquote {
	display: flex;
	border: 1px solid #CCC;
	border-radius: .75rem;
	padding: .5rem;
	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 cite { display: block; }
blockquote cite span {
	display: block;
	font-style: normal;
}
blockquote.float-right, 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: 1px;
	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: 1px 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: 50%;
}
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 {
	position: relative;
	background: #eee;
	border: 1px solid #666;
	color: var(--color-inverse);
	font-size: 0.82rem;
	margin-top: 1.5em;
	margin-left: 3em;
}
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: 1px;
	padding: 0;
	border-spacing: 1px;
	/* 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: 1px 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(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	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: 1px solid var(--color-main);
	border-radius: 0.75rem;
	color: var(--color-main);
	font-weight: bold;
	margin-left: -0.55rem;
	padding: 0 .5rem;
}
.legendbox {
	border: 1px solid #000;
	margin: 0 .25rem 0 .75rem;
	background: #CCC;
	width: .82rem;
	height: .82rem;
	display: inline-block;
}
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: 1px 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;
}
input[type="radio"] {
	position: relative;
	border: 1px 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: 1px 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: 1px solid #dedede;
	border-top: 1px solid #eee;
	border-left: 1px 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: 1px solid #c2e1ef;
	color: #336699;
}
.buttons a:active {
	background-color: #6299c5;
	border: 1px solid #6299c5;
	color: #fff;
}
/* BUTTONS - POSITIVE */
button.positive, .buttons a.positive {
	color: #529214;
}
.buttons a.positive:hover, button.positive:hover {
	background-color: #E6EFC2;
	border: 1px solid #C6D880;
	color: #529214;
}
.buttons a.positive:active {
	background-color: #529214;
	border: 1px solid #529214;
	color: #fff;
}
/* BUTTONS - NEGATIVE */
.buttons a.negative, button.negative {
	color: #d12f19;
}
.buttons a.negative:hover, button.negative:hover {
	background: #fbe3e4;
	border: 1px solid #fbc2c4;
	color: #d12f19;
}
.buttons a.negative:active {
	background-color: #d12f19;
	border: 1px solid #d12f19;
	color: #fff;
}
/* overriding Boostrap */
.btn {
	height: auto;
	background: linear-gradient(#2186d4, #175dbd);
	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 -1px 4px rgba(0,0,0,.4);
	box-shadow: 0 1px 4px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 1px 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 1px 2px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.4),
		inset 0 -1px 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*="genebiondo.com"]):not([href*="GeneBiondo.com"]):after {
	color: var(--color-accent-dark);
	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 5 Free';
	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: 1.3rem;
	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: 1px 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; }
.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; }
.darkest { background-color: #111 !important; }
.blackbg { background-color: #000 !important;}
.accent { color: var(--color-accent-dark) !important; }
.highlight { background-color: #FF6; }
.inverse {
	background-color: var(--color-main);
	margin: 0;
	/*min-height: 2.25em;*/
	font-size: 0.9em;
	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.1rem solid var(--color-accent-dark);
}
.borderfff { border: 1px solid #FFF; }
.border-round {
	border-radius: 0.5rem;
}
.border-right {
	border-right: 1px solid #aaa;
	margin-right: -1px !important;
}
.divtop { border-top: 1px solid #666; }
.noradius { border-radius: 0 !important; }

.keyline {
	border: 1px solid var(--color-main);
	margin: 0.75rem 0 0.75rem 0;
}
.underline { text-decoration: underline; }
a.underline { text-decoration: none; border-bottom: 1px 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; }/* accesskeys in buttons */
.underscore, .underscore td, .underscore th { border-bottom: 1px solid #666 !important; }
.underdash, .underdash td, .underdash th { border-bottom: 1px dashed #666 !important; }
.overscore, .overscore td, .overscore th { border-top: 1px 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: 1px 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 */
}

/* 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: -1px; */
}
.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;
}
.col-5 { width: 18.7%; } .col-80 { width: 80%; }/* can do 5 equal columns. Or, can do 1/5 + 4/5 */
.col-4 { width: 24.7%; } .col-75 { width: 75%; }/* 4 equal, or 1/4 + 3/4 */
.col-3 { width: 32.7%; } .col-66 { width: 66%; }/* 3 equal, or 1/3 + 2/3 */
.col-2 { width: 48.7%; }/* 2 equal columns */
.col-83 { width: 83%; }/* 5/6, add to default */
.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. */
.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; }
.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: 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;
}
.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;
}

a span.fa {
	margin-right: 2px;
}
.pipes li,
.pipes > a {
	margin-right: 0.25em;
	padding-right: 0.25em;
	border-right: 1px 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;
	}
}