:root { --hdr: #888; --hdrText: #222; --h: 5vh; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #aaa; border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover{ border: 0; }
::-webkit-scrollbar-track { background: transparent; border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track:hover{ background: #ddd; border: 2px; }
::-webkit-scrollbar-corner { background: #eee; }
::-webkit-scrollbar-button { background-color: #eee; }
/* *, *::before, *::after { box-sizing: border-box; } */
/* ::-webkit-button { appearance: none !important; } */
/* ::-webkit-text-size-adjust:none /* disable text size adjust on mobile */
/* ::-webkit-button-size-adjust:none /* disable button size adjust on mobile */
/* noto-serif-regular - latin */
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
@font-face {
  font-display: swap; 
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/noto-serif-v30-latin-regular.woff2') format('woff2'); 
 }
/* @font-face {
      font-family: 'NotoSerif';
      src: url('/lib/fonts/NotoSerif-VariableFont_wdth,wght') format('truetype-variations');
      /* Define the range for variable axes, e.g., weight from 100 to 900 * /
      font-weight: 100 900;
      font-style: normal; /* If the font has an italic axis * /
      font-display: swap; /* Recommended for performance * /
    } */
body { font-size: 0.9rem; font-weight: 400; line-height: 1.4rem; font-family: "Noto Serif"; color: hsl(0, 100%, 0%); background-color: hsl(210, 20%, 98%); max-width:100%; overflow: hidden; }  
/* "Times New Roman" (0.95rem) "Sitka Text" (0.9rem) */
hr { width: 100%; text-align: center; border-top: 1px solid lightgrey; background-color: black;  }
*:focus { outline: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; margin: 0.5em 0; } /* font-family: "Trebuchet MS"; */
h1 { font-size: 1.3rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.1rem; } h4 { font-size: 1.0rem; } h5 { font-size: 0.9rem; } h6 { font-size: 0.85rem; }
a, a:visited, a:active { background: transparent; font-style: italic; text-decoration: none; color: blue; outline: none; border: none; }
a:hover, a:focus, a:active { outline-width: 0; background: lightgray;  outline: none; border: none; }
#header { display:flex; justify-content:space-between; position:fixed; left:0; top:0; width:100%; height:var(--h); cursor:pointer; z-index:10; background-color:var(--hdr); }
#header { background:#111; color:#ccc; background-image: url("../img/hdr_aurora.png"); font-size: medium;  }
#header1, #header2, #header3, #header4, #headerRight { display:flex; align-items: center;}
#header1 { float: left; width:40px; }
#headerRight {float: right; }
#titleMain { flex-grow: 1; text-align: center; }
#page { display: flex; position: fixed; top: var(--h); left: 0; border-left:0; height: calc(100vh - var(--h) - 3vh); width: 100%; overflow: hidden; flex-direction: row; }
#tab { position:absolute; z-index: 1; width:15px; border-right: 0.8em solid #eee; font-size: 0.7rem; display:block; height: 100%; background:#ccc; overflow: auto; color: var(--hdrText);  transition: width 0.4s ease-in-out; }
#tab:hover { width:75px; border-right: 0; }
#nav { display:block; flex: 0 0 200px; background:#eee; width:15%; overflow: auto; line-height:150%; color: var(--hdrText); padding: 0.5em 0.5em 0.5em 15px; }
#nav.hidden { display: none; width: 0; }
#center { display: flex; flex: 1; flex-direction: column; overflow: hidden; }
#main { display:block; flex: 1; border-left: 1px solid #eee; padding-left:4px; overflow:auto; margin-left: 1em; }
#console { display:block; flex: 0 0 200px; padding-left:10px; overflow:auto; border-top: 2px solid #aaa; background:#999; font-size:small; color:#000; }
#console.hidden { display: none; width: 0; }
#rhs { display:block; flex: 0 0 300px; border-left: 1px solid #eee; padding-left: 4px; background:#eee; overflow:auto; margin-left: 0; left: 70%; }
#rhs.hidden { display: none; left: 100%; }
#zsearchf { background-color:#ddd;color:#333 }
#nav li:focus { background-color:lightblue; }
#graph { height: 33%; width: 99%; top: 0%; overflow: hidden;resize:vertical; -webkit-appearance: none; -moz-appearance: none; appearance: none }
#toc { cursor:pointer; }
pre { margin:0; padding:0; white-space: pre-wrap; }
code { font-family: "Segoe UI", "Segoe UI Symbol"; line-height: 1.4rem; font-weight: 400; color:blue; font-style: italic; font-size:0.8rem; }
details:not(.headdetails) > summary { font-style: italic; color: blue; cursor: pointer; }
label { font-size: 0.9rem; line-height: 1; margin: 0; font-style: italic; max-width:100%; }
details:not(.navdetails) > summary { list-style-type: none; }
details:not(.navdetails) > summary::-webkit-details-marker { display: none; }
details:not(.navdetails) > summary::after { content: ' ..'; }
details:not(.navdetails)[open] > summary::after { content: ''; }
footer { display:flex; position:fixed; left:0; bottom:0; justify-content: space-between; width: 100%; height: 3vh; cursor:pointer; overflow: hidden }
footer { color:#000; background-color:var(--hdr); font-size: 0.8rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }
#footer1 { overflow: hidden }
#footer2 { flex: 1; display: flex; justify-content: center; align-items: center; overflow: hidden }
#footer3 { flex: 0 0 20em; overflow: hidden }
[contenteditable="true"]:active, [contenteditable="true"]:focus { border: none; outline: none; }
.drag {-webkit-app-region:drag; }
.resize-handle { width: 3px; cursor: col-resize; background-color: #ccc; }
.resize-handle2 { height: 3px; cursor: row-resize; background-color: #ccc; }
.menuParent { width:40px; position: relative; background: transparent; box-shadow: none; }
.menuParent a {  margin: 2px; text-decoration: none; background:transparent; outline:none; color:black; display: inline-block; height: 100%; font-style: italic; } 
.menuParent:hover > ul { display:inherit; position:absolute; background-color: #ddd; border-radius: 10px; box-shadow: 5px 5px 5px #ccc; }
.menuParent li:hover { background-color:#e7e7e7; }
.menuChild { display: none; background: transparent; }
.menuChild li { background: transparent; line-height: 1.1rem; font-size: 0.8rem; float:left; width:100%; }
.menuChild li a { background:transparent; color: black; }
.context-menu { padding: 0px; position: absolute; border: 1px lightgrey; border-radius: 5px; box-shadow: 5px 5px 5px #aaa; background-color: #ddd;}
.context-menu li { text-decoration: none; padding: 0px; min-width: 100%; list-style: none; line-height: 1.4rem; border-radius: 5px; margin-left: -2rem; } /* why -2rem? */
.context-menu a { color: black; margin: 0px; background: transparent; }
.context-menu li:hover { background-color: #e7e7e7; }
.cm-items li { font-size: 0.8rem; }
.c { text-align: center; }
p { margin-bottom:0.3rem;margin-top:0.3rem; }
#rhs ul, #nav ul, header ul { list-style-type: none; margin: 0; padding: 0px; min-width:12em; background:transparent; }
ul ul ul { left: 100%;top: 0;margin-left:1px; }
.imgdiv { display: inline-block; margin: 0; border: 0; overflow:visible; }
.imgdiv img { display: block; transition: transform .4s; transform-origin: 50% 50%; }
.imgdiv:hover img { transform: scale(4); }
.btn { background-color:rgba(128,128,128,0.5);color:var(--hdrText);border: 0px solid lightgray;cursor:pointer;text-align:center; } /* width:5vh; */
.btn:hover { background-color: lightgrey;  }
.btndk { background:transparent;color:#ccc;border:none;width:5vh;text-align:center;font-size:larger;cursor: pointer;-webkit-app-region: no-drag}
.btndk:hover { background:transparent; color:#777; border:none; }
.tabbutton { color:#444; border:0; width:73px; text-align:left; font-size:0.75rem; font-style:italic; cursor: pointer; -webkit-app-region: no-drag; border-top: 2px solid #bbb; white-space: nowrap; }
.current { background: #ddd; }

/* for popups: see  Window Engine - MIT License - Copyright (c) 2019 Gauthier Staehler */
.popupGroup { justify-content: center; display: flex; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; line-height: 1.5; }
.popupGroup p { cursor: default; margin-top: 0; margin-bottom: 0rem; }
.popup { position: absolute; display: none; top: calc(var(--h) - 3px); left: 25%; z-index: 9; background-color: lightgray; width: 45%; height: 80%;} 
/* #peekPopup, #graphPopup { position:absolute; top:80px; left:100px; width:60%; height:80%; border:none; } */
/* .popup { box-shadow: 5px 5px 5px gray; } */
.popupHdr { z-index: 10; background-color: darkgray; color: black; height: 25px; margin-bottom: 0px;
	justify-content: space-between; display: flex; touch-action: none; } /* box-shadow: 5px 0px 5px gray; }  */
.popupActive { z-index: 100; }
.popupTitle { position: relative;  font-size: 14px; top:2px; }
.popupMain { padding: 0px; z-index: 9; display: flex; position:relative; border:none; width:100%; height:100%; }
#peekPopupMain, #graphPopupMain { position:relative; display:block; overflow:auto; height:95%; border:1px gray; }
#peekPopupMain a { background: transparent; font-style: italic; text-decoration: none; color: blue;  }
#notesPopupMain { position:relative; top:0; left:0; width:100%; height:calc(100% + 40px);border:none; }
.popupBtn { background-color: darkgray;color: black; cursor: pointer; font-size: 16px; border:none; }
.peekEdBtn1 { background-color: darkgray;color: black; cursor: pointer; font-size: 16px; border:none; }
/* *, *::before, *::after { box-sizing: border-box; } */

/*  for mobile etc*/
@media screen and (max-width: 1000px) {
#tab { display:none }
:root {--h: 6vh; }
body { font-size: 1rem; line-height: 1.5rem; }
#main { margin-left: 0.5em; }
h1 { font-size: 1.8rem; } h2 { font-size: 1.7rem; } h3 { font-size: 1.6rem; } h4 { font-size: 1.5rem; } h5 { font-size: 1.4rem; } h6 { font-size: 1.3rem; }
#nav { width: 50%; position: fixed; z-index: 100; height:90%; opacity: 0.9; left:0; transition: width 0.5s; flex-shrink:0;  overflow-x: hidden; }
#nav.hidden { display:block; width: 0; margin-right: 0em; padding-right: 0%; left:-10px} /* display:block needed to override display:none */
#rhs { width: 60%; left: 40%; position: absolute; z-index: 100; height: 100%; transition: left 0.5s; }
#rhs.hidden { display:block; left: 100%; } /* display:block needed to override display:none */
#graph { height: 40%; }
.popup { left:5vw; width:90vw; height:90vw; }
.notmobile { display: none; }
.resize-handle { display: none; }
.resize-handle2 { display: none; }
.menuChild li { line-height: 1.5rem; font-size: 1rem; float:left; width:100%; }
.cm-items li { line-height: 1.7rem; font-size: 1rem; }
}

@media print {
body *:not(.printable, .printable *) { display: none; }
#header, #tab, #nav, #rhs, #graph, .both { display: none  }
#center, #main { position: relative; width: 100%; left: 0px; top: 0px; border: none; height: auto; overflow: hidden  }
}

/* floating button */
#floaty { display: none }
#floaty1{ position:fixed; width:40px; height:40px; bottom:40px; right:20px; background-color:#585; border-radius:20px;
	text-align:center; font-size:40px; font-weight: bold; line-height: 40px; color:#000; } /* - */
#floaty2{ position:fixed; width:40px; height:40px; bottom:40px; right:80px; background-color:#585; border-radius:20px;
	text-align:center; font-size:40px; font-weight: bold; line-height: 30px; color:#000 } /* + */