:root {
--page-bg: #fff;
--body-fg: #444;
--accent: #600;
--even-bg: #fee;
--odd-bg: #eee;
--sidebar-bg: #fee;
--highlight-bg: #fcc;
}
html { color-scheme: light }
html[data-theme="dark"] {
color-scheme: dark;
--page-bg: #000;
--body-fg: #fff;
--accent: #e66;
--even-bg: #300;
--odd-bg: #333;
--sidebar-bg: #300;
--highlight-bg: #933;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) {
color-scheme: dark;
--page-bg: #000;
--body-fg: #fff;
--accent: #e66;
--even-bg: #300;
--odd-bg: #333;
--sidebar-bg: #300;
--highlight-bg: #933;
}
}
body,table {
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
background-color: var(--page-bg);
color: var(--body-fg);
}
body {
margin: 0;
background-image: linear-gradient(to right, #600 0, #600 7.75rem, #666 7.75rem, #666 calc(7.75rem + 1px), #600 calc(7.75rem + 1px), #600 calc(7.75rem + 2px));
background-size: calc(7.75rem + 2px) 0.5rem;
background-repeat: repeat-y;
background-position: top left;
line-height: 1.5;
}
#bg {
margin: 0;
max-width: 64rem;
}
#content {
margin: 0.625rem 0.625rem 0.625rem 8.5rem;
padding: 0;
font-size: 1rem;
}
#logo,#menu {
font-size: 0.8125rem;
text-align: left;
color: #999;
background-color: #600;
border: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
padding: 0.25rem 0 0.25rem 0.25rem;
width: 7.5rem;
}
#menu {
top: 7.75rem;
line-height: 1.9;
}
a { color: var(--accent) }
hr {
height: 1px;
border: 0;
background-color: var(--accent);
}
h1 {
font-size: 1.75rem;
margin-top: 0;
border-bottom: solid 2px var(--accent);
line-height: 1.2;
}
h2 { font-size: 1.25rem; line-height: 1.2; }
.shrink { max-width: 100%; height: auto }
input { border-color: #999 }
pre, code { font-family: ui-monospace, monospace }
#logo a,#menu a { color: #fff; display: block; text-decoration: none }
#menu a { padding-left: 0.5rem; text-indent: -0.5rem }
#logo a {
box-sizing: border-box;
width: 7.5rem;
height: 7.5rem;
background-image: url('data:image/svg+xml,'), url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: 7.5rem 5.3125rem, 7.5rem 2.1875rem;
background-position: top left, bottom left;
}
#logo a:hover,#menu a:hover { background-color: #933 }
#menu dl { margin: 0.5rem 0 0.5rem 0.25rem; padding-left: 0 }
#menu dd { margin: 0 0 0 0.5rem; padding-left: 0 }
#menu dt { font-size: 1.25em }
#menu a.back {
display: block;
min-height: 1.5rem;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: 0 center;
background-size: 1.5rem 1.5rem;
}
#menu input { background-color: #fcc; border-color: #fcc; color: #000; width: 90% }
#menu label { font-size: .75em; margin-top: 1.5em; display: block }
#news { margin: 1em 0; padding: 0 .5em .5em .5em; background-color: var(--odd-bg) }
#news dt { text-align:center; font-weight: bold; margin: 0; padding: .5em 0 0 0 }
#news dd { margin: 0; padding: 0 0 0 3.5em; text-indent: -3.5em }
.center { text-align: center }
.source { font-size: .75rem; font-style: italic; }
.even, .striped tr:nth-child(even) { background-color: var(--even-bg); }
.odd, .striped tr:nth-child(odd) { background-color: var(--odd-bg); }
.code { padding: 0 2em 0 0 }
.sidebar { background-color: var(--sidebar-bg); border: solid 1px #600; padding: .5em 1em }
.highlight { background-color: var(--highlight-bg) }
.error { border: 1px solid #c00; padding: .5em 1em; color: #c00 }
.button { white-space: nowrap; padding: .125em .25em; border: 1px solid #666; }
.dirlist { width: 100%; border-collapse: collapse; margin: 1em 0; text-align: left }
#adright { float: right; margin: 0 0.5em 0.5em 1em; width: 336px; max-width: 40% }
#admiddle { margin: .5em 3em }
#adbottom { margin: 1em 0 4em .5em }
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important }
@media print
{
html { color-scheme: light }
body, #bg, #content { margin: 0; color: #000; background-color: #fff; background-image: none; font-size: 12pt }
pre, code { font-size: 12pt }
a { text-decoration: underline }
a[href]::after { content: " (" attr(href) ")" }
form, #menu, #logo, #admiddle, #adbottom, #adright { display: none }
h1, h2, h3, h4, h5, h6 { break-after: avoid }
p, pre, code, blockquote, table, ul, ol, dl { break-inside: avoid }
}
@media screen and (max-width: 640px)
{
body { background-image: none; }
#bg {
display: flex;
flex-direction: column;
}
#logo {
order: 1;
position: static;
padding: 0;
top: auto;
left: auto;
width: 100%;
border-bottom: 1px #666 solid;
}
#content {
order: 2;
margin: 0.625rem;
}
#menu {
order: 3;
font-size: 84%;
position: static;
width: 100%;
border-top: 1px #666 solid;
margin: 1em 0 0 0;
}
#logo a {
padding: 0.25rem 0 0.125rem 0.5rem;
width: auto;
height: auto;
min-height: 2.5625rem;
background-size: 3.8125rem auto, auto 2.1875rem;
background-position: right center, left 0.5rem center;
}
#menu dt { margin: 0 0 0.5rem 0 }
#menu dd a { padding: 0.5rem 1rem; border: 1px solid; border-color: #933 #000 #000 #933 }
#adright { float: none; margin: 0 auto 1em; width: 100%; max-width: 100% }
#admiddle { margin: 0.5em 0 }
#adbottom { margin: 1em 0 0 0 }
}