roll20-character-sheets/Emberwind/emberwind.css

/*----------------- Font ------------------*/

@font-face {
    font-family: Fungfont;
    src: url(https://github.com/lexibrown/roll20-character-sheets/raw/master/Emberwind/fonts/Kungfont-Regular.otf) format('opentype');
}

@font-face {
    font-family: ProximaNova;
    src: url(https://github.com/lexibrown/roll20-character-sheets/raw/master/Emberwind/fonts/ProximaNova-Regular.ttf) format('opentype');
}

.sheet-kungfont {
    font-family: Fungfont;
    font-size: 32px;
    border: 2px solid transparent;
}

* {
    font-family: ProximaNova;
}

/*----------------- Container ------------------*/

.sheet-container {
    width: 1100px;
    height: 900px;
}

/*----------------- Sheet Settings ------------------*/
.sheet-tab-button + span,
.sheet-tab-button + span + span {
    font-weight: bold;
    font-size: 20px;
    margin-left: -20px;
}

input.sheet-tab-button{
    height: 21px;
    opacity: 0;
    z-index: 2;
}

.sheet-tab-button:hover + span,
.sheet-tab-button:hover + span + span,
.sheet-tab-button:hover * {
    color: blue;
}

.sheet-pictos {
    font-family:pictos;
}

input.sheet-nav:checked + span,
input.sheet-nav:not(:checked) + span + span {
    display: none;
}

input.sheet-nav:checked ~ .sheet-block-container.sheet-block-settings{
    display: block;
}

.sheet-block-settings {
    border: 2px dashed dimgrey;
    width: fit-content;
}

.sheet-settings-row,
.sheet-settings-col {
    padding: 5px;
}

/*----------------- PC / NPC ------------------*/

.sheet-block-container {
    display: none;
}

input.sheet-page-control[value="pc"] ~ .sheet-block-container.sheet-block-pc,
input.sheet-page-control[value="npc"] ~ .sheet-block-container.sheet-block-npc {
    padding-top: 10px;
    display: block;
}

/*----------------- Tabs ------------------*/

div.sheet-tab-content {
    display: none;
}

input.sheet-tab1:checked ~ div.sheet-tab1,
input.sheet-tab2:checked ~ div.sheet-tab2,
input.sheet-tab3:checked ~ div.sheet-tab3,
input.sheet-tab4:checked ~ div.sheet-tab4 {
    display: flex;
}

input.sheet-tab {
    width: 150px;
    height: 25px;
    position: relative;
    left: 6px;
    top: 2px;
    margin: -1.5px;
    cursor: pointer;
    z-index: 1;
    opacity: 0;
}

input.sheet-tab + span::before {
    content: attr(title);
    border: 2px solid white;
    margin: -5px 0 0 0;
    text-align: center;
    display: inline-block;
    background: #bababa;
    width: 150px;
    height: 23px;
    font-size: 16px;
    position: absolute;
    left: 30px;
    color: white;
}

input.sheet-tab:checked + span::before {
    background: dimgrey;
    color: white;
    font-weight: bold;
    border-style: solid;
}

input.sheet-tab2 + span::before {
    left: 181px;
}

input.sheet-tab3 + span::before {
    left: 331px;
}

input.sheet-tab4 + span::before {
    left: 481px;
}

div.sheet-tab-content {
    padding: 5px 0 5px 0;
}

.sheet-separator {
    width: auto;
    background-color: #bababa;
    height: 3px;
}

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

.sheet-main {
    display: grid;
    grid-gap: 4px;
    grid-template-columns: 30% 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "main-stats main-actions";
}

.sheet-main-stats {
    grid-area: main-stats;
    display: grid;
    width: fit-content;
    height: fit-content;
    padding-right: 5px;
    grid-row-gap: 5px;
    grid-column-gap: 5px;
    grid-template-columns: auto;
    grid-auto-rows: fit-content(100%);
    grid-template-areas: "image" "name" "info" "aspects" "attribute1" "header1" "stats1" "common1" "attribute2" "header2" "stats2" "common2" "header3" "common3" "header4" "common4";
}

.sheet-main-inventory {
    width: fit-content;
    height: fit-content;
    grid-area: main-stats;
}

.sheet-main-actions {
    grid-area: main-actions;
}

.sheet-skills-grid {
    display: grid;
    width: auto;
    height: fit-content;
    grid-template-columns: 47% 1fr 47%;
    grid-auto-rows: fit-content(100%);
    grid-template-areas: "skill-left skill-label skill-right"
}

.sheet-actions-grid {
    display: grid;
    width: auto;
    height: fit-content;
    padding-bottom: 3px;
    grid-column-gap: 3px;
    grid-template-columns: 1fr 1.5fr 1fr 1fr 1fr 40% 1.5fr;
    grid-template-areas: "action-button action-name action-type action-target action-range action-effect action-speed";
}

.sheet-actions-info-grid {
    display: grid;
    width: auto;
    height: fit-content;
    padding-bottom: 3px;
    grid-column-gap: 3px;
    grid-template-columns: 1fr 1.5fr 1fr 1fr 1fr 40% 1fr;
    grid-auto-rows: fit-content(100%);
    grid-template-areas: "action-button action-name action-name action-name action-name action-effect action-effect";
}

.sheet-action-detail-grid {
    display: grid;
    width: auto;
    height: auto;
    grid-template-columns: 1fr;
    grid-auto-rows: fit-content(100%);
    grid-template-areas: "top-detail" "middle-detail" "bottom-detail";
}

.sheet-quick-guide-grid {
    display: grid;
    width: fit-content;
    height: fit-content;
    padding-bottom: 3px;
    grid-column-gap: 3px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: fit-content(100%);
    grid-template-areas: "guide-left guide-middle guide-right";
}

.sheet-npc-actions-grid {
    display: grid;
    height: fit-content;
    padding-bottom: 3px;
    grid-column-gap: 3px;
    grid-template-columns: 1fr 1.5fr 1fr 1fr 50%;
    grid-template-areas: "action-button action-name action-type action-range action-effect";
}

.sheet-npc-actions-info-grid {
    display: grid;
    width: auto;
    height: fit-content;
    padding-bottom: 3px;
    grid-column-gap: 3px;
    grid-template-columns: 1fr 1.5fr 1fr 1fr 50%;
    grid-auto-rows: fit-content(100%);
    grid-template-areas: "action-button action-name action-name action-name action-effect";
}

/*----------------- Quick Guide ------------------*/

.sheet-guide-left {
    grid-area: guide-left;
    padding: 7px;
}

.sheet-guide-middle {
    grid-area: guide-middle;
    padding: 7px;
}

.sheet-guide-right {
    grid-area: guide-right;
    padding: 7px;
    background-color: lightgrey;
    height: fit-content;
}

.sheet-guide-header {
    height: 50px;
    width: fit-content;
    padding: 0 50px 0 50px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: white;
    background-position-y: 2px;
    background-position-x: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/guide.png");
}

.sheet-guide-header-big {
    font-weight: bold;
    font-size: 1.6em;
}

.sheet-guide-header-small {
    font-weight: bold;
    font-size: 1.25em;
}

.sheet-guide-p {
    background: -webkit-linear-gradient(130deg, #FEB8AE 65%, #B8DCF9 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*----------------- Conditions ------------------*/

.sheet-condition-box {
    display: grid;
    height: fit-content;
    border-top: 1px solid black;
    padding: 3px 5px 3px 5px;
    grid-column-gap: 10px;
    grid-template-columns: 7%;
    grid-template-areas:
            "condition-selector condition-name"
            "condition-selector condition-description";
}

.sheet-condition-selector,
.sheet-condition-selector-max {
    grid-area: condition-selector;
    display: flex;
    justify-content: center;
    padding-top: 3px;
}

.sheet-condition-selector-max {
    flex-flow: row wrap;
}

.sheet-condition-name {
    grid-area: condition-name;
}

.sheet-condition-description {
    grid-area: condition-description;
}

/*----------------- Sections ------------------*/

.sheet-section {

}

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

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

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

/*----------------- Image section ------------------*/
.sheet-image {
    grid-area: image;
    width: 325px;
}

/*----------------- Button section ------------------*/

.sheet-action-button {
    grid-area: action-button;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*----------------- Name section ------------------*/

.sheet-name {
    grid-area: name;
    display: flex;
    align-items: center;
}

.sheet-name span {
    float: left;
    width: fit-content;
    font-weight: bold;
    position: center;
    padding: 3px;
}

.sheet-name input {
    width: 85%;
    padding: 3px;
}

/*----------------- Info section ------------------*/
.sheet-info {
    grid-area: info;
    height: auto;
    border: 3px solid #EE5F57;
}

.sheet-info-hp-box {
    width: 45%;
    padding-top: 5px;
    padding-bottom: 4px;
    border-right: 3px solid #EE5F57;
    border-bottom: 3px solid #EE5F57;
}

.sheet-info-hp-text {
    background-color: #EE5F57;
    color: white;
    font-weight: bold;
    padding: 10px 5px 10px 5px;
}

input.sheet-medium {
    width: 30%;
    padding: 2px;
}

.sheet-info-tier-box {
    float: right;
    padding-right: 5px;
}

.sheet-info-class-box {
    align-content: center;
    padding-top: 5px;
    padding-right: 5px;
    float: right;
}

.sheet-info-subclass-box {
    width: 65%;
    padding-left: 5px;
}

.sheet-info-custom-class {
    padding: 2px 0 2px 5px;
    display: none;
}

.sheet-class-control[value="custom"] ~ .sheet-info-custom-class {
    display: block;
}

/*----------------- Aspects section ------------------*/
.sheet-aspects {
    grid-area: aspects;
    border-bottom: 3px solid dimgrey;
    display: none;
}

.sheet-aspects-col {
    width: 30%;
    padding-left: 3px;
    padding-right: 3px;
}

/*----------------- Attribute section ------------------*/

.sheet-attribute1 {
    grid-area: attribute1;
    display: none;
}

.sheet-attribute2 {
    grid-area: attribute2;
    display: none;
}

.sheet-attribute-col {
    display: inline-flex;
    width: 49%;
    font-weight: bold;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 3px;
}

.sheet-character-version-control[value="aspect"] ~ .sheet-aspects,
.sheet-character-version-control[value="attribute"] ~ .sheet-attribute1,
.sheet-character-version-control[value="attribute"] ~ .sheet-attribute2 {
    display: block;
}


/*----------------- Headers ------------------*/
.sheet-header1 {
    grid-area: header1;
    background-color: dimgrey;
    color: white;
    text-align: center;
    font-weight: bold;
    padding-top: 2px;
    padding-bottom: 2px;
}

.sheet-header2 {
    grid-area: header2;
    background-color: dimgrey;
    color: white;
    text-align: center;
    font-weight: bold;
    padding-top: 2px;
    padding-bottom: 2px;
}

.sheet-header3 {
    grid-area: header3;
    background-color: dimgrey;
    color: white;
    text-align: center;
    font-weight: bold;
    padding-top: 2px;
    padding-bottom: 2px;
}

.sheet-header4 {
    grid-area: header4;
    background-color: dimgrey;
    color: white;
    text-align: center;
    font-weight: bold;
    padding-top: 2px;
    padding-bottom: 2px;
}

/*----------------- Stats ------------------*/

.sheet-stats1 {
    grid-area: stats1;
}

.sheet-stats2 {
    grid-area: stats2;
}

.sheet-stats-col {
    display: inline-flex;
    width: 49%;
    font-weight: bold;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 3px;
}

/*----------------- Common ------------------*/

.sheet-common1 {
    grid-area: common1;
}

.sheet-common2 {
    grid-area: common2;
}

.sheet-skill-left {
    grid-area: skill-left;
}

.sheet-skill-label {
    grid-area: skill-label;
    background-color: dimgrey;
    color: white;
    writing-mode: vertical-rl;
    text-align: center;
    font-weight: bold;
    padding-top: 3px;
    padding-bottom: 3px;
}

.sheet-skill-right {
    grid-area: skill-right;
}

.sheet-skill {
    text-align: center;
    font-weight: bold;
    font-size: 0.75em;
    padding-top: 3px;
    padding-bottom: 3px;
    border: 3px solid dimgrey;
}

.sheet-common3 {
    grid-area: common3;
}

.sheet-common4 {
    grid-area: common4;
}

/*----------------- Actions ------------------*/

.sheet-tide-action-damage-indicator[value="1"] ~ .sheet-tide-action-damage-toughness,
.sheet-tide-action-damage-indicator[value="2"] ~ .sheet-tide-action-damage-resistance,
.sheet-tide-action-damage-indicator[value="3"] ~ .sheet-tide-action-damage-piercing,
.sheet-action-damage-indicator[value="1"] ~ .sheet-action-damage-toughness,
.sheet-action-damage-indicator[value="2"] ~ .sheet-action-damage-resistance,
.sheet-action-damage-indicator[value="3"] ~ .sheet-action-damage-piercing,
.sheet-melee-damage-indicator[value="1"] ~ .sheet-melee-damage-toughness,
.sheet-melee-damage-indicator[value="2"] ~ .sheet-melee-damage-resistance,
.sheet-ranged-damage-indicator[value="1"] ~ .sheet-ranged-damage-toughness,
.sheet-ranged-damage-indicator[value="2"] ~ .sheet-ranged-damage-resistance {
    opacity: 1;
}

.sheet-tide-action-damage-resistance,
.sheet-tide-action-damage-piercing,
.sheet-action-damage-resistance,
.sheet-action-damage-piercing,
.sheet-melee-damage-resistance,
.sheet-ranged-damage-resistance {
    margin-left: -23px;
}

.sheet-tide-action-damage-resistance,
.sheet-tide-action-damage-toughness,
.sheet-tide-action-damage-piercing,
.sheet-action-damage-resistance,
.sheet-action-damage-toughness,
.sheet-action-damage-piercing,
.sheet-melee-damage-resistance,
.sheet-melee-damage-toughness,
.sheet-ranged-damage-resistance,
.sheet-ranged-damage-toughness {
    opacity: 0;
}

.sheet-description-control[value="Amplify"] ~ .sheet-action-amp-effect,
.sheet-description-control[value="Trigger"] ~ .sheet-action-trig-effect,
.sheet-description-control[value="Sustain"] ~ .sheet-action-sust-effect {
    display: block;
}

.sheet-action-amp-effect,
.sheet-action-trig-effect,
.sheet-action-sust-effect {
    display: none;
}

.sheet-action-amp-effect,
.sheet-action-trig-effect,
.sheet-action-sust-effect,
.sheet-action-description {
    padding: 2px 5px 0 5px;
}

.sheet-indicator,
.sheet-rolltemplate-action .sheet-indicator {
    padding: 1px;
    font-size: 0.75em;
    font-weight: bold;
    font-style: italic;
}

.sheet-action-name {
    grid-area: action-name;
    font-weight: bold;
}

.sheet-action-type {
    grid-area: action-type;
}

.sheet-action-target {
    grid-area: action-target;
}

.sheet-action-range {
    grid-area: action-range;
}

.sheet-action-effect {
    grid-area: action-effect;
}

.sheet-action-speed {
    grid-area: action-speed;
}

.sheet-action-centered {
    background-color: lightgrey;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px;
}

.sheet-action-leftCentered {
    background-color: lightgrey;
    display: flex;
    align-items: center;
    padding: 3px;
}

.sheet-action-text {
    background-color: lightgrey;
    text-align: center;
    padding: 3px;
}

.sheet-action-tide-centered {
    background-color: #FEE9D4;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px;
}

.sheet-action-tide-leftCentered {
    background-color: #FEE9D4;
    display: flex;
    align-items: center;
    padding: 3px;
}

.sheet-action-tide-text {
    background-color: #FEE9D4;
    text-align: center;
    padding: 3px;
}

.sheet-action-header {
    width: auto;
    height: auto;
    background-color: dimgrey;
    color: white;
    font-weight: bold;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 3px;
}

.sheet-action-header-left {
    width: auto;
    height: auto;
    background-color: dimgrey;
    color: white;
    font-weight: bold;
    text-align: left;
    padding-top: 3px;
    padding-left: 5px;
}

.sheet-action-info-title {
    font-weight: bold;
    display: flex;
    align-items: center;
}

.sheet-action-info {
    font-size: 0.8em;
    display: flex;
    align-items: center;
}

input.sheet-roll-control[value="0"] ~ .sheet-action-damage,
input.sheet-roll-control[value="2"] ~ .sheet-action-damage,
input.sheet-roll-control[value="3"] ~ .sheet-action-healing,
input.sheet-roll-control[value="4"] ~ .sheet-action-trigger {
    display: block;
}

.sheet-action-damage {
    display: none;
}

.sheet-action-healing {
    display: none;
}

.sheet-action-trigger {
    display: none;
}

input.sheet-action-description-indicator[value="3"] ~ .sheet-action-healing-description,
input.sheet-action-description-indicator[value="0"] ~ .sheet-action-damage-description,
input.sheet-action-description-indicator[value="2"] ~ .sheet-action-auto-hit-description {
    display: block;
}

.sheet-action-damage-description {
    display: none;
}

.sheet-action-auto-hit-description {
    display: none;
}

.sheet-action-healing-description {
    display: none;
}

.sheet-action-field {
    display: none;
}

.sheet-action-field-indicator[value="show"] ~ .sheet-action-field {
    display: block;
}

/*----------------- Character Columns ------------------*/

.sheet-stats {
    top: 45px;
    width: 33%;
    height: auto;
    position: absolute;
}

.sheet-skills {
    top: 45px;
    width: 66%;
    height: auto;
    position: absolute;
}

/*----------------- Colours ------------------*/

.sheet-red {
    background-color: #FEB8AE;
}

.sheet-blue {
    background-color: #B8DCF9;
}

.sheet-green {
    background-color: #BAE0CB;
}

.sheet-yellow {
    background-color: #FDD5B0;
}

.sheet-red .sheet-blue .sheet-green .sheet-yellow {
    text-align: center;
    text-decoration-style: double;
}

.sheet-lightestgrey {
    background-color: #ededed;
}

.sheet-lightgrey {
    background-color: #E7E8EA;
}

.sheet-dimgrey {
    background-color: dimgrey;
}

.sheet-purple-text {
    color: #845a91;
}

.sheet-purple {
    background-color: #E5DCED;
}

.sheet-red-text {
    color: indianred;
}

/*----------------- Selectors ------------------*/

select.sheet-selector {
    vertical-align: top;
    width: 100%;
}

select.sheet-selector-fit {
    width: auto;
}

/*----------------- Inputs ------------------*/

input.sheet-x-small {
    width: 8%;
    margin: 4px;
}

input.sheet-small {
    width: 20%;
}

input[type=number].sheet-medium {
    width: 50%;
}

input.sheet-cap {
    width: 60%;
}

/*----------------- CAP Check ------------------*/

.sheet-critical {
    border: 5px solid #FEB8AE;
}

.sheet-accuracy {
    border: 5px solid #BAE0CB;
}

.sheet-penetration {
    border: 5px solid;
    border-image: linear-gradient(to bottom, #B8DCF9 50%, #FEB8AE 50%, #FEB8AE 50%) 5;
}

.sheet-cap-main-col {
    width: 27%;
}

.sheet-cap-sep-col {
    width: fit-content;
    padding: 12px 3px 12px 3px;
}

/*-----------------  ------------------*/

.sheet-title {
    float: left;
    font-weight: bold;
    padding: 3px;
}

.sheet-subtitle {
    padding: 1px;
    font-size: 0.75em;
}

.sheet-bold {
    font-weight: bold;
}

.sheet-italic {
    font-style: italic;
}

.sheet-normal {
    font-weight: normal;
    font-style: normal;
}

.sheet-center-text {
    text-align: center;
}

.sheet-25-box {
    width: 25px;
    height: 25px;
}

.sheet-20-box {
    width: 20px;
    height: 20px;
}

.sheet-no-padding {
    padding: 0;
}

.sheet-padding-2 {
    padding: 2px;
}

.sheet-padding-3 {
    padding: 3px;
}

.sheet-padding-2505 {
    padding: 2px 5px 0 5px;
}

.sheet-padding-2525 {
    padding: 2px 5px 2px 5px;
}

.sheet-padding-0525 {
    padding: 0 5px 2px 5px;
}

.sheet-padding-top4 {
    padding-top: 4px;
}

.sheet-padding-top5 {
    padding-top: 5px;
}

.sheet-padding-left10 {
    padding-left: 10px;
}

.sheet-padding-right2 {
    padding-right: 2px;
}

.sheet-padding-right20 {
    padding-right: 20px;
}

.sheet-padding-bottom3 {
    padding-bottom: 3px;
}

.sheet-padding-bottom5 {
    padding-bottom: 5px;
}

.sheet-padding-bottom10 {
    padding-bottom: 10px;
}

.sheet-padding-bottom15 {
    padding-bottom: 15px;
}

.sheet-padding-bottom20 {
    padding-bottom: 20px;
}

.sheet-no-border {
    border: none;
}

.sheet-transparent {
    background-color: transparent;
}

.sheet-border-bottom-1 {
    border-bottom: 1px solid black;
}

.sheet-border-bottom-2 {
    border-bottom: 2px solid black;
}

.sheet-border-red {
    border: 3px solid #EE5F57;
}

input.sheet-custom-number-input::-webkit-outer-spin-button,
input.sheet-custom-number-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number].sheet-custom-number-input {
    -moz-appearance: textfield; /* Firefox */
    width: 1.4em;
    height: 1.5em;
}

input.sheet-move-number-input::-webkit-outer-spin-button,
input.sheet-move-number-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number].sheet-move-number-input {
    -moz-appearance: textfield; /* Firefox */
    width: 1.9em;
    height: 1.5em;
}

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

button[type=roll].sheet-custom-roll-button {
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: 110% 110%;
    background-position: center;
    background-color: transparent;
}

.sheet-dodge-image {
    background-image: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/dodge_transparent.png");
}

.sheet-willpower-image {
    background-image: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/willpower_transparent.png");
}

/*----------------- Inventory / Bio ------------------*/

.sheet-inventory-header {
    font-weight: bold;
    font-variant: small-caps;
    font-size: 1.3em;
    border-top: 2px solid dimgrey;
    width: fit-content;
}

.sheet-inventory-title {
    background-color: dimgrey;
    color: white;
    text-align: center;
    font-weight: bold;
    padding-top: 2px;
    padding-bottom: 2px;
}

.sheet-inventory-box {
    border: 2px solid dimgrey;
}

.sheet-inventory-box-upper {
    background-color: dimgrey;
    color: white;
    border-bottom: 2px solid lightgrey;
    padding: 2px;
}

.sheet-inventory-selector {
    border-color: lightgrey;
}

input.sheet-white-text[type=text] {
    color: white;
}

/*----------------- Roll templates ------------------*/

.sheet-rolltemplate-skill .sheet-container,
.sheet-rolltemplate-basic-action .sheet-container,
.sheet-rolltemplate-action .sheet-container {
    background-color: #ffffff;
    border: 1px solid;
    padding: 2px;
    width: 189px;
}

.sheet-rolltemplate-skill div,
.sheet-rolltemplate-basic-action div,
.sheet-rolltemplate-action div {
    padding: 2px;
}

.sheet-rolltemplate-skill .sheet-tcat,
.sheet-rolltemplate-basic-action .sheet-tcat,
.sheet-rolltemplate-action .sheet-tcat {
    font-weight: bold;
    font-size: 0.75em;
    font-variant: small-caps;
    line-height: 1.6em;
    padding-left: 5px;
    text-align: left;
}

.sheet-rolltemplate-skill .sheet-tcat-text,
.sheet-rolltemplate-basic-action .sheet-tcat-text,
.sheet-rolltemplate-action .sheet-tcat-text {
    font-size: 0.85em;
}

.sheet-rolltemplate-skill .sheet-tcat-header,
.sheet-rolltemplate-basic-action .sheet-tcat-header,
.sheet-rolltemplate-action .sheet-tcat-header {
    color: white;
    font-weight: bold;
    font-size: 1em;
    font-variant: small-caps;
    line-height: 20px;
}

.sheet-rolltemplate-skill .sheet-tcat-subheader,
.sheet-rolltemplate-basic-action .sheet-tcat-subheader,
.sheet-rolltemplate-action .sheet-tcat-subheader {
    color: white;
    font-size: 0.8em;
    font-style: italic;
}

.sheet-rolltemplate-skill .sheet-separator,
.sheet-rolltemplate-basic-action .sheet-separator,
.sheet-rolltemplate-action .sheet-separator {
    background-color: #d3d3d3;
    width: auto;
    height: 1px;
}

.sheet-rolltemplate-skill .inlinerollresult,
.sheet-rolltemplate-basic-action .inlinerollresult,
.sheet-rolltemplate-action .inlinerollresult {
    background-color: #ffffff;
    border: 3px solid #000000;
}

.sheet-rolltemplate-skill .inlinerollresult.fullcrit,
.sheet-rolltemplate-basic-action .inlinerollresult.fullcrit,
.sheet-rolltemplate-action .inlinerollresult.fullcrit {
    border: 3px solid #3FB315;
}

.sheet-rolltemplate-skill .inlinerollresult.fullfail,
.sheet-rolltemplate-basic-action .inlinerollresult.fullfail,
.sheet-rolltemplate-action .inlinerollresult.fullfail {
    border: 3px solid #B31515;
}

/*-------------------------*/


/*** FOR CHECKBOX SELECTION ***/
/*** FOR SHOW/HIDE ***/
input[type=checkbox].sheet-tab-hide {
    display: inline-block;
    width: 24px;
    opacity: 0;
    z-index: 2;
}

input[type=checkbox].sheet-tab-hide + div {
    display: inline-block;
    margin-left: -27px;
    width: 25px;
    font-family: pictos;
    font-size: 2.0em;
    color: #A0A0A0;
    cursor: pointer;
}

input[type=checkbox].sheet-tab-hide:checked + div {
    display: inline-block;
    color: black;
}

input[type=checkbox].sheet-tab-hide:hover + div,
input[type=checkbox].sheet-tab-hide:hover * {
    display: inline-block;
    color: blue;
}

/*** END FOR SHOW/HIDE ***/
/*** END FOR CHECKBOX SELECTION ***/

.sheet-inlineBlock {
    display: inline-block;
}

.sheet-vertTop {
    vertical-align: top;
}

.sheet-padLeft {
    padding-Left: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*----------------- Settings ------------------*/

.sheet-settings {
    z-index: 2;
    opacity: 0;
    position: absolute;
}

/* Settings button as gear (uses letter 'y' in pictos font) as a checkbox to be used with javascript */
.sheet-settings + span {
    display: inline-block;
    /*margin-left: -25px;*/
    position: relative;
    font-size: 20px;
    font-family: pictos;
    color: #A0A0A0;
    cursor: pointer;
}

.sheet-settings:checked + span {
    color: black;
    display: inline-block;
}

.sheet-settings:hover + span,
.sheet-settings:hover * {
    color: blue;
    display: inline-block;
}

.sheet-show-hide {
    display: none;
}

input[type=checkbox].sheet-tab-hide:checked ~ .sheet-show-hide {
    display: inline-block;
}

.sheet-displaySettings {
    display: block;
    background-color: #ededed;
    border: 2px dotted dimgrey;
    margin-bottom: 10px;
    margin-left: 9%
}

.sheet-melee_display_settings_flag[value="hide"] ~ .sheet-displaySettings,
.sheet-ranged_display_settings_flag[value="hide"] ~ .sheet-displaySettings,
.sheet-maneuver_display_settings_flag[value="hide"] ~ .sheet-displaySettings,
.sheet-displaySettingsFlag[value="hide"] ~ .sheet-displaySettings {
    display: none;
}


/*----------------- NPC Sheet ------------------*/

.sheet-npc-action-check-indicator[value="1"] ~ .sheet-npc-action-check-description,
.sheet-npc-action-check-indicator[value="2"] ~ .sheet-npc-action-check-description,
.sheet-npc-action-check-indicator[value="4"] ~ .sheet-npc-action-check-description,
.sheet-npc-action-check-indicator[value="1"] ~ .sheet-npc-action-dodge,
.sheet-npc-action-check-indicator[value="2"] ~ .sheet-npc-action-willpower,
.sheet-npc-action-check-indicator[value="3"] ~ .sheet-npc-action-auto-hit,
.sheet-npc-action-check-indicator[value="4"] ~ .sheet-npc-action-skill {
    display: inline-flex;
}

.sheet-npc-action-check-description,
.sheet-npc-action-dodge,
.sheet-npc-action-willpower,
.sheet-npc-action-auto-hit,
.sheet-npc-action-skill {
    display: none
}

.sheet-description-control[value="4"] ~ .sheet-npc-action-trigger,
.sheet-description-control[value="2"] ~ .sheet-npc-action-damage {
    display: block;
}

.sheet-npc-action-trigger,
.sheet-npc-action-damage {
    display: none;
}

/*----------------- Expandable textarea ------------------*/

.sheet-auto-expand {
    position: relative;
    min-height: 18px;
    cursor: text;
    word-wrap: break-word;
    border-radius: 2px;
    padding: 2px;
}

.sheet-auto-expand span {
    visibility: hidden;
    white-space: pre-wrap;
    display: block;
}

.sheet-auto-expand textarea {
    position: absolute;
    z-index: 0;
    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: 2px;
    box-shadow: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    padding: inherit;
    text-align: inherit;
    text-transform: inherit;
}

/*-----------------  ------------------*/

.sheet-top-detail {
    grid-area: top-detail;
    background-color: #3FB315;
    width: fit-content;
}

.sheet-middle-detail {
    grid-area: middle-detail;
    align-content: center;
    width: fit-content;
}

.sheet-bottom-detail {
    grid-area: bottom-detail;
    align-content: center;
    background-color: cadetblue;
}

/* Boring Pre-defined width & height options */

.sheet-width-auto {
    width: auto;
}

.sheet-width-half {
    width: 49%;
}

.sheet-width-third {
    width: 32%;
}

.sheet-width5 {
    width: 5%;
}

.sheet-width6 {
    width: 6%;
}

.sheet-width10 {
    width: 10%;
}

.sheet-width15 {
    width: 15%;
}

.sheet-width20 {
    width: 20%;
}

.sheet-width25 {
    width: 25%;
}

.sheet-width30 {
    width: 30%;
}

.sheet-width35 {
    width: 35%;
}

.sheet-width39 {
    width: 39%;
}

.sheet-width40 {
    width: 40%;
}

.sheet-width45 {
    width: 45%;
}

.sheet-width50 {
    width: 50%;
}

.sheet-width55 {
    width: 55%;
}

.sheet-width60 {
    width: 60%;
}

.sheet-width65 {
    width: 65%;
}

.sheet-width70 {
    width: 70%;
}

.sheet-width75 {
    width: 75%;
}

.sheet-width80 {
    width: 80%;
}

.sheet-width85 {
    width: 85%;
}

.sheet-width90 {
    width: 90%;
}

.sheet-width95 {
    width: 95%;
}

.sheet-width100 {
    width: 100%;
}

.sheet-height5 {
    height: 5px;
}

.sheet-height10 {
    height: 10px;
}

.sheet-height15 {
    height: 15px;
}

.sheet-height17 {
    height: 17px;
}

.sheet-height20 {
    height: 20px;
}

.sheet-height25 {
    height: 25px;
}

.sheet-height30 {
    height: 30px;
}

.sheet-height35 {
    height: 35px;
}

.sheet-height40 {
    height: 40px;
}

.sheet-height50 {
    height: 50px;
}

.sheet-height75 {
    height: 75px;
}

.sheet-height80 {
    height: 80px;
}

.sheet-height100 {
    height: 100px;
}

.sheet-height150 {
    height: 150px;
}

/*----------------- Hexagons ------------------*/

.sheet-enemy-dice {
    font-size: 50px;
    font-family: dicefontd6;
    position: absolute;
    z-index: 3;
    color: #9E76B3;
}

div.sheet-enemy-hex {
    display: none;
}

.sheet-grunt {
    padding-top: 50px;
    width: 390px;
    height: 330px;
    margin-top: -30px;
}

.sheet-awakened {
    padding-top: 75px;
    padding-left: 40px;
    height: 480px;
    width: 690px;
    margin-top: -5px;
}

.sheet-elite {
    padding-left: 40px;
    height: 580px;
    width: 690px;
    margin-top: -25px;
}

.sheet-boss {
    padding-left: 40px;
    height: 680px;
    width: 790px;
    margin-top: -25px;
}

.sheet-npc-ring-indicator[value="1"] ~ div.sheet-grunt,
.sheet-npc-ring-indicator[value="2"] ~ div.sheet-awakened,
.sheet-npc-ring-indicator[value="3"] ~ div.sheet-elite,
.sheet-npc-ring-indicator[value="4"] ~ div.sheet-boss {
    display: block;
}

/*------------- Hex colours ------------------*/

.sheet-hex.sheet-hex-4, .sheet-small-hex.sheet-hex-4 { background: #F8F6FA; }
.sheet-hex.sheet-hex-3, .sheet-small-hex.sheet-hex-3 { background: #ECE5F1; }
.sheet-hex.sheet-hex-2, .sheet-small-hex.sheet-hex-2 { background: #D5C6E1; }
.sheet-hex.sheet-hex-1, .sheet-small-hex.sheet-hex-1 { background: #B698C7; }
.sheet-hex.sheet-hex-0, .sheet-small-hex.sheet-hex-0 { background: #9E76B3; }

.sheet-hex.sheet-veteran-hex-4, .sheet-small-hex.sheet-veteran-hex-4 { background: #FABEAF; }
.sheet-hex.sheet-veteran-hex-3, .sheet-small-hex.sheet-veteran-hex-3 { background: #FABEAF; }
.sheet-hex.sheet-veteran-hex-2, .sheet-small-hex.sheet-veteran-hex-2 { background: #F9B09F; }
.sheet-hex.sheet-veteran-hex-1, .sheet-small-hex.sheet-veteran-hex-1 { background: #F69E8C; }

/*------------- Hexes ------------------*/

input[type=checkbox].sheet-hex-button:checked ~ .sheet-hex.sheet-veteran-hex-1,
input[type=checkbox].sheet-hex-button:checked ~ .sheet-hex.sheet-veteran-hex-2,
input[type=checkbox].sheet-hex-button:checked ~ .sheet-hex.sheet-veteran-hex-3,
input[type=checkbox].sheet-hex-button:checked ~ .sheet-hex.sheet-veteran-hex-4,
input[type=checkbox].sheet-small-hex-button:checked ~ .sheet-small-hex.sheet-veteran-hex-1,
input[type=checkbox].sheet-small-hex-button:checked ~ .sheet-small-hex.sheet-veteran-hex-2,
input[type=checkbox].sheet-small-hex-button:checked ~ .sheet-small-hex.sheet-veteran-hex-3,
input[type=checkbox].sheet-small-hex-button:checked ~ .sheet-small-hex.sheet-veteran-hex-4 {
    background-color: transparent;
}

input[type=checkbox].sheet-hex-button:checked + span::before,
input[type=checkbox].sheet-small-hex-button:checked + span::before {
    content: "&";
    font-family: pictos;
    color: green;
}

input[type=checkbox].sheet-hex-button:hover + span + div,
input[type=checkbox].sheet-small-hex-button:hover + span + div {
    background-color: indianred;
}

.sheet-hex-button + span::before,
.sheet-small-hex-button + span::before {
    cursor: pointer;
    content: "*";
    font-family: pictos;
    color: red;
    margin-left: -10px;
}

input[type=checkbox].sheet-hex-button {
    opacity: 0;
    z-index: 3;
    margin-left: -55px;
}

.sheet-hex {
    width: 100px;
    height: 57px;
    background-color: #ccc;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: auto 173px;
    position: relative;
    float: left;
    margin: 16px 2px;
    text-align: center;
    zoom: 1;
}

.sheet-hex .sheet-corner-1,
.sheet-hex .sheet-corner-2,
.sheet-small-hex .sheet-corner-1,
.sheet-small-hex .sheet-corner-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: -2;
    overflow: hidden;
    backface-visibility: hidden;
}

.sheet-hex .sheet-corner-1,
.sheet-small-hex .sheet-corner-1 {
    z-index:-1;
    transform: rotate(60deg);
}

.sheet-hex .sheet-corner-2,
.sheet-small-hex .sheet-corner-2 {
    transform: rotate(-60deg);
}

.sheet-hex .sheet-corner-1::before,
.sheet-hex .sheet-corner-2::before,
.sheet-small-hex .sheet-corner-1::before,
.sheet-small-hex .sheet-corner-2::before {
    width: 173px;
    height: 173px;
    content: '';
    position: absolute;
    background: inherit;
    top: 0;
    left: 0;
    z-index: 1;
    background-repeat: no-repeat;
    backface-visibility: hidden;
}

.sheet-hex .sheet-corner-1::before,
.sheet-small-hex .sheet-corner-1::before {
    transform: rotate(-60deg) translate(-87px, 0px);
    transform-origin: 0 0;
}

.sheet-hex .sheet-corner-2::before,
.sheet-small-hex .sheet-corner-2::before {
    transform: rotate(60deg) translate(-48px, -11px);
    bottom: 0;
}

/* Custom styles*/
.sheet-hex .sheet-inner,
.sheet-small-hex .sheet-inner {
    color: #eee;
}

/*------------- Small hexes ---------------*/

input[type=checkbox].sheet-small-hex-button {
    opacity: 0;
    z-index: 3;
    margin-left: -45px;
}

.sheet-small-hex {
    width: 75px;
    height: 43px;
    background-color: #ccc;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: auto 173px;
    position: relative;
    float: left;
    margin: 13px 2px;
    text-align: center;
    zoom: 1;
}