/* ============================================================ Sitewide layout fix — 2026-05-06 Goal: every non-landing page (galleries, detail pages, about-us, contact, /fullsite/, etc.) was hard-coded to 960px width with a dark-red body background that showed as red bars on wide monitors. This file: - kills the dark-red body / #wrapper background - paints the red ribbon on #header-wrapper directly (so the header strip stretches edge-to-edge of the screen) - caps every top-level container at 1400px and centers it Loaded LAST in so it wins the cascade over /core/core.css and /skin/vert-red.css. ============================================================ */ body { background: #fff !important; } #wrapper { background: none !important; } /* Legacy stretch-light.css paints #main-wrapper light grey (#eee) behind the inner content. Kill it so the whole page below the red ribbon is uniform white. */ #main-wrapper { background: #fff !important; background-image: none !important; } /* The red header strip — was a sprite (vert-red.png) on #wrapper. Re-applied here on #header-wrapper so it scales to any width. */ #header-wrapper { background: #6b0e0e !important; background-image: linear-gradient(180deg, #7a1414 0%, #611010 55%, #4a0808 100%) !important; } /* All top-level containers cap at 1600px and center. Auto-margins mean on smaller monitors the page just fills available width — nothing breaks below ~1600px. Above ~1600px the page centers with whitespace on each side. */ #header, #main, #main-inner, #main-menu, #footer, #footer-inner, #copyright { width: auto !important; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; } /* Slideshows on inner/dealer pages were hard-coded to 940px and left-anchored to the legacy 960px column. Just center the wrapper — DO NOT touch the inner .slideshow / .slide dimensions because the jQuery cycle plugin absolutely-positions slides inside a fixed-size box. Forcing height:auto collapses the container and the slideshow vanishes. */ #homepage-slideshow, #homepage .slideshow-wrapper, #anything-slider { margin-left: auto !important; margin-right: auto !important; } /* Breathing room between the nav menu and whatever sits at the top of #main (page H1 on gallery/about pages, slideshow on home pages, etc.). Applied to #main so the nav menu itself stays in its original position. */ #main { padding-top: 40px !important; } /* Hide the legacy 960px-sprite chrome (top/middle/bottom decorative borders). */ #homepage-slideshow .slideshow-top, #homepage .slideshow-wrapper .slideshow-top, #anything-slider .slideshow-top { display: none !important; } #homepage-slideshow .slideshow-middle, #homepage .slideshow-wrapper .slideshow-middle, #anything-slider .slideshow-middle { background-image: none !important; background-color: transparent !important; padding: 0 !important; } #homepage-slideshow .slideshow-bottom, #homepage .slideshow-wrapper .slideshow-bottom, #anything-slider .slideshow-bottom { background-image: none !important; background-color: transparent !important; } /* The actual .slideshow box (940x350) sits left-aligned inside the wrapper because the legacy CSS has margin:0. Center it by giving it auto side margins — keep its width & height so cycle.js can position slides. */ #homepage-slideshow .slideshow, #homepage .slideshow-wrapper .slideshow, #anything-slider .slideshow { margin-left: auto !important; margin-right: auto !important; } /* Center the prev/next arrows + dots row underneath the slideshow too. */ #homepage-slideshow .slideshow-arrows, #homepage-slideshow .slideshow-dots, #homepage .slideshow-wrapper .slideshow-arrows, #homepage .slideshow-wrapper .slideshow-dots { text-align: center; } /* Don't override #content / #sidebar widths — let the legacy float layout stay intact. The 1200px #main-inner cap above keeps the column layout from stretching weirdly. */ /* ----- Gallery tiles: 3x bigger images, 2x bigger labels, no Frame Detail button (the image itself is the link to the detail page). ----- */ /* On gallery pages the sidebar is mostly the same Information Directory navigation — hide it so the gallery uses the full content width and the tiles can be much larger. The categories are already in the top nav. */ body[class*="gallery"] #sidebar, .gallery-item ~ #sidebar { display: none; } /* Fallback: any page whose URL ends in -gallery.html — handled via JS-free selector trick using the body's data-page attribute would be cleaner, but for now just always allow the gallery to expand: */ #content:has(#gallery-1, .gallery-item) { width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 auto !important; } #content:has(#gallery-1, .gallery-item) ~ #sidebar { display: none !important; } /* Use CSS grid for the gallery so gap = visible space between tiles. */ #gallery-1, .gallery-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 80px 100px !important; /* row-gap col-gap — 4x the previous ~24px */ padding: 24px 30px 60px 30px !important; width: 100% !important; max-width: none !important; } /* Tiles fill their grid cell — no float, no width%, no padding. */ .gallery-item { width: auto !important; float: none !important; text-align: center; padding: 0 !important; margin: 0 !important; box-sizing: border-box; } .gallery-item .gallery-icon { margin: 0 0 8px 0; } .gallery-item img { width: 100% !important; max-width: 460px; /* allow tiles to fill the wider 1600px container */ height: auto; display: block; margin: 0 auto; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; border: 1px solid #e6dfcf; background: #fff; position: relative; z-index: 1; } .gallery-item a { display: inline-block; /* needed so transform-origin / z-index behave */ position: relative; } .gallery-item a:hover { z-index: 10; /* lifts the hovered tile above neighbors */ } .gallery-item a:hover img { transform: scale(1.18); box-shadow: 0 12px 32px rgba(0,0,0,0.28); border-color: #b30000; } .gallery-item p { font-size: 28px !important; margin: 16px 0 8px 0 !important; font-weight: 500; color: #333; font-family: 'Bodoni Moda', Didot, 'Times New Roman', serif !important; letter-spacing: 0.4px; } @media (max-width: 1100px) { #gallery-1, .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 60px 70px !important; } } @media (max-width: 640px) { #gallery-1, .gallery-grid { grid-template-columns: 1fr !important; gap: 40px !important; } .gallery-item p { font-size: 22px !important; } } /* Edge gutter so content doesn't kiss the screen on narrower monitors. */ @media (max-width: 1500px) { #header, #main-inner, #footer-inner, #copyright { padding-left: 24px; padding-right: 24px; box-sizing: border-box; } } /* The legacy decorative chrome (sprite top/bottom strips on #main and #footer) was sized for 960px and tiles weirdly at 1600px — hide. */ #main-top, #main-bottom, #footer-top, #footer-bottom { display: none !important; } /* Inner pages wrap the content in
…
. The .page sprite is a cream/beige texture that only fits 960px and looks off at any other width. Strip these. */ .page, .page > .top, .page > .bottom { background-image: none !important; background-color: transparent !important; } .page > .top, .page > .bottom { display: none !important; } /* Frame DETAIL pages put their content in #full-width-content > .page > .three-fourth + .one-fourth The legacy CSS hard-codes those at 680px / 214px (designed for the old 960px column). On a wide monitor that leaves a huge empty band on the right. Make them fluid percentages so on big monitors they expand to fill the space, but on smaller monitors they shrink gracefully. */ #full-width-content > .page > .three-fourth { width: 74% !important; max-width: 1200px !important; border-right: none !important; padding-right: 0 !important; box-sizing: border-box; } #full-width-content > .page > .one-fourth, #full-width-content > .page > .one-fourth.last { width: 23% !important; max-width: 360px !important; box-sizing: border-box; } /* Cap the title + description "pill" block to roughly 2x the image width (~970px). Pin it to the left so the empty space sits on the right. */ #full-width-content .three-fourth .text { max-width: 970px !important; box-sizing: border-box !important; padding: 0 !important; margin: 0 !important; } /* The pills (h2/h5) inside .text get rounded backgrounds in legacy CSS. Keep that look but tame the heavy padding so they're not enormous. */ #full-width-content .three-fourth .text h2, #full-width-content .three-fourth .text h5 { padding: 14px 22px !important; margin-bottom: 12px !important; } /* Float the main zoom image LEFT so the finish thumbnails (and their size selectors) flow next to it instead of being stuck below. */ #full-width-content .three-fourth #Zoomer { float: left !important; margin: 0 30px 20px 0 !important; max-width: 500px; } /* Listings sit to the RIGHT of the floated image. Float listings itself so it shrinks to fit the remaining horizontal space (else its full-width block + margin-left would extend past the parent and get pushed below). */ #full-width-content .three-fourth .listings { float: left; width: calc(100% - 530px); min-height: 480px; display: block; margin: 0 0 0 0; box-sizing: border-box; padding-left: 0; } #full-width-content .three-fourth .listings ul { list-style: none; padding: 0; margin: 0; display: block; } #full-width-content .three-fourth .listings ul li { float: none !important; display: inline-block; vertical-align: top; width: 230px; margin: 0 18px 24px 0 !important; padding: 0 !important; } /* Clear the image float at the END of .three-fourth so the page flows correctly below (e.g. "Customers Who Bought" tab block). */ #full-width-content .three-fourth::after { content: ""; display: block; clear: both; } /* Small screens: stack the two columns and stop floating the image. */ @media (max-width: 820px) { #full-width-content > .page > .three-fourth, #full-width-content > .page > .one-fourth { width: 100% !important; max-width: none !important; float: none !important; margin: 0 0 24px 0 !important; } #full-width-content .three-fourth #Zoomer { float: none !important; margin: 0 auto 20px auto !important; display: block; } #full-width-content .three-fourth .listings { margin-left: 0 !important; min-height: 0 !important; } #full-width-content .three-fourth .listings ul { text-align: center; } } /* Email-icon overlap fix sitewide (some pages still show "Email" text over the icon image). */ #header .social-icons .email-light, #header .social-icons .email-dark { display: inline-block !important; text-indent: -9999px !important; width: 39px !important; height: 38px !important; vertical-align: middle; overflow: hidden; } /* ---------- Slideshow hidden sitewide (per user request 2026-05-06) ----- */ #homepage-slideshow, #homepage .slideshow-wrapper, #anything-slider, .slideshow-wrapper { display: none !important; } /* ---------- VIEW CART button on dealer home ---------- The legacy login pill style only matches `a.login`. Our cart submit is a