roll20-character-sheets/Wildsea/wildsea.css

.sheet-main {
    display: grid;
    width: 900px;
    height: 1100px;
    grid-gap: 4px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows:  repeat(90px, 1fr, 50px) ;
    grid-template-areas:"header  header header"
                        "common  common common"
                        "edges   edges  edges"
                        "skills  skills aspect"
                        "skills  skills aspect"
                        "skills  skills aspect"
                        "skills  skills aspect"
                        "skills  skills aspect"
                        "drivmir drivmir temp"
                        "lang    lang   temp"
                        "inv     inv    miles"
                        "notes   notes  notes"
                        "footer  footer footer";
}

/*----------------- GENERAL CSS ------------------*/

.sheet-section input[type=number] {
    text-align: center;
    width: 30px;
}

.sheet-section {
    padding: 5px;
    border-style: solid;
}

.sheet-sectionNoBorder {
    border-style: none;
}

.sheet-drivmirSection {
    padding: 0px;
    border-style: none;
}

.sheet-skillSection {
    padding: 5px;
    border-width: 2px;
    border-style: solid;
}

.sheet-flex-col {
    display: flex;
    flex-flow: row wrap;
}

.sheet-flex-center {
    align-items: center;
    justify-content: center;
}

.sheet-alignLeft {
    float: left;
}

.sheet-alignRight {
    padding-top: 3px;
    float: right;
}

.sheet-alignRight button {
    font-size: 24px;
}

/*------------- Section-specific CSS -------------*/

.sheet-header {
    grid-area: header;
    background-color: green;
    flex-direction: column;
}

/********Common**********/
.sheet-common {
    grid-area: common;
    flex-direction: row;
    height: 30px;
    display: grid;
    grid-gap: 1px;
    grid-template-columns: 300px 1fr 1fr 1fr;
    grid-template-rows: 50px 1fr;
    grid-template-areas:"name bloodline origin post"
}

.sheet-common select {
    width: 110px;
}

.sheet-common label {
    font-size: 14px;
}

.sheet-name {
    grid-area: name;
}

.sheet-bloodline {
    grid-area: bloodline;
}

.sheet-origin {
    grid-area: origin;
}

.sheet-post {
    grid-area: post;
}
/*************************/

.sheet-edges {
    grid-area: edges;
    display: grid;
    grid-gap: 1px;
    grid-template-columns: repeat(50px);
    grid-template-rows: 1fr;
    grid-template-areas:"grace iron instinct sharps teeth tides veils"
}

.sheet-edges input[type=checkbox] {
    width: 25px;
    height: 25px;
}

.sheet-checkbox > input:checked {
    border: 1px solid #41B883;
    background-color: #34495E;
}

.sheet-grace {
    grid-area: grace;
    text-align: center;
}

.sheet-iron {
    grid-area: iron;
    text-align: center;
}

.sheet-instinct {
    grid-area: instinct;
    text-align: center;
}

.sheet-sharps {
    grid-area: sharps;
    text-align: center;
}

.sheet-teeth {
    grid-area: teeth;
    text-align: center;
}

.sheet-tides {
    grid-area: tides;
    text-align: center;
}

.sheet-veils {
    grid-area: veils;
    text-align: center;
}

.sheet-grace label,
.sheet-iron label,
.sheet-instinct label,
.sheet-sharps label,
.sheet-teeth label,
.sheet-tides label,
.sheet-veils label {
    text-align: center;
}

/*******Mires/Drives******/
.sheet-drivmir {
    grid-area:drivmir;
    display: grid;
    grid-gap: 4px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:"drives"
                        "mires"
}

.sheet-drives {
    grid-area: drives;
}

.sheet-drives input[type=text] {
    width: 410px;
}

.sheet-mires {
    grid-area: mires;
    display: flex-column;
}

.sheet-mires input[type=text] {
    width: 350px;
}

.sheet-lang {
    grid-area: lang;
}

.sheet-shorterBox {
    width: 150px;
}

/*************************/

.sheet-aspect {
    grid-area: aspect;
    width: 450px;
}

.sheet-aspect input[type=text],
.sheet-temp input[type=text] {
    width: 300px;
    font-size: 14px;
}

.sheet-bold {
    font-weight: 700;
}

.sheet-aspect input[type=checkbox],
.sheet-temp input[type=checkbox],
.sheet-mires input[type=checkbox] {
    width: 25px;
    height: 25px;
}

.sheet-skills {
    grid-area: skills;
    width: 414px;
    display: grid;
    grid-gap: 4px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 20px 1fr 1fr;
    grid-template-areas:"header   .         ."
                        "movement detection survival"
                        "creation social    combat";
}

/******Skills************/
.sheet-movement {
    grid-area: movement;
}

.sheet-detection {
    grid-area: detection;
}

.sheet-survival {
    grid-area: survival;
}

.sheet-creation {
    grid-area: creation;
}

.sheet-social {
    grid-area: social;
}

.sheet-combat {
    grid-area: combat;
}

.sheet-center {
    text-align: center;
    text-decoration: underline;
}

.sheet-skillInterior {
    display: grid;
    grid-template-columns: max-content max-content;
    grid-gap: 5px;
    float: right;
}

.sheet-skillInterior label {
    display: inline-block;
    text-align: right;
}

.sheet-skillInterior input[type=number] {
    top: -5px;
    position: relative;
    vertical-align: bottom;
}
/*************************/

.sheet-temp {
    grid-area: temp;
    width: 450px;
}

/**********Inventory**********/
.sheet-inv {
    grid-area: inv;
    display: grid;
    grid-gap: 4px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(15px, 1fr);
    grid-template-areas:"header   ." 
                        "salvage  specimens" 
                        "whispers charts";
}

.sheet-inv input[type=text] {
    width: 190px;
}

.sheet-salvage {
    grid-area: salvage;
}

.sheet-specimens {
    grid-area: specimens;
}

.sheet-whispers {
    grid-area: whispers;
}

.sheet-charts {
    grid-area: charts;
}

/*************************/


/*******Milestones********/
.sheet-miles {
    grid-area: miles;
    display: grid;
    grid-gap: 4px;
    grid-template-columns: 1fr;
    grid-template-rows: 30px 1fr 1fr;
    grid-template-areas:"header"
                        "major"
                        "minor";
}

.sheet-miles input[type=text] {
    width: 100%;
}

.sheet-major {
    grid-area: major;
}

.sheet-minor {
    grid-area: minor;
}
/*************************/

.sheet-notes {
    grid-area: notes;
}

.sheet-bigtext {
    width: 650px;
}

.sheet-footer {
    grid-area: footer;
    background-color: gray;
}

/* Remove arrows from number inputs */
/* Chrome etc */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}