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



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

h2 {
	font-size: 1.0em;
	text-align: center;
}

label {
	display: inline-block;
	width: 31%;
	font-size: 1.0em;
}

input {
	display: inline-block;
	width: 170px;
}

img {
	max-height: 100px;
}

textarea {
	resize: vertical;
}

select {
	margin-bottom: 0px;
	width: 170px;
}

th {
	/* text-align: center; */
	padding-bottom: 5px;
	padding-top: 5px;
	/* background-color: #a6b5c3; */
}

table {
	margin-right: 0px;
}

div {
	margin-right: 0px;
}

hr {
    border-top-color: #a6b5c3;
}


/* Targetted styling that only effects elements with these classes */
input.sheet-short {
	width: 45px;
	text-align: center;
}

input.sheet-transparent {
	width: 45px;
    background-color: var(--main-bg-color);
    border: 0px;
    border-bottom: 1px solid #a6b5c3;
    border-radius: 0px;
    text-align: center;
}

div.sheet-characterSheet {
	background-color: var(--main-bg-color);
}

select.sheet-dtype {
    vertical-align: top;
    width: 60px;
}
span.sheet-dee {
	font-size: 1.4em;
	font-weight: bold;
	left: -36%;
	padding-right: 4px;
	position: relative;
	top: 3px;
}
label.sheet-header {
	/* text-align: center; */
	padding-bottom: 5px;
	padding-top: 5px;
	background-color: var(--header-bg-color);
}

th.sheet-header {
	background-color: var(--header-bg-color);
}

/* Targetted styling that only effects elements contained within the stated class */

.charsheet {
	/* background-color: #cad7e2; */
	/* background-color: var(--main-bg-color); */
	width: 1000px;
} 

.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: 45px;
}

.charsheet label {
	margin-bottom: 0px;
}

/*Configure the tab buttons*/
.sheet-character,
.sheet-equipment,
.sheet-magic,
.sheet-settings, {
	display: none;
}

/* show the selected tab */
.sheet-tabstoggle[value="character"] ~ div.sheet-character,
.sheet-tabstoggle[value="equipment"] ~ div.sheet-equipment,
.sheet-tabstoggle[value="magic"] ~ div.sheet-magic,
.sheet-tabstoggle[value="settings"] ~ div.sheet-settings {
	display: block;
}

/* show buttons for the spell lists*/
input.sheet-toggle-show-1:not(:checked) ~ div.sheet-body-1,
input.sheet-toggle-show-2:not(:checked) ~ div.sheet-body-2,
input.sheet-toggle-show-3:not(:checked) ~ div.sheet-body-3,
input.sheet-toggle-show-4:not(:checked) ~ div.sheet-body-4,
input.sheet-toggle-show-5:not(:checked) ~ div.sheet-body-5,
input.sheet-toggle-show-6:not(:checked) ~ div.sheet-body-6,
input.sheet-toggle-show-7:not(:checked) ~ div.sheet-body-7,
input.sheet-toggle-show-8:not(:checked) ~ div.sheet-body-8,
input.sheet-toggle-show-9:not(:checked) ~ div.sheet-body-9,
input.sheet-toggle-show-10:not(:checked) ~ div.sheet-body-10,
input.sheet-toggle-hide:checked ~ div.sheet-body {
    display: none;
}

/* ********************** COLORS ****************************** */

.charsheet {
    --main-bg-color: #d4dce4;
    --header-bg-color: #989fb3;
    --input-bg-color: #fff;
}
.sheet-mainBgColor[value="default"]     ~ .sheet-characterSheet { --main-bg-color: #d4dce4; --header-bg-color: #989fb3; }
.sheet-mainBgColor[value="white"]       ~ .sheet-characterSheet { --main-bg-color: #fff;    --header-bg-color: #cccccc; }
.sheet-mainBgColor[Value="lilac"]       ~ .sheet-characterSheet { --main-bg-color: #ded6e0; --header-bg-color: #ac98b1; }
.sheet-mainBgColor[value="grayscale"]   ~ .sheet-characterSheet { --main-bg-color: #f3f3f3; --header-bg-color: #bbb; }
.sheet-mainBgColor[value="book"]        ~ .sheet-characterSheet { --main-bg-color: #f3efe6; --header-bg-color: #c3baa6; }
.sheet-mainBgColor[value="summer"]      ~ .sheet-characterSheet { --main-bg-color: #fef7ed; --header-bg-color: #e6cfad; }
.sheet-mainBgColor[value="fall"]        ~ .sheet-characterSheet { --main-bg-color: #f5dbcc; --header-bg-color: #e0a696; }
.sheet-mainBgColor[value="winter"]      ~ .sheet-characterSheet { --main-bg-color: #dcefef; --header-bg-color: #9cccd6; }
.sheet-mainBgColor[value="spring"]      ~ .sheet-characterSheet { --main-bg-color: #e6f1e2; --header-bg-color: #bdcc9e; }




/* ***************** Roll template ******************** */

/* Smaller margins - remove these if you want the huge default left margin */
.sheet-rolltemplate-custom {
  margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-custom {
  margin-left: -7px;
}

.sheet-rolltemplate-custom .sheet-container {
  border: 1px solid;
  /* by default, the border is the same color as the header. You can change this here, e.g. to black */
  border-color: var(--header-bg-color);
}

/* Header formatting - title and subtitle */
.sheet-rolltemplate-custom .sheet-header {
  background-color: var(--header-bg-color);
  /* change text-align to center to center the header text */
  text-align: left;
  color: var(--header-text-color);
  padding: 5px;
}
.sheet-rolltemplate-custom .sheet-title {
  font-size:1.1em;
}
.sheet-rolltemplate-custom .sheet-subtitle {
  font-size:.9em;
}

/* example colors */
.sheet-rolltemplate-custom .sheet-container {
  /* this is the default color */
  --header-bg-color: #446788;
  --header-text-color: #FFF;
}
.sheet-rolltemplate-custom .sheet-container.sheet-color-red {
  --header-bg-color: #F00;
}
.sheet-rolltemplate-custom .sheet-container.sheet-color-green {
  --header-bg-color: #0F0;
  --header-text-color: #000;
}

/* Allprops part */
.sheet-rolltemplate-custom .sheet-content {
  display: grid;
  background: #FFF;
  /* Header formatting - modify the column layout below */
  grid-template-columns: auto auto;
  /* Line height to match default roll template */
  line-height:1.4em;
}
.sheet-rolltemplate-custom .sheet-content > div {
  padding: 5px;
}

/* Left column */
.sheet-rolltemplate-custom .sheet-content .sheet-key {
  font-weight: bold;
  padding-right: 10px;
  text-align: right;
}

/* Empty rule, use this if you want to change the right column 
.sheet-rolltemplate-custom .sheet-value {
}
*/

/* Make even-numbered rows grey */
.sheet-rolltemplate-custom .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom .sheet-content :nth-child(4n) {
  background:#EEE;
}

/* Description field */
.sheet-rolltemplate-custom .sheet-desc {
  grid-column: span 2;
  padding: 5px;
  text-align: left;
}