/* ccf.gg style sheet Layout and colours live in the HTML (tables, , bgcolor), like it's 2001. This file only does what a 2001 site used CSS for: fonts, link colours, form fields and a few classes. Plus two modern extras that are clearly marked: the self-hosted fonts, and switches that turn off modern browser rendering. */ /* ---- self-hosted fonts (SIL Open Font License, see /fonts/OFL-*.txt) ---------------------------------- */ @font-face { font-family: 'Cinzel'; font-weight: 700; font-display: swap; src: url(/fonts/cinzel-700-latin.woff2?v=lswqk63w) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cinzel'; font-weight: 700; font-display: swap; src: url(/fonts/cinzel-700-latin-ext.woff2?v=3fja2vtb) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IM Fell English'; font-display: swap; src: url(/fonts/im-fell-english-latin.woff2?v=1el9oja6) format('woff2'); } @font-face { font-family: 'IM Fell English'; font-style: italic; font-display: swap; src: url(/fonts/im-fell-english-italic-latin.woff2?v=2hfqzrpj) format('woff2'); } @font-face { font-family: 'MedievalSharp'; font-display: swap; src: url(/fonts/medievalsharp-latin.woff2?v=2t1iquud) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'MedievalSharp'; font-display: swap; src: url(/fonts/medievalsharp-latin-ext.woff2?v=351kj1za) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---- switch off modern rendering ------------------------------------------------------------------ 2001 browsers had no kerning, ligatures, smart underlines, smooth image scaling, overscroll bounce, colour emoji or automatic dark mode. (Windows ignores the font-smoothing switches; macOS only.) */ html { color-scheme: only light; overscroll-behavior: none; overflow-anchor: none; scroll-behavior: auto; } * { image-rendering: pixelated; font-kerning: none; font-variant-ligatures: none; font-feature-settings: "kern" 0, "liga" 0, "clig" 0, "calt" 0; font-optical-sizing: none; font-variant-emoji: text; text-rendering: optimizeSpeed; -webkit-font-smoothing: none; font-smooth: never; text-decoration-skip-ink: none; text-decoration-thickness: 1px; -webkit-tap-highlight-color: transparent; } ::selection { background: #000080; color: #FFFFFF; } :focus { outline: none; } a:focus-visible, input:focus-visible[type="submit"], input:focus-visible[type="reset"] { outline: 1px dotted; outline-offset: -3px; } /* The stacked sidebar links are big enough to tap (24px tall) without looking any different. */ a[data-bookmark], a[data-homepage] { display: inline-block; padding: 4px 0; } /* Pixel radio buttons and select arrow: native controls look modern now. */ input[type="radio"] { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin: 0 4px 0 0; vertical-align: -1px; background: url(/gifs/radio.gif?v=169gst2z) no-repeat; border: 0; } input[type="radio"]:checked { background-image: url(/gifs/radio-on.gif?v=1ntpgjqm); } select { -webkit-appearance: none; appearance: none; border-radius: 0; padding-right: 22px; background: #FFFAF0 url(/gifs/select-arrow.gif?v=nmhxou88) no-repeat right 1px center; } textarea { resize: none; } /* Chunky 16px scrollbars in the site colours (Chrome/Edge). Firefox can only recolour them. */ ::-webkit-scrollbar { width: 16px; height: 16px; } ::-webkit-scrollbar-track { background: url(/gifs/sb-track.gif?v=27mj08br); } ::-webkit-scrollbar-thumb { background: #4A3818; border: 2px outset #C8A050; } ::-webkit-scrollbar-corner { background: #4A3818; } ::-webkit-scrollbar-button:single-button { display: block; width: 16px; height: 16px; background-repeat: no-repeat; } ::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url(/gifs/sb-up.gif?v=151hy6hc); } ::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url(/gifs/sb-down.gif?v=3rwxjvxt); } ::-webkit-scrollbar-button:single-button:horizontal:decrement { background-image: url(/gifs/sb-left.gif?v=r2v7c0op); } ::-webkit-scrollbar-button:single-button:horizontal:increment { background-image: url(/gifs/sb-right.gif?v=kf2alcv1); } @supports (-moz-appearance: none) { * { scrollbar-color: #8A6A2A #1A2418; } } /* ---- the 2001 part --------------------------------------------------------------------------------- */ /* IE 5.5 coloured scrollbars. */ body { scrollbar-face-color: #4A3818; scrollbar-track-color: #121A10; scrollbar-arrow-color: #FFF0A8; scrollbar-highlight-color: #C8A050; scrollbar-3dlight-color: #8A6A2A; scrollbar-shadow-color: #2E1E0A; scrollbar-darkshadow-color: #000000; } /* Quirks mode tables don't inherit fonts from body, so set them on cells too. */ body, td, th, p, li, div { font-family: 'IM Fell English', 'Book Antiqua', Georgia, serif; font-size: 15px; } body, td { color: #E8DCB8; } a:link { color: #E8C060; } a:visited { color: #C8A060; } a:hover { color: #FFFFFF; } a:active { color: #FFFFFF; } /* Inside the parchment. */ .parch, .parch td, .parch th, .parch p, .parch li, .parch div { color: #2A1A0A; font-size: 16px; } .parch a:link { color: #8A1010; } .parch a:visited { color: #5A2A6A; } .parch a:hover { color: #C02020; } .parch h1, .parch h2, .parch h3, .parch h4 { font-family: 'Cinzel', 'Book Antiqua', Georgia, serif; font-weight: bold; color: #5A1A0A; } /* Image headings (logo, ribbons, post titles) sit in real h1/h2 tags for search engines but look like plain divs. */ h1.hd, h2.hd, .parch h1.hd { margin: 0; padding: 0; font: inherit; color: inherit; } h1.hd.inline { display: inline; } .prose blockquote { margin-left: 20px; padding-left: 12px; border-left: 3px solid #8A6A3A; font-style: italic; } .prose code { background-color: #E0CC98; font-family: 'Courier New', Courier, monospace; } .prose table { border-collapse: collapse; } .prose th, .prose td { border: 1px solid #B89A62; padding: 3px 8px; text-align: left; } .dropcap { float: left; font-family: 'Cinzel', 'Book Antiqua', Georgia, serif; font-weight: bold; font-size: 54px; line-height: 46px; color: #8A1010; padding: 4px 6px 0px 0px; } .stars img { vertical-align: -1px; } /* The ticker under the masthead: as wide as sidebar + content, clipped. */ .ticker { width: 1009px; overflow: hidden; white-space: nowrap; padding: 2px 0px; background-color: #000000; color: #D4A640; font-family: 'MedievalSharp', 'Book Antiqua', serif; font-size: 15px; border-top: 2px ridge #7A5418; border-bottom: 2px ridge #7A5418; } .runes { letter-spacing: 5px; cursor: help; } /* Music player. */ .lcd { width: 112px; overflow: hidden; white-space: nowrap; padding: 1px 4px; background-color: #081406; color: #A8FF70; border: 2px inset #4A4020; font-family: 'Lucida Console', 'Courier New', monospace; font-size: 12px; text-align: left; } #viz { width: 112px; height: 18px; background-color: #000000; border: 1px solid #4A4020; } /* Form fields and buttons. */ input, textarea, select { font-family: 'IM Fell English', 'Book Antiqua', Georgia, serif; font-size: 15px; color: #2A1A0A; background-color: #FFFAF0; border: 2px inset #B8A070; padding: 2px 4px; } input[type="radio"] { padding: 0; } textarea.code { font-family: 'Courier New', Courier, monospace; font-size: 12px; } .btn { font-family: 'MedievalSharp', 'Book Antiqua', serif; font-size: 15px; color: #FFF0A8; background-color: #4A3818; border: 2px outset #A08040; padding: 1px 12px; } .btn:active { border-style: inset; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Footer effect toggles: the current one. */ a.on:link, a.on:visited { color: #FFF0A8; font-weight: bold; text-decoration: none; } /* ---- made by retro.js ----------------------------------------------------------------------------------- */ #fx { position: fixed; top: 0px; left: 0px; z-index: 50; pointer-events: none; image-rendering: pixelated; } .eye-overlay { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 60; background-color: #000000; text-align: center; padding-top: 12%; } .eye-overlay img { width: 500px; height: auto; border: 0; } .eye-overlay p { padding: 0 16px; font-family: 'Cinzel', 'Book Antiqua', serif; font-size: 24px; color: #FF5020; } /* ---- faux Flash Player (flash.js): the Flash box, Windows 2000 dialogs and the Flash right-click menu --- */ .flashbox { width: 550px; height: 400px; background-color: #000000; position: relative; overflow: hidden; text-align: left; } .flashbox canvas { image-rendering: auto; cursor: none; } .flash-missing { width: 550px; height: 400px; background-color: #FFFFFF; color: #000000; border: 1px solid #808080; text-align: center; } .flash-missing td { color: #000000; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 11px; } input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; margin: 0 4px 0 0; vertical-align: -2px; background: url(/gifs/checkbox.gif?v=1sdr5wmz) no-repeat; border: 0; padding: 0; } input[type="checkbox"]:checked { background-image: url(/gifs/checkbox-on.gif?v=37ps5iue); } .win { position: fixed; left: 50%; top: 22%; z-index: 80; background-color: #D4D0C8; border: 2px outset #D4D0C8; } .win td, .win div { color: #000000; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 11px; } .win .win-title td { color: #FFFFFF; font-weight: bold; } .win-x { width: 16px; height: 14px; background-color: #D4D0C8; border: 2px outset #D4D0C8; color: #000000; font-family: Tahoma, Verdana, sans-serif; font-size: 10px; font-weight: bold; line-height: 10px; text-align: center; } .win-btn { min-width: 75px; height: 23px; background-color: #D4D0C8; color: #000000; border: 2px outset #D4D0C8; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 11px; padding: 0 8px; } .win-btn:active { border-style: inset; } .win-btn.default { outline: 1px solid #000000; } .win-progress { height: 16px; border: 2px inset #D4D0C8; background-color: #FFFFFF; padding: 1px; white-space: nowrap; overflow: hidden; } .win-progress span { display: inline-block; width: 8px; height: 12px; margin-right: 2px; background-color: #0A246A; } .fmenu { position: absolute; z-index: 90; background-color: #D4D0C8; border: 2px outset #D4D0C8; padding: 2px; } .fmenu div { font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 11px; color: #000000; padding: 3px 20px 3px 18px; white-space: nowrap; cursor: default; } .fmenu div.off { color: #808080; } .fmenu div.on:hover { background-color: #0A246A; color: #FFFFFF; } .fmenu hr { border: 0; border-top: 1px solid #808080; border-bottom: 1px solid #FFFFFF; margin: 3px 1px; } .win a:link, .win a:visited { color: #0000FF; } .flash-input { position: absolute; left: 175px; top: 236px; width: 200px; height: 26px; border: 1px solid #000000; background-color: #FFFFFF; color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: 16px; padding: 2px 6px; }