﻿body {
  display: grid;
  grid-template-areas:
    "ph ph ph"
    "sn sn sn"
    "ls ch rs"
    "ls ca rs"
    "ls cf rs"
    "pf pf pf";
  grid-template-rows: 2cm 1cm min-content auto min-content min-content;
  grid-template-columns: min-content auto min-content;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
}

#page-header {
    grid-area: ph;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

#site-nav {
    grid-area: sn;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

#left-sidebar {
    grid-area: ls;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

#right-sidebar {
    grid-area: rs;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

#content-area {
    grid-area: ca;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#content-header {
    grid-area: ch;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

#content {
    height: 100%;
}

#content-footer {
    grid-area: cf;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

#page-footer {
    grid-area: pf;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

#site-information {
    position: fixed;
    z-index: 100; 
    left: 0; 
    bottom: 0; 
    font: 7pt sans-serif; 
    background-color: transparent; 
    color: gray; 
    margin: 0; 
    padding: 0 0 2px 4px
}
