/* last updated: 9 September 2024, 7:43pm */
/* 11 August 2024, 9:30am */
:root {
  --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
  --mono-font: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", monospace;
  --color-bg: #FFFFFF;
  --color-fg: #000000;
  --a-fg: blue;
  --ab-fg: blue;
  --al-fg: #0000FF;
  --ar-fg: #000000;
  --an-fg: #854A00; /* wcag AAA */
  --at-fg: #0000FF;
  --h4: #373737;
}
path { fill: black; }            
/* Commenting this on 22 December 2022
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #000000;
    --color-fg: #ffffff;
    --a-fg: aqua;
    --ab-fg: pink;
    --al-fg: #00FFFF;
    --ar-fg: #DFFF00;
    --an-fg: orange;
    --at-fg: #a4c939;
    --h4: #ffffff;
  }
  path {
    fill: yellow;
  }
}
*/
article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
section {
  display: block;
}

html {
  margin: 0;
  padding: 0;
  font-family: var(--sans-font);
  scroll-behavior: smooth;
  overflow: auto;
}

/* Content */
body {
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-family:Arial,sans-serif;
  line-height: 1.6;
  background-color: var(--color-bg);
  color: var(--color-fg);
}

::selection {
  color: black;
  background: yellow;
}

/* Header */
.wrapper {
  margin: 0 auto;
  padding: 10px;
  clear: both;
  border-bottom:1px solid black;
}
.wrapperf {
    margin: 0 auto;
    padding: 10px;
    clear: both;
  }
  
header {
  margin: 0 auto;
  padding: 0;
  font-family: arial, helvetica, sans-serif;
  color: var(--color-fg);
  background-image: url('/s/aruljohn_logo.svg');
  background-size: 40px;
  background-position: 15px 0;
  background-repeat: no-repeat;
  height:40px;
  max-width: 1200px; /* center panel */
}

#tnav {
  margin: 0 10px 0 0;
  padding: 0;
  float: right;
}

header #naam {
  margin: 0;
  padding: 5px 0 0 70px;
  font-family: arial, helvetica;
  font-size: 1.85rem;
  font-weight: normal;
  display:block;
  float:left;
}

header #naam a,
header #naam a:visited {
  color: black;
  text-decoration: none;
}

header #naam a:hover {
  color: #ff9900
}

nav#nav{
  margin:0;
  padding:0.5em 0;
  margin-left:280px;
}
ul#fav {
  margin: 0;
  padding: 0 0 0.5em 0;
  font-family: arial, helvetica;
  font-weight: normal;
  display: block;
  white-space: nowrap;
}

ul#fav li {
  display: block;
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
}

ul#fav li a, ul#fav li a:visited {
  margin: 0.2rem 0.5rem 0.2rem 0;
  padding: 0.25rem 0.5rem;
  border: 1px solid black;
  font-size: 1.1em;
  color: black;
  transition: none !important;
  text-decoration:none;
}

ul#fav li a:hover {
  background-color: #a4c639;
  text-decoration: none;
}

ul#fav li {
  vertical-align: middle;
}

/* Content */
main {
  margin: 10px auto;
  padding: 0 15px;
  min-height: 600px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  max-width: 1200px; /* center panel */
}

main a, main a:visited {
  color: var(--a-fg);
}

main a:hover {
  color: #ff6633;
}

section {
  margin:0;
  padding: 0 10px;
  min-width:650px;
  order: 2;
  aspect-ratio: 1/1;
  flex: 1;
}

main section ul {
  margin:0 20px 0 25px;
  padding:0;
  list-style-type:square;
}
main section li {
  margin:0;
  padding:2px 0;
}
#toc a, #toc a:visited, #related a, #related a:visited {
  color: var(--at-fg);
}
article {
    margin:0;
    padding:0;
}
section article img {
  display: block;
  margin: 0 auto;
  transition: transform 0.25s ease;
  /* cursor: zoom-in; */
}
/* section article img:active {
  cursor: zoom-out;
  transition: all .25s;
  transform: scale(1.75);
} */
section p img {
  max-width:100%;
  margin:0 auto;
}
section p img.ifull {
    max-width:100%;
}
img + em {
  display:block;
  margin:0.5em 0;
  text-align:center;
}

#hpfeed ul {
  margin:0;
  padding:0;
}
#hpfeed ul li{
  margin:0 0 0 1em;
  padding:3px;
}
pre,
code {
  font-family: var(--mono-font);
  border-radius: 3px;
}

pre {
  margin:1rem 0;
  padding: 1em;
  font-family: var(--mono-font);
  font-size: 1rem;
  font-weight: normal;
  color: black;
  background:#eeeeee;
  border: 1px solid #121212;
  border-radius: 0.5em;
  overflow-x: auto;
  max-width:100%;
}

pre.term {
  border-top: 1.5em solid gray;
  border-radius: 0.5em;
  box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 0px gray;
}

code.terminal {
  color:black;
}

pre.nocode {
  border: 0;
  color: blue;
  background: white;
}

pre code.term {
  display: inline;
  background-color: transparent;
}

pre code.term::before {
  content: "$ ";
  color: black;
  font-size:110%;
}

pre.letter {
  white-space: pre-wrap;
  border:none;
  border-radius:0;
  border-left: 1rem solid #9E9E9E;
  background:#EFEFEF;
}

pre.browser {
  border-radius:0.75rem 0.75rem 0 0;
  border-top:2rem solid brown;
  border-color:brown;
  background-color:white;
}
pre.browser::before {
  content: " web browser";
  position:absolute;
  margin-top:-2.95rem;
  font-size:1.15rem;
  font-variant:small-caps;
  color:white;
}
pre.wb {
  border-radius:0.5rem 0.5rem 0 0;
  border-top:2rem solid black;
  border-color:black;
  margin:1rem 0;
  background-color:white;
  font-size: 1.15rem;
}
pre.wb::before {
  content: "Whiteboard";
  position:absolute;
  margin-top:-2.95rem;
  color:white;
  font-size:1.25rem;
  font-variant:small-caps;
}

strong > code {
  font-weight: normal;
}

main section label {
  font-size: 1.2em;
}

main section .desc {
  padding: 0;
  min-height: 35px;
  font-size: 1.1em;
  position: relative;
}

div.geoloc {
  min-width:300px;
}

main section .pin {
  margin: 0.25rem 0;
  padding: 0;
  font-size: 1rem;
  position: relative;
}

main section .pin h2 {
  margin: 0;
  padding: 0;
}

main section .pin p {
  margin: 0;
  padding: 0;
  font-style: italic;
  text-align: justify
}

.read::before {
  content: '\01F525';
  padding-right: 5px;
}
main section .brdr {
  background: #ccc;
  margin: 10px 10px 0 0;
  padding: 1em;
}
main section .brdr1 {
    background:#eeeeee;
  margin: 10px 10px 0 0;
  padding: 1em;
}
/* rnav */
#rnav {
  margin: 0 0 0 0;
  padding: 10px;
  width: 320px;
  min-width: 300px;
  order:3;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
a[href^="https://"]::after {
  display: inline-block;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 12.2 12.2' width='14' height='14'%3E%3Cpath d='M5.7 0v1.5h4L4.5 6.7l1 1.1 5.3-5.2v3.9h1.4V0z'/%3E%3Cpath fill='none' d='M3.4 6.7l3-2.9H1.5v7h7V5.9l-3 2.9z'/%3E%3Cpath d='M8.5 5.9v4.9h-7v-7h4.9l1.5-1.6H0v10h10V4.4z'/%3E%3C/svg%3E");
  margin-left: 0.25em;
}

/* lnav */
#lnav {
  margin: 0 20px 1em 0;
  padding: 0;
  width:250px;
  height:auto;
  order: 1;
}

.lmenu,.rmenu{
  margin-bottom:1em;
  padding:0;
}
.lmenu .tit,.rmenu .tit{
  margin:0;
  padding:5px 0;
  color: var(--h4);
  font-family:Arial,helvetica;
  font-size:1.5rem;
  font-weight:400;
}
#lnav ul, #lnav li,#rnav ul, #rnav li {
  margin: 0;
  padding: 0;
  list-style-type: none;
  line-height:150%;
}

#lnav li a, #lnav li a:visited {
  margin: 0.25em 0;
  padding: 0.25em 0;
  color: var(--al-fg);
  text-decoration: none;
  font-size:1rem;
  display:block;
}

#lnav li a:hover {
  color:#ff9900;
}

#lnav li.title:hover {
  color:#ff9900;
}

.rmenu li a {
  display:block;
}
.rmenu a, .rmenu a:visited {
  margin:0.5em 0;
  padding:0.25em 0;
  color: var(--ar-fg);
  font-size:1rem;
}
.rmenu a:hover {
  color: var(--ar-fg);
  text-decoration: none;
}
.rmenu select {
  width:90%;
  padding: 0.5rem 0;
}
/* Images */
img {
  border: 0px solid white;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
  aspect-ratio: auto 16 / 9;
}
img.book{width:40%}
img.book:hover{
  transition: all 0.25s;
  transform: scale(1.9);
}
/* Footer */
footer {
  margin: 0 auto;
  padding: 1em;
  overflow: hidden;
  font-size: 1rem;
  color: black;
  background: #fefefe;
  line-height: 200%;
  clear: both;
  width: 1200px;
}

footer p {
  margin: 0;
  padding: 0;
}

.aboutf {
  margin: 0;
  padding: 0 10px;
  clear: both;
}

.tdcol {
  margin: 0;
  padding: 0;
  width: 23%;
  float: left;
}

.tdcol p {
  margin: 0 1em 0 0;
  padding: 0;
  color: black;
}

.tdcol .ttl {
  margin: 0;
  padding: 0;
  color: #9E2C00;
  font-size: 1.2rem;
  font-weight: normal;
}

.tdcol ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.tdcol li {
  margin: 0;
  padding: 0;
  color: #9E2C00;
}

.tdcol li::before {
  padding-right: 0.5em;
}

.tdcol li:hover::before {
  color: white;
}

footer #fsocial {
  margin: 0;
  padding: 1em 10px;
  clear: both;
}

footer a,
footer a:visited {
  color: blue;
  text-decoration:none;
}

footer a:hover {
  color: #ff9900
}

footer #fsocial a,footer #fsocial a:visited {
    padding:0.25rem 0.5rem;
    border:1px solid black;
    color:black;
}
footer #fsocial a:hover {
    background:yellow;
}

/* Titles */
h1 {
  margin: 0 0 0 0;
  padding: 0.5em 0;
  font-size:2em;
  font-family: var(--sans-font);
  font-weight: normal;
  line-height:1.2em;
}

h2 {
  margin: 0.5em 0;
  padding: 5px 0 0 0;
  font-family: var(--sans-font);
  font-weight:normal;
}

h3 {
  margin:0.5em 0;
  font-family:Helvetica,sans-serif;
  font-weight:400;
  color:#854300;
}

h4 {
  color: var(--h4);
  font-family: var(--sans-font);
  font-size:1.1rem;
}

h5 {
  margin: 0.5em 0;
  color: navy;
  font-size: 1em;
}
h4,h5{
  margin: 0;
  padding: 15px 0 0 0;
}

/* Form */
label {
  color: var(--color-fg);
  font-family: "trebuchet ms", sans-serif;
  font-variant: small-caps;
}

select,
textarea {
  font-family: var(--mono-font);
  font-size: 1rem;
}

input.box {
  border: 2px solid #555555;
  padding: 5px;
  color: black;
  font-family: var(--mono-font);
  font-size: 1rem;
}

.boxfull {
  width: 90%;
}
.boxurl {
  width: 60%;
}
div.btn{margin:10px 0;}
input[type="submit"],
input[type="button"],
button {
  margin: 0;
  padding: 0.25em 0.35em;
  font-family: verdana, sans-serif;
  font-size: 1em;
  text-align: center;
  -webkit-box-shadow: 3px 3px 0 0 #636363;
  box-shadow: 3px 3px 0 0 #636363;
  -webkit-border-radius: 0.25em;
  -moz-border-radius: 0.25em;
  border-radius: 0.25em;
  color: #fff;
  display: inline-block;
  background: #444444;
  border: 1px solid #888888;
}
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
  cursor: pointer;
  color: white;
  background: #378de5;
  border: 1px solid #06699b;
}
.bg-green {
  background-color: #a4c639;
  border-color: green;
}
.bg-green:hover {
    background-color:green;  
}
span.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin:0.5rem;
  padding: 15px;
  border-radius: 10px;
  color:#000;
}
span.btn-af, span.btn-af:visited {
  background-color: #ffd912;
  color: #000;
}
span.btn-af:hover {
  background-color: #f58220;
  color: #000;
}
.emoji{font-size:2rem}
.emoji-lg{font-size:3rem}
.permlink input {
  padding: 5px;
  border: none;
  font: 14px monaco, 'courier new';
  color: blue;
  width: 100%;
}

/* error */
.err,
#mesg {
  color: red;
}

.ok {
  color: green;
}

main .center, .center {
    text-align: center;
    margin-left:auto;
    margin-right:auto;
}

.left {
  margin-left: 0.5em;
  float: left;
}

.right {
  margin-left: 0.5em;
  float: right;
}

#mesg {
  display: none;
}

.lg {
  font-size: 1.5em;
}

main section .notfound {
  border: 1px solid firebrick;
  margin: 1em 0;
  padding: 0.75em;
  color: red;
  background: #FFCCCC;
  display: inline-block;
}

main section .found {
  color: black;
}

/* examples */
p.note,
div.note {
  font-family: var(--mono-font);
  font-size: 0.9rem;
}

p.note em {
  padding: 3px;
  color: black;
  background: lemonchiffon;
  font-style: normal;
}

article p.cap {
  font-family: var(--mono-font);
  font-size: 1rem;
  text-align: center;
  padding: 0.25rem 0;
}

/* tables */
main .content-table {
  margin: 10px 0;
  border-collapse: collapse;
  vertical-align: top;
}

main .content-table th {
  border: 1px solid #99978b;
  padding: 4px;
  font-family: Arial, helvetica;
  background: #e3e3de;
  color: black;
}

main .content-table td {
  border: 1px solid #99978B;
  padding: 4px;
  font-family: Arial, helvetica;
  vertical-align: middle;
}

main .content-table td.title {
  text-align: right;
  font-size: 1.1em;
  font-variant: small-caps;
}

/* Regular table */
main table{
    border-collapse: collapse;
    min-width:500px;
}
main table td {
  font-family: verdana, arial, helvetica, sans-serif;
  line-height: 150%;
  vertical-align: top;
  border:1px solid black;
  margin: 0.3em;
  padding: 0.25em 0.5em;
}

main td.left {
  margin-left: 0px
}

main td.right {
  padding: 0px 5px
}

/* breadcrumbs */
#breadcrumbs {
  margin: 1rem 0;
  font-size: 1rem
}

#breadcrumbs a,
#breadcrumbs:visited {
  color: var(--ab-fg);
}

#breadcrumbs a:hover {
  text-decoration: none;
}

.updatedon {
  float: right;
  margin-right: 1em;
  font-size: 90%;
}
.lastupdated{
  font-size: 90%;
}
/*verse*/
.verse {
  margin:0;padding:0;
  border-top:1px dotted black;
  line-height: 130%;
  font-family:menlo,courier,monospace;
  font-size:0.8em;
}
.ver {
  margin: 2px;
  padding: 5px;
}

/* image icons */
.icon {
  background-image: url('/i/sprite.png');
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
}

.icon-linux {
  background-position: 0 -250px;
}

.icon-mac {
  background-position: -30px -250px;
}

.icon-windows {
  background-position: -60px -250px;
}

/* 3 bar */
#menu {
  display: none;
}

/* home page tab bar */
a.hphref {
  padding: 3px 5px;
}

div.hph {
  padding:10px 15px 10px 0;
  display:flex;
  flex: 1 auto;
}
div.hpimg {
    max-width:100px;
    margin-top:1.5rem;
    font-size:3rem;
}
.hpimg a,.hpimg a:visited{text-decoration:none}
div.hppost {
    margin-left:10px;
    font-size: 90%;
}
/* custom */
.bugr::before {
  content: "\01F41E";
}

main a.bugr::before,
footer a.bugr::before {
  text-decoration: none;
}
a.rtfc {
  display:inline-block;
  margin-right:1rem;  
  padding:0;
  text-decoration: none;
  
}
.rssbutton {stroke: none; fill: orange;} .rsssymbol {stroke: none; fill: white;}
.pix {
  margin:0;padding:0;
  text-align: center;
}
#lnav a.new {
  font-weight: bold;
}
/* text backgrounds */
.new {
  background:yellow;
}
.hilite {
  padding:0.1rem;
  background-color:lemonchiffon;
}
div.ajrwd{margin:0;padding:0;min-height:300px;max-width:100%}
.dabba{border:1px solid gray;border-radius:0.5em;padding:0.5em 1em;margin:1em 0;border:2px dashed black}
code.output{background-color:aquamarine}
pre.output{margin-top:0;color:black;background:yellow;border:1px solid black}
pre.wanna{color:black;background:aquamarine;border:2px dotted black}
div.output{margin:0;padding:0.5em;color:yellow;background:black;border:1px solid black;border-top-right-radius:1em;}
/* categories */
main section p#category a,main section p#category a:visited{margin:0;padding:3px 5px;color:black;background-color:yellow;text-decoration:none;font-family:menlo,Consolas, Liberation Mono, Monaco, Lucida Console, monospace;font-size:1rem;text-transform:uppercase;border:1px solid #878787}
#category a:hover{background-color: orange;border:1px solid orange}
/* comment */
.comment {margin:0.5rem 0 0.75rem 0;font-size:95%}
.comauthr{margin:0;font-family:menlo,monospace,courier;font-size:90%;background:lightgreen}
.comgrav{float:left;margin:1.5rem 0 0 0;}
.commesg{
  margin:0.5rem 0 0.5rem 80px;
  min-height:80px;
  font-family:monospace;
  font-size: 0.9rem;
  line-height:1.2rem;
  white-space:pre-wrap;
  max-width:99%;
  overflow:scroll;
}
#frmcomment label {padding:3rem 0}
#frmcomment .lacimg{margin-top:2rem;float:left}
#frmcomment .lactxt{margin-left:80px}
.halfdabba{width:48%;float:left}
#frmcomment textarea{width:92%;height:100px;font-family:monospace,'Courier New', Courier}
#frmcomment input{margin:0.75rem 0;padding:0.25rem;width:90%;font-family:monospace,'Courier New', Courier;font-size:14px}
#frmcomment button{font-family:monospace,'Courier New', Courier;font-size:95%}
/* youtube video */
.youtube-video {
  aspect-ratio: 16 / 9;
  width: 100%;
}
/* kbd */
kbd {
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow:
      0 1px 1px rgba(0, 0, 0, 0.2),
      0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
    color: #333;
    display: inline-block;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;
}
/* jobs */
main section div.bdabba{
    border:3px solid #444;
    border-radius:1rem;
    padding:1rem;
    font-family:monaco,monospace;
}
div.bdabba hr{border:2px solid #444;}
div.bdabba .ppoc{display:none}
button.butt,button#bcopy{color:black;background:white;font-size:1rem;}
button.butt:hover,button#bcopy:hover{color:white;background-color:black;}
#bshare{border:0;margin:0.5rem 0;width:90%;font-family:monaco,monospace;font-size:1rem;}

/* iPhone */
@media screen and (max-width:767px) {
  #category a{display:block}
}
/* pagination */
#bpnav a,#bpnav a:visited{padding:0.4rem 0.8rem;background:yellow;display:inline-block;border-radius:1.2rem;text-decoration:none;border:1px solid white;color:var(--color-fg)}
#bpnav a:hover{color:white;background:coral}
#bpnav span.sel{color:white;background:coral;padding:0.4rem 0.8rem;display:inline-block;border-radius:1.2rem}

/* Tablet - iPad */
@media screen and (min-width:768px) and (max-width:1200px) {
  header {
      margin: 0 auto;
  }
  header img {
    display: none;
  }

  header,
  footer {
      width: auto;
  }

  nav#nav {
      margin: 0 auto;
  }
  nav#nav ul#fav {
    margin-top: 2em;
    display:block;
    clear:both;
  }
  main {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex-flow: wrap;
    margin: 0;
    padding: 0;
    float: none;
    min-width: 0;
    width: 100%;
  }

  section {
    float: none;
    width: 90%;
    max-width: 90%;
    order: 1;
  }

  div.geoloc {
      margin:0;
      padding:10px 5px;
      min-height:100px;
  }
  form {
    margin: 0.5em auto;
    text-align: center;
  }

  input[type="text"],
  input[type="submit"] {
    display: block;
    margin: 0.5em auto;
    text-align: center;
  }

  nav#rnav {
    margin: 1em auto;
    padding: 0.5em;
    float:none;
    order: 3;
    width: 90%;
  }

  #rnav a,
  #rnav a:visited {
    text-decoration: none;
    width: auto;
  }

  #rnav a:hover {
    text-decoration: none;
  }

  nav#lnav {
    margin: 1em auto;
    padding:0 1em;
    order: 2;
    width: 90%;
  }
  footer {
    margin: 0;
    padding: 1em;
    width: auto
  }

  footer .aboutf {
    width: auto;
    padding: 1em
  }

  .tdcol {
    display: inline-block;
    float: none;
    width: 40%;
    margin: 0.25em;
  }
}
img[src*='#center'] {
    display: block;
    margin: auto;
}
#toc ul, #related ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#toc li, #related li {
  margin:5px 0;
  padding:0 15px;
  text-indent: -0.75rem;
}
#toc li::before {
  content: '\1F680  ';
}
.toc-title {
  margin:5px 0;
  font-size: 130%;
  font-weight: bold;
}
#related li::before {
  font-size: 1.5rem;
  content: '\1F449   ';
}
blockquote {
  color: var(--color-fg);
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px 1.5em 0;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote::before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  vertical-align: -0.4em;
}
blockquote p {
  display: block;
  color: var(--color-fg);
  font-family: var(--mono-font);
  font-size:1rem;
}
.postnav {
display:flex;
flex-direction:row;
font-size: 1rem;
color: var(--color-fg);
}
.prevpost, .nextpost {
  width: 50%;
}
.prevpost {
  text-align:left;
}
.nextpost {
  text-align:right;
}
.prevpost a, .prevpost a:visited, .nextpost a, .nextpost a:visited {
  color: var(--an-fg);
}
/* ezoic */
.ezoic-ad {
    display:block;
    margin:10px 0 0 0;
}
.ezoic-video-wrap {
    margin:10px 0;
}
.ez-video-wrap {
    display:none;
}
/* search dabba */
#dsearch {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
} 
form#frmsearch {
    border: none;
    padding: 0;
}
input#isearch {
    font-family:var(--mono-font);
    font-size:1.1rem;
    width:90%;
    border-bottom: 1px solid black;
    border-top:0;border-right:0;border-left:0;
    display: block;
    padding: 9px 4px 9px 40px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center;
}
.dcat a, .dcat a:visited {
    padding:0.25rem 0.5rem;
    color:black;
    background:#a4c639;
    text-decoration: none;
    border-radius:0.25rem;
    font-family:var(--mono-font);
    font-size:0.9rem;
    text-transform: uppercase;
}
.dupdatedon {
    float: right;
    font-size: 90%;
    font-variant: small-caps;
}
.dcat a:hover {
    color:black;
    background-color: yellow;
}

/* categories */
#category {
  margin: 0.75rem 0;
}
#category a,#category a:visited {
  margin:0;padding:3px 5px;color:black;background-color:yellow;text-decoration:none;font-family:menlo,Consolas, Liberation Mono, Monaco, Lucida Console, monospace;font-size:1rem;text-transform:uppercase;border:1px solid #878787
}
#category a:hover {
  background-color: orange;border:1px solid orange
}
@media screen and (max-width:767px) {
  #category a {
    display:block
  }
}

/* tags */
#dtags a,#dtags a:visited{
  border:1px solid black;
  border-radius:0.25rem;
  padding:0.25rem 0.5rem;
  text-decoration:none;
  font-family: var(--mono-font);
  font-size: 0.9rem;
  text-transform:uppercase;
  color:black;
  background:yellow;
}
#dtags a:hover {
  background:#a4c639;
}

/* Media Queries */
/* iPhone */
@media screen and (max-width:767px) {

  /* raw */
  h1 {
    margin: 0;
    padding: 0.5em 0.5em;
    font-size: 1.7em;
    text-align: center;
  }

  h2, h3, h4 {
    margin: 0 0.65em;
  }

  input[type="text"],
  input[type="submit"] {
    display: block;
    margin: 0.5em auto;
    text-align: center;
  }
  textarea {
    display:block;
    width:80vw;
    overflow-x:auto;
  }
  #submit {
    -webkit-border-radius: 0.25em;
    border-radius: 0.25em;
  }

  /* raw ends */
  header {
    margin: 0;
    padding: 0 0.5em;
    background-image: url('/i/logo40.png');
    background-repeat: no-repeat;
    background-position: 0.25em 0;
    min-height: 40px;
    width: auto;
  }

  header img {
    display: none;
  }

  header #naam {
    margin: 0;
    padding: 0 0 0 55px;
    text-align: center;
  }

  nav#nav {
    display: none;
    margin: 2.75em 0 0 0;
    padding: 0;
    position: absolute;
    right: 0;
    background: white;
    z-index: 90;
  }

  nav#nav ul#fav {
    float: none;
    margin: 0;
    padding: 0;
    z-index: 90;
  }

  nav#nav ul#fav li {
    float: none;
  }

  nav#nav ul#fav li a {
    margin: 0 0 0.25em 0;
    padding: 0.5em 4em;
    display: block;
    text-decoration: none;
  }

  main {
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex-flow: wrap;
    margin: 0;
    padding: 0;
    min-width: 0;
    float: none;
    width: 100%;
  }

  section {
    float:none;
    margin: 0;
    padding: 0 0.10em;
    width:90%;
    min-width: 90%;
    order: 1;
  }
  main section p {
      margin: 10px;
      padding: 0 5px;
      word-break: break-word;
  }
  .toc-title {
      margin-left: 1.5rem;
  }
  .lastupdated {
      text-align: center;
  }
  main section h1 {
    margin: 0;
  }

  div.geoloc {
    margin:10px; padding:0;
    min-height:100px;
  }
  a#viewmore { margin-left:0.65em }
  main section p.desc {
    margin: 0;
    padding: 1rem;
    background-image: none;
  }
  main section p.desc::before {
    background:none;
  }
  
  main table {
    margin: 1rem auto;
    min-width:auto;
  }
  table.content-table {
    width: 100%;
  }

  form {
    margin: 0.5em auto;
    text-align: center;
  }

  main section .brdr {
    margin: 0.5em;
    padding: 1em;
  }

  main section .pin {
    padding:10px;
  }
  main section .pin::before {
    background: none;
  }

  main section .results {
    margin: 0 0.5em;
    padding: 0 0.5em;
  }

  main section .right {
    display: block;
  }
  #breadcrumbs {
    text-align: center;
  }
  .postnav {
    flex-direction:column;
    font-size: 0.95rem;
    color: var(--color-fg);
  }
  .prevpost, .nextpost {
    width: 90%;
    text-align: center;
  }
  nav#rnav {
    margin:0 auto 1em auto;
    float:none;
    width:95%;
    order: 3;
  }

  #rnav .rmenu p {
    display: block;
  }
  .rmenu a img {
      margin:1em auto;
      padding:1em 0;
  }
  .rmenu .tit,.lmenu .tit{
      color: var(--h4);
  }
  nav#lnav {
    margin:0 auto;
    width:95%;
    order: 2;
    height:100%;
  }

  footer {
      padding: 1em;
  }

  footer,
  .aboutf {
    padding: 0;
    margin: 0;
    width: auto;
  }

  .tdcol {
    display: block;
    float: none;
    width: 95%;
    margin: 0.25em;
  }

  .tdcol li::before {
    padding: 0;
    content: "";
  }
  
  .tdcol li a, .tdcol li a:visited {
    margin: 0;
    padding: 0.5em;
    display:block;
    text-decoration: none;
    border-bottom:1px solid black;
  }

  footer #fsocial {
    margin: 0;
    padding: 0;
    clear: both;
    display: block;
    float: none;
    position: relative;
  }
  footer #fsocial p {text-align: center;}

  footer #fsocial a {
    margin-bottom: 0.25rem;
  }

  #wrapperf footer #fsocial div a,#wrapperf footer #fsocial a:visited {
    margin:0 5px 0.5rem 5px;
    display: inline-block;
    background:pink
  }

  /* 3 bar */
  #menu {
    margin: 0;
    padding: 0;
    float: right;
    color: white;
    font-size: 1.75em;
    text-align: center;
    display: block;
  }
  pre,pre.term{
    margin:0 10px;
    max-width:766px;
  }
  pre.wb {
    margin:0.5rem;
  }
  .updatedon{
    float:none;
    text-align:center;
  }
  #rnav,footer{
      font-size:1em;
  }
  .hpdt{display:none}
  #hpfeed{margin:0;padding:0;}
  #hpfeed ul{margin:0;padding:0}
  #hpfeed li{list-style-type:none;margin:10px 0;padding:0;}
  #hpfeed div{margin:0;}
  p.hph {
    width:100%;
  }
  code{overflow-wrap: break-word;}
  div.ajrwd{display:block;}
  ins{height:300px}
  #frmcomment .lacimg{float:none;display:block}
  #frmcomment .lactxt{margin-left:0}
  .halfdabba{margin:0.25rem auto;width:95%;float:none}
  #frmcomment textarea{margin:0.25rem auto;width:90%}
  #frmcomment input{margin:0.25rem auto;font-size:16px;}
  .commesg{overflow-x:auto}
}

/* adsense */
@media(max-width:330px) {
  div.ajrwd {
    width: 300px;
    height: 250px;
  }
}

/* GDPR */
#eucookie {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
#coocon{
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-align: center;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
  padding: 15px;
  background-color: grey;
  color: #dedede;
  font-size: .77778rem;
  z-index: 10000;
}
#coocon a, #coocon a:visited {
  color: white;
}
a#coook, a#coook:visited {
  margin: 0;
  padding: 3px 7px;
  border:1px solid white;
  color: white;
  background:black;
  text-decoration: none;
}
a#coook:hover {
  background: grey;
}