/* Notes */

/* With the presumption that Articles contain Sections, (and not the other way around),
 *   then Footnotes belong after Sections, and Endnotes belong after Articles.
 *   Accordingly, footnotes have lower-case letters to represent them, (assuming less
 *   than 26 notes per Section), and Endnotes have decimal numbers, since this
 *   number presumably can get very high in very long articles.
 *
 * If one feels that Sections ought to contain Articles, then feel free to adjust
 *   accordingly  */

/* CAVEAT: Currently, this stylesheet does NOT place the notes in the appropriate
 *   locations. we have to work on that, probably with PHP.  */

/* psuedo footnotes (inline-ish) */

section {
   counter-reset: footnote;
}

/* Show the footnote marker in brackets  */
p span.footnote::before {
   display: inline;
   vertical-align: super;
   font-size: 75%;
   color: hsl(var(--fg-hue),40%);
   counter-increment: footnote;
   content: "[" counter(footnote, lower-alpha) "]";
}

/* Do not normally show the footnote  */
p span.footnote>a {
   display: none;
   vertical-align: top;
   justify-content: center;
  align-content: center;
   font-size: inherit;
   background-color: hsl(var(--bg-hue),67%);
/*   position:absolute;
   float: right;
   width: 33%;
   left: 59%;    */
   margin: 0.125ex 0.5ex;
   padding: 0ex;
}

/* Show the footnote in a block-style element on hover  */
p span.footnote:hover>a {
   display: block;
   max-width: 33%;
}

/* Show the footnote inline on activation  */
p span.footnote:active>a {
   display: inline;
}


/* psuedo endnotes (inline-ish) */

article {
   counter-reset: endnote; 
}

/* Show the endnote marker in brackets  */
p span.endnote::before {
   display: inline;
   vertical-align: super;
   font-size: 75%;
   color: hsl(var(--fg-hue),40%);
   counter-increment: endnote;
   content: "[" counter(endnote, decimal) "]";
}

/* Do not normally show the endnote  */
p span.endnote>a {
   display: none;
   vertical-align: top;
   font-size: inherit;
   background-color: hsl(var(--bg-hue),67%);
/*   position:absolute;
   float: right;
   width: 33%;
   left: 59%;    */
  align-content: center;
   margin: 0.125ex 0.5ex;
   padding: 0ex;
}

/* Show the endnote in a block-style element on hover  */
p span.endnote:hover>a {
   display: block;
   max-width: 33%;
   left: 59%; 
}

/* Show the endnote inline on activation  */
p span.endnote:active>a {
   display: inline;
}