@media (prefers-color-scheme: light)
{
  :root {
    --page-bg: white;
    --alt-bg:#eee;
    --page-fg: black;
    --related-bg: #eeeed2;
    --page-blue: blue;
    --page-dark-blue:#00008b;
    --color-visited: #0af;
    --color-purple:#580da6;
    --color-phosphor-green:#080;
  }
}
@media (prefers-color-scheme: dark)
{
  :root {
    --page-bg: #111;
    --alt-bg:#222;
    --page-fg: #eee;
    --related-bg: #cccca2;
    --page-blue: #08f;
    --page-dark-blue:#5af;
    --color-visited: #0af;
    --color-purple:#984de6;
    --color-phosphor-green:#0a0;
  }
}

 h4 {
   margin-left:20pt;
 }

 div.procedure-purpose
 {
   font-style:italic;
   margin-bottom:1em;
   max-width:40em;
 }

 div.step
 {
   margin-bottom:1.5em;
   max-width:40em;
   line-height:1.5em;
 }

 span.format-step-name
 {
   font-style:italic;
   margin-right:12pt;
 }

 div.step-more-info
 {
   font-style:italic;
   margin-top:0.5em;
   margin-bottom:1em;
   max-width:40em;
   line-height:1.5em;
 }

 span.format-path
  {
    font-style:normal;
    font-family:monospace;
    padding-left:2pt;
    padding-right:2pt;
  }

 span.format-program-name
  {
    font-family:monospace;
  }

 span.format-command
  {
    font-style:normal;
    font-family:monospace;
    color:var(--page-dark-blue);
    padding-left:2pt;
    padding-right:2pt;
  }

 span.format-menu-input
  {
    font-style:normal;
    font-family:sans-serif;
    color:var(--page-fg);
    padding-left:2pt;
    padding-right:2pt;
  }
 
 span.format-snippet
 {
    font-style:normal;
    font-family:monospace;
    border:thin var(--page-fg) dashed;
    padding:3pt;
    margin-left:2pt;
    margin-right:2pt;
 }

 div.fsnippet
 { 
   background:var(--alt-bg);
   margin-top:6pt;
   margin-bottom:6pt;
   padding-top:6pt;
   padding-bottom:6pt;
   white-space:pre;
   border: thin dashed var(--page-fg);
   padding-left: 12pt;
   color:var(--page-fg);
   font-style:normal;
   font-family:monospace;
   width:60em; // Target is 80 columns.
 }


span.format-identifier
 {
    font-style:normal;
    font-family:monospace;
 }

 span.format-output
  {
    font-style:normal;
    font-family:monospace;
    color:var(--color-phosphor-green);
  }

 span.format-key
 {
   padding-left:2pt;
   padding-right:2pt;
   font-style:normal;
   font-family:sans-serif;
   border:thin var(--page-fg) solid;
 }

 span.input { color:var(--page-dark-blue); font-style:normal; font-family:monospace; }

 div.session-output
 { 
   background:var(--alt-bg);
   margin-top:6pt;
   margin-bottom:6pt;
   padding-top:6pt;
   padding-bottom:6pt;
   white-space:pre;
   border: thin solid var(--page-fg);
   padding-left: 12pt;
   color:var(--color-phosphor-green);
   font-style:normal;
   font-family:monospace;
   width:60em; // Target is 80 columns.
 }

 div.input
 {
   white-space: pre;
   padding-left: 12pt;
   color:var(--page-dark-blue);
   font-style:normal;
   font-family:monospace;
 }

 span.format-scomment
 {
   color: red;
   font-family:serif;
   font-style:italic;
 }

 .session-output div.input
 {
   display:inline-block;
   padding-left: 0pt;
   margin-top: 0pt;
   margin-bottom: 0pt;
 }

 pre.output
 {
   padding-left: 12pt;
   color:var(--color-phosphor-green);
   font-style:normal;
 }


 span.defining-reference { color:var(--color-purple); font-style:italic; }
 span.defining-text { color:brown; }

 body
 {
   font-size:14pt;
 }