* {
  box-sizing: border-box;
}

body, p, h1, h2, h3, h4, h5, h6, ul, li, td, th, tr {
  font-family: Arial, Helvetica, sans-serif;
}

body {
  margin: 0px;
  color: #444444;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr minmax(auto, 44em) 1fr 1fr;
  grid-template-rows: minmax(20px, auto) 1fr;
  grid-template-areas:
    "hd   hd   hd   hd   hd"
    "menu menu menu menu menu"
    ".... .... main ...  sidebar"
    "ft   ft   ft   ft   ft";
}

@media (max-width: 700px) {
  body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hd"
      "menu"
      "main"
      "sidebar"
      "ft";
    }
}

header {
  grid-area: hd;
  text-align: center;
  padding: 0px 10px;
}

.menu {
  grid-area: menu;
}

.main {
  grid-area: main;
}

footer {
  text-align: center;
  grid-area: ft;
  background: #ffeebb;
}

address {
  font-style: normal;
}

.copyright {
  font-size: 70%;
}

#sidebar {
  grid-area: sidebar;
}

.menu ul, header h1 {
  margin-bottom: 0px;
}

h1:first-letter {
  font-size: 200%;
}

h2 {
  margin-top: 0px;
}

nav.menu {
  background: #ffeebb;
  padding-bottom: 0px;
}

nav.menu h2 {
  display: none;
}

nav.menu a {
}

nav a, footer a {
  color: #222;
  text-decoration: none;
}

nav a:hover, footer a:hover {
  text-decoration: underline;
}

nav.menu ul {
  margin: 0px;
  padding: 0px 50px;
  display: grid;
  grid-gap: 10px 50px;
  grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 700px) {
  nav.menu ul {
    grid-gap: 10px 20px;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 500px) {
  nav.menu ul {
    grid-gap: 10px 20px;
    grid-template-columns: 1fr;
  }
}

nav.menu ul li {
  display: block;
  text-align: center;
  list-style-type: none;
  line-height: 1.6rem;
}

nav.menu ul li.active {
  font-style: italic;
  color: white;
}

.main {
  vertical-align: top;
  padding: 0px 10px;
  min-width: 0px;
  overflow: auto;
}

.main h1 {
  margin-top: 0px;
  margin-bottom: 20px;
}

img {
  max-width: 100%;
}

a img {
  border: 0px;
}

.me ul {
  margin: 0px;
  padding: 0px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 700px) {
  .me ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .me ul {
    grid-template-columns: repeat(1, 1fr);
  }
}

.me ul li {
  display: inline;
  list-style-type: none;
}

.me ul.hidden {
  display: none;
}

.pres-popup {
  background: #CCCCFF;
  border: 1px solid #333399;
  width: 250px;
}

.pres-popup .caption {
  font-family: Arial, Helvetica, sans-serif;
  background: #333399;
  color: #FFFFFF;
}

.pres-popup .caption .title {
  font-size: 10pt;
  font-weight: bolder;
  vertical-align: bottom;
}

.pres-popup .caption .location {
  padding-left: 5px;
  font-size: 8pt;
  font-weight: normal;
  text-align: right;
  vertical-align: bottom;
}

.pres-popup .text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8pt;
}

.pres-popup .name {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
  font-weight: bold;
  vertical-align: top;
}

.pres-popup .zoom {
  font-family: Arial, Helvetica, sans-serif;
  background: #9999CC;
  color: #000000;
  font-size: 8pt;
  font-weight: bolder;
  text-align: center;
  padding: 2px 5px 0px 5px;
  }

.tree-presence {
  margin-top: 0px;
}

.tree-presence p, .tree-presence h6 {
  font-family: Verdana,Arial,Helvetica;
  margin: 0px
}

.tree-presence h6 {
  font-size: 100%;
  font-weight: bold;
}

.tree-presence p + h6 {
  margin-top: 5px;
  clear: left;
}

.tree-presence img {
  float: right;
  margin: 0 5px 5px 5px;
}

.tree-presence p.click {
  clear: both;
  margin: 5px -2px -2px -2px;
  background: #9999CC;
  padding: 1px 5px 0px 5px;
  font-weight: bolder;
  text-align: center;
}

@media print {
   body {
     display: block;
   }

   header, nav, footer {
     display: none!important;
   }

   main {
     width:100%!important;
     padding:0!important;
     margin:0!important;
   }

   h2, h3, h4 {
     break-before: auto;
     page-break-after: avoid;
     break-after: avoid;
     break-inside: avoid;
   }

   p, ul, table {
     break-inside: avoid;
   }

}