.sheet-main { display: grid; width: 100%; height: auto; background-color: lightgray; /*grid-gap: 4px;*/ grid-template-columns: 25% 25% 25% 25%; grid-template-rows: 100px 450px 300px 1fr 2fr 2fr; grid-template-areas:"header header header header" "common common common common" "attr stat stat resistance" "items items armor armor" "skill skill skill skill" "attack attack feats feats"; } /*----------------- GENERAL CSS ------------------*/ textarea { width: 90%; height: 85%; margin: 1px; } input[type="text"] { width: 90%; } .sheet-mediumNumber { width: 4em !important; } .sheet-bigNumber { width: 8em !important; } select { width: 90%; } .sheet-bumper { margin: 5px 0px; } .sheet-max-width-input { width: 95%; } .sheet-section { padding: 5px; border-style: solid; } .sheet-flex-wrap { display: flex; flex-wrap: wrap; } .repcontainer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .sheet-flex-col { display: flex; flex-direction: column; /*justify-content: flex-start;*/ } div.sheet-skill div.repcontainer div.repitem, div.sheet-feats div.repcontainer div.repitem { width: 50%; } .sheet-flex-center { align-items: center; justify-content: center; } .sheet-flex-around { display:flex; align-items: center; justify-content: space-around; } .sheet-half { width: 50%; } .sheet-one-third { width: 33%; } .sheet-fullWidth { width: 100%; } .sheet-modBox { border-radius: 20%; border: 2px solid black; padding: 4px 8px; font-size: 1.2em; } /*------------- Section-specific CSS -------------*/ .sheet-header { grid-area: header; } .sheet-logo { max-height: 100%; } .sheet-attr { grid-area: attr; } .sheet-common { grid-area: common; display: flex; flex-wrap: wrap; align-items: center; } .sheet-power { grid-area: power; } .sheet-attack { grid-area: attack; } .sheet-block { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; border-bottom: 1px black dashed; margin: 5px 0px; padding: 10px 0px; } .sheet-resistance { grid-area: resistance; } .sheet-feats { grid-area: feats; } .sheet-skill { grid-area: skill; } .sheet-stat { grid-area: stat; } .sheet-items { grid-area: items; } .sheet-armor { grid-area: armor; } .sheet-bordered { border: 2px solid black; } /*------------- Roll Templates -------------*/ .sheet-rolltemplate-attack .sheet-attack-roll { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: white; border: 2px black solid; padding: 4px; } .sheet-rolltemplate-attack .sheet-attack-roll span { display: flex; justify-content: center; align-items:center; } .sheet-rolltemplate-attack h3 { margin: 0px 3px; } .sheet-rolltemplate-skill .sheet-skill-roll { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: white; border: 2px black solid; text-align: center; padding: 4px; }