/* Style the article section */

body {
    background-color: black;
    color: darkorange;
    font-family: Arial,Helvetica,Sans-serif;
    margin: 0px;
    overflow: hidden;
}

/* top level div is a flex. Important to lock page to vh so it does not scroll and occupies the whole page  */
.page {
    height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

/* first is headernav, third is footer */
/* second part of three sections is a flex:1 */
.middlesection {
    width: 100%;
    flex: 1;
    clear: both;
    overflow:hidden;
}

/* this div holds the image inside an article, and it has the scroll bar. You must set it to 100% height to override autoheight and get it to scroll 
    set the width to required % of the middlesection
*/
.scanimage {
    float: left;
    overflow-y: scroll;
    height: 100%;
    width: 70%;
}

/* style the aside with status info */

/* set the aside float and width, plus a nice margin on the right. this helps stop the pesky horz scroll bar occuring */

aside {
    float: Right;
    width: 25%;
    margin-right: 4%;
    height: 100%; /* force to fill */
}

aside table {
    border-collapse: collapse;
}

aside tr td:first-of-type {
    width: 30%;
    word-break: break-word;
}

aside tr td:last-of-type {
    width: 70%;
    word-break: break-word;
}

/* EDSM Buttons on aside */
.edsmetcbuttons {
    width: 6em;
    margin: 1px 0px 1px 10px;
    line-height: 1;
    background-color: orange;
    border: 1px solid darkorange;
    border-radius: 4px;
    color: #000;
    text-decoration: none;
}