/* character sheet version 1.2 | decreasing width/min-width to 900 px*/
.sheet-wrapper {width:900px; min-width: 900px; 
  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/EtherealWinds-playtest/bg.jpg"); 
  background-repeat: no-repeat; background-size: contain; padding: 3em 1.5em 2em 1em; font-size:16px;}
.sheet-wrapper h2 {text-transform: uppercase; letter-spacing: -0.04em; text-decoration: underline;}
.sheet-wrapper input, .sheet-wrapper textarea {font-size:16px; background-color: rgba(255,255,255,0.9);}
.sheet-last {font-size: 1px;}
.sheet-last:after {content:""; display: table; height: 0; width:100%; clear:both;}
.sheet-wrapper div {display: block; font-family: sans-serif; font-size:14px;}
.sheet-wrapper h1 {line-height: 1; margin:0; margin-top:0.1em; letter-spacing: -0.04em;}
.sheet-wrapper p {margin:0; padding: 0.3em 0.8em 0.3em 0.7em; border-radius: 1em; border:0.15em solid black;
	background-color: #15567F; color:white;
	}
.sheet-wrapper p.sheet-simple {color:black; border:none; background:none;}
.sheet-subheading {text-transform: uppercase; font-size: 1.2em; line-height: 1; margin:0;}
.sheet-top {position: relative;}
.sheet-top div {box-sizing: border-box; margin:0; padding:0;}
.sheet-top p {margin:0.6em 0 0.3em 0;}
.sheet-top label {color:white; font-weight: bold; font-size:1em; text-transform: uppercase; text-shadow: 0 0 0.3em rgba(0,0,0,0.88);}
.sheet-top label.sheet-bigger {font-size:1.2em;}
.sheet-top-left { width:28.57%; float:left;}
.sheet-top-center img {width:90%; height:auto; padding-top: 0; padding-bottom: 2em; margin-left: 5%; }
.sheet-wound-track {width:20%; float:left; clear: both;text-align: right;}
.sheet-strain-track {width:100%;}
.sheet-selector {width:20%; float:left;}
.sheet-wrapper .sheet-dietypes {position:absolute; width:47%; left:27%; top:56em; border-radius: 2em; padding:1em 0.5em 1em 1em; border:outset 0.2em black; background-color: black;}
.sheet-dietypes h2 {font-size: 1.4em; text-decoration: none; color:white;}
.sheet-dietypes h2 label { font-size: 0.6em; color:white;}

.sheet-wrapper input[type=checkbox] {width:14%; height:1.6em; margin:0; padding:0; position: relative; top:0.3em;}
.sheet-wrapper input[type=radio] {width:16%; height: 1.6em; margin:0.2em 0 0.2em 0; padding:0; position: relative;}
.sheet-derived-stats input { padding:0.2em 0 0 0; width:1.8em !important; text-align: center; font-size: 3.2em; background:none; color:#2AB5B7; border:none; font-weight: bold;}
.sheet-effort-track input[type=checkbox] {width:16%;}
.sheet-assets input[type=text] {width:100%;}
.sheet-numbers input[type=number] { font-size: 3em; padding-left:0.4em; width:1.6em; border:solid black 0.1em; border-radius: 7em;}
.sheet-numbers input[type=radio] { width:100%; right:0.2em}
.sheet-exp input {width:3em;}
.sheet-stat-hex input {background: none; border:none !important; color:white; padding-left:0 !important; margin-left:0.6em; margin-top:0.2em;}
.sheet-selector input {font-size: 12px;}
.sheet-selector input.sheet-descriptor {width:12em; margin-top: 0.6em; background-color: rgba(21,86,127,0.16);}

.sheet-top-right textarea {width:100%; min-height: 3em; height:auto;}
.sheet-notes textarea {width:96.4%; min-height:7em; height:auto;}
.sheet-gear textarea {width: 95%; min-height: 12em; height: auto;}
.sheet-top-left textarea {width:100%; min-height: 7.2em;}
.sheet-derived-stats textarea {width:86%; margin-left: 7%; min-height: 8em;}
.sheet-tints textarea {width:100%; min-height: 12em;}

.sheet-wound-track div, .sheet-effort-track div, .sheet-strain-track div {margin-bottom:0.4em;}
.sheet-effort-track div {width:50%; float:left;}
.sheet-effort-track div input[type=radio] {width:32%; margin-right:0.3em;}
.sheet-effort-track div.sheet-single {width:100%;}
.sheet-effort-track div.sheet-single input[type=radio] {width:16%;}
.sheet-legend {margin-top: 1.6em; font-size: 0.8em; display: block; width:100%; text-align: left; clear: both;}
.sheet-top-center {width:42.86%; float:left; text-align: center;}
.sheet-top-center h1 {text-transform: uppercase;  font-size:3em; }
.sheet-top-right {width:28.57%; float:left;}
.sheet-top:after {content:""; height:0; display: table; clear: both;}
.sheet-inline {display: inline-block;}
.sheet-numbers {width:60%; float: left; position: relative;}
.sheet-numbers h3 {text-transform: uppercase; letter-spacing: -0.024em; margin:0.2em 0 0.1em 0;}
.sheet-block {text-align: center; width:16%; float:left; position: relative; z-index: 2;}
/* version 1.2 alpha | moving things around slightly to fit the decreased width */
.sheet-block1 {transform:rotateZ(-30deg); margin-left:23%;}
.sheet-block2 {transform:rotateZ(30deg); float:right; margin-right:23%; margin-bottom:4em;}
.sheet-block6 {transform: rotateZ(-90deg); clear: both; margin-left:5%; top:-1em;}
.sheet-block3 {transform:rotateZ(90deg); float:right; margin-right:5%; margin-bottom:4em; top:-1em;}
.sheet-block5 {transform: rotateZ(30deg); clear: both; float:left; margin-left:23%; top:-2em;}
.sheet-block4 {transform: rotateZ(-30deg); float:right; margin-right:23%; top:-2em;}
.sheet-hexes {position: absolute; width:100%; height:100%; z-index: 1;}
.sheet-stat-hex {position:absolute;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/EtherealWinds-playtest/hex-orange.png"); min-width:82px; min-height:72px; background-repeat: no-repeat; background-size: contain;}
.sheet-bluehex .sheet-stat-hex {background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/EtherealWinds-playtest/hex-blue.png");}
/* version 1.2 alpha | moving things around slightly to fit with the decreased width */
.sheet-hex1 {left:42.5%; top:20%;}
.sheet-hex6 {left:27%; top:30%;}
.sheet-hex2 {right:25%; top:30%;}
.sheet-hex5 {left:27%; bottom:35%;}
.sheet-hex3 {right:25%; bottom:35%;}
.sheet-hex4 {left:42.5%; bottom:25%;}
.sheet-exp {margin-top: 2em; float:left; width:20%;}
.sheet-exp p {clear: both;}
.sheet-effort-track {float:left; width:20%; text-align: left;}
.sheet-strain-track span {color:crimson; text-shadow: 0 0 0.2em black; font-weight: bold;font-size: 1.2em; position: relative; top:0.07em;}
.sheet-derived-stats {float:left; width:60%; position:relative;}
.sheet-derived-stats:after {content:""; display: table; height: 0; width:100%; clear:both;}
.sheet-derived-stats img {width:100%; height:auto;}
.sheet-derived-stats h2, .sheet-tints h2 {
	clear: both; padding-left: 7%; padding-top: 1.2em;
}
.sheet-health, .sheet-mana {width:24%; float:left; position: relative; text-align: center; height:auto; box-sizing: border-box;}
.sheet-health {margin-left: 16%;}
.sheet-mana {float:right; margin-right:16%;}
.sheet-health div, .sheet-mana div {position:absolute; top:12%; left:28%;}
.sheet-tints {width:20%; float:left;}
.sheet-gear, .sheet-notes {clear: both; float: left; width:70%;}
.sheet-gear div {width:30%; float:left;}
.sheet-gear div:last-child {width:70%;}
.sheet-gear h3 {margin:0;}
.sheet-assets {width:30%; float:right;}
.sheet-assets fieldset {border:none; padding:0;}

.sheet-selector select {width:7em;}
.sheet-combo {display:block;}

/* version 1.2 alpha | correcting the position of the hex-switching checkbox and label */
.sheet-wrapper .sheet-hexes input.sheet-switch {position: absolute; top:-4%; left:80%; text-align: center; z-index: 5;}
.sheet-hexes label { font-size: 1em; position:absolute; top:-4.5%; left:91%; text-transform: uppercase; font-weight: bold; color:white;
	background-color: #15567F; border-radius: 5em; padding:0.4em 0.8em; width:11em;
}

.sheet-orangehex {display: block;}
.sheet-bluehex {display: none;}
.sheet-switch:not(:checked) ~ .sheet-orangehex, .sheet-switch:checked ~ .sheet-bluehex { display: block; }
.sheet-switch:not(:checked) ~ .sheet-bluehex, .sheet-switch:checked ~ .sheet-orangehex { display: none; }

.sheet-dietypes div {width:auto; float: left;}
.sheet-wrapper .sheet-dietypes input[type=radio] {width:2em;}
.sheet-dietypes label {width:2.2em; display:inline; padding-left:0.2em;}

.sheet-wrapper label {display: inline;}
.sheet-targetnumber input {width:2.4em; font-size:20px;}

.sheet-wrapper .sheet-conditions {position: absolute; bottom:1.6em; right:5.6em; font-size: 64%; border-top: 0.16em solid black;}
.sheet-wrapper .sheet-conditions label {font-size: 1.8em; position: relative; top: 0.2em;}

/* character sheet version 1.2 | styling the new sections: bonus field, custom rolls, dropdown text color changing */
.sheet-customrolls {width:100%; clear: both;}
.charsheet .sheet-wrapper .sheet-customrolls p {color:#15567F; background-color: rgba(255,255,255,0); border: solid 0.2em #15567F; border-radius: 0.2em; margin-top:0.65em; margin-bottom: 0.35em;}
.sheet-bonustoroll input {font-size: 20px;}
span.sheet-highlighted {
  color:rgba(255,255,255,0.5); font-size: 80px; line-height:0.6em;
  user-select: none;
  display: block; 
  position: absolute; font-weight: 100; z-index: 6; 
}
/* the top selector */
.sheet-colorswitch1[value="Physical"] ~ .sheet-selectedcolor1 {color: #8F5A3D; border:solid 0.2em #8F5A3D;}
.sheet-colorswitch1[value="Mental"] ~ .sheet-selectedcolor1 {color: #288f8b; border: solid 0.2em #288f8b;}
.sheet-colorswitch1[value="Ethereal"] ~ .sheet-selectedcolor1 {color: #662f90; border: solid 0.2em #662f90;}
.sheet-colorswitch1[value="Physical"] ~ .sheet-descriptor {background-color: rgba(143,90,61,0.8); color:white;}
.sheet-colorswitch1[value="Mental"] ~ .sheet-descriptor {background-color: rgba(40,143,139,0.8); color:white;}
.sheet-colorswitch1[value="Ethereal"] ~ .sheet-descriptor {background-color: rgba(102,47,144,0.8); color:white;}
.sheet-colorswitch1[value="Physical"] ~ span.sheet-highlighted.sheet-hl6 {color: #8F5A3D;}
.sheet-colorswitch1[value="Physical"] ~ span.sheet-highlighted.sheet-hl1 {color: #8F5A3D;}
.sheet-colorswitch1[value="Mental"] ~ span.sheet-highlighted.sheet-hl6 {color: #288f8b;}
.sheet-colorswitch1[value="Mental"] ~ span.sheet-highlighted.sheet-hl1 {color: #288f8b;}
.sheet-colorswitch1[value="Ethereal"] ~ span.sheet-highlighted.sheet-hl6 {color: #662f90;}
.sheet-colorswitch1[value="Ethereal"] ~ span.sheet-highlighted.sheet-hl1 {color: #662f90;}

/* the middle selector */
.sheet-colorswitch2[value="Physical"] ~ .sheet-selectedcolor2 {color: #8F5A3D; border: solid 0.2em #8F5A3D;}
.sheet-colorswitch2[value="Mental"] ~ .sheet-selectedcolor2 {color: #288f8b; border: solid 0.2em #288f8b;}
.sheet-colorswitch2[value="Ethereal"] ~ .sheet-selectedcolor2 {color: #662f90; border: solid 0.2em ;}
.sheet-colorswitch2[value="Physical"] ~ .sheet-descriptor {background-color: rgba(143,90,61,0.8); color:white;}
.sheet-colorswitch2[value="Mental"] ~ .sheet-descriptor {background-color: rgba(40,143,139,0.8); color:white;}
.sheet-colorswitch2[value="Ethereal"] ~ .sheet-descriptor {background-color: rgba(102,47,144,0.8); color:white;}
.sheet-colorswitch2[value="Physical"] ~ span.sheet-highlighted.sheet-hl2 {color: #8F5A3D;}
.sheet-colorswitch2[value="Physical"] ~ span.sheet-highlighted.sheet-hl3 {color: #8F5A3D;}
.sheet-colorswitch2[value="Mental"] ~ span.sheet-highlighted.sheet-hl2 {color: #288f8b;}
.sheet-colorswitch2[value="Mental"] ~ span.sheet-highlighted.sheet-hl3 {color: #288f8b;}
.sheet-colorswitch2[value="Ethereal"] ~ span.sheet-highlighted.sheet-hl2 {color: #662f90;}
.sheet-colorswitch2[value="Ethereal"] ~ span.sheet-highlighted.sheet-hl3 {color: #662f90;}

/* the bottom selector */
.sheet-colorswitch3[value="Physical"] ~ .sheet-selectedcolor3 {color: #8F5A3D; border: solid 0.2em #8F5A3D;}
.sheet-colorswitch3[value="Mental"] ~ .sheet-selectedcolor3 {color: #288f8b; border: solid 0.2em #288f8b;}
.sheet-colorswitch3[value="Ethereal"] ~ .sheet-selectedcolor3 {color: #662f90; border: solid 0.2em #662f90;}
.sheet-colorswitch3[value="Physical"] ~ .sheet-descriptor {background-color: rgba(143,90,61,0.8); color:white;}
.sheet-colorswitch3[value="Mental"] ~ .sheet-descriptor {background-color: rgba(40,143,139,0.8); color:white;}
.sheet-colorswitch3[value="Ethereal"] ~ .sheet-descriptor {background-color: rgba(102,47,144,0.8); color:white;}
.sheet-colorswitch3[value="Physical"] ~ span.sheet-highlighted.sheet-hl4 {color: #8F5A3D;}
.sheet-colorswitch3[value="Physical"] ~ span.sheet-highlighted.sheet-hl5 {color: #8F5A3D;}
.sheet-colorswitch3[value="Mental"] ~ span.sheet-highlighted.sheet-hl4 {color: #288f8b;}
.sheet-colorswitch3[value="Mental"] ~ span.sheet-highlighted.sheet-hl5 {color: #288f8b;}
.sheet-colorswitch3[value="Ethereal"] ~ span.sheet-highlighted.sheet-hl4 {color: #662f90;}
.sheet-colorswitch3[value="Ethereal"] ~ span.sheet-highlighted.sheet-hl5 {color: #662f90;}
.sheet-hl1 {top:477px; left:453px;}
.sheet-hl2 {top:528px; left:537px;}
.sheet-hl3 {top:629px; left:537px;}
.sheet-hl4 {top:680px; left:453px;}
.sheet-hl5 {top:630px; left:370px;}
.sheet-hl6 {top:528px; left:369px;}

/* Custom Template from Jakob */
/* 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: rgba(112,32,130,1);
  --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: #15567F; /*color changed by OoznynKoo*/
  --header-text-color: #FFF; /*color changed by OoznynKoo*/
}

/* 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: center;
}