roll20-character-sheets/Offworlders/offworlders.css

.sheet-block-a,
.sheet-block-switch:checked~.sheet-block-b {
	display: block;
}

.sheet-block-b,
.sheet-block-switch:checked~.sheet-block-a {
	display: none;
}

.sheet-main {
	display: grid;
	width: 800px;
	height: 900px;
	grid-template-columns: 1min-content;
	grid-template-rows: 1min-content 1min-content 1min-content;
	grid-template-areas: "header" "common" "footer";
}

.sheet-header {
	display: grid;
	grid-template-columns: 1min-content 1min-content 1max-content 1min-content 1max-content 1min-content 1max-content 1min-content;
	grid-template-rows: 1min-content 1min-content 1min-content 1min-content;
	grid-template-areas: "named namedvalue namedvalue namedvalue strength strengthvalue agility agilityvalue" "class classvalue classvalue classvalue intelligence intvalue willpower willpowervalue" "health hpvalue armor armorvalue supply supplyvalue credits creditsvalue" "maxhp maxhpvalue . . maxsupply maxsupplyvalue . .";
	grid-area: header;
	background-color: silver;
	padding-top: 5px;
	padding-bottom: 5px;
}

.sheet-named {
	grid-area: named;
	text-align: right;
	vertical-align: middle;
}

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

.sheet-strength {
	grid-area: strength;
	text-align: right;
	vertical-align: middle;
}

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

.sheet-agility {
	grid-area: agility;
	text-align: right;
	vertical-align: middle;
}

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

.sheet-class {
	grid-area: class;
	text-align: right;
	vertical-align: middle;
}

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

.sheet-intelligence {
	grid-area: intelligence;
	text-align: right;
	vertical-align: middle;
}

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

.sheet-willpower {
	grid-area: willpower;
	text-align: right;
	vertical-align: middle;
}

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

.sheet-health {
	grid-area: health;
	text-align: right;
	vertical-align: middle;
}

.sheet-maxhp {
	grid-area: maxhp;
	text-align: right;
	vertical-align: middle;
}

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

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

.sheet-armor {
	grid-area: armor;
	text-align: right;
	vertical-align: middle;
}

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

.sheet-supply {
	grid-area: supply;
	text-align: right;
	vertical-align: middle;
}

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

.sheet-maxsupply {
	grid-area: maxsupply;
	text-align: right;
	vertical-align: middle;
}

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

.sheet-credits {
	grid-area: credits;
	text-align: right;
	vertical-align: middle;
}

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

.sheet-common {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1min-content 1min-content 1min-content 1min-content 1min-content;
	grid-template-areas: "skills skills skills skills" "sk1 sk2 sk3 sk4" "abbilities abbilities abbilities abbilities" "geek psychic outlaw warrior" "look look gear gear";
	grid-area: common;
	padding: 5px;
}

.sheet-skills {
	padding-top: 5px;
	grid-area: skills;
}

.sheet-common input {
	margin-right: 5px;
}

.sheet-footer input {
	margin-right: 5px;
}

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

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

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

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

.sheet-abbilities {
	padding-top: 5px;
	grid-area: abbilities;
}

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

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

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

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

.sheet-look {
	padding-top: 10px;
	grid-area: look;
}

.sheet-gear {
	padding-top: 10px;
	grid-area: gear;
}

.sheet-footer {
	display: grid;
	grid-template-columns: 1min-content 1max-content 1min-content 1max-content 1min-content;
	grid-template-rows: 1min-content 1min-content 1min-content 1min-content;
	grid-template-areas: "xp advancement advancement advancement advancement" "xpvalue newabb xptext1 newatt xptext2" "xpvalue newabb xptext1 newatt xptext2" "xpvalue newabb xptext1 newatt xptext2";
	grid-area: footer;
	background-color: silver;
	padding: 5px;
}

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

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

.sheet-xpvalue {
	width: 90%;
	grid-area: xpvalue;
}

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

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

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

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

.sheet-section {
	border-style: solid;
}

.sheet-namedinput {
	grid-area: namedinput;
	width: 175%;
}

.sheet-classinput {
	grid-area: classinput;
	width: 100%;
}

.sheet-look textarea {
	width: 90%;
	height: 75%;
}

.sheet-gear textarea {
	width: 90%;
	height: 60%;
}

label {
	padding-bottom: 5px;
	padding-top: 10px;
}

span {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.sheet-ship {
	display: grid;
	width: 800px;
	height: 900px;
	grid-template-columns: 1max-content;
	grid-template-rows: 1min-content 1min-content 1min-content;
	grid-template-areas: "shipheader" "shipcommon" "shipfooter";
}

.sheet-shipheader {
	display: grid;
	grid-template-columns: 2fr 1fr 1min-content 1fr 1min-content 1fr 1min-content;
	grid-template-rows: 1min-content 1min-content;
	grid-template-areas: "shipname hull hullv shiparmor shiparmorv fuel fuelv" "shipnamev hullmax hullmaxv dmg dmgv fuelmax fuelmaxv";
	grid-area: shipheader;
	background-color: silver;
	padding: 5px;
}

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

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

.sheet-hull {
	grid-area: hull;
	text-align: right;
}

.sheet-hullmax {
	grid-area: hullmax;
	text-align: right;
}

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

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

.sheet-dmg {
	grid-area: dmg;
	text-align: right;
}

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

.sheet-fuel {
	grid-area: fuel;
	text-align: right;
}

.sheet-fuelmax {
	grid-area: fuelmax;
	text-align: right;
}

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

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

.sheet-shiparmor {
	grid-area: shiparmor;
	text-align: right;
}

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

.sheet-shipcommon {
	display: grid;
	grid-template-columns: 1min-content 1min-content;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-areas: "upgrades upgrades" "addarmor addarmortxt" "advelec advelectxt" "advdrive advdrivetxt" "aftbrn aftbrntxt" "fueltnks fueltnkstxt" "maneuvr maneuvrtxt" "passanger passangertxt" "cargo cargotxt" "medbay medbaytxt" "pwrweapons pwrweaponstxt" "shuttle shuttletxt";
	grid-area: shipcommon;
}

.sheet-shipcommon input {
    margin-right: 5px;
}

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

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

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

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

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

.sheet-passanger {
	grid-area: passanger;
	padding-right: 5px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sheet-shipfooter textarea {
	width: 100%;
	height: 75%;
}