roll20-character-sheets/Gestalt/GestaltSheet.css

/* Set the min-width so that when the window is resized the look will stay consistant */

.charsheet {
	background-color: #f1e8cf;
	min-width: 885px;
	padding: 0;
	margin: 0;
}

/* Universal styling applied to all elements of these types */

h2 {
	font-size: 1.5em;
	margin-bottom: 10px;
	text-align: bottom;
	display: inline;
}

h3 {
	margin-bottom: 10px;
	text-align: bottom;
	display: inline;
}

.ui-dialog .charsheet label {
	padding: inherit;
	margin: inherit;
/*	padding-top: 18px; */
}


.ui-dialog .charsheet input {
	display: inline-block;
	width: auto;
	height: 30px;
	padding: inherit;
	margin: inherit;
}

img {
	max-height: 100px;
}

/*todo= figure out how to format textarea boxes*/
.charsheet textarea {
	resize: vertical;
	width: 90%;
}

textarea.sheet-numwindow {
	border: 1px solid black;
	vertical-align: bottom;
	display: inline-block;
	max-height: 19px;
	max-width: 36px;
}

/* Targetted styling that only effects elements with these classes */

/* creating arrowless text boxes */
/* Chrome, Safari, Edge, Opera */
input.sheet-arrowless::-webkit-outer-spin-button,
input.sheet-arrowless::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* creating arrowless text boxes, mozilla edition */

input.sheet-arrowless {
	  -moz-appearance: textfield;
}

input.sheet-short {
	width: 17%;
}

select.sheet-proftype {
    vertical-align: top;
    width: 20px;
}

select.sheet-proftypedef {
    vertical-align: top;
    width: 150px;
}

select.sheet-abilitytype {
    vertical-align: top;
}

span.sheet-prof {
	font-size: 1.2em;
	font-weight: bold;
	left: -36%;
	padding-right: 4px;
	position: relative;
	top: 0px;
}



/* Targetted styling that only effects elements contained within the stated class */
.sheet-stats h3 {
	display: inline-block;
	text-align: left;
}

.sheet-stats h3:first-child {
	margin-left: 35%;
	margin-right: 15%;
}

.sheet-stats input {
	margin-right: 8%;
	width: 10%;
}

/* Attempting to create a sheet grid independent of Roll20 Columns */
.charsheet .sheet-grid-section{

}

/* frontal character sheet grid */
.charsheet .sheet-grid-sectionfront{
	display: grid;
	grid-template-columns: 210px 380px 200px;
	grid-template-rows: 350px 550px;
	grid-template-areas:"namelvl lineage hp"
						"attributes defenses keywords";
	grid-gap: 5px;
}

.charsheet div.sheet-block{
	display: inline;
	justify-items: start; 
	padding: 5px;
	border: 3px solid gray;
}
.charsheet div.sheet-namelvl{
	grid-area: namelvl;
	vertical-align: bottom;
	display: inline-block;

}
.charsheet div.sheet-lineage{
	grid-area: lineage;
}
.charsheet div.sheet-hp{
	grid-area: hp;
}
.charsheet div.sheet-attributes{
	grid-area: attributes;
}
.charsheet div.sheet-keywords{
	grid-area: keywords;
}
.charsheet div.sheet-defenses{
	grid-area: defenses;
}

/* Initiative Grid Line */
.charsheet .sheet-grid-sectioninit{
	display: grid;
	grid-template-columns: 50px 50px 50px 50px;
	grid-template-rows: 50px;
	grid-template-areas:"reflexsave arbinit fininit rollforinit";
	grid-gap: 0px;
}
.charsheet div.sheet-reflexsave{
	grid-area: reflexsave;
}
.charsheet div.sheet-arbinit{
	grid-area: arbinit;
}
.charsheet div.sheet-fininit{
	grid-area: fininit;
}
.charsheet div.sheet-rollforinit{
	grid-area: rollforinit;
}

/*traits grid*/
.charsheet .sheet-grid-sectiontraits{
	display: grid;
	grid-template-columns: 280px 300px 300px;
	grid-template-rows: auto;
	grid-template-areas:"lineagetraits culturetraits honors";
	grid-gap: 5px;
}

/* class features "grid"*/
.charsheet .sheet-grid-sectionclassf{
	display: grid;
	grid-template-columns: 600px;
	grid-template-rows: auto;
	grid-template-areas:"classf";
	grid-gap: 5px;
}

/* Feats "grid"*/
.charsheet .sheet-grid-sectionfeats{
	display: grid;
	grid-template-columns: 600px;
	grid-template-rows: auto;
	grid-template-areas:"feats";
	grid-gap: 5px;
}

/*traits grid sections*/
.charsheet div.sheet-lineagetraits{
	grid-area: lineagetraits;
}
.charsheet div.sheet-culturetraits{
	grid-area: culturetraits;
}
.charsheet div.sheet-honors{
	grid-area: honors;
}

.charsheet div.sheet-oaths{
	grid-area: oaths;
}

.charsheet div.sheet-magicitems{
	grid-area: magicitems;
}

/* class features grid section */
.charsheet div.sheet-classf{
	grid-area: classf;
}
/* feats grid section */
.charsheet div.sheet-feats{
	grid-area: feats;
}

/*Defenses section grid*/

.charsheet .sheet-grid-sectiondefenses{
	display: grid;
	grid-template-columns: 390px 380px;
	grid-template-rows: 800px;
	grid-template-areas:"generaldef armor";
	grid-gap: 5px;
}

/*Defenses grid sections*/

.charsheet div.sheet-generaldef{
	grid-area: generaldef;
}

.charsheet div.sheet-armor{
	grid-area: armor;
}

/* configure the tab buttons to hide */
.charsheet .sheet-character,
.charsheet .sheet-skills,
.charsheet .sheet-traits,
.charsheet .sheet-classf,
.charsheet .sheet-feats,
.charsheet .sheet-attacks,
.charsheet .sheet-defenses,
.charsheet .sheet-spells,
.charsheet .sheet-oaths,
.charsheet .sheet-magicitems,
.charsheet .sheet-notes {
    display: none;
}

/* style the active button */
.charsheet .sheet-tabstoggle[value="character"] ~ div .sheet-button0 {outline: 2px solid red;}
.charsheet .sheet-tabstoggle[value="skills"] ~ div .sheet-button1 {outline: 2px solid red;}
.charsheet .sheet-tabstoggle[value="traits"] ~ div .sheet-button2 {outline: 2px solid red;}
.charsheet .sheet-tabstoggle[value="classf"] ~ div .sheet-button3 {outline: 2px solid red;}
.charsheet .sheet-tabstoggle[value="feats"] ~ div .sheet-button4 {outline: 2px solid red;}
.charsheet .sheet-tabstoggle[value="attacks"] ~ div .sheet-button5 {outline: 2px solid red;}
.charsheet .sheet-tabstoggle[value="defenses"] ~ div .sheet-button6 {outline: 2px solid red;}
.charsheet .sheet-tabstoggle[value="spells"] ~ div .sheet-button7 {outline: 2px solid red;}
.charsheet .sheet-tabstoggle[value="oaths"] ~ div .sheet-button8 {outline: 2px solid red;}
.charsheet .sheet-tabstoggle[value="magicitems"] ~ div .sheet-button9 {outline: 2px solid red;}
.charsheet .sheet-tabstoggle[value="notes"] ~ div .sheet-button10 {outline: 2px solid red;}

/* show the selected tab */
.charsheet .sheet-tabstoggle[value="character"] ~ div.sheet-character,
.charsheet .sheet-tabstoggle[value="skills"] ~ div.sheet-skills,
.charsheet .sheet-tabstoggle[value="traits"] ~ div.sheet-traits,
.charsheet .sheet-tabstoggle[value="classf"] ~ div.sheet-classf,
.charsheet .sheet-tabstoggle[value="feats"] ~ div.sheet-feats,
.charsheet .sheet-tabstoggle[value="attacks"] ~ div.sheet-attacks,
.charsheet .sheet-tabstoggle[value="defenses"] ~ div.sheet-defenses,
.charsheet .sheet-tabstoggle[value="spells"] ~ div.sheet-spells,
.charsheet .sheet-tabstoggle[value="oaths"] ~ div.sheet-oaths,
.charsheet .sheet-tabstoggle[value="magicitems"] ~ div.sheet-magicitems,
.charsheet .sheet-tabstoggle[value="notes"] ~ div.sheet-notes {
    display: block;
}