/* ==========================================================
   Enchantment of the Seas 2028 - MASTER STYLESHEET
   CLASSIC EDITION - black text, white pages, the way the web
   was meant to look.  Created by Aaron Brown.
   Please do not steal my HTML.  Best viewed at 800x600.
   ========================================================== */

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

body {
    font-family: "Times New Roman", Times, serif;
    color: #000000;
    background-color: #ffffff;
}

/* ---- Per-frame body backgrounds ---- */
body.contentbody {
    background: #ffffff;
    color: #000000;
    padding: 12px 16px;
}
body.topbody {
    background: #000000;
    color: #ffffff;
    overflow: hidden;
    text-align: center;
}
body.navbody {
    background: #c0c0c0;
    color: #000000;
    text-align: center;
    padding: 8px 4px;
}
body.plainbody {
    background: #ffffff;
    color: #000000;
    text-align: center;
    padding: 0;
}

/* ---- Links, everywhere: the classic blue/purple ---- */
a         { color: #0000ee; }
a:visited { color: #551a8b; }
a:hover   { color: #0000ee; background: #ffff99; }

/* ---- Beveled panels (classic Win95 boxes) ---- */
.panel {
    background: #ffffff;
    color: #000000;
    border: 3px outset #dddddd;
    border-right-color: #808080;
    border-bottom-color: #808080;
    padding: 14px 18px;
    margin: 0 auto 16px auto;
    max-width: 720px;
}
.panel h2, .panel h3 { color: #000000; }

/* the "highlight" panel is just a light-gray box */
.panel-blue {
    background: #eeeeee;
    border: 3px ridge #bbbbbb;
}

/* ---- Big page titles ---- */
h1.pagetitle {
    font-family: Impact, "Arial Black", sans-serif;
    font-size: 34px;
    letter-spacing: 1px;
    color: #000000;
    text-align: center;
    margin: 6px 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 3px double #000000;
}
h2.section {
    font-family: Impact, "Arial Black", sans-serif;
    color: #000000;
    text-align: center;
    letter-spacing: 1px;
}

/* ---- The famous horizontal divider (now a bold black bar) ---- */
.bluebar {
    height: 6px;
    margin: 10px 0;
    background: #000000;
    border-top: 2px solid #888888;
    border-bottom: 2px solid #888888;
}

/* ---- Blinking text (real <blink> is dead, so we fake it) ---- */
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- Emphasis text ---- */
.hot {
    color: #000000;
    font-weight: bold;
}

/* ---- Marquee bar: black screen, white type ---- */
.marqueebar {
    background: #000000;
    color: #ffffff;
    font-family: "Courier New", monospace;
    font-weight: bold;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    padding: 3px 0;
}

/* ==========================================================
   TOP FRAME  (black masthead, white title, lit torches)
   ========================================================== */
.topwrap { display: table; width: 100%; height: 100%; }
.topcell { display: table-cell; vertical-align: middle; }
.toptitle {
    font-family: Impact, "Arial Black", sans-serif;
    font-size: 30px;
    color: #ffffff;
    letter-spacing: 2px;
    line-height: 1.05;
}
.topsub {
    font-family: "Courier New", monospace;
    font-size: 13px;
    color: #cccccc;
    letter-spacing: 1px;
}
.torch { vertical-align: middle; }

/* ==========================================================
   LEFT NAV FRAME  (grey panel, black Win95 buttons)
   ========================================================== */
.navtitle {
    font-family: Impact, sans-serif;
    color: #000000;
    font-size: 15px;
    letter-spacing: 1px;
    margin: 2px 0 10px 0;
}
a.navbtn {
    display: block;
    width: 150px;
    margin: 6px auto;
    padding: 6px 4px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #000000 !important;
    background: #e4e4e4;
    border: 2px outset #ffffff;
    border-right-color: #808080;
    border-bottom-color: #808080;
}
a.navbtn:hover {
    color: #000000 !important;
    background: #ffffff;
    border-style: inset;
}
.navmini {
    color: #000000;
    font-size: 11px;
    font-family: Arial, sans-serif;
    margin-top: 10px;
    line-height: 1.5;
}
.navmini b { color: #000000; }

/* ==========================================================
   ODOMETER VISITOR COUNTER  (the classic green-on-black look)
   ========================================================== */
.odometer {
    display: inline-block;
    padding: 3px;
    background: #000000;
    border: 2px inset #888;
}
.odo-digit {
    display: inline-block;
    width: 16px;
    padding: 2px 0;
    margin: 0 1px;
    font-family: "Courier New", monospace;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: #00ff00;
    background: #000000;
    border: 1px solid #333333;
}

/* ==========================================================
   MESSAGE BOARD + GUESTBOOK
   ========================================================== */
.board { width: 100%; border-collapse: collapse; }
.board td { vertical-align: top; }
.postbox {
    border: 2px solid #000000;
    background: #ffffff;
    color: #000000;
    margin: 8px 0;
    padding: 0;
}
.postbox .who {
    background: #000000;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-weight: bold;
    padding: 4px 8px;
    font-size: 13px;
}
.postbox .who .when { float: right; color: #cccccc; font-weight: normal; font-size: 11px; }
.postbox .body {
    padding: 8px 10px;
    font-family: "Times New Roman", Times, serif;
    font-size: 15px;
    color: #000000;
}
form.retro label { font-family: Arial, sans-serif; font-weight: bold; color: #000000; }
form.retro input[type=text],
form.retro textarea {
    font-family: "Courier New", monospace;
    font-size: 14px;
    border: 2px inset #cccccc;
    background: #ffffff;
    padding: 4px;
}
form.retro input.btn {
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: #000000;
    background: #e4e4e4;
    border: 2px outset #ffffff;
    border-right-color: #808080;
    border-bottom-color: #808080;
    padding: 4px 16px;
    cursor: pointer;
}
form.retro input.btn:hover { border-style: inset; background:#ffffff; }

/* ==========================================================
   ATTENDEES
   ========================================================== */
.crewgrid { text-align: center; }
.crewcard {
    display: inline-block;
    width: 190px;
    margin: 10px;
    padding: 10px;
    vertical-align: top;
    background: #ffffff;
    border: 3px outset #dddddd;
    border-right-color: #808080;
    border-bottom-color: #808080;
}
.crewcard img.face {
    width: 150px; height: 165px; object-fit: cover;
    border: 3px ridge #999999; background:#fff;
}
.crewcard .cname {
    font-family: Impact, sans-serif;
    font-size: 18px; color: #000000; margin: 6px 0 2px 0;
}
.crewcard .crole {
    font-family: Arial, sans-serif;
    font-size: 12px; color: #000000;
}

/* ---- Music list ---- */
.musiclist { list-style: none; padding: 0; max-width: 560px; margin: 0 auto; }
.musiclist li {
    background: #ffffff; color: #000; margin: 6px 0; padding: 8px 10px;
    border: 2px solid #000000; font-family: Arial, sans-serif; text-align: left;
}
.musiclist li a { color: #0000ee; font-weight: bold; }

/* ---- Music player rows ---- */
.jukebox { list-style: none; padding: 0; max-width: 600px; margin: 0 auto; }
.jukebox li {
    background: #ffffff; color:#000; margin: 8px 0; padding: 8px 10px;
    border: 2px solid #000000; text-align: left;
}
.jukebox .song { font-family: Arial, sans-serif; font-weight: bold; font-size: 14px; }
.jukebox .artist { font-family: Arial, sans-serif; font-size: 12px; color:#333; }
.jukebox audio { width: 100%; margin-top: 6px; }
.jukebox .dl { font-family: Arial, sans-serif; font-size: 11px; }

/* ---- Utility ---- */
.center { text-align: center; }
.small  { font-size: 11px; }
.footwm { color:#555555; font-family: Arial, sans-serif; font-size: 11px; text-align:center; margin-top:14px; }

/* ==========================================================
   CHAT ROOM
   ========================================================== */
.chatwrap { max-width: 620px; margin: 0 auto; }
.roomlist {
    font-family: Arial, sans-serif; font-size: 12px;
    text-align: center; margin: 8px 0; color: #000;
}
.roomlist .u { font-weight: bold; }
.chatwin {
    height: 340px; overflow-y: scroll;
    border: 2px inset #808080; background: #ffffff;
    padding: 8px; text-align: left;
    font-family: Verdana, Arial, sans-serif; font-size: 13px; color: #000;
}
.chatline { margin: 3px 0; line-height: 1.4; }
.chatline .ct { color: #777; font-size: 11px; font-family: "Courier New", monospace; }
.chatline b { color: #000000; }
.chatempty { color: #555; font-style: italic; text-align: center; margin-top: 24px; }
.chatform { margin-top: 10px; text-align: center; }
.chatform label { font-family: Arial, sans-serif; font-weight: bold; }
.chatform input[type=text] {
    font-family: "Courier New", monospace; font-size: 14px;
    border: 2px inset #cccccc; background: #ffffff; padding: 4px;
    vertical-align: middle;
}
.chatform .chatname { width: 120px; }
.chatform .chatmsg  { width: 300px; max-width: 60%; }
.chatform input.send {
    font-family: Arial, sans-serif; font-weight: bold; color: #000;
    background: #e4e4e4; border: 2px outset #ffffff;
    border-right-color: #808080; border-bottom-color: #808080;
    padding: 4px 16px; cursor: pointer; vertical-align: middle;
}
.chatform input.send:hover { border-style: inset; background: #fff; }