/* MarkdeepNotes.css
 * This is really just https://casual-effects.com/markdeep/latest/slate.css
 * with SPC mods (search on SPC).
 */
/* CSS from fontsquirrel - this doesn't seem to work either...
@font-face {
    font-family: 'dejavu_sans_monobook';
    src: url('dejavusansmono-webfont.woff2') format('woff2'),
         url('dejavusansmono-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'dejavu_sans_monobold';
    src: url('dejavusansmono-bold-webfont.woff2') format('woff2'),
         url('dejavusansmono-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'dejavu_sans_monooblique';
    font-family: 'DejaVu Sans Mono Oblique';
    src: url('dejavusansmono-oblique-webfont.woff2') format('woff2'),
         url('dejavusansmono-oblique-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'dejavu_sans_monobold_oblique';
    font-family: 'DejaVu Sans Mono Bold Oblique';
    src: url('dejavusansmono-boldoblique-webfont.woff2') format('woff2'),
         url('dejavusansmono-boldoblique-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
*/
/*
@font-face { font-family: "DejaVu Sans"; src: url(DejaVuSans.ttf) } 
@font-face { font-family: "DejaVu Sans Mono"; src: url(DejaVuSansMono.ttf) } 
*/
/*@font-face { font-family: Roboto; src: url(Roboto-Light.ttf) } */

/* SPC mods: body font-size and line-height */
body {
    font-weight: 400;
    font-size: 12px; /*16px;*/
    font-family: Arial, Helvetica, "sans serif";
    text-align: left;
    line-height: 150%; /*170%;*/
}

/* SPC mods for lists */
ul {
  padding-left:0.5em;
  margin-left: 0.5em;
}
ol {
  padding-left:0.5em;
  margin-left: 0.5em;
}
li {
  padding-left:0;
  margin-left: 0.5em;
}

/* SPC additions for tooltips, from https://gist.github.com/maxfenton/edab8e790bc04ea1ee1e
   but modified by SPC.  If you have trouble with this, check the original.

   To use this, just add a 'tooltip' attribute to any element, thus:

       <span tooltip="WeBWorK">WW</span>
*/
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

/* Add this attribute to the element that needs a tooltip */
[tooltip] {
  position: relative;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[tooltip]:before,
[tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[tooltip]:before {
  position: absolute;
  z-index: 2;
  bottom: 100%;
  left: 10%;
  padding: 0px 5px 0px 5px;
  -webkit-border-radius: 3px;
  -moz-border-radius:    3px;
  border-radius:         3px;
  background-color: #FFF9B7;
  color: #000;
  content: attr(tooltip);
  text-align: center;
  font-size: 8px;
/*  line-height: 1.2; */
}

/* Show tooltip content on hover */
[tooltip]:hover:before,
[tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}


/* reset heading/link fonts to that of body */
.md a,
.md div.title, contents, .md .tocHeader,
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6,
.md .nonumberh1, .md .nonumberh2, .md .nonumberh3, .md .nonumberh4, .md .nonumberh5, .md .nonumberh6,
.md .shortTOC, .md .mediumTOC, .md .longTOC {
    font-family: inherit;
}

.md .tocHeader {
    border: none;
    margin-top: 25px;
    font-size: 100%;
    font-family: inherit;
    font-weight: 300;
}

/* SPC mod: set margin-bottom to -20px for new font size */
.md .longTOC .level1 {
    font-weight: 300;
    margin-bottom: -20px; /*-30px;*/
}

/* SPC mod: added DejaVu Sans */
.md div.title, .md div.subtitle, .md h1, .md h2, .md h3, .md h4, .md h5, .md h6 {
    font-family: 'DejaVu Sans','Roboto', Arial, Helvetica, "sans serif";
    font-weight: 300;
}

.md div.title {
    font-size: 43px;
    text-align: left;
    margin-bottom: 0px;
}

.md div.subtitle {
    text-align: left;
    font-size: 115%;
}

.md div.afterTitles {
    margin-top: 20px;
    margin-left: -20px;
    margin-right: -20px;
    height: 0px;
    border-bottom: 1px solid #000;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
}

.md div.afterTitles + p {
    margin-top: 30px;
}

/* SPC mod: changed font-weight for H1 */
.md h1 {
    font-size: 175%;
    font-weight: bold;
    margin-bottom: 25px;
    margin-left:-20px;
    margin-right:-20px;
    padding-left:20px;
    padding-top:25px;
    border-bottom: none;
    border-top:6px solid #5a5a5a;
}

/* SPC mod: changed font-weight for H2 */
.md h2 {
    font-size: 150%;
    font-weight: bold;
    border: none;
}

/* SPC mod: changed font size and weight for H3,H4,H5,H6.  Original was the same for all, namely:

    .md h3, .md h4, .md h5, .md h6 {
        font-size: 120%;
    }
*/
.md h3 {
    font-size: 130%;
    font-weight: bold;
    border: none;
}
.md h4 {
    font-size: 110%;
    font-weight: bold;
    border: none;
}
.md h5 {
    font-size: 100%;
    font-weight: bold;
    border: none;
}
.md h6 {
    font-size: 100%;
    font-weight: bold;
    border: none;
}

/* SPC mod: added font-family, font-weight, font-size, and color */
.md code {
/*    font-family:"dejavu_sans_monobook"; */
    font-family:monospace;
    font-size: 97%;
    font-weight: bold;
    color: #FFFFFF;
    background: #eee;
    padding-left: 2px;
    padding-right: 2px;
    background: unset;
}

/* SPC mod: added DejaVu Sans */
.md .longTOC {
    font-family: 'DejaVu Sans','Roboto', Arial, Helvetica, "sans serif";
    font-weight: 300;
}

.md pre.listing {
    font-size: 100%;
}

/* SPC mod: added DejaVu Sans */
.md pre.listing code {
/*    font-family:"DejaVu Sans Mono";*/
    font-family: monospace;
    font-weight: unset;
    background: none;
    color: unset;
}

/* Darkmode, wide screen: TOC on side */
@media screen and (min-device-width: 600px) {
  .md .longTOC {
    display: block;
    white-space: nowrap;    
    width: 170px;
    border-right: 1px solid #777;
    overflow-y:scroll;
    font-family: inherit;
    background: #202020;
    position: fixed;
    left: 0px;
    top: 0px;
    bottom:0px;
    margin: 0px;
    padding: 0px;
    padding-left:10px;
  }
  
  body {
    position: absolute;
    left: 200px;
    right:0px;
    margin: 0px;
    padding: 0px;
    max-width: unset;
    padding-right: 15px;
  }
}

/* Dark mode with side TOC on screen */
/* SPC mod: font-size */
@media screen {
  .md div.longTOC {
    font-size: 10px; /*15px;*/
  }
  
  
  .md svg.diagram {
    stroke: #ccc;
    fill: #ccc;
  }
  
  .md svg.diagram .opendot {
    fill: #000;
  }
  
  .md table.table {
    box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
    background-color: #2a2a2a;
  }
  
  .md table.table tr:nth-child(even) {
    background-color: #202020;
  }
  
  /* SPC mod: set the font-size.  I don't know why this is necessary, but without it,
   * table fonts are 16px */
  .md table.table td, .md table.table th {
    font-size: 12px;
    border: 1px solid #202020;
  }
  
  .md table.table th {
    color: #000;
  }
  
  /* SPC mod: added font and set the width to 98% to prevent code boxes from being wider than the page */
  .md pre.listing {
/*    font-family:"DejaVu Sans Mono"; */
    font-family: monospace;
    width: 98%;
    background: #202020;
    border: 1px solid #777;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
  }

  /* SPC mod: added font-family, font-weight, and color */
/*
  .md code {
    font-family:"DejaVu Sans Mono";
    font-size: 97%;
    font-weight: bold;
    color: #EEEEFF;
*/
/*    color: #fff; */
/*
    background: unset;
  }
*/
  .md .tocTop {
    display: inline;
  }

  .md div.afterTitles {
    border-bottom: 1px solid #fff;
  }
  
  .md div.title, .md div.subtitle, .md h1, .md h2, .md h3, .md h4, .md h5, .md h6 {
    color: #fff;
  }

  .hljs-comment,.hljs-quote{color:#a0f0aa}.hljs-variable,.hljs-template-variable,.hljs-tag,.hljs-name,.hljs-selector-id,.hljs-selector-class,.hljs-regexp,.hljs-deletion{color:#cc6666}.hljs-number,.hljs-built_in,.hljs-builtin-name,.hljs-literal,.hljs-type,.hljs-params,.hljs-meta,.hljs-link{color:#de935f}.hljs-attribute{color:#f0c674}.hljs-string,.hljs-symbol,.hljs-bullet,.hljs-addition{color:#b5bd68}.hljs-title,.hljs-section{color:#81a2be}.hljs-keyword,.hljs-selector-tag{color:#b294bb}.hljs{display:block;overflow-x:auto;background:#1d1f21;color:#c5c8c6;padding:.5em}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}
  .hljs-function .hljs-title { color:#81a2be}

  /* SPC mod: original was color: #ccc; */
  body {
    color: #fff;
    background: #3a3a3a;
  }

  /* SPC mod: make two asterisks mean SPC-code  NO!  Don't use this; it confuses the JS. */
  strong.asterisk {font-family:"DejaVu Sans Mono","Courier New","Courier",monospace;}

  /* SPC mod: class for paths */
  .path {font-family:"DejaVu Sans",sans-serif; font-size:93%;}

  .md div.title, .md h1, .md h2, .md h3, .md h4, .md h5, .md h6, .md .longTOC a, .md .longTOC code, .md a:link, .md a:visited {
    text-shadow: 0px 1px 2px rgba(0,0,0,0.5);
  }

  .md .admonition {
    position: unset;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
    background: #202020;
    border: 1px solid rgba(68,138,255,1);
    border-left: 2.5rem solid rgba(68,138,255,1);
  }

  .md .admonition-title {
    border-bottom: 1px solid rgba(68,138,255,1);
  }

  .md .admonition.warn, .md .admonition.warning {
    border: 1px solid rgba(255,170,0,1);
    border-left: 2.5rem solid rgba(255,170,0,1);
    background: #202020;
  }

  .md .admonition.warn .admonition-title, .md .admonition.warning .admonition-title {
    border-bottom: 1px solid rgba(68,138,255,1);
  }

  .md .admonition.tip {
    border: 1px solid rgba(68,138,255,1);
    border-left: 2.5rem solid rgba(68,138,255,1);
    background: #202020;
  }
  .md .admonition.tip .admonition-title {
    border-bottom: 1px solid rgba(68,138,255,1);
  }

  .md .admonition.error {
    border: 1px solid rgba(255,23,68,1);
    border-left: 2.5rem solid rgba(255,23,68,1);
    background: #202020;
  }

  .md .admonition.error .admonition-title {
    border-bottom: 1px solid rgba(255,23,68,1);
  }

  .md .longTOC a, .md .longTOC code, .md a:link, .md a:visited, .md a:link code, .md a:visited code {
    color: #80bfff !important;
  }

  /* SPC mode: added class spcquote */
  .spcquote {
    border: none;
    width: 90%; max-width:90%;
    text-align: left;
  }

  /* SPC: Markdeep claims to be smart about dollar signs, but it isn't smart enough.  In the HTML,
   * replace dollar signs that shouldn't be interpreted as TeX markers by, e.g.,
   *   <span class="dollar">42</span>
   * In backticks, use <span class="codedollar"></span>.  There's something not quite right about
   * the font, but it'll do.
   */
   .dollar::before {content:"$";}
   .codedollar {font-family:monospace; font-size:90%;}
/*   .codedollar {font-family:"DejaVu Sans Mono"; font-size:90%;}*/
   .codedollar::before {content:"$";}

  /* SPC: Styles for tables made with MakeHTMLTableForNotes.pl.  Markdeep tables are just
   * Markdown tables, which are severely deficient.
   */
  table.spctable {
    border: 1px solid #555555;
    border-collapse: collapse;
  }
  td.topcell {
    color: #000000;
    font-weight: bold;
    background: #AAAAAA;
    padding: 6px 8px 6px 8px;
    border-collapse: collapse;
    border-style:none;
    border-left: 1px solid #555555;
    border-right: 1px solid #555555;
    border-top: 1px solid ##555555;
  }
  td.brightcell {  /* for repeating the header row */
    color: #000000;
    font-weight: bold;
    background: #AAAAAA;
    padding: 2px 8px 2px 8px;
    border-collapse: collapse;
    border-style:none;
    border-left: 1px solid #555555;
    border-right: 1px solid #555555;
    border-top: 1px solid ##555555;
  }
  td.leftlightcell {
    font-weight:bold;
    color: #EEEEEE;
    background: #3B3B3B;
    padding: 2px 8px 2px 8px;
    border-collapse: collapse;
  }
  td.leftdarkcell {
    font-weight:bold;
    color: #EEEEEE;
    background: #202020;
    padding: 2px 8px 2px 8px;
    border-collapse: collapse;
  }
  td.lightcell {
    color: #FFFFFF;
    background: #3B3B3B;
    padding: 2px 8px 2px 8px;
    border-collapse: collapse;
    border-left: 1px solid #555555;
  }
  td.darkcell {
    color: #EEEEEE;
    background: #202020;
    padding: 2px 8px 2px 8px;
    border-collapse: collapse;
    border-left: 1px solid #555555;
  }
  td.sepcell {
    color: #FF0000;
    background: #555555;
    height: 2px;
    min-height: 2px;
    border-collapse: collapse;
  }
}

/* SPC mod for typesetting the TeX and LaTeX logos (from https://stackoverflow.com/questions/8160514/is-there-css-for-typesetting-the-latex-logo-in-html).  To use this, insert one of the following in your HTML:

  <span class="tex">T<sub>e</sub>X</span>

  <span class="latex">L<sup>a</sup>T<sub>e</sub>X</span>

*/
.tex sub, .latex sub, .latex sup {
  text-transform: uppercase;
}
.tex sub, .latex sub {
  vertical-align: -0.5ex;
  margin-left: -0.1667em;
  margin-right: -0.125em;
}
.tex, .latex, .tex sub, .latex sub {
  font-size: 1em;
}
.latex sup {
  font-size: 0.85em;
  vertical-align: 0.15em;
  margin-left: -0.36em;
  margin-right: -0.15em;
}

/* For <div>s, etc., used in place of diamond comments */
.diamond {display:none;}