body
{
    font-family:"Georgia", serif;
    background-color: #FFFFFF;
    color: #250525;
}

h2, h3
{
    text-align:left;
    text-decoration:underline;
    color: #550555;
}
 
.sidenav {
    width: 0px;
    overflow: none;
    display: none;
}

.content {
    font-size: 18px;

a:hover {
    color: #4CAF50;
}

/* List pages have a table presentation */
td.list {
    padding: 0px 0px 0px 15px;
}

.wrapper {
    display: flex;
    flex-direction: row;
}

.active{  /* Could be changed by JS, I guess.*/
    background-color: #4CAF50;
}

.sidenav a {
    padding: 6px 16px 6px 16px;
    text-decoration: none;
    font-size: 18px;
    color: #FFC200;
    display: block;
}

.sidenav a:hover {
    color: #A4A5A6;
}

.grid {
    display: grid;
    grid-template-columns:    auto auto auto;
    grid-template-areas:     'header header header'
			     'characteristics derived_scores passions'
			     'runes rune_magic weapons'
			     'skills1 skills2 skills3'
			     'spells spells spells';
    font-size: 16px;
    padding: 10px 10px;
    grid-gap: 10px;
}

.area {
    background: #E3DEDB;
    border: 1px solid #552200;
    border-radius: 3px;
    padding: 5px;
}

.topbar {
    margin: 0px;
}


.header {
    grid-area: header;
    margin: 0px;
    display: inline-grid;
    grid-template-columns: auto auto;
    grid-template-areas: 'records hp_icon';
}

.records {
    grid-area: records;
}

.hp_icon {
    grid-area: hp_icon;
}

.button {
    display: none;
}

.plus {
    background: none;
    color: green;
    border: none;
    font-weight: bold;
    cursor: pointer;
}

.characteristics {
    grid-area: characteristics;
}

.derived_scores {
    grid-area: derived_scores;
}

.runes {
    grid-area: runes;
}

.paired_runes {
    grid-area: paired_runes;
}

.passions {
    grid-area: passions;
}

.skills1 {
    grid-areas: skills1;
}

.skills2 {
    grid-areas: skills2;
}

.skills3 {
    grid-areas: skills3;
}

.spells {
    grid-areas: spells;
}

.info {
    display: inline-block;
    padding: 0 0 10px 30px;
}

.stat {
    flex: 1 0 auto
}

.stat_heading {
    padding: 0px 15px 0px 0px;
    font-weight: bold;
}

.hidden {
    display: none;
}