/*****************************************************************/ /* mobile.css — phone/tablet adaptive layer */ /* */ /* Contains ONLY @media (max-width) rules, so the desktop view */ /* is left completely untouched. Load this stylesheet LAST */ /* (after check.css) on every page. */ /* */ /* Strategy: the old layout is a fixed 800px table inside an */ /* 800px-wide centered (forced by check.css). On phones */ /* that overflows. Here we (1) release the fixed body/table */ /* widths, (2) turn the 2-column table into a stacked, content- */ /* first flow, and (3) let inner image/swatch tables wrap like */ /* an auto-layout grid. */ /*****************************************************************/ /* ============================================================= */ /* TABLET + PHONE */ /* ============================================================= */ @media screen and (max-width: 768px) { /* ---- 1. Release the forced 800px body (set in check.css) -- */ html { -webkit-text-size-adjust: 100%; /* stop iOS auto-zooming text */ } body { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; left: 0 !important; transform: none !important; position: static !important; overflow-x: hidden; /* belt-and-braces against stray overflow */ } /* ---- 2. Main layout table fills the viewport -------------- */ table.main-layout { width: 100% !important; max-width: 100% !important; box-shadow: none !important; outline: none !important; } /* Make the whole table flow as blocks so cells stack vertically. This works in every browser and degrades gracefully. */ table.main-layout, table.main-layout > tbody, table.main-layout > tbody > tr, table.main-layout > tbody > tr > td { display: block; width: 100% !important; box-sizing: border-box; } /* Content BEFORE the sidebar nav/promos on supporting browsers. If :has() is unavailable, the block rule above still stacks them (sidebar first) and the page stays fully usable. */ table.main-layout > tbody > tr:has(> .content-col) { display: flex; flex-direction: column; } .content-col { order: 1; } .sidebar-col { order: 2; } /* ---- 3. Banner image scales to the screen ----------------- */ .banner-img { width: 100% !important; height: auto !important; display: block; } /* ---- 4. Top global nav: wrap + comfortable tap targets ---- */ #masthead { width: 100% !important; } #globalNav { white-space: normal; /* allow wrapping (was nowrap) */ padding: 4px 10px; line-height: 1; } #globalNav a { display: inline-block; font-size: 100%; padding: 10px 8px; margin: 2px 0; } /* ---- 5. Sidebar section links: full-width tap targets ----- */ #navBar { height: auto; } #sectionLinks a:link, #sectionLinks a:visited, #sectionLinks a:hover { display: block; padding: 14px 12px !important; font-size: 115%; } /* Sidebar promo blocks: keep readable, center the logos */ #headlines { padding: 14px 12px 18px 12px; font-size: 90%; } #headlines img { max-width: 100%; height: auto; } #headlines div[align="left"], #headlines div[align="center"] { text-align: center; } /* ---- 6. Content area: padding + legible text -------------- */ #content, #content_white { padding: 0 12px !important; box-sizing: border-box; } /* The old design uses 80% (~12px) body text — too small on a phone. Bump the content copy to a comfortable reading size. */ #content .story, #content_white .story { font-size: 15px; padding-left: 0; padding-right: 0; } /* All content images scale down, never overflow */ .content-col img, #content img, #content_white img { max-width: 100%; height: auto; } /* Divider lines (line_bw.jpg / line_wb.jpg) are squished flat via HTML height="3". The rule above (height:auto) would un-squish them back to their tall native size — so pin them thin again. */ .content-col img[src*="line_"], #content img[src*="line_"], #content_white img[src*="line_"] { width: 100% !important; height: 3px !important; } /* Floating feature images stop floating and center over text */ .feature img, .feature_r img { float: none !important; display: block; margin: 0 auto 12px auto; max-width: 100%; height: auto; } /* ---- 7. Inner image / swatch tables → wrapping grid ------- */ /* Old product pages lay swatches out in fixed-width tables */ /* (e.g. width="480" with width="80" cells). Turn them into a */ /* block flow whose cells wrap to fit the screen — the auto- */ /* layout behaviour requested. */ #content table, #content_white table { width: 100% !important; max-width: 100% !important; } #content table tbody, #content table tr, #content_white table tbody, #content_white table tr { display: block; width: 100%; } #content table td, #content_white table td { display: inline-block; width: auto !important; height: auto !important; vertical-align: top; box-sizing: border-box; } #content table td img, #content_white table td img { max-width: 100%; height: auto; } /* Contact / data table: keep label+value pairs on one line */ .story_pics_tbl { width: 100% !important; } .story_pics_tbl, .story_pics_tbl tbody { display: block; } .story_pics_tbl tr { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 2px 0; } .story_pics_tbl td { display: block; width: auto !important; } /* ---- 8. Lightbox thumbnail grid (decor page) -------------- */ #w { width: 100% !important; box-sizing: border-box; padding: 16px 8px 0; } #thumbnails ul { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; } #thumbnails ul li { float: none; width: calc(50% - 5px) !important; height: auto !important; margin: 0 !important; } #thumbnails ul li img { width: 100%; height: auto; } /* ---- 9. Embedded media (audio player / video iframe) ------ */ embed, object { max-width: 100% !important; } iframe { width: 100% !important; max-width: 100%; border: 0; } center { display: block; width: 100%; } /* ---- 10. Footer / info strips full width ------------------ */ #siteInfo { padding: 12px; box-sizing: border-box; } } /* ============================================================= */ /* SMALL PHONES — fine tuning */ /* ============================================================= */ @media screen and (max-width: 480px) { #globalNav a { /* Two-ish per row, each easy to tap */ padding: 9px 6px; font-size: 95%; } /* Slightly tighter side padding to reclaim space */ #content, #content_white { padding: 0 10px !important; } /* Swatch labels stay legible, swatches breathe a little */ #content table td, #content_white table td { padding: 4px 6px; } }