/* ========================================= Early 2000s Classic Dark Website Style Boxed layout, gradients, sharp edges Black/Gray with Orange highlights ========================================= */ body { margin: 0; padding: 0; background: #000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #d0d0d0; } /* Centered fixed-width layout */ #wrapper { width: 900px; margin: 30px auto; background: #111; border: 1px solid #333; box-shadow: 0 4px 12px rgba(0,0,0,0.5); } /* Header */ #header { background: linear-gradient(#2a2a2a, #141414); border-bottom: 2px solid #ff8c2a; padding: 14px; } #header h1 { margin: 0; font-size: 22px; letter-spacing: 1px; color: #ff8c2a; } /* Navigation bar */ #nav { background: #1a1a1a; border-bottom: 1px solid #333; padding: 6px 10px; } #nav a { color: #ff8c2a; text-decoration: none; margin-right: 16px; font-weight: bold; transition: color 0.2s ease; } #nav a:hover { color: #ffaa55; text-decoration: underline; } /* Main content */ #content { padding: 20px; background: #0f0f0f; } /* Section boxes */ .box { background: linear-gradient(#1c1c1c, #0f0f0f); border: 1px solid #333; padding: 12px; margin-bottom: 18px; transition: box-shadow 0.2s ease; } .box:hover { box-shadow: 0 2px 8px rgba(255,140,42,0.3); } .box h2 { margin: 0 0 10px 0; font-size: 14px; color: #ff8c2a; border-bottom: 1px solid #333; padding-bottom: 4px; } /* Text */ p { line-height: 1.5; color: #c0c0c0; } /* Links */ a { color: #ff8c2a; transition: color 0.2s ease; } a:hover { color: #ffaa55; } /* Tables */ table { width: 100%; border-collapse: collapse; background: #111; } td, th { border: 1px solid #333; padding: 6px; font-size: 12px; } th { background: #1e1e1e; color: #ff8c2a; } /* Footer */ #footer { background: #0a0a0a; border-top: 1px solid #333; text-align: center; padding: 10px; font-size: 11px; color: #777; } /* Buttons */ button { background: linear-gradient(#2a2a2a, #141414); border: 1px solid #444; color: #ff8c2a; padding: 4px 10px; font-family: Verdana, Arial, sans-serif; font-size: 12px; cursor: pointer; transition: all 0.2s ease; } button:hover { border-color: #ff8c2a; box-shadow: 0 2px 6px rgba(255,140,42,0.3); } /* Link-style buttons */ .btn { display: inline-block; background: linear-gradient(#2a2a2a, #141414); border: 1px solid #444; color: #ff8c2a; padding: 4px 10px; font-family: Verdana, Arial, sans-serif; font-size: 12px; text-decoration: none; text-align: center; cursor: pointer; transition: all 0.2s ease; } .btn:hover { border-color: #ff8c2a; box-shadow: 0 2px 6px rgba(255,140,42,0.3); } /* Bigger buttons (ONLY where applied) */ .big-btn { font-size: 16px; padding: 8px 16px; } /* ========================================= Vertical Menu (plain early-2000s list) ========================================= */ .vertical-menu { list-style: none; margin: 0; padding: 0; width: auto; background: none; border: none; } .vertical-menu li { border: none; margin-bottom: 6px; } .vertical-menu li a { display: inline; padding: 0; font-size: 14px; color: #ff8c2a; text-decoration: underline; } .vertical-menu li a:hover { background: none; color: #ffaa55; text-decoration: underline; } /* ========================================= Page-specific full-image background Apply ========================================= */ .bg-special { background: url("images/space.png") center center fixed; background-size: cover; color: #d0d0d0; /* make sure text is readable */ } /* Remove dark boxes on bg-special pages */ .bg-special #wrapper, .bg-special #content, .bg-special .box { background: transparent; border: none; box-shadow: none; }