/* Colour definitions */
:root {
--colour-active-current: #003175;
--colour-link-unvisited: #0059D4;
--colour-link-visited: #003175;
--colour-link-hover: #1278B9;
--colour-link-active: #1278B9;
/* Duplicate of the above colours, for use in dark themes that need dark-on-light elements */
--colour-active-current-light: #003175;
--colour-link-unvisited-light: #0059D4;
--colour-link-visited-light: #003175;
--colour-link-hover-light: #1278B9;
--colour-link-active-light: #1278B9;
}
@media (prefers-color-scheme: dark) {
:root {
--colour-active-current: #003175;
--colour-link-unvisited: #408CF7;
--colour-link-visited: #447ECF;
--colour-link-hover: #7AB2FF;
--colour-link-active: #7AB2FF;
}
}
/* 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;
}
main {
background-image: url(/global/g-left.svgz); background-repeat: repeat-y;
padding: 5px 0 1em 33px; clear: left;
}
main 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,
main ul,
main 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;
}
p, dd, blockquote {
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;
}
/* Better subscripts and superscripts per https://alistapart.com/article/web-typography-numerals/ */
sub { font-feature-settings: "subs" 1; }
@supports (font-variant-position: sub) {
sub { font-feature-settings: normal;
font-variant-position: sub; }
}
@supports ((font-variant-position: sub) or (font-feature-settings: "subs" 1)) {
sub { vertical-align: baseline;
font-size: inherit; }
}
sup { font-feature-settings: "sups" 1; }
@supports (font-variant-position: super) {
sup { font-feature-settings: normal;
font-variant-position: super; }
}
@supports ((font-variant-position: super) or (font-feature-settings: "sups" 1)) {
sup { vertical-align: baseline;
font-size: inherit; }
}
.aCurr { color: var(--colour-active-current); font-weight: bold } /* Active (current page) link in a link list */
a:link, a:link abbr, a:link acronym { color: var(--colour-link-unvisited); }
a:visited, a:visited abbr, a:visited acronym { color: var(--colour-link-visited); }
a:link:hover, a:link:hover abbr, a:link:hover acronym,
a:visited:hover, a:visited:hover abbr, a:visited:hover acronym {
color: var(--colour-link-hover); } /* No hover for a[name] */
a:link:active { color: var(--colour-link-active) }
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 }
/* 2022-03-22 changed from margin-bottom: 0.7em to suit KBK/tech and remove excess whitespace */
.spaced li { margin: 0.5em 0 }
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,
main.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 .captionedimg img,
.imagegrid figure img {
margin: 0;
}
/* No longer remember what this was for.
.imagegrid a {
display: inline-block;
}
*/
.imagegrid span {
display: block;
}
/* Around, Power etc */
.imagegrid figcaption,
/* Older KBK pages */
.imagegrid .captionedimg span {
margin-top: 0.4em;
}
.imagegrid-240 img {
width: 240px;
height: 175px;
}
.imagegrid-240 div,
.imagegrid-240 figure {
width: 244px; /* Allow for 2px border */
}
.imagegrid-320 img {
width: 320px;
height: 240px;
}
.imagegrid-320 div,
.imagegrid-320 figure {
width: 324px; /* Allow for 2px border */
}
.imagegrid-360 img {
width: 360px;
height: 270px;
}
.imagegrid-360 figure {
width: 364px; /* Allow for 2px border */
}
.imagegrid-400 img {
width: 400px;
height: 300px;
}
.imagegrid-400 figure {
width: 404px; /* Allow for 2px border */
}
.imagegrid-480 img {
width: 480px;
height: 360px;
}
.imagegrid-480 div,
.imagegrid-480 figure {
width: 484px; /* Allow for 2px border */
}
.imagegrid-512 img {
width: 512px;
height: 384px;
}
.imagegrid-512 div,
.imagegrid-512 figure {
width: 516px; /* Allow for 2px border */
}
.imagegrid-640 img {
width: 640px;
height: 480px;
}
.imagegrid-640 div,
.imagegrid-640 figure {
width: 644px; /* Allow for 2px border */
}
/* 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;
}
}
table.plain {
border-collapse: collapse;
}
table.plain caption {
font-weight: bold;
text-align: left;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
/* Vertical space for appearance; horizontal space because tables have bogus spacing that we cannot see, remove or officially match with the caption */
margin: 0.25em 1px;
padding: 0.25em 1px;
}
@media (prefers-color-scheme: dark) {
table.plain caption {
border-bottom-color: rgba(255, 255, 255, 0.2);
}
}
table.plain th + th,
table.plain th + td,
table.plain td + td {
padding-left: 1em;
}
table.plain th {
text-align: left;
}
table.plain th,
table.plain td {
vertical-align: top;
}
table.plain tr + tr td,
table.plain tr + tr th {
padding-top: 0.35em;
}
table.plain th[scope="row"] {
font-weight: 600;
}
/* 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. Congraturation. A WinRAR is you. */