
body, html{
  position: relative;
  width: 100%;
  height:100%;
  font-family: Georgia, serif;
  font-style: normal;
  margin:0;
  padding:0;
  // background-color: rgb(219, 219, 219);
}

// div.layout-container{
//   position: relative;
//   width:100%; height:100%;
//   padding:0.5em 1em;
//   box-sizing: border-box;
//   z-index: 1;
// }

header[role="banner"]{
  // outline: 1px solid blue;
  z-index: 2;
  position: relative;
  padding:0 1em;
  >.wrapper{
    position: relative;
    padding:0.5em 0;
    border-bottom: 1px solid red;
    // TODO: what header height to fit well with player ??
    height:70px;
    >.region{
      height:100%;
      position: relative;
    }
  }
}


main[role="main"]{
  // outline:1px solid green;
  z-index: 1;
  position: absolute;
  left:0; top:0;
  box-sizing:border-box;
  width:100%;
  padding:7em 2em 9em;
  overflow: hidden;
  pointer-events: none;
  height:auto;
  .layout-content{
    width: 100%; height:100%;
    overflow:hidden;
    &>.messages{
      max-height: 500px;
      overflow: auto;
    }
    &>*{
      pointer-events: auto;
    }
  }
}

body[corpus-map="ready"] main[role="main"]{
  height:100%;
  // overflow-y: hidden;
}

footer[role="contentinfo"]{
  // outline: 1px solid pink;
  z-index: 2;
  position:fixed;
  bottom:0;
  box-sizing: content-box;
  width:100%;
  // min-height:110px;
  padding:0.5em 1em;
}

canvas#corpus-map{
  // outline: 1px solid grey;
}

.os-scroll{
  height: 100%;
}
