/* Basic styling */

body {
	color: #333;
	background-color: white;
	font-family: sans-serif;
	font-size: 12pt;
	margin: 0px 10px 0px 0px;
}
	
h2, h3, h4 {
	color: black;
}

@media (prefers-color-scheme: dark) {
	body {
		color: #E5E5E5;
		background-color: #111;
	}
	
	h2, h3, h4 {
		color: white;
	}
}

#navigation {
	padding: 0.65em 0.5em 0.25em 210px;
	background-image: url(/global/g-left.svgz);
	background-repeat: repeat-y;
	min-height: 59px;
	box-sizing: border-box;
	text-align: right;
}

#navigation > a {
	position: absolute;
	left: 0;
	top: 0;
	/* Hide the main background */
	background: white;
}

@media (prefers-color-scheme: dark) {
	#navigation > a {
		background: #111;
	}
}

#navigation > a img {
	/* Otherwise the overwrite background extends below the image */
	display: block;
}

#content {
	background-image: url(/global/g-left.svgz); background-repeat: repeat-y;
	padding: 5px 0 1em 33px; clear: left;
}

#content h1 {
	margin-top: 0;
	clear: both; /* a possible nasty; 2019-03-13 -- keeps h1 on new line away from top-right menu */
}

h2,
p,
dl,
#content ul,
#content ol,
blockquote,
pre.code,
.matchContentWidth,
.headedbox {
	max-width: 850px;
	box-sizing: border-box;
}

/* Not li as it upsets the KBK main page */
p, dd {
	text-align: justify;
	line-height: 1.35;
}

#footer {
	padding: 1em 0 0 33px;
	margin-bottom: 1em;
	background-image: url(/global/g-bottom.svgz);
	background-repeat: no-repeat;
	background-color: white;
	
	/* For when we get a better block model ... 
		min-height: 32px; -- height of actual border image
	*/
	min-height: 1em;
	font-size: 85%;
}

@media (prefers-color-scheme: dark) {
	#footer {
		background-color: #111;
	}
}

#subnav { padding-top: 3px; clear: right }
#subnav:before { content: '\27A5  '; font-size: 12pt; }
#sectmenu {
	margin: 0 20% 1.5em 1.5em;
	text-align: center;
}

.titlebasic { background: white; }

li {
	margin-top: 0.2em;
	margin-bottom: 0.2em;
}

ul.menu { margin: 0; padding: 0; font-size: 11pt; }
ul.menu li { display: inline; margin: 0; white-space: nowrap } /* Don't wrap within an item */
ul.menu li + li:before { content: '\2022  '; font-family: 'Times New Roman', serif; font-size: 11pt; }

h1 { font-size: 21pt }
h2 { font-size: 19.5pt }
h3 { font-size: 17pt }
h4 { font-size: 15pt }
h5 { font-size: 13pt }

h1 { margin-bottom: 0.75em }
h2 { margin-top: 2.5em; margin-bottom: 0.5em }
h3 { margin-top: 1.75em; }
h2 + h3 { margin-top: 1em; }
hr + h2, h1 + h2, .compactHeaders h2 { margin-top: 1em; }
h1 + p { margin-top: 2em; }
h5 { margin-bottom: 0.5em }

/*
h2 {
	background: #F1FBE0;
	border-radius: 999px;
	padding: 0.2em 0.5em;
}
*/

hr { 
	height: 1px; 
	border-top: 0; 
	border-bottom: 1px solid black; 
	border-left: 0; 
	border-right: 0; 
}

@media (prefers-color-scheme: dark) {
	hr {
		border-color: #EEE;
	}
}

/* Visible anchors */
h1 a[name]:hover:after, h2 a[name]:hover:after, h3 a[name]:hover:after, h4 a[name]:hover:after {
	content: "#" attr(name);
	color: silver;
	padding-left: 0.5em;
	font-family: sans-serif;
	font-size: medium;
	font-weight: bold;
}

h1[id]:hover:after, h2[id]:hover:after, h3[id]:hover:after, h4[id]:hover:after {
	content: "#" attr(id);
	color: silver;
	padding-left: 0.5em;
	font-family: sans-serif;
	font-size: medium;
	font-weight: bold;
}

/* This approach prevents that the effective line height of the line be increased by the superscript */ 
sup { vertical-align: top; font-size: 65% }
sub { font-size: 65% } /* to match sup */

.aCurr    { color: #003175; font-weight: bold } /* Active (current page) link in a link list */
a:link, a:link abbr, a:link acronym { color: #0059D4; }
a:visited, a:visited abbr, a:visited acronym { color: #003175; }
a:link:hover, a:link:hover abbr, a:link:hover acronym,
	a:visited:hover, a:visited:hover abbr, a:visited:hover acronym {
		color: #1278B9; } /* No hover for a[name] */
a:link:active  { color: #1278B9 }

@media (prefers-color-scheme: dark) {
	.aCurr    { color: #003175; font-weight: bold } /* Active (current page) link in a link list */
	a:link, a:link abbr, a:link acronym { color: #408CF7; }
	a:visited, a:visited abbr, a:visited acronym { color: #447ECF; }
	a:link:hover, a:link:hover abbr, a:link:hover acronym,
		a:visited:hover, a:visited:hover abbr, a:visited:hover acronym {
			color: #7AB2FF; } /* No hover for a[name] */
	a:link:active  { color: #7AB2FF}
}

a.dead { text-decoration: underline; color: #888; }
a.dead:after { content: url(link-dead.svgz); width: 16px; height: 16px; padding-left: 0.2em }

/* old colours pre-7 Aug 2006:
	link -> #085B95
	visited -> #0A75BA
	hover -> #0A75BA
*/

/* b, dkblue, bdkblue and i are classic pre-semantic styles that may/do exist on older pages */

.b, .bdkblue { font-weight: bold }
.i { font-style: italic }

h1, .dkblue, .bdkblue { color: #000037 }
.medblue { color: #000070 }

@media (prefers-color-scheme: dark) {
	h1, .dkblue, .bdkblue { color: #EFD }
	/* No idea what this was used for */
	.medblue { color: #EFD }
}

/* Compact and wide-spaced elements */

h2.compact, h3.compact, h4.compact {
	margin-bottom: 0; font-weight: bold; font-size: 100%
}

ul.compact { margin: 0; padding: 0 }
ul.compact li { margin: 0; padding: 0; display: block }

ul.adjacent { margin-top: 0 }

.spaced li { margin-bottom: 0.7em }

p.compact { margin-top: 0 }
.compact { margin-bottom: 0 }

/* A truly revolting hack to achieve what :last-child should be doing ... */
	  
#skipnav, .access { display: none }

q:before { content: '\201C' }
q:after { content: '\201D' }

q q:before { content: '\2018' }
q q:after { content: '\2019' }

em.dquo { font-style: normal }
em.dquo:before { content: '\201C' }
em.dquo:after { content: '\201D' }

abbr, acronym { text-decoration-color: #CCD; border: none; cursor: help }
a abbr { cursor: pointer }
/*
	Inteferes with dark mode
	abbr:hover, acronym:hover { color: #388362 }
	h2 abbr, h3 abbr, h4 abbr, h2 acronym, h3 acronym, h4 acronym { color: black } */
*/

/* Page navigation (page 1 | 2 | 3 | ...) bar styles */

#pagenavtop li:first-child:before, #pagenavbottom li:first-child:before { content: "Pages: "; font-weight: bold }
#pagenavtop, #pagenavbottom { margin: 0.7em 0; text-align: center }
#pagenavbottom { border-top: 1px solid black; padding-top: 0.7em }

/* Highlighted blocks */

code.blocklevelcode, blockquote.highlight, blockquote.code,
#content.elegant-pre pre, pre.code {
	margin: 0.7em 1.5em;
	background-color: #F0FEEB;
	padding: 1em;
	border-radius: 0.7em;
   box-shadow: 1px 2px 4px rgba(30, 70, 0, 0.1) inset;
   border: 1px solid rgba(20, 50, 0, 0.2);
   overflow-x: auto;
}

blockquote.code {
	white-space: pre; font-family: monospace;
}

/* Blocks of code; the odd class name is to differentiate from existing CSS that this would override due to nonsensical
	  inheritance in CSS */

code.blocklevelcode { display: block; white-space: pre }

/*
a[href^="http://"]:after, a[href^="//"]:after { content: url(link-external.png); width: 8px; height: 12px; padding-left: 0.2em }
a[href^="#"]:after { content: url(link-inpage.png); width: 9px; height: 12px; padding-left: 0.2em }
ul.menu a[href^="#"]:after { content: url(link-TOChint.png); width: 9px; height: 12px; padding-left: 0.2em }
li > a[href^="#"]:after { content: ""; padding: 0 }
sup > a[href^="#"]:after { content: ""; padding: 0 } (* Specificity sucks *)
*/

/* Image divs, image grids and captioned images */

.imagegrid img, .img img { margin: 1.3em }

.captionedimg,
.imagegrid figure {
	margin: 1.3em 0 1.3em 1.3em;
	font-style: italic
}

.captionedimg img,
.imagegrid figure img {
	display: block;
	margin-bottom: 0.5em
}

.img a img, .imagegrid a img, .captionedimg a img { border-width: 2px; border-style: solid } /* for linked images */

.imagegrid .captionedimg,
.imagegrid figure {
	display: inline-block;
	vertical-align: top;
}
.imagegrid-240 img {
	width: 240px;
	height: 175px;
}
.imagegrid-240 div,
.imagegrid-240 figure {
	width: 244px; /* Allow for 2px <a> border */
}

.imagegrid-320 img {
	width: 320px;
	height: 240px;
}
.imagegrid-320 div,
.imagegrid-320 figure {
	width: 324px; /* Allow for 2px <a> border */
}

.imagegrid-360 img {
	width: 360px;
	height: 270px;
}
.imagegrid-360 figure {
	width: 364px; /* Allow for 2px <a> border */
}

.imagegrid-400 img {
	width: 400px;
	height: 300px;
}
.imagegrid-400 figure {
	width: 404px; /* Allow for 2px <a> border */
}

.imagegrid-480 img {
	width: 480px;
	height: 360px;
}
.imagegrid-480 div,
.imagegrid-480 figure {
	width: 484px; /* Allow for 2px <a> border */
}

.imagegrid-512 img {
	width: 512px;
	height: 384px;
}
.imagegrid-512 div,
.imagegrid-512 figure {
	width: 516px; /* Allow for 2px <a> border */
}

.imagegrid-640 img {
	width: 640px;
	height: 480px;
}
.imagegrid-640 div,
.imagegrid-640 figure {
	width: 644px; /* Allow for 2px <a> border */
}

.imagegrid .captionedimg img,
.imagegrid figure img {
	margin: 0;
}
.imagegrid a {
	display: inline-block;
}
.imagegrid span {
	display: block;
}

/* The following defines the attractive green layout for tables of data across the site */

.datatable {
	border-spacing: 0;
	border-collapse: collapse;
	border: 1px solid black;
	box-shadow: 0px 0px 4px rgba(0, 40, 0, 0.25) inset;
}

.datatable th { text-align: left; background-color: #CEF8A9; height: auto; vertical-align: bottom }
.datatable td { vertical-align: top; height: auto; border: 1px solid #AAA}
.datatable th, .datatable:not(.column-headings-only) td:first-child { border: 1px solid black }
.datatable:not(.column-headings-only) td:first-child,
.datatable th[scope="row"] {
	white-space: nowrap;
	background-color: rgb(228, 244, 213);
	vertical-align: top;
	font-weight: 600;
}
.datatable th, .datatable td { padding: 5px }
.datatable.rowheadingsonly th[scope="row"] {
	background-color: #CEF8A9;
}

@media (prefers-color-scheme: dark) {
	.datatable {
		background-color: #1C1C1C;
	}
	.datatable th,
	.datatable:not(.column-headings-only) td:first-child {
		color: black;
	}
}

/* Headed boxes */

.headedbox {
	border: 1px solid black;
	margin: 0.7em 0 1.5em;
	padding: 0 5px 5px;
}
.headedboxtitle {
	/* So we can use any level of heading */
	margin: 0 -5px;
	padding: 5px;
	background-color: #CEF8A9;
}
.headedbox > *:last-child { margin-bottom: 0 }
.headedboxtitle + * { margin-top: 5px }
h2.headedboxtitle {
	font-size: 120%;
	font-family: Calibri, sans-serif;
}

@media (prefers-color-scheme: dark) {
	.headedboxtitle {
		color: black;
	}
}

.key {
	border-radius: 3px;
	border-width: 1px 2px 3px;
	border-style: solid;
	border-color: #CCC #AAA #999;
	font-size: 70%;
	font-style: normal;
	font-weight: normal;
	font-family: sans-serif;
	padding: 0.1em 0.2em;
	display: inline-block;
	min-width: 1em;
	margin: 0 0.2em;
	text-align: center;
}

dt {
	font-weight: bold;
	margin-top: 0.25em;
	margin-bottom: 0.1em;
}
dd + dt {
	margin-top: 0.6em;
}

/* Text to input */

kbd { font-family: Arial, sans-serif; font-size: 10pt }

/* 32x32 icon lists */

.iconlist { padding: 0; margin: 0.7em }
.iconlist li {
	 list-style-type: none;
	 margin: 0; padding-left: 50px;
	 background-repeat: no-repeat;
	 min-height: 32px;
}
.iconlist li + li { margin-top: 0.5em }

/* Styles that belong to specific parts of the site */

.proghead {
	 font-family: Arial, Geneva, sans-serif;
	 font-size: 12pt;
	 font-weight: bold }

.padcell { margin-right: 10px; margin-bottom: 10px }

h1.proghead {
	margin: 0; padding: 0;
	display: inline;
	color: black
}

/* Simulate thick ink by repeating the image with different blend modes */
/* Common */
#obsolete-1, #obsolete-2 {
	position: absolute;
	transform: rotate(-35deg);
	top: 18%; left: 18%;
	width: 469px;
	height: 108px;
	background-image: url(/global/obsolete.png);
	background-repeat: no-repeat;
}
/* Solid version to appear over all backgrounds */
#obsolete-1 {
	font-size: 0.1pt; color: rgba(0, 0, 0, 0);
	z-index: 200;
	opacity: 0.3;
}
/* Blended version */
#obsolete-2 {
	z-index: 201;
	mix-blend-mode: multiply;
	opacity: 0.9;
}

/* You made it to the end. Congratulations. */