roll20-character-sheets/Demon Gate Scripted/Demon_Gate_Scripted.css

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

.charsheet {
	background: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Demon%20Gate%20Scripted/Paper.jpg");
}

.charsheet td.sheet-attname {
	font-weight: bold;
	text-align: left;
	background-color: #ddd9c3;
	border-style: solid;
	border-color: #c4bc96;
	border-width: 1px;
	padding-left: 8px;
}

.charsheet td.sheet-skillname {
	background-color: #ddd9c3;
	font-size: 0.9em;
	border-style: solid;
	border-color: #c4bc96;
	border-width: 1px;
	padding-left: 8px;
	padding-right: 8px;
}

.charsheet td.sheet-smallname {
	font-weight: bold;
	text-align: center;
	border: 0;
	border-radius: 0;
}

.charsheet td.sheet-skillhead {
	font-size: 0.7em;
	font-weight: bold;
	text-align: center;
	background-color: #ddd9c3;
	border-style: solid;
	border-color: #c4bc96;
	border-width: 1px;
}

.charsheet td.sheet-skillstat {
	text-align: center;
    border-style: solid;
	border-color: #c4bc96;
	border-width: 1px;
}

.charsheet select.sheet-skilldesc {
	font-size: 0.7em;
	width: 5em;
	height: 2.2em;
}

.charsheet select.sheet-skilldesclong {
	width: 6em;
	margin: 0;
	border: 0;
	border-radius: 0;
}

.charsheet select.sheet-skilldesclonger {
	font-size: 0.7em;
	width: 12em;
	height: 2.2em;
}

.charsheet td.sheet-attstat {
	background-color: #ddd9c3;
	border-style: solid;
	border-color: #c4bc96;
	border-width: 1px;
}

.charsheet td.sheet-attstatsmall {
	font-size: 0.7em;
	font-weight: bold;
	background-color: #ddd9c3;
	border-style: solid;
	border-color: #c4bc96;
	border-width: 1px;
}

.charsheet td.sheet-descname {
	text-align: left;
	background-color: #ffffff;
	border-style: solid;
	border-color: #c4bc96;
	border-width: 1px;
	padding-left: 20px;
}

.charsheet td.sheet-descstat,
.charsheet td.sheet-descstat-narrow {
	background-color: #ffffff;
	border-style: solid;
	border-color: #c4bc96;
	border-width: 1px;
}

.charsheet td.sheet-descstatsmall {
	font-size: 0.7em;
	background-color: #ffffff;
	border-style: solid;
	border-color: #c4bc96;
	border-width: 1px;
}

.charsheet input.sheet-attfield {
	font-size: 1em;
	width: 2em;
	text-align: center;
}

.charsheet input.sheet-skillfield {
	width: 2em;
	text-align: center;
}

.charsheet input[type="number"].sheet-desctotalfield {
	font-size: 1em;
	width: 2em;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	color: dimgray;
	background-color: #e0e0e0;
	border: 0;
	border-radius: 0;
}

.charsheet input[type="number"].sheet-totalfield,
.charsheet input[type="text"].sheet-totalfield {
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	height: 30px;
	color: dimgray;
	background-color: #e0e0e0;
	border: 0;
	border-radius: 0;
	width: 100%;
}

.charsheet input.sheet-attrankfield {
	font-size: 1em;
	width: 2em;
	text-align: center;
	font-weight: bold;
	color: blue;
	background-color: #e0e0e0;
}

.charsheet input.sheet-longtext {
	width: 12em;
	text-align: center;
}

.charsheet input.sheet-autofield,
.charsheet input.sheet-autofield-wide{
	font-size: 1em;
	text-align: center;
	font-weight: bold;
	background-color: #e0e0e0;
}

.charsheet input.sheet-autofield {
	width: 2em;
}

.charsheet input.sheet-autofieldsmall {
	font-size: 0.7em;
	width: 2em;
	text-align: center;
	font-weight: bold;
	background-color: #e0e0e0;
}

.charsheet textarea.sheet-smalltextarea {
	font-size: 0.7em;
	width: 40em;
	height: 2.5em;
}




.charsheet td.sheet-descstat1 {
	background-color: #ffffff;
	border-style: solid;
	border-color: #c4bc96;
	border-width: 1px;
}

.charsheet td.sheet-skillstat1 {
	text-align: center;
	background-color: #ffffff;
	border-style: solid;
	border-color: #c4bc96;
	border-width: 1px;
}




















.charsheet input.sheet-short {
	font-size: 1.5em;
	text-align: center;
}

.charsheet input.sheet-long {
	width: 10em;
	text-align: center;
}

.charsheet input.sheet-gpxpfield {
	font-weight: bold;
	width: 6em;
	text-align: center;
}

.charsheet input.sheet-atkfield {
	font-size: 0.6em;
	text-align: center;
}

.charsheet tr.sheet-blankrow {
	height: 20px !important;
}

.charsheet td.sheet-blankcol {
	width: 20px !important;
}

.charsheet td.sheet-blankcols {
	width: 100px !important;
}

.charsheet td.sheet-smaller {
	font-size: 0.8em;
}

.charsheet td.sheet-shrink {
	font-size: 0.5em;
	text-align: center;
}

.charsheet input.sheet-atktotalfield {
	font-size: 0.6em;
	text-align: center;
	color: red
}

.charsheet table.sheet-large {
	font-size: 1.5em;
}

.charsheet table.sheet-adjfield {
	font-size: 1em;
	font-weight: bold;
	text-align: center;
}

.charsheet input.sheet-adjvalue {
	font-size: 1em;
	font-weight: bold;
	text-align: center;
}

.charsheet input.sheet-adjvalueblue {
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	color: white;
	background-color: gray;
}

.charsheet input.sheet-redadjvalue {
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	color: red;
}

.charsheet input.sheet-adjvaluetotal {
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	color: red;
}

.charsheet textarea.sheet-knowdesc {
	font-size: 0.8em;
	width: 50em;
	height: 1.7em;
}

.charsheet textarea.sheet-skilldesc {
	font-size: 0.8em;
	width: 25em;
	height: 5em;
}

.charsheet textarea.sheet-spelldesc {
	font-size: 0.8em;
	width: 30em;
	height: 3em;
}

.charsheet button.sheet-valuebutton:before {
	content: "" !important;
}

.charsheet button.sheet-valuebutton {
	border: none;
	padding: 0px;
	font-weight: bold;
}

.charsheet input[type=number]::-webkit-inner-spin-button,
.charsheet input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.charsheet div[class^="sheet-section"] {
	display: none;
}




/* ************************************************************************************************************************************************ */
/* Colours */
/* ************************************************************************************************************************************************ */
/*
#948a54 (mid brown) - table borders, headings of older parts of the sheet
#ddd9c3 (beige) - header cells, active tab button
#b6ad7c (darker beige) - inactive tab buttons
#f6f5ef (pale beige) - input control backgrounds
#e0e0e0 (light grey) - read-only cell background

#c4bc96 (slightly darker beige) - tab button borders
*/


/* ************************************************************************************************************************************************ */
/* Headings */
/* ************************************************************************************************************************************************ */

h1, h2, h3 {
	width: 100%;
	text-align: center;
}

h2, h3 {
	color: maroon;
	background-color: #ddd9c3;
	font-weight: normal;
	font-size: 16px;
	height: 28px;
	line-height: 28px;
}

h1 {
	height: 40px;
	line-height: 40px;
	color: #ddd9c3;
	background-color: #590902;
	border: 2px solid #590902;
	border-radius: 4px;
	font-size: 20px;
}

h2 {
	padding-top: 2px;
	padding-bottom: 2px;
}

h3 {
	text-align: left;
}


/* ************************************************************************************************************************************************ */
/* Entry controls */
/* ************************************************************************************************************************************************ */
input,
select,
textarea,
.sheet-input-like,
.sheet-input-like-no-padding {
	background-color: #f6f5ef;
}

.sheet-input-like {
	padding-left: 4px;
}

.sheet-read-only-field,
td input:read-only {
	color: lightslategray;
	background-color: #e0e0e0;
}

button.sheet-button,
button.btn {
	border: 2px solid maroon;
	border-radius: 4px;
	color: maroon;
	text-shadow: none;
}

button.sheet-button {
	background: transparent;
}

button.btn {
	background: #ddd9c3;
}


button.sheet-button[type=roll]:before {
	content: "";
}

button.sheet-button-small {
	height: 20px;
}

button.sheet-button-small[type=roll] {
	font-size: 11px;
}

.sheet-tall-control,
input.sheet-tall-control {
	height: 36px;
	line-height: 36px;
	font-size: 16px;
}

/* ************************************************************************************************************************************************ */
/* Expand/collapse (custom checkbox plus hiding a section)*/
/* ************************************************************************************************************************************************ */

/* Hide the browser's default checkbox */
input.sheet-expand-collapse-checkbox {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 18px;
}

/* Show the checkmark when checked */
input.sheet-expand-collapse-checkbox:checked~.sheet-expand-collapse-symbol:after {
	display: block;
	content: "⯆";
	font-size: 18px;
}

/* Style the checkmark/indicator */
input.sheet-expand-collapse-checkbox~.sheet-expand-collapse-symbol:after {
	display: block;
	content: "⯈";
	font-size: 18px;
}

input[type="checkbox"].sheet-expand-collapse-checkbox~.sheet-collapsible {
	display: none;
}

input[type="checkbox"].sheet-expand-collapse-checkbox:checked~.sheet-collapsible {
	display: block;
}


/* ************************************************************************************************************************************************ */
/* Tab buttons */
/* ************************************************************************************************************************************************ */

.charsheet input.sheet-tab {
	width: 90px;
	height: 40px;
	cursor: pointer;
	position: relative;
	opacity: 0;
	z-index: 9999;
}

.charsheet span.sheet-tab {
	text-align: center;
	display: inline-block;
	font-size: 14px;
	line-height: 28px;
	color: maroon;
	border: 2px solid maroon;
	border-radius: 4px;
	background: #b6ad7c;
	width: 90px;
	height: 28px;
	cursor: pointer;
	position: relative;
	vertical-align: middle;
	margin-left: -91px;
}

.charsheet input.sheet-tab1:checked~div.sheet-section-core,
.charsheet input.sheet-tab2:checked~div.sheet-section-skills,
.charsheet input.sheet-tab3:checked~div.sheet-section-combat,
.charsheet input.sheet-tab4:checked~div.sheet-section-gear,
.charsheet input.sheet-tab5:checked~div.sheet-section-mystic,
.charsheet input.sheet-tab6:checked~div.sheet-section-abilities,
.charsheet input.sheet-tab7:checked~div.sheet-section-reputation,
.charsheet input.sheet-tab8:checked~div.sheet-section-notes {
	display: block;
}

.charsheet input.sheet-tab:checked+span {
	background: #ddd9c3;
}


/* ************************************************************************************************************************************************ */
/* Flexbox columns */
/* ************************************************************************************************************************************************ */
.sheet-flex-section {
	margin-top: 20px;
	margin-left: -10px;
	margin-right: -10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.sheet-column-fixed {
	flex-grow: 0;
	margin: 10px;
}

.sheet-column-grow {
	flex-grow: 1;
	margin: 10px;
}

.sheet-column-prominent-stat {
	flex-grow: 0;
	width: 120px;
	margin: 10px;
}

.sheet-flex-form-container {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.sheet-flex-form-grow {
	flex-grow: 1;
}

.sheet-flex-form-fixed {
	flex-grow: 0;
	padding-left: 2px;
	padding-right: 2px;
}


/* ************************************************************************************************************************************************ */
/* Tables */
/* ************************************************************************************************************************************************ */

table.sheet-wide-table,
table.sheet-wide-table-auto {
	width: 100%;
	border: 2px solid #948a54;
	background-color: #ddd9c3;
}

table.sheet-wide-table-auto {
	table-layout: auto;
}



/* ************************************************************************************************************************************************ */
/* Top section of first sheet */
/* ************************************************************************************************************************************************ */
.sheet-demon-gate-logo {
	height: 116px;
}

.sheet-column-prominent-stat td input[type=number] {
	width: 100%;
	text-align: center;
}

.sheet-wide-table th,
.sheet-wide-table-auto th {
	padding-left: 10px;
	padding-right: 10px;
	max-width: max-content;
	white-space: nowrap;
	font-size: 11px;
	font-weight: bold;
	color: dimgray;
	background-color: #ddd9c3;
}

.sheet-wide-table th,
.sheet-wide-table td,
.sheet-wide-table-auto th,
.sheet-wide-table-auto td {
	border: 1px solid #c4bc96;	
}

.sheet-wide-table-auto th,
.sheet-wide-table-auto td {
	height: 28px;
}

.sheet-wide-table input,
.sheet-wide-table select,
.sheet-wide-table-auto input,
.sheet-wide-table-auto select {
	margin: 0;
}

.sheet-input-wide {
	min-width: 12em;
}

.sheet-wide-table td input[type=number],
.sheet-wide-table td input[type=text],
.sheet-wide-table-auto td input[type=number],
.sheet-wide-table-auto td input[type=text],
.sheet-input-full {
	width: 100%;
	border: 0;
	border-radius: 0;
}

.sheet-wide-table-auto td input {
	height: 28px;
	line-height: 28px;
}

.sheet-wide-table td input[type=number],
.sheet-wide-table-auto td input[type=number] {
	min-width: 2.2em;
	text-align: center;
}

.sheet-empty-cell {
	background-color: #ddd9c3;
}

.sheet-input-narrow {
	width: 5em;
	min-width: 5em;
	max-width: 5em;
}

.sheet-input-like-no-padding input.sheet-input-narrow{
	max-width: 7.5em;
}

.sheet-wide-table-auto td input.sheet-prominent-label,
.sheet-wide-table-auto td input.sheet-prominent-field {
	height: 56px;
}

td input[type=text].sheet-dice-field
{
	min-width: 12em;
	text-align: center;
}

td input[type=text].sheet-text-centred
{
	text-align: center;
}

td input.sheet-prominent-field {
	font-size: 20px;
	text-align: center;
}

.sheet-vertical-margin {
	margin-top: 10px;
	margin-bottom: 10px;
}

.sheet-vertical-margin-moderate {
	margin-top: 20px;
	margin-bottom: 20px;
}

.sheet-wide-table-auto td input.sheet-input-split {
	width: 40%;
	min-width: 1.1em;
}

td .sheet-input-spacer {
	min-width: 1.1em;
	text-align: center;
}


/* ************************************************************************************************************************************************ */
/* HP, Mana etc. */
.sheet-flex-section-centre {
	margin-left: -10px;
	margin-right: -10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.sheet-wide-table-auto td input.sheet-extra-prominent-field {
	font-size: 36px;
	height: 84px;
	text-align: center;
}

td.sheet-small-text {
	font-size: 0.7em;
	text-align: center;
	background-color: #f6f5ef;
}

th.sheet-small-text {
	font-size: 0.8em;
	font-weight: bold;
	text-align: center;
	background-color: #ddd9c3;
}

td.sheet-cell-narrow {
	max-width: 50px;
}

/* ************************************************************************************************************************************************ */
/** Gradient colours for physical and mental conditions */

tr td.sheet-physical-condition-0,
tr td.sheet-mental-condition-0 {
	background-color: white;
}

tr td.sheet-physical-condition-1 {
	background-color: #ffcccc;
}

tr td.sheet-physical-condition-2 {
	background-color: #ff9999;
}

tr td.sheet-physical-condition-3 {
	background-color: #ff6666;
}

tr td.sheet-physical-condition-4 {
	background-color: #ff3333;
}

tr td.sheet-physical-condition-5 {
	background-color: #cc0000;
}

tr td.sheet-physical-condition-6 {
	background-color: #800000;
}

tr td.sheet-mental-condition-1 {
	background-color: #cce0ff;
}

tr td.sheet-mental-condition-2 {
	background-color: #80b3ff;
}

tr td.sheet-mental-condition-3 {
	background-color: #4d94ff;
}

tr td.sheet-mental-condition-4 {
	background-color: #0066ff;
}

tr td.sheet-mental-condition-5 {
	background-color: #0047b3;
}

tr td.sheet-mental-condition-6 {
	background-color: #003380;
}

/* ************************************************************************************************************************************************ */
/* Skills tab
/* ************************************************************************************************************************************************ */

.sheet-top-margin {
	margin-top: 40px;
}

/* Designed to spill over on to the expand/collapse element below */
.sheet-table-header-collapse {
	height: 5px;
	line-height: 28px;
	margin-top: 20px;
	padding: 0;
}

.sheet-collapsible table {
	width: 100%;
	border: 2px solid #948a54;
}

th.sheet-skillhead {
	height: auto;
}

input.sheet-skillfield,
input.sheet-skillname-input {
	border: 0;
	border-radius: 0;
}

td.sheet-descstat-narrow input[type=number] {
	min-width: 1em;
	width: 100%;
}

td.sheet-descstat,
td.sheet-descstat-narrow,
input.sheet-skillname-input {
	background-color: #f6f5ef;
}

td.sheet-skillstat {
	background-color: #e0e0e0;
	color: gray;
}

input.sheet-skillname-input {
	width: 100%;
	min-width: 10em;
}

.charsheet select.sheet-skilldescshort {
	width: 4.2em;
	margin: 0;
	border: 0;
	border-radius: 0;
}


/* ************************************************************************************************************************************************ */
/* Abilities and notes tabs
/* ************************************************************************************************************************************************ */
.sheet-subsection-header,
.sheet-subsection-header-wide {
	width: 100%;
	height: 36px;
	line-height: 36px;
	color: dimgray;
	background-color: #ddd9c3;
	text-align: center;
	font-size: 16px;
}

.sheet-subsection-header-wide {
	min-width: 15em;
	border: 2px solid #c4c1b2;
	margin-bottom: 5px;
}

textarea.sheet-text-area-full,
textarea.sheet-text-area-large,
textarea.sheet-standalone-textarea {
	box-sizing: border-box;
	resize: none;
	width: 100%;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
}

textarea.sheet-text-area-full {
	margin-left: 0;
	margin-right: 0;
	border-radius: 0;
	height: 150px;
}

textarea.sheet-text-area-large {
	margin-top: 0;
	border: 0;
	border-radius: 0;
	height: 300px;
}

.sheet-repeating-section {
	margin-top: 10px;
	margin-bottom: 10px;
	background-color: #f6f5ef;
	border: 2px solid #948a54;
}

/* This could probably be added to h2 (and maybe h1?) with a bit of reorg */
.sheet-spacer-top-margin {
	margin-top: 20px;
}

h1.sheet-spacer-top-margin {
	margin-top: 40px;
}

.sheet-standalone-textarea {
	margin-top: 20px;
	border: 2px solid #948a54;
	border-radius: 0;
	height: 150px;
}

/* TODO: This is a hack - sorting out heading spacing properly and removing it from flex sections should allow this to be removed */
.sheet-remove-margin-bottom {
	margin-bottom: -10px;
}



/* ************************************************************************************************************************************************ */
/* Mysic tab
/* ************************************************************************************************************************************************ */

.sheet-spiritual-influence-wrapper {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
}

.sheet-spiritual-influence-image {
	background: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Demon%20Gate%20Scripted/Circle.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	height: 271px;
	width: 288px;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
}

.sheet-spiritual-influence-image input.sheet-spiritual-influence {
	width: 2.2em;
    font-size: 18px;
	text-align: center;
    border-radius: 20px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    border: 2px solid maroon;	
}