/* 42718.net - one stylesheet for the whole site.
   Same family as files.42718.net: white paper, monospace, 1px black rules. */

html { background: #ffffff; }
body {
  margin: 0; background: #ffffff; color: #000000;
  font-family: "Courier New", Courier, monospace; font-size: 15px; line-height: 1.45;
}
a { color: #0000ee; }
a:visited { color: #551a8b; }
a:hover { background: #ffff99; }
img { max-width: 100%; }
hr { border: 0; border-top: 1px solid #000000; margin: 16px 0; }
h1, h2, h3 { margin: 22px 0 8px 0; line-height: 1.25; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0 0 12px 0; }
ul, ol { margin: 0 0 12px 0; padding-left: 26px; }
li { margin: 2px 0; }
code { background: #f2f2f2; padding: 0 3px; }
pre {
  margin: 0 0 14px 0; padding: 8px 12px; background: #f2f2f2;
  border: 1px solid #000000; font-family: inherit; font-size: 14px; overflow-x: auto;
}
pre code { background: none; padding: 0; }
blockquote { margin: 10px 0 14px 0; padding: 8px 14px; border-left: 3px solid #000000; background: #f6f6f6; }
blockquote .who { display: block; font-size: 13px; color: #333333; margin-bottom: 4px; }
table { border-collapse: collapse; margin: 0 0 14px 0; font-size: 14px; }
th, td { border: 1px solid #000000; padding: 4px 10px; text-align: left; vertical-align: top; }
th { background: #f2f2f2; }
figure { margin: 14px 0; display: flex; flex-direction: column; gap: 6px; }
figure img { border: 1px solid #000000; display: block; }
figcaption { font-size: 13px; color: #333333; }
.twoup { display: flex; flex-wrap: wrap; gap: 16px; margin: 14px 0; }
.twoup figure { flex: 1 1 280px; min-width: 0; margin: 0; }
.dim { color: #333333; }

/* header bar */
.bar {
  background: #000000; color: #ffffff; padding: 12px 24px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px;
}
.bar a { color: #ffffff; font-size: 14px; }
.bar a:hover { background: #333333; }
.bar .site { font-size: 20px; font-weight: bold; letter-spacing: 1px; text-decoration: none; }
.bar .tagline { font-size: 13px; color: #bbbbbb; }
.bar .spacer { flex: 1 1 auto; }

/* two columns: sidebar + main; stacks on a phone */
.wrap {
  display: flex; flex-wrap: wrap; gap: 32px; width: 100%; max-width: 1240px;
  margin: 0 auto; padding: 24px; box-sizing: border-box;
}
.side { flex: 0 1 200px; min-width: 160px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.side b { margin-bottom: 4px; }
.side hr { margin: 10px 0; width: 100%; }
.side a.cur { font-weight: bold; }
.side .datelist { grid-template-columns: 1fr; gap: 6px; font-size: 13px; }
.side .datelist .d { display: none; }
.main { flex: 999 1 560px; min-width: 0; }
.crumb { font-size: 13px; color: #333333; margin: 0 0 8px 0; }
.page { max-width: 820px; }
.page h1:first-child { margin-top: 4px; }

/* generated lists */
.datelist { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 2px 16px; margin: 0 0 18px 0; }
.datelist .d { color: #333333; }
.syslist { display: grid; grid-template-columns: 110px 260px minmax(0, 1fr); gap: 2px 16px; margin: 0 0 18px 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 0 0 18px 0; }
.card { display: flex; flex-direction: column; border: 1px solid #000000; text-decoration: none; color: #000000; }
.card:hover { background: #ffffff; }
.card:hover b { background: #ffff99; }
.card img, .card .nophoto { width: 100%; height: 170px; object-fit: cover; border-bottom: 1px solid #000000; display: block; box-sizing: border-box; }
.cardtext { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.cardtext span { font-size: 14px; }
.nophoto {
  background: #e6e6e6; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #333333;
}

/* man pages (howto, articles) */
.man { max-width: 820px; }
.man .manhead, .man .manfoot { display: flex; justify-content: space-between; gap: 12px; }
.man .manhead { font-weight: bold; margin: 0 0 22px 0; }
.man .manfoot { font-size: 13px; color: #333333; margin: 24px 0 0 0; }
.man h2 { font-size: 15px; font-weight: bold; text-transform: uppercase; margin: 22px 0 6px 0; }
.man p, .man ul, .man ol, .man pre, .man blockquote, .man table, .man figure, .man .twoup, .man .meta, .man h3 { margin-left: 32px; }
.man .twoup figure { margin-left: 0; }
.man .meta { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 2px 14px; font-size: 14px; margin-bottom: 14px; }
.man .meta:empty { display: none; }
.man img { max-width: 100%; }

/* system pages */
.systitle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin: 0 0 18px 0; }
.systitle h1 { margin: 0; font-size: 26px; }
.systitle .model { font-size: 16px; }
.tag { font-size: 13px; color: #333333; border: 1px solid #000000; padding: 1px 8px; }
.systop { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; margin: 0 0 22px 0; }
.sysphoto { flex: 1 1 460px; min-width: 0; margin: 0; }
.sysphoto img { width: 100%; max-height: 420px; object-fit: cover; }
.sysphoto .nophoto.big { height: 300px; border: 1px solid #000000; }
.hinv { flex: 1 1 320px; min-width: 0; border: 1px solid #000000; }
.hinvhead { background: #000000; color: #ffffff; padding: 6px 12px; font-size: 13px; font-weight: bold; }
.specs { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 12px; padding: 12px; font-size: 14px; }

/* footer */
.foot { border-top: 1px solid #000000; margin: 8px 24px 0 24px; padding: 10px 0 24px 0; font-size: 13px; color: #333333; }

@media (max-width: 640px) {
  .wrap { padding: 16px; gap: 20px; }
  .syslist { grid-template-columns: 1fr; gap: 0 0; }
  .syslist a { margin-top: 6px; }
  .datelist { grid-template-columns: 1fr; }
  .man p, .man ul, .man ol, .man pre, .man blockquote, .man table, .man figure, .man .twoup, .man .meta, .man h3 { margin-left: 12px; }
}