/* 9soundware.css - VERSION 11 - includes portrait rules */ .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } .desc { padding: 15px; text-align: center; } .dropdown:hover .dropdown-content { display: block; } body { background-color: #393939; } p { color: #ff0000; margin-left: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 24px; } table { background-color: #393939; color: #ff0000; margin-left: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 24px; } td { background-color: #393939; color: #ff0000; margin-left: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 24px; } a { text-decoration: none; color: #ff0000; } a.gray { text-decoration: none; color: #808080; } .alignright { text-align: right; } .alignleft { text-align: left; } .aligncenter { text-align: center; } /* ========================================================== Responsive additions (v2) Works together with: - the viewport meta tag in includes/9header.asp - class="pageWrap" on main page/footer tables - class="prodRow" on the inner product-listing tables - class="headerTable" on the header table - class="mobile" / "tablet" / "desktop" on (set by includes/9detect.asp) ========================================================== */ html, body { margin: 0; } /* Images and video scale down instead of forcing horizontal scroll */ img { max-width: 100%; height: auto; } iframe { max-width: 100%; } /* Main page wrappers shrink with the screen */ table.pageWrap, table.headerTable { width: 100% !important; max-width: 1280px; } /* ---------- Below full desktop width: shrink the header ---------- The header keeps its single-line desktop layout (logo, mark, cart + hamburger) and simply scales down proportionally. Design width is 1280px, so: 512px logo = 40vw, 256px mark = 20vw, 128px icons = 10vw (never below 44px so they stay easy to tap). */ @media screen and (max-width: 1300px) { table.headerTable > tbody > tr > td { width: auto !important; height: auto !important; } table.headerTable table td { width: auto !important; height: auto !important; } table.headerTable img[width="512"] { width: min(512px, 40vw); } table.headerTable img[width="256"] { width: min(256px, 20vw); } table.headerTable img[width="128"] { width: clamp(44px, 10vw, 128px); } } /* ---------- Anything narrower than the 1280px design: stack the listings ---------- Covers phones, iPads both orientations, and folding phones unfolded (which report ~1000-1200px in both orientations). */ @media screen and (max-width: 1300px) { /* Stack the outer page rows too (artwork above details) */ table.pageWrap { border-spacing: 0 !important; } table.pageWrap, table.pageWrap > tbody, table.pageWrap > tbody > tr, table.pageWrap > tbody > tr > td { display: block; box-sizing: border-box; width: 100% !important; height: auto !important; } table.prodRow, table.prodRow > tbody, table.prodRow > tbody > tr, table.prodRow > tbody > tr > td { display: block; box-sizing: border-box; width: 100% !important; height: auto !important; } /* The rows of invisible 32px spacer cells force ~960px min width - drop them */ table.prodRow td[width="32"] { display: none !important; } table.pageWrap td[width="64"] { display: none !important; } /* Neutralize remaining fixed-width cells (artwork columns) */ table.pageWrap td[width="256"], table.pageWrap td[width="512"] { width: auto !important; } } /* ---------- Phones ---------- */ @media screen and (max-width: 700px) { /* Slightly smaller base text on phones */ p, table, td { font-size: 18px; } .hover-menu a { font-size: 18px; } } /* ---------- Portrait phones & tablets: bigger product artwork ---------- Landscape keeps the current layouts; these rules apply only when the device is held upright. */ /* products.asp / index.asp listings (already stacked in portrait): let the artwork use most of the screen width */ @media screen and (max-width: 1300px) and (orientation: portrait) { table.pageWrap td[width="256"] img { width: min(88vw, 512px); } } /* product.asp keeps its fixed side-by-side layout in landscape and on desktop; in portrait the artwork becomes a full-width row above the details so the image can be big. (Scoped to the fixed-width table, excluding the header, so no other page is affected.) */ @media screen and (max-width: 1300px) and (orientation: portrait) { /* Held upright, nothing may scroll sideways (landscape is unaffected) */ html, body { overflow-x: hidden; } /* Any embedded media (demo players etc.) scales down to fit */ img, iframe, object, embed, video { max-width: 100%; } /* Inner tables may not exceed the screen */ table[width="1280"]:not(.headerTable) td table { width: 100% !important; max-width: 100%; box-sizing: border-box; } table[width="1280"]:not(.headerTable) { width: 100% !important; } table[width="1280"]:not(.headerTable) > tbody > tr > td { display: block; box-sizing: border-box; width: 100% !important; height: auto !important; } table[width="1280"]:not(.headerTable) td[width="64"] { display: none; } table[width="1280"]:not(.headerTable) td table td[width="32"] { display: none; } table[width="1280"]:not(.headerTable) td[width="512"] img { width: min(92vw, 700px); } } /* ---------- Device-class hooks (set on by includes/9detect.asp) ---------- These apply by USER AGENT rather than screen width, so a phone held in landscape still gets the phone treatment. Add rules as needed, e.g.: body.mobile .something { ... } body.tablet .something { ... } */