/* Author: John Valentine. http://www.johnvalentine.co.uk */
/* Theme colour: hue 240 */
html {
	font-size: 16px;
	font-weight: 400;

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

body {
	margin: 0;
	background-color: white;
	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: 0 1.2em 0.5em 2.2em;
	cursor: pointer;
	display: block;
}

summary::marker {
	display: none;
}

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

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

details[open] {
	background: hsla(240,100%,20%,0.02);
	padding: 0.01em 1.6em 1.3em 1.6em;
	border-left: 8px hsla(240,100%,20%,0.04) 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(240,100%,20%,0.10);
	background: hsla(240,100%,20%,0.03);
	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: white;
}

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(240,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;
}

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: hsla(240,0%,100%,1);
	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(240,100%,20%,0.05);
	text-shadow: -1px -1px 1px rgba(255,255,255,0.3), 1px 2px 4px rgba(0,0,0, 0.20);
	font-size: 2.3rem;
	font-weight: 300;
	text-align: left;
	color: #606070;
	cursor: pointer;
}

.siteTitle:hover {
	background: hsla(240,100%,20%,0.15);
}

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

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: 30px;
}

div.siteicon img {
	opacity: 0.3;
}

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

.summary,
.contents,
.detail      { background-color: hsla(240,  0%,50%,0.05); color: rgba(0,0,0,0.70); }
.boxout      { background-color: hsla(240,  0%,50%,0.11); color: rgba(0,0,0,0.90); }
.readcontext { background-color: hsla(060,100%,50%,0.09); border: 1.5px solid rgba(128, 128, 0, 0.02); }
.steps    	 { background-color: hsla(120, 30%,50%,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.links     { background-color: hsla(240,100%,50%,0.04); color: rgba(0,0,0,0.65); }
section.important	{ background-color: hsla(120,100%,50%,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; }

/* 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%;
	color: #606070;
	text-shadow: -1px -1px 1px rgba(255,255,255,0.3), 1px 2px 4px rgba(0,0,0, 0.20);
}


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

/* Metadata pop-up */

div.pop {
	display: none;
	width: 28rem;
	z-index: 3;
	background-color: hsla(240,50%,95%,0.97);
	margin-left: 46px;
	margin-top: -46px;
	padding: 4px 12px;
	border: 2px white solid;
	box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

#pop_search {
	margin-top: 8px;
}

div.popRow {
	font-size: 1.1rem;
	background: hsla(240,100%,20%,0.00);
	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;
}


/* 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: hsla(240,30%,90%,1);
	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;
}

/* headings */

h1 {
	font-weight: 300;
	font-size: 1.8rem;
	line-height: 120%;
	text-align: left;
	margin-bottom: 0.5em;
	margin-top: 1.4em;
	padding: 0.1em 0 0.2em 0;
	border-bottom: 1px solid rgba(0,0,0,0.06);
	color: hsla(240,100%,20%,0.7);
}

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(240,100%,20%,0.5);
}

h3 {
	font-weight: 600;
	font-size: 1.15rem;
	text-align: left;
	color: hsla(240,100%,20%,0.5);
	padding: 0.8em 0 0.1em 0;
	margin: 0;
}

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

h1:first-child,
h2:first-child {
	margin-top: 0;
	padding-top: 0.5em;
}


/* 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;
}

code {
	background: rgba(0,0,0,0.03);
	padding: 0.2rem 0.3rem;
	border-radius: 0.4rem;
}

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

a {
	text-decoration: none;
	font-weight: 600;
	color: #4040a0;
	text-shadow: 0 0 14px rgba(1,1,1,0);
	border-bottom: solid 1px hsla(240,30%,80%, 0.3);
}

a:visited {
	color: #4040a0;
	text-decoration: none;
}

a:hover {
	color: #000;
	text-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;
}

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(240,100%,40%,0.05);
	height: 2px;
	margin: 18px 0;
}

/* 2013 figures and images */

div.illustration {
	text-align: center;
	margin: 0.55em 0 1.7em 0;
	padding: 0;
	background: white;
	/* -moz-box-shadow: 1px 3px 18px hsla(0,0%,0%,0.05); */
	/* -webkit-box-shadow: 1px 3px 18px hsla(0,0%,0%,0.05); */
	/* box-shadow: 1px 3px 18px hsla(0,0%,0%,0.05); */
	border: 1px solid hsla(0,0%,0%,0.07);
}

div.illustration img {
	margin: 12px;
}

div.illustration p.caption {
	xfont-style: italic;
	color: hsl(240,25%,20%);
	background: hsla(240,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;
}

.inGallery {
	margin: 0 0.5em 0.5em 0.5em;
	padding: 0;
	display: inline-block;
	background-color: white;
	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: white;
}

/* tables */

tr {
	vertical-align: top;
}


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

/*  */

.fig img {
	background: #ffffff;
	margin: 0;
}

td.cap {
	padding: 0 1em 0.1em 1em;
	margin: 0;
	text-align: center;
	background-color: white;
	xfont-style: italic;
	background: #ffffff;
}

/* Character-level formatting */

.hl { /* used in highlighting */
	background: #FF8;
	padding: 0.25em 0 0.3em 0;
}

.key, .type {
	background-color: hsla(60,100%,30%,0.15);
	font-family: "Consolas", "Lucida Console", "Mono", "Courier", "Sans";
	padding: 0.3em 0.35em 0.2em 0.35em;
}
.type {
	color: hsla(120,100%,20%,1);
}
.key {
	color: hsla(0,100%,20%,1);
}

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

.screenname { /* documentation: quoting GUI zones and headings */
	color: #606080;
	font-weight: 600;
}

.makeref, .super {
	position: relative;
	bottom: 0.6em;
	font-size: 0.8rem;
}

.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;
}


/* Buttons */

.btns {
	margin: 0.5em 0 0 0;
}

.btns > a > .btn_go {
	margin: 0 0.6em 0.6em 0;
	font-weight: 400;
	border-bottom: none;
}

.btns > a {
	border-bottom: none;
}

.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, .btn_go_primary {
	background-color: hsla(240,100%,50%,0.05);
	border-radius: 7px;
	text-align: right;
	vertical-align: middle;
	display: inline-block;
	padding: 2px 0.8em 2px 0.7em;
}
.btn_go_primary {
	background-color: hsla(120,100%,40%,0.50);
	color: hsla(120,100%,10%,0.80);
}

.btn_go_symbol {
	color: white;
	font-size: 1.1rem;
	display: inline-block;
	padding-bottom: 0.2em;
	padding-left: 0.1em;
}

.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(240,50%,70%,0.3);
	border-radius: 10px;
	/* margin: -0.23em 0 0 -2em; */
	font-size: 1.35rem;
	background-color: hsla(240,50%,70%,0.20);
	color: hsla(240,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(240,50%,70%,0.40);
	height: 36px;
	width: 38px;
	border: 0px solid hsla(240,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 white;
}

/* Po8-specific */

.prop {
	font-style: italic;
}

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

.label {
	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 rgba(0,0,0,0.4);
}

.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;
}

div.quoteclose, span.quoteopen {
	font-family: 'Times New Roman', 'serif';
	font-size: 44pt;
	font-weight: bold;
	color: hsla(240,50%,50%,0.28);
	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, table.tab3 {
	background-color: white;
	border-collapse: collapse;
	border: 1px solid hsl(240,75%,95%);
	margin: 0.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.06);
}
td.tab {
	padding: 0.3em 0.6em 0.3em 0.6em;
	text-align: left;
}
td.tabHead {
	background-color: hsla(240,100%,50%,0.03);
}
td.tabOdd, td.tabEven {
	border-top: 1px solid hsl(240,100%,97%);
}
td.tabOdd {
	background-color: hsla(240,100%,50%,0.01);
}
td.tabEven {
	background-color: hsla(240,100%,50%,0.02);
}
td.tabLeftSep {
	border-left: 1px solid hsl(240,100%,97%);
}
td.tabSmallCol {
	width: 10em;
}

table.tab3 tr td, table.tab3 tr th {
	text-align: left;
	border: 1px solid hsl(240,75%,94%)
}
table.tab3 tr th {
	background-color: hsla(240,100%,50%,0.015);
	text-align: left;
	font-weight: 400;
	color: hsl(240,75%,40%);
	white-space: nowrap;
}

/*  */

.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: hsl(240,50%,93%);
	border-left: solid 0.6rem hsl(240, 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;
	}
}