/* ------------------------------------------------------------------
   The Million Dollar Banner - milliondollarbanner.com
   Replica theme of milliondollarhomepage.com (2005). Assets recreated,
   never copied: the logo is inline SVG, the gold nav / stat boxes are
   CSS gradients standing in for navbg.gif / statbg-out.gif, and the
   "Follow" widget on the navbar is a CSS/SVG rebuild of the original.

   V6: ONE canonical canvas - 2000x500 = exactly 1,000,000 pixels. No
   zones, no cuts, no overlap, no dead corners; every block is identical
   and appears on both real banners. Chrome is scaled ~10% up from V5
   (10pt base) and the whole site reflows down to 360px - no min-width
   anywhere.

   V7: the canvas is FLAT - no zoom controls, no dark void, no sideways
   scrolling; it just renders as wide as the page column allows. The buy
   modal is down to artwork + link + hover text + a rules checkbox, and
   the checkout page is a bare status/return page. Copy speaks in pixels,
   never in blocks, and never states a fixed price rule - only the live
   "doubles in N pixels" countdown.
   ------------------------------------------------------------------ */

/* --- 1. base ----------------------------------------------------- */

html {
	background: #000000;
}

body {
	margin: 0;
	padding: 0;
	background: #000000;
	color: #000000;
	font-family: "trebuchet ms", trebuchet, helvetica, verdana, arial, sans-serif;
	font-size: 10pt;
}

td, th, input, select, textarea, button {
	font-family: "trebuchet ms", trebuchet, helvetica, verdana, arial, sans-serif;
	font-size: 10pt;
	color: #000000;
}

h1, h2, h3, h4, h5 {
	margin: 0;
}

img {
	border: 0;
}

a:link, a:visited {
	color: #000099;
	font-weight: bold;
	text-decoration: none;
	font-size: 10pt;
}

a:hover {
	text-decoration: underline;
}

hr.c {
	border: none 0;
	border-top: 1px dashed #bbbbbb;
	width: 100%;
	margin: 11px 0;
	height: 1px;
}

.gold      { color: #c69b1d; }
.red       { color: #cc0000; font-weight: bold; }
.red2      { color: #cc0000; font-weight: bold; font-size: 9pt; }
.grey      { color: #999999; font-weight: bold; font-size: 9pt; }
.greybold  { color: #cccccc; font-weight: bold; }
.statwhite { color: #ffffff; font-weight: bold; }
.statgreen { color: #33ff00; font-weight: bold; }
.statred   { color: #ff0000; font-weight: bold; }
.nowrap    { white-space: nowrap; }
.auction   { color: #8a6d14; font-weight: bold; }

h2.gold, h3.gold, h4.gold { color: #c69b1d; }

/* --- 2. page column ----------------------------------------------- */

#page {
	width: 100%;
	margin: 0 auto;
	background: #e1e1e1;
	border-left: 1px solid #646464;
	border-right: 1px solid #646464;
	box-sizing: border-box;
	text-align: center;
}

/* The classic 1002px MDH column, but only when there is room for it. */
@media (min-width: 1041px) {
	body.narrow #page { width: 1002px; }
}

.hstrip {
	height: 1px;
	background: #646464;
	font-size: 0;
	line-height: 0;
}

/* --- 3. top logo bar ---------------------------------------------- */

#toplogo {
	position: relative;
	height: 50px;
	background: #646464;
	overflow: hidden;
	text-align: center;
}

#toplogo a.logolink,
#toplogo a.logolink:link,
#toplogo a.logolink:visited {
	position: absolute;
	left: 12px;
	top: 4px;
	display: block;
	line-height: 0;
	border: 0;
	text-decoration: none;
}

#logo {
	display: block;
	width: 462px;
	height: 42px;
}

body.narrow #toplogo a.logolink {
	left: 9px;
	top: 9px;
}

body.narrow #logo {
	width: 352px;
	height: 32px;
}

/* Gold bubbly 3D letterform, in the spirit of the original logo-tm.gif:
   layer 1 = extruded shadow face, layer 2 = dark brown outline,
   layer 3 = warm gold gradient face. */
.logo-shade,
.logo-outline,
.logo-face {
	font-family: "trebuchet ms", trebuchet, verdana, helvetica, arial, sans-serif;
	font-size: 27px;
	font-weight: 900;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.logo-shade {
	fill: #33200a;
	stroke: #33200a;
	stroke-width: 7px;
}

.logo-outline {
	fill: #5c3c0c;
	stroke: #5c3c0c;
	stroke-width: 6.5px;
}

.logo-face {
	fill: url(#mdbGold);
	stroke: none;
}

.logo-tm {
	font-family: "trebuchet ms", trebuchet, verdana, helvetica, arial, sans-serif;
	font-size: 11px;
	font-weight: bold;
	fill: #f7e089;
}

/* The original toptag: soft warm-white rounded Trebuchet on the grey bar,
   with a little 3D gold bead as the separator. */
#toptag {
	position: absolute;
	left: 500px;
	top: 0;
	height: 50px;
	line-height: 50px;
	color: #f0ede6;
	font-family: "trebuchet ms", trebuchet, helvetica, verdana, arial, sans-serif;
	font-weight: bold;
	font-size: 15px;
	letter-spacing: 0.2px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
	white-space: nowrap;
}

body.narrow #toptag {
	left: 376px;
	font-size: 14px;
}

/* gold bullet dot - a bead, not a bullet character */
#toptag .tagdot {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 10px;
	vertical-align: 1px;
	border-radius: 50%;
	background: #d9ab22;
	background: radial-gradient(circle at 32% 28%, #fff6cf 0%, #f4d364 26%, #d9ab22 62%, #96700f 100%);
	box-shadow: inset 0 0 0 1px rgba(78, 55, 6, 0.5), 0 1px 1px rgba(0, 0, 0, 0.5);
}

#stats {
	position: absolute;
	top: 5px;
	right: 11px;
	width: 190px;
	height: 41px;
	padding: 0 4px;
	background: #5a5a5a;
	border: 1px solid #7d7d7d;
	border-radius: 3px;
	box-sizing: border-box;
	text-align: center;
	font-size: 10pt;
	overflow: hidden;
}

#stats .statline {
	display: block;
	height: 21px;
	line-height: 21px;
}

/* the rule, stated verbatim under the live price */
#stats .statnext {
	height: 17px;
	line-height: 17px;
	color: #cfcfcf;
	font-size: 9pt;
	font-weight: bold;
}

#stats a:link, #stats a:visited {
	color: #33ff00;
}

/* --- 4. navbar ---------------------------------------------------- */

#navbar {
	position: relative;
	height: 31px;
	background: #c69b1d;
	background: linear-gradient(#e2b52c, #d9ab22 45%, #c69b1d 100%);
	text-align: center;
	overflow: hidden;
}

#links {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	height: 31px;
	line-height: 31px;
	text-align: center;
	white-space: nowrap;
}

#links .sep {
	color: #000000;
	font-weight: bold;
	font-size: 10pt;
	padding: 0 7px;
}

a.nav:link, a.nav:visited {
	color: #000000;
	font-weight: bold;
	text-decoration: none;
	font-size: 10pt;
}

a.nav:hover {
	text-decoration: underline;
}

/* --- 4b. the Follow widget (replica of the original MDH button) ----
   A rounded 3D white button sitting on the gold navbar, with a small
   white speech-bubble tab clipped to its right shoulder. */

a.followwidget,
a.followwidget:link,
a.followwidget:visited {
	position: absolute;
	left: 9px;
	top: 3px;
	height: 25px;
	display: flex;
	align-items: stretch;
	text-decoration: none;
	color: #000000;
	font-weight: bold;
	font-size: 9pt;
	line-height: 23px;
	white-space: nowrap;
}

a.followwidget:hover {
	text-decoration: none;
}

.fw-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 9px;
	background: #f2f2f2;
	background: linear-gradient(#ffffff, #f6f6f6 48%, #dcdcdc 100%);
	border: 1px solid #8b8b8b;
	border-radius: 4px;
	box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(0, 0, 0, 0.35);
	color: #000000;
}

.fw-x {
	display: block;
	width: 12px;
	height: 12px;
	fill: #000000;
	flex: 0 0 auto;
}

.fw-label {
	display: block;
}

.fw-bubble {
	position: relative;
	margin-left: 8px;
	display: flex;
	align-items: center;
	padding: 0 9px;
	background: #ffffff;
	background: linear-gradient(#ffffff, #f6f6f6 48%, #e4e4e4 100%);
	border: 1px solid #8b8b8b;
	border-radius: 4px;
	box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(0, 0, 0, 0.35);
	color: #000000;
}

/* the little tail that points back at the button */
.fw-bubble::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 50%;
	margin-top: -5px;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-right: 7px solid #8b8b8b;
}

.fw-bubble::after {
	content: "";
	position: absolute;
	left: -5px;
	top: 50%;
	margin-top: -4px;
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-right: 6px solid #fbfbfb;
}

a.followwidget:hover .fw-btn,
a.followwidget:hover .fw-bubble {
	background: #ffffff;
	border-color: #5f5f5f;
}

a.followwidget:active .fw-btn {
	background: linear-gradient(#e2e2e2, #f2f2f2);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* --- 5. ticker strip ---------------------------------------------- */

#ticker {
	background: #d4d4d4;
	min-height: 26px;
	line-height: 26px;
	text-align: center;
	font-size: 10pt;
	white-space: nowrap;
	overflow: hidden;
	padding: 0 8px;
}

#ticker .tk {
	color: #555555;
	font-weight: bold;
}

#ticker .dot {
	color: #999999;
	padding: 0 9px;
}

#ticker b {
	color: #000000;
}

/* --- 6. the banner (flat, fit-to-column) --------------------------

   No zoom, no void, no sideways scrolling: the canvas is just a block on
   the page that renders as wide as the column allows. grid.js may set an
   explicit style.width; max-width:100% keeps it inside the column either
   way, and height:auto preserves the 4:1 aspect from the 2000x500
   attributes. Nothing here may fix a width.                            */

#banner-wrap {
	width: 100%;
	background: #e1e1e1;
	border-top: 1px solid #646464;
	border-bottom: 1px solid #646464;
	line-height: 0;
	font-size: 0;
}

#banner-scroll {
	width: 100%;
	background: #e1e1e1;
	text-align: center;
	line-height: 0;
	font-size: 0;
}

#pixels-banner {
	position: relative;
	display: block;
	width: 100%;
	max-width: 2000px;
	margin: 0 auto;
	background: #e9e9e9;
	line-height: 0;
	font-size: 0;
	scroll-margin-top: 0;
}

#grid-banner {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
	cursor: crosshair;
	background: #e9e9e9;
	image-rendering: pixelated;
	touch-action: none;
}

/* --- 7. floating selection bar ------------------------------------- */

/* Hidden by default with the same defensive convention as #d / #buy-modal:
   both markers present = hidden, removing either one reveals it. */
#sel-info-banner {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	z-index: 150;
	display: flex;
	align-items: center;
	gap: 13px;
	max-width: 94vw;
	padding: 9px 11px;
	background: #e1e1e1;
	border: 1px solid #646464;
	border-top: 3px solid #c69b1d;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
	text-align: left;
	font-size: 10pt;
	line-height: 18px;
	color: #333333;
	white-space: nowrap;
}

#sel-info-banner[hidden].hidden { display: none; }
#sel-info-banner.show.show, #sel-info-banner.visible.visible, #sel-info-banner.open.open { display: flex; }

#sel-text-banner {
	display: block;
	color: #333333;
	overflow: hidden;
	text-overflow: ellipsis;
}

#sel-text-banner b {
	color: #000000;
}

#sel-text-banner .selhint,
.selhint {
	color: #777777;
	font-size: 9pt;
	font-weight: normal;
}

#buy-btn-banner {
	flex: 0 0 auto;
}

#sel-clear {
	flex: 0 0 auto;
	padding: 2px 8px;
	font-size: 10pt;
	line-height: 16px;
}

/* --- 8. buttons + form controls ------------------------------------ */

button,
input[type="submit"] {
	font-family: "trebuchet ms", trebuchet, helvetica, verdana, arial, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	color: #000000;
	background: #d9ab22;
	background: linear-gradient(#e6bb33, #d9ab22 50%, #c69b1d 100%);
	border: 1px solid #7a5f0d;
	padding: 4px 13px;
	cursor: pointer;
	line-height: normal;
}

button:hover,
input[type="submit"]:hover {
	background: linear-gradient(#f2ca4b, #e2b52c 50%, #d0a41f 100%);
}

button:active,
input[type="submit"]:active {
	background: #c69b1d;
}

button[disabled],
button[disabled]:hover,
button.is-disabled,
button.is-disabled:hover {
	background: #bdbdbd;
	border-color: #939393;
	color: #6b6b6b;
	cursor: default;
}

button.plain {
	background: #e8e8e8;
	background: linear-gradient(#f4f4f4, #e0e0e0);
	border: 1px solid #888888;
	color: #333333;
}

button.plain:hover {
	background: linear-gradient(#ffffff, #ebebeb);
}

input[type="text"],
input[type="url"],
input[type="email"],
input[type="file"],
textarea {
	font-family: "trebuchet ms", trebuchet, helvetica, verdana, arial, sans-serif;
	font-size: 10pt;
	color: #000000;
	background: #ffffff;
	border: 1px solid #888888;
	padding: 4px 5px;
	width: 100%;
	box-sizing: border-box;
}

textarea {
	height: 60px;
	resize: vertical;
}

input[type="range"] {
	width: 100%;
	accent-color: #c69b1d;
	cursor: pointer;
}

input:focus, textarea:focus {
	outline: 1px solid #c69b1d;
}

/* --- 9. page content panel (faq + banners + checkout) --------------- */

#pagecontent {
	background: #e1e1e1;
	padding: 11px;
	width: auto;
	max-width: 660px;
	margin: 0 auto;
	box-sizing: border-box;
	text-align: left;
	vertical-align: top;
	overflow-wrap: break-word;
}

#pagecontent.wide600 {
	max-width: 940px;
}

#pagecontent h2 {
	font-size: 16.5pt;
	color: #c69b1d;
	margin: 7px 0 9px;
}

#pagecontent h4 {
	font-size: 11pt;
	color: #c69b1d;
	margin: 15px 0 5px;
}

#pagecontent p {
	margin: 0 0 10px;
	line-height: 16.5pt;
}

#pagecontent ol,
#pagecontent ul {
	margin: 0 0 10px;
	padding-left: 22px;
	line-height: 16.5pt;
}

#pagecontent li {
	margin-bottom: 4px;
}

#pagecontent .q {
	color: #c69b1d;
	font-size: 11pt;
	font-weight: bold;
	margin: 18px 0 5px;
}

#pagecontent .a {
	margin: 0 0 7px;
	line-height: 16.5pt;
}

#pagecontent dl {
	margin: 0 0 10px;
	line-height: 16.5pt;
}

#pagecontent dt {
	font-weight: bold;
	margin-top: 6px;
}

#pagecontent dd {
	margin: 0 0 0 18px;
}

.contentwrap {
	padding: 15px 0 5px;
}

.kicker {
	color: #cc0000;
	font-weight: bold;
}

.pricebox {
	border: 1px solid #646464;
	background: #d4d4d4;
	padding: 7px 9px;
	margin: 11px 0;
	text-align: center;
	font-weight: bold;
	line-height: 16.5pt;
}

.toc {
	background: #d4d4d4;
	border: 1px solid #b4b4b4;
	padding: 9px 11px 9px 28px;
	margin: 0 0 13px;
	line-height: 16.5pt;
}

.smallprint {
	color: #666666;
	font-size: 9pt;
	line-height: 13pt;
}

/* --- 9b. era schedule table ---------------------------------------- */

/* wraps any wide table so it scrolls itself instead of the page */
.tablescroll {
	overflow-x: auto;
	margin: 11px 0 13px;
	-webkit-overflow-scrolling: touch;
}

table.tiers {
	border-collapse: collapse;
	width: 100%;
	min-width: 460px;
	background: #ffffff;
	border: 1px solid #646464;
}

table.tiers caption {
	caption-side: top;
	text-align: left;
	color: #c69b1d;
	font-weight: bold;
	font-size: 11pt;
	padding: 0 0 5px;
}

table.tiers th,
table.tiers td {
	border: 1px solid #c2c2c2;
	padding: 4px 8px;
	text-align: left;
	line-height: 15.5pt;
}

table.tiers thead th {
	background: #d4d4d4;
	color: #333333;
	font-weight: bold;
	white-space: nowrap;
}

table.tiers td.price {
	font-weight: bold;
	color: #cc0000;
	white-space: nowrap;
}

table.tiers tbody tr:nth-child(odd) td {
	background: #f6f6f6;
}

table.tiers tfoot td {
	background: #d4d4d4;
	font-weight: bold;
}

/* --- 10. diagrams (static SVG on faq + banners) -------------------- */

.cutdiagram {
	border: 1px solid #646464;
	background: #ffffff;
	padding: 5px;
	margin: 11px 0 5px;
	line-height: 0;
	text-align: center;
}

.cutdiagram svg {
	display: block;
	width: 100%;
	height: auto;
}

.diagcap {
	color: #666666;
	font-size: 9pt;
	line-height: 13pt;
	margin: 0 0 13px;
}

/* --- 11. banners page ---------------------------------------------- */

.bannerframe {
	border: 1px solid #646464;
	background: #ffffff;
	padding: 3px;
	margin-bottom: 7px;
	line-height: 0;
}

.bannerframe img {
	display: block;
	width: 100%;
	height: auto;
	background: #e9e9e9;
}

.bannercols {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 7px;
}

.bannercol {
	flex: 1 1 400px;
	min-width: 0;
	box-sizing: border-box;
}

.bannercol h4 {
	color: #c69b1d;
	font-size: 11pt;
	margin: 0 0 6px;
}

.dllist {
	margin: 0 0 10px;
	padding-left: 20px;
	line-height: 16.5pt;
	overflow-wrap: break-word;
}

.dlnote {
	color: #666666;
	font-size: 9pt;
	font-weight: normal;
}

/* --- 12. hover tooltip (replica of the original #d box) ------------- */

/* Hidden while BOTH the [hidden] attribute and .hidden class are set, so
   grid.js can reveal it by dropping either one, by adding .show/.visible,
   or with an inline style - whichever it prefers. */
#d {
	position: absolute;
	z-index: 99;
	display: block;
	left: 0;
	top: 0;
	background: #ffffff;
	border: 1px solid #ff0000;
	color: #000000;
	font-family: "trebuchet ms", trebuchet, helvetica, verdana, arial, sans-serif;
	font-size: 10pt;
	padding: 3px 5px;
	white-space: nowrap;
	pointer-events: none;
	max-width: 460px;
	max-width: min(460px, calc(100vw - 24px));
	overflow: hidden;
	text-overflow: ellipsis;
}

#d[hidden].hidden { display: none; }
#d.show.show, #d.visible.visible, #d.open.open { display: block; }

/* --- 13. buy modal --------------------------------------------------- */

#buy-modal {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	background: rgba(0, 0, 0, 0.62);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 3vh 10px 30px;
	box-sizing: border-box;
	overflow: auto;
	text-align: left;
}

#buy-modal[hidden].hidden { display: none; }
#buy-modal.open.open, #buy-modal.show.show, #buy-modal.visible.visible { display: flex; }

.modalbox {
	width: 560px;
	max-width: 100%;
	margin: 0 auto;
	background: #e1e1e1;
	border: 1px solid #646464;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
	box-sizing: border-box;
}

.modalhead {
	background: #c69b1d;
	background: linear-gradient(#e2b52c, #d9ab22 45%, #c69b1d 100%);
	color: #000000;
	font-weight: bold;
	font-size: 10pt;
	letter-spacing: 1px;
	height: 22px;
	line-height: 22px;
	padding: 0 9px;
	border-bottom: 1px solid #646464;
}

.modalbody {
	padding: 13px;
}

.modalbody p {
	margin: 0 0 10px;
	line-height: 15.5pt;
}

.buysummary {
	background: #d4d4d4;
	border: 1px solid #a8a8a8;
	padding: 7px 9px;
	margin-bottom: 11px;
	line-height: 16.5pt;
}

.buysummary .sumlabel {
	display: inline-block;
	width: 96px;
	color: #555555;
	font-weight: bold;
}

.buysummary .sumrow {
	display: block;
}

/* Optional fine-grained slots: grid.js may fold pixel-count and era
   breakdown detail into #buy-pixels / #buy-total instead, in which case
   these collapse and leave no gap. */
#buy-bannerpx {
	display: block;
}

#buy-breakdown {
	display: block;
	border-top: 1px dashed #a8a8a8;
	margin-top: 6px;
	padding-top: 5px;
	color: #444444;
	font-size: 9pt;
	line-height: 14pt;
}

#buy-bannerpx:empty,
#buy-breakdown:empty { display: none; }

.field {
	margin-bottom: 9px;
}

.field label {
	display: block;
	font-weight: bold;
	color: #333333;
	margin-bottom: 3px;
}

.field .hint {
	display: block;
	color: #777777;
	font-size: 9pt;
	font-weight: normal;
	margin-top: 3px;
	line-height: 13pt;
}

/* --- 13b. artwork upload + adjuster --------------------------------- */

.checker,
#adjust-canvas,
#pay-art {
	background-color: #ffffff;
	background-image:
		linear-gradient(45deg, #d7d7d7 25%, transparent 25%, transparent 75%, #d7d7d7 75%),
		linear-gradient(45deg, #d7d7d7 25%, transparent 25%, transparent 75%, #d7d7d7 75%);
	background-size: 16px 16px;
	background-position: 0 0, 8px 8px;
}

.artworkfield {
	border-top: 1px dashed #bbbbbb;
	padding-top: 10px;
	margin-top: 5px;
}

/* Position / Crop tabs above the adjuster. grid.js toggles .active. */
.modetabs {
	display: flex;
	align-items: flex-end;
	margin: 10px 0 0;
	line-height: 0;
}

.modetab {
	padding: 4px 16px;
	margin-right: 3px;
	font-family: "trebuchet ms", trebuchet, helvetica, verdana, arial, sans-serif;
	font-size: 9.5pt;
	font-weight: bold;
	line-height: 16px;
	color: #4a4a4a;
	background: #dcdcdc;
	background: linear-gradient(#f1f1f1, #dcdcdc 55%, #cdcdcd 100%);
	border: 1px solid #9a9a9a;
	border-bottom: 1px solid #646464;
	border-radius: 3px 3px 0 0;
	cursor: pointer;
}

.modetab:hover {
	background: linear-gradient(#ffffff, #ececec 55%, #dedede 100%);
	color: #000000;
}

.modetab.active,
.modetab.active:hover {
	color: #000000;
	background: linear-gradient(#f7dd93, #e2b52c 55%, #d9ab22 100%);
	border-color: #7a5f0d;
}

.adjustwrap {
	margin: 0 0 5px;
	padding: 8px;
	text-align: center;
	line-height: 0;
	background: #d4d4d4;
	border: 1px solid #646464;
	overflow-x: auto;
}

/* max-width stays 480 on a roomy modal but never exceeds its container, so
   a phone can't be pushed sideways by the adjuster. */
#adjust-canvas {
	display: block;
	margin: 0 auto;
	max-width: 480px;
	max-width: min(480px, 100%);
	max-height: 260px;
	border: 1px solid #646464;
	cursor: move;
	touch-action: none;
	image-rendering: pixelated;
}

.zoomrow {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 9px 0 3px;
	line-height: 18px;
}

.zoomrow .zoomlabel {
	flex: 0 0 auto;
	color: #555555;
	font-weight: bold;
	font-size: 9pt;
}

#adjust-zoom {
	flex: 1 1 auto;
}

.adjusthint {
	display: block;
	color: #777777;
	font-size: 9pt;
	font-weight: normal;
	text-align: center;
	line-height: 13pt;
	margin-top: 3px;
}

/* one compact line above the submit row */
.ruleschk {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 11px 0 0;
	line-height: 16pt;
}

.ruleschk input[type="checkbox"] {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin: 3px 0 0;
	accent-color: #c69b1d;
	cursor: pointer;
}

.ruleschk label {
	font-weight: bold;
	color: #333333;
	cursor: pointer;
}

.modalfoot {
	border-top: 1px dashed #bbbbbb;
	padding-top: 11px;
	margin-top: 5px;
	text-align: right;
}

.modalfoot button {
	margin-left: 7px;
}

/* Result panel: errors only (success redirects to the checkout page).
   Stays out of the way while it is empty AND still carries both hidden
   markers, so any of grid.js's likely reveal styles work. */
#buy-result {
	display: block;
	background: #ffffff;
	border: 1px solid #646464;
	border-left: 4px solid #cc0000;
	padding: 9px 11px;
	margin-bottom: 11px;
	line-height: 15.5pt;
	word-wrap: break-word;
}

#buy-result[hidden].hidden:empty { display: none; }
#buy-result.show.show, #buy-result.visible.visible, #buy-result.open.open { display: block; }
#buy-result.error { border-left-color: #cc0000; }

/* --- 14. checkout page ---------------------------------------------- */

.payart {
	border: 1px solid #646464;
	background: #ffffff;
	padding: 3px;
	margin: 0 0 9px;
	line-height: 0;
	text-align: center;
	min-height: 40px;
	overflow-x: auto;
}

#pay-art {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	image-rendering: pixelated;
}

/* one line: "1,200 pixels - 40x30 at 600,200 - $120" */
#pay-summary {
	background: #d4d4d4;
	border: 1px solid #a8a8a8;
	padding: 9px 11px;
	margin: 0 0 11px;
	line-height: 17.5pt;
	font-weight: bold;
}

/* status line - collapses entirely while pay.js has not written to it */
#pay-status {
	display: block;
	margin: 0 0 13px;
	line-height: 16.5pt;
	color: #333333;
}

#pay-status:empty { display: none; }

.payfoot {
	border-top: 1px dashed #bbbbbb;
	padding-top: 13px;
	margin-top: 5px;
	text-align: center;
}

/* Shipped with both hidden markers so it is invisible until pay.js shows
   it (order still pending); dropping either marker reveals it. */
#pay-btn {
	display: inline-block;
	padding: 7px 24px;
	font-size: 11pt;
}

#pay-btn[hidden].hidden { display: none; }
#pay-btn.show.show, #pay-btn.visible.visible, #pay-btn.open.open { display: inline-block; }

#pay-result {
	display: block;
	background: #ffffff;
	border: 1px solid #646464;
	border-left: 4px solid #c69b1d;
	padding: 9px 11px;
	margin: 13px 0 0;
	line-height: 15.5pt;
	text-align: left;
	word-wrap: break-word;
}

#pay-result[hidden].hidden { display: none; }
#pay-result.show.show, #pay-result.visible.visible, #pay-result.open.open { display: block; }
#pay-result.error { border-left-color: #cc0000; }

/* --- 15. footer ------------------------------------------------------ */

#note {
	color: #999999;
	font-family: "trebuchet ms", trebuchet, arial, helvetica, sans-serif;
	font-size: 9pt;
	background: #646464;
	text-align: center;
	padding: 7px 11px;
	min-height: 26px;
	box-sizing: border-box;
	line-height: 14pt;
}

#note a:link, #note a:visited {
	color: #cccccc;
	font-size: 9pt;
}

/* Privacy / Terms, on their own line above the copyright */
#note .footlinks {
	display: block;
	margin-bottom: 4px;
}

#note .footdot {
	color: #8a8a8a;
	padding: 0 6px;
}

.contentpage #note {
	margin-top: 20px;
}

/* --- 15b. legal pages ------------------------------------------------ */

.lastupd {
	color: #666666;
	font-size: 9pt;
	font-weight: bold;
	margin: 0 0 13px;
}

/* the "short version" panel at the top of privacy / terms */
.nutshell {
	background: #d4d4d4;
	border: 1px solid #646464;
	border-left: 4px solid #c69b1d;
	padding: 10px 13px;
	margin: 0 0 15px;
}

.nutshell p {
	margin: 0 0 7px;
	line-height: 16.5pt;
}

.nutshell p:last-child {
	margin-bottom: 0;
}

#pagecontent .legal {
	margin: 0 0 9px;
	line-height: 16.5pt;
}

/* ==================================================================
   16. RESPONSIVE - the chrome reflows all the way down to 360px.
   The banner viewport is the only thing that ever scrolls sideways.
   ================================================================== */

/* --- 16a. desktop squeeze ------------------------------------------ */

@media (max-width: 1500px) {
	body:not(.narrow) #ticker { font-size: 9.5pt; }
	body:not(.narrow) #ticker .dot { padding: 0 7px; }
}

@media (max-width: 1240px) {
	body:not(.narrow) #ticker { font-size: 9pt; }
	body:not(.narrow) #ticker .dot { padding: 0 6px; }
}

@media (max-width: 1120px) {
	body:not(.narrow) #toptag { display: none; }
	body:not(.narrow) #links {
		position: static;
		transform: none;
		text-align: right;
		padding-right: 11px;
	}
}

/* --- 16b. tablet: everything goes fluid ---------------------------- */

@media (max-width: 1040px) {
	#toptag { display: none; }

	#links {
		position: static;
		transform: none;
		text-align: right;
		padding-right: 11px;
	}

	body.narrow #toplogo a.logolink { top: 4px; }

	#ticker {
		height: auto;
		line-height: 1.55;
		white-space: normal;
		padding: 5px 10px;
		font-size: 9.5pt;
	}

	#ticker .dot { padding: 0 6px; }
}

/* --- 16c. phones: stacked chrome ----------------------------------- */

@media (max-width: 860px) {
	/* logo gets its own row, price box sits under it */
	#toplogo {
		height: auto;
		padding: 9px 11px 11px;
		text-align: left;
	}

	#toplogo a.logolink,
	#toplogo a.logolink:link,
	#toplogo a.logolink:visited,
	body.narrow #toplogo a.logolink {
		position: static;
		display: inline-block;
		left: auto;
		top: auto;
	}

	#stats {
		position: static;
		display: block;
		width: auto;
		max-width: 260px;
		height: auto;
		margin: 9px 0 0;
		padding: 3px 8px;
		right: auto;
		top: auto;
		text-align: left;
	}

	#stats .statline { height: auto; line-height: 1.4; }
	#stats .statnext { height: auto; line-height: 1.4; }

	/* navbar wraps; the follow widget joins the flow and stays tappable */
	#navbar {
		height: auto;
		overflow: visible;
		padding: 7px 9px 8px;
		text-align: left;
	}

	a.followwidget,
	a.followwidget:link,
	a.followwidget:visited {
		position: static;
		display: inline-flex;
		height: 30px;
		line-height: 28px;
		margin: 0 0 6px;
	}

	#links {
		position: static;
		transform: none;
		height: auto;
		line-height: normal;
		white-space: normal;
		text-align: left;
		padding-right: 0;
	}

	#links a.nav {
		display: inline-block;
		padding: 8px 3px;
		line-height: 24px;
	}

	#links .sep { padding: 0 5px; }

	/* selection panel: full-width dock at the bottom */
	#sel-info-banner {
		left: 0;
		right: 0;
		bottom: 0;
		max-width: none;
		transform: none;
		flex-wrap: wrap;
		gap: 9px;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		white-space: normal;
	}

	#sel-text-banner {
		flex: 1 1 100%;
		white-space: normal;
	}

	#sel-info-banner button {
		min-height: 40px;
		flex: 1 1 auto;
	}

	#sel-clear { flex: 0 0 auto; min-width: 48px; }

	/* buy modal goes near-fullscreen and scrolls */
	#buy-modal {
		padding: 0;
		align-items: stretch;
	}

	.modalbox {
		width: 100%;
		max-width: none;
		border-left: 0;
		border-right: 0;
	}

	.modalbody { padding: 13px 13px 28px; }

	#buy-modal input[type="text"],
	#buy-modal input[type="url"],
	#buy-modal input[type="email"],
	#buy-modal input[type="file"],
	#buy-modal select { min-height: 42px; }

	#buy-modal textarea { min-height: 76px; }

	.modalfoot { text-align: center; }

	.modalfoot button {
		min-height: 44px;
		padding: 10px 18px;
		margin: 0 4px;
	}

	.modetab { min-height: 40px; }

	#adjust-zoom { height: 34px; }

	.contentwrap { padding: 11px 0 4px; }
	.contentpage #note { margin-top: 14px; }
}

@media (pointer: coarse) {
	#links a.nav {
		display: inline-block;
		padding: 8px 3px;
		line-height: 24px;
	}
}

/* --- 16d. small phones --------------------------------------------- */

@media (max-width: 620px) {
	body.narrow #logo,
	body:not(.narrow) #logo {
		width: 308px;
		height: 28px;
	}


	#pagecontent { padding: 10px; }

	#pagecontent h2 { font-size: 15pt; }

	.bannercols { gap: 18px; }

	.ruleschk label { line-height: 1.5; }

	#pay-btn {
		width: 100%;
		min-height: 46px;
	}

	.zoomrow { gap: 7px; }
}

@media (max-width: 430px) {
	body.narrow #logo,
	body:not(.narrow) #logo {
		width: 248px;
		height: 23px;
	}

	#toplogo { padding: 8px 9px 10px; }

	#navbar { padding: 6px 8px 7px; }

	#ticker { font-size: 9pt; padding: 5px 8px; }


	#stats { max-width: none; }

	.modalbody { padding: 11px 11px 26px; }

	.modalfoot button {
		display: block;
		width: 100%;
		margin: 0 0 8px;
	}

	.buysummary .sumlabel {
		display: block;
		width: auto;
		margin-top: 4px;
	}

	#note { font-size: 8.5pt; padding: 7px 9px; }

	#note a:link, #note a:visited { font-size: 8.5pt; }
}

@media (max-width: 370px) {
	body.narrow #logo,
	body:not(.narrow) #logo {
		width: 214px;
		height: 20px;
	}

}