* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, sans-serif; font-size: 13px; line-height: 1.5; color: #c9c9c9; background: #1a1a1a; } #container { max-width: 1200px; margin: 0 auto; padding: 20px; } #header { border-bottom: 2px solid #2e8b57; padding-bottom: 10px; margin-bottom: 20px; } #header h1 { font-size: 24px; font-weight: normal; color: #3cb371; margin: 0; } #header .tagline { font-size: 12px; color: #888; font-style: italic; } #content { margin-bottom: 0; } h2 { font-size: 16px; font-weight: bold; color: #e0e0e0; margin: 20px 0 10px 0; padding-bottom: 5px; border-bottom: 1px solid #333; } h3 { font-size: 14px; font-weight: bold; color: #d0d0d0; margin: 15px 0 8px 0; } p { margin: 10px 0; } a { color: #5fba7d; text-decoration: none; } a:hover { text-decoration: underline; color: #7ccd9a; } a:visited { color: #4a9a6a; } /* Directory listing table */ table.dirindex { width: 100%; border-collapse: collapse; margin: 15px 0; } table.dirindex td { padding: 4px 8px; border-bottom: 1px solid #2a2a2a; vertical-align: top; } table.dirindex tr:hover { background: #252525; } table.dirindex .icon { width: 20px; text-align: center; } table.dirindex .desc { color: #888; font-size: 12px; } /* Plain list */ ul.plain { list-style: none; margin: 10px 0; padding-left: 0; } ul.plain li { padding: 3px 0; } ul.plain li:before { content: "» "; color: #555; } /* Indented list */ ul.indent { margin: 10px 0; padding-left: 25px; } ul.indent li { padding: 2px 0; } /* Code blocks */ pre { background: #0d0d0d; border: 1px solid #333; padding: 10px; overflow-x: auto; font-family: 'Monaco', 'Menlo', 'Consolas', monospace; font-size: 12px; line-height: 1.4; margin: 10px 0; color: #b0b0b0; } code { font-family: 'Monaco', 'Menlo', 'Consolas', monospace; font-size: 12px; background: #0d0d0d; padding: 1px 4px; color: #b0b0b0; } /* Inline code in text */ p code, li code, td code { border: 1px solid #333; } /* Configuration block */ .config { background: #1f1f1a; border: 1px solid #3a3a30; padding: 10px; margin: 10px 0; } /* Note/warning blocks */ .note { background: #1a2a1a; border-left: 3px solid #2e8b57; padding: 10px; margin: 15px 0; } .note strong { color: #3cb371; } .warning { background: #2a2a1a; border-left: 3px solid #b8860b; padding: 10px; margin: 15px 0; } .warning strong { color: #daa520; } /* Definition list */ dl { margin: 10px 0; } dt { font-weight: bold; margin-top: 10px; color: #e0e0e0; } dd { margin-left: 20px; color: #999; } /* Navigation breadcrumb */ .breadcrumb { font-size: 12px; color: #888; margin-bottom: 15px; } .breadcrumb a { color: #5fba7d; } /* Footer */ #footer { border-top: 1px solid #333; padding-top: 10px; font-size: 11px; color: #666; text-align: center; } /* Syntax highlighting for config examples */ .directive { color: #5fba7d; font-weight: bold; } .value { color: #87ceeb; } .comment { color: #666; font-style: italic; } /* Main wrapper for two-column layout */ #main-wrapper { display: flex; gap: 30px; align-items: flex-start; } #content { flex: 1; min-width: 0; } /* Sidebar */ #sidebar { width: 300px; flex-shrink: 0; } .partner-block { position: sticky; top: 20px; background: #0d0d0d; border: 1px solid #333; border-radius: 8px; padding: 20px; } .partner-block h3 { color: #3cb371; font-size: 16px; margin: 0 0 15px 0; padding-bottom: 10px; border-bottom: 2px solid #2e8b57; } .partner-card { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 6px; padding: 15px; margin-bottom: 15px; transition: all 0.3s ease; } .partner-card:hover { border-color: #3cb371; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(60, 179, 113, 0.1); } .partner-icon { font-size: 32px; margin-bottom: 10px; } .partner-card h4 { color: #e0e0e0; font-size: 14px; font-weight: bold; margin: 0 0 8px 0; } .partner-card p { color: #999; font-size: 12px; line-height: 1.6; margin: 0 0 10px 0; } .partner-link { display: inline-block; color: #5fba7d; font-size: 12px; font-weight: bold; text-decoration: none; transition: color 0.2s ease; } .partner-link:hover { color: #7ccd9a; } .community-block { background: #1a2a1a; border: 1px solid #2e4a2e; border-radius: 6px; padding: 15px; margin-top: 15px; } .community-block h4 { color: #3cb371; font-size: 14px; font-weight: bold; margin: 0 0 10px 0; } .community-links { list-style: none; margin: 0; padding: 0; } .community-links li { padding: 5px 0; } .community-links li:before { content: "► "; color: #2e8b57; font-size: 10px; margin-right: 5px; } .community-links a { color: #5fba7d; font-size: 12px; text-decoration: none; } .community-links a:hover { color: #7ccd9a; text-decoration: underline; } /* Responsive design */ @media (max-width: 1024px) { #container { max-width: 900px; } #sidebar { width: 250px; } } @media (max-width: 768px) { #main-wrapper { flex-direction: column; } #sidebar { width: 100%; margin-top: 30px; } .partner-block { position: static; } /* On mobile, show partner cards in a more compact grid */ .partner-card { margin-bottom: 12px; } } @media (max-width: 480px) { #container { padding: 15px; } .partner-block { padding: 15px; } .partner-card { padding: 12px; } .partner-icon { font-size: 28px; } } #current-version { display: inline-flex; align-items: center; gap: 8px; } .version-link { color: #5fba7d; text-decoration: none; font-weight: bold; transition: color 0.2s ease; } .version-link:hover { color: #7ccd9a; text-decoration: underline; } .version-badge { display: inline-block; background: linear-gradient(135deg, #2e8b57 0%, #3cb371 100%); color: #fff; font-size: 10px; font-weight: bold; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; letter-spacing: 0.5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }