/* ==========================================================================
   BeetleWatch_VIC public site stylesheet.  bwv.css
   Built 06/98 on the council template.  Amended since, by several hands.
   Field co-ordination.

   NOTE FROM DA, 02/99: I have been asked to note that this file is not to
   be reorganised. It works. Please add to the bottom and leave the rest.
   ========================================================================== */

:root{
  /* Palette. Do not change these without asking. */
  --ground:      #d6d3ca;
  --ground-dk:   #b9b6ac;
  --sheet:       #f3f1ea;
  --sheet-alt:   #e7e4db;
  --chrome:      #c0c0c0;   /* frame furniture. The real one. */
  --ink:         #17170f;
  --ink-soft:    #4f4c43;
  --rule:        #6d6a60;
  --bevel-lt:    #ffffff;
  --bevel-dk:    #6d6a60;
  --link:        #0000ee;
  --visited:     #551a8b;
  --amber:       #f2ab00;
  --amber-dk:    #a87700;
  --void:        #000000;   /* reserved. see the style guide. */

  --ui:     Arial, Helvetica, sans-serif;
  --auth:   "Times New Roman", Times, serif;
  --mech:   "Courier New", Courier, monospace;
}

/* --------------------------------------------------------------------------
   THE FRAME SET.
   Four panes: banner across the top, contents down the left, the page body
   on the right, status along the bottom. Banner and status hold still; the
   two middle panes scroll on their own, same as frames always did.
   -------------------------------------------------------------------------- */

html,body{ height:100%; }

body{
  margin:0;
  background:var(--chrome);
  color:var(--ink);
  font-family:var(--ui);
  font-size:13px;
  line-height:1.5;
}

.frame{
  height:100vh;
  display:grid;
  grid-template-columns:152px minmax(0,1fr);
  grid-template-rows:auto 1fr auto;
  grid-template-areas:
    "banner banner"
    "nav    content"
    "status status";
  gap:2px;                       /* the frame gutter */
  background:var(--chrome);
  padding:2px;
  box-sizing:border-box;
}

/* Every pane is a frame, so every pane gets the frame border. */
.frame-banner,.frame-nav,.frame-content,.frame-status{
  border:2px solid;
  border-color:var(--bevel-dk) var(--bevel-lt) var(--bevel-lt) var(--bevel-dk);
  overflow:hidden;
  min-width:0;
  min-height:0;
}

.frame-banner{ grid-area:banner; background:var(--sheet); }
.frame-nav{
  grid-area:nav;
  background:var(--ground-dk) url("/img/bg-nav.gif") repeat;
  overflow-y:auto;
  overflow-x:hidden;
}
.frame-content{
  grid-area:content;
  background:var(--ground) url("/img/bg-tile.gif") repeat;
  overflow-y:scroll;             /* always show it. It is a frame. */
  overflow-x:auto;
}
.frame-status{
  grid-area:status;
  background:var(--chrome);
  overflow-x:auto;
  overflow-y:hidden;
}

.pane-pad{ padding:9px 11px; }

/* --------------------------------------------------------------------------
   BANNER
   The wordmark is a GIF. Nobody has the font.
   -------------------------------------------------------------------------- */

.letterhead{ margin:0; }
.masthead-img{ display:block; border:0; max-width:100%; height:auto; }
.masthead-img.wide{ display:block; }
.masthead-img.narrow{ display:none; }
.masthead-line{
  margin:0; padding:2px 8px 3px;
  font-size:11px; color:var(--ink-soft);
  border-top:1px solid var(--ground-dk);
}

/* Legacy names kept so the older pages still render. */
.masthead-title,.masthead-sub,.v-street{ font-family:var(--ui); }

.hazard-img{ border:0; display:block; }

/* --------------------------------------------------------------------------
   CONTENTS PANE
   -------------------------------------------------------------------------- */

.nav-heading{
  display:block;
  background:var(--void); color:var(--sheet);
  font-size:10px; font-weight:bold; letter-spacing:.1em;
  padding:4px 8px; text-transform:uppercase;
}
.nav ul{ list-style:none; margin:0; padding:6px 0 0; }
.nav li{ margin:0; padding:0; }
.nav a{
  display:block;
  padding:5px 8px 5px 24px;
  font-size:12px;
  color:var(--link);
  text-decoration:underline;
  background:url("/img/bullet.gif") no-repeat 6px 6px;
  border-bottom:1px solid var(--ground-dk);
}
.nav a:visited{ color:var(--visited); }
.nav a:hover{ background-color:var(--void); color:var(--amber); }
.nav a[aria-current="page"]{
  color:var(--ink); font-weight:bold; background-color:var(--sheet-alt);
  text-decoration:none;
}
.nav img.new{ border:0; vertical-align:middle; margin-left:2px; }
.nav-note{
  font-size:10px; color:var(--ink-soft);
  padding:8px 8px 12px; margin:0; line-height:1.4;
}

/* --------------------------------------------------------------------------
   PANELS.  Raised for our own notices, sunken for anything quoted.
   -------------------------------------------------------------------------- */

.panel-raised,.panel-sunken{
  background:var(--sheet);
  border:2px solid;
  border-color:var(--bevel-lt) var(--bevel-dk) var(--bevel-dk) var(--bevel-lt);
  margin:0 0 12px;
}
.panel-sunken{
  border-color:var(--bevel-dk) var(--bevel-lt) var(--bevel-lt) var(--bevel-dk);
  background:var(--sheet-alt);
}
.panel-pad{ padding:9px 11px; }

.section-head{
  margin:0;
  background:var(--void); color:var(--sheet);
  font-family:var(--ui); font-size:12px; font-weight:bold;
  letter-spacing:.11em; text-transform:uppercase;
  padding:4px 9px;
}
.head-img{ display:block; border:0; }

.copy{ margin:0; }
.copy p{ margin:0 0 9px; }
.copy p:last-child{ margin-bottom:0; }

.v-authority,.v-authority p{ font-family:var(--auth); font-size:15px; line-height:1.5; }
.v-machine{ font-family:var(--mech); font-size:12px; }

.signature{ margin-top:12px; }
.signature p{ margin:0; }
.signature .who{ font-weight:bold; font-size:12px; letter-spacing:.05em; }
.signature .role{ font-size:11px; color:var(--ink-soft); }

hr{
  border:0; height:2px;
  background:var(--rule);
  margin:10px 0;
}
img.rule{ display:block; border:0; max-width:100%; height:auto; margin:0 0 10px; }

/* --------------------------------------------------------------------------
   ADVISORY NOTICE.  The only amber block on a page.
   -------------------------------------------------------------------------- */

.advisory{
  background:var(--amber);
  border:3px solid var(--void);
  color:var(--void);
  margin:0 0 12px;
}
.advisory-kicker{
  margin:0; background:var(--void); color:var(--amber);
  font-size:11px; font-weight:bold; letter-spacing:.13em;
  padding:3px 9px; text-transform:uppercase;
}
.advisory-level{
  margin:0; padding:6px 9px 2px;
  font-family:var(--auth); font-size:26px; font-weight:bold;
  letter-spacing:.01em;
}
.advisory-body{
  margin:0; padding:2px 9px 8px;
  font-family:var(--auth); font-size:15px;
}
.advisory-ref{
  margin:0; padding:0 9px 7px;
  font-family:var(--mech); font-size:11px;
}

/* The level blinks. It was asked for. */
.blink{ animation:bwvblink 1.1s steps(1,end) infinite; }
@keyframes bwvblink{ 0%,50%{opacity:1} 51%,100%{opacity:.12} }

marquee,.ticker{
  display:block;
  background:var(--void); color:var(--amber);
  font-family:var(--mech); font-size:12px;
  padding:3px 0; margin:0 0 10px;
  border:1px solid var(--void);
}

/* --------------------------------------------------------------------------
   FORMS.  Entry is Courier, always.
   -------------------------------------------------------------------------- */

.field-label{
  display:block;
  font-family:var(--mech); font-size:11px; letter-spacing:.1em;
  margin:0 0 3px;
}
.field-row{ margin:0 0 6px; }
.field-mono{
  font-family:var(--mech); font-size:16px; letter-spacing:.18em;
  padding:5px 7px; width:190px; max-width:100%;
  background:#fff; color:var(--ink);
  border:2px solid;
  border-color:var(--bevel-dk) var(--bevel-lt) var(--bevel-lt) var(--bevel-dk);
}
.field-plain,textarea.field-plain{
  font-family:var(--ui); font-size:16px;
  padding:4px 6px; max-width:100%;
  background:#fff; color:var(--ink);
  border:2px solid;
  border-color:var(--bevel-dk) var(--bevel-lt) var(--bevel-lt) var(--bevel-dk);
}
.field-group{
  border:2px groove var(--chrome);
  padding:7px 10px; margin:0 0 10px;
}
.field-group legend{ font-size:11px; font-weight:bold; padding:0 4px; }
.choice{ display:block; margin:0 0 3px; font-size:12px; }
.field-note{
  font-family:var(--mech); font-size:11px; color:var(--ink-soft);
  margin:8px 0 0;
}

.btn{
  font-family:var(--ui); font-size:13px;
  padding:6px 18px; cursor:pointer;
  background:var(--chrome); color:var(--ink);
  border:2px solid;
  border-color:var(--bevel-lt) var(--bevel-dk) var(--bevel-dk) var(--bevel-lt);
}
.btn:active{ border-color:var(--bevel-dk) var(--bevel-lt) var(--bevel-lt) var(--bevel-dk); }

.gate-status{
  font-family:var(--mech); font-size:12px; margin:7px 0 0; min-height:1.2em;
}
.gate-status.is-working{ color:var(--amber-dk); font-weight:bold; }
.gate-status.is-error{
  background:var(--void); color:var(--amber);
  padding:3px 6px; display:inline-block;
}

.steps{ margin:0 0 10px; padding-left:22px; }
.steps li{ margin:0 0 5px; }

/* --------------------------------------------------------------------------
   TABLES
   -------------------------------------------------------------------------- */

.table-scroll{ overflow-x:auto; margin:0 0 10px; }
table.data{
  border-collapse:collapse; width:100%;
  font-family:var(--ui); font-size:12px;
}
table.data th{
  background:var(--void); color:var(--sheet);
  text-align:left; padding:4px 8px;
  font-size:10px; letter-spacing:.09em; text-transform:uppercase;
}
table.data td{
  padding:4px 8px; border-bottom:1px solid var(--ground-dk);
  font-variant-numeric:tabular-nums;
}
table.data tr:nth-child(even) td{ background:var(--sheet-alt); }
table.data td.num,.num{ font-family:var(--mech); white-space:nowrap; }

/* --------------------------------------------------------------------------
   LISTS, STATUS PANE
   -------------------------------------------------------------------------- */

.link-list{ list-style:none; margin:0; padding:0; }
.link-list li{
  margin:0 0 4px; padding-left:20px;
  background:url("/img/bullet.gif") no-repeat 0 2px;
  font-size:12px;
}

a{ color:var(--link); }
a:visited{ color:var(--visited); }

.badges{ margin:0; padding:0; }
.badges img{ border:0; margin:0 3px 0 0; vertical-align:middle; }
.counter-img{ border:0; vertical-align:middle; }
.hit-counter{ font-family:var(--mech); background:var(--void); color:#33ff66; padding:1px 5px; letter-spacing:.16em; }
.fiction-note{ font-size:10px; color:var(--ink-soft); }
.status-line{ font-size:10px; color:var(--ink-soft); margin:0; }
.footer-bar{
  display:flex; flex-wrap:nowrap; gap:0 14px; align-items:center;
  font-size:10px; color:var(--ink-soft);
  padding:0 8px; margin:0; white-space:nowrap;
}
/* The status frame is one line. If it does not fit, it scrolls sideways,
   which is what it has always done. */
.frame-status .badges img{ width:70px; height:25px; }
.frame-status td{ white-space:nowrap; }
img.mail{ border:0; vertical-align:middle; margin-right:3px; }

/* --------------------------------------------------------------------------
   THE OTHER THING.
   Devices for pages that have been interfered with. Do not remove these.
   I did not add all of them.
   -------------------------------------------------------------------------- */

.bleed{
  display:inline-block;
  background:var(--void); color:var(--sheet);
  font-family:var(--mech); font-size:12px;
  padding:0 5px;
}
.struck{ text-decoration:line-through; color:var(--ink-soft); }
.ed-note{ font-family:var(--mech); font-size:11px; color:var(--ink-soft); }

/* Black on black. It is still text. */
.redact{ background:var(--void); color:var(--void); padding:0 2px; }
.redact::selection{ background:var(--amber); color:var(--void); }
.redact::-moz-selection{ background:var(--amber); color:var(--void); }

.void-block{
  background:var(--void); color:var(--amber);
  font-family:var(--mech); font-size:12px;
  padding:12px 14px; margin:12px 0 0;
}
.void-block b{ color:#fff; }
.void-block a{ color:var(--amber); }
.cursor{ animation:bwvblink 1s steps(1,end) infinite; }

/* --------------------------------------------------------------------------
   FILE ROOM.  Pages served from behind the gate.  Appended 03/99 — DA
   -------------------------------------------------------------------------- */

.past-gate{ background:var(--void); }
.past-gate .frame-content{ background:var(--void); }
.machine-line{
  font-family:var(--mech); font-size:12px;
  color:var(--amber); background:var(--void);
  padding:10px 12px; margin:0;
  white-space:pre-wrap;
}
.doc-sheet{
  background:var(--sheet); color:var(--ink);
  border:1px solid var(--void);
  padding:14px 16px; margin:0 0 14px;
}
.doc-ref{
  font-family:var(--mech); font-size:11px; color:var(--ink-soft);
  border-bottom:1px solid var(--ground-dk);
  padding-bottom:5px; margin:0 0 10px;
}
.doc-title{ font-family:var(--auth); font-size:19px; font-weight:bold; margin:0 0 9px; }
.stamp{
  display:inline-block; border:2px solid var(--void);
  font-size:10px; font-weight:bold; letter-spacing:.14em;
  padding:2px 7px; margin:0 0 9px; text-transform:uppercase;
}
.memo-fields{ font-size:12px; margin:0 0 10px; }
.memo-fields dt{ float:left; clear:left; width:56px; font-weight:bold; font-family:var(--mech); font-size:11px; }
.memo-fields dd{ margin:0 0 3px 62px; }
.typed{ font-family:var(--mech); font-size:12px; white-space:pre-wrap; margin:0 0 9px; }
.interject{ color:var(--ink-soft); }
.map-figure{ margin:0 0 12px; }
.map-figure svg{ width:100%; height:auto; display:block; border:1px solid var(--void); }
.map-caption{ font-size:11px; color:var(--ink-soft); margin:5px 0 0; }
.media-slot{ border:2px dashed var(--rule); padding:12px; margin:0 0 12px; }
.media-slot-label{ font-family:var(--mech); font-size:11px; letter-spacing:.1em; }

/* --------------------------------------------------------------------------
   Keyboard focus. Added after a complaint. — DA 11/98
   -------------------------------------------------------------------------- */

a:focus-visible,.btn:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{
  outline:2px dotted var(--ink); outline-offset:1px;
}
.field-mono:focus-visible,.field-plain:focus-visible{
  outline:2px solid var(--amber-dk); outline-offset:0;
}

@media (prefers-reduced-motion:reduce){
  .blink,.cursor{ animation:none; opacity:1; }
  marquee{ /* the ticker stops. */ }
}

/* --------------------------------------------------------------------------
   SMALL SCREENS.  The frames come apart and it becomes one page.
   Added 2/99 because someone looked at it on a telephone. I did not
   believe them either.
   -------------------------------------------------------------------------- */

@media (max-width:600px){
  html,body{ height:auto; }
  .frame{
    height:auto; min-height:100vh;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"banner" "nav" "content" "status";
  }
  .frame-banner,.frame-nav,.frame-content,.frame-status{ overflow:visible; }
  .frame-content{ overflow-x:auto; }
  .masthead-img.wide{ display:none; }
  .masthead-img.narrow{ display:block; }
  .nav a{ padding:10px 8px 10px 26px; font-size:13px; }
  .advisory-level{ font-size:22px; }
  .field-mono{ width:100%; font-size:17px; padding:9px 8px; letter-spacing:.16em; }
  .btn{ width:100%; padding:11px 18px; font-size:15px; margin-top:6px; }
  .footer-bar{ gap:4px 12px; }
}

/* --------------------------------------------------------------------------
   Content width. The pane is as wide as the window but the page is not —
   tables were built at 700 and that is what they are still built at.
   -------------------------------------------------------------------------- */

.pane-pad{ max-width:720px; }

/* --------------------------------------------------------------------------
   Telephones, continued. The banner table has to come apart too, or the
   words end up in a column one at a time. — KW
   -------------------------------------------------------------------------- */

@media (max-width:600px){
  .frame-banner table,
  .frame-banner tbody,
  .frame-banner tr,
  .frame-banner td{ display:block; width:auto; }
  .frame-banner td{ text-align:left; }
  .frame-banner .hazard-img{ margin:8px 0 0 10px; }
  .masthead-line{ border-top:0; }
  .pane-pad{ max-width:none; }
  marquee{ font-size:11px; }
  .frame-status .badges img{ width:60px; height:21px; }
}

/* --------------------------------------------------------------------------
   Corrections, 03/99.

   1. The NEW! images were sitting under the links instead of beside them.
   2. On a telephone the status bar was pushing the whole page sideways,
      because it is one long line and I had told the frames to stop holding
      their contents in. It holds them in again now.
   -------------------------------------------------------------------------- */

.nav li{ display:flex; align-items:center; }
.nav li a{ flex:1 1 auto; min-width:0; }
.nav li img.new{ flex:0 0 auto; margin-right:6px; }

@media (max-width:600px){
  .frame-status{ overflow-x:auto; overflow-y:hidden; }
  .footer-bar{ flex-wrap:wrap; white-space:normal; padding:4px 8px; }
  .frame-status td{ white-space:normal; }
  .frame-content table{ max-width:100%; }
  /* Fig. 1 goes under the text rather than fighting it for the width. */
  .frame-content td[width="160"]{ display:block; width:auto; text-align:left; }
  .frame-content td[width="160"] img{ max-width:100%; height:auto; }
}

/* The ticker. It must hold its own width or it drags the page out sideways
   on a small screen. It is a marquee; it is supposed to hide its overflow. */
marquee{
  width:100%; max-width:100%;
  overflow:hidden; box-sizing:border-box;
}
.nav li{ display:block; }
.nav li a{ display:block; }
.nav li img.new{ vertical-align:middle; margin-left:4px; }

/* Long words and wide tables must not push the page out either. */
.frame-content{ overflow-wrap:break-word; }
@media (max-width:600px){
  .frame-content .panel-pad table{ table-layout:fixed; width:100%; }
}

/* --------------------------------------------------------------------------
   Holding styles for the case file, which is still on the old chrome while
   its contents are being replaced. Remove once it is rebuilt.
   -------------------------------------------------------------------------- */

.page{ max-width:820px; margin:0 auto; padding:12px; }
.content{ min-width:0; }
.masthead-text{ min-width:0; }
.hazard{ position:relative; width:96px; height:96px; flex:0 0 auto; }
.hazard-shadow,.hazard-field{
  position:absolute; inset:0; transform:rotate(45deg);
}
.hazard-shadow{ background:var(--void); }
.hazard-field{ background:var(--amber); border:4px solid #fff; inset:5px; }
.hazard-beetle{
  position:absolute; left:50%; top:50%; width:52px;
  transform:translate(-50%,-50%); border:0;
}