/* the board's own look, after phpBB 2's default blue-grey theme: none of the
   club's green, it's somebody else's site.
   the board is body.fm; one box of it inside a club page (the home page's
   widget) is .fm-here, which carries the tokens and nothing leaks out */
body.fm, .fm-here {
  --bg: #e5e5e5; --ink: #000; --link: #006699; --hot: #dd6900;
  --row1: #efefef; --row2: #dee3e7; --cat: #d1d7dc; --line: #a9b8c2;
  --th: #006699; --thInk: #ffa34f;
}
body.fm *, .fm-here, .fm-here * { box-sizing: border-box; }
body.fm { margin: 0; background: var(--bg); color: var(--ink); font: 12px/1.45 Verdana, Arial, Helvetica, sans-serif; cursor: default;
  accent-color: var(--link); caret-color: var(--ink); }
body.fm ::selection { background: #316ac5; color: #fff; }
body.fm a, body.fm a:visited, .fm-here a, .fm-here a:visited { color: var(--link); text-decoration: none; }
body.fm a:hover, body.fm a:focus-visible, .fm-here a:hover, .fm-here a:focus-visible { color: var(--hot); background: none; text-decoration: underline; }
/* the club's style.css comes first (for the top bar); the board undoes what it
   shouldn't inherit: pinstriped headings, ▸ bullets */
body.fm h1 { background: none; border: 0; text-align: left; white-space: normal; overflow: visible; letter-spacing: 0; line-height: 1.2; }
body.fm h1::before, body.fm h1::after { content: none; }
body.fm ul { list-style: disc; }
body.fm li::before { content: none; }
/* the club's top bar keeps the club's type, over the board */
body.fm .top-bar { font: 22px/1.2 vtFont, "Courier New", monospace; }
body.fm .top-bar a { color: #000; }
body.fm .top-bar a:hover, body.fm .top-bar a:focus-visible { background: #000; color: #fff; text-decoration: none; }

.fm-wrap { max-width: 980px; margin: 44px auto 0; padding: 10px; }
.fm-top { background: #fff; border: 1px solid var(--line); padding: 12px 16px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 8px; }
.fm-logo { font: 22px/1.1 "Trebuchet MS", Verdana, sans-serif; color: var(--link); }
.fm-logo:hover { text-decoration: none; color: var(--link); }
.fm-logo small { display: block; font: italic 11px Verdana, sans-serif; color: #555; margin-top: 4px; }
.fm-nav { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; font-weight: bold; color: var(--link); }

.fm-h1 { font: bold 18px "Trebuchet MS", Verdana, sans-serif; color: var(--link); margin: 18px 0 6px; }
.fm-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 11px; margin: 6px 0; }
.fm-crumbs { font-weight: bold; }
.fm-pill { display: inline-block; background: #fff; border: 1px solid var(--line); border-radius: 3px; padding: 1px 8px; margin-right: 4px;
  font: bold 11px Verdana, sans-serif; text-transform: uppercase; color: var(--link); }
#fm-lock { color: #a00; }

.fm-table { border: 2px solid var(--th); background: #fff; }
.fm-th { display: grid; grid-template-columns: 150px 1fr; background: var(--th); color: var(--thInk); font: bold 11px Verdana, sans-serif; }
.fm-th span { padding: 5px 8px; }
.fm-cat { background: var(--cat); padding: 5px 8px; font-size: 11px; text-align: center; }
.fm-catl { text-align: left; font-weight: bold; color: var(--link); border-top: 1px solid #fff; }
.fm-desc { font-size: 11px; color: #333; margin: 2px 0 4px; }
.fm-modr { font-size: 10px; color: #555; }

/* index and topic lists: rows of cells, icon first */
.fm-ir, .fm-tr { display: grid; align-items: center; border-top: 1px solid #fff; }
.fm-ir { grid-template-columns: 34px 1fr 64px 64px 190px; }
.fm-tr { grid-template-columns: 26px 1fr 60px 120px 60px 190px; }
.fm-ir > *, .fm-tr > * { padding: 5px 6px; min-width: 0; }
.fm-ir.fm-th, .fm-tr.fm-th { border-top: 0; }
.fm-th1 { padding: 5px 8px; }
.fm-n { text-align: center; font-size: 11px; }
.fm-by { font-size: 11px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.fm-last { font-size: 10px; text-align: center; line-height: 1.5; }
.fm-forum { font-weight: bold; font-size: 13px; }
.fm-topic { font-weight: bold; }
.fm-kind { display: inline-block; margin-left: 6px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: #555;
  border: 1px solid var(--line); padding: 0 4px; background: #fff; vertical-align: 1px; }
.fm-go { font-weight: bold; }
/* folder icons, drawn: a little tab and a body; red new, grey lock, orange hot, yellow sticky */
.fm-icon { position: relative; height: 18px; }
.fm-icon::before { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 12px; margin: -5px 0 0 -8px;
  background: #e8c35a; border: 1px solid #a07d1c; box-shadow: inset 0 3px 0 rgba(255,255,255,.5); }
.fm-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 3px; margin: -9px 0 0 -8px;
  background: #e8c35a; border: 1px solid #a07d1c; border-bottom: 0; }
.fm-icon.is-new::before, .fm-icon.is-new::after { background: #ef7d5c; border-color: #a5391b; }
.fm-icon.is-hot::before, .fm-icon.is-hot::after { background: #f5a623; border-color: #b06b00; }
.fm-icon.is-lock::before, .fm-icon.is-lock::after { background: #b9c0c6; border-color: #6d767d; }
.fm-icon.is-sticky::before { box-shadow: inset 0 3px 0 rgba(255,255,255,.5), inset 0 -4px 0 #c0392b; }
.fm-online { margin-top: 14px; }
.fm-online .fm-p { padding: 6px 8px; font-size: 11px; line-height: 1.7; }

.fm-post { display: grid; grid-template-columns: 150px 1fr; border-top: 1px solid #fff; }
.row1 { background: var(--row1); }
.row2 { background: var(--row2); }
.fm-side { padding: 8px; border-right: 1px solid #fff; font-size: 10px; }
.fm-name { display: block; font-size: 12px; color: var(--ink); word-break: break-all; }
.fm-mod { color: #006600; }
.fm-rank { margin: 2px 0 6px; }
.fm-av { display: block; width: 64px; height: 64px; image-rendering: pixelated; border: 1px solid var(--line); margin-bottom: 6px; }
.fm-meta { white-space: pre-line; color: #333; }

.fm-main { padding: 6px 10px 4px; min-width: 0; display: flex; flex-direction: column; }
.fm-head { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.fm-when { white-space: pre-wrap; }
.fm-btns { white-space: nowrap; }
.fm-b { display: inline-block; background: #fff; border: 1px solid var(--line); padding: 0 5px; margin-left: 3px; font: 10px Verdana, sans-serif;
  color: var(--link); text-transform: lowercase; }
.fm-body { padding: 8px 0; font-size: 12px; overflow-wrap: anywhere; flex: 1; }
.fm-body > * + * { margin-top: 10px; }
.fm-h { font-weight: bold; font-size: 13px; color: var(--link); margin-top: 16px !important; }
.fm-list { margin: 4px 0; padding-left: 22px; }
.fm-list li { margin: 3px 0; }

/* [code] boxes, with the developer network's highlighting in board colours */
.fm-codebox { margin-left: 10px; margin-right: 10px; }
.fm-codeh { font: bold 11px Verdana, sans-serif; margin-bottom: 2px; }
.fm-code { margin: 0; background: #fafafa; border: 1px solid var(--cat); padding: 6px 8px; font: 11px/1.45 "Courier New", Courier, monospace;
  color: #063; overflow-x: auto; white-space: pre; }
.fm-code .kw { color: #00309c; font-weight: bold; }
.fm-code .p { color: #444; }
.fm-code .t { color: #7a1fa2; }
.fm-code .s { color: #b0360d; }
.fm-code .n { color: #c00; }
.fm-code .u { color: #6b5100; }
.fm-code .c { color: #888; font-style: italic; }

/* attached gifs: a small canvas blown up, and the attachment line under it */
.fm-fig { display: inline-block; max-width: 100%; }
.fm-fx { display: block; width: 256px; max-width: 100%; height: auto; aspect-ratio: 128 / 80; image-rendering: pixelated; border: 1px solid #000; }
.fm-cap { font-size: 10px; color: #555; margin-top: 2px; }
.fm-row { display: flex; flex-wrap: wrap; gap: 10px; }
.fm-qh { font: bold 11px Verdana, sans-serif; margin: 0 0 2px 10px; }
.fm-q { background: #fafafa; border: 1px solid var(--cat); padding: 4px 6px; margin: 0 10px 10px; font-size: 11px; }
.fm-sigline { color: #444; margin-top: 4px; }
.fm-sig { font-size: 11px; color: #333; padding-bottom: 6px; }
.fm-edit { font: italic 10px Verdana, sans-serif; color: #444; padding-bottom: 4px; }
.fm-foot { border-top: 1px solid var(--line); padding-top: 3px; margin-top: 4px; }
.fm-foot .fm-b { margin: 0 3px 0 0; }
body.fm img.smi { vertical-align: middle; image-rendering: pixelated; }

.fm-powered { text-align: center; font-size: 10px; color: #555; margin: 14px 0; }

@media (max-width: 760px) {
  .fm-ir { grid-template-columns: 30px 1fr 150px; }
  .fm-ir > :nth-child(3), .fm-ir > :nth-child(4) { display: none; }
  .fm-tr { grid-template-columns: 24px 1fr 46px 150px; }
  .fm-tr > :nth-child(4), .fm-tr > :nth-child(5) { display: none; }
}
@media (max-width: 600px) {
  .fm-ir { grid-template-columns: 28px 1fr; }
  .fm-ir > .fm-last { grid-column: 2; text-align: left; padding-top: 0; }
  .fm-tr { grid-template-columns: 24px 1fr 56px; }
  .fm-tr > .fm-last { grid-column: 2 / span 2; text-align: left; padding-top: 0; }
  .fm-tr.fm-th > :last-child, .fm-ir.fm-th > :last-child { display: none; }
  .fm-wrap { padding: 8px 6px; }
  .fm-th:not(.fm-tr):not(.fm-ir):not(.fm-ft) { grid-template-columns: 1fr; }
  .fm-th:not(.fm-tr):not(.fm-ir):not(.fm-ft) span:first-child { display: none; }
  .fm-post { grid-template-columns: 1fr; }
  .fm-side { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; border-right: 0; border-bottom: 1px solid #fff; padding: 6px 8px; }
  .fm-av { grid-row: 1 / span 3; width: 40px; height: 40px; margin: 0; }
  .fm-name, .fm-rank { grid-column: 2; margin: 0; }
  .fm-meta { grid-column: 2; white-space: normal; }
  .fm-head { flex-direction: column; }
}
/* a pet: a live specimen on the lab's projector, in a photo frame */
.fm-pet { display: block; width: 180px; height: 180px; background: #0b1418; border: 1px solid #000; }
/* pagers: phpBB's Goto page, and the small one under a long topic's title */
.fm-pager { font-size: 11px; font-weight: bold; }
.fm-pager b { color: #000; }
.fm-mini { display: block; font-size: 10px; font-weight: normal; margin-top: 2px; }
/* names are links now: they keep the plain look */
.fm-name, .fm-uname, .fm-by { color: var(--ink); font-weight: bold; }
.fm-name.fm-mod { color: #006600; }
.fm-nav a { color: var(--link); }
/* the information page, the profile and the memberlist */
.fm-notice { max-width: 560px; margin: 30px auto; text-align: center; }
.fm-notice .fm-p { padding: 16px; line-height: 2; }
.fm-prof { display: grid; grid-template-columns: 170px 1fr; }
.fm-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; padding: 12px; font-size: 12px; align-content: start; }
.fm-dl dt { font-weight: bold; text-align: right; color: #333; }
.fm-dl dd { margin: 0; }
.fm-table > .fm-p { padding: 6px 10px; }
.fm-mr { display: grid; grid-template-columns: 40px 1fr 1fr 90px 70px; border-top: 1px solid #fff; }
.fm-mr > * { padding: 5px 6px; min-width: 0; font-size: 11px; }
.fm-faq b { display: block; margin-bottom: 3px; }
@media (max-width: 600px) {
  .fm-prof { grid-template-columns: 1fr; }
  .fm-dl dt { text-align: left; }
  .fm-mr { grid-template-columns: 30px 1fr 70px; }
  .fm-mr > :nth-child(3), .fm-mr > :nth-child(4) { display: none; }
}

/* the home page's window onto the board: a few of its threads, in its look */
.fm-here { margin: 0.8em 1em 1.2em; background: var(--bg); color: var(--ink); font: 11px/1.45 Verdana, Arial, Helvetica, sans-serif;
  border: 1px solid var(--line); box-shadow: 4px 4px 0 #000; padding: 8px; }
.fm-feat__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; background: #fff;
  border: 1px solid var(--line); padding: 6px 10px; margin-bottom: 6px; }
.fm-feat__top a { font: 16px/1.1 "Trebuchet MS", Verdana, sans-serif; }
.fm-feat__top small { font-style: italic; color: #555; }
.fm-feat .fm-ft { display: grid; grid-template-columns: 22px 1fr 54px 180px; align-items: center; border-top: 1px solid #fff; }
.fm-feat .fm-ft > * { padding: 4px 6px; min-width: 0; }
.fm-feat .fm-ft.fm-th { border-top: 0; }
.fm-feat .fm-sec { display: block; font-size: 10px; color: #555; }
.fm-feat__more { display: block; text-align: right; font-weight: bold; margin-top: 6px; }
@media (max-width: 600px) {
  .fm-feat .fm-ft { grid-template-columns: 22px 1fr 40px; }
  .fm-feat .fm-ft > .fm-last { grid-column: 2 / span 2; text-align: left; padding-top: 0; }
  .fm-feat .fm-ft.fm-th > :last-child { display: none; }
}