pre, tt, code {
	font-family: 'Consolas', 'Lucida Console', monospace;
	font-size: 90%;
}
h1, h2, h3, h4, h5, h6, .subtitle {
	font-family: 'Constantia', garamond, serif;
}
small {
	font-size: 80%;
}
sup, sub {
	font-size: 70%;
}
a {
	color: #25B;
	text-decoration: none;
}
a:hover {
	color: #36C;
	text-decoration: underline;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: inherit;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
	text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
	color: #36C;
	font-weight: normal;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
h4 { font-style: italic; }
h5 { color: #333; font-style: italic; }
h6 { color: #333; font-style: italic; }

h1, h2, h3, h4, h5, h6, p, table, pre, ul, ol, hr, form, blockquote {
	margin-top: 1em;
}
ul, ol {
	margin-left: 1.5em;
}
ul ul, ol ol, ul ol, ol ul {
	margin-top: 0;
}

h1:first-child, h1.first-child, h2:first-child, h2.first-child, h3:first-child, h3.first-child, h4:first-child, h4.first-child, h5:first-child, h5.first-child, h6:first-child, h6.first-child,
p:first-child, p.first-child, ul:first-child, ul.first-child, ol:first-child, ol.first-child, table:first-child, table.first-child, form:first-child, form.first-child, pre:first-child, pre.first-child, hr:first-child, hr.first-child, blockquote:first-child, blockquote.first-child {
	margin-top: 0 !important;
}

/* General element style */
hr {
	color: #999;
	background-color: #999;
	height: 1px;
	border: none;
	margin-bottom: 1em;
}
img {
	border: none;
	max-width: 100%;
}
img, img[height], img[style] {
	height: auto !important;
}
span.frame {
	display: inline-block;
	border: 1px solid #ccc;
	padding: 0.5em;
	background: white;
}
span.frame img {
	border: 1px solid #ddd;
	box-sizing: border-box;
}
table {
	border-collapse: collapse;
}
table td, table th {
	vertical-align: top;
	text-align: left;
	border: none;
}
input, textarea, select {
	max-width: 100%;
}
.center {
	text-align: center;
}
/* Common interface styles */
.subtitle {
	color: #666;
	font-style: italic;
	margin-bottom: 0.4em;
	margin-top: 0;
	font-size: 1rem;
	display: block;
}
.subtitle.inline {
	color: inherit;
	font-size: 1.2rem;
	font-style: inherit;
	margin-top: 1em;
}
@media screen and (min-width: 640px) {
	.subtitle.inline {
		display: inline;
		color: inherit;
		font-style: inherit;
		font-size: inherit;
	}
	.subtitle.inline::before {
		content: ' \00BB ';
	}
}
div.link_bar {
	font-size: 85%;
	padding: 0.3em 0;
	margin: 1em 0;
	border-top: 1px solid #69C;
	border-bottom: 1px solid #69C;
}
div.link_bar p {
	margin: 0;
}
.previous, .next {
	display: inline;
	min-height: 16px;
	padding-left: 20px;
	padding-right: 1em;
	background-position: left;
	background-repeat: no-repeat;
}
.previous {
	background-image: url('/images/icons/control_rewind.png');
}
.next {
	background-image: url('/images/icons/control_fastforward.png');
}
/* Success/failure */
.success, .error, .failure, .warning, .info {
	background: #eee;
	border-left: 0.75em solid #ccc;
	padding: 0.5em 1em;
}
.success {
	background-color: #CFC;
	border-color: #9F9;
}
.error, .failure {
	background-color: #FCC;
	border-color: #F99;
}
.warning {
	background-color: #ffc;
	border-color: #fe6;
}

table.basic,
blockquote.github table {
	border-collapse: collapse;
}
table.centred {
	margin-left: auto;
	margin-right: auto;
}
table.basic td, table.basic th,
blockquote.github table td, blockquote.github table th {
	border: 1px solid #CCC;
	padding: 0 0.2em;
}
table.basic thead,
blockquote.github table thead {
	background: #25B;
	color: white;
}
table.basic thead th,
table.basic thead td,
blockquote.github table thead th,
blockquote.github table thead td {
	border-top-color: #25B;
	border-left-color: #25B;
	border-right-color: #25B;
}
table.basic th small {
	font-weight: normal;
	display: inline-block;
	line-height: 1.1;
}

/* Source code blocks */
blockquote.github code {
	background: #eee;
	padding: 0 0.3em;
	border-radius: 0.2em;
	border: 1px solid #ddd;
	white-space: nowrap;
	font-style: normal;
	font-weight: normal;
}

blockquote.github pre,
blockquote.source pre {
	overflow: auto;
	max-height: 20em;
	font-size: 80%;
	background-color: #346;
	color: white;
	padding: 1em;
	line-height: 130%;
}
blockquote.github pre code {
	background: transparent;
	padding: 0;
	border-radius: 0;
	border: none;
	white-space: inherit;
}

blockquote.github blockquote {
	margin: 1em 0;
	padding: 1em;
	border: 1px solid #CCC;
}

blockquote.source.html pre {
	white-space: nowrap;
}
blockquote.source.unlimited-height pre {
	max-height: none;
}

blockquote.source.coloured span.line-number {
	color: lightblue;
}
blockquote.source.coloured span.keyword {
	color: yellow;
}
blockquote.source.coloured span.keyword.special,
blockquote.source.coloured span.label {
	color: orange;
}
blockquote.source.coloured span.string {
	color: violet;
}
blockquote.source.coloured span.star-command {
	color: palevioletred;
}
blockquote.source.coloured span.comment {
	font-style: italic;
	color: lightgreen;
}
blockquote.source.coloured span.assembly, blockquote.source.coloured span.assembly span.keyword {
	color: #eee;
}
blockquote.source.coloured span.assembly span.string {
	color: #ecf;
}
blockquote.source.coloured span.exponent,
blockquote.source.coloured span.pi {
	color: transparent;
	display: inline-block;
}
blockquote.source.coloured span.exponent::before,
blockquote.source.coloured span.pi::before {
	color: white;
	width: 0;
	display: inline-block;
}
blockquote.source.coloured span.exponent::before {
	content: '\1D53C';
	font-size: 0.95em;
	font-family: inherit, 'Cambria';
}
blockquote.source.coloured span.pi::before {
	content: 'π';
}

.page-numbers-caption {
	margin-right: 1em;
}
.page-number,
.page-number-left,
.page-number-right,
.page-number-ellipsis {
	color: #999;
	border: 1px solid #999;
	padding: 3px 5px;
	font-size: 0.8rem;
}
.page-number-ellipsis {
	border: none;
	padding: 0;
}
.page-number:hover,
.page-number-left:hover,
.page-number-right:hover {
	text-decoration: none;
	border-color: #369;
	color: #369;
}
.page-number.selected {
	background-color: #369;
	color: white;
	border-color: #369;
}

.index-thumbnails {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2em;
}
.index-thumbnails:not(:first-child) {
	margin-top: 2em;
}
.index-thumbnail {
	text-align: center;
	
}
.index-thumbnail figure a:has(img) {
	display: block;
	border: 1px solid #ccc;
	margin: 0.5em auto;
	max-width: 11.25rem;
	box-sizing: border-box;
}
.index-thumbnail figure img {
	border: 1px solid #ddd;
	margin: 0.5em;
	display: block;
	width: calc(100% - 1em);
	box-sizing: border-box;
}
.index-thumbnail figcaption {
	font-size: 0.9rem;
	line-height: 1.2;
	max-width: 20rem;
	margin-left: auto;
	margin-right: auto;
}
@media screen and (max-width: 640px) {
	.index-thumbnails {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (max-width: 400px) {
	.index-thumbnails {
		grid-template-columns: repeat(1, 1fr);
	}
	.index-thumbnail figcaption {
		text-align: inherit;
	}
}

.index-thumbnails.list {
	display: block;
}
.index-thumbnails.list .index-thumbnail {
	text-align: left;
}
.index-thumbnails.list .index-thumbnail + .index-thumbnail {
	margin-top: 1rem;
}
.index-thumbnails.list .index-thumbnail figure {
	display: grid;
	grid-template-columns: 11.25rem auto;
	gap: 1rem;
}
.index-thumbnails.list .index-thumbnail figure > * {
	margin-left: 0;
	margin-right: 0;
}
.index-thumbnails.list figcaption {
	max-width: none;
	font-size: inherit;
	margin: 1em 0;
}
@media screen and (max-width: 640px) {
	.index-thumbnails.list figcaption {
		margin: 0.5em 0;
	}
}
@media screen and (max-width: 400px) {
	.index-thumbnails.list .index-thumbnail figure {
		display: block;
		text-align: center;
	}
	.index-thumbnails.list figcaption {
		font-size: 0.9rem;
	}
	.index-thumbnails.list .index-thumbnail + .index-thumbnail {
		border-top: 1px solid #ddd;
		padding-top: 1.5rem;
		margin-top: 1.5rem;
	}
}

.calendar-months {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5em;
}
.calendar-month {
	text-align: center;
}
.calendar-month table {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 2px;
	margin-top: 0.25em;
}
.calendar-month table th,
.calendar-month table td {
	text-align: center;
}
.calendar-month table th {
	font-family: constantia, garamond, serif;
	font-size: 0.8rem;
}
.calendar-month table td {
	font-size: 0.7rem;
	background: #999;
	color: white;
}
.calendar-month table td:empty {
	background: #DDD;
}
.calendar-month table td a {
	display: block;
	background: #369;
	color: inherit;
}
.calendar-month table td a:hover {
	text-decoration: underline;
}
@media screen and (max-width: 640px) {
	.calendar-months {
		grid-template-columns: repeat(3, 1fr);	
	}
}
@media screen and (max-width: 480px) {
	.calendar-months {
		grid-template-columns: repeat(2, 1fr);	
	}
}
@media screen and (max-width: 320px) {
	.calendar-months {
		grid-template-columns: repeat(1, 1fr);	
	}
}

.content-with-sidebar {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2rem;
}
@media screen and (max-width: 400px) {
	.content-with-sidebar {
		display: block;
	}
}
.sidebar-navigation {
	border: 1px solid #CCC;
	padding: 0.6em 1em;
	margin-left: 0;
	list-style: none;
}
.sidebar-navigation li {
	font-size: 0.9em;
}
.sidebar-navigation a {
	color: inherit;
}
.sidebar-navigation ul {
	list-style: none;
	margin-left: 0;
}
.sidebar-navigation ul li {
	padding-left: 16px;
	background: transparent url('/images/icons/bullet_black.png') no-repeat 0 50%;
}
.sidebar-navigation ul li.selected {
	background-image: url('/images/icons/bullet_blue.png');
}

.anchor-link {
	font-size: 0.75rem;
	padding-left: 20px;
	background: transparent url('/images/icons/link.png') no-repeat 0 50%;
}
/* Thumbnail grids */
.thumbnail-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1em;
	align-items: center;
	margin: 1em 0;
}
.thumbnail-grid.align-top {
	align-items: start;
}
.thumbnail-grid.align-bottom {
	align-items: end;
}
.thumbnail-grid.columns-4 {
	grid-template-columns: repeat(4, 1fr);
}
.thumbnail-grid.columns-3 {
	grid-template-columns: repeat(3, 1fr);
}
.thumbnail-grid.columns-2 {
	grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 640px) {
	.thumbnail-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
@media screen and (max-width: 480px) {
	.thumbnail-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media screen and (max-width: 360px) {
	.thumbnail-grid,
	.thumbnail-grid.columns-4,
	.thumbnail-grid.columns-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}
.thumbnail-grid a {
	display: inline-block;
	max-width: 96px;
	font-size: 0.9rem;
}
.thumbnail-grid.large a {
	max-width: 192px;
}
.thumbnail-grid.unlimited a {
	max-width: 100%;
}
.thumbnail-grid.centered,
.thumbnail-grid.centered a {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.thumbnail-grid a img {
	display: block;
	box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.2);
	margin: auto;
}

.thumbnail-grid.bordered a {
	border: 1px solid #ccc;
	background: white;
	padding: 6px;
	max-width: 98px;
}
.thumbnail-grid.bordered a img {
	box-shadow: none;
	border: 1px solid #ddd;
}

.thumbnail-grid img + br {
	display: block;
	margin-top: 0.25em;
}

.thumbnail-grid.large a {
	max-width: 192px;
}
.thumbnail-grid.bordered.large a {
	max-width: 194px;
}
.thumbnail-grid.unlimited a {
	max-width: 100%;
}

.thumbnail-grid.narrow {
	max-width: 620px;
}
.thumbnail-grid.columns-4.narrow {
	max-width: 500px;
}
.thumbnail-grid.columns-3.narrow {
	max-width: 380px;
}


/* Gallery thumbnail */
.gallery-thumbnail img {
	box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.2);
}

/* Versioned downloads */
table.versioned-download {
	width: 100%;
	border: 1px solid #CCC;
}
table.versioned-download th, table.versioned-download td {
	padding: 0.1em 0.4em;
	font-weight: normal;
}
table.versioned-download th {
	padding: 0.2em 0.4em;
	background-color: #369;
	color: white;
}

table.versioned-download td {
	border-top: 1px solid #CCC;
	font-size: 90%;
}
table.versioned-download a {
	color: inherit;
}

table.versioned-download a.versioned-download-exe, table.versioned-download a.versioned-download-zip {
	min-height: 16px;
	padding-left: 20px;
	background-image: url('/images/icons/page_white_put.png');
	background-position: left;
	background-repeat: no-repeat;
}
table.versioned-download a.versioned-download-exe {
	background-image: url('/images/icons/cd.png');
}
table.versioned-download a.versioned-download-zip {
	background-image: url('/images/icons/compress.png');
}
/* Equations */
.equation {
  font-style: italic;
  font-family: 'Cambria', garamond, serif;
}
p.equation {
	text-align: center;
}

.navigation-links {
	text-align: center;
}
.navigation-links a {
	display: inline-block;
	margin: auto 0.5em;
}
/* Figures */
figure.columns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-top: 1rem;
	grid-auto-rows: min-content;
}
figure.columns:first-child {
	margin-top: 0;
}
figure.columns img {
	display: block;
}
@media screen and (max-width: 480px) {
	figure.columns {
		grid-template-columns: repeat(1, 1fr);
	}
}
/* Cassettes */
canvas.cassette {
	display: block;
	width: 320px;
	height: 200px;
}
audio.cassette {
	width: 320px;
}
canvas.cassette + audio.cassette {
	margin-top: 0.5em;
}