/* site.css - minimal site-wide styles migrated from inline */ html, body { margin: 0; padding: 0; } /* Base colors migrated from old attributes */ body { background: #D0D0FF; color: #000; } a { color: #336699; } a:visited { color: #336699; } a:active { color: #336699; } /* You can add modern resets or layout helpers here incrementally */ /* Thin header gradient bar (HTML5-based) */ .header-gradient { height: 6px; /* keep it thin */ background: linear-gradient(to bottom, #6F6F7F 0%, #8A8A98 20%, #B0B0C0 40%, #D0D0E4 70%, #E7E7F7 100% ); } /* Palette and reusable separators */ :root { --grad-0: #6F6F7F; --grad-1: #8A8A98; --grad-2: #B0B0C0; --grad-3: #D0D0E4; --grad-4: #E7E7F7; } .separator { height: 10px; background: linear-gradient(to bottom, var(--grad-0) 0%, var(--grad-1) 25%, var(--grad-2) 50%, var(--grad-3) 75%, var(--grad-4) 100% ); } .separator--tight { height: 8px; } .sep-line-black { height: 2px; background: #000; } /* Top bar replacing the old DLNA table */ .topbar { width: 100%; border-collapse: collapse; background: #C0C0D0; } .topbar td { padding: 2px 6px; } .topbar .leftpad { padding-left: 12px; } .topbar .right { text-align: right; } .nav-link { color: #000; text-decoration: none; } .nav-link:hover { text-decoration: underline; } /* Welcome bar replacing legacy table */ .welcome-bar { display: flex; align-items: flex-end; justify-content: space-between; padding: 6px 1.5%; } .welcome-bar h2 { margin: 0; font-style: italic; } .welcome-bar .time { font-style: italic; } /* Menu wrapper replacing spacer table */ .menu-wrapper { background: #fff; padding: 4px 1.5%; } /* Content frame replacing nested black/white tables */ .content-frame { background: #000; padding: 4px; margin: 0 1.5% 0 1.5%; } .content-inner { background: #fff; padding: 8px; } .content-footer { color: #fff; padding: 4px 2px 2px 2px; } /* Fluid layout: mobile-first single column */ .layout { display: flex; flex-direction: column; gap: 12px; padding: 8px 1.5%; } #content { order: 1; min-width: 0; } #sidebar { order: 2; } /* Sidebar blocks fill width on mobile */ #sidebar table { width: 100%; max-width: 100%; } /* Wide screens: sidebar on the left, content fluid */ @media (min-width: 1024px) { .layout { flex-direction: row; align-items: flex-start; gap: 16px; } #sidebar { order: 1; flex: 0 0 260px; } #content { order: 2; flex: 1 1 auto; } } /* Print: hide decorative separators */ @media print { .separator, .separator--tight, .sep-line-black, .header-gradient { display: none !important; } } /* Footer */ .site-footer { text-align: center; padding: 8px 0 16px 0; }