/* Author: John Valentine. http://www.johnvalentine.co.uk */
/* Theme colour: hue 240 */

html {
	--hue: 240;
	--background-value: 100%;
	--text-value: 0%;
	--text-highlight-background-color: #FF8;

	--text-ui-color: hsl(120,0%,20%);
	--text-label-color: hsl(120,60%,0%);
	--text-type-color: hsl(120,100%,20%);
	--text-type-background-color: hsla(60, 100%, 30%, 0.15);
	--text-key-color: hsla(0,100%,20%,1);
	--text-key-background-color: hsl(0,10%,90%);

	--link-hover-value: 0%;
	--link-value: 20%;
	--link-saturation: 80%;
	--link-visited-saturation: 80%;
	--link-decoration-saturation: 30%;
	--link-decoration-value: 80%;
	--link-decoration-alpha: 0.3;
	--link-visited-shadow: 0 0 2px white, 0 0 4px #eef, 0 0 6px #eef, 0 0 4px #fff, 0 0 8px #ff0, 0 0 14px #ff0;

	--heading-saturation: 70%;
	--heading-value: 20%;
	--heading-1-alpha: 0.9;
	--heading-2-alpha: 0.7;
	--heading-decoration-value: 0%;
	--title-background-value: 20%;
	
	--section-background-value: 50%;
	--section-detail-alpha: 0.05;
	--section-boxout-alpha: 0.11;
	--section-get-background-color: hsla(var(--hue), 100%, var(--section-background-value), 0.04);
	--section-links-background-color: hsla(var(--hue), 40%, var(--section-background-value), 0.04);
	--section-links-item-background-color: hsl(0, 0%, var(--background-value));
	--section-keynote-border-color: hsla(var(--hue),100%,20%,0.04);
	--image-background-value: 100%;

	--details-decoration-border-color: hsla(var(--hue), var(--text-quote-decoration-saturation),var(--text-quote-decoration-value), 0.04);

	--pop-background-value: 95%;
	--pop-background-saturation: 45%;
	--pop-border-color: hsl(var(--hue), 35%, 75%);
	--pop-row-background: hsl(var(--hue), 45%, 95%);

	--ref-match-background: hsl(var(--hue),50%,93%);

	--table-border-color: hsl(var(--hue),75%,97%);
	--table-line-top-color: hsl(var(--hue),75%,97%);
	--table-head-background-color: hsla(var(--hue),100%,50%,0.03);

	--text-quote-decoration-saturation: 40%;
	--text-quote-decoration-value: 95%;
	--text-quote-large-quotes-color: hsla(var(--hue),50%,50%,0.28);

	--showcase-background: hsla(0,0%,100%,1);
	--tag-background-value: 90%;
	--code-background-value: 3%;

	--button-primary-color: hsla(120,100%,70%,1);
	--button-go-color: hsla(var(--hue),100%,50%,0.05);
	--button-go-hover-color: hsla(var(--hue),90%,50%,0.05);
	--icon-color: hsl(var(--hue), 30%, 60%);

	--input-border-color: white;

	--box-overlay-shadow-alpha: 0.12;
	
	font-size: 16px;
	font-weight: 400;

	text-rendering: optimizeLegibility;
	font-variant-ligatures: common-ligatures;

}
html, p, li, td, th {
	color: hsl(0, 0%, var(--text-value));
}
.icon-fill {
	fill: var(--icon-color) /* was #3953A4; */
}


@media screen and (prefers-color-scheme: dark) {
	html {
		--background-value: 10%;
		--text-value: 85%;
		--text-highlight-background-color: #440;

		--text-ui-color: hsl(240,10%,95%);
		--text-label-color: hsl(240,10%,90%);
		--text-type-color: hsl(120,30%,85%);
		--text-type-background-color: hsl(120,10%,20%);
		--text-key-color: hsl(0,100%,85%);
		--text-key-background-color: hsl(0,10%,20%);

		--link-hover-value: 100%;
		--link-value: 80%;
		--link-saturation: 30%;
		--link-visited-saturation: 30%;
		--link-decoration-saturation: 20%;
		--link-decoration-value: 25%;
		--link-decoration-alpha: 0.8;
		--link-visited-shadow: 0 0 2px black;
	
		--heading-saturation: 40%;
		--heading-value: 80%;
		--heading-1-alpha: 0.9;
		--heading-2-alpha: 0.8;
		--heading-decoration-value: 70%;
		--title-background-value: 80%;

		--section-background-value: 20%;
		--section-detail-alpha: 0.30;
		--section-boxout-alpha: 0.20;
		--section-get-background-color: hsla(var(--hue), 20%, 0%, 0.5);
		--section-links-background-color: hsla(var(--hue), 20%, 0%, 0.24);
		--section-links-item-background-color: hsla(var(--hue), 20%, var(--section-background-value), 0.64);
		--section-keynote-border-color: hsla(var(--hue),20%,40%,0.24);
		--image-background-value: 100%; /* for white-based SVG */

		--details-decoration-border-color: hsla(var(--hue), var(--text-quote-decoration-saturation),var(--text-quote-decoration-value), 0.24);

		--pop-background-value: 15%;
		--pop-background-saturation: 5%;
		--pop-border-color: hsl(var(--hue), 15%, 30%);
		--pop-row-background: none;

		--ref-match-background: hsl(var(--hue),10%,5%);

		--table-border-color: hsl(var(--hue),15%,20%);
		--table-line-top-color: hsl(var(--hue),15%,20%);
		--table-head-background-color: hsla(var(--hue),30%,50%,0.23);

		--text-quote-decoration-saturation: 20%;
		--text-quote-decoration-value: 60%;
		--text-quote-large-quotes-color: hsl(var(--hue),15%,50%);

		--showcase-background: hsla(0,0%,0%,0.4);
		--tag-background-value: 20%;
		--code-background-alpha: 12%;

		--button-primary-color: hsla(120, 50%, 20%, 1);
		--button-go-color: hsla(var(--hue), 50%, 50%, 0.15);
		--button-go-hover-color: hsla(var(--hue),50%,50%,0.15);
		--icon-color: hsl(var(--hue), 30%, 60%);

		--input-border-color: black;

		--box-overlay-shadow-alpha: 0.4;

}
	input {
		background: hsl(0, 0%, var(--background-value));
		color: hsl(0, 0%, var(--text-value));
	}

}

body {
	margin: 0;
	background-color: hsl(0, 0%, var(--background-value));
	font-family: 'Open Sans', 'Segoe UI', 'Calibri', 'Georgia', 'Tahoma', 'Arial', 'Helvetica', 'Sans';
	line-height: 1.8;
	text-align: left;
	text-rendering: optimizeLegibility;
}

/* New 2016.11.001 - HTML 5.1 BEGIN */
/* New 2021.08.001 - updated CSS to non-experimental CSS */
details {
	display: block;
}

summary > h1,
summary > h2,
summary > h3 {
	display: inline-block;
}

summary {
	margin-left: -3.25em;
	padding: 0rem 1.2rem 0.5rem 2.2rem;
	cursor: pointer;
	display: block;
}
summary > h1 {
	padding-top: 0.8rem;
}

summary::marker {
	display: none;
}

summary::before {
		content: "\25b6";
		margin-left: -1em;
		margin-right: 1em;
		color: hsla(240,100%,var(--heading-value),0.5);
}
details[open] summary::before {
	display: none;
}

details[open] summary {
	padding-left: 3.10em;
	margin-top: 0.9em;
}

details[open] {
	background: hsla(var(--hue),100%,20%,0.02);
	padding: 0.01em 1.6em 1.3em 1.6em;
	border-left: 8px var(--details-decoration-border-color) solid;
	margin-top: 0.8em;
	margin-left: -2.1em;
	display: flex;
	flex-direction: column;
}

details[open]:not(:last-of-type) {
	margin-bottom: 1.2em;
}

details {
	margin-top: 1.1em;
	margin-bottom: 0.6em;
}

details:not([open]) > summary,
ul.links > li,
ul.links > a > li,
ol.links > li,
ol.links > a > li {
	border: 1px dotted hsla(var(--hue),100%,20%,0.10);
	background: hsla(var(--hue),10%,20%,0.4);
	border-radius: 8px;
}

ol.links > li,
ol.links > a > li {
	margin-bottom: 0.9em;
	padding: 0.7em 0.5em 0.7em 1.7em;
	margin-left: -1.50rem;
}
ul.links > li,
ul.links > a > li {
	margin-bottom: 0.9em;
	padding: 0.7em 0.5em 0.7em 1.7em;
	margin-left: -2.60rem;
	list-style: none;
}

section.links > div > ul > li,
section.links > div > ul > a > li,
section.links > div > ol > li,
section.links > div > ol > a > li {
	background-color: var(--section-links-item-background-color);
}

section.links > div > ul,
section.links > div > ol {
	padding-top: 1.5em;
}

details:not([open]) > summary > h1:after,
details:not([open]) > summary > h2:after,
details:not([open]) > summary > h3:after {
	content: ' …';
	color: hsla(var(--hue),100%,20%,0.30);
}

details[open] > summary > h1,
details[open] > summary > h2,
details[open] > summary > h3 {
	display: inline;
	margin-left: 0rem;

}

details:not([open]) > summary > p {
	margin-left: 1.25rem;
	margin-bottom: 1rem;
}


details:not([open]) > summary > h1 {
	border-bottom: none;
	margin-bottom: 0.2em;
}

/* New 2016.11.001  END */


/* New 2014.07.001  BEGIN */
section {
	width: 100%;
	margin: 0 auto;
	padding: 12px 0 26px 0;
}

section.title-only {
	margin-bottom: -0.7rem;
	padding-bottom: 0;
}

section.title-only h1 {
	margin-bottom: 0;
}

/* 'Hero' image section: large image with text overlay */

section.image {
	display: flex 1 0 20rem;
	flex-direction: column;
	align-items: stretch;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	text-align: center;
	padding-top: 4rem;
	padding-bottom: 4rem;
	color: white;
}
section.image-only {
	text-align: center;
	margin: 0;
	padding: 0;
}

a > section.image:hover {
	opacity: 0.9;
}

section.image .credit {
	align-self: flex-end;
	padding-top: 10rem;
}

section.image div {
	flex: 1 0 100%;
	padding-left: 12%;
	padding-right: 12%;
}

section.image div h1, section.image div h2 {
	font-weight: 700;
	font-size: 3rem;
	color: white;
	line-height: 1.05;
	text-align: center;
	border: none;
	text-shadow: 0 0 2px black, 0 0 4px black, 0 2px 32px rgba(0,0,0,0.7);
}

section.image div p {
	font-size: 1.2rem;
	font-weight: 600;
	font-style: italic;
	text-shadow: 0px 0px 3px black, 0px 0px 15px black;
	color: white;
}

section.image .description {
	padding-bottom: 1.7rem;
}

section.image div h2 {
	font-size: 1.8rem;
	margin: 3vw auto 1vw auto;
	line-height: 1.2;
}

/* */

section.search p {
	margin-top: 1em;
}

section.title {
	background-color: hsl(0, 0%, var(--background-value));
	padding: 0;
	box-shadow: 0 0 24px rgba(0,0,0,0.07);
}

.siteTitle {
	float: left;
	padding: 0 9px 1.75px 12px;
	margin: 0 12px 0 -12px;
	border-radius: 0;
	background: hsla(var(--hue), 100%, var(--title-background-value), 0.05);
	font-size: 2.3rem;
	font-weight: 300;
	text-align: left;
	cursor: pointer;
}

.siteTitle:hover {
	background: hsla(var(--hue), 100%, var(--title-background-value), 0.15);
}

section.navicons {
	z-index: 101;
	position: fixed;
	height: 0;
	padding: 0;
}

.icon-pointer {
	cursor: pointer;
}

section > div {
	max-width: 860px; /* article width */
	margin: 0 auto;
	padding: 0 64px 0 76px;
}

section.detail > div {
	max-width: 824px;
	padding: 0 84px 0 96px;
}

section.summary > div > p:first-child {
	margin-top: 1.6em;
}

section.s {
	padding-bottom: 12px;
}

div.navicons {
	position: fixed;
	width: 32px;
	display: inline-block;
	margin: 16px 0 0 -60px;
	z-index: 10;
}

div.siteicon {
	margin-bottom: 14px;
}

div.siteicon img {
	opacity: 0.3;
}

div.siteicon img:hover {
	opacity: 1.0;
}
/* END New 2014.07.001 */

.summary,
.detail      { background-color: hsla(var(--hue),  0%, var(--section-background-value), var(--section-detail-alpha)); color: rgba(0, 0, 0, 0.70); }
.boxout      { background-color: hsla(var(--hue),  0%, var(--section-background-value), var(--section-boxout-alpha)); color: rgba(0, 0, 0, 0.90); }
.readcontext { background-color: hsla(060, 100%, var(--section-background-value), 0.09); border: 1.5px solid rgba(128, 128, 0, 0.02); }
.steps    	 { background-color: hsla(120,  30%, var(--section-background-value), 0.10); border: 1.5px solid rgba(128, 128, 0, 0.02); }
.warning		 { background-color: hsla(000, 100%, 30%, 0.10); border: 1.5px solid rgba(128, 0, 0, 0.01); }
section.get     { background-color: var(--section-get-background-color); color: rgba(0, 0, 0, 0.65); }
section.contents,
section.links     { background-color: var(--section-links-background-color); color: rgba(0, 0, 0, 0.65); }
section.important	{ background-color: hsla(120, 100%, var(--section-background-value), 0.05); border: 1.5px solid rgba(  0,  64, 0, 0.10); border-radius: 0; padding-bottom: 12px; }

section > div > p:first-child { margin-top: 1rem; }

.keynote {
	background: hsla(var(--hue), 100%, var(--title-background-value), 0.02);
	padding: 0.2em 1.6em 0.25em 1.0em;
	border-left: 8px var(--section-keynote-border-color) solid;
	margin: 0.8em 0;
}

div.keynote {
	padding-bottom: 0.75em;
	padding-top: 0.6em;
}

/* Page parts */

.headTitle, .siteTitle, .headSearch {
	display: table-cell;
}

.headTitle { /* Text identifying the article */
	padding: 12px 0 12px 0;
	font-weight: 300;
	text-align: left;
	font-size: 2.3rem;
	line-height: 115%;
}


.copyright {
	text-align: right;
	font-size: 0.8rem;
}
.copyright a {
	color: hsla(var(--hue),100%,20%,0.8);
}

/* Metadata pop-up */

div.pop {
	display: none;
	width: 28rem;
	z-index: 3;
	background-color: hsl(var(--hue), var(--pop-background-saturation), var(--pop-background-value));
	margin-left: 46px;
	margin-top: -46px;
	padding: 4px 12px 15px 12px;
	border: 2px var(--pop-border-color) solid;
	box-shadow: 0 12px 24px rgba(0,0,0, var(--box-overlay-shadow-alpha));
}

#pop_search {
	margin-top: 8px;
}

div.popRow {
	font-size: 1.1rem;
	background: var(--pop-row-background);
	padding: 4px;
	margin: 0 0 1px 0;
}

div.popRow input {
	font-size: 1.4rem;
}
div.popRow input[type='text'] {
	width: 8em;
}
div.popRow div ul {
	margin-left: 2.5em;
}

/* Article: boxes and floats */

div.detail {
	margin: 4px -48px 12px -72px;
	padding: 12px 48px 18px 72px;
}

div.boxout
  {
	margin: 24px 0 24px 0;
	padding: 24px 40px 24px 40px;
}

div.quote {
	margin: 1em;
	padding: 0.2em;
	display: table;
}

/* showcase: intended for title, pic, short para */

.showcase {
	margin: 0 -2.8rem 1rem -1.2rem;
	display: flex; 
  flex-flow: row wrap;
	justify-content: center;
}

.showcase .item {
	display: inline-table;
	box-shadow: 0 3px 20px hsla(0,0%,0%,0.1);
	background: var(--showcase-background);
	width: 25rem;
	padding: 0.2rem 1.2rem 0.9rem 1.2rem;
	border-radius: 1rem;
	position: relative;
	margin: 0 1rem 1.4rem 0;
}

.showcase .item.wide {
	width: calc(100% - 4rem);
}

.showcase .screenshot {
	margin-left: auto;
	margin-right: auto;
}
.showcase .screenshot img {
	max-width:90vw;
	width: 25rem;
}

.showcase .btns,
.showcase p {
	text-align: center;
}

/* abox: block container for featured page */

.aboxes {
	margin: 0 -2.8rem 1rem 0;
}

.abox {
	position: relative;
	margin: 0 1em 1em 0;
	display: inline-table;
	width: 16.6rem;
	text-align: left;
}

.abox-title {
	margin-bottom: 0;
	font-size: 1.1rem;
}

.abox li {
	margin-left: -1.5rem;
}

.tagB {
	display: inline-block;
	padding: 0.2em 0.6em;
	margin: 0 0.6em 0.6em 0;
	background: hsl(var(--hue), 30%, var(--tag-background-value));
	font-size: 0.8rem;
	border-radius: 3px;
	-moz-box-shadow: 1px 3px 12px rgba(0,0,0,0.06);
	-webkit-box-shadow: 1px 2px 6px rgba(0,0,0,0.1);
	box-shadow: 1px 3px 12px rgba(0,0,0,0.06);
}

.tagB:last-child {
	margin-right: 0;
}

.tagB > a {
	font-weight: 400;
}

.tag {
	display: inline-block;
	padding: 0em 0.4em;
	background: hsl(var(--hue), 30%, var(--tag-background-value));
	font-size: 0.7rem;
	font-weight: 600;
	border-radius: 3px;
}

/* headings */

h1 {
	font-weight: 300;
	font-size: 1.8rem;
	line-height: 120%;
	text-align: left;
	margin-bottom: 0.5em;
	padding: 0.1em 0 0.2em 0;
	border-bottom: 1px solid hsla(0, 0%, var(--heading-decoration-value), 0.06);
	color: hsla(var(--hue), var(--heading-saturation), var(--heading-value), var(--heading-1-alpha));
}

h1 a {
	font-weight: 300;
}

h2 {
	font-weight: 700;
	font-size: 1.15rem;
	text-align: left;
	padding: 0.5em 0 0.0em 0;
	margin: 0 0 0.5rem 0;
	color: hsla(var(--hue), var(--heading-saturation), var(--heading-value), var(--heading-2-alpha));
}

h3 {
	font-weight: 600;
	font-size: 1.15rem;
	text-align: left;
	color: hsla(var(--hue), var(--heading-saturation), var(--heading-value), var(--heading-2-alpha));
	padding: 0.8em 0 0.3em 0;
	margin: 0;
}

h3:first-child {
	margin-top: 0;
	padding-top: 0;
}

h2:first-child {
	margin-top: 0.2rem;
	padding-top: 0;
}

h1:first-child {
	margin-top: 0.6rem;
}


/* lists */

#articleInfo ul, #pop_search ul {
	margin-left: 0;
}

ol, ul {
	margin-top: 0;
	margin-bottom: 1.0em;
}

ol:last-child, ul:last-child {
	margin-bottom: 0;
}

li {
	margin-bottom: 0;
}

ul+li {
	margin-top: -0.7em;
}

/* other html */

b {
	font-weight: bolder;
}

p {
	margin: 0 0 0.6rem 0;
	line-height: 1.8;
}
p:last-child {
	margin-bottom: 0;
}

p.list {
	padding: 0 0 0 1.5em;
	margin: 0;
}

p.quote {
	margin-bottom: 1rem;
	padding-left: 1rem;
	border-left: 0.3rem solid hsl(var(--hue), var(--text-quote-decoration-saturation), var(--text-quote-decoration-value));
}

p.center,
h1.center,
.center {
	text-align: center;
	border-bottom: none;
}

code {
	background: hsla(0, 0%, var(--text-value), var(--code-background-alpha));
	padding: 0.2rem 0.3rem;
	border-radius: 0.4rem;
}

table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 1.0rem;
}

a { /* many classes override the bottom border */
	text-decoration: none;
	font-weight: 600;
	color: hsl(var(--hue), var(--link-saturation), var(--link-value));
	text-shadow: 0 0 14px rgba(1, 1, 1, 0);
	border-bottom: solid 1px hsla(var(--hue), var(--link-decoration-saturation), var(--link-decoration-value), var(--link-decoration-alpha));
}

a:visited {
	color: hsl(var(--hue), var(--link-visited-saturation), var(--link-value));
	text-decoration: none;
}

a:hover {
	color: hsl(0, 0%, var(--link-hover-value));
	text-shadow: var(--link-visited-shadow);
}

a.def {
	border-bottom: dashed 1px hsla(var(--hue), var(--link-decoration-saturation), var(--link-decoration-value), var(--link-decoration-alpha));
}

a.external {
	background: url(../i/external.png) center right no-repeat;
	padding-right: 13px;
}

div.linkbox a {
	font-weight: 600;
}

a.no-decoration {
	border: none;
}

hr {
	border: 0;
	background-color: hsla(var(--hue), 100%, 40%, 0.05);
	height: 2px;
	margin: 18px 0;
}

/* 2013 figures and images */

.outlined {
	border: 2px solid hsla(var(--hue), 10%, 50%, 0.25)
}

div.illustration {
	display: flex;
	flex-direction: column;
	text-align: center;
	margin: 0.55em 0 1.7em 0;
	padding: 0;
	background: hsl(var(--hue), 0%, var(--background-value));
	border: 1px solid hsla(0,0%, var(--heading-decoration-value), 0.05);
}
div.illustration.white, .white-bg {
	background: white;
	border: 1px solid hsla(0,0%,0%,0.07);
}
div.illustration.white p.caption {
	background: none;
	color: hsl(var(--hue),25%, 0%);
	border: 1px solid hsla(0,0%,0%,0.07);
}

div.illustration img {
	margin: 12px;
}

div.illustration p.caption {
	color: hsl(var(--hue),25%, var(--text-value));
	background: hsla(var(--hue),100%,50%,0.02);
	padding: 0 0.7em 0 0.7em;
	margin-bottom: 0;
}

.tight {
	display: table;
	margin-left: auto;
	margin-right: auto;
}

img.tight {
	margin: 0;
}

div.illustration.tight {
	margin-top: 0;
}


/* Figures and images ################### */

.pic {
	border-collapse: collapse;
}

.screenshot img {
	border-radius: 0.6rem;
	border: 1px solid hsl(0, 0%, 20%);
	box-shadow: 1px 3px 18px rgba(0,0,0,0.2);
}
.tight > a, .screenshot > a {
	border-bottom: none;
}

.inGallery {
	margin: 0 0.5em 0.5em 0.5em;
	padding: 0;
	display: inline-block;
	background-color: hsl(var(--hue), 0%, var(--background-value));
	width: auto;
}

.fig {
	height: auto;
	-moz-box-shadow: 1px 3px 18px rgba(0,0,0,0.04);
	-webkit-box-shadow: 1px 3px 18px rgba(0,0,0,0.04);
	box-shadow: 1px 3px 18px rgba(0,0,0,0.04);
}

.fig {
	width: auto;
}

td.fig {
	padding: 0.5em;
	margin: 0 0 1.5em 0;
	text-align: center;
	background-color: hsl(var(--hue), 0%, var(--image-background-value));
}

/* tables */

tr {
	vertical-align: top;
}


td, th {
	padding: 5pt 9pt 4pt 9pt;
	background-color: transparent;
	line-height: 1.8;
}

/*  */

.fig img {
	background-color: hsl(var(--hue), 0%, var(--background-value));
	margin: 0;
}

td.cap {
	padding: 0 1em 0.1em 1em;
	margin: 0;
	text-align: center;
	background-color: hsl(var(--hue), 0%, var(--background-value));
}

/* Character-level formatting */

.hl { /* used in highlighting */
	background: var(--text-highlight-background-color);
	padding: 0.25em 0 0.3em 0;
}

.key, .type {
	font-family: "Consolas", "Lucida Console", "Mono", "Courier", "Sans";
	padding: 0.3em 0.35em 0.2em 0.35em;
	border-radius: 0.25rem;
}
.type {
	background-color: var(--text-type-background-color);
	color: var(--text-type-color);
}
.key {
	background-color: var(--text-key-background-color);
	color: var(--text-key-color);
}

.key:before {
	content: "["
}
.key:after {
	content: "]"
}

.screenname, .ui { /* documentation: quoting GUI zones and headings */
	color: var(--text-ui-color);
	font-weight: 600;
}

.makeref, .super {
	position: relative;
	bottom: 0.6em;
	font-size: 0.8rem;
}
.ref-title,
.ref-author {
	font-weight: 600;
}

.subscr { /* TODO: consider replacing with mathML */
	position: relative;
	top: 0.5em;
	font-size: 1rem;
}
.superscr {
	position: relative;
	top: -0.55em;
	font-size: 1rem;
}

.nb { /* Non-breaking */
	white-space: nowrap;
}

.term {
	font-weight: 700;
}

.emph {
	font-style: italic;
}

.subtle {
	opacity: 0.5;
}

.hidden {
	display: none;
}

.head-tags {
	float: right;
}
h2 .tagB {
	margin-bottom: 0;
}

/* Buttons */

.btns {
	color: hsl(0, 0%, var(--text-value));
	margin: -0.6rem 0 1.6rem 0;
	line-height: 3.4rem;
}
.showcase .btns {
	margin-top: 0;
	margin-bottom: 0.2rem;
}

.btns .btn_go {
	white-space: nowrap;
}

.btns.center {
	text-align: center;
}

section.get .btns .btn_go {
	padding: 0.7em 1em 0.7em 1em;
}
section.get .btns {
	margin: 1rem 0;
}
section.get p {
	margin: 0 0 -0.7rem 0;
}

section.links .btns.links {
	margin-bottom: 0;
	padding-top: 1.4rem;
	line-height: inherit;
}
section.links .btns.links a:last-child .btn_go {
	margin-bottom: 0;
}

.btns.links, .btns.links a {
	display: flex;
	flex-direction: column;
	justify-content: stretch;
}

.btns.links, .btns.links a:hover {
	color: hsl(0, 0%, var(--link-hover-value));
	text-shadow: none;
}
.btns.links, .btn_go {
	text-shadow: none;
}

.btns.links .btn_go {
	background: var(--section-links-item-background-color);
	color: hsl(var(--hue), 40%, var(--text-value));
	padding: 0.7em 0.5em 0.7em 1.7em;
	margin-bottom: 1rem;
	text-align: left;
	font-weight: 600;
}

.btns .desc {
	font-weight: 400;
	color: hsl(0, 0%, var(--text-value));
}

ext {
	background: url(../i/external.png) center right no-repeat;
	padding-left: 16px;
}

.btns > a > .btn_go {
	margin: 0 0.6em 0.6em 0;
	font-weight: 400;
	border-bottom: none;
}
.btns > a:last-child > .btn_go {
	margin-right: 0;
}
.btns > a > .btn_go:hover {
	color: hsl(0, 0%, var(--link-hover-value));
	background-color: var(--button-go-hover-color);
}
.btns > a {
	border-bottom: none;
}

.icon.filled {
	fill: hsl(0, 0%, var(--text-value));
}

.button {
	color: #404060;
	padding: 0.1em 0.4em 0.1em 0.4em;
	background-color: #E0E0E0;
	border-style: solid;
	border-width: 1px;
	border-color: #808080;
	white-space: nowrap;
}

.btn_go {
	background-color: var(--button-go-color);
	border-radius: 7px;
	text-align: right;
	vertical-align: middle;
	padding: 0.6rem 1rem 0.6rem 1rem;
}

.btn_go.primary {
	background-color: var(--button-primary-color);
}

.b1 { background-color: hsla( 60,100%,45%,0.20); }
.b2 { background-color: hsla(180,100%,35%,0.10); }
.b3 { background-color: hsla(120,100%,35%,0.10); }
.b4 { background-color: hsla(300,100%,35%,0.10); }
.b5 { background-color: hsla(  0,100%,50%,0.10); }

button.button, input[type=submit] {
	padding: 0.4em 0.6em 0.33em 0.55em;
	border: 0.75px solid hsla(var(--hue),50%,70%,0.3);
	border-radius: 10px;
	font-size: 1.35rem;
	background-color: hsla(var(--hue),50%,70%,0.20);
	color: hsla(var(--hue),50%,70%,1.00);
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
}

button.button + button.button {
	margin-left: 0.6em;
}

button.button-search {
	background: hsla(var(--hue),50%,70%,0.40);
	height: 36px;
	width: 38px;
	border: 0px solid hsla(var(--hue),50%,70%,0.20);
	vertical-align: top;
	border-radius: 0 6px 6px 0;
	cursor: pointer;
}
input.input-search {
	border-radius: 6px 0 0 6px;
	height: 36px;
	border: 1px solid var(--input-border-color);
}


/* Po8-specific */

.prop {
	font-style: italic;
}

.param {
	font-weight: 700;
	color: #666;
}

.label {
	color: var(--text-label-color);
	font-weight: 700;
}

.var {
	font-style: italic;
	font-family: 'Minion Pro', 'Times New Roman', 'Times';
	font-size: 13pt;
}

.equation {
	font-family: "Cambria Math", "Georgia", "Tahoma";
	display: table;
	text-align: center;
	font-size: 13pt;
	margin: 0.5em 0;
	line-height: 200%;
}

.boxed {
	display:table;
	padding: 0.5em 1em;
	margin: 1em 0;
	border: 1px solid hsla(0, 0%, 50%, 0.2);
	background: var(--showcase-background);
}

.indented {
	margin-left: 3em;
}

.eqlabel {
	float: right;
	vertical-align: middle;
	position: relative;
	top: 0.7em;
}

.stamp {
	opacity: 0.5;
	text-align: right;
}


/* Quotes, used in art2: BuildQuote() */

div.quotecite, .quotecite {
	text-align: right;
	padding: 0 3.5em 0.5em 3.5em;
	font-size: 1.00rem;
}

div.quotetext {
	margin: 1em 3.5em 0.5em 3.5em;
	font-size: 1.05rem;
	font-style: italic;
}

div.quoteclose, span.quoteopen {
	font-family: 'Times New Roman', 'serif';
	font-size: 44pt;
	font-weight: bold;
	color: var(--text-quote-large-quotes-color);
	line-height: 90%;
	padding: 0;
	margin: 0;
	height: 48px;
}

span.quoteopen {
	float: left;
	padding: 0.2em 0 0 0.15em;
}

div.quoteclose {
	float: right;
	padding: 0 0.1em -0.5em 0;
	z-index: 2;
	position: relative;
	top: -0.45em;
	left: -0.1em;
}

/* Striped data table. used by dataTable() and LinkTab() */
table.tab2 {
	border-collapse: collapse;
	border: 1px solid var(--table-border-color);
	margin: 1.5em 0 1em 0;
	width: auto;
	-moz-box-shadow: 2px 4px 12px rgba(0,0,0,0.06);
	-webkit-box-shadow: 2px 4px 12px rgba(0,0,0,0.06);
	box-shadow: 2px 4px 12px rgba(0,0,0,0.03);
}
td.tab {
	padding: 0.3em 0.6em 0.3em 0.6em;
	text-align: left;
}
td.tabHead {
	background-color: var(--table-head-background-color);
	font-weight: bold;
}
td.tabOdd, td.tabEven {
	border-top: 1px solid var(--table-line-top-color);
}
td.tabOdd {
	background-color: hsla(var(--hue),60%,50%,0.01);
}
td.tabEven {
	background-color: hsla(var(--hue),60%,50%,0.02);
}
td.tabLeftSep {
	border-left: 1px solid var(--table-line-top-color);
}


/*  */

.pic tr td.cap {
	padding: 0 0.6em 0 0.6em;
	margin: 0;
	text-align: center;
	background-color: white;
	font-style: italic;
}

/* Four Fours tables */
table.grid {
	border: #f0f0fd 1px solid;
	border-bottom: 0;
	border-right: 0;
}
table.grid td {
	padding: 0 0.5em 0 0.5em;
	text-align: center;
	border: #f0f0fd 1px solid;
	border-top: 0;
	border-left: 0;
}
table.grid td.n {
	background-color: #e4e4fa;
}
table.grid td.y {
	background-color: #ffffff;
}

/* */

img.is {
	width: 33px;
	height: 33px;
}

.pic {
	vertical-align: middle;
	text-align: center;
	border: none;
	margin: 0;
	padding: 0;
}

img.i:hover {
	border-width: 2px;
	border-color: #FFFFFF;
}

caption {
	caption-side: bottom;
	padding-top: 0.5em;
	margin-bottom: 1.0em;
	font-style: italic;
}
.pic caption{
	margin-bottom: 0.2em;
}


/* References table */

.match {
	background: var(--ref-match-background);
	border-left: solid 0.6rem hsl(var(--hue), 30%, 50%);
	margin-left: -1.6rem;
	padding: 1.3rem 1rem 1.4rem 1rem;
}

/*  */

.debug {
	font-size: 80%;
	color: #004000;
	background-color: #E0F0E0;
	font-family: "Consolas", "Lucida Console", "Courier", "Mono", "Sans";
	line-height: 115%;
	padding: 0.5em;
}

@media print {
	.np, .navp, .btn {
		display: none;
	}
}


@media screen and (max-width: 800px) {
	html {
		font-size: 16px;
	}
	section#story {
		padding: 2rem 0 2rem 0 !important
	}
	section#story h1 {
		font-size: 2.0rem;
	}
	section#story h2 {
		font-size: 1.3rem;
	}
	section > div {
		padding: 0 5% 6px 5%;
	}
	section.detail > div {
		padding: 0 36px 0 48px;
	}
	.siteTitle, div.headTitle {
		float: none;
		width: auto;
		padding: 0 12px;
		margin: 0 auto;
		display: table;
		text-align: center;
	}
	div.headTitle {
		margin-top: 0.8rem;
		margin-bottom: 0.6rem;
	}
	.siteTitle::after {
		content: ""
	}
	h1 {
		font-size: 2.0rem;
	}
	.navicons {
		position: absolute !important;
		margin: 6px 0 0 6px !important;
		padding: 0;
		left: 0;
		display: block !important;
	}
	div.siteicon {
		margin-bottom: 23px;
	}
	.pop {
		font-size: 14px;
	}
}


@media screen and (max-width: 480px) {
	html {
		font-size: 14px;
	}
	section > div {
		padding: 0 4% 4px 4%;
	}
	section.detail > div {
		padding: 0 20px 0 32px;
	}
	.siteTitle {
		padding: 0 12px;

	}
	div.headTitle {
		padding: 0 14px !important;
	}
	.navicons {
		margin: 4px 0 0 6px !important;
		padding: 0;
		left: 0;
		display: block !important;
	}
	.navicons img {
		margin-bottom: 0.2em;
	}
	div.siteicon {
		margin-bottom: 10px;
	}
}