/* 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 {
   max-width: 800px;
   margin: auto;
   margin-top: 3em;
   padding: 1em;
   display: flex;
}

div#content {
   padding-left: 1em;
}

/* sidepanel */

div#sidepanel {
   max-width: 200px;
   padding-right: 1em;
   z-index: 1;
}

form#session-form {
   display: flex;
   flex-wrap: wrap;
   width: calc(100% - 30px);
}
input#session-id {
   flex-grow: 1;
   width: 10px;
}

@media screen and (min-width: 800px) {
   .hide-desktop {
      display: none;
   }

   /* controls */
   div#control-button-div {
      position: fixed;
      top: 4em;
      left: calc(50vw + 400px + 16px);
      overflow: visible;
      padding: 10px;
      border-radius: 0 10px 10px 0;
   }

   div#control-button-div, div#transpose-button-div {
      display: flex;
      flex-direction: column;
   }
}

@media screen and (max-width: 800px) {
   .hide-mobile {
      display: none!important;
   }
   div#main-content {
      margin-top: 0!important;
      height: calc(100vh - 2em);
      overflow-x: scroll;
   }

   /* controls */
   div#control-button-div {
      position: fixed;
      width: calc(100% - 20px);
      top: 0;
      left: 0;
      padding: 10px;
      z-index: 2;
   }

   div#control-button-div, div#transpose-button-div {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
   }

   /* sidepanel */
   div#sidepanel {
      position: fixed;
      top: 0;
      left: 0;
      width: calc(100% - 2em);
      height: calc(100vh - 2em);
      max-width: none;
      overflow-x: scroll;
      padding: 1em;
   }

   div#content, div#sidepanel {
      margin-top: 50px;
   }

   div#sidepanel.hidden {
      display: none;
   }
}

/* chord positioning */

p.chords span.chord {
    margin-right: 0.5em;
}

p.annotated {
   line-height: 2em;
}

div.lyrics p.annotated {
   line-height: 1em;
}

div.lyrics p.annotated span.lyric {
   white-space: normal;
}

p.annotated sup {
    display: inline-block;
    position: relative;
    top: auto;
    width: 0;
    bottom: 1em;
}

span.lyric {
    white-space: pre-wrap;
}