/* Some Variable definitions */

html {
	--max-layout-width:960px;

	--responsive-text-size-narrow:3.2vw;
	--responsive-text-size-intermediate:2.4vw;
	--responsive-text-size-standard:2vw;
	--responsive-text-size-wide:1.2em;
	
	--overlay-scale-n:2em;
	--overlay-button-size:1.5em;
	--overlay-button-size-n:8vw;
	--overlay-bd-width:0.1em;
	--overlay-bd-width-n:0.05em;
	

}

@font-face {
	font-family: koho;
	src: url('https://spanglywoohaa.com/common/font/koho-bold-webfont.woff2') format('woff2'),
         url('https://spanglywoohaa.com/common/font/koho-bold-webfont.woff') format('woff');
    font-style: normal;
	font-weight: bold;
}
@font-face {
	font-family: koho;
	src: url('https://spanglywoohaa.com/common/font/koho-regular-webfont.woff2') format('woff2'),
         url('https://spanglywoohaa.com/common/font/koho-regular-webfont.woff') format('woff');
    font-style: normal;
	font-weight: normal;
}
@font-face {
	font-family: orbitron;
	src: url('https://spanglywoohaa.com/common/font/Orbitron-VariableFont_wght.ttf');
}

/* Meyer-ish CSS reset - This must be done after normalise.css                */

html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset,
form, legend, textarea, pre, iframe,
hr, h1, h2, h3, h4, h5, h6 {
	padding: 0;
	margin: 0;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

/* Make borders and margin behaviour consistent                               */
/* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
	box-sizing: border-box;
	font-family: koho, Arial, sans-serif;
	line-height: 1;
}
*, *::before, *::after {
	box-sizing: inherit;
}

/*----------------------------------------------------------------------------*/
/* Base element styles for this site                                          */
/* These apply to the standard viewport width ( 801px - 960px wide )          */
html { font-size:var(--responsive-text-size-standard); scroll-padding-top:8.4em; }
body { color:var( --page-fg-color ); background-color:var( --page-bg-color );
	 }
h1, h2, h3, h4, h5, h6 { clear: both; font-weight:normal; }
h1 { font-size:2.5em; color:var(--h1-fg-color); background-color:var(--h1-bg-color); }
h1 .sub { font-size:0.75em; color:var(--h1sub-fg-color); display:block; }
h2 { font-size:1.75em; color:var(--h2-fg-color);  margin: 0.5rem 0; }
h3 { font-size:1.5em; color:var(--h3-fg-color); }
h4 { font-size:1.25em; color:var(--h4-fg-color); }
h5 { font-size:1.125em; color:var(--h5-fg-color); }
h6 { font-size:1em; color:var(--h6-fg-color); }
p { color:var( --pagemain-fg-color ); line-height:1.25em; margin-bottom:0.75em; }

pre { display:inline-block; width:100%; overflow:auto; }
code, samp, kbd {
	display:inline-block; font-family:"Lucida Console", "Courier New", monospace; font-weight:normal; font-size:0.8em; padding:0.25em; }
code { background-color:var(--code-bg-color); color:var(--code-fg-color); }
samp { background-color:var(--samp-bg-color); color:var(--samp-fg-color); }
kbd { background-color:var(--kbd-bg-color); color:var(--kbd-fg-color); }
p>code, p>samp, p>kbd, li>code, li>samp, li>kbd {
	padding:0 }
button { background-color:var(--button-bg-color); color:var(--button-fg-color);
	margin:0.125rem; border:0.1rem solid var(--button-bd-color); border-radius:0.25rem;
	padding:0.125rem 0.5rem; font-size:0.75rem; cursor:pointer; }
table { width:100%; border-collapse:collapse; border-width:0; border-style:solid; line-height:1.25em; }
th { border-width:1px; padding:0.5rem 0.25rem; border-style:solid; }
td { border-width:1px; padding:0.1rem 0.25rem; border-style:solid; }

/*----------------------------------------------------------------------------*/
/* Uniquely IDENTIFIED layout controlling elements                            */
#pageContainer {
	width:100vw; max-width:100%; margin:0px auto 0px auto;
	background-repeat:repeat-y;
	background-color:var(--page-bg-color); }
/* Header */
#pageHeader {
	clear:both; position:sticky; top:0; z-index:2; margin:1rem auto 0 auto; width:100%; background-color:var( --page-bg-color ); }
#pageHeader > :first-child {
	padding:0.1rem 0.1rem 0 0.1rem;
	border-style:solid; border-width:0.1rem 0.1rem 0 0.1rem; border-color:var(--pageheader-bd-color); border-radius:0 1rem 0 0;
	background-color:var(--pageheader-bg-color); color:var(--pageheader-fg-color);  }
#pageHeader::after { position:relative; height:1em; display:block; content:""; background-color:var( --page-bg-color ); }
/* Main page ( 3 columns ) */
#pageMain {
	clear:both;	position:relative; margin:0 auto 0 auto; width:100%;
	border-style:solid; border-width:0.1rem; border-color:var(--pagemain-bd-color);
	text-align:left;
	background-color:var(--pagemain-bg-color); color:var(--pagemain-fg-color); }
#pageLeftBar { position:sticky; top:8.4em; width:14.33%; margin-left:2%; margin-top:1em; float:left; overflow:hidden; }
#pageContent { position:relative; width:63.33%; margin-left:2%; margin-top:1em; float:left; overflow:hidden; }
#pageRightBar { position:sticky; top:8.4em; width:14.33%; margin-left:2%; margin-top:1em; float:left; overflow:hidden; }
/* Footer */
#pageFooter {
	clear:both;	position:relative; margin:1rem auto 2rem auto; width:100%; padding:1rem;
	border-style:solid; border-width:0.1rem; border-color:var(--pagefooter-bd-color); border-radius:0 0 1rem 1rem;
	text-align:left; font-size:0.8em; line-height:1.2em;
	background-color:var(--pagefooter-bg-color); color:var(--pagefooter-fg-color); }
/*div.spacer { position:relative; height:1em; } */






.boxCntr {}
.boxCntr>input { display:none; }
.boxCntr>input~.boxContent { display:none }
.boxCntr>input:checked~.boxContent { display:block }





/*----------------------------------------------------------------------------*/
/* Uniquely IDENTIFIED user interface components and their children           */

/* Logo */
#logo { font-family:orbitron, Arial, sans-serif; font-size:2em; color:var(--logo-fg-color); white-space:nowrap; }
#logo img { position:relative; width:2.4em; height:2.4em; vertical-align:middle; margin:0.1em 0; }
#logo span { display: inline-block; position:relative; left:-1.25em; vertical-align:middle; }
#logo span br { display:none; }

/* Site navigation bar */
#headerNav { }
#headerNav>input, #headerNav>label { display:none; }
#headerNav>nav { display:block; margin:0; padding:0; }
#headerNav>nav .navTopItem {
	position:relative; display:inline-block; margin:0 0.1em; padding:0.1em 0.2em; width:20%; cursor:pointer;
	background-color:var(--sitenavtop-bg-color); color:var(--sitenavtop-fg-color);
	border-width:0 0 var(--overlay-bd-width) 0; border-style:solid; border-color:var(--sitenavtop-bd-color); }
#headerNav>nav .navTopItem:hover { background-color:var(--sitenavtop-bghover-color); color:var(--sitenavtop-fghover-color); border-color:var(--sitenavtop-bd-color); }
#headerNav>nav .navSub {
	position:absolute; left:95%; top:0; width:100%; z-index:1; padding:0;
	border:0.1em solid var(--sitenavsub-bd-color); }
#headerNav>nav .navSub.navSubFirst { left:0; top:calc(1.3em); }
#headerNav>nav .navSubItem {
	display:block; position:relative; padding:0.1em 0.2em;
	background-color:var(--sitenavsub-bg-color); color:var(--sitenavsub-fg-color);
	white-space:nowrap; }
#headerNav>nav .navSubItem:hover { background-color:var(--sitenavsub-bghover-color); color:var(--sitenavsub-fghover-color); border-color:var(--sitenavsub-bd-color); }
#headerNav>nav a { display:block;
	white-space:nowrap; font-weight:normal; text-decoration:none; color:inherit; }

/* USER overlay (log in/out, account, preferences etc) */
#headerUser { position:absolute; top:0.1em; right:0.1em; text-align:right; }
#headerUser>label { position:absolute; top:0; right:0; display:inline-block; height:var(--overlay-button-size); cursor: pointer; }
#headerUser>label>img { width:var(--overlay-button-size); }
#headerUser>.boxContent  { position:relative; top:var(--overlay-button-size); border:0.1em solid var(--overlay-bd-color); width:20em; background-color:var(--overlay-bg-color); z-index:1; }
#headerUser>.boxContent>h4 { text-align: left; margin: 0.1em 0 0 0.2em; font-size: 1.125em; }
#headerUser>.boxContent>form { position:relative; top:0; right:0; width:100%;
	color:var(--overlay-fg-color); margin-right:0.5rem; padding:0.5em; font-size:0.625em;  line-height:1.75em; text-align:right; }
#headerUser>.boxContent>form label { display:inline-block; width:100%; text-align:right; }
#headerUser>.boxContent>form input { color:var(--common-input-fg-color); background-color:var(--common-input-bg-color);
	border-width:0 0 0.1em 0.3em; border-style:solid; border-color:var(--common-input-bd-color);
	display:inline-block; width:61%; margin:0 3%; padding:0.1em; }
#headerUser>.boxContent>form button { font-size:1em; padding:0 0.1em; }




/*----------------------------------------------------------------------------*/
/* DEFAULT ELEMENTS WITHIN EACH MAIN SECTION                                  */

/* Main -> left bar */
#pageLeftBar nav {
	background-color:var(--leftnav-bg-color); color:var(--leftnav-fg-color); }
#pageLeftBar nav a:link {display:block; overflow:hidden; padding:0.5em 0.25em;
  font-weight:normal; text-decoration:none; font-size:0.75em;
  color:var(--leftnavitem-fg-color); }
#pageLeftBar nav a:visited { color:var(--leftnavitem-fgvisit-color); }
#pageLeftBar nav a:hover { background-color:var(--leftnavitem-bghover-color); color:var(--leftnavitem-fghover-color); }

/* Main -> content */
#pageContent figure { max-width:100%; overflow:hidden; background-color:var( --figure-bg-color ); color:var( --figure-fg-color );
	padding:0 0 0.2em 0; margin:1em 0 1em 0; }
#pageContent figcaption { text-align:center; font-weight:bold; margin-top:0.5em; margin:bottom:0.2em; }
#pageContent img { max-width:100%; }

#pageContent nav { display:inline-block; width:50%; vertical-align:middle; }
#pageContent a.prevPage { display:inline-block; width:100%; text-align:left; vertical-align:middle; text-decoration:none; color:var(--leftnavitem-fg-color);  }
#pageContent a.nextPage { display:inline-block; width:100%; text-align:right; vertical-align:middle; text-decoration:none; color:var(--leftnavitem-fg-color);  }
#pageContent a.prevPage:visited,
#pageContent a.nextPage:visited { color:var(--leftnavitem-fgvisit-color); }
#pageContent a.prevPage:hover,
#pageContent a.nextPage:hover { background-color:var(--leftnavitem-bghover-color); color:var(--leftnavitem-fghover-color); }
#pageContent a.prevPage .text ,
#pageContent a.nextPage .text { display:inline-block; width:92%; vertical-align:middle; padding:0.25em; }
#pageContent a.prevPage .icon,
#pageContent a.nextPage .icon { font-size:2em; width:8%; vertical-align:middle; }

#pageContent th { font-weight:bold; }

#pageContent tr:nth-child(even) { background-color:var( --table-bodybge-color ); }
#pageContent tr:nth-child(odd) { background-color:var( --table-bodybgo-color ); }
#pageContent tr:first-child { background-color:var( --table-headbg-color ); }

#pageContent ul { list-style-type:square; list-style-position:outside; padding-left:2em; }
#pageContent ul li { color:var( --pagemain-fg-color ); line-height:1.25em; }
#pageContent ul li::marker { color:var(--h1-fg-color); }
#pageContent ul li:last-child { margin-bottom:0.75em; }

/* Footer */
#pageFooter a { color:inherit; }



/*----------------------------------------------------------------------------*/
/* Base and uniquely IDENTIFIED element and component overrides for           */
/* EXTRA WIDE viewports ( >960px wide )                                       */
@media only screen and (min-width: 960px) {
	/* Fix container widths and font sizes */
	html { font-size:var(--responsive-text-size-wide); }
	body {}
	#pageContainer { width:var(--max-layout-width); }
}

/*----------------------------------------------------------------------------*/
/* Base and uniquely IDENTIFIED element and component overrides for           */
/* INTERMEDIATE viewports ( 601px - 800px wide )                              */
@media only screen and (max-width: 800px) {
	html { font-size:var(--responsive-text-size-intermediate); }

	#pageLeftBar { position:sticky; top:8.4em; width:17.6%; margin-left:2%; margin-top:1em; float:left; }
	#pageContent { position:relative; width:76.4%; margin-left:2%; margin-top:1em; float:left; }
	#pageRightBar { position:relative; top:0; width:96%; margin-left:2%; margin-top:1em; }

	#logo span br { display:inline; }

}

/*----------------------------------------------------------------------------*/
/* Base and uniquely IDENTIFIED element and component overrides for           */
/* NARROW / MOBILE viewports ( <=600px wide )                                 */
@media only screen and (max-width: 600px) {
	html { font-size:var(--responsive-text-size-narrow); scroll-padding-top:0; }

	#pageHeader { position:relative; margin:0 auto 0 auto; }
	#pageHeader > :first-child { border-width:0; border-radius:0; }

	#pageMain { border-width:0; }
	#pageFooter { margin:2rem auto 0 auto; border-width:0; border-radius:0; }

	#pageLeftBar, #pageContent, #pageRightBar {
		position:relative; top:0; width:96%; margin-left:2%; margin-top:1em; }

	#logo { display:block; text-align:center; }
	#logo img { width:1.2em; height:1.2em; }
	#logo span { position:absolute; left:0; top:0.5em; width:100%; font-size:0.75em; }
	#logo span br { display:none; }

	/* Navigation bar (menu) button */
	#headerNav { position:absolute; top:0; left:0; z-index:1; font-size:var(--overlay-scale-narrow); }
	#headerNav>label { display:block; height:var(--overlay-button-size-n); width:var(--overlay-button-size-n);
		background-color:var(--bigicon-bg-color); cursor: pointer; }
	#headerNav>label>img { width:var(--overlay-button-size-n); }
	/* Navigation bar (menu) content visibility */
	#headerNav>nav { overflow:hidden; background-color:var(--overlay-bg-color); }
	#headerNav>input ~ nav { width:0; }
	#headerNav>input:checked ~ nav { width:87.5vw; }
	/* Navigation bar (menu) top level content */
	#headerNav>nav>ul { display: block; }
	#headerNav>nav>ul>li { display:block; width:100%; margin:0; padding:0; line-height:2em;
		border-width: 0 var(--overlay-bd-width-n) var(--overlay-bd-width-n) var(--overlay-bd-width-n); }
	#headerNav>nav>ul>li:first-child { border-width: var(--overlay-bd-width-n); }
	/* Navigation bar (menu) subsequent level content */
	#headerNav>nav>ul>li ul {
		position:relative; left:0; top:0; padding:0; border-width:0; }
	#headerNav>nav>ul>li ul li {
		padding:0 0 0 1em; line-height:2em; }


	/* User panel button */
	#headerUser { top:0; right:0; z-index:1; font-size:var(--overlay-scale-n); text-align:right; }
	#headerUser>label { top:0; right:0; height:var(--overlay-button-size-n); background-color:var(--bigicon-bg-color); }
	#headerUser>label>img { width: var(--overlay-button-size-n); }
	/* User panel content */
	#headerUser>div { top:var(--overlay-button-size-n); }
	#headerUser>input:checked ~ div { width:87.5vw; }
	#headerUser>div>div { width:87.5vw; }
	/* User panel log in/out panel */
	#headerUser>div>div>form { border:var(--overlay-bd-width-n) solid var(--overlay-bd-color); }

		
}


/*div, span, applet, object,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img,
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
label, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0; padding: 0; border: 0;
  font-size: 1em; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
/*article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
section {
  display: block; }
body {
  background-color:#ffffff; line-height: 1;
  font-size:100%; font-family:Arial, sans-serif; }
ul {
  list-style:disc inside none; }
ol {
  list-style:decimal inside none; }
blockquote, q {
	quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

a { color:inherit; }
strong { font-weight:bold; }
table { border-collapse:collapse; border-spacing:0; }
*/

/*----------------------------------------------------------------------------*/
/* Default element styles                                                     */

/*
samp, pre.samp{ display:inline-block; background-color:#e8e8ff; font-family:"Lucida Console", "Courier New", monospace;  margin-bottom:4px; }
kbd, pre.kbd{ display:inline-block; background-color:#e0e0ff; font-family:"Lucida Console", "Courier New", monospace;  margin-bottom:4px; }
*/




	
	
	
	
	
	
/*#navigation>span {
  position:relative; z-index:5; padding:0 15px 0 15px;
  color:#ffffff; font-size:10pt; }
span.navmainmenu {
  position:absolute; left:4px; top:15px; visibility:hidden;
  border:1px solid #0066cc; padding:2px; background-color:#003B77; }
span.navsubmenu {
  position:absolute; left:80px; top:0; visibility: hidden;
  border:1px solid #0066cc; padding:2px; background-color:#004488; }


span.navmenu {display:block; position:relative; background-color:transparent; padding:2px 5px 2px 5px;
  white-space:nowrap; font-weight:normal; text-decoration:none; color:#ffffff; }
a.navmenu:link {display:block; background-color:transparent; padding:2px 5px 2px 5px;
  white-space:nowrap; font-weight:normal; text-decoration:none; color:#ffffff; }
a.navmenu:visited {display:block;  background-color:transparent;
  white-space:nowrap; font-weight:normal; text-decoration:none; color:#ffffff; }
a.navmenu:active {display:block; background-color:transparent;
  white-space:nowrap; font-weight:normal; text-decoration:none; color:#ffffff; }
a.navmenu:hover {display:block; background-color:#0080e0;
  white-space:nowrap; font-weight:normal; text-decoration:none; color:#ffffff; }


/*#contentheader {
  clear:both;
  position:relative; margin:20px auto 0px auto; width:934px; padding:5px 13px;
  border-style:solid; border-width:1px 1px 0px 1px; border-color:#000000;
  text-align:left; }
#contentheader h1 { margin:0.5em 0; font-size:2em; color:#003366; font-weight:bold; }
*/

/*#content {
  clear:both;
  position:relative; margin:0px auto 0px auto; width:960px; padding-top:15px;
  border-style:solid; border-width:0px 1px 1px 1px; border-color:#000000;
  text-align:left;
  background-color:#f6f6f6; }
#content h2 { margin-bottom:0.5em; font-size:1.5em; color:#0066cc; }
#content h3 { margin-bottom:0.25em; margin-top:0.25em; font-size:1em; color:#0066cc; }
#content hr { width:80%; margin:10px auto 10px auto; clear:both; border-width:1px 0px 0px 0px; border-style:solid; border-color:#000000; }
#content p { line-height:1.2em; margin-bottom:0.5em; }
#content ul { line-height:1.2em; padding-left:32px; }

#footer h2 { font-weight:bold; color:#ffffff; }
#footer p { margin-bottom: 0.25em; }


/* Styles to define the column based layout in the <main>.                    */
/* Layout consists of a central content area flaanked by narrow 'side-bars'   */
/* the left and right. The right sidebar will flow below the main content     */
/* when the page is < 800px wide. The left sidebar will flow above the main   */
/* content when the page is < 600px wide.                                     */


/* Intermediate semi-collapsed layout */


/* Narrow inline layout */









/*#pageLeftBar nav a:visited {display:block;  background-color:transparent;
  white-space:nowrap; font-weight:normal; text-decoration:none; color:#ffffff; }
#pageLeftBar nav a:active {display:block; background-color:transparent;
  white-space:nowrap; font-weight:normal; text-decoration:none; color:#ffffff; }
#pageLeftBar nav a:hover {display:block; background-color:#0080e0;
  white-space:nowrap; font-weight:normal; text-decoration:none; color:#ffffff; }
*/




#eHeaderTheme { display:inline-block; border-color:var(--eHeaderLogin-bd-color); border-radius:0%; 
	margin-right:0.5rem; padding:0 0.2em; font-size:0.625em; }
#eHeaderTheme::after { content:var(--themebutton-name-text); }












/*----------------------------------------------------------------------------*/
/* Styles required by the e_session mini login. Duplicating these here saves  */
/* having to download /e/session/session.css on every page                    */

div.esloginmt {
  float:right;
  margin:0; border-width:0 0 0 2px; border-style:solid; border-color:#FFFFFF; padding:15px 1px 1px 3px;
  background-color:transparent; 
  font-family:"Arial", sans-serif; font-size:9pt; color:#808080; text-align:center }

table.esloginmt {
  margin:0; margin-left:auto; margin-right:auto; width:100%; border-style:solid; border-color:#000000; border-width:0;
  background-color:transparent; }

td.esloginmtl {
  height:20px; width:50%;
  padding:0 3px 0 3px;
  font-family:Arial, sans-serif; font-size:10pt; font-weight:bold; text-align:right; vertical-align:middle }

td.esloginmtr {
  height:20px; width:50%;
  padding:0 3px 0 3px;
  font-family:Arial, sans-serif; font-size:10pt; font-weight:bold; text-align: left; vertical-align:middle }

input.esloginmt {
  width:50px; height:13px;
  margin:0px; border-width:1px; border-style:solid; border-color:#c0c0c0;
  font-size:7pt }

span.esloginmtb {
  margin:0px 3px 0px 3px; padding:2px 3px 2px 3px; cursor:pointer;
  border:1px solid #000040; background-color:#e0e0f8;
  font-size:7pt; color:#000040; font-weight:bold; text-decoration:none; }

a.esloginmtb {
  text-decoration:none; }


/*----------------------------------------------------------------------------*/
/* Styles required by AJAX full screen overlays. Duplicating this here saves  */
/* having to download /e/session/session.css on every page                    */
div.eajaxfsoshade {
    position:fixed; top:0px; left:0px; width:100%; height:100%;
    opacity:0.7; background-color:#808080;
}
div.eajaxfso {
    position:fixed; top:0px; left:0px; width:100%; height:100%;
    z-index:100;
    background-color:transparent;
}
div.eajaxfsodialog {
    position:relative; width:50%; margin:10px auto 0px auto;
    z-index:100;
    border:2px solid #000000; border-radius:8px;
    padding:15px 5px 5px 5px;
    font-size:12pt;
    background-color:#ffffff;
}
button.eajaxfso {
    display:block;
    margin:10px auto 10px auto;
}
div.eajaxwaitfade {
	position:absolute; display:block; top:0px; left:0px; padding:4px;
	border:3px solid #ff0000;
	background-color:rgba(0,0,0,0.5); text-align:center;
	color:#ffffff; font-weight:bold; font-size:12pt;
	overflow:hidden;
}
div.eajaxwaitcapt {
	display:inline-block; border:2px solid #000000; border-radius:15px;
	background-color:#ffffff; color:#000000; padding:5px 10px;
}
img.eajaxwaitanim {
	vertical-align:middle; padding-bottom:4px;
}