/* Some versions of IE ignore the first entry so: */
.placebo { font-family: serif; }
/* (don't know if this is made redundant by the above import rules or not) */

@media all and (max-width:30em) { /* 2020-09: Google mobile-checker complained "text too small" on Gopher page w.pre when the max-width threshold was set to 20em (which is enough for Samsung S9), but not at 30em */
    small { font-size: 1em; } /* avoid overly-small text on mobile, especially when it auto- zooms out (or on old browser that ignores max-width, but that's OK) */
    pre { white-space: pre-wrap; word-wrap: break-word; }
    ul ol ul, ul table, ol table {
        position:relative; left: -2em; }
    ol ol, ol ul, ul ul, dd ul { position:relative; left: -1em; }
}

/* Browsers tend to read print.css unconditionally, so fold it in */
@media print {
H1,H2,H3 {
	font-family: arial, sans-serif;
	font-weight: bold;
}
H1,H2 { text-align: center; }
H1 { border: ridge; padding: 0.2em; }
H2 { border: inset; padding: 0.2em; }
.subhd {
	font-family: arial, sans-serif;
	font-style: italic;
}
  DIV { border: thin solid black; padding: 0.5em; }
  details { border-left: none; }
  article { display: inline; /* bug workaround */ }
}

@media screen,projection,tv /* omit handheld due to WM Opera Mini spacing bugs 2015 */ {

  /* To please Netscape 4, we'll have to write them all out separately: */
  H1 {
       text-align: center;
       border: ridge green;
       font-family: arial, helvetica, sans-serif;
       font-weight: bold;
       font-size: 200%;
       }
  H2 {
       text-align: center;
       border: inset green;
       font-family: arial, helvetica, sans-serif;
       font-weight: bold;
       font-size: 170%;
       }
  H3 {
       font-family: arial, helvetica, sans-serif;
       font-weight: bold;
       font-size: 130%;
       }
  .subhd { font-family: arial, helvetica, sans-serif; }
  @media all and (max-width: 10em) { div { margin: 1ex 2px !important; } div ul { padding-left: 2ex !important; } } /* save some space on mobiles / lPrn compared to below (overridden below in case browser ignores @media and reads right through it */
  DIV { border: thin solid blue; padding-left: 0.5ex; }
  div ul { padding-left: 2em; }
  details { border-left: solid #008b8b; padding-left: 0.3ex; }
  abbr { border-bottom: 1px dotted; }
}
@media screen,projection,tv,print { /* common to all non-WM screens + print */
  input, textarea { font-size: 100%; /* 2022-02: this is needed on Safari 15 which now defaults to making form-control text smaller */ }
  P {
      /* font-family: serif; DON'T - IE bug */
      text-align: left;
      }
  .subhd {
           text-align: left;
           font-weight: bold;
           font-size: 110%;
           }
  A {
      text-decoration: underline;

      /* Setting font family here is nightmarish.  Netscape
      under Unix has helvetica, times and courier but none
      of them are magnified so I'd be overriding the user's
      size.  Setting family to serif is also to be avoided
      because of the Internet Explorer bug.  And if I set it
      to something like "Tahoma", that would work under
      Windows but Unix would select some substitute that
      cannot be magnified.  So I'll leave it and use
      Javascript instead. */
      }
  div {
	list-style: disc outside;
	margin: 1ex 2ex;
  }
  article {
      margin: 0pt 0pt;
  }
  OL { padding-left: 3em; }
  OL > LI { padding-bottom: 1.5ex; }
  dd + dt { margin-top: 1ex; }
}
img[src$=".png"] { image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; } /* https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering */

/* Do something about very wide monitors + maximised windows + small fonts */
/* Column narrowing for very wide windows: 41em/40em works on SOME pages but not others; pages that naturally have floating images/sidebars are better off without this.
Considering the use of adjuster/twitter.html's side-by-side screenshots, try 82/81em (if nobody's reduced the default font size even further)
- media width threshold changed to 101em due to the font-size update below, but max-width is specified in terms of the new font so leave it at 81
*/
@media screen and (min-width: 101em) { body { margin-top: 0px; margin-left: 0px; margin-right: 0px; } article { max-width: 81em; padding-top: 0.5em; padding-left: 0.5em; padding-right: 0.5em; margin: auto; } }
@media screen and (min-width: 120em) { article { border-left: thick #f9f2f9 solid; border-right: thick #f9f2f9 solid; } }
/* and in case the browser doesn't read @media: */
@media screen and (max-width: 100.9em) { body { margin-top: 8px; margin-left: 8px; margin-right: 8px; } article { max-width: auto; padding-top: 0px; padding-left: 0px; padding-right: 0px; margin: 0px; border-left: none; border-right: none; } }
/* Update: it's probably better to just increase the text size in the wrapper.
   Not too much now we have picture at bottom of home page,
   but cater to the extreme cases.
   BUT ensure zoom changes to 110%, 125% etc still make
   the text noticeably larger, or someone will think we
   broke zoom (we didn't, but they might not try a few
   more times).  This limits what we can do.  So leaving
   in the above border thing as a backup.
*/
@media screen and (min-width: 69em) { article { font-size: 103%; } }
@media screen and (min-width: 80em) { article { font-size: 111%; } }
@media screen and (min-width: 96em) { article { font-size: 124%; } }
@media screen and (min-width: 109em) { article { font-size: 134%; } }
@media screen and (min-width: 120em) { article { font-size: 143%; } }
@media screen and (min-width: 133em) { article { font-size: 154%; } }
@media screen and (min-width: 160em) { article { font-size: 175%; } }
@media screen and (min-width: 179em) { article { font-size: 190%; } }
@media screen and (min-width: 240em) { article { font-size: 238%; } }
@media screen and (min-width: 363em) { article { font-size: 336%; } }
@media screen and (min-width: 480em) { article { font-size: 428%; } }
@media screen and (max-width: 68.9em) { article { font-size: 100%; } }