/* ============================================================ */ /* Wyoming Wilderness Web -- Est. 1995 (Retro Theme) */ /* Best viewed in Netscape Navigator 2.0 at 800x600 */ /* ============================================================ */ /* All rules scoped under .retro on so they only apply when the retro theme is active. */ .retro body { background-color: #b8c4b0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='56'%3E%3Crect width='40' height='56' fill='%23b8c4b0'/%3E%3Cpolygon points='20,2 26,14 23,14 28,24 24,24 30,36 10,36 16,24 12,24 17,14 14,14' fill='%235a7a50' opacity='0.45'/%3E%3Crect x='18' y='36' width='4' height='8' fill='%234a5e3a' opacity='0.4'/%3E%3C/svg%3E"); font-family: "Times New Roman", Times, serif; color: #000000; margin: 8px; font-size: 14px; line-height: 1.5; } .retro a { color: #0000EE; text-decoration: underline; } .retro a:visited { color: #551A8B; } .retro a:hover { color: #FF0000; text-decoration: underline; } .retro img { border: 2px solid #000000; } .retro hr.section-divider { display: block; border: 0; height: 4px; background: linear-gradient(to right, #006400 0%, #4a3728 35%, #800000 50%, #4a3728 65%, #006400 100%); margin: 10px 0; } /* ===== Navigation ===== */ .retro .site-nav { position: static; background-color: #000080; padding: 6px 10px; border: 3px outset #c0c0c0; border-bottom: 4px solid #cc6600; text-align: center; box-shadow: none; } .retro .nav-inner { display: block; text-align: center; max-width: none; height: auto; gap: 0; margin: 0; } .retro .site-name { display: block; color: #FFFF00; font-family: "Comic Sans MS", "Arial Black", Arial, sans-serif; font-size: 18px; font-weight: bold; text-decoration: none; margin-bottom: 4px; letter-spacing: 0; text-transform: none; flex-shrink: unset; } .retro .site-name:hover { color: #FFFFFF; text-decoration: underline; } .retro .nav-links { list-style: none; display: inline; flex: none; gap: 0; } .retro .nav-links li { display: inline; margin: 0 4px; align-items: unset; } .retro .nav-links li::before { content: "[ "; color: #FFFFFF; } .retro .nav-links li::after { content: " ]"; color: #FFFFFF; } .retro .nav-links a { color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; text-decoration: none; letter-spacing: 0; } .retro .nav-links a:hover, .retro .nav-links a.active { color: #FFFF00; text-decoration: underline; } .retro .theme-toggle { display: block; margin: 5px auto 0; font-size: 11px; color: #AAAAFF; border: 1px solid #AAAAFF; border-radius: 0; padding: 1px 8px; background: #000050; letter-spacing: 0; width: fit-content; transition: none; } .retro .theme-toggle:hover { color: #FFFFFF; border-color: #FFFFFF; background: #000080; text-decoration: underline; } /* ===== Banner ===== */ .retro .site-banner { background-color: #006400; padding: 16px 10px; text-align: center; border: 3px inset #c0c0c0; margin-bottom: 0; } .retro .banner-overlay { display: block; } .retro .site-banner h1.site-title { color: #FFFFFF; font-family: "Arial Black", "Impact", Arial, sans-serif; font-size: 28px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 4px 0; text-shadow: 2px 2px #000000; } .retro .site-banner h1.site-title::before { content: "*** "; } .retro .site-banner h1.site-title::after { content: " ***"; } .retro .site-banner .subtitle { color: #CCFFCC; font-size: 13px; font-style: italic; font-family: "Times New Roman", serif; letter-spacing: 0; } .retro .site-banner .subtitle::before { content: "~ "; } .retro .site-banner .subtitle::after { content: " ~"; } /* ===== Main ===== */ .retro main { max-width: 760px; margin: 0 auto; background-color: #FFFFFF; padding: 12px 14px; border: 3px inset #808080; } /* ===== Homepage ===== */ .retro .intro { max-width: none; margin-bottom: 14px; text-align: center; border-left: 4px solid #2a5016; padding-left: 12px; } .retro .intro p { margin-bottom: 8px; font-size: 14px; line-height: 1.5; } /* ===== Homepage menus (retro) ===== */ .retro .location-menus { display: flex; gap: 8px; flex-wrap: wrap; } .retro .location-menu-wrapper { position: relative; } .retro .location-menu-btn { font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; color: #000000; background-color: #c0c0c0; border: 2px outset #ffffff; padding: 3px 10px; cursor: pointer; display: flex; align-items: center; gap: 4px; } .retro .location-menu-btn:hover, .retro .location-menu-wrapper.open .location-menu-btn { background-color: #d0d0d0; } .retro .location-menu-wrapper.open .location-menu-btn { border-style: inset; } .retro .menu-arrow { font-size: 10px; color: #333333; } .retro .location-menu-dropdown { display: none; position: absolute; top: calc(100% + 2px); left: 0; min-width: 200px; max-height: 50vh; overflow-y: auto; background: #ffffff; border: 2px solid #000000; box-shadow: 3px 3px 0 #000000; z-index: 200; } .retro .location-menu-wrapper.open .location-menu-dropdown { display: block; } .retro .location-list { list-style: none; margin: 0; padding: 2px 0; } .retro .location-item { border-bottom: 1px dotted #cccccc; } .retro .location-item a, .retro .location-item.location-unvisited { display: block; padding: 2px 8px; text-decoration: none; font-size: 15px; font-family: Arial, Helvetica, sans-serif; white-space: nowrap; } .retro .location-visited a { font-weight: bold; color: #0000EE; } .retro .location-item a:hover { background-color: #000080; color: #FFFFFF; } .retro .location-unvisited { color: #666666; cursor: default; } .retro .map-heading { font-size: 16px; } /* ===== Wyoming Map ===== */ .retro #wy-map, .retro .map-heading, .retro .map-divider { display: none; } .retro #wy-map { width: 100%; height: 480px; margin-top: 14px; border: 3px inset #808080; } .retro .map-tooltip { font-family: Arial, Helvetica, sans-serif; font-size: 12px; background: #FFFFCC; border: 1px solid #000000; border-radius: 0; padding: 2px 6px; color: #000000; } /* ===== Location hero image ===== */ .retro .location-hero-img { width: 100%; border: 2px solid #000000; margin: 8px 0 12px; display: block; } /* ===== Page Content ===== */ .retro .page-content, .retro .location-page { max-width: none; } .retro .page-content h1, .retro .location-page h1 { font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: bold; color: #000080; border-bottom: 3px solid #800000; padding-bottom: 3px; margin-bottom: 10px; font-style: normal; line-height: 1.3; } .retro .page-content h2, .retro .location-page h2 { font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; color: #FFFFFF; background-color: #800000; padding: 3px 6px; margin-top: 14px; margin-bottom: 6px; border: 2px outset #808080; text-transform: none; letter-spacing: 0; } .retro .page-content h2::before, .retro .location-page h2::before { content: "\BB "; opacity: 0.7; } .retro .page-content p, .retro .location-page p { margin-bottom: 8px; line-height: 1.5; } .retro .page-content ul, .retro .page-content ol, .retro .location-page ul, .retro .location-page ol { margin-left: 20px; margin-bottom: 8px; } .retro .page-content li, .retro .location-page li { margin-bottom: 2px; line-height: 1.5; } /* ===== Statistics ===== */ .retro .statistics table { border-collapse: collapse; border: 2px solid #000000; margin-top: 8px; font-size: 13px; width: auto; } .retro .statistics th, .retro .statistics td { border: 1px solid #000000; padding: 3px 8px; text-align: left; } .retro .statistics th { background-color: #000080; color: #FFFFFF; font-family: Arial, sans-serif; font-weight: bold; font-size: 13px; text-transform: none; letter-spacing: 0; white-space: nowrap; } .retro .statistics td { background-color: #FFFFCC; color: #000000; font-weight: normal; } /* ===== Placeholder ===== */ .retro .placeholder-notice { background-color: #FFFF99; border: 2px solid #FF8800; border-left: 2px solid #FF8800; border-radius: 0; padding: 8px; margin-top: 10px; font-style: italic; color: #333333; font-size: 13px; } /* ===== Blog ===== */ .retro .blog-entry { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid #808080; max-width: none; } .retro .blog-entry h2 { font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; color: #000080; margin-bottom: 2px; background: none; padding: 0; border: none; text-transform: none; letter-spacing: 0; } .retro .blog-entry time, .retro .post-header time { color: #666666; font-size: 12px; font-style: italic; text-transform: none; letter-spacing: 0; display: inline; margin-bottom: 0; } .retro .post-header { margin-bottom: 12px; border: none; padding: 0; } .retro .post-header h1 { font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: bold; color: #000080; border-bottom: 3px solid #800000; padding-bottom: 3px; margin-bottom: 3px; font-style: normal; line-height: 1.3; } /* ===== Location page images ===== */ .retro .location-page img { border: 2px solid #000000; margin: 4px 0 8px; } /* ===== Gallery ===== */ .retro .photo-gallery { position: relative; width: 80%; margin: 10px auto; text-align: center; background-color: #000000; border: 3px inset #808080; padding: 6px; } .retro .gallery-controls { background-color: #c0c0c0; padding: 4px; border-top: 2px solid #808080; gap: 10px; } .retro .gallery-btn { background-color: #c0c0c0; border: 2px outset #ffffff; color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; padding: 2px 10px; cursor: pointer; min-width: 36px; letter-spacing: 0; transition: none; } .retro .gallery-btn:active { border-style: inset; } .retro .gallery-btn:hover { border-color: #ffffff; color: #000000; } .retro .gallery-counter { font-family: "Courier New", Courier, monospace; font-size: 12px; color: #000080; font-weight: bold; min-width: 50px; } .retro .gallery-caption { font-family: "Times New Roman", serif; font-size: 11px; color: #ccffcc; font-style: italic; padding: 2px 4px; background-color: #000000; min-height: 16px; } /* ===== Footer ===== */ .retro .site-footer { max-width: 760px; margin: 8px auto 0; text-align: center; padding: 8px; border: 3px inset #808080; background-color: #c0c0c0; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #333333; } .retro .site-footer p { margin: 2px 0; } .retro .footer-disclaimer { font-size: 10px; color: #666666; margin-top: 4px; } /* Show retro-only elements */ .retro .retro-only { display: block; }