:root {
  --headtop-bg-color: #5d5d5d;
  --topnav-bg-color: #333;
  --main-bg-color: #fafafa;
  --foot-bg-color: var(--headtop-bg-color);   /* same so far */

  --site-font-family: Verdana, sans-serif;
  -article-def-font-family: Arial, sans-serif;
  -article-def-font-family: "Trebuchet MS", Georgia, sans-serif; 
  -article-def-font-family: Roboto, sans-serif;
  -article-def-font-family: 'Roboto Mono';
}


html{
  background-color: var(--main-bg-color);   /* background-color: #a8a8a8;  test for full screen */
  height: 100%;
  font-family: var(--site-font-family);
   -font-size: 96%;
}

body{
  min-height: 100%;
  margin: 0 auto;              /* user-agent has top margin for body */
}
  
@media (min-width: 500px) 
{
  body {              /* display body as grid */
    display: grid;    
    -grid-template-columns: minmax(150px, 200px) minmax(0, 1020px) 1fr;
    grid-template-columns: minmax(200px, auto) minmax(0, 960px) 1fr;
    grid-template-rows:  auto  auto 1fr auto; 
  }
  
  header, footer { 
    grid-column: 1 / 4;  /* start-end */
  }
}

.jump {
    position: relative;
    top: -3em;
}

/* globals */

img{max-width: 100%;}
a{text-decoration: none;} 

.pathlinx  {
  margin: 1rem 0rem 0rem .5rem;
  background-color: rgb(145 187 134);
  border-top-right-radius: 4em 2em;
  border-bottom-right-radius: 4em 2em;
  display: inline-block;
  padding: .4em .5em;
  color: white;
}

header {  
  background-color: var(--headtop-bg-color);
  color: white;
  text-align: center;
  font-family: "Helvetica";
  
  h1 {          /* equivalent to .headtop h1 */
    letter-spacing: .6em;
    font-weight: normal;
    margin-top: 0;
    padding-top: .5em;
  }
}

#Top {
  box-sizing: border-box;   /* should fit with padding - used for big hover */
  width: 100%;
  -padding-left: 0;
  -padding-right: 0;
}

footer { 
  background-color: #616161;
  padding: 0 1em;
}

.topnav {
  position: sticky;  
  top: 0px;
  background-color: var(--topnav-bg-color);
  text-align: center;
  padding: .2em 0;
  
  a { 
    text-decoration: none; 
    color: white;
    display: inline-block;
    padding: .5em 1.5em;
  }
  a:hover {
    background-color: #111;
    border-radius: .25em;
  }
}

nav {
  font-family: "Verdana";
  font-size: smaller;
  border-right: 1px solid rgb(214 217 220);
  line-height: 1; 
  div,a { 
    padding: 1em 1em; 
  }
  div { /* just text */
    border-bottom: 1px solid rgb(214 217 220);
    font-weight: bolder;
  }
  a { 
    display: block;
    &:hover { background-color: #eee; }
    &.folderlinx::before { 
      content: "\2B9E";
      padding-right: .5em;
      font-weight: 1000;
    }  
  }
}


/*
Basic <article> formatting
*/

article {
  display: flow-root;
  margin: 0 1.2em;
  line-height: 1.6;    
  max-width: 830px; 
  a:hover { text-decoration: underline; } /* only in article */
  
  pre{
    overflow:auto;
    padding: 1em .6em; 
    color: black;     
    border-radius: .2em; 
    font-weight:600;
  }
  
  code {
    white-space:pre;
    font-family: monospace, monospace
  }  
  .code {  /* strong-code, debug */
    }
  
.toc{ 
 border: 2px solid  #a2a9b1/*red*/; border-radius: 15px; }
 .toc > ul { padding: .5em; margin: 0 0;  }
 .toc li { list-style-type: none;}
 .toc a:link { font-family: Verdana, sans-serif; font-size: 95%; text-decoration: none; } 
 .toc a:hover { text-decoration: underline; }
}  

/***************************************************************************/
/* table 
*/

caption {
  caption-side: bottom;
  padding: .5em 0;
  font-weight: bold;
}

table {
  width: 90%;
  margin: 1.6rem auto; 
  border-collapse: collapse;
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;  
}


td.td1
{
  text-align: center;
}

td.td2
{
  font-weight: bolder;
}

td.td3
{
  background-color: lightgreen;
}

td.td4
{
  font-family: monospace;
  text-wrap-mode: nowrap;
  -white-space: pre;
}

td.td5
{
  text-align: right;
}

td.td6
{
  background-color: lightblue;
}


td.td9
{
  border: none;
}


th,
td {
  border: 1px solid rgb(160 160 160);
  -padding: 8px 10px;
  padding: .5em;
}

th[scope="col"] {
  background-color: #505050;
  color: white;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

-tr:nth-of-type(odd) td {
  background-color: #eeeeee;
}


/* Footnotes */    
    .footnote-ref
    {
      vertical-align: super;  /* sup in CSS */
      font-size: smaller;
      padding-right: .4em; 
      padding-left: .4em; 
      -border: 1px solid blue;
      &:link { font-family: serif; text-decoration: none; background-color: lightblue; border-radius: 5px; font-weight: bold;} 
      &:hover { background-color: teal; color:#fff;  }
    }
    #footnote-sep   /* a <hr> element */
    {
      width:33%;
      margin-left:0;
      margin-top:3rem;
    }
    #footnote-ol   /* the list of footnotes */
    {
      font-family: Georgia, Times, serif;
      font-size: .9em;
    }
    .footnote-li   
    {
    }
    .backnote-ref
    {
      padding: 0 .6em; 
      margin-right: .5em;
      -border: 1px solid blue;
      &:link { font-family: serif; text-decoration: none; background-color: lightblue; border-radius: 5px; font-weight: bold;} 
    }
    .footnote-text
    {
    }

}