/* Global */

:root {

	/* Global colours */

	--color-light-gray: #939598;
	--color-medium-gray: #87888B;

	/* Global sizes */

	--unit: 18px;
	--font: 15px;
	--table-unit: 5px;
}

::selection {
	background-color: gray;
	color: white;
}

:target {
	background-color: gray;
}

/* Grid */

#wrapper {
	display: grid;
	gap: 0px;
	grid-template-areas:
		'. . . .'
		'. logo heading .'
		'. menu content .'
		'. . footer .'
		'. . . .';
	grid-template-columns: auto calc(13 * var(--unit)) calc(32 * var(--unit)) auto;
	grid-template-rows: auto calc(10 * var(--unit)) auto calc(3 * var(--unit)) auto;
}

#logo {
	grid-area: logo;
}

#logo p {
	margin: 0;
	text-align: center;
}

#heading {
	grid-area: heading;
}

#menu {
	grid-area: menu;
}

#content {
	grid-area: content;
}

#footer {
	grid-area: footer;
}

#footer p {
	text-align: center;
}

#heading p {
	margin-top: calc(7 * var(--unit));
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
}

#logo p a,
#heading p a {
	border-bottom: none;
}

#content {
	margin-top: calc(var(--unit) - var(--font));
}

#stylesheet-select li a {
	border-bottom: 1px solid blue;
	color: blue;
}

#stylesheet-select li.selected a {
	border-bottom: 1px solid purple;
	color: purple;
}

#wrapper {
	margin: var(--unit);
}

/* Elements */

a {
	border-bottom: 1px solid blue;
	color: blue;
	text-decoration: none;
}

a:visited {
	border-bottom: 1px solid purple;
	color: purple;
}

abbr {
	border-bottom: 1px dotted black;
}

blockquote {
	border-left: 2px solid gray;
	margin-left: var(--unit);
}

body {
	background-color: silver;
	color: black;
	font-family: Times, serif;
	font-size: var(--font);
	line-height: var(--unit);
	margin: auto;
}

em {
	font-style: italic;
}

div.tech-specs,
form,
h1,
h2,
h3,
h4,
h5,
ol,
p,
pre,
table,
ul {
	margin: var(--unit);
}

form div {
	clear: both;
}

h1,
h2,
h3,
th {
	font-weight: bold;
}

h1 {
	margin-top: calc((2 * var(--unit)) - (var(--font) + var(--unit))); /* The top margin plus font should equal two units */
	font-size: calc(var(--font) + var(--unit));
	line-height: calc(2 * var(--unit));
}

h2 {
	margin-top: calc((2 * var(--unit)) - (var(--font) + (0.5 * var(--unit)))); /* The top margin plus font should equal two units */
	font-size: calc(var(--font) + (0.5 * var(--unit)));
	line-height: calc(1.5 * var(--unit));
}

h4 {
	font-style: italic;
}

h5 {
	text-decoration: underline;
}

code,
pre {
	font-weight: bold;
	font-family: Courier, monospace;
	white-space: pre;
}

li {
	text-align: left;
}

#menu li {
	text-align: left;
}

ol,
ul {
	padding-inline-start: 0; /* Fix whatever it is Safari's doing */
}

ol li {
	list-style-type: decimal;
	margin-left: 30px; /* Align with 2-digit OL numbers */
}

p {
	text-align: justify;
}

span[lang="de"],
span[lang="fr"],
span[lang="it"],
span[lang="la"] {
	font-style: italic;
}

strong {
	font-weight: bold;
}

sub, sup {
	line-height: 1;
}

sub {
	/*vertical-align: super;*/ /* Don't affect the line's height though */
	font-size: calc(var(--font) * 3 / 5);
	position: relative;
	top: calc(var(--font) * 0.5 / 5);
}

sup {
	/*vertical-align: super;*/ /* Don't affect the line's height though */
	font-size: calc(var(--font) * 3 / 5);
	position: relative;
	top: calc(var(--font) * -2 / 5);
}

table {
	border: 1px outset silver;
}

td,
th {
	border: 1px inset silver;
	padding: var(--table-unit);
}

ul li {
	list-style-type: disc;
	margin-left: 30px; /* Align with 2-digit OL numbers */
}

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

/* Heading */

#heading p { /* 32 x 3 units */
	margin-left: 0px;
	margin-right: 0px;
}

/* Menu */

/* Images, tech specs, disclaimers, and tables */

div#content > p.image {
	clear: right;
	float: right;
	margin-top: 0;
	width: calc(12 * var(--unit));
}

div#content > p.image img {
	width: calc(12 * var(--unit));
}

span.caption {
	display: block;
	font-style: italic;
	text-align: center;
}

div.tech-specs {
	border: 2px ridge silver;
	clear: right;
	float: right;
	margin-top: 0;
	width: calc(15 * var(--unit));
}

div.tech-specs h4 {
	font-style: normal;
	font-weight: bold;
	text-align: center;
}

div.tech-specs img {
	width:  100%;
}

body#Boss-Micro-Rack-series div.tech-specs img {
	display: block;
	margin-bottom: calc(-0.775 * var(--unit)); /* Not actually a block */
	margin-left: auto;
	margin-right: auto;
	width:  50%;
}

div.tech-specs li {
	text-align: left;
}

img.icon {
	height: var(--font);
	margin-top: 2px;
	margin-bottom: -2px;
}

p.disclaimer {
	font-style: italic;
}

/* Specific types of page */

/* Specific types of page: Modular synthesisers */

table.Standard-configurations {
	/* width: calc(30 * var(--unit)); */
}

table.Standard-configurations caption {
	caption-side: bottom;
	text-align: center;
}

table.Standard-configurations tr:nth-child(even) {
	background-color: var(--color-medium-gray);
}

table.Standard-configurations tr:nth-child(odd) {
	background-color: gray;
}

table.Standard-configurations tr:first-child td:first-child {
	border-top-left-radius: var(--table-unit);
}

table.Standard-configurations tr:first-child td:last-child {
	border-top-right-radius: var(--table-unit);
}

/* Specific types of page: Modular synthesisers: Moog 900 Series */

table.Standard-configurations.Moog-900-Series td {
	border: 1px solid var(--color-light-gray);
	padding-left: 0;
	padding-right: 0;
	text-align: center;
	vertical-align: middle;
	width: calc(30 * var(--unit) / 22);
}

table.Standard-configurations.Moog-900-Series td[colspan="2"] {
	width: calc(30 * var(--unit) / 22 * 2);
}

table.Standard-configurations.Moog-900-Series td[colspan="3"] {
	width: calc(30 * var(--unit) / 22 * 3);
}

table.Standard-configurations.Moog-900-Series td[colspan="4"] {
	width: calc(30 * var(--unit) / 22 * 4);
}

table.Standard-configurations.Moog-900-Series td[colspan="6"] {
	width: calc(30 * var(--unit) / 22 * 6);
}

table.Standard-configurations.Moog-900-Series td[colspan="8"] {
	width: calc(30 * var(--unit) / 22 * 8);
}

table.Standard-configurations.Moog-900-Series td span {
	writing-mode: vertical-rl;
}

tr.Moog-900-Series.Modules {
	height: calc(5 * var(--unit));
}

tr.Moog-900-Series.CP,
tr.Moog-900-Series.Keyboard {
	height: calc(3 * var(--unit));
}

/* Embedded nonsense */

p.youtube iframe {
	height: calc((30 * var(--unit)) / 16 * 9);
	width: calc(30 * var(--unit));
}

/* Specific pages */

/* Akai S1000 page map page */

body#S1000-page-map img#screen,
body#S1000-page-map table {
	width: 540px;
}

body#S1000-page-map td,
body#S1000-page-map th {
	background-color: gray;
	border: 1px solid var(--color-light-gray);
	cursor: default;
}

/* Circle of fifths page */

img#background {
	transition: all 0.5s;
	background-image: url('/Circle_of_Fifths_background.png');
	background-size: 300px;
}

img#foreground-notes,
img#foreground-chords,
img#foreground-lent-chords-major,
img#foreground-lent-chords-minor {
	position: absolute;
	margin-left: -300px;
}

img#foreground-lent-chords-minor {
	display: none;
}

p#circle img {
	height: 300px;
	width: 300px;
}

table.keyboard td {
	border: 2px solid black;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	font-weight: bold;
	width: 30px; /* This is only rough.  I want them to all be the same width as each other. */
	text-align: center;
}

table.keyboard td.neutral {
	background-color: white;
	color: black;
}

table.keyboard td.sharp {
	background-color: black;
	color: white;
}

label[for='notes'],
p.notes strong.color {
	color: #001E80;
}

label[for='chords'],
p.chords strong.color,
p.pivotables strong.color {
	color: #80001E;
}

label[for='lent-chords'],
p.lent-chords strong.color {
	color: #1E8000;
}

body#Circle-of-fifths form,
p#circle {
	margin-left: 122px;
}

/* Various specific pages */

body#Arpeggio div#content p.image,
body#Broken-chord div#content p.image,
body#DIN-sync div#content p.image,
body#Lego-Technic div#content p.image,
body#MIDI-clock div#content p.image,
body#Polymetre-and-polyrhythm div#content p.image,
body#Swing div#content p.image {
	clear: none;
	float: none;
	margin: var(--unit);
	width: calc(30 * var(--unit));
}

body#DIN-sync div#content p.image img,
body#Lego-Technic div#content p.image img,
body#MIDI-clock div#content p.image img,
body#Polymetre-and-polyrhythm div#content p.image img,
body#Swing div#content p.image img {
	width: calc(30 * var(--unit));
}

body#Arpeggio div#content p.image img,
body#Broken-chord div#content p.image img {
	width: calc(30 * var(--unit));
}