/* igl-lang.org
 *
 * Deliberately period-correct styling: this is the visual language of the
 * scientific software documentation IGL's audience already trusts (USGS
 * PHREEQC, netlib, GNU). No radius, no shadow, no gradient, no webfont.
 *
 * The constraint is also a maintenance argument. A page that depends on
 * nothing keeps rendering identically for twenty years, which is the same
 * promise the language itself makes about a source file, and the reason most
 * of this site is static HTML: only the pages that must list files on disk
 * are PHP.
 */

body {
  background: #ffffff;
  color: #000000;
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  line-height: 1.45;
  margin: 0;
  padding: 0;
}

/* Fixed measure rather than a fluid grid: line length is the only typographic
   control this era of page had, and it is the one that still matters. */
#page {
  max-width: 900px;
  margin: 0;
  padding: 12px 24px 40px 24px;
}

a { color: #0000cc; }
a:visited { color: #551a8b; }
a:hover { color: #cc0000; }

h1 {
  font-size: 26px;
  font-weight: bold;
  margin: 0 0 2px 0;
  letter-spacing: 0.5px;
}
h2 {
  font-size: 19px;
  margin: 22px 0 6px 0;
  border-bottom: 1px solid #999999;
  padding-bottom: 2px;
}
h3 { font-size: 16px; margin: 16px 0 4px 0; }
h4 { font-size: 15px; margin: 14px 0 3px 0; }
p { margin: 8px 0; }

hr { border: 0; border-top: 1px solid #999999; margin: 10px 0; }

/* Header block: title, one-line definition, then the site-wide index. The
   definition sits above the navigation because a visitor arriving from a
   citation needs to know what IGL is before knowing where to click. */
#masthead .subtitle {
  font-size: 15px;
  font-style: italic;
  margin: 0 0 6px 0;
}
#nav {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  margin: 6px 0;
}
#nav a { text-decoration: none; }
#nav a:hover { text-decoration: underline; }
#nav .sep { color: #666666; padding: 0 4px; }
#nav .here { font-weight: bold; color: #000000; }

#breadcrumb {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #444444;
  margin: 10px 0 14px 0;
}

/* Content columns. The sidebar is a plain list of links, not a component: its
   job is to expose the whole tree at once, which is what a reference site is
   for. */
#columns { display: flex; gap: 26px; align-items: flex-start; }
#side {
  width: 186px;
  flex: 0 0 186px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  border-right: 1px solid #cccccc;
  padding-right: 14px;
}
#side h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 14px 0 4px 0;
  color: #333333;
}
#side ul { list-style: none; margin: 0; padding: 0; }
#side li { margin: 3px 0; }
#side a { text-decoration: none; }
#side a:hover { text-decoration: underline; }
#side .here { font-weight: bold; color: #000000; }
#main { flex: 1 1 auto; min-width: 0; }

ul.plain { margin: 6px 0 6px 22px; padding: 0; }
ul.plain li { margin: 3px 0; }

/* Verbatim blocks. Grey fill and a hairline border, the way manual appendices
   set off input files, so a snippet is recognisable before it is read. */
pre {
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  line-height: 1.35;
  background: #f2f2f2;
  border: 1px solid #cccccc;
  padding: 8px 10px;
  margin: 10px 0;
  overflow-x: auto;
  white-space: pre;
}
code { font-family: "Courier New", Courier, monospace; font-size: 13px; }

table.grid {
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 14px;
  width: 100%;
}
table.grid th, table.grid td {
  border: 1px solid #999999;
  padding: 4px 7px;
  text-align: left;
  vertical-align: top;
}
table.grid th {
  background: #e6e6e6;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
table.grid td.mono, table.grid th.mono {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
}
table.grid td.num { text-align: right; font-family: "Courier New", Courier, monospace; }
table.grid tr.err td.mono:first-child { color: #a80000; }
table.grid tr.warn td.mono:first-child { color: #8a5a00; }

.note {
  border: 1px solid #999999;
  border-left: 5px solid #666666;
  background: #f7f7f7;
  padding: 7px 10px;
  margin: 12px 0;
  font-size: 14px;
}

/* Version stamp. Every reference page carries the language version it
   describes and the revision of the page itself, because a reader arriving
   from a citation has no other way to know whether what they are reading
   still applies to the file in front of them. */
.stamp {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #444444;
  border: 1px solid #cccccc;
  background: #f7f7f7;
  padding: 5px 8px;
  margin: 0 0 14px 0;
}
.stamp b { color: #000000; }

.toplink { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 14px 0 0 0; }

#footer {
  margin-top: 26px;
  border-top: 1px solid #999999;
  padding-top: 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #444444;
}
#footer p { margin: 3px 0; }

/* Anchored definitions in the reference pages. The target rule is what makes a
   deep link from a diagnostic message land visibly rather than merely
   scrolling. */
.entry { margin: 0 0 18px 0; }
.entry:target { background: #fffbe6; outline: 2px solid #e0c060; outline-offset: 4px; }
.entry h3 { margin-top: 0; }
.entry .meta {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #444444;
  margin: 0 0 4px 0;
}

@media (max-width: 720px) {
  #columns { display: block; }
  #side {
    width: auto;
    border-right: 0;
    border-bottom: 1px solid #cccccc;
    padding: 0 0 10px 0;
    margin-bottom: 14px;
  }
}