/* CodeVibe - thema "bbs": zwart BBS-scherm met ANSI-kleuren. Alleen actief als theme.php 'bbs' teruggeeft. */
@font-face { font-family: "VT323"; font-weight: 400; font-style: normal; font-display: block; src: url(../fonts/VT323-latin.woff2) format("woff2"); }
body.t-bbs { background-color: #000; background-image: url(../stars_near.svg), url(../stars_far.svg); background-size: 300px 300px, 400px 400px; animation: drift 40s linear infinite; margin: 0; padding: 8px; color: #bfbfbf; font: 21px/1.15 "VT323", "Courier New", monospace; text-shadow: 0 0 3px rgba(85,255,255,.25); }
body.t-bbs::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); z-index: 99; }
body.t-bbs a { color: #55ffff; }
body.t-bbs a:visited { color: #ff55ff; }
body.t-bbs a:hover { background: #55ffff; color: #000; text-shadow: none; }
body.t-bbs font[color="#ff9cff"] { color: #ffff55; }
body.t-bbs font[color="#00ff00"] { color: #55ff55; }
body.t-bbs font[color="#ffff00"] { color: #ffff55; }
body.t-bbs font[color="#7affff"] { color: #55ffff; }
body.t-bbs font[color="#ff5050"] { color: #ff5555; }
body.t-bbs .rainbow { background: none; color: #ffff55; }
body.t-bbs h2 { background: #0000aa; color: #fff; padding: 2px 8px; font: 28px/32px "VT323", monospace; box-sizing: border-box; height: 36px; overflow: hidden; }
body.t-bbs h2 font { color: #ffff55; }
.bbs-frame { max-width: 1280px; margin: 0 auto; border: 4px double #55ffff; padding: 6px; background: #000; }   /* sterren alleen naast het blok */
.bbs-top, .bbs-bottom { display: flex; justify-content: space-between; gap: 12px; background: #0000aa; color: #fff; padding: 2px 10px; }
.bbs-bottom { margin-top: 10px; flex-wrap: wrap; }
.bbs-bottom a, .bbs-bottom a:visited { color: #55ffff; }
.bbs-bottom a:hover { background: #55ffff; color: #000; }
body.t-bbs .foot-upd, body.t-bbs .foot-y2k, body.t-bbs .foot-copy { display: none; }
body.t-bbs .mono { font-family: "VT323", "Courier New", monospace; }
body.t-bbs table.proj .mono { color: #55ff55; font-size: 16px; line-height: 1; letter-spacing: 0; text-shadow: none; opacity: .9; }
body.t-bbs .crumbs, body.t-bbs .mobile-crumbs { margin: .83em 0; background: #0000aa; color: #ffff55; border: 0; padding: 2px 8px; font: 28px/32px "VT323", monospace; box-sizing: border-box; height: 36px; overflow: hidden; text-shadow: 0 0 3px rgba(85,255,255,.25); }
body.t-bbs .crumbs a, body.t-bbs .crumbs a:visited, body.t-bbs .mobile-crumbs a, body.t-bbs .mobile-crumbs a:visited { color: #55ffff; }
body.t-bbs .crumbs a:hover, body.t-bbs .mobile-crumbs a:hover { background: #55ffff; color: #000; }
body.t-bbs .mobile-crumbs { display: block; }
body.t-bbs .crumbs { display: none; }
.bbs-construction { text-align: center; margin: 6px 0 4px; }
.bbs-buttons { margin-top: 14px; padding-top: 10px; border-top: 3px double #ff55ff; }
.bbs-buttons > div { width: 100% !important; }
.bbs-buttons table { width: 100%; }
.bbs-y2k { color: #55ffff; font-size: 30px; line-height: 1.1; text-align: center; margin: 4px 0 10px; }
.bbs-y2k b { color: #ffff55; font-weight: normal; }
.bbs-logo { margin: 12px 0 0; text-align: center; color: #ff55ff; font: 18px/1 "Courier New", Menlo, monospace; text-shadow: 3px 3px 0 #0000aa; overflow: hidden; }
.bbs-tag { text-align: center; color: #ffff55; margin: 6px 0 10px; padding-bottom: 8px; border-bottom: 3px double #ff55ff; }
.bbs-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; border: 3px double #ff55ff; padding: 4px 10px; margin-bottom: 8px; }
.bbs-menu a { text-decoration: none; color: #55ffff; }
.bbs-menu a b { color: #ffff55; font-weight: normal; }
.bbs-menu a:hover b { color: #000; }
body.t-bbs .bbs-banner { display: none; }
.bbs-prompt { margin: 14px 4px 6px; color: #55ff55; }
.bbs-prompt .keys { color: #ffff55; }
.bbs-prompt .cursor { animation: bbs-blink 1s steps(2, start) infinite; }
@keyframes bbs-blink { to { visibility: hidden; } }
body.t-bbs table.layout, body.t-bbs td.sidebar { background: transparent; color: #bfbfbf; }
body.t-bbs td.sidebar { border-right: 3px double #0000aa; }
body.t-bbs .photo { border: 4px double #55ffff; background: #000; padding: 2px; }
body.t-bbs table.proj, body.t-bbs table.spec { background: #000; border: 3px double #55ffff; }
body.t-bbs table.proj td, body.t-bbs table.spec td, body.t-bbs table.spec th { border: 1px solid #0000aa; }
body.t-bbs table[style*="#000040"] { background: #000 !important; border: 3px double #ff55ff !important; }
body.t-bbs .panel { background: #000; border: 3px double #ff55ff; }
body.t-bbs .quote, body.t-bbs .err { background: #000; }
body.t-bbs .btn95, body.t-bbs .btn95:visited { background: #0000aa; color: #ffff55; border: 3px double #55ffff; }
body.t-bbs .btn95:hover { background: #55ffff; color: #000; }
body.t-bbs #player { background: #000; border: 3px double #55ffff; color: #55ff55; }
body.t-bbs #player .titlebar { background: #0000aa; }
body.t-bbs #player .btns button { background: #000; color: #55ffff; border: 1px solid #55ffff; }
body.t-bbs .gb input, body.t-bbs .gb textarea { background: #000; color: #55ff55; border: 1px solid #55ffff; }
body.t-bbs .gb .meta { color: #ff55ff; }
@media (max-width: 760px) { .bbs-logo { font-size: 9px; } .bbs-top, .bbs-bottom { flex-direction: column; } body.t-bbs { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { body.t-bbs { animation: none; } .bbs-prompt .cursor { animation: none; } body.t-bbs marquee { display: none; } }

/* ---- zijbalk ---- */
body.t-bbs td.sidebar { width: 224px; max-width: 224px; padding: 10px 6px 20px; }
body.t-bbs td.sidebar > br { display: none; }
body.t-bbs td.sidebar > b { display: block; background: #0000aa; color: #ffff55; font: normal 20px/24px "VT323", monospace; padding: 0 6px; margin: 14px 0 6px; text-shadow: none; }
body.t-bbs td.sidebar > div:first-child { display: block !important; text-align: center; }
body.t-bbs .side-menu { border: 3px double #55ffff; padding: 4px 2px; }
body.t-bbs .side-menu br { display: none; }
body.t-bbs .side-menu a, body.t-bbs .side-menu .mail { display: block; padding: 1px 6px; text-decoration: none; }
body.t-bbs .side-menu a::before { content: "\00bb\00a0"; color: #ff55ff; }
body.t-bbs .side-menu .mail a { display: inline; padding: 0; }
body.t-bbs .side-menu .mail a::before { content: ""; }
body.t-bbs .side-menu .mail { padding-left: 6px; }
body.t-bbs .side-menu a:hover::before { color: #000; }
body.t-bbs td.sidebar .counter { display: block; text-align: center; border: 3px double #55ffff; padding: 4px 6px; letter-spacing: 3px; }
body.t-bbs #player { width: 100%; margin: 0; box-sizing: border-box; }
body.t-bbs #player .titlebar span.x { background: #000; color: #55ffff; border: 1px solid #55ffff; }
body.t-bbs #player .lcd { background: #000; border: 1px solid #0000aa; }
body.t-bbs #player .btns #bstop i { background: #55ffff; }
body.t-bbs #player .btns button:hover { background: #55ffff; color: #000; }
body.t-bbs #player .btns button:hover #bstop i, body.t-bbs #player .btns #bstop:hover i { background: #000; }
body.t-bbs #player .vol { color: #55ffff; }
body.t-bbs #player .vol input { accent-color: #55ffff; }
@media (max-width: 760px) { body.t-bbs td.sidebar { width: auto !important; } }
body.t-bbs td.sidebar .photo { max-width: 100%; }
body.t-bbs #player .titlebar span:first-child { overflow: hidden; white-space: nowrap; }

/* ---- zijbalk onderscheidt zich van de content: eigen paneel, andere kleuren ---- */
body.t-bbs td.sidebar { background: #08082e; border: 3px double #ff55ff; box-shadow: inset 0 0 18px rgba(255,85,255,.18); }
body.t-bbs td.sidebar > b { background: #55ffff; color: #000; }
body.t-bbs .side-menu { border: 0; border-top: 1px dashed #ff55ff; border-bottom: 1px dashed #ff55ff; padding: 6px 2px; }
body.t-bbs .side-menu a::before { color: #ffff55; }
body.t-bbs td.sidebar .counter { background: #000; border: 1px solid #ff55ff; }
body.t-bbs td.sidebar .photo { border-color: #ff55ff; }
body.t-bbs #player { background: #000; border: 1px solid #ff55ff; }
body.t-bbs #player .titlebar { background: #ff55ff; color: #000; }
body.t-bbs #player .titlebar span.x { background: #000; color: #ff55ff; border-color: #ff55ff; }