/* adbank house style. Built from the same devices ionic1k.net still uses:
   a fixed-width centred table, a tiled background, FrontPage-era link colours,
   beveled panel edges and small Arial. Nothing here is responsive by accident,
   it just also happens not to fall over on a phone. */

:root{
  --link:#0000d7;      /* link=  */
  --vlink:#db621a;     /* vlink= */
  --alink:#b41632;     /* alink= */
  --hover:#31bbaa;     /* the one CSS rule the original site bothered with */
  --bar:#888888;
  --face:#d4d0c8;      /* win9x dialog face */
  --face-lit:#ffffff;
  --face-dim:#808080;
  --face-dark:#404040;
  --ink:#000000;
  --paper:#ffffff;
}

/* Borders and padding count inside a declared width. Without this a shell at
   width:100% plus its 1px side borders overflows the viewport by 2px. */
*,*::before,*::after{box-sizing:border-box}

/* Tiled starfield, inline so there is no second request and nothing to lose. */
html,body{max-width:100%; overflow-x:hidden}
body{
  margin:0; padding:0;
  background-color:#000018;
  background-image:url("data:image/svg+xml;charset=utf8,\
%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E\
%3Crect width='64' height='64' fill='%23000018'/%3E\
%3Ccircle cx='7' cy='11' r='.8' fill='%23ffffff' opacity='.9'/%3E\
%3Ccircle cx='31' cy='5' r='.6' fill='%23cfd8ff' opacity='.7'/%3E\
%3Ccircle cx='52' cy='19' r='.9' fill='%23ffffff' opacity='.8'/%3E\
%3Ccircle cx='18' cy='29' r='.5' fill='%23aab4ff' opacity='.6'/%3E\
%3Ccircle cx='44' cy='38' r='.7' fill='%23ffffff' opacity='.75'/%3E\
%3Ccircle cx='9' cy='48' r='.6' fill='%23dfe6ff' opacity='.65'/%3E\
%3Ccircle cx='60' cy='55' r='.8' fill='%23ffffff' opacity='.85'/%3E\
%3Ccircle cx='26' cy='58' r='.5' fill='%23b9c4ff' opacity='.55'/%3E\
%3Ccircle cx='38' cy='24' r='.4' fill='%23ffffff' opacity='.5'/%3E\
%3C/svg%3E");
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
}

a{color:var(--link)}
a:visited{color:var(--vlink)}
a:active{color:var(--alink)}
a:hover{color:var(--hover)}

/* The disclaimer strip across the top, straight off the reference site. */
.topbar{
  background:var(--bar); width:100%; padding:4px 8px; box-sizing:border-box;
  text-align:center; font-size:11px; color:#fff;
}
.topbar b{color:#ffe98a}

.shell{width:760px; margin:0 auto; background:var(--paper);
       border-left:1px solid #000; border-right:1px solid #000}
@media (max-width:800px){ .shell{width:100%} }

/* Beveled boxes. outset/inset is the whole 2000s vocabulary. */
.panel{border:2px outset var(--face); background:var(--face); padding:6px}
.well{border:2px inset var(--face); background:var(--paper); padding:6px;
      overflow-wrap:anywhere}
.sunk{border:2px inset var(--face); background:var(--paper)}

.masthead{background:#000060; color:#fff; padding:8px 10px;
          border-bottom:2px solid #000}
.masthead h1{margin:0; font-size:22px; letter-spacing:2px; font-weight:bold;
             font-family:"Courier New",Courier,monospace; color:#ffcc00;
             text-shadow:2px 2px 0 #000}
.masthead .tag{font-size:11px; color:#a8c4ff}

/* Top navigation strip of beveled buttons, standing in for the reference
   site's sliced nav jpgs. */
.navbar{background:var(--face); border-bottom:2px solid #000;
        padding:3px; white-space:nowrap; overflow-x:auto}
.navbtn{display:inline-block; padding:3px 12px; margin-right:2px;
        border:2px outset var(--face); background:var(--face);
        color:#000 !important; text-decoration:none; font-size:11px;
        font-weight:bold}
.navbtn:hover{color:#000 !important; background:#e8e5dc}
.navbtn:active,.navbtn.on{border-style:inset; background:#c8c4bc}

.cols{display:table; width:100%; border-collapse:collapse}
.side{display:table-cell; width:180px; vertical-align:top; padding:8px;
      background:#e8e8e8; border-right:2px solid #000}
.main{display:table-cell; vertical-align:top; padding:10px}
@media (max-width:800px){
  .cols,.side,.main{display:block; width:auto}
  .side{border-right:0; border-bottom:2px solid #000}
}

h2.bar{margin:10px 0 4px; font-size:11px; font-weight:bold; color:#fff;
       background:#000060; padding:2px 6px; letter-spacing:1px}
h2.bar:first-child{margin-top:0}

.scroll{max-height:180px; overflow-y:auto; border:2px inset var(--face);
        background:#fff; padding:3px 5px}
label.opt{display:flex; gap:5px; align-items:center; cursor:pointer;
          font-size:11px; padding:1px 0}
label.opt:hover{background:#000060; color:#fff}
.n{margin-left:auto; color:#666; font-size:10px}
label.opt:hover .n{color:#cfd8ff}

button,.btn{font:bold 11px Arial,sans-serif; background:var(--face);
            border:2px outset var(--face); padding:3px 10px; cursor:pointer;
            color:#000}
button:active,.btn:active{border-style:inset}

pre.snippet{background:#ffffcc; border:2px inset var(--face); padding:6px 8px;
            font:11px "Courier New",monospace; white-space:pre-wrap;
            word-break:break-all; margin:0 0 6px}

/* Ad-server URLs are long and have no break points, so without
   overflow-wrap:anywhere one of them widens the whole table and the row rules
   run past the panel edge. "anywhere" is the one that also shrinks min-content,
   which break-word does not. */
table.data{border-collapse:collapse; width:100%; font-size:11px;
           table-layout:fixed}
table.data th{background:#000060; color:#fff; text-align:left; padding:3px 6px}
table.data td{border-bottom:1px solid #ccc; padding:3px 6px; vertical-align:top;
              overflow-wrap:anywhere; word-break:break-word}
table.data code{font-family:"Courier New",monospace; background:#ffffcc;
                overflow-wrap:anywhere}
table.data a{overflow-wrap:anywhere}

.footer{background:var(--face); border-top:2px solid #000; padding:8px;
        text-align:center; font-size:10px; color:#333}
.counter{display:inline-block; background:#000; color:#0f0; padding:2px 5px;
         font-family:"Courier New",monospace; font-size:13px;
         letter-spacing:3px; border:2px inset #444}

/* Seamless ticker. The old padding-left:100% trick leaves the strip empty for
   part of every cycle, which reads as the thing having stopped. Two identical
   copies in one track, animated by exactly half the track width, means a copy
   is always on screen and the seam never shows. */
.marquee{overflow:hidden; background:#000; color:#0f0; font-size:11px;
         font-family:"Courier New",monospace; padding:3px 0;
         border-top:2px solid #000; border-bottom:2px solid #000}
/* Shifted by a measured pixel distance rather than -50% of the track. On some
   mobile browsers width:max-content on a flex row does not resolve to the
   content width, so -50% was half of something else and the two copies jumped
   around instead of scrolling seamlessly. */
.mtrack{display:flex; width:max-content; will-change:transform;
        animation:scroll var(--ticker-secs,60s) linear infinite}
.mtrack span{white-space:nowrap; flex:0 0 auto}
@keyframes scroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--ticker-shift,50%)))}
}
@media (prefers-reduced-motion:reduce){
  .mtrack{animation:none}
  /* With no animation the second copy is just the text printed twice. */
  .mtrack span + span{display:none}
  .marquee{overflow-x:auto}
}

.blink{animation:blink 1.1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
@media (prefers-reduced-motion:reduce){ .blink{animation:none} }

/* Banner grid. flex:0 0 auto or items shrink below their image. */
.grid{display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start;
      align-content:flex-start}
.grid a{flex:0 0 auto; max-width:100%; display:block; padding:2px;
        border:2px inset var(--face); background:#fff; line-height:0}
.grid img{display:block; max-width:100%; height:auto; image-rendering:pixelated}
.hint{color:#555; font-size:11px}

/* Hero. The first thing on the page is a real banner doing its job, because
   nothing explains this archive faster than watching one load. */
.hero{background:#000030; border-bottom:2px solid #000; padding:14px 10px 10px;
      text-align:center;
      background-image:linear-gradient(180deg,#000048 0%,#000018 100%)}
.hero-slot{min-height:64px; display:flex; align-items:center;
           justify-content:center}
.hero-slot a{display:inline-block; line-height:0; padding:4px;
             background:#fff; border:2px outset #d4d0c8}
.hero-slot img{display:block; max-width:100%; height:auto;
               image-rendering:pixelated}
.hero-cap{color:#9fe8ff; font-size:10px; margin-top:7px; min-height:13px;
          font-family:"Courier New",monospace; padding:0 8px;
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hero-sub{color:#7f8cc0; font-size:10px; margin-top:3px}
.hero-sub a{color:#ffcc00}

/* Gallery pager. */
.pager{background:#e8e8e8; border-bottom:1px solid #bbb; padding:5px 8px;
       text-align:center}
.pager:last-of-type{border-bottom:0; border-top:1px solid #bbb}
.pbtn{font:bold 11px Arial,sans-serif; background:var(--face);
      border:2px outset var(--face); padding:2px 7px; margin:1px; cursor:pointer}
.pbtn:disabled{color:#999; cursor:default; border-style:solid;
               border-color:#c0bcb4}
.pbtn.cur{border-style:inset; background:#000060; color:#fff}
.pinfo{font-size:11px; color:#555; margin-left:8px}

/* ---- blue stat wall. Read-only show-off; every control is in white below. -- */
.statwall{background:linear-gradient(180deg,#000048 0%,#000018 100%);
          border-bottom:2px solid #000; padding:10px 10px 8px}
.statgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
@media (max-width:560px){ .statgrid{grid-template-columns:repeat(2,1fr)} }
.stat{background:rgba(255,255,255,.06); border:1px solid #2a3a80;
      padding:5px 6px; text-align:center}
.stat b{display:block; color:#ffcc00; font:bold 17px "Courier New",monospace;
        letter-spacing:1px}
.stat i{display:block; color:#8fa4e8; font-style:normal; font-size:9px;
        text-transform:uppercase; letter-spacing:.5px; margin-top:2px}
.statline{color:#7f8cc0; font-size:10px; text-align:center; margin-top:7px}

/* ---- white working area --------------------------------------------------- */
.body{padding:10px; background:#fff}

.pickcols{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
@media (max-width:620px){ .pickcols{grid-template-columns:1fr} }
.pickhead{font-size:10px; font-weight:bold; letter-spacing:.5px; color:#000060;
          margin-bottom:3px; display:flex; align-items:center}
.pickhead .mini{margin-left:auto}
.pickhead .mini button{font-size:9px; padding:1px 5px; margin-left:2px}
label.opt.inline{display:inline-flex; margin-right:10px}

/* ---- what is being served: two to a row, deliberately small --------------- */
.served{display:grid; grid-template-columns:1fr 1fr; gap:8px}
@media (max-width:620px){ .served{grid-template-columns:1fr} }
.scell{border:2px inset var(--face); background:#fff; padding:5px; min-width:0;
       overflow:hidden}
/* If an image ever fails, its alt text must not shove the cell wider. */
.sthumb img{max-width:100%}
.sthumb{background:#f4f4f4; border:1px solid #ddd; padding:3px; text-align:center;
        min-width:0; overflow:hidden}
.sthumb a{display:block; line-height:0}
.sthumb img{max-width:100%; height:auto; image-rendering:pixelated;
            display:inline-block}
.smeta{font-size:10px; color:#000060; font-weight:bold; margin-top:4px}
.salt{font-size:10px; color:#666; margin-top:2px; max-height:26px;
      overflow:hidden; line-height:1.3}
.sact{margin-top:4px; display:flex; align-items:center; gap:6px}
button.tiny{font-size:9px; padding:2px 6px}
.tiny-link{font-size:9px}
.ssnip{margin-top:5px; font-size:10px}

/* ---- the call to action on every banner detail page ----------------------- */
.cta{background:#ffcc00; border-bottom:3px solid #000; padding:9px 10px;
     text-align:center}
.cta a{display:block; text-decoration:none}
.cta-big{display:block; color:#c00000 !important; font:bold 19px Arial,sans-serif;
         letter-spacing:.5px; text-shadow:1px 1px 0 #fff}
.cta a:hover .cta-big{color:#000 !important}
.cta-sub{display:block; color:#603000; font-size:11px; margin-top:2px}
@media (max-width:520px){ .cta-big{font-size:15px} }

.bigshot{text-align:center; background:#f0f0f0; border:2px inset var(--face);
         padding:14px 8px; margin-bottom:12px}
.bigshot img{max-width:100%; height:auto; image-rendering:pixelated;
             border:1px solid #999; background:#fff}

/* ---- simplified front page ------------------------------------------------ */
h2.bar .step{display:inline-block; background:#ffcc00; color:#000060;
             font:bold 11px Arial,sans-serif; padding:0 5px; margin-right:5px;
             border:1px solid #000}
.row3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
@media (max-width:600px){ .row3{grid-template-columns:1fr} }
.row3 label{font-size:11px; font-weight:bold; color:#000060}
.row3 select{font:11px Arial,sans-serif; border:2px inset var(--face);
             background:#fff; padding:3px; width:100%; margin-top:2px}

/* ---- the running preview, dressed as somebody's page ---------------------- */
.pagesim{border:2px inset var(--face); background:#fff}
.pagesim-bar{background:var(--face); border-bottom:1px solid #aaa; padding:2px 6px;
             font-size:10px; color:#555}
.pagesim-body{padding:12px; font:13px Georgia,"Times New Roman",serif; color:#222}
.pagesim-body p{margin:0 0 10px; color:#666}
.pagesim-body p:last-child{margin:10px 0 0}
#preview img,#preview iframe{max-width:100%}

/* ---- galleries index ------------------------------------------------------
   Each tile's background is a live collage of banners drawn at random from
   that gallery's own set, so the cover always reflects what is inside. */
/* One grid per section, so nothing can migrate between sections. Row-spanning
   rather than fixed heights lets a tile be as tall as its contents need;
   dense is safe here because every tile in this grid is in the same section. */
.gwrap{display:grid; gap:8px; padding:0 10px 10px; grid-auto-rows:64px;
       grid-auto-flow:row dense; align-content:start;
       grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.gtile{position:relative; display:block; overflow:hidden; grid-row:span 2;
       border:2px outset var(--face); background:#000018; text-decoration:none;
       cursor:pointer}
.gtile:hover{border-color:#000060}
/* Uniform tiles. Varying the height by content shape made the grid ragged;
   the covers handle the shape difference internally instead. */
.gtile.big{grid-column:1 / -1; grid-row:span 3}
.gcover{position:absolute; inset:0; width:100%; height:100%;
        object-fit:cover; display:block}
/* Dark scrim so the label reads over any collage. */
.gtile::after{content:""; position:absolute; inset:0; pointer-events:none;
              background:linear-gradient(180deg,rgba(0,0,24,.06) 0%,
                        rgba(0,0,24,.14) 48%,rgba(0,0,24,.78) 100%)}
.glabel{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:6px 8px}
.glabel b{display:block; color:#ffcc00; font:bold 14px Arial,sans-serif;
          letter-spacing:.5px;
          text-shadow:0 1px 3px #000, 1px 1px 0 #000, -1px 0 2px #000}
.gtile.big .glabel b{font-size:19px}
.glabel i{display:block; color:#dfe6ff; font-style:normal; font-size:10px;
          margin-top:1px; text-shadow:0 1px 3px #000, 1px 1px 0 #000}
.gsection{margin:12px 10px 6px; font:bold 11px Arial,sans-serif; color:#000060;
          letter-spacing:.6px; border-bottom:2px solid #000060; padding-bottom:2px}
.gsection:first-child{margin-top:8px}
#galleries > .gwrap:first-child{padding-top:10px}

/* --- guestbook ---------------------------------------------------------- */
.gbform td{padding:2px 6px 2px 0; vertical-align:middle}
.gbform textarea{width:100%; max-width:420px; font:12px Arial, sans-serif}
.gbform input{font:12px Arial, sans-serif}
/* Off-screen, not display:none. Bots skip fields that are obviously hidden. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.gbentry{border:1px solid #b8b8b8; background:#fff; padding:5px 7px;
         margin-top:6px}
.gbhead{font-size:11px; color:#333; border-bottom:1px dotted #ccc;
        padding-bottom:3px; margin-bottom:4px}
.gbwhen{float:right; color:#777}
.gbmsg{white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere}