@media screen
{
  /* use full screen */
  html {
    height: 100%;
  }
  
  body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
  }


    /* general page layout */
    body header {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: auto;
      height: 48px;
      background-color: orange;
      /* layout within header: */
      display: -webkit-flex;
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    body .bodycenter {
      flex-grow: 1;
      flex-shrink: 1;
      height: 1px;  /* anything less than 100% */

      /* layout within .bodycenter: */
      display: -webkit-flex;
      display: flex;
      flex-direction: row;
    }

    body footer {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: auto;
      padding-left: 1em;
    }

    .bodycenter main {
      flex: 1 0;
      overflow-y: auto;
      padding-left: 1em;
      padding-right: 1em;
    }
    
    .bodycenter aside {
      flex: 1 0;
      overflow-y: auto;
    }


    /* menu and navigation */
    .sidenav {
      position: absolute;
      margin: 0;
      left: auto;
      top: auto;
      width: 0; /* 0 width - change this with JavaScript */
      z-index: 1; /* Stay on top */
      overflow-x: hidden; /* Disable horizontal scroll */
      padding-top: 0; /*0.1em;*/
      transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    }
    
    .sidenav>ul {
      background-color: orange;
      margin-top: 0;
      padding-left: 0;
      margin: 0;
    }
    
    .sidenav a {
      color: Black;
      text-decoration: none;
      cursor: pointer;
    }

    .sidenav details > summary {
      list-style: none;
      cursor: pointer;
    }
    
    .sidenav details > summary:focus {
      outline: none;
    }
    
    /* chrome */
    /*
    .sidenav details > summary::-webkit-details-marker,	
    .sidenav details > summary::marker {
      display:none;
    }
    */
    
    .sidenav .navitem {
      display: block;
      border-top-style: solid;
      border-top-width: 1px;
      border-left-width: 0;
      border-right-width: 0;
      border-bottom-width: 0;
      color: Black;
      text-decoration: none;
      padding: 7px 13px 7px 10px;
    }

    .sidenav .navitem ul {
      padding-top: 3px;
      padding-left: 15px;
    }

    .sidenav ul li {
      width: auto;
      list-style: none;
      padding-top: 3px;
      padding-bottom: 3px;
    }

}

/* desktop */
@media screen and (min-width: 769px)
{
    header #id_togglesidenav {
      display: none;
    }
    
    .sidenav {
      position: static; /* deactivate the position: absolute */
      -webkit-flex: 0 0 12em;
      flex: 0 0 12em;
      width: 12em;
      background-color: transparent;
      margin-top: 0;
      padding-top: 0;
      margin-left: 0;
      margin-right: 0em;
    }
}