/*----------------- FONTS ------------------*/

@import url('https://fonts.googleapis.com/css?family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/*@import url('https://fonts.googleapis.com/css?family=EB+Garamond&display=swap');*/

/*
font-family: 'EB Garamond', serif;
*/



/*----------------- BACKGROUND ------------------*/

.charsheet {

  background: none;
  background-color:white;
  background-size: 64px 128px;
  background-repeat: round;
  
  width: 830px;
  height: auto;

}


/*----------------- GRIDS ------------------*/



.sheet-main {
  
}

.sheet-main-top {
  display: grid;
  width: 310px;
  height: 50px;
  grid-gap: 6px;
  grid-template-columns: 310px;
  grid-template-rows: 30px 30px 30px 30px;
  grid-template-areas:"topgrid"
					  "stat1"
					  "stat2"
					  "stat3";
}

/*----------------- 2 columned, 406px each ------------------*/

.sheet-main-pc {
	display: block;
	width: 820px;
	height: auto;
	grid-gap: 6px;
	align-items: start;
	grid-template-columns: 406px  406px;
	grid-template-rows:  minmax(min-content, max-content)    ;
	grid-template-areas:"pcleft   pcright";
}
	

.sheet-main-npc {
  display: block;
  width: 820px;
  height: auto;
  grid-gap: 6px;
  align-items: start;
  grid-template-columns: 820px;
  grid-template-rows:  minmax(min-content, max-content)    ;
  grid-template-areas:"npcrollers"
					  "specials"
					  "appearance";
}



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

.sheet-hidden {
    display: none;
}

.sheet-section {
    padding: 5px;
    border-style: solid;
	justify-content: center;

}

.sheet-flex-col {
  display: flex;
  flex-flow: row wrap;
  /*justify-content: flex-start;*/
}

.sheet-flex-col-center {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  /*justify-content: flex-start;*/
}

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

.sheet-hide-section {
  display: none;

}


/* --------------------------------Hide and Display section of Code-------------------------------- */
/* Configure the tab buttons*/
.sheet-main-pc,
.sheet-main-npc {display: none;}

/* show the selected tab */
.sheet-tabstoggle[value="pc"] ~ div.sheet-main-pc,
.sheet-tabstoggle[value="npc"] ~ div.sheet-main-npc {display: block;}


/*------------- Top Section -------------*/


.sheet-topgrid {
  grid-area: topgrid;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 200px 2px 50px 6px 50px 6px 50px 2px 80px 2px 40px 2px 70px 2px 40px 8px 70px 9px 70px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: 30px;
  
}

label.sheet-big-label {
	
	font-family: 'EB Garamond', serif;
	text-align: center;
	color: black;
	display: inline;
    font-size: 1.5em;
    font-weight: normal;
    line-height: 30px;
    margin-bottom: 0px;
	
}

label.sheet-big-label-title {
	
	font-family: 'EB Garamond', serif;
	text-align: center;
	color: rgb(236,60,67);
	display: inline;
    font-size: 1.3em;
    font-weight: bold;
    line-height: 30px;
    margin-bottom: 0px;
	
}

.sheet-topgrid input[type=number].sheet-stat-inputs {
	
	font-family: 'EB Garamond', serif;
	color: black;
	display: inline;
	height:30px;
	width:40px;
	text-align: center;
	font-size: 1.5em;
}

.sheet-gamename {
  grid-area: gamename;
  
  background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Red%20Giant/red_giant_logo.PNG?raw=true"); /*Red Giant logo, used with publisher permission*/
  
  background-size: contain;
  align-items: center;
  justify-items: center;

}

button.sheet-radio-roll-state {
	
	font-family: 'Balthazar', serif;
	font-size: 1.5em;
	color: black;
	border-style: solid;
	/*border-radius: 8px;*/
	text-align: center;
	line-height: 25px;
	height: 25px;

}


button.sheet-radio-roll-state-advantage {
	
	background-color: rgb(213, 235, 217);
	
}

button.sheet-radio-roll-state-flat {
	
	background-color: rgb(235, 237, 235);
	
}

button.sheet-radio-roll-state-disadvantage {
	
	background-color: rgb(230, 204, 208);
	
}

input.sheet-radio-roll-state[value="advantage"] ~ button.sheet-radio-roll-state-advantage {
    background-color: rgb(149, 232, 164);

}

input.sheet-radio-roll-state[value="flat"] ~ button.sheet-radio-roll-state-flat {
    /*background-color: rgb(160, 163, 160);*/
	background-color: #888;
}

input.sheet-radio-roll-state[value="disadvantage"] ~ button.sheet-radio-roll-state-disadvantage {
    background-color: rgb(212, 97, 115);
}

button.sheet-tabbutton {
	
	font-family: 'EB Garamond', serif;
	background-color: rgb(144,144,144);
	font-size: 150%;
	font-weight: bold;
	color: white;
	width: 64px;
	height: 24px;
	border-width: 3px;
	border-style: groove;
	border-color: rgb(236,60,67);
	border-radius: 0px;
	
}

button.sheet-tabbutton:hover,
.sheet-stat1 button[type=roll].sheet-statrollbutton:hover,
.sheet-stat3 button[type=roll].sheet-statrollbuttonshort:hover,
.sheet-healing button[type=roll].sheet-healingbuttonshort:hover,
.sheet-healing button[type=roll].sheet-healingbutton:hover,
.sheet-npcrollers button[type=roll].sheet-statrollbuttonshort:hover {
	
	background-color: rgb(108,108,108);

}

/*------------- Stats - Common section -------------*/


.sheet-stat1 {
  grid-area: stat1;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 195px 80px 60px 80px 60px 85px 85px 55px 50px 4px 50px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: 30px;
  
}

.sheet-stat2 {
  grid-area: stat2;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 195px 80px 60px 80px 65px 50px 50px 10px 45px 57px 50px 4px 50px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: 30px;
  
}

.sheet-stat3 {
  grid-area: stat3;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 50px 145px 2px 100px 10px 100px 54px 61px 291px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: 30px;
  
}

select.sheet-die-dropdowns{
	
	font-family: 'EB Garamond', serif;
	display: inline;
	height:30px;
	width:60px;

}

select.sheet-attribute-dropdowns{
	
	font-family: 'EB Garamond', serif;
	display: inline;
	height:30px;
	width:100px;

}

label.sheet-regular-label {
	
	font-family: 'EB Garamond', serif;
	text-align: center;
	color: black;
	display: inline;
    font-size: 1.3em;
    font-weight: normal;
    line-height: 30px;
    margin-bottom: 0px;
	
}

label.sheet-big-label-italic {
	
	font-family: 'EB Garamond', serif;
	text-align: center;
	color: rgb(236,60,67);
	display: inline;
	/*font-style: italic;*/
    font-size: 1.3em;
    font-weight: bold;
    line-height: 30px;
    margin-bottom: 0px;
	
}

.sheet-stat1 button[type=roll].sheet-statrollbutton{
	
	font-family: 'EB Garamond', serif;
	background-color: rgb(144,144,144);
	font-size: 120%;
	font-weight: bold;
	color: white;
	width: 73px;
	height: 24px;
	border-width: 3px;
	border-style: groove;
	border-color: rgb(236,60,67);
	border-radius: 0px;
	background-image: none;
	
}

.sheet-stat3 button[type=roll].sheet-statrollbuttonshort,
.sheet-npcrollers button[type=roll].sheet-statrollbuttonshort {
	
	font-family: 'EB Garamond', serif;
	background-color: rgb(144,144,144);
	font-size: 120%;
	font-weight: bold;
	color: white;
	width: 46px;
	height: 24px;
	border-width: 3px;
	border-style: groove;
	border-color: rgb(236,60,67);
	border-radius: 0px;
	background-image: none;
	
}

.sheet-stat1 button[type=roll].sheet-statrollbutton:before,
.sheet-stat3 button[type=roll].sheet-statrollbuttonshort:before,
.sheet-npcrollers button[type=roll].sheet-statrollbuttonshort:before    {
    content: "";

}

.sheet-stat1 input[type=number].sheet-stat-inputs,
.sheet-stat2 input[type=number].sheet-stat-inputs,
.sheet-stat3 input[type=number].sheet-stat-inputs{
	
	font-family: 'EB Garamond', serif;
	color: black;
	display: inline;
	height:30px;
	width:50px;
	text-align: center;
	font-size: 1.2em;
}

input.sheet-char-inputs{
	
	font-family: 'EB Garamond', serif;
	display: inline;
	height:30px;
	width:145px;
	font-size: 1.2em;
	
}

input.sheet-char-inputs-long{
	
	font-family: 'EB Garamond', serif;
	display: inline;
	height:30px;
	width:276px;
	font-size: 1.2em;
	
}

input.sheet-char-inputs-look{
	
	font-family: 'EB Garamond', serif;
	display: inline;
	height:30px;
	width:291px;
	font-size: 1.2em;
	
}

input.sheet-radio-roll-state[value="advantage"] ~ button.flat,
input.sheet-radio-roll-state[value="advantage"] ~ button.disadvantage,
input.sheet-radio-roll-state[value="flat"] ~ button.advantage,
input.sheet-radio-roll-state[value="flat"] ~ button.disadvantage,
input.sheet-radio-roll-state[value="disadvantage"] ~ button.flat,
input.sheet-radio-roll-state[value="disadvantage"] ~ button.advantage   {
    display: none;
}



/*------------- PC - Left Column Styling  -------------*/

.sheet-main-pc-left {
  display: block;
  grid-area: pcleft;
  width: 406px;
  height: auto;
  grid-gap: 6px;
  align-items: start;
  grid-template-columns: 406px;
  grid-template-rows:  minmax(min-content, max-content)    ;
  grid-template-areas:"attributes"
					  "usables"
					  "armor"
					  "weapons"
					  "items"
					  "speechmagic";
}


/* ATTRIBUTES */

.sheet-attributes {
  grid-area: attributes;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 140px 280px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  
}

label.sheet-left-label-1 {
	
	font-family: 'EB Garamond', serif;
	text-align: left;
	color: rgb(236,60,67);
	display: inline;
	/*font-style: italic;*/
    font-size: 2em;
    font-weight: bold;
    line-height: 30px;
    margin-bottom: 0px;
	grid-column: 1 / -1;
	
}

label.sheet-left-label {
	
	font-family: 'EB Garamond', serif;
	text-align: left;
	color: black;
	display: inline;
    font-size: 1.3em;
    font-weight: normal;
    line-height: 30px;
    margin-bottom: 0px;
	
}

/* USEABLES - 424px per line */

.sheet-useables {
  grid-area: useables;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 30px 70px 5px 50px 50px 5px 70px 50px 4px 50px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  
}

.sheet-useables input[type=number].sheet-useable-inputs,
.sheet-armordetails input[type=number].sheet-useable-inputs {
	
	font-family: 'EB Garamond', serif;
	color: black;
	display: inline;
	height:30px;
	width:50px;
	text-align: center;
	font-size: 1.3em;
}


.sheet-useables input[type=number].sheet-useable-inputs-long {
	
	font-family: 'EB Garamond', serif;
	color: black;
	display: inline;
	height:30px;
	width:70px;
	text-align: center;
	font-size: 1.3em;
}

label.sheet-regular-label-left {
	
	font-family: 'EB Garamond', serif;
	text-align: left;
	color: black;
	display: inline;
    font-size: 1.3em;
    font-weight: normal;
    line-height: 30px;
    margin-bottom: 0px;
	
}

/* ARMOR */

.sheet-armor {
  grid-area: armor;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 424px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  grid-template-areas:"armortitle"
					  "armordetails";
  
}

.sheet-armortitle {
  grid-area: armortitle;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 290px 84px 50px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  
}

.sheet-armordetails {
  grid-area: armordetails;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 424px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  
}

label.sheet-big-label-table {
	
	font-family: 'EB Garamond', serif;
	text-align: left;
	color: rgb(236,60,67);
	display: inline;
    font-size: 1.3em;
    font-weight: bold;
    line-height: 30px;
    margin-bottom: 0px;
	
}

input.sheet-armor-inputs{
	
	font-family: 'EB Garamond', serif;
	display: inline;
	height:30px;
	width:286px;
	font-size: 1.2em;
	color:rgb(236,60,67);
	text-transform: uppercase;
	
}

/* WEAPONS */

.sheet-weapons {
  grid-area: weapons;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 424px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  grid-template-areas:"weaponstitle"
					  "weaponsdetails";
  
}

.sheet-weaponstitle {
  grid-area: weaponstitle;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 144px 124px 45px 65px 36px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  
}

.sheet-weaponsdetails {
  grid-area: weaponsdetails;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 424px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  
}

input.sheet-weapons-inputs{
	
	font-family: 'EB Garamond', serif;
	display: inline;
	height:30px;
	width:140px;
	font-size: 1.2em;
	color:rgb(236,60,67);
	text-transform: uppercase;
	
}

input.sheet-weapons-inputs-short{
	
	font-family: 'EB Garamond', serif;
	display: inline;
	height:30px;
	width:120px;
	font-size: 1.2em;
	color:black;
	text-transform: uppercase;
	
}

input.sheet-weapons-inputs-shortest{
	
	font-family: 'EB Garamond', serif;
	display: inline;
	height:30px;
	width:60px;
	font-size: 1.2em;
	color:black;
	text-transform: uppercase;
	
}

.sheet-weaponsdetails input[type=number].sheet-useable-inputs {
	
	font-family: 'EB Garamond', serif;
	color: black;
	display: inline;
	height:30px;
	width:36px;
	text-align: center;
	font-size: 1.3em;
}

.sheet-itemsdetails input[type=number].sheet-useable-inputs,
.sheet-speechmagicdetails input[type=number].sheet-useable-inputs {
	
	font-family: 'EB Garamond', serif;
	color: black;
	display: inline;
	height:30px;
	width:45px;
	text-align: center;
	font-size: 1.3em;
}

/* ITEMS */

.sheet-items {
  grid-area: items;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 424px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  grid-template-areas:"itemstitle"
					  "itemsdetails";
  
}

.sheet-itemstitle {
  grid-area: itemstitle;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 379px 36px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  
}

.sheet-itemsdetails {
  grid-area: itemsdetails;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 424px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  
}

input.sheet-items-inputs{
	
	font-family: 'EB Garamond', serif;
	display: inline;
	height:30px;
	width:371px;
	font-size: 1.2em;
	color:rgb(236,60,67);
	text-transform: uppercase;
	
}

/* SPEECH MAGIC */

.sheet-speechmagic {
  grid-area: speechmagic;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 424px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  grid-template-areas:"speechmagictitle"
					  "speechmagicdetails";
  
}

.sheet-speechmagictitle {
  grid-area: speechmagictitle;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 96px 264px 50px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  
}

.sheet-speechmagicdetails {
  grid-area: speechmagicdetails;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 424px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  
}

.speechmagic-width {
	width:424px;
}

select.sheet-speechmagic-dropdowns{
	
	font-family: 'EB Garamond', serif;
	display: inline;
	justify-items: center;
	height:28.46px;
	width:92px;

}

input.sheet-speechmagic-inputs{
	
	font-family: 'EB Garamond', serif;
	display: inline;
	height:30px;
	width:271px;
	font-size: 1.2em;
	color:rgb(236,60,67);
	text-transform: uppercase;
	
}








/*------------- PC - Right Column Styling  -------------*/

.sheet-main-pc-right {
  display: block;
  grid-area: pcright;
  width: 406px;
  height: auto;
  grid-gap: 6px;
  align-items: start;
  grid-template-columns: 406px;
  grid-template-rows:  minmax(min-content, max-content)    ;
  position: absolute;
  left: 480px; top: 233px;
  grid-template-areas:"archetype"
					  "exchanges"
					  "curses"
					  "healing"
					  "stavemagic"
					  "orbmagic";
}

/* ARCHETYPE */

.sheet-archetype {
  grid-area: archetype;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 70px 321px;
  display: grid;
  grid-gap: 4px;
  grid-template-areas:"archetypename  archetypename"
					  ".    ."
					  ".    ."
					  ".    ."
					  ".    ."
					  ".    ."
					  ".    .";
  grid-template-rows: auto;
  
}

.sheet-archetypename {
  grid-area: archetypename;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 222px 169px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  
}

label.sheet-left-label-big {
	
	font-family: 'EB Garamond', serif;
	text-align: left;
	color: rgb(236,60,67);
	display: inline;
	/*font-style: italic;*/
    font-size: 2em;
    font-weight: bold;
    line-height: 30px;
    margin-bottom: 0px;
	
}

input.sheet-char-inputs-title{
	
	font-family: 'EB Garamond', serif;
	display: inline;
	height:30px;
	width:169px;
	font-size: 1.2em;
	color:rgb(236,60,67);
	text-transform: uppercase;
	
}

.attribute-width {
	width:321px;
}

.sheet-auto-expand {
	position: relative;
	cursor: text;
	word-wrap: break-word;
	min-height: 18px;
	/*width:321px;*/
	line-height: 18px;
}
.sheet-auto-expand span {
	visibility: hidden;
	white-space: pre-wrap;
	display: block;
	min-height: 18px;
}
.sheet-auto-expand textarea {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	margin: 0;
	overflow: hidden;
	resize: none;
	height: 100%;
	width: 100%;
	display: block;
	box-sizing: border-box;
	background: transparent;
	/*border: none;*/
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	padding: inherit;
	text-align: inherit;
	text-transform: inherit;
	font-family: 'EB Garamond', serif;
	font-size: 1.2em;
	min-height: 18px;
}

/* EXCHANGES */

.sheet-exchanges {
  grid-area: exchanges;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 395px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  
}

.charsheet .repcontrol_add,
.charsheet .repcontrol_edit,
.charsheet .repcontrol_del {
		
	font-family: 'EB Garamond', serif;
	background-color: rgb(144,144,144);
	background-image: none;
	font-size: 100%;
	font-weight: bold;
	color: white;
	width: 64px;
	height: 14px;
	border-width: 3px;
	border-style: groove;
	border-color: rgb(236,60,67);
	border-radius: 0px;
	
}

.charsheet .repcontrol_add:hover,
.charsheet .repcontrol_edit:hover,
.charsheet .repcontrol_del:hover {
	
	background-color: rgb(108,108,108);
	
}

.exchange-width {
	width:267px;
	display: inline-block;
}

.red-width {
	width:120px;
	display: inline-block;
	color:rgb(236,60,67);
	text-transform: uppercase;
}

.exchangelong-width {
	width:322px;
	display: inline-block;
}

/* CURSES */

.sheet-curses {
  grid-area: curses;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 395px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  
}

.curse-width {
	width:395px;
}

/* HEALING */

.sheet-healing {
  grid-area: healing;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 135px 5px 225px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  
}

button.sheet-healingbutton {
	
	font-family: 'EB Garamond', serif;
	background-color: rgb(144,144,144);
	font-size: 150%;
	font-weight: bold;
	color: white;
	width: 229px;
	height: 24px;
	border-width: 3px;
	border-style: groove;
	border-color: rgb(236,60,67);
	border-radius: 0px;
	
}

button.sheet-healingbuttonshort {
	
	font-family: 'EB Garamond', serif;
	background-color: rgb(144,144,144);
	font-size: 150%;
	font-weight: bold;
	color: white;
	width: 119px;
	height: 24px;
	border-width: 3px;
	border-style: groove;
	border-color: rgb(236,60,67);
	border-radius: 0px;
	
}

/* STAVE MAGIC */

.sheet-stavemagic {
  grid-area: stavemagic;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 395px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  grid-template-areas:"stavemagictitle"
					  "stavemagicdetails";
  
}

.sheet-stavemagictitle {
  grid-area: stavemagictitle;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 130px 219px 40px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  
}

.sheet-stavemagicdetails {
  grid-area: stavemagicdetails;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 395px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  
}

.stavemagic-width {
	width:395px;
}

input.sheet-stavemagic-inputs{
	
	font-family: 'EB Garamond', serif;
	display: inline;
	height:30px;
	width:279px;
	font-size: 1.2em;
	color:rgb(236,60,67);
	text-transform: uppercase;
	
}

.sheet-stavemagicdetails input[type=number].sheet-useable-inputs,
.sheet-orbmagicdetails input[type=number].sheet-useable-inputs {
	
	font-family: 'EB Garamond', serif;
	color: black;
	display: inline;
	height:30px;
	width:50px;
	text-align: center;
	font-size: 1.3em;
}

/* ORB MAGIC */

.sheet-orbmagic {
  grid-area: orbmagic;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 395px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  grid-template-areas:"orbmagictitle"
					  "orbmagicdetails";
  
}

.sheet-orbmagictitle {
  grid-area: orbmagictitle;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 224px 125px 40px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  
}

.sheet-orbmagicdetails {
  grid-area: orbmagicdetails;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 395px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  
}

.orbmagic-width {
	width:395px;
}

input.sheet-orbmagic-inputs{
	
	font-family: 'EB Garamond', serif;
	display: inline;
	height:30px;
	width:279px;
	font-size: 1.2em;
	color:rgb(236,60,67);
	text-transform: uppercase;
	
}





/*------------- NPC - Styling  -------------*/

/* NPC ROLLERS */

.sheet-npcrollers {
  grid-area: npcrollers;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 140px 2px 90px 10px 90px 50px 32px 130px 2px 90px 10px 90px 50px ;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: 30px;
  
}

select.sheet-attribute-dropdowns-npc{
	
	font-family: 'EB Garamond', serif;
	display: inline;
	height:30px;
	width:90px;

}


/* SPECIALS */

.sheet-specials {
  grid-area: specials;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 844px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  grid-template-areas:"specialstitle"
					  "specialsdetails";
  
}

.sheet-specialstitle {
  grid-area: specialstitle;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 234px 280px 40px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  
}

.sheet-specialsdetails {
  grid-area: specialsdetails;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 844px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  
}

.specials-width {
	width:522px;
	display: inline-block;
}

input.sheet-specials-inputs{
	
	font-family: 'EB Garamond', serif;
	display: inline;
	height:30px;
	width:260px;
	font-size: 1.2em;
	color:rgb(236,60,67);
	text-transform: uppercase;
	
}

/* APPEARANCE */

.sheet-appearance {
  grid-area: appearance;
  align-self: self-start;
  font-family: 'EB Garamond', serif;
  grid-template-columns: 844px;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: auto;
  
}

.appearance-width {
	width:844px;
}






/*------------- Roll Template Styling  -------------*/


/* ROLL TEMPLATE STYLING - ATTRIBUTE */

.sheet-rolltemplate-attribute div.sheet-attribute-container{
	background-color:rgb(144,144,144);
	font-family: 'EB Garamond', serif; 
	border-width: 8px;
	border-style: groove;
	border-color: rgb(236,60,67);
	border-radius: 0px;
}
.sheet-rolltemplate-attribute .sheet-attribute-roll-header{

    font-weight: bold;
	color: #fcedd8;
    font-size:large;
    text-align:left;
	text-shadow: 2px 2px 0px #eb452b, 
                  4px 4px 0px #efa032;
}
.sheet-rolltemplate-attribute .sheet-attribute-type{
    font-size:large;
    text-align: left;
	padding: 5px;
    font-weight: normal;
	font-size:110%;
    color: white;
    

}
.sheet-rolltemplate-attribute .sheet-attribute-checktype{
    font-size:large;
    text-align: right;
	padding: 5px;
    font-weight: bold;
	font-size:110%;
    color: white;
    

}

.sheet-rolltemplate-attribute .sheet-attribute-roll-header .sheet-attribute-roll-result {
    background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Red%20Giant/red-moon-transparent.png?raw=true"); /*Red moon*/
	background-size: 60%;
	align-items: center;
	justify-items: center;	
	background-repeat: no-repeat;
	padding-right: 50px;
    margin-right: -50px;
	padding-bottom: 25px;
    margin-bottom: -25px;
	padding-top: 5px;
    margin-top: -5px;
    
}

.sheet-rolltemplate-attribute .sheet-attribute-roll-header .sheet-attribute-roll-result .inlinerollresult{
    text-align: center;
    background-color: transparent !important;
	border: none !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    font-style:italic;
	font-size:X-large !important;
    color:white;  
    
}

/* ROLL TEMPLATE STYLING - TREAT WOUNDS */

.sheet-rolltemplate-treatwounds div.sheet-treatwounds-container{
	background-color:rgb(144,144,144);
	font-family: 'EB Garamond', serif; 
	border-width: 8px;
	border-style: groove;
	border-color: rgb(236,60,67);
	border-radius: 0px;
}
.sheet-rolltemplate-treatwounds .sheet-treatwounds-roll-header{

    font-weight: bold;
	color: #fcedd8;
    font-size:large;
    text-align:left;
	text-shadow: 2px 2px 0px #eb452b, 
                  4px 4px 0px #efa032;
}
.sheet-rolltemplate-treatwounds .sheet-treatwounds-type{
    font-size:large;
    text-align: right;
	padding: 5px;
    font-weight: bold;
	font-size:110%;
    color: white;
}

.sheet-rolltemplate-treatwounds .sheet-treatwounds-hp-header{
    font-size:large;
    text-align: left;
	padding: 1px;
	padding-bottom: 1px;
    font-weight: normal;
	font-size:110%;
    color: white;
}


.sheet-rolltemplate-treatwounds .sheet-treatwounds-hp-header .sheet-treatwounds-hp-result {
	align-items: center;
	justify-items: center;	
    
}

.sheet-rolltemplate-treatwounds .sheet-treatwounds-hp-header .sheet-treatwounds-hp-result .inlinerollresult{
    text-align: center;
    background-color: transparent !important;
	border: none !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    font-style:italic;
	font-size:X-large !important;
    color:white;  
    
}


/* ROLL TEMPLATE STYLING - MEAL AND REST */

.sheet-rolltemplate-mealandrest div.sheet-mealandrest-container{
	background-color:rgb(144,144,144);
	font-family: 'EB Garamond', serif; 
	border-width: 8px;
	border-style: groove;
	border-color: rgb(236,60,67);
	border-radius: 0px;
}
.sheet-rolltemplate-mealandrest .sheet-mealandrest-roll-header{

    font-weight: bold;
	color: #fcedd8;
    font-size:large;
    text-align:left;
	text-shadow: 2px 2px 0px #eb452b, 
                  4px 4px 0px #efa032;
}
.sheet-rolltemplate-mealandrest .sheet-mealandrest-type{
    font-size:large;
    text-align: right;
	padding: 5px;
    font-weight: bold;
	font-size:110%;
    color: white;
}

.sheet-rolltemplate-mealandrest .sheet-mealandrest-hp-header,
.sheet-rolltemplate-mealandrest .sheet-mealandrest-spirit-header,
.sheet-rolltemplate-mealandrest .sheet-mealandrest-sanity-header{
    font-size:large;
    text-align: left;
	padding: 1px;
	padding-bottom: 1px;
    font-weight: normal;
	font-size:110%;
    color: white;
}


.sheet-rolltemplate-mealandrest .sheet-mealandrest-hp-header .sheet-mealandrest-hp-result,
.sheet-rolltemplate-mealandrest .sheet-mealandrest-spirit-header .sheet-mealandrest-spirit-result,
.sheet-rolltemplate-mealandrest .sheet-mealandrest-sanity-header .sheet-mealandrest-sanity-result {
	align-items: center;
	justify-items: center;	
    
}

.sheet-rolltemplate-mealandrest .sheet-mealandrest-hp-header .sheet-mealandrest-hp-result .inlinerollresult,
.sheet-rolltemplate-mealandrest .sheet-mealandrest-spirit-header .sheet-mealandrest-spirit-result .inlinerollresult,
.sheet-rolltemplate-mealandrest .sheet-mealandrest-sanity-header .sheet-mealandrest-sanity-result .inlinerollresult{
    text-align: center;
    background-color: transparent !important;
	border: none !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    font-style:italic;
	font-size:X-large !important;
    color:white;  
    
}