body {position:  relative;}
body .underlay {position: fixed; top:  0; left:  0; width:  100vw; height:  100vh; overflow:  hidden; z-index: -1;}
body .underlay .imagewrapper {position: absolute; top:  0; left:  0; width:  100%; height:  100%; z-index:  1; transition:  all 1s; opacity:  0; background-repeat: no-repeat; background-size:  cover; background-position:  center center;}
body .underlay .imagewrapper img {opacity:  0; transition:  all 1s; width:  100%; height:  auto;}

body .underlay .imagewrapper.active {opacity:  1;}
body .underlay .imagewrapper.active img {; height: 100vh; width:  auto; margin:  0 auto; overflow: visible ; max-width: unset;}

#inventory {background: transparent; }
#playerbar {background:  rgba(64, 64, 64, .6); color: #404040; padding: 10px 0; margin-bottom:  0; border-bottom: 1px dashed #8b8b8b; border-right: 1px solid #8b8b8b; box-sizing:  border-box; position:  relative; transition: all 0.3s; min-height: 6px; min-height:  26px; width:  100%;}


#baronsstuff {width: 100%;display: flex; justify-content: space-between; align-items:  flex-start; flex-wrap:  wrap;}
#baronsstuff #leftpanel {width:  calc(100% - 300px - 20px); display:  inline-block;}
#baronsstuff #rightpanel {
    background: #2b2b2b;
    border: 1px solid #8b8b8b;
    border-radius: 10px 0 0 10px;
    border-right: 0;
    width: 300px;
    overflow-y: scroll;
    padding: 10px;
    box-sizing: border-box;
    position: fixed;
    right: 0;
    transition: all 0.3s;
    opacity: 0;
    z-index: 10;
    top: 74px;
    max-height: 88.5vh;
    min-height:  100px;
    display: flex;
    flex-wrap: wrap;    
}
#baronsstuff #rightpanel.show {opacity: 1;}

#footer1 {color: #ffffff; background: #2b2b2b; border-top: 1px solid #e2e2e2; font-weight: 600; padding:  1px 0; z-index:  400; position:  relative; z-index:  -1; transition:  all 0.3s; opacity: 1;}
#footer1.hideme {opacity:  0;}
#footer1 p {margin:  2px; font-size:  12px;}