/* ============================================================= *
 *  rdor.net  ::  master stylesheet  ::  hand-coded in Notepad    *
 *  best viewed @ 1024x768 in a browser that respects the craft  *
 * ============================================================= */

html, body {
    margin: 0;
    padding: 0;
}

body {
    /* tiled starfield, but it's all CSS so the GIF doesn't 404 in 2026 */
    background-color: #000010;
    background-image:
        radial-gradient(1px 1px at 20px 30px, #fff, transparent),
        radial-gradient(1px 1px at 90px 80px, #9fefff, transparent),
        radial-gradient(1px 1px at 130px 40px, #fff, transparent),
        radial-gradient(1px 1px at 160px 120px, #66ff99, transparent),
        radial-gradient(2px 2px at 50px 160px, #ffffff, transparent),
        radial-gradient(1px 1px at 200px 90px, #ffd9a0, transparent);
    background-size: 220px 200px;
    color: #c8c8d0;
    font-family: Verdana, Geneva, "MS Sans Serif", sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

a {
    color: #66ccff;
    text-decoration: underline;
}
a:visited { color: #b18cff; }
a:hover {
    color: #000040;
    background: #ffff66;
    text-decoration: none;
}

/* ------- the page frame: an honest-to-god layout table ------- */
.frame {
    width: 800px;
    margin: 8px auto;
    border: 2px outset #8a8aa0;
    background: #1a1a2e;
}

/* ----------------------- top banner -------------------------- */
.banner {
    background: #000;
    border-bottom: 2px ridge #5a5a80;
    text-align: center;
    padding: 10px 0 6px 0;
    background-image: linear-gradient(180deg, #14142a, #000);
}
.banner .logo {
    font-family: "Courier New", monospace;
    font-weight: bold;
    font-size: 46px;
    letter-spacing: 2px;
    margin: 0;
    color: #39ff14;
    text-shadow: 0 0 6px #39ff14, 2px 2px 0 #0a5d00;
}
.banner .logo .dot { color: #ff3864; text-shadow: 0 0 6px #ff3864; }
.banner .tagline {
    font-family: "Comic Sans MS", "Times New Roman", cursive;
    color: #ffcc00;
    font-size: 13px;
    margin: 2px 0 4px 0;
}

/* ----------------------- marquee ----------------------------- */
.ticker {
    background: #000;
    color: #00ff00;
    font-family: "Courier New", monospace;
    font-size: 12px;
    border-top: 1px solid #003300;
    border-bottom: 2px ridge #5a5a80;
    padding: 3px 0;
    overflow: hidden;
}

/* ----------------------- body grid --------------------------- */
.layout { width: 100%; border-collapse: collapse; }
.layout > tbody > tr > td { vertical-align: top; }

.sidebar {
    width: 168px;
    background: #12121f;
    border-right: 2px ridge #5a5a80;
    padding: 8px;
}
.content {
    padding: 12px 16px;
}

/* ----------------------- nav buttons ------------------------- */
.navbtn {
    display: block;
    text-align: center;
    margin: 0 0 6px 0;
    padding: 5px 0;
    color: #ffffff !important;
    font-weight: bold;
    text-decoration: none !important;
    border: 2px outset #7a7ab0;
    background: linear-gradient(180deg, #4a4a8a, #2a2a52);
    letter-spacing: 1px;
}
.navbtn:hover {
    border-style: inset;
    background: linear-gradient(180deg, #ffcc00, #ff9900);
    color: #000040 !important;
}
.navbtn.here {
    border-style: inset;
    background: linear-gradient(180deg, #2a2a52, #4a4a8a);
    color: #ffff66 !important;
}

/* ----------------------- panels ------------------------------ */
.panel {
    border: 2px groove #5a5a80;
    background: #0e0e1c;
    margin: 0 0 12px 0;
}
.panel h3 {
    margin: 0;
    padding: 3px 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
    background: linear-gradient(180deg, #c0c0d8, #8a8ab0);
    border-bottom: 1px solid #000;
}
.panel .pbody { padding: 7px 9px; }

/* ----------------------- content type ------------------------ */
.content h2 {
    font-family: "Times New Roman", Georgia, serif;
    color: #ffcc00;
    font-size: 24px;
    margin: 0 0 2px 0;
    border-bottom: 1px dashed #44446a;
    text-shadow: 1px 1px 0 #000;
}
.content h2 .blink { color: #ff3864; }
.subhead { color: #66ff99; font-size: 11px; margin: 0 0 12px 0; }

.content h4 {
    color: #66ccff;
    margin: 14px 0 4px 0;
    border-left: 4px solid #ff3864;
    padding-left: 6px;
    font-size: 14px;
}

hr.fancy {
    border: 0;
    height: 4px;
    background: repeating-linear-gradient(90deg, #ff3864 0 8px, #ffcc00 8px 16px, #39ff14 16px 24px, #66ccff 24px 32px);
    margin: 14px 0;
}

/* ----------------------- update log -------------------------- */
.newsitem { margin: 0 0 10px 0; }
.newsdate {
    color: #ff3864;
    font-family: "Courier New", monospace;
    font-size: 11px;
    font-weight: bold;
}

/* ----------------------- hit counter ------------------------- */
.counter {
    font-family: "Courier New", monospace;
    background: #000;
    color: #00ff00;
    border: 2px inset #5a5a80;
    padding: 2px 5px;
    letter-spacing: 3px;
    font-size: 16px;
    display: inline-block;
}

/* ----------------------- 88x31 buttons ----------------------- */
.btn88 {
    display: inline-block;
    width: 88px;
    height: 31px;
    line-height: 11px;
    margin: 2px;
    border: 1px solid #fff;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 9px;
    text-align: center;
    color: #fff;
    text-decoration: none !important;
    overflow: hidden;
    vertical-align: middle;
    box-sizing: border-box;
    padding-top: 4px;
}
.btn88 b { font-size: 11px; }
.btn88:hover { background: #ffff66 !important; color: #000 !important; }

/* a tiny palette of fake-badge gradients */
.b-blue  { background: linear-gradient(135deg, #0033cc, #000); }
.b-red   { background: linear-gradient(135deg, #cc0000, #330000); }
.b-green { background: linear-gradient(135deg, #006600, #000); }
.b-pink  { background: linear-gradient(135deg, #ff3399, #330022); }
.b-cyan  { background: linear-gradient(135deg, #008b8b, #002222); color:#000; }
.b-gold  { background: linear-gradient(135deg, #ffcc00, #996600); color:#000; }
.b-grey  { background: linear-gradient(135deg, #888, #222); }

/* ----------------------- under construction ------------------ */
.construction {
    background: repeating-linear-gradient(45deg, #ffcc00 0 14px, #000 14px 28px);
    color: #000;
    text-align: center;
    font-weight: bold;
    font-family: "Arial Black", Arial, sans-serif;
    padding: 4px 0;
    border: 2px solid #000;
}
.construction span {
    background: #ffcc00;
    padding: 1px 8px;
}

/* ----------------------- guestbook --------------------------- */
.gbentry {
    border: 1px solid #33335a;
    background: #0a0a16;
    padding: 6px 8px;
    margin: 0 0 8px 0;
}
.gbmeta { color: #66ff99; font-size: 11px; }
.gbmeta b { color: #ffcc00; }
.gbtext { margin: 4px 0 0 0; }

input.retro, textarea.retro {
    background: #000;
    color: #00ff00;
    border: 2px inset #5a5a80;
    font-family: "Courier New", monospace;
    font-size: 12px;
    padding: 3px;
}
.submit {
    background: linear-gradient(180deg, #d0d0e0, #9a9ab8);
    border: 2px outset #cfcfe8;
    color: #000;
    font-weight: bold;
    padding: 3px 12px;
    cursor: pointer;
}
.submit:active { border-style: inset; }

/* ----------------------- now playing ------------------------- */
.nowplaying {
    font-family: "Courier New", monospace;
    font-size: 11px;
    color: #00ff00;
    background: #000;
    border: 2px inset #5a5a80;
    padding: 4px 6px;
}

/* ----------------------- webring ----------------------------- */
.webring {
    text-align: center;
    border: 2px groove #5a5a80;
    background: #0e0e1c;
    padding: 8px;
    font-size: 11px;
}
.webring a { font-weight: bold; }

/* ----------------------- footer ------------------------------ */
.footer {
    background: #000;
    border-top: 2px ridge #5a5a80;
    text-align: center;
    padding: 10px 8px;
    font-size: 11px;
    color: #888;
}
.footer .badges { margin: 6px 0; }

.small { font-size: 11px; color: #9a9ab0; }
.green { color: #39ff14; }
.amber { color: #ffcc00; }
.pink  { color: #ff3864; }
ul.disc { padding-left: 20px; }
ul.disc li { margin: 3px 0; }

/* a "new!" gif, hand-rolled */
.new {
    display: inline-block;
    font-family: "Comic Sans MS", cursive;
    font-size: 9px;
    font-weight: bold;
    color: #fff;
    background: #ff0000;
    padding: 0 3px;
    border-radius: 2px;
    animation: newblink 1s steps(2, jump-none) infinite;
    vertical-align: super;
}
@keyframes newblink { 50% { opacity: 0; } }

.blink { animation: newblink 1.1s steps(2, jump-none) infinite; }

/* online status dot */
.status-on  { color: #39ff14; }
.status-off { color: #ff3864; }