html {
  --dune-header-height: 60px;
}

.dune-header {
  margin: 0px;
  width: auto;
  height: var(--dune-header-height);

  position: fixed;
  left: 0;
  right: 0;

  min-height: 20px;
  z-index: 1002;

  overflow: hidden;

  padding: 0pt;
  padding-left: 38px;

  background: #c8d5ff url("/img/dune-header.jpg") no-repeat scroll 0 0;
  border-bottom: 1px solid #5974b5;

  text-align: left;
  align-content: center;
}

.dune-header #dune-title {
  display: inline-block;
  vertical-align:middle;
  line-height: normal;
  font-family: sans-serif;
  font-size: 36px;
  font-weight: bold;
  color: #e88e3f;
  text-decoration: none;
  outline: none;
}

.main-content {
  top:var(--dune-header-height);
  position: relative;
  width:100%;
}

@media screen and (min-width: 768px) {
  #nav-tree, #side-nav {
    height: calc(100vh - var(--top-height) - var(--dune-header-height)) !important;
  }
  #doc-content {
    height: calc(100vh - 31px - var(--dune-header-height)) !important;
  }
}