/* VHS VELOCIRAPTOR - authentic late-1998 styling. CSS1 only (no text-shadow, box-shadow,
   gradients, border-radius, transitions, element :hover or max-width - none of that existed
   or worked in a 1998 browser). Fixed-width layout, like it's 1998. Best viewed in Netscape. */
*{box-sizing:border-box}
body{
  background:#808080 url("img/stars.png");
  color:#000;
  font-family:"Times New Roman",Times,serif;
  text-align:center;
  margin:0;padding:0;
}
a{color:#0000ee;font-weight:bold}
a:visited{color:#551a8b}
a:hover{color:#ee0000}
img{border:0}
.logo{display:block;margin:14px auto 6px;width:520px;max-width:86%;height:auto}

/* the scrolling welcome bar */
.marquee{
  background:#000;color:#ffff00;font-family:"Courier New",monospace;font-weight:bold;
  font-size:15px;border:3px ridge #ffff00;width:100%;max-width:660px;margin:8px auto;padding:6px 0;
}

/* content panel so text is legible over the star field */
.panel{
  background:#c8c4b8;border:6px ridge #d8b060;
  width:100%;max-width:660px;margin:14px auto;padding:14px 20px 20px;text-align:left;
}
.panel.center{text-align:center}
h1.page-title{font-size:30px;color:#000080;margin:6px 0 2px;text-align:center}
.sub{text-align:center;color:#333;font-style:italic;margin:0 0 12px}

/* UNDER CONSTRUCTION hazard banner */
.construction{
  width:100%;max-width:580px;margin:10px auto;background:#ffdd00;color:#000;
  border:6px dashed #000;padding:8px 10px;font-weight:bold;
}
.construction .big{font-size:26px;letter-spacing:1px;
  font-family:"Impact","Arial Black",sans-serif}
.construction .small{font-size:12px}

/* A-Z browse strip */
.azbar{margin:6px auto;line-height:1.9}
.azbar a{font-size:22px;font-weight:bold;font-family:"Arial Black",Arial,sans-serif;
  color:#0000cc;padding:0 5px}
.azbar .dead{color:#999;padding:0 5px;font-size:22px;font-weight:bold;
  font-family:"Arial Black",Arial,sans-serif}
.azbar a.all-link{color:#fff;background:#c81028;border:2px outset #e0687a;
  padding:1px 9px;font-size:19px}
.azbar a.all-link:hover{background:#ee0000;color:#fff}

/* browse-by-category "buttons" (3D outset = very 1998) */
.catbar{margin:8px auto;line-height:2.2}
.catbar a{display:inline-block;font-family:Arial,sans-serif;font-weight:bold;font-size:15px;
  color:#fff;background:#1010cc;border:3px outset #6a6aff;padding:5px 13px;margin:4px;
  text-decoration:none}
.catbar a:hover{background:#ee0000;color:#fff}

/* featured / listing tables */
table.vhs{margin:10px auto;background:#e8e4d8;border:5px ridge #d8b060;width:96%}
table.vhs th{padding:6px 12px;border:2px solid #000;font-size:15px;color:#fff}
table.vhs th.m{background:#1010cc}
table.vhs th.s{background:#10a010}
table.vhs th.p{background:#00b8c8}
table.vhs td{padding:6px 12px;border:2px solid #808080;font-size:15px;background:#efece2}
table.vhs td.price{font-family:"Courier New",monospace;font-weight:bold;text-align:right}

/* the joke price-comparison box on a movie page */
table.compare{margin:14px auto;background:#e8e4d8;border:5px ridge #d8b060;width:96%}
table.compare th{background:#1010cc;color:#fff;padding:6px 12px;border:2px solid #000;font-size:15px}
table.compare td{padding:7px 12px;border:2px solid #808080;font-size:15px;background:#efece2}
table.compare .store{font-weight:bold}
table.compare .dead{color:#a00000;font-style:italic}
table.compare tr.ebay td{background:#ccffcc}
table.compare tr.ebay .store{color:#006600}
table.compare tr.ebay .live{color:#006600;font-weight:bold}
table.compare .tryhere a{background:#ffcc00;border:3px outset #ffe680;color:#000080;
  padding:3px 12px;text-decoration:none;font-weight:bold}

/* movie meta */
.meta{margin:4px 0 10px;color:#000}
.meta b{color:#000080}
.spiel{font-size:16px;line-height:1.55;margin:10px 0}
.disclaimer{font-size:11px;color:#555;margin-top:8px;font-style:italic}

/* hit counter */
.counter{margin:16px auto 4px;font-family:Arial,sans-serif;font-weight:bold}
.counter .digits{background:#000;color:#00ff00;font-family:"Courier New",monospace;
  font-size:20px;letter-spacing:2px;padding:3px 8px;border:2px solid #444;white-space:nowrap}

/* letter listing */
ul.films{list-style:none;padding:0;margin:6px 0}
ul.films li{font-size:18px;padding:5px 0;border-bottom:1px solid #bbb}
ul.films li .yr{color:#555;font-size:14px}
ul.films li .genre{color:#777;font-size:12px;font-style:italic;float:right}

.crumbs{text-align:center;margin:8px auto;font-size:13px}
.footer{width:100%;max-width:660px;margin:16px auto 30px;font-size:12px;color:#222}
.footer .best{margin:6px 0}
.backhome{text-align:center;margin:14px 0}
.backhome a{font-size:15px}
.rainbow-img{display:block;margin:12px auto;max-width:92%}

/* EJECT random-tape button (chunky 3D, very 1998) */
.eject{margin:14px 0 2px}
.eject button{font-family:"Arial Black",Arial,sans-serif;font-weight:bold;font-size:16px;
  color:#000080;background:#ffcc00;border:4px outset #ffe680;padding:8px 18px;cursor:pointer}
.eject button:hover{background:#ffe680}
.eject button:active{border-style:inset}

/* fake one-member webring in the footer */
.webring{text-align:center;margin:14px auto 4px;font-size:12px;color:#222;font-weight:bold}

/* mobile-only 'best viewed on a CRT' gag warning */
.crt-warn{display:none}
@media (max-width:700px){
  .crt-warn{display:block;background:#000;color:#33ff33;font-family:"Courier New",monospace;
    font-size:12px;font-weight:bold;text-align:center;margin:6px 10px;padding:5px;
    border:2px ridge #33ff33}
}

/* top FAQ link + footer nav */
.topnav{text-align:center;margin:8px auto 2px}
.topnav a{display:inline-block;font-size:17px;font-weight:bold;font-family:Arial,sans-serif;
  background:#fff;color:#0000cc;border:3px ridge #d8b060;padding:6px 18px;text-decoration:underline}
.topnav a:hover{background:#ffffcc;color:#ee0000}
.footnav{text-align:center;margin:14px auto 2px;font-size:14px;font-weight:bold}

/* FAQ page */
.faq-item{border-bottom:1px solid #b3afa8;padding:12px 0}
.faq-q{font-family:Arial,sans-serif;font-weight:bold;font-size:18px;color:#000080;margin:0 0 6px}
.faq-a{font-size:16.5px;line-height:1.55;margin:0}

/* roughly responsive: keep the 1998 look on desktop, make it usable on a phone */
@media (max-width:700px){
  .panel,.footer{margin-left:10px;margin-right:10px;padding:12px 14px 16px}
  .marquee,.construction{margin-left:10px;margin-right:10px}
  .marquee{font-size:13px}
  h1.page-title{font-size:23px}
  .construction .big{font-size:20px}
  .spiel{font-size:15px}
  .azbar{line-height:1.7}
  .azbar a,.azbar .dead{font-size:19px;padding:0 4px}
  .catbar a{font-size:13.5px;padding:5px 10px;margin:3px}
  table.vhs,table.compare{width:100%}
  table.vhs th,table.vhs td,table.compare th,table.compare td{padding:5px 6px;font-size:12.5px}
  table.compare .tryhere a{padding:3px 7px;font-size:12.5px}
  .meta{font-size:14px}
  .faq-q{font-size:19px}
  .faq-a{font-size:17px;line-height:1.6}
  .spiel{font-size:16px}
}
@media (max-width:420px){
  h1.page-title{font-size:20px}
  .azbar a,.azbar .dead{font-size:17px;padding:0 3px}
  table.vhs th,table.vhs td,table.compare th,table.compare td{padding:4px;font-size:11.5px}
}