html { box-sizing: border-box; } 
*, *::before, *::after {
   box-sizing: inherit; 
   }      
body {
   font-family: "Segoe UI", Tahoma, Verdana, sans-serif;
   margin:0;
   }
body.hamburger-active {
   overflow: hidden;
   }
header {
  background-color: #696969;
  padding: 5px;
  text-align: center;
  font-size: 2.0rem;
  color: white;
  }
main {
   display: -webkit-flex;
   display: flex;
   }
article {
   -webkit-flex: 3;
   -ms-flex: 3;
   flex: 3;
   background-color: #f1f1f1;
   padding: 30px;
   }
footer {
   background-color: #696969;
   padding: 10px;
   text-align: center;
   color: white;
   }
p { 
   margin-top: 0;
   margin-bottom: 10px; 
   font-size: 1rem; 
   }
h1 { 
   font-size: 1.7rem; 
   }
h3 {
   margin-top: 20px;
   margin-bottom: 0;
   }
img { 
   border: 0;
   max-width: 100%;
   height: auto;
   }
   
a {
   text-decoration: none;
   font-weight: 600; 
   white-space: nowrap;
   }
a:hover {
   color: black; 
   text-decoration:underline; 
   font-weight: 600;
   }
a:visited {
   color: blue;
   font-weight: 600;
   }

/* navigation menu */
nav {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
   background: #ccc;
   padding: 20px 5px 10px 5px;
   position: sticky;
   top: 0;
   align-self: start;
   text-align:center;
   width: 100%;
   }
nav li {
   list-style-type: none;
   }
.navhome a {
   color:white;
   text-decoration:none;
   }
.navhome a:visited {
   color:white;
   text-decoration:none;
   }
  
.wrap-nav {
   display: inline-block;
   text-align: left;
   padding: 10px;
   }
.wrap-nav-hdr {
   font-weight: 800;
   color: #E88800;
   font-size: 1.2rem;
   text-align: left;
   margin-bottom: 8px;
   } 
.wrap-nav-section {
   padding-inline-start: 10px;
   margin:0;
   text-align:left;
   }
.wrap-nav-section li {
   font-weight: bold;
   color: blue;
   font-size: 1.0rem;
   line-height: 1.5rem;
   }  
.wrap-nav-section a {
   font-weight: bold;
   }
.wrap-nav-section a:hover {
   font-weight: bold;
   }
.wrap-nav-section a:visited { 
   font-weight: bold;
   }

.mobile-nav { 
   display:none; 
   cursor: pointer; 
   }
.hamburger {
   display: none;
   cursor: pointer;
   }
.hamburgerbar {
   display: block;
   width: 25px;
   height: 3px;
   margin: 5px auto;
   -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease;
   background-color: white;
   }

table {
   margin: 10px auto;
   width: 80%;
   }
table, th, td {
   border: 1px solid black; 
   border-collapse: collapse;
   }
td, th {
   padding: 5px;
   }
th {
   background-color: #FFBB72; /* #A1D1A5 FFBB72 FFED79 FFF58C */
   } 
.centertablecells td {
   text-align:center;
   }

.center {
   margin:auto;
   text-align:center;
   }
.spaceitout {
   padding: 0 35px 5px 30px;
   }
.indent {
   padding: 0 25px;
   }

.imageflexcontainer {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: center; }
.pwrapper {
   flex: 1 1 400px;
   margin: 0;
   padding: 0;
   }
.imagewrapper {
   text-align: center;
   font-size: 0.7rem;
   padding: 10px;
   }

hr {
    height: 7px;
    background-color: #E88800;
    border: none;
    margin: 20px 0;
   }
   
.upleftlogo {
   display:none;
   }
.volguide ul { margin-top:0; padding-inline-start: 40px; }
.toc {
    position: sticky;
    top: 0; 
    align-self: start;
   }
   
/* for sidebar that is at bottom on mobile and top left on desktop */
.sidebar-container {
   display: grid;
   grid-template-columns: 1fr;
   }
.wrap-sbnav {
   display: inline-block;
   text-align: center;
   }
.wrap-sbnav-section { 
   padding: 0;
   list-style-type: none;
   }
.wrap-sbnav-section li {
   margin: 0;
   text-align: left;
   line-height: 1.8rem;
   font-size: 1.0rem;
   font-weight: bold;
   }  
.sidebar {
   width: 100%;
   margin: 0 auto;
   }



/* small viewport */
@media screen and (max-width: 1024px) {
   .widetable {
      width: 100%;
      }
   }

/* smaller viewport */
@media screen and (max-width: 900px) {
   main {
      -webkit-flex-direction: column;
      flex-direction: column;
      }
   header { 
      font-size: 1.25rem; 
      }
   article {
      padding: 10px;
      }
   h1 { 
      font-size: 1.25rem; 
      }
   .hamburger{
      display: inline-block;
      justify-self: end;
      }
   .flexcontainer {
      display: grid;
      grid-template-columns: 1fr max-content 1fr;
      align-items: center;
      }
   .navhome {
      grid-column-start: 2;
      }
   .mobile-nav {
       display: block;
       text-align: center;       
       position: fixed;
       top: -5px;
       left: -100%;
       width: 100%;
       background-color: #ccc;
       font-size: 0.75rem;
       height: 100%;
       overflow-y: auto; /* enable vertical scroll */
      }
   .mobile-nav.active{
      left: 0;
      }
   .nav-menu {
      width: min-content;
      margin: 0 auto;
      }
   .hamburger.active .hamburgerbar:nth-child(2){
      opacity: 0;
      }
   .hamburger.active .hamburgerbar:nth-child(1){
      transform: translateY(8px) rotate(45deg);
      }
   .hamburger.active .hamburgerbar:nth-child(3){
      transform: translateY(-8px) rotate(-45deg);
      }
   .upleftlogo {
      display:inline-block;
      }
   }
   
     
/* phones */   
@media screen and (max-width: 768px) {
   table {
      width: 100%;
      }
   table a {
      white-space: wrap;
      }
   .volguide ul {
      margin-top: 0;
      padding-inline-start: 35px;
      }
   }

/* small phones */   
@media screen and (max-width: 500px) {
   .widetable {
      font-size: 0.75rem;
      }
   }
   
/* desktop: sidebar at the top left, mainarticle at the top right */
@media screen and (min-width: 901px) {
   nav {
      min-height: 100dvh;
      }
   .sidebar-container {
      grid-template-columns: min-content 1fr; /* sidebar width */
      grid-template-areas: "sidebar mainarticle";
      }
   .sidebar {
      grid-area: sidebar;
      position: sticky;
      top: 0;
      align-self: start;
      }
   .mainarticle {
      grid-area: mainarticle;
      }
   .sidebar nav {
      padding: 15px;
      }
   }