body {
    margin: 0;
    padding: 20px;

    background: #d4d4c8;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;

    color: #111;
}

a {
    color: #003399;
}

a:visited {
    color: #663366;
}

/* -------------------------
   BELLWEATHER MUNICIPAL
------------------------- */

.layout {
    width: 760px;
    margin: 20px auto;

    background: #fffef7;

    border: 1px solid #8b8b78;
    border-collapse: collapse;
}

.sidebar {
    width: 145px;

    padding: 18px;

    vertical-align: top;

    background: #6f8068;
    color: white;

    border-right: 4px solid #d6d2b5;
}

.sidebar a {
    display: block;

    margin: 2px 0;
    padding: 5px 7px;

    background: #82917a;

    border: 1px solid #98a491;

    color: white;
    text-decoration: none;
}

.sidebar a:hover {
    background: #596b53;
    text-decoration: underline;
}

.sidebar small {
    color: #e1e5dd;
}

.seal {
    width: 72px;
    height: 55px;

    margin-bottom: 12px;

    background: #ece8cf;
    color: #52604d;

    border: 1px solid #4e5d49;

    text-align: center;
    line-height: 55px;

    font-family: Georgia, serif;
    font-size: 22px;
    font-weight: bold;
}

.content {
    padding: 25px 35px;

    vertical-align: top;
}

.content h1 {
    margin-top: 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: normal;

    color: #52604d;

    border-bottom: 3px double #b8b69d;

    padding-bottom: 8px;
}

.content h2 {
    margin-top: 30px;

    font-family: Arial, sans-serif;
    font-size: 15px;

    color: #52604d;

    border-bottom: 1px solid #bbb9a4;
}

.updated {
    font-size: 10px;
    color: #888;
}

.notice {
    margin: 25px 0;
    padding: 12px;

    background: #f5f1d7;

    border: 1px solid #c9c39a;
}

footer {
    width: 760px;

    margin: 10px auto;

    text-align: center;

    font-size: 10px;
    color: #666;
}

.counter {
    margin: 8px;
    font-family: monospace;
}

/* -------------------------
   BELLWEATHER GAZETTE
------------------------- */

.gazette {
    width: 760px;
    margin: 20px auto;

    background: #f7f4e8;
    border: 1px solid #777;
}

.gazette-header {
    padding: 15px 25px 12px;

    text-align: center;

    border-bottom: 4px double #222;
}

.gazette-header h1 {
    margin: 4px 0;

    font-family: "Times New Roman", serif;
    font-size: 38px;
    letter-spacing: -1px;

    color: #111;
}

.gazette-date {
    font-family: "Times New Roman", serif;
    font-size: 12px;
}

.gazette-tagline {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 11px;
}

.gazette-nav {
    padding: 6px;

    text-align: center;

    background: #222;
    color: white;
}

.gazette-nav a {
    margin: 0 10px;

    color: white;

    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
}

.gazette-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 25px;

    padding: 25px;
}

.lead-story {
    font-family: Georgia, serif;
    font-size: 14px;
    line-height: 1.45;
}

.lead-story h2 {
    margin: 4px 0 5px;

    border: 0;

    font-family: "Times New Roman", serif;
    font-size: 28px;
    line-height: 1;

    color: #111;
}

.category {
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: bold;

    color: #8b0000;
}

.byline {
    padding-bottom: 10px;

    border-bottom: 1px solid #aaa;

    font-size: 11px;
    font-style: italic;
}

.gazette-side {
    padding-left: 18px;

    border-left: 1px solid #999;

    font-size: 11px;
}

.gazette-side h3 {
    margin-top: 0;

    border-bottom: 2px solid #222;

    font-family: Arial, sans-serif;
    font-size: 12px;
}

.brief {
    margin-bottom: 20px;
}

.brief p {
    margin: 4px 0;
    line-height: 1.35;
}

.gazette-archive {
    padding: 10px 25px;

    border-top: 1px solid #aaa;

    font-size: 10px;
}

/* -------------------------
   BELLWEATHER RAILWAY
------------------------- */

.railway {
    width: 720px;
    margin: 20px auto;

    background: #fff;
    border: 1px solid #777;
}

.railway-header {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 15px 20px;

    background: #164b32;
    color: white;
}

.rail-logo {
    width: 52px;
    height: 52px;

    border: 3px solid white;

    text-align: center;
    line-height: 52px;

    font-size: 22px;
    font-weight: bold;
}

.railway-header h1 {
    margin: 0;

    font-family: Arial, sans-serif;
    font-size: 24px;

    color: white;
}

.railway-header span {
    font-size: 11px;
}

.rail-nav {
    padding: 7px 20px;

    background: #ddd;

    border-bottom: 1px solid #999;
}

.rail-nav a {
    margin-right: 18px;

    font-size: 11px;
    font-weight: bold;

    color: #164b32;
}

.rail-content {
    padding: 25px;
}

.rail-content h2 {
    margin-top: 0;

    color: #164b32;
}

.rail-updated {
    margin-top: -8px;

    font-size: 11px;
    color: #777;
}

.rail-alert {
    margin: 20px 0;
    padding: 10px;

    background: #fff4c2;

    border: 1px solid #c5a900;
}

.timetable {
    width: 100%;

    border-collapse: collapse;

    font-family: Arial, sans-serif;
}

.timetable th {
    padding: 7px;

    text-align: left;

    background: #164b32;
    color: white;
}

.timetable td {
    padding: 7px;

    border-bottom: 1px solid #ccc;
}

.timetable tr:nth-child(odd) td {
    background: #eee;
}

.cancelled {
    font-weight: bold;
    color: #a00000;
}

.last-service td {
    border-bottom: 2px solid #222;
}

.smallprint {
    font-size: 10px;
    color: #666;
}

.contact {
    padding: 10px;

    background: #eee;

    font-size: 11px;
}

/* -------------------------
   BELLWEATHER POLICE
------------------------- */

.police {
    width: 720px;
    margin: 20px auto;

    background: white;
    border: 1px solid #555;
}

.police-header {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 18px;

    background: #202938;
    color: white;
}

.police-badge {
    width: 55px;
    height: 55px;

    border: 2px solid #ddd;
    border-radius: 50%;

    text-align: center;
    line-height: 55px;

    font-weight: bold;
}

.police-header h1 {
    margin: 0;

    font-family: Arial, sans-serif;
    font-size: 22px;

    color: white;
}

.police-header span {
    font-size: 11px;
    color: #ccc;
}

.police-nav {
    padding: 7px 20px;

    background: #d8dce2;

    border-bottom: 1px solid #999;
}

.police-nav a {
    margin-right: 18px;

    font-size: 11px;
    font-weight: bold;

    color: #202938;
}

.police-content {
    padding: 25px 35px;
}

.police-content h2 {
    margin-bottom: 5px;

    color: #202938;
}

.case-number {
    margin-bottom: 20px;

    font-family: monospace;
    font-size: 11px;

    color: #777;
}

.person {
    width: 100%;

    margin-bottom: 20px;

    border-collapse: collapse;
}

.person td {
    padding: 7px;

    border: 1px solid #bbb;
}

.person td:first-child {
    width: 120px;

    background: #eee;
}

.police-notice {
    margin: 20px 0;
    padding: 12px;

    border: 1px solid #999;

    background: #f2f2f2;

    font-weight: bold;
}

.police-update {
    margin-top: 30px;

    font-size: 10px;
    color: #777;
}

/* -------------------------
   INDUSTRIAL WORKS
------------------------- */

.factory {
    width: 740px;
    margin: 20px auto;

    background: white;
    border: 1px solid #666;
}

.factory-header {
    display: flex;
    align-items: center;
    gap: 18px;

    padding: 20px;

    background: #454b50;
    color: white;
}

.factory-logo {
    padding: 12px;

    background: #e4a11b;
    color: #111;

    font-size: 22px;
    font-weight: bold;
}

.factory-header h1 {
    margin: 0;

    font-family: Arial, sans-serif;
    font-size: 23px;

    color: white;
}

.factory-header span {
    font-size: 11px;
    color: #ddd;
}

.factory-nav {
    padding: 7px 20px;

    background: #e5e5e5;
    border-bottom: 1px solid #aaa;
}

.factory-nav a {
    margin-right: 17px;

    color: #333;

    font-size: 11px;
    font-weight: bold;
}

.factory-content {
    padding: 25px 35px;
}

.factory-content h2 {
    color: #454b50;
}

.factory-status {
    margin: 25px 0;
    padding: 12px;

    background: #eee;

    border-left: 5px solid #e4a11b;
}

.factory-status p {
    margin-bottom: 4px;
}

.directory-note {
    font-size: 11px;
    color: #777;
}

.staff-table {
    width: 100%;

    border-collapse: collapse;
}

.staff-table th {
    padding: 7px;

    text-align: left;

    background: #454b50;
    color: white;
}

.staff-table td {
    padding: 7px;

    border-bottom: 1px solid #ccc;
}

.staff-table tr:nth-child(even) {
    background: #eee;
}

.staff-smallprint {
    font-size: 10px;
    color: #777;
}

.factory-footer {
    margin-top: 30px;
    padding: 10px;

    text-align: center;

    background: #eee;

    font-size: 10px;
    color: #666;
}

/* -------------------------
   ANNA'S HOMEPAGE
------------------------- */

.anna-page {
    width: 100%;

    padding: 30px 0;

    background: #080018;

    font-family: "Comic Sans MS", Arial, sans-serif;
    color: #ddd;
}

.anna-box {
    width: 620px;
    margin: auto;

    padding: 25px;

    background: #16052d;

    border: 2px dashed #c66cff;
}

.anna-box h1 {
    text-align: center;

    font-family: "Comic Sans MS", Arial, sans-serif;
    font-size: 28px;

    color: #ff70d2;

    text-shadow: 2px 2px #000;
}

.anna-box h2 {
    margin-top: 20px;

    border: 0;

    font-family: "Comic Sans MS", Arial, sans-serif;
    font-size: 18px;

    color: #66ffff;
}

.anna-box a {
    color: #66ffff;
}

.anna-box a:visited {
    color: #ff70d2;
}

.anna-nav {
    text-align: center;

    font-size: 12px;
}

.anna-welcome {
    margin: 25px;

    text-align: center;

    color: #ffff66;
}

.anna-box hr {
    height: 1px;

    margin: 25px 0;

    border: 0;

    background: #6f438e;
}

.entry {
    margin: 20px 0;
    padding: 10px;

    background: #0d011d;

    border-left: 3px solid #6f438e;

    font-family: Arial, sans-serif;
    font-size: 12px;
}

.entry p {
    margin: 8px 0;
}

.anna-counter {
    margin-top: 30px;

    text-align: center;

    font-family: monospace;

    color: #00ff66;
}

.anna-footer {
    margin-top: 10px;

    text-align: center;

    font-size: 10px;
    color: #8c7a99;
}

.hidden-link {
    color: inherit !important;
    text-decoration: none;
    border-bottom: 1px dotted #555;
}

.hidden-link:hover {
    color: #66ffff !important;
}

/* -------------------------
   INTERNAL ARCHIVE
------------------------- */

.archive {
    width: 680px;
    margin: 30px auto;

    padding: 20px;

    background: #e8e8e8;

    border: 1px solid #555;

    font-family: monospace;
    font-size: 12px;
}

.archive-header {
    padding: 8px;

    background: #222;
    color: white;

    font-weight: bold;
}

.archive-path {
    margin: 15px 0;

    color: #666;
}

.archive pre {
    padding: 20px;

    background: white;

    border: 1px solid #999;

    line-height: 1.5;
}

.archive-warning {
    padding: 10px;

    background: #fff3bf;

    border: 1px solid #c9ae45;
}

/* -------------------------
   TERMINAL
------------------------- */

body:has(.terminal) {
    padding: 0;
    background: #000;
}

.terminal {
    width: 720px;
    margin: 40px auto;

    font-family: "Courier New", monospace;
    font-size: 13px;

    color: #55ff77;
}

.terminal pre {
    font-family: inherit;
    line-height: 1.45;

    white-space: pre-wrap;
}

.terminal i {
    color: #aaffbb;
}

.terminal form {
    display: flex;
    align-items: center;

    margin-top: 20px;
}

.prompt {
    margin-right: 8px;
}

.terminal input {
    flex: 1;

    padding: 4px;

    background: #000;
    color: #55ff77;

    border: 0;
    outline: 0;

    font-family: "Courier New", monospace;
    font-size: 13px;
}

.terminal-response {
    margin-top: 15px;
}

.error-page {
    width: 600px;
    margin: 80px auto;

    font-family: "Times New Roman", serif;
}

.error-page h1 {
    margin-bottom: 0;

    font-family: Arial, sans-serif;
    font-size: 48px;

    color: #111;
}

.error-page h2 {
    margin-top: 0;

    border: 0;

    font-size: 22px;
}

.error-code {
    font-family: monospace;
    font-size: 11px;

    color: #777;
}

/* -------------------------
   DIRECTORY
------------------------- */

.directory {
    width: 720px;
    margin: 20px auto;

    background: #fff;
    border: 1px solid #777;
}

.directory-header {
    padding: 18px 25px;

    background: #e6e1c6;
    border-bottom: 1px solid #999;
}

.directory-header h1 {
    margin: 0;

    font-family: Arial, sans-serif;
    font-size: 24px;

    color: #333;
}

.directory-header p {
    margin: 4px 0 0;

    font-size: 11px;
    color: #666;
}

.directory-nav {
    padding: 7px 20px;

    background: #444;
}

.directory-nav a {
    margin-right: 16px;

    color: white;

    font-size: 11px;
    font-weight: bold;
}

.directory-content {
    padding: 25px 35px;
}

.directory-content h2 {
    color: #333;
}

.directory-info {
    font-size: 11px;
    color: #666;
}

.directory-search {
    margin: 20px 0;
    padding: 12px;

    background: #eee;

    border: 1px solid #bbb;
}

.directory-search input {
    width: 220px;
    margin-left: 5px;
}

.letters {
    margin: 15px 0;
}

.letters a {
    margin-right: 7px;

    font-weight: bold;
}

.directory-table {
    width: 100%;

    margin-bottom: 30px;

    border-collapse: collapse;
}

.directory-table th {
    padding: 6px;

    text-align: left;

    background: #e6e1c6;

    border: 1px solid #aaa;
}

.directory-table td {
    padding: 6px;

    border-bottom: 1px solid #ccc;
}

.directory-footer {
    margin-top: 30px;
    padding: 10px;

    text-align: center;

    background: #eee;

    font-size: 10px;
    color: #777;
}

/* -------------------------
   SMALL BELLWEATHER SITES
------------------------- */

.micro-site {
    width: 560px;
    margin: 35px auto;
    padding: 25px;

    background: white;
    border: 1px solid #888;
}

.micro-site h1 {
    margin-bottom: 2px;

    font-family: Arial, sans-serif;
    font-size: 25px;

    color: #333;
}

.micro-site h2 {
    margin-top: 25px;

    font-size: 15px;
    color: #333;
}

.micro-sub {
    margin-top: 0;

    font-size: 11px;
    color: #777;
}

.micro-table {
    width: 100%;

    border-collapse: collapse;
}

.micro-table td {
    padding: 6px;

    border-bottom: 1px solid #ddd;
}

.micro-table td:first-child {
    width: 150px;

    font-weight: bold;
}

.micro-muted {
    margin-top: 25px;

    font-size: 10px;
    color: #888;
}