* { margin:0; padding:0; box-sizing:border-box; }
body {
  background:#fff; color:#222; font-family:Verdana,Arial,Helvetica,sans-serif;
  font-size:13px; line-height:1.5;
}
a { color:#0033cc; text-decoration:underline; }
a:hover { color:#cc0000; }
a:visited { color:#551a8b; }

/* ── Top bar ── */
#topbar {
  background:#336699; color:#fff; font-size:11px;
  padding:4px 12px; border-bottom:2px solid #003366;
}
#topbar a { color:#ffcc00; text-decoration:none; font-weight:bold; }
#topbar a:hover { text-decoration:underline; }

/* ── Header ── */
#header {
  background: linear-gradient(180deg, #4a7db5 0%, #336699 50%, #1a4a7a 100%);
  padding:14px 20px; color:#fff;
  border-bottom:3px solid #0a2a4a;
}
#header h1 { font-size:22px; font-weight:bold; letter-spacing:1px; text-shadow:1px 1px 2px #000; }
#header .tagline { font-size:12px; color:#cce0ff; margin-top:2px; }

/* ── Navigation bar ── */
#navbar {
  background: linear-gradient(180deg, #e8e8e8 0%, #ccc 50%, #aaa 100%);
  border-bottom:2px solid #888; padding:0 20px; font-size:12px;
}
#navbar table { border-collapse:collapse; }
#navbar td {
  padding:6px 16px; border-right:1px solid #999;
  white-space:nowrap; font-weight:bold;
}
#navbar td:hover { background:#d0d0d0; }
#navbar a { color:#222; text-decoration:none; display:block; }
#navbar a:hover { color:#cc0000; }
#navbar td.active { background:#336699; }
#navbar td.active a { color:#fff; }

/* ── Layout ── */
#layout { display:flex; min-height:70vh; }

/* ── Left sidebar ── */
#leftbar {
  width:180px; min-width:180px; background:#f0f0f0;
  border-right:1px solid #ccc; padding:12px 10px; font-size:11px;
}
#leftbar h3 {
  font-size:12px; color:#003366; border-bottom:1px solid #ccc;
  padding-bottom:4px; margin-bottom:8px;
}
#leftbar ul { list-style:none; margin-bottom:14px; }
#leftbar li { padding:2px 0; }
#leftbar li a { display:block; padding:2px 6px; }
#leftbar li a:hover { background:#ddd; text-decoration:none; }

/* ── Main content ── */
#main { flex:1; padding:16px 20px; min-width:0; }

.breadcrumb { font-size:11px; color:#666; margin-bottom:14px; }
.breadcrumb a { color:#666; }

#searchbox { float:right; margin-top:-2px; }
#searchbox input {
  font-size:11px; padding:2px 6px; width:160px;
  border:1px solid #999; border-right:none; vertical-align:middle;
}
#searchbox button {
  font-size:11px; padding:2px 10px; background:#336699; color:#fff;
  border:1px solid #003366; cursor:pointer; vertical-align:middle;
  font-weight:bold;
}
#searchbox button:hover { background:#4a7db5; }

.post {
  margin-bottom:20px;
  border:1px solid #ccc;
}
.post-header {
  background: linear-gradient(180deg, #e8eef4 0%, #c8d8e8 100%);
  border-bottom:1px solid #999; padding:8px 12px;
}
.post-header h2 { font-size:16px; color:#003366; margin:0; font-weight:bold; }
.post-header .meta { font-size:10px; color:#666; margin-top:2px; }
.post-body { padding:12px 14px; font-size:12px; line-height:1.7; }
.post-body p { margin:8px 0; }
.post-body .label { font-weight:bold; color:#003366; }
.post-body .status-live { color:#008000; font-weight:bold; }
.post-body .status-warn { color:#cc6600; font-weight:bold; }
.post-body .status-red { color:#cc0000; font-weight:bold; }
.post-body .read-more { font-weight:bold; }
.post-footer {
  background:#f5f5f5; border-top:1px solid #ddd; padding:6px 12px;
  font-size:10px; color:#888; overflow:hidden;
}
.post-footer a { color:#888; margin-right:10px; }
.post-footer a:hover { color:#cc0000; }

/* ── Page headings ── */
.page-heading {
  font-size:18px; color:#003366; margin-bottom:16px;
  border-bottom:2px solid #003366; padding-bottom:4px;
}

/* ── Right sidebar ── */
#rightbar {
  width:200px; min-width:200px; background:#f8f8f8;
  border-left:1px solid #ccc; padding:12px 10px; font-size:11px;
}
#rightbar h3 {
  font-size:12px; color:#003366; border-bottom:1px solid #ccc;
  padding-bottom:4px; margin-bottom:8px;
}
#rightbar ul { list-style:none; margin-bottom:14px; }
#rightbar li { padding:2px 0; }

/* ── Footer ── */
#footer {
  background:#336699; color:#cce0ff; font-size:10px; padding:10px 20px;
  border-top:2px solid #003366; text-align:center; line-height:1.8;
}
#footer a { color:#ffcc00; }
#footer .pipe { color:#80a0c0; margin:0 6px; }

/* ── Buttons ── */
.btn {
  display:inline-block; background:#e0e0e0;
  border:2px outset #ccc; padding:3px 14px; font-size:12px;
  color:#222; text-decoration:none; cursor:pointer; font-family:Verdana,sans-serif;
}
.btn:hover { background:#d0d0d0; text-decoration:none; color:#000; }
.btn:active { border-style:inset; }
.btn-blue {
  background: linear-gradient(180deg, #5a9fd4 0%, #336699 100%);
  color:#fff; border:2px outset #4a7db5; font-weight:bold;
}
.btn-blue:hover { background: linear-gradient(180deg, #6ab0e4 0%, #4477aa 100%); color:#fff; }

hr.section { border:none; border-top:1px solid #ccc; margin:20px 0; }

/* ── Contact form ── */
.contact-form { font-size:12px; }
.contact-form td { padding:4px 6px; }
.contact-form input, .contact-form textarea, .contact-form select {
  font-family:Verdana,sans-serif; font-size:12px; padding:2px 6px;
  border:1px solid #999;
}
.contact-form textarea { width:100%; resize:vertical; }

/* ── Retro badge ── */
.retro-badge {
  display:inline-block; background:#f0f0f0; border:1px solid #ccc;
  padding:2px 8px; font-size:10px; color:#666;
  max-width:100%; word-break:break-word;
}

/* ── Page-specific nav highlight ── */
#navbar td.active { background:#336699; }

@media(max-width:800px){
  #layout { flex-direction:column; }
  #leftbar, #rightbar { width:100%; min-width:0; border:none; border-bottom:1px solid #ccc; }
  #leftbar ul { display:flex; flex-wrap:wrap; gap:4px; }
  #leftbar li { border:1px solid #ddd; background:#fff; }
  #searchbox { float:none; display:block; margin:8px 0; }
  #navbar { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #navbar table { min-width:560px; }
  #navbar td { padding:4px 8px; font-size:10px; white-space:normal; }
  .post-body table { display:block; overflow-x:auto; font-size:11px; }
  .post-body td { white-space:normal; word-break:break-word; }
}