/* ==========================================================================
   Early Web Links — style.css
   If you're reading this source, you're our kind of people.
   ========================================================================== */

/* --- Minimal reset --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- Body: space is the place --- */
body {
    font-family: "Times New Roman", Times, serif;
    font-size: 15px;
    line-height: 1.5;
    color: #000000;
    background: #000000 url("/static/bg/starfield_tumblr.gif") repeat;
    background-size: 400px;
    max-width: 780px;
    margin: 0 auto;
    padding: 0;
}

/* --- Links: actual Netscape defaults --- */
a { color: #0000EE; }
a:visited { color: #551A8B; }
a:hover { color: #FF0000; }
a:active { color: #FF0000; }


/* ==========================================================================
   HEADER — deep space command center
   ========================================================================== */
.site-header {
    background: #0C0040;
    color: #FFFFFF;
    text-align: center;
    padding: 16px 10px 12px;
    border-top: 2px solid #6060FF;
    border-left: 2px solid #6060FF;
    border-bottom: 2px solid #000020;
    border-right: 2px solid #000020;
}

.site-header h1 {
    font-family: "Comic Sans MS", "Arial Black", Gadget, sans-serif;
    font-size: 29px;
    font-weight: bold;
    color: #FFFF00;
    letter-spacing: 2px;
    margin-bottom: 2px;
    text-shadow: 2px 2px 0px #FF6600, 0 0 10px #FFFF00;
}

.site-header h1 a {
    color: #FFFF00;
    text-decoration: none;
}

.site-header h1 a:visited {
    color: #FFFF00;
}

.site-header h1 a:hover {
    color: #00FFFF;
    text-decoration: none;
}

.site-header .tagline {
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    color: #00FFFF;
    font-style: italic;
    letter-spacing: 1px;
}

.under-construction {
    text-align: center;
    padding: 4px 0;
}

.under-construction img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}


/* ==========================================================================
   NAVIGATION — glowing buttons on dark chrome
   ========================================================================== */
.nav-bar {
    background: #1A0A3A;
    border-top: 1px solid #4040A0;
    border-bottom: 2px solid #000020;
    padding: 5px 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    margin-bottom: 0;
}

.nav-bar a {
    flex: 1 1 auto;
    text-align: center;
    padding: 3px 12px;
    background: #2A1A5A;
    border-top: 1px solid #8080CC;
    border-left: 1px solid #8080CC;
    border-bottom: 1px solid #0A0030;
    border-right: 1px solid #0A0030;
    color: #00FFFF;
    text-decoration: none;
    font-weight: bold;
}

.nav-bar a:visited { color: #00FFFF; }

.nav-bar a:hover {
    color: #FFFF00;
    background: #3A2A6A;
}

.nav-bar a:active {
    border-top: 1px solid #0A0030;
    border-left: 1px solid #0A0030;
    border-bottom: 1px solid #8080CC;
    border-right: 1px solid #8080CC;
    padding: 4px 11px 2px 13px;
}


/* ==========================================================================
   MAIN CONTENT — framed window floating in space
   ========================================================================== */
main {
    background: #FFFFFF;
    border-top: 3px solid #8080CC;
    border-left: 3px solid #8080CC;
    border-bottom: 3px solid #1A0A3A;
    border-right: 3px solid #1A0A3A;
    padding: 10px 14px;
    min-height: 300px;
}


/* ==========================================================================
   SEARCH BOX
   ========================================================================== */
.search-box {
    margin: 10px 0;
    text-align: center;
}

.search-box form {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.search-box input[type="text"] {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    padding: 3px 6px;
    width: 280px;
    border: 2px inset #808080;
    background: #FFFFFF;
}

.search-box button,
.btn {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding: 3px 12px;
    background: #2A1A5A;
    border-top: 2px solid #8080CC;
    border-left: 2px solid #8080CC;
    border-bottom: 2px solid #0A0030;
    border-right: 2px solid #0A0030;
    cursor: pointer;
    color: #00FFFF;
    text-decoration: none;
    display: inline-block;
}

.search-box button:active,
.btn:active {
    border-top: 2px solid #0A0030;
    border-left: 2px solid #0A0030;
    border-bottom: 2px solid #8080CC;
    border-right: 2px solid #8080CC;
}

.btn:visited { color: #00FFFF; }


/* ==========================================================================
   MARQUEE — scrolling recent discoveries
   ========================================================================== */
.marquee-bar {
    background: #0C0040;
    color: #FFFF00;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding: 4px 6px;
    border-top: 1px solid #4040A0;
    border-bottom: 1px solid #4040A0;
    margin: 6px 0;
    overflow: hidden;
    white-space: nowrap;
}

.marquee-bar a {
    color: #00FFFF;
}

.marquee-bar a:visited {
    color: #00FFFF;
}


/* ==========================================================================
   FEATURED SITE — table cell with bgcolor, like "Cool Site of the Day"
   ========================================================================== */
.featured-site {
    background: #FFFFF0;
    border: 2px solid #FFCC00;
    padding: 8px 10px;
    margin: 8px 0;
}

.featured-site .featured-label {
    font-family: "Comic Sans MS", Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #FF0000;
    margin-bottom: 4px;
}

.pick-next-row {
    text-align: right;
    margin-top: 4px;
}

.pick-next-btn {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    background: #DDDDDD;
    color: #000080;
    border: 2px outset #EEEEEE;
    padding: 2px 10px;
    cursor: pointer;
}

.pick-next-btn:hover {
    background: #C8C8C8;
}

.pick-next-btn:active {
    border-style: inset;
}

.featured-body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.featured-body .site-thumb {
    flex-shrink: 0;
    display: block;
    line-height: 0;
}

.featured-body .site-thumb img {
    display: block;
    width: 200px;
    height: 150px;
    border: 2px solid #FFCC00;
    background: #0C0040;
    object-fit: cover;
}

.featured-body .site-thumb:hover img {
    border-color: #FFFF00;
}

.featured-body .site-info {
    flex: 1;
    min-width: 0;
}

.featured-site .site-title a {
    font-size: 16px;
    font-weight: bold;
}

.featured-site .site-desc {
    font-size: 14px;
    margin: 4px 0;
}

.featured-site .site-url {
    font-size: 12px;
    color: #006600;
    overflow-wrap: anywhere;
    word-break: break-all;
}

.featured-site .site-meta {
    font-size: 12px;
    color: #666666;
}


/* ==========================================================================
   SITE OF THE WEEK — homepage feature + post pages
   ========================================================================== */
.sotw-feature {
    background: #F0F8FF;
    border: 2px solid #4040A0;
    padding: 8px 10px;
    margin: 8px 0;
}

.sotw-feature .sotw-feature-label {
    font-family: "Comic Sans MS", Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #000080;
    margin-bottom: 4px;
}

.sotw-feature-body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.sotw-feature-body .site-thumb {
    flex-shrink: 0;
    display: block;
    line-height: 0;
}

.sotw-feature-body .site-thumb img {
    display: block;
    width: 200px;
    height: 150px;
    border: 2px solid #4040A0;
    background: #0C0040;
    object-fit: cover;
}

.sotw-feature-body .site-thumb:hover img {
    border-color: #00CCFF;
}

.sotw-feature-body .site-info {
    flex: 1;
    min-width: 0;
}

.sotw-feature .site-title a {
    font-size: 16px;
    font-weight: bold;
}

.sotw-feature .site-desc {
    font-size: 14px;
    margin: 4px 0;
}

.sotw-feature .site-meta {
    font-size: 12px;
    color: #666666;
    margin-top: 4px;
}

/* Archive page */
.sotw-archive-item {
    border-bottom: 1px solid #C0C0C0;
    padding: 10px 6px;
}

.sotw-archive-item:last-child {
    border-bottom: none;
}

.sotw-archive-date {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #808080;
    margin-bottom: 4px;
}

.sotw-archive-body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.sotw-archive-body .site-thumb {
    flex-shrink: 0;
    display: block;
    line-height: 0;
}

.sotw-archive-body .site-thumb img {
    display: block;
    width: 160px;
    height: 120px;
    border: 2px solid #4040A0;
    background: #0C0040;
    object-fit: cover;
}

.sotw-archive-body .site-thumb:hover img {
    border-color: #00CCFF;
}

.sotw-archive-info {
    flex: 1;
    min-width: 0;
}

.sotw-archive-info .site-title a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

.sotw-archive-info .site-desc {
    font-size: 14px;
    margin: 3px 0;
}

.sotw-archive-info .site-url {
    font-size: 12px;
    color: #008000;
    font-family: "Courier New", Courier, monospace;
    overflow-wrap: anywhere;
    word-break: break-all;
}

/* Blog post page */
.sotw-post-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.sotw-post-header h2 {
    margin: 0;
}

.sotw-post-date {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #808080;
}

.sotw-post-site {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #F0F8FF;
    border: 2px solid #4040A0;
    padding: 8px 10px;
    margin: 8px 0;
}

.sotw-post-site .site-thumb img {
    display: block;
    width: 200px;
    height: 150px;
    border: 2px solid #4040A0;
    background: #0C0040;
    object-fit: cover;
}

.sotw-post-site-info {
    flex: 1;
    min-width: 0;
}

.sotw-post-site-info .site-title a {
    font-size: 18px;
    font-weight: bold;
}

.sotw-post-site-info .site-url {
    font-size: 12px;
    color: #008000;
    font-family: "Courier New", Courier, monospace;
    margin-top: 4px;
}

.sotw-post-content {
    font-size: 15px;
    line-height: 1.6;
    margin: 10px 0;
}

.sotw-post-content p {
    margin: 10px 0;
}

.sotw-post-content blockquote {
    border-left: 3px solid #4040A0;
    margin: 10px 0 10px 10px;
    padding: 4px 12px;
    color: #333;
    background: #F8F8FF;
}


/* ==========================================================================
   HORIZONTAL RULES — the default 90s sunken line, beloved by all
   ========================================================================== */
hr {
    border: none;
    border-top: 1px solid #808080;
    border-bottom: 1px solid #FFFFFF;
    margin: 10px 0;
    height: 0;
}

/* Rainbow rule for special sections */
hr.rainbow {
    border: none;
    height: 4px;
    margin: 10px 0;
    background: linear-gradient(to right, #FF00FF, #8000FF, #0040FF, #00FFFF, #00FF80, #FFFF00, #FF8000, #FF00FF);
}


/* ==========================================================================
   CATEGORY TREE — mini tables with dark colored headers
   ========================================================================== */
.category-tree {
    margin: 6px 0 10px;
}

.category-tree > h2,
.discoveries > h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    color: #000080;
    margin-bottom: 4px;
}

.category-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

/* Each category looks like a mini HTML table */
.category-group {
    background: #FFFFFF;
    border: 1px solid #4040A0;
    padding: 0;
    overflow: hidden;
}

/* The header bar — dark colored, white text, like a table header */
.category-group h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    padding: 3px 6px;
    color: #FFFFFF;
    background: #000080;
    border-bottom: 1px solid #000000;
}

/* Cycle through cosmic colors for header bars */
.category-group:nth-child(7n+1) h3 { background: #1A0A60; }
.category-group:nth-child(7n+2) h3 { background: #0A4040; }
.category-group:nth-child(7n+3) h3 { background: #4A0A4A; }
.category-group:nth-child(7n+4) h3 { background: #0A2060; }
.category-group:nth-child(7n+5) h3 { background: #2A0050; }
.category-group:nth-child(7n+6) h3 { background: #003050; }
.category-group:nth-child(7n+7) h3 { background: #200A40; }

.category-group h3 a {
    color: #FFFFFF;
    text-decoration: none;
}

.category-group h3 a:visited {
    color: #FFFFFF;
}

.category-group h3 a:hover {
    text-decoration: underline;
    color: #FFFF00;
}

.category-group .count {
    color: #CCCCCC;
    font-size: 11px;
    font-weight: normal;
}

/* Subcategory list — white background, like the table body */
.category-group ul {
    list-style: none;
    padding: 4px 6px;
    margin: 0;
    font-size: 13px;
    background: #FFFFFF;
}

.category-group ul li {
    margin: 1px 0;
    padding-left: 10px;
    position: relative;
}

/* Small arrow bullet */
.category-group ul li::before {
    content: "\25B8";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 10px;
    color: #808080;
}

.category-group ul a {
    color: #0000EE;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-decoration: none;
}

.category-group ul a:hover {
    text-decoration: underline;
}

.category-group ul .count {
    color: #808080;
    font-size: 11px;
}


/* ==========================================================================
   SITE LISTINGS — thumbnail left, info right
   ========================================================================== */
.discoveries {
    margin: 8px 0;
}

.site-item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    gap: 4px 12px;
    background: #FFFFFF;
    border-bottom: 1px solid #C0C0C0;
    padding: 8px 6px;
    margin: 0;
}

.site-item .site-title {
    grid-column: 2;
    grid-row: 1;
}

.site-item .site-thumb {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
}

.site-item .site-info {
    grid-column: 2;
    grid-row: 2;
}

/* When no thumbnail, span full width */
.site-item:not(:has(.site-thumb)) .site-title,
.site-item:not(:has(.site-thumb)) .site-info {
    grid-column: 1 / -1;
}

.site-item:last-child {
    border-bottom: none;
}

/* Thumbnail — clickable link wrapping the image */
.site-thumb {
    display: block;
    line-height: 0;  /* kill whitespace under img */
}

.site-thumb img {
    display: block;
    width: 160px;
    height: 120px;
    border: 2px solid #4040A0;
    background: #0C0040;
    object-fit: cover;
}

.site-thumb:hover img {
    border-color: #00CCFF;
}

/* Site info — takes remaining space */
.site-info {
    min-width: 0;
}

.site-item .site-title a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #0000EE;
}

.site-item .site-title a:visited {
    color: #551A8B;
}

.site-item .site-url {
    font-size: 12px;
    color: #008000;
    font-family: "Courier New", Courier, monospace;
    overflow-wrap: anywhere;
    word-break: break-all;
}

.site-item .site-desc {
    font-size: 14px;
    margin: 3px 0;
    color: #000000;
}

.site-item .site-meta {
    font-size: 12px;
    color: #808080;
    margin-top: 3px;
}

.site-item .site-meta a {
    color: #0000EE;
    font-size: 12px;
}

/* Type badge — small retro label */
.type-badge {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #FFFFFF;
    background: #4040A0;
    padding: 1px 5px;
    border: 1px outset #8080CC;
    margin-right: 4px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* ==========================================================================
   NEW! BADGE — blinking, the way God intended
   ========================================================================== */
.new-badge {
    display: inline;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #FF0000;
    text-transform: uppercase;
    margin-left: 4px;
    animation: blink90s 1s step-start infinite;
}

@keyframes blink90s {
    0%, 100% { visibility: visible; }
    50% { visibility: hidden; }
}


/* ==========================================================================
   SORT CONTROLS — simple text bar
   ========================================================================== */
.sort-controls {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding: 4px 6px;
    margin: 6px 0;
    background: #F0F0FF;
    border: 1px solid #4040A0;
    color: #000000;
}

.sort-controls a {
    margin: 0 4px;
    color: #0000EE;
}

.sort-controls a.active {
    color: #000000;
    font-weight: bold;
    text-decoration: none;
}


/* ==========================================================================
   PAGINATION — simple numbered links
   ========================================================================== */
.pagination {
    text-align: center;
    margin: 10px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

.pagination a,
.pagination span {
    display: inline;
    padding: 1px 5px;
    margin: 0 1px;
    color: #0000EE;
}

.pagination .current {
    color: #000000;
    font-weight: bold;
    text-decoration: none;
}

.pagination .disabled {
    color: #808080;
}


/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.breadcrumb {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    margin: 6px 0;
    color: #808080;
}

.breadcrumb a {
    color: #0000EE;
}


/* ==========================================================================
   FOOTER — mission control readout
   ========================================================================== */
.site-footer {
    background: #0C0040;
    border-top: 2px solid #4040A0;
    padding: 10px 10px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #9090CC;
}

.site-footer p {
    margin: 3px 0;
}

.site-footer a {
    color: #00CCFF;
    font-size: 12px;
}

.site-footer a:visited {
    color: #00CCFF;
}

/* Hit counter — black box, green digits */
.hit-counter {
    display: inline-block;
    background: #000000;
    color: #00FF00;
    font-family: "Courier New", Courier, monospace;
    font-size: 15px;
    font-weight: bold;
    padding: 2px 8px;
    border: 1px solid #00FF00;
    letter-spacing: 2px;
    margin: 4px 0;
}

.counter-digits {
    vertical-align: middle;
}

/* "Best viewed with any browser" */
.browser-badge {
    font-size: 11px;
    color: #6060A0;
    font-style: italic;
    margin-top: 4px;
}

.footer-badges {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 8px 0;
    flex-wrap: wrap;
}

.footer-badges img {
    display: block;
}

.footer-email {
    margin: 6px 0;
}

.footer-email img {
    display: inline-block;
}

.footer-coffee {
    margin: 6px 0;
}

.footer-coffee img {
    display: inline-block;
}

.footer-links {
    margin-top: 6px;
}

.footer-links a {
    font-size: 11px;
    color: #6060A0;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
    color: #00FFFF;
}


/* ==========================================================================
   GUESTBOOK — plain CGI-output style
   ========================================================================== */
.gb-title {
    text-align: center;
}

.gb-intro {
    text-align: center;
    margin-bottom: 8px;
}

/* Entries container */
.gb-entries {
    margin: 10px 0;
}

/* Each entry is just labeled lines + message, separated by <hr> */
.gb-entry {
    padding: 6px 0;
}

.gb-entry-info {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.4;
}

.gb-entry-info b {
    color: #000080;
}

.gb-entry-message {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-line;
}

/* Admin delete — inline with the Name line */
.gb-delete-form {
    display: inline;
    margin: 0;
    padding: 0;
}

.gb-delete-btn {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background: none;
    border: none;
    color: #CC0000;
    cursor: pointer;
    padding: 0 2px;
}

.gb-delete-btn:hover {
    text-decoration: underline;
}

/* Sign form — table layout, light background */
.gb-sign-box {
    background: #F0F0FF;
    border: 1px solid #808080;
    padding: 10px;
    margin: 10px 0;
}

.gb-sign-table {
    border: none;
    width: 100%;
}

.gb-sign-table td {
    border: none;
    background: none;
    padding: 4px;
    vertical-align: top;
}

.gb-sign-label {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #000080;
    white-space: nowrap;
    width: 120px;
}

.gb-sign-label small {
    font-weight: normal;
    color: #808080;
    font-size: 11px;
}

.gb-input {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    padding: 3px 6px;
    border: 2px inset #808080;
    background: #FFFFFF;
    width: 100%;
}

.gb-input-short {
    width: 200px;
}

.gb-textarea {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    padding: 5px 6px;
    border: 2px inset #808080;
    background: #FFFFFF;
    width: 100%;
    resize: vertical;
}

.gb-spam-cell {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

.gb-spam-cell b {
    color: #000080;
}


/* ==========================================================================
   SUBMIT FORM
   ========================================================================== */
.submit-form {
    margin: 10px 0;
}

.submit-form label {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 4px;
}

.submit-form input[type="url"],
.submit-form input[type="text"] {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    padding: 3px 6px;
    border: 2px inset #808080;
    background: #FFFFFF;
    width: 100%;
    max-width: 400px;
}

.submit-form .form-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}


/* ==========================================================================
   SUCCESS / ERROR BOXES
   ========================================================================== */
.success-box {
    background: #CCFFCC;
    border: 2px solid #009900;
    padding: 6px 10px;
    margin: 10px 0;
    font-size: 14px;
    color: #006600;
}

.error-box {
    background: #FFCCCC;
    border: 2px solid #CC0000;
    padding: 6px 10px;
    margin: 10px 0;
    font-size: 14px;
    color: #990000;
}


/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.empty-state {
    text-align: center;
    padding: 30px 16px;
    color: #808080;
    font-style: italic;
}

.empty-state h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 21px;
    color: #000080;
    margin-bottom: 6px;
    font-style: normal;
}


/* ==========================================================================
   HEADINGS
   ========================================================================== */
h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    color: #000080;
    margin: 10px 0 6px;
}

h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #000080;
    margin: 8px 0 4px;
}


/* ==========================================================================
   LISTS — square bullets like the browser default
   ========================================================================== */
main ul {
    padding-left: 24px;
    list-style: square;
    color: #808080;
}

main ul li {
    margin: 2px 0;
    color: #000000;
}

main ul li::before {
    content: none;
}


/* ==========================================================================
   SUBCATEGORY LIST (in category.html)
   ========================================================================== */
.category-tree h3 {
    font-size: 14px;
}

.category-tree ul {
    list-style: square;
    padding-left: 24px;
    font-size: 14px;
}

.category-tree ul li::before {
    content: none;
}

.category-tree ul a {
    font-family: Arial, Helvetica, sans-serif;
}


/* ==========================================================================
   RESULTS COUNT
   ========================================================================== */
.results-count {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #808080;
    margin-bottom: 6px;
}


/* ==========================================================================
   TABLES
   ========================================================================== */
table {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
    border: 2px solid #000000;
}

table th {
    background: #000080;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    padding: 3px 6px;
    text-align: left;
    border: 1px solid #000000;
}

table td {
    padding: 3px 6px;
    border: 1px solid #808080;
    background: #FFFFFF;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 640px) {
    body {
        overflow-x: hidden;
    }

    .site-header h1 {
        font-size: 23px;
    }

    .search-box input[type="text"] {
        width: 180px;
    }

    .category-columns {
        grid-template-columns: 1fr;
    }

    .nav-bar {
        gap: 3px;
    }

    main {
        padding: 8px 10px;
    }

    /* Stack: title, thumbnail, details */
    .site-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .site-item .site-title {
        text-align: center;
    }

    .site-item .site-thumb {
        align-self: center;
    }

    .site-item .site-url {
        text-align: center;
    }

    .sotw-feature-body {
        flex-direction: column-reverse;
        align-items: center;
    }

    .sotw-archive-body,
    .sotw-post-site {
        flex-direction: column;
        align-items: center;
    }

    .sotw-feature-body .site-info,
    .sotw-archive-info,
    .sotw-post-site-info {
        width: 100%;
    }

    .featured-body {
        flex-direction: column;
        align-items: center;
    }

    .featured-body .site-info {
        width: 100%;
    }

    .featured-site .site-title {
        text-align: center;
    }

    .featured-site .site-url {
        text-align: center;
    }

    /* Guestbook form: stack labels above inputs on mobile */
    .gb-sign-table,
    .gb-sign-table tbody,
    .gb-sign-table tr,
    .gb-sign-table td {
        display: block;
        width: 100%;
    }

    .gb-sign-label {
        width: 100%;
        padding-bottom: 2px;
    }

    .gb-input-short {
        width: 100%;
    }

    .site-thumb img,
    .featured-body .site-thumb img {
        width: 200px;
        height: 150px;
    }
}

@media (max-width: 420px) {
    .site-header h1 {
        font-size: 19px;
    }

    .nav-bar a {
        padding: 2px 6px;
        font-size: 12px;
    }

    .search-box form {
        flex-direction: column;
        gap: 4px;
    }

    .search-box input[type="text"] {
        width: 100%;
    }

    .site-thumb img,
    .featured-body .site-thumb img {
        width: 160px;
        height: 120px;
    }
}

/* ── User Homepages ─────────────────────────────────────────────── */
/* NOTE: These sit inside <main> which has background:#FFF, color:#000 */

.hp-form fieldset {
    border: 2px groove #CCCCCC;
    padding: 12px;
    margin: 12px 0;
}

.hp-form fieldset legend {
    color: #000080;
    font-weight: bold;
    font-size: 15px;
}

.hp-form input[type="text"],
.hp-form input[type="password"],
.hp-form select {
    background: #FFFFFF;
    color: #000000;
    border: 2px inset #CCCCCC;
    padding: 4px 6px;
    font-size: 14px;
}

.hp-form input[type="color"] {
    width: 40px;
    height: 28px;
    border: 2px inset #CCCCCC;
    padding: 0;
    cursor: pointer;
}

.btn {
    background: #DDDDDD;
    color: #000080;
    border: 2px outset #EEEEEE;
    padding: 5px 14px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
}

.btn:hover {
    background: #C8C8C8;
}

.btn:active {
    border-style: inset;
}

.btn-small {
    font-size: 12px;
    padding: 3px 10px;
}

.btn-danger {
    color: #CC0000;
}

.btn-danger:hover {
    background: #FFDDDD;
}

.btn-save {
    background: #336633;
    color: #FFFFFF;
    font-size: 15px;
    padding: 7px 24px;
    border-color: #448844;
}

.btn-save:hover {
    background: #448844;
}

.link-btn {
    background: none;
    border: none;
    color: #0000EE;
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
}

.link-btn:hover {
    color: #FF0000;
}

/* ── Editor Layout ─────────────────────────────────────────────── */

.editor-panel {
    border: 2px groove #CCCCCC;
    padding: 14px;
    margin: 12px 0;
}

.editor-panel legend {
    color: #000080;
    font-weight: bold;
    font-size: 15px;
    padding: 0 4px;
}

.editor-details {
    border: 2px groove #CCCCCC;
    padding: 14px;
    margin: 12px 0;
}

.editor-details summary {
    color: #000080;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    padding: 4px 0;
}

.editor-row {
    margin: 10px 0;
}

.editor-row label {
    display: block;
    margin-bottom: 3px;
    color: #333333;
    font-size: 14px;
    font-weight: bold;
}

.editor-input-wide {
    width: 100%;
    max-width: 400px;
    background: #FFFFFF;
    color: #000000;
    border: 2px inset #CCCCCC;
    padding: 5px 7px;
    font-size: 15px;
}

.editor-select {
    background: #FFFFFF;
    color: #000000;
    border: 2px inset #CCCCCC;
    padding: 4px 6px;
    font-size: 14px;
}

.editor-notice {
    border: 2px solid;
    padding: 10px 14px;
    margin: 10px 0;
    font-size: 14px;
}

.notice-pending {
    background: #FFFFF0;
    border-color: #CC9900;
    color: #886600;
}

.notice-rejected {
    background: #FFF0F0;
    border-color: #CC3333;
    color: #990000;
}

/* ── Template description ── */

.template-desc {
    font-size: 13px;
    color: #666666;
    font-style: italic;
    margin-top: 4px;
    min-height: 18px;
}

/* ── Color customization ── */

.color-section {
    margin: 10px 0;
}

.color-toggle {
    color: #0000EE;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 0;
    text-decoration: underline;
}

.color-toggle:hover {
    color: #FF0000;
}

.color-panel {
    margin-top: 8px;
    padding: 10px;
    background: #F0F0F0;
    border: 1px solid #CCCCCC;
}

.color-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.color-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.color-item label {
    font-size: 13px;
    color: #333333;
    font-weight: bold;
}

.color-item input[type="color"] {
    width: 50px;
    height: 32px;
    border: 2px inset #CCCCCC;
    padding: 0;
    cursor: pointer;
}

/* ── Background image picker ── */

.bg-picker-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.bg-option {
    cursor: pointer;
    border: 2px solid #CCCCCC;
    padding: 3px;
    text-align: center;
    background: #F8F8F8;
}

.bg-option:hover {
    border-color: #666666;
    background: #EEEEEE;
}

.bg-option.selected {
    border-color: #0000CC;
    background: #E0E0FF;
}

.bg-preview {
    width: 64px;
    height: 48px;
    border: 1px solid #999999;
}

.bg-preview-none {
    background: #EEEEEE;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #666666;
}

.bg-option small {
    display: block;
    font-size: 11px;
    color: #555555;
    margin-top: 3px;
}

/* ── Content area (sections + images side by side) ── */

.editor-content-area {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.editor-sections-col {
    flex: 1;
    min-width: 0;
}

.editor-images-col {
    width: 270px;
    flex-shrink: 0;
}

/* ── Section blocks ── */

.section-block {
    background: #F5F5F5;
    border: 1px solid #BBBBBB;
    padding: 10px;
    margin: 10px 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #CCCCCC;
}

.section-number {
    color: #000080;
    font-size: 14px;
    font-weight: bold;
}

.section-controls {
    display: flex;
    gap: 4px;
}

.section-body label {
    display: block;
    font-size: 13px;
    color: #333333;
    font-weight: bold;
    margin: 8px 0 3px 0;
}

.section-heading-input {
    width: 100%;
    max-width: 400px;
    background: #FFFFFF;
    color: #000000;
    border: 2px inset #CCCCCC;
    padding: 4px 6px;
    font-size: 14px;
}

.section-textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-family: "Courier New", monospace;
    font-size: 14px;
    background: #FFFFFF;
    color: #000000;
    border: 2px inset #CCCCCC;
    padding: 6px;
    resize: vertical;
    line-height: 1.5;
}

/* ── HTML Toolbar ── */

.html-toolbar {
    display: flex;
    gap: 2px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.tb-btn {
    background: #E0E0E0;
    color: #000000;
    border: 1px outset #DDDDDD;
    padding: 3px 9px;
    cursor: pointer;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    min-width: 30px;
    text-align: center;
}

.tb-btn:hover {
    background: #D0D0D0;
}

.tb-btn:active {
    border-style: inset;
}

.tb-sep {
    width: 1px;
    background: #CCCCCC;
    margin: 2px 4px;
}

/* ── Starter chooser ── */

.starter-chooser {
    background: #F0F0FF;
    border: 1px solid #9999CC;
    padding: 12px;
    margin-top: 8px;
}

.starter-chooser p {
    margin: 0 0 8px 0;
    font-size: 14px;
}

.starter-grid {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.starter-btn {
    background: #DDDDEE;
    color: #000066;
    border: 2px outset #EEEEFF;
    padding: 7px 14px;
    cursor: pointer;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.starter-btn:hover {
    background: #CCCCDD;
}

.starter-btn:active {
    border-style: inset;
}

/* ── Image panel ── */

.image-help {
    font-size: 13px;
    color: #444444;
    margin: 4px 0 10px 0;
}

.image-gallery {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.image-card {
    background: #F5F5F5;
    border: 1px solid #CCCCCC;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.image-thumb {
    width: 60px;
    height: 45px;
    object-fit: cover;
    border: 1px solid #999999;
}

.image-info {
    flex: 1;
    min-width: 60px;
}

.image-info small {
    display: block;
    font-size: 12px;
    color: #555555;
    word-break: break-all;
}

.image-size {
    color: #888888 !important;
}

.image-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.image-upload-form {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #CCCCCC;
}

.image-upload-form input[type="file"] {
    font-size: 13px;
    margin-bottom: 6px;
}

/* ── Image insert popup ── */

.image-insert-popup {
    background: #FFFFFF;
    border: 2px solid #000080;
    padding: 12px;
    z-index: 1000;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.3);
    min-width: 220px;
}

.image-insert-popup p {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #000000;
}

.size-buttons {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* ── MIDI section ── */

.midi-content {
    padding: 10px 0;
    font-size: 14px;
}

/* ── Save bar ── */

.editor-save-bar {
    position: sticky;
    bottom: 0;
    background: #E0E0E0;
    border-top: 2px solid #999999;
    padding: 10px 14px;
    margin-top: 14px;
    display: flex;
    gap: 10px;
    align-items: center;
    z-index: 100;
}

.save-bar-link {
    margin-left: auto;
    font-size: 14px;
}

/* ── Dashboard ── */

.dashboard-main-page {
    border-color: #000080;
    border-width: 2px;
    border-style: solid;
    padding: 14px;
}

.dashboard-main-page legend {
    color: #000080;
}

.dashboard-url {
    font-size: 14px;
    color: #555555;
    margin: 4px 0 10px 0;
}

.dashboard-page-title {
    font-size: 17px;
    color: #000080;
}

.dashboard-page-table {
    border: none;
}

.subpage-explain {
    font-size: 13px;
    color: #666666;
    margin: 4px 0 12px 0;
}

.dashboard-subpage-table {
    font-size: 14px;
}

.status-approved {
    color: #008800;
    font-weight: bold;
}

.status-pending {
    color: #886600;
    font-weight: bold;
}

.status-rejected {
    color: #CC0000;
    font-weight: bold;
}

.editor-help-link {
    margin-top: 8px;
}

/* ── Responsive: stack images below sections on narrow screens ── */

@media (max-width: 768px) {
    .editor-content-area {
        flex-direction: column;
    }

    .editor-images-col {
        width: 100%;
    }

    .bg-picker-grid {
        gap: 5px;
    }

    .bg-preview {
        width: 50px;
        height: 38px;
    }

    .color-grid {
        gap: 10px;
    }

    .editor-save-bar {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   Inline Admin Controls (visible only to logged-in admin)
   ========================================================================== */

.admin-controls {
    margin-top: 4px;
    font-size: 11px;
}

.admin-inline-form {
    display: inline;
    margin: 0;
    padding: 0;
}

.admin-btn {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background: none;
    border: none;
    color: #CC0000;
    cursor: pointer;
    padding: 0 3px;
}

.admin-btn:hover {
    text-decoration: underline;
}

.admin-btn-recat {
    color: #0066CC;
}

.admin-recat-form {
    display: none;
    margin-top: 2px;
}

.admin-recat-form select {
    font-size: 11px;
    max-width: 250px;
}

.admin-recat-form button {
    font-size: 11px;
    margin-left: 4px;
}