
/* Style the article section */

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

/* 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 stardata table, inside an article */
.leftside {
    float: left;
    overflow: hidden;
    height: 100%;
    width: 50%;
}

article table {
    width: 100%;
    border-collapse: collapse;
}

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

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


/* aside holds the statusbox and action box. Leave 1% for luck, large wide right margin */

aside {
    float: Right;
    width: 44%;
    margin-right: 5%;
    height:100%;
}

/* Status and action boxes are constrained inside aside by width, which we set to 95% to prevent the page width scroll bar appearing for some reason */

#StatusBox, #ActionBox {
    margin-top: 1em;
    width: 95%;
    border: 1px solid #ffac28;
}

/* td's in action box are inline so flow around the actionbox areas, expanding it vertically */

#ActionBox td, #StatusBox td {
    display: inline; 
}

/* set spacing of text in status box */
#StatusBox p {
    line-height: 0.1em;
}

/* Style the buttons */
#StatusBox img, #ActionBox img {
    padding: 10px;
    border: 2px solid darkorange;
    border-radius: 8px;
}

/* this moves the title text in action box to form a group type text overlay */

#ActionBox p {
    color: black;
    position: relative;
    top: -0.5em;
    margin-left: 0.5em;
    display: inline;
    background-color: #ffac28;
}

#StatusOther p {
    white-space: pre-wrap;
}
/* class assigned to button when clicked to give a flash effect */

.entryselected {
    background-color: green;
}


/* 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;
}

