/* This stylesheet is used for arranging things on the page.
   It defines where things are, but not what they look like. */

html {
   height: 100%;
}

body {
   height: calc(100% - 6em);
   padding: 0;
   margin: 0;
}

div#main-content {
   height: 100%;
   max-width: 1400px;
   margin: auto;
   margin-top: 3em;
   position: relative;
}

@media screen and (max-width: 1400px) {
   body {
      height: 100%;
   }
   div#main-content {
      margin-top: 0!important;
   }
}

div#console {
   padding: 2em;
   height: calc(100% - 4em);
}

div#scrollback {
   height: calc(100% - 30px);
   overflow: auto;
}

div#input {
   padding-top: 0.5em;
   margin-top: 0.5em;
}


/* Sidepane */

div#main-content {
   height: 100%;
   max-width: 1400px;
   margin: auto;
   margin-top: 3em;
   position: relative;
}

div#sidepane {
   position: absolute;
   top: 0;
   right: 0;
   max-width: 500px;
   min-width: 80px;
   overflow-y: auto;
   overflow-x: hidden;
   max-height: calc(100% - 20px);
   padding-bottom: 20px;
}

div#sidepane-buttons {
   position: fixed;
}

div#sidepane-spacer {
   height: 20px;
}

div#manual-nav ul {
   display: flex;
}

div#manual-nav li {
   align-content: center;
   text-align: center;
}