* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

.JSOnly {
   display: none;
}
.JSEnabled .JSOnly {
   display: revert;
}

#Root {
   display: grid;
   grid-template-areas:
      "logo    content"
      "nav     content"
      "footer  footer";
   grid-template-rows: 100px auto 32px;
   grid-template-columns: 200px auto;

   min-height: 100vh;
}
#Root > .Logo        { grid-area: logo;      }
#Root > .Navigation  { grid-area: nav;       }
#Root > .Content     { grid-area: content;   }
#Root > .Footer      { grid-area: footer;    }

.JSDisabled #Root {
   grid-template-rows: 100px auto 16px;
}


#Root > .Logo {
   background: #E4EAEC;
   text-align: right;
}
#Root > .Logo IMG {
   mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0));
}
#Root > .Navigation {
   background: grey;
}
#Root > .Content {
   background: lightgrey;
}
#Root > .Footer {
   max-height: 100%;
   overflow: hidden;
}

UL {
   /* Like list-style-position:inside except also maintains indent */
   margin-left: 1em;
}

TABLE.Mini {
   font-size: 10px;
}
TABLE.Mini TH {
   text-align: right;
}
TABLE.Mini TD {
   padding-left: 25px;
}