html {
    height: 100%;
}

body {
    background: lightblue;
    height: 100%;

    margin: 0px;  /* removes default style */
    display: flex;  /* enables flex content for its children */
    box-sizing: border-box;
    flex-direction: column;
}

#header{
    background-color: black;
    width: 100%;
    height: 60pt;
    border-bottom:2pt solid blanchedalmond;
    justify-content: center;
}
#footer{
    background-color: black;
    width: 100%;
    height: 60pt;
    border-top:2pt solid blanchedalmond;
}
#article{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}
#leftcolumn{
    width: 200pt;
    height: 100%;
    background:red;
    flex-grow: 0;
}
#rightcolumn{
    width: 200pt;
    height: 100%;
    background:yellow;
    flex-grow: 0;
}
#midcolumn{
    width: 100%;
    height: 100%;
    background:white;
    flex-grow: 1;
}

#navigation{
    width: 100%;
    background: green;
    height: 100%;
    justify-content: center;
    display: flex;
    align-self: flex-end;
}
#navigation ul{
    width: 100%;
}
#navigation li{
    height: 20pt;
    background-color:beige;

    display: inline;
    width: 100pt;
}

.nav_item{
    height: 20pt;
    background-color:beige;

    display: inline;
    width: 100pt;
}