/* ==========================================================
   Enchantment of the Seas 2027 - MASTER STYLESHEET
   Created by Aaron Brown.  Please do not steal my HTML.
   Best viewed at 800x600 or higher.  Speakers ON.
   ========================================================== */

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

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

/* ---- Per-frame body backgrounds ---- */
body.contentbody {
    background-image: url('assets/images/bg_stars.png');
    background-color: #00002a;
    color: #ffffff;
    padding: 10px;
}
body.topbody {
    background: #001a66;
    background: linear-gradient(#003bb3, #001133);
    overflow: hidden;
    text-align: center;
}
body.navbody {
    background: #101820;
    background: linear-gradient(#26313b, #0a0f14);
    color: #ffff66;
    text-align: center;
    padding: 6px 4px;
}
body.plainbody {
    background-image: url('assets/images/bg_stars.png');
    background-color: #00002a;
    color: #ffffff;
    text-align: center;
    padding: 0;
}

/* ---- Links, everywhere ---- */
a         { color: #ffee00; }
a:visited { color: #ffd0ff; }
a:hover   { color: #ffffff; background: #0000aa; }
.panel a         { color: #0000cc; }
.panel a:visited { color: #7a00b3; }
.panel a:hover   { color: #ffffff; background: #0000cc; }

/* ---- Beveled silver panels (the "embossed" look) ---- */
.panel {
    background: #d4d0c8;
    background: linear-gradient(#f2f0ec, #cfc9be);
    color: #000000;
    border: 3px outset #ffffff;
    border-right-color: #808080;
    border-bottom-color: #808080;
    padding: 14px 18px;
    margin: 0 auto 16px auto;
    max-width: 720px;
    box-shadow: 4px 4px 0 #000033;
}
.panel h2, .panel h3 { color: #000066; }

.panel-blue {
    background: #cfe4ff;
    background: linear-gradient(#eaf4ff, #b9d6ff);
    border-color: #ffffff #6a8fbf #6a8fbf #ffffff;
}

/* ---- Big page titles ---- */
h1.pagetitle {
    font-family: Impact, "Arial Black", sans-serif;
    font-size: 34px;
    letter-spacing: 1px;
    color: #ffee33;
    text-align: center;
    text-shadow: 2px 2px 0 #cc0000, 4px 4px 0 #000000;
    margin: 6px 0 12px 0;
}
h2.section {
    font-family: Impact, "Arial Black", sans-serif;
    color: #00ffff;
    text-shadow: 2px 2px 0 #000000;
    text-align: center;
    letter-spacing: 1px;
}

/* ---- The famous BLUE HORIZONTAL DIVIDER ---- */
.bluebar {
    height: 10px;
    margin: 8px 0;
    background: linear-gradient(#bfe0ff, #0033cc, #001133);
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #000033;
}

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

/* ---- Rainbow-ish glowing "NEW!" text ---- */
.hot {
    color: #ff2200;
    font-weight: bold;
    font-family: "Comic Sans MS", cursive, sans-serif;
    text-shadow: 1px 1px 0 #ffff00;
}

/* ---- Marquee bar ---- */
.marqueebar {
    background: #000000;
    color: #00ff00;
    font-family: "Courier New", monospace;
    font-weight: bold;
    border-top: 2px solid #00aa00;
    border-bottom: 2px solid #004400;
    padding: 3px 0;
}

/* ==========================================================
   TOP FRAME
   ========================================================== */
.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: #ffee33;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 #aa0000, 4px 4px 6px #000000;
    line-height: 1.05;
}
.topsub {
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 14px;
    color: #aefcff;
    text-shadow: 1px 1px 0 #000044;
}
.torch { vertical-align: middle; }

/* ==========================================================
   LEFT NAV FRAME
   ========================================================== */
.navtitle {
    font-family: Impact, sans-serif;
    color: #ffcc00;
    font-size: 15px;
    text-shadow: 1px 1px 0 #000000;
    margin: 2px 0 8px 0;
}
a.navbtn {
    display: block;
    width: 150px;
    margin: 5px auto;
    padding: 6px 4px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #001b4d !important;
    background: #c9d6e5;
    background: linear-gradient(#f0f5fb, #9fb6d4);
    border: 2px outset #ffffff;
    border-right-color: #4a5a72;
    border-bottom-color: #4a5a72;
}
a.navbtn:hover {
    color: #ffffff !important;
    background: #2a5db0;
    background: linear-gradient(#3f7de0, #163e86);
    border-style: inset;
}
.navmini {
    color: #9fe0ff;
    font-size: 11px;
    font-family: Arial, sans-serif;
    margin-top: 8px;
    line-height: 1.5;
}
.navmini b { color: #ffff66; }

/* ==========================================================
   ODOMETER VISITOR COUNTER
   ========================================================== */
.odometer {
    display: inline-block;
    padding: 3px;
    background: #222;
    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: #00ff66;
    background: #000000;
    background: linear-gradient(#003300, #000000, #002200);
    border: 1px solid #00aa44;
    text-shadow: 0 0 4px #00ff66;
}

/* ==========================================================
   GUESTBOOK POSTS
   ========================================================== */
.board { width: 100%; border-collapse: collapse; }
.board td { vertical-align: top; }
.postbox {
    border: 2px ridge #99aabb;
    background: #ffffff;
    color: #000000;
    margin: 8px 0;
    padding: 0;
}
.postbox .who {
    background: #000088;
    background: linear-gradient(#0033cc, #000066);
    color: #ffff66;
    font-family: Arial, sans-serif;
    font-weight: bold;
    padding: 4px 8px;
    font-size: 13px;
}
.postbox .who .when { float: right; color: #aecbff; font-weight: normal; font-size: 11px; }
.postbox .body {
    padding: 8px 10px;
    font-family: "Comic Sans MS", cursive, serif;
    font-size: 14px;
    color: #002200;
}
form.retro label { font-family: Arial, sans-serif; font-weight: bold; color: #000066; }
form.retro input[type=text],
form.retro textarea {
    font-family: "Courier New", monospace;
    font-size: 14px;
    border: 2px inset #cccccc;
    background: #ffffee;
    padding: 4px;
}
form.retro input.btn {
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: #000066;
    background: linear-gradient(#f0f5fb, #9fb6d4);
    border: 2px outset #ffffff;
    padding: 4px 16px;
    cursor: pointer;
}
form.retro input.btn:hover { border-style: inset; color:#ffffff; background:linear-gradient(#3f7de0,#163e86); }

/* ==========================================================
   ATTENDEES
   ========================================================== */
.crewgrid { text-align: center; }
.crewcard {
    display: inline-block;
    width: 190px;
    margin: 10px;
    padding: 10px;
    vertical-align: top;
    background: linear-gradient(#f2f0ec, #cfc9be);
    border: 3px outset #ffffff;
    border-right-color: #808080;
    border-bottom-color: #808080;
    box-shadow: 3px 3px 0 #000044;
}
.crewcard img.face {
    width: 150px; height: 165px; object-fit: cover;
    border: 3px ridge #99aabb; background:#fff;
}
.crewcard .cname {
    font-family: Impact, sans-serif;
    font-size: 18px; color: #000066; margin: 6px 0 2px 0;
}
.crewcard .crole {
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 12px; color: #660000;
}

/* ---- Music list (links) ---- */
.musiclist { list-style: none; padding: 0; max-width: 520px; margin: 0 auto; }
.musiclist li {
    background: #ffffee; color: #000; margin: 5px 0; padding: 6px 10px;
    border: 2px ridge #ccbb88; font-family: Arial, sans-serif; text-align: left;
}
.musiclist li a { color: #0000cc; font-weight: bold; }

/* ---- Music players (jukebox) ---- */
.jukebox { list-style: none; padding: 0; max-width: 600px; margin: 0 auto; }
.jukebox li {
    background: #ffffee; color:#000; margin: 8px 0; padding: 8px 10px;
    border: 2px ridge #ccbb88; text-align: left;
}
.jukebox .song { font-family: Arial, sans-serif; font-weight: bold; font-size: 14px; color:#000066; }
.jukebox .artist { font-family: Arial, sans-serif; font-size: 12px; color:#444; }
.jukebox audio { width: 100%; margin-top: 6px; }
.jukebox .dl { font-family: Arial, sans-serif; font-size: 11px; }
.jukebox .dl a { color:#0000cc; }

/* ==========================================================
   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: #cfe4ff; }
.roomlist .u { font-weight: bold; color: #ffff66; }
.chatwin {
    height: 340px; overflow-y: scroll;
    border: 3px ridge #99aabb; 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: #000066; }
.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; color: #ffff66; }
.chatform input[type=text] {
    font-family: "Courier New", monospace; font-size: 14px;
    border: 2px inset #cccccc; background: #ffffee; 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: #000066;
    background: linear-gradient(#f0f5fb, #9fb6d4); border: 2px outset #ffffff;
    padding: 4px 16px; cursor: pointer; vertical-align: middle;
}
.chatform input.send:hover { border-style: inset; color:#fff; background:linear-gradient(#3f7de0,#163e86); }

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