@font-face {
  font-family: "DejaVuIx2w";
  src: url('/DejaVuSerif_ix2w.ttf');
  font-style: normal;
}

@font-face {
  font-family: "DejaVuBold";
  src: url('/deja-bold-heading.ttf');
  font-style: normal;
  font-weight: bold;
}

@font-face {
  font-family: "UnifontIx2w";
  src: url('/unifont_ix2w.ttf');
  font-style: normal;
}

@font-face {
  font-family: "deja-serif-space-chr";
  src: url('/deja-serif-space-chr.ttf');
  font-style: normal;
}

body { 
  padding: 1%; 
  font-family: serif, sans-serif, monospace;
}

.uni { font-family: "UnifontIx2w", serif; }
.unic {
  font-family: "UnifontIx2w", serif;
  padding-right: 0.25em;
}
.minipadleft { padding-left: 0.1em; }
.minipadright { padding-right: 0.1em; }
.padlirwbr { padding-left: 0.2em; padding-right: 0.1em; }
.padleft { padding-left: 0.25em; }
.padright { padding-right: 0.2em; } /*  yet unused */
.unir {
  font-family: "UnifontIx2w", serif;
  padding-left: 0.2em;
}
.unicr {
  font-family: "UnifontIx2w", serif;
  padding-left: 0.2em;
  padding-right: 0.15em;
}
.margleft { margin-left: 0.8em; }

.uni a, .unic a, .unir a, .unicr a { text-decoration: none !important; padding-left: 0.15em; padding-right: 0.15em; }


@media only handheld, only all and ( max-device-width: 640px ), 
       only all and ( max-device-height: 640px ) and ( min-device-width: 700px ) and ( max-device-width: 1200px ) { 
  body { font-size: 15pt; }
  body hgroup { margin: 0.5em; }
  body li { margin: 0.2em; }
}

.sep { padding: 0; margin: 0; height: 0.3em; visibility: visible; width: 30%; border-bottom: 1px dotted #555; }
.sep:after { content: " "; }

hgroup:first-child { margin: 1.5em 0.2em 2em; }
hgroup h1, hgroup p:last-child, hgroup h2:last-child { text-align: center; margin: 0; }
hgroup h1 { font-family: "DejaVuBold", serif, sans-serif, monospace; text-shadow: -1px -1px 1px #FFFFE8, +1px +1px 1px #FFFFE8; }
hgroup h1 span { color: #CB9E02; font-size: 1.4em; position: relative; bottom: -0.05em; text-shadow: -1px -1px 1px #FFFFF8, +1px +1px 1px #FFFFF8; }
hgroup p, hgroup h2 {  font-size: 1.5em; font-weight: bold; text-shadow: -1px -1px 1px #FFFFEE, +1px +1px 1px #FFFFEE; }

h1 { color: #A00707; font-size: 3em; }
h2 { margin: 1em 0 0.25em; }
h3 { margin: 0.7em 0 0.2em; }
h4 { margin: 0.6em 0 0.2em; }

hgroup.sub { margin: 1.75em 0 1em; }
hgroup.sub h2 { margin-bottom: 0.15em; font-style: italic; }
hgroup.sub + h3 { font-style: italic; }
hgroup.sub h3, hgroup.sub h2 + p { margin-top: 0; }
hgroup.sub h2 + p {  font-size: 1.17em; font-weight: bold; text-align: left; }

a.up { display: block; float: right; margin-top: 1.5em; }
a.up3 { display: block; float: right; margin-top: 0.8em; }

h2:target, h3:target, b:target, i:target, li:target { background-color: #FFFFCC; }

h2 .small { font-weight: normal; font-size: 0.8em; color: #333; }

hr { margin: 2.5em 0.5em; }
.hr { margin: 2.5em 0.5em; position: relative; top: -0.5em; }
.hr hr { margin: 0; position: relative; top: 0.5em; z-index: -1; }
a.hrl, a.hrr, a.hrm { margin: 0; padding: 1em 0 0.5em !important; position: absolute; display: flex; align-items: center; justify-content: center; top: -1em; }
a.hrl { left: 0; width: 32% !important; cursor: url(/arrow-up.png),auto; }
a.hrm { left: 32%; width: 32% !important; }
a.hrr { right: 0; width: 36% !important; cursor: url(/arrow-down.png),auto; }
.hrl .hrnnavbul { position: relative; left: 1em; }
a.hrl:focus, a.hrm:focus, a.hrr:focus { border: 0; background-color: #FFFFEE44; }
.hrnavbul  { border-radius: 1em; border: 1px solid #630; background-color: #FFFFEE; font-size: 0.6em; padding: 0.25em }
a.hrl:link, a.hrl:visited, a.hrl:hover, a.hrl:focus, a.hrm:link, a.hrm:visited, a.hrm:hover, a.hrm:focus, a.hrr:link, a.hrr:visited, a.hrr:hover, a.hrr:focus{ text-decoration: none; }

.minisep { margin: 0; padding: 0; height: 0.3em; width: 33%; border-bottom: 1px dotted #555; }
.minisep:after { content: " " }

ol, ul { margin: 0.1em; }
ul ol, ul ul, ol ol, ol ul { margin-left: 1em; padding-left: 0; }
li { margin: 0.12em; }
.whbull { list-style-type: "◦ "; }
.bull { list-style-type: disc; }
ul ul ul { list-style-type: "◦ "; }
.plusm { font-weight: normal; font-size: 0.6em; }

li > a:first-child { padding: 0.075em 0.225em; }
ol li > a:first-child {  padding: 0.075em 0 0.075em 0.225em;}
.submenuhead { font-weight: bold; padding: 0.075em 0.225em; }
a:focus, .submenuhead:focus { border: 2px ridge grey; background-color:#FFFFEE; padding: 0.075em 0.225em;  }

.shortdisp { display: none; }

@media only all and ( max-width: 27em ) {
  h1 { font-size: 2.7em; }
  hgroup h1 span { font-size: 1.25em; }
  hgroup p, hgroup h2 {  font-size: 1.35em; }
  body .shortdisp { display: inline; }
  body .longdisp { display: none; }
  ol, ul { margin: 0.1em; padding-left: 1.2em; }
  ul ol, ul ul, ol ol, ol ul { margin-left: 0.6em; padding-left: 0; }
  #dir, body { font-family: "deja-serif-space-chr", serif, sans-serif, monospace;  }
  body { letter-spacing: -0.015em; }
  li { margin-left: 0; padding: 0; text-indent: -0.15em; } 
  .unic { padding-right: 0.075em; }
  .ccds { letter-spacing: -0.05em; }
}

.anchor .anchorfg { display: none; }
.anchor:hover .anchorbg { display: none; transition: all 0.7s linear 0s; }
.anchor:hover .anchorfg { display: inline; transition: all 0.7s linear 0s; }
.abovefill { position: relative; z-index: 3; }

.popup { position: relative; }
.popup .popupfg, .popup .popupfgmid, .popup .popupfgL, .popup .popupfgXL, .popup .popupfgS { display: none; }
.popup:hover .popupfg, .popup:hover .popupfgmid, .popup:hover .popupfgL, .popup:hover .popupfgXL, .popup:hover .popupfgS { position: absolute; display: block; background-color: #E4E4E4; padding: 0.15em; border: 3px ridge gray; max-width: 70vw; transition: all 0.7s linear 0s; }
.popupfg { left:0; bottom:0; width: 24ex; }
.popupfgmid { left:-12ex; bottom:0; width: 24ex; }
.popupfgL { left:0; bottom:0; width: 32ex; }
.popupfgXL { left:0; bottom:0; width: 48ex; }
.popupfgS { left:0; bottom:0; width: 18ex; }
.bottomTL .popupfg, .bottomTL .popupfgL, .bottomTL .popupfgXL, .bottomTL .popupfgS { bottom: 0.8em; }
.bottomTL .popupfgmid { bottom: 0.88em; }
.topBL .popupfg, .topBL .popupfgmid, .topBL .popupfgL, .topBL .popupfgXL, .topBL .popupfgS { bottom: auto; top:1.1em; }
.bottomTL:hover, .topBL:hover { background-color:#FFFFBB; }

.linefill, .linefillB { display: block; position: absolute; z-index: 0; height: 0; width:100%; }
.linefill span, .linefillB span { display: block; position: relative; z-index: 0; top: -1.4em; height: 2.4em; width:100%; }
.linefill span:after, .linefillB span:after { content: "."; color: rgba(255,255,255,0); }
.linefill span { height: 1.7em; }
.linefillB span { height: 2.4em; }

nav kbd { font-weight: bold; font-size: 1.5em; }
.tt { font-family: monospace; font-size: 0.95em; }
.ttsm { font-family: monospace; font-size: 0.9em; }
.bitsmall { font-size: 0.99em; }
.slightsmall { font-size: 0.9em; }
.small { font-size: small; }
.smaller { font-size: 0.7em; }
.medsz { font-size: medium; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
.fatul { text-decoration: underline black solid 2px; }
.fatul2 { border-bottom: 2px solid black; }
.gray { color: gray; font-weight: bold; }
.lightgray { color: gray; }
.smallcaps { font-variant: small-caps; }
.nowrap { white-space: nowrap; }