/* ==================================================================
   Retro Software Archive — stylesheet
   Deliberately late-90s / early-2000s. Float-based layout, system
   fonts, beveled borders. Safe on Firefox 3 (no flexbox/grid).
   ================================================================== */

body {
    background: #6b7f99;              /* classic desktop slate-blue */
    color: #000000;
    font-family: Verdana, Geneva, Arial, sans-serif;
    font-size: 12px;
    margin: 0;
    padding: 6px;
}

a        { color: #0a3b7a; text-decoration: underline; }
a:hover  { color: #cc3300; }
a:visited{ color: #5a2a7a; }

/* ---------------- Masthead ---------------- */
.masthead {
    background: #1e3a5f;
    border: 2px solid #0d1f33;
    border-top-color: #4a6a90;
    border-left-color: #4a6a90;
}
.masthead-cell { padding: 10px 14px; }
.masthead-link { text-decoration: none; }
.masthead-title {
    font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
    font-size: 26px;
    font-weight: bold;
    color: #ffcc33;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 #000000;
}
.masthead-tagline {
    color: #b8cce0;
    font-size: 11px;
    font-style: italic;
    margin-left: 12px;
}

/* ---------------- Top link row ---------------- */
.toplinks {
    background: #d4d0c8;              /* Win9x button grey */
    border: 2px solid #ffffff;
    border-right-color: #808080;
    border-bottom-color: #808080;
    padding: 4px 10px;
    margin: 3px 0;
    font-size: 11px;
    font-weight: bold;
}
.toplinks a { color: #0a3b7a; text-decoration: none; }
.toplinks a:hover { color: #cc3300; text-decoration: underline; }

/* ---------------- Body layout (nav + content) ---------------- */
.bodylayout { margin-top: 3px; }
.leftnav-cell {
    width: 150px;
    padding-right: 6px;
    vertical-align: top;
}
.content-cell {
    background: #eeeeee;
    border: 2px solid #ffffff;
    border-right-color: #808080;
    border-bottom-color: #808080;
    padding: 10px 18px 10px 10px;
    vertical-align: top;
    overflow: hidden;
}
/* ---------------- Left nav box ---------------- */
.navbox {
    background: #d4d0c8;
    border: 2px solid #ffffff;
    border-right-color: #808080;
    border-bottom-color: #808080;
    margin-bottom: 6px;
}
.navbox-title {
    background: #1e3a5f;
    color: #ffcc33;
    font-weight: bold;
    font-size: 11px;
    padding: 3px 6px;
    letter-spacing: 1px;
}
.navlist {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}
.navlist li {
    padding: 2px 8px;
    border-bottom: 1px dotted #a0a0a0;
}
.navlist li a { text-decoration: none; font-size: 11px; }
.navlist li a:hover { text-decoration: underline; }

/* ---------------- Category / popular tables (home) ---------------- */
/* Each block floats left and wraps as the window allows. */
.catblock {
    display: inline-block;
    vertical-align: top;
    width: 220px;
    margin: 0 8px 8px 0;
    background: #ffffff;
    border: 2px solid #ffffff;
    border-right-color: #808080;
    border-bottom-color: #808080;
}
.catblock-title {
    background: #4a6a90;
    color: #ffffff;
    font-weight: bold;
    font-size: 11px;
    padding: 3px 6px;
    letter-spacing: 1px;
}
.catblock-title.popular {
    background: #8a5a1a;              /* set the Most Popular block apart */
    color: #ffe0a0;
}
.catlist {
    list-style: none;
    margin: 0;
    padding: 3px 0;
}
.catlist li {
    padding: 1px 6px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
}
.catlist li a { text-decoration: none; }
.catlist li a:hover { text-decoration: underline; }
.catlist .icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 4px;
    border: 0;
}
.catlist .noicon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: middle;
}
.catlist .empty { color: #888888; font-style: italic; padding: 4px 6px; }

/* clearfix for the floated blocks */
.clearer { clear: both; height: 0; overflow: hidden; font-size: 0; }

/* ---------------- Program detail page ---------------- */
.prog-title {
    font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #1e3a5f;
    margin: 0 0 2px 0;
}
.prog-cat { font-size: 11px; margin-bottom: 10px; }
.prog-section-title {
    font-weight: bold;
    font-size: 12px;
    color: #1e3a5f;
    border-bottom: 1px solid #4a6a90;
    margin: 12px 0 5px 0;
    padding-bottom: 1px;
}
.prog-desc { font-size: 12px; line-height: 1.5; }
.prog-downloads { list-style: none; margin: 0; padding: 0; }
.prog-downloads li {
    padding: 4px 0;
    border-bottom: 1px dotted #b0b0b0;
}
.dl-button {
    display: inline-block;
    background: #d4d0c8;
    border: 2px solid #ffffff;
    border-right-color: #808080;
    border-bottom-color: #808080;
    padding: 2px 10px;
    font-weight: bold;
    font-size: 11px;
    text-decoration: none;
    color: #0a3b7a;
}
.dl-button:hover { color: #cc3300; }
.shots img {
    max-width: 200px;
    max-height: 200px;
    border: 1px solid #808080;
    margin: 4px 8px 4px 0;
    background: #ffffff;
    padding: 2px;
}

/* ---------------- Guestbook ---------------- */
#guestbook {
    clear: both;
    margin-top: 14px;
    background: #ffffff;
    border: 2px solid #ffffff;
    border-right-color: #808080;
    border-bottom-color: #808080;
    padding: 8px;
}
.gb-title {
    font-weight: bold;
    font-size: 12px;
    color: #1e3a5f;
    border-bottom: 1px solid #4a6a90;
    margin-bottom: 6px;
    padding-bottom: 2px;
}
.gb-entry {
    font-size: 11px;
    padding: 2px 0;
    border-bottom: 1px dotted #cccccc;
}
.gb-time { color: #777777; font-size: 10px; }
.gb-form { margin-top: 8px; padding-top: 6px; border-top: 1px solid #a0a0a0; }
.gb-form input[type="text"] {
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    padding: 2px;
    border: 1px solid #808080;
}
.gb-note {
    background: #fff4d0;
    border: 1px solid #d0b060;
    padding: 5px 8px;
    font-size: 11px;
    margin-top: 8px;
}
.gb-msg-ok  { color: #106010; font-weight: bold; font-size: 11px; }
.gb-msg-err { color: #a01010; font-weight: bold; font-size: 11px; }
.gb-rawlink { font-size: 10px; margin-top: 6px; }

/* ---------------- Footer ---------------- */
.sitefooter {
    clear: both;
    background: #1e3a5f;
    color: #b8cce0;
    text-align: center;
    font-size: 10px;
    padding: 5px;
    margin-top: 6px;
    border: 2px solid #0d1f33;
    border-top-color: #4a6a90;
    border-left-color: #4a6a90;
}
.sitefooter a { color: #ffcc33; }

/* ---------------- Home intro box (blog) ---------------- */
.intro-box {
    clear: both;
    width: 100%;
    background: #ffffff;
    border: 2px solid #ffffff;
    border-right-color: #808080;
    border-bottom-color: #808080;
    margin-bottom: 8px;
    margin-right: 4px;
    padding: 8px 10px;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 1.5;
}
.intro-box .intro-body { margin-bottom: 6px; }
.intro-box .intro-more { text-align: right; }
.intro-error {
    background: #fff4d0;
    border: 1px solid #d0b060;
    color: #a01010;
    font-weight: bold;
}

/* ---------------- Blog index (stacked full-width panels) ---------------- */
.blogpost {
    width: 100%;
    background: #ffffff;
    border: 2px solid #ffffff;
    border-right-color: #808080;
    border-bottom-color: #808080;
    margin-bottom: 10px;
    box-sizing: border-box;
}
.blogpost-head {
    background: #4a6a90;
    color: #ffffff;
    padding: 4px 8px;
}
.blogpost-title { font-weight: bold; font-size: 13px; letter-spacing: 1px; }
.blogpost-date { font-size: 10px; color: #cfe0f0; margin-left: 8px; }
.blogpost-pin {
    float: right;
    font-size: 10px;
    background: #8a5a1a;
    color: #ffe0a0;
    padding: 0 6px;
    margin-top: 1px;
}
.blogpost-body { padding: 8px 10px; font-size: 12px; line-height: 1.5; }
.blogpost-body img { max-width: 100%; height: auto; }

/* ---------------- 404 ---------------- */
.notfound {
    font-size: 14px;
    padding: 20px;
    text-align: center;
}
.notfound h2 { color: #a01010; }

/* ---------------- Admin (modern browser) ---------------- */
.admin-wrap { max-width: 900px; }
.admin-h1 { font-size: 18px; color: #1e3a5f; }
.admin-nav { margin: 8px 0; padding: 6px; background: #d4d0c8; border: 1px solid #808080; }
.admin-nav a { margin-right: 10px; font-weight: bold; }
.admin-box {
    background: #ffffff; border: 1px solid #808080;
    padding: 12px; margin-bottom: 14px;
}
.admin-box h2 { font-size: 14px; color: #1e3a5f; margin-top: 0; }
.admin-box label { display: block; margin: 8px 0 2px; font-weight: bold; font-size: 11px; }
.admin-box input[type="text"], .admin-box textarea, .admin-box select {
    width: 100%; font-family: Verdana, Arial, sans-serif; font-size: 12px;
    padding: 3px; border: 1px solid #808080; box-sizing: border-box;
}
.admin-box textarea { height: 90px; }
.admin-box .row2 input { width: 48%; }
.btn {
    background: #4a6a90; color: #fff; border: 1px solid #1e3a5f;
    padding: 4px 12px; font-weight: bold; cursor: pointer; font-size: 12px;
}
.btn-danger { background: #a01010; border-color: #600; }
.msg-ok  { background: #d8f0d8; border: 1px solid #60a060; padding: 6px; margin: 6px 0; }
.msg-err { background: #f0d8d8; border: 1px solid #a06060; padding: 6px; margin: 6px 0; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.admin-table th, .admin-table td { border: 1px solid #cccccc; padding: 3px 6px; text-align: left; }
.admin-table th { background: #e0e0e0; }
.env-ok  { color: #106010; font-weight: bold; }
.env-bad { color: #a01010; font-weight: bold; }
.dlrow { margin-bottom: 4px; }