roll20-character-sheets/ImperiumMaledictum/sheet.css

/*
++IMPERIUM MALEDICTUM EXCULTUS++
*/

@import url('https://fonts.googleapis.com/css2?family=IM+Fell+Great+Primer:ital@0;1&display=swap');

body .charsheet * {
    font-family: 'IM Fell Great Primer', serif;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    display: none;
}
input[type=number] {
    -moz-appearance: textfield;
    /* ++FIREFOX++ */
}

body .charsheet {
    background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/bg.jpg') center top repeat-y;
    background-size: 100% auto;
    border: solid 1px darkslategray;
    box-shadow: 0 2px 4px 0 #0002, 0 3px 10px 0 #0001;
    mix-blend-mode: multiply;
}
body .charsheet > div:not(.tabs) {
    position: relative;
    box-shadow: inset 0 2px 4px 0 #0003;
    margin: -10px -10px 0 -10px;
    padding: 10px 10px 0 10px;
}
body .charsheet > div:not(.tabs):before {
    position: absolute;
    content: '';
    background: 95% 25px no-repeat;
    background-size: auto 100px;
    width: 100%;
    height: 100%;
    opacity: 0.15;
    z-index: -1;
}

body .charsheet .toggle-sheet[value='character'] ~ .faction[value='Adeptus Administratum'] ~ div:not(.tabs):before,
body .charsheet .toggle-sheet[value='patron'] ~ .patron-faction[value='Adeptus Administratum'] ~ div:not(.tabs):before {
    background-image: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/administratum.png');
}
body .charsheet .toggle-sheet[value='character'] ~ .faction[value='Adeptus Astra Telepathica'] ~ div:not(.tabs):before,
body .charsheet .toggle-sheet[value='patron'] ~ .patron-faction[value='Adeptus Astra Telepathica'] ~ div:not(.tabs):before {
    background-image: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/telepathica.png');
}
body .charsheet .toggle-sheet[value='character'] ~ .faction[value='Adeptus Mechanicus'] ~ div:not(.tabs):before,
body .charsheet .toggle-sheet[value='patron'] ~ .patron-faction[value='Adeptus Mechanicus'] ~ div:not(.tabs):before {
    background-image: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/mechanicus.png');
}
body .charsheet .toggle-sheet[value='character'] ~ .faction[value='Adeptus Ministorum'] ~ div:not(.tabs):before,
body .charsheet .toggle-sheet[value='patron'] ~ .patron-faction[value='Adeptus Ministorum'] ~ div:not(.tabs):before {
    background-image: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/ministorum.png');
}
body .charsheet .toggle-sheet[value='character'] ~ .faction[value='Astra Militarum'] ~ div:not(.tabs):before,
body .charsheet .toggle-sheet[value='patron'] ~ .patron-faction[value='Astra Militarum'] ~ div:not(.tabs):before {
    background-image: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/militarum.png');
}
body .charsheet .toggle-sheet[value='character'] ~ .faction[value='Imperial Fleet'] ~ div:not(.tabs):before,
body .charsheet .toggle-sheet[value='patron'] ~ .patron-faction[value='Imperial Fleet'] ~ div:not(.tabs):before {
    background-image: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/navy.png');
}
body .charsheet .toggle-sheet[value='character'] ~ .faction[value='Infractionist'] ~ div:not(.tabs):before,
body .charsheet .toggle-sheet[value='patron'] ~ .patron-faction[value='Infractionist'] ~ div:not(.tabs):before {
    background-image: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/infractionist.png');
}
body .charsheet .toggle-sheet[value='character'] ~ .faction[value='The Inquisition'] ~ div:not(.tabs):before,
body .charsheet .toggle-sheet[value='patron'] ~ .patron-faction[value='The Inquisition'] ~ div:not(.tabs):before {
    background-image: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/inquisition.png');
}
body .charsheet .toggle-sheet[value='character'] ~ .faction[value='Rogue Trader Dynasty'] ~ div:not(.tabs):before,
body .charsheet .toggle-sheet[value='patron'] ~ .patron-faction[value='Rogue Trader Dynasty'] ~ div:not(.tabs):before {
    background-image: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/rogue_trader.png');
}

.charsheet h1 {
    background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/logo.png') left top no-repeat;
    background-size: contain;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    text-indent: -9999px;
}
.charsheet h2,
.charsheet h3 {
    text-transform: uppercase;
    font-size: 18px;
    text-align: center;
    line-height: unset;
    border-bottom: solid 1.5px slategray;
    margin-bottom: 5px;
}
.charsheet h3 {
    font-size: 10px;
}
.charsheet label,
.label {
    font-size: 10px;
    font-weight: normal;
	  display: inline-block;
	  width: 100%;
    line-height: 20px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-align: left;
    vertical-align: middle;
    text-transform: uppercase;
    color: black;
    border-radius: 0;
    white-space: unset;
}
.charsheet label sub,
.label sub {
    display: block;
    bottom: unset;
    font-size: 0.5em;
}
.label:empty {
    display: unset;
}
.charsheet .vcol > label,
.vcol > .label {
    margin: -10px 0 0 0;
}
.charsheet .vsplit .vcol > label,
.vsplit .vcol > .label {
    margin: 0;
}
.charsheet .vcol.nogap > label,
.vcol.nogap > .label {
    margin: 0;
}
body .charsheet div .grid input,
body .charsheet div .grid input[type=number],
body .charsheet select,
body .charsheet .input,
body .charsheet .input * {
    font-family: Times, 'Times New Roman', serif;
    font-size: 14px;
}
body .charsheet div .grid input,
body .charsheet div .grid input[type=number],
body .charsheet select,
body .charsheet .input {
	display: inline-block;
	width: 100%;
    height: 20px;
    border: none;
    border-bottom: solid 0.5px black;
    border-radius: 0;
    padding: 0 5px;
    margin: 0;
    box-sizing: border-box;
    background: none;
    color: black;
    line-height: 20px;
    text-align: left;
    vertical-align: middle;
    outline: none;
    overflow: hidden;
}
body .charsheet *:not(button).input {
    cursor: default;
}
body .charsheet select {
    background: white;
    appearance: none;
    box-shadow: none;
}
body .charsheet div .grid input[type=checkbox] {
    appearance: none;
    place-content: center;
    width: 20px;
}
body .charsheet input[type=checkbox]:before {
    content: '';
    font-family: 'Pictos';
}
body .charsheet input[type=checkbox]:checked:before {
    content: '3';
}
body .charsheet > div:not(.tabs) button[type=roll] {
    content: '';
    padding: 0;
    margin: 0;
    font-size: unset;
    text-shadow: unset;
    border: unset;
    border-color: unset;
    box-shadow: unset;
}
body .charsheet > div:not(.tabs) button[type=roll]:before {
    content: '';
}
body .charsheet > div:not(.tabs) button[type=action],
body .charsheet > div:not(.tabs) button[type=roll] {
    transition: 120ms all ease-in-out;
    border-radius: 5px;
    box-shadow: inset 0 -1px 4px black;
    border: unset;
}
body .charsheet > div:not(.tabs) button[type=action]:hover,
body .charsheet > div:not(.tabs) button[type=roll]:hover {
    background: darkslategray;
    color: whitesmoke;
}
body .charsheet > div:not(.tabs) button[type=action]:hover *,
body .charsheet > div:not(.tabs) button[type=roll]:hover * {
    color: whitesmoke;
}
body .charsheet > div:not(.tabs) button[type=action]:active,
body .charsheet > div:not(.tabs) button[type=roll]:active {
    background: slategray;
    color: white;
}
body .charsheet > div:not(.tabs) button[type=action]:active *,
body .charsheet > div:not(.tabs) button[type=roll]:active * {
    color: white;
}
body .charsheet > div:not(.tabs) button[type=action].dice,
body .charsheet > div:not(.tabs) button[type=roll].dice {
    text-align: center;
}
body .charsheet > div:not(.tabs) button[type=action].dice:before,
body .charsheet > div:not(.tabs) button[type=roll].dice:before {
    content: '0';
    font-family: 'dicefontd10';
}

.itemcontrol {
    z-index: 100;
}

.charsheet .grid,
.repcontainer,
.repitem {
    display: grid;
    margin: 0;
    padding: 0;
    grid-auto-rows: minmax(min-content, max-content);
    gap: 10px;
}
.charsheet .flex {
    display: flex;
    margin: 0;
    padding: 0;
    gap: 10px;
    align-items: center;
}
body .charsheet .slim {
    width: fit-content;
    justify-self: center;
}
body .charsheet div .flex > *,
body .charsheet div .flex > input {
    width: unset;
}
.repcontainer {
    margin-bottom: 10px;
}
.charsheet .nogap {
    gap: 0px;
}
.charsheet .novgap {
    row-gap: 0px;
}
.charsheet .widegap {
    gap: 20px;
}
.charsheet .vwidegap {
    row-gap: 20px;
}
.col2 {
    grid-template-columns: repeat(2, 1fr);
}
.col3 {
    grid-template-columns: repeat(3, 1fr);
}
.col3-chars {
    grid-template-columns: 3fr 1fr 2fr;
}
.col3-hitloc {
    grid-template-columns: 1fr 5fr 3fr;
}
.col4 {
    grid-template-columns: repeat(4, 1fr);
}
.col4-profile1 {
    grid-template-columns: 5fr 7fr 4fr 5fr;
}
.col5 {
    grid-template-columns: repeat(5, 1fr);
}
.col5-skills {
    grid-template-columns: 8fr 3fr 2fr 3fr 4fr;
}
.col5-npcname {
    grid-template-columns: 2fr 1fr 1fr 2fr 1fr;
}
.col6 {
    grid-template-columns: repeat(6, 1fr);
}
.col7 {
    grid-template-columns: repeat(7, 1fr);
}
.col8 {
    grid-template-columns: repeat(8, 1fr);
}
.col9 {
    grid-template-columns: repeat(9, 1fr);
}
.col10 {
    grid-template-columns: repeat(10, 1fr);
}
.col10-chars {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.slot1 {
    grid-column: 1;
}
.slot2 {
    grid-column: 2;
}
.slot3 {
    grid-column: 3;
}
.slot4 {
    grid-column: 4;
}
.span2 {
    grid-column: span 2;
}
.span3 {
    grid-column: span 3;
}
.span4 {
    grid-column: span 4;
}
.span5 {
    grid-column: span 5;
    width: unset;
}
.span6 {
    grid-column: span 6;
}
.span7 {
    grid-column: span 7;
}
.span8 {
    grid-column: span 8;
}
.span9 {
    grid-column: span 9;
}
.span10 {
    grid-column: span 10;
}
.vspan2 {
    grid-row: span 2;
}
.vspan3 {
    grid-row: span 3;
}
.vcol {
    grid-template-rows: 20px auto;
    grid-auto-flow: column;
}

.col4-skills,
.repeating_specialisations ~ .repcontainer .repitem {
    grid-template-columns: 8fr 5fr 3fr 4fr;
}
.col3-influences,
.repeating_influences ~ .repcontainer .repitem {
    grid-template-columns: 5fr 1fr 12fr;
}
.col2-talents,
.repeating_talents ~ .repcontainer .repitem {
    grid-template-columns: 5fr 13fr;
}
.col2-crits,
.repeating_criticals ~ .repcontainer .repitem {
    grid-template-columns: 3fr 13fr;
}
.col8-weapons,
.repeating_weapons ~ .repcontainer .repitem {
    grid-template-columns: 6fr 3fr 1fr 2fr 3fr 2fr 1fr 8fr;
}
.col5-armour,
.repeating_armour ~ .repcontainer .repitem {
    grid-template-columns: 6fr 4fr 1fr 1fr 9fr;
}
.col10-powers,
.repeating_powers ~ .repcontainer .repitem {
    grid-template-columns: 5fr 5fr 1fr 1fr 1fr 4fr 4fr 4fr 3fr 50px;
}
.col4-influences,
.repeating_patroninfluences ~ .repcontainer .repitem {
    grid-template-columns: 5fr 1fr 12fr 10fr;
}
.repeating_npcskills ~ .repcontainer .repitem {
    grid-template-columns: 22fr 3fr 2fr;
}
.repeating_npctraits ~ .repcontainer .repitem {
    grid-template-columns: 2fr 5fr;
}
.col7-npcattacks,
.repeating_npcattacks ~ .repcontainer .repitem {
    grid-template-columns: 4fr 4fr 2fr 1fr 4fr 2fr 4fr;
}

/* ++AUTOEXPAND++ */
.auto-expand {
	position: relative;
	cursor: text;
	word-wrap: break-word;
    min-height: 20px;
}
.auto-expand.tall {
    min-height: 100px;
}
.auto-expand span {
    font-family: Times, 'Times New Roman', serif;
	visibility: hidden;
	white-space: pre-wrap;
	display: block;
    line-height: 20px;
    padding: 0 5px;
    border: dashed 0.5px gray;
    border-radius: 5px;
}
.auto-expand textarea {
    font-family: Times, 'Times New Roman', serif;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	margin: 0;
    padding: 0 5px;
	overflow: hidden;
	resize: none;
    line-height: 20px;
	height: 100%;
	width: 100%;
	display: block;
	box-sizing: border-box;
	background: transparent;
	box-shadow: none;
	color: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	text-transform: inherit;
    border: dashed 0.5px gray;
    border-radius: 5px;
}

/* ++TABS++ */
.tabs {
    display: flex;
    background: linear-gradient(105deg,
        slategray 0%,
        lightslategray 45%,
        darkslategray 55%,
        slategray 100%);
    color: silver;
    text-shadow: 0 0 4px lightslategray;
    box-shadow: inset 0 2px 2px silver, inset 0 -2px 2px #333;
    margin: -10px -10px 10px -10px;
    padding: 0 10px;
    border-bottom: solid 1px darkslategray;
    align-items: center;
}
.tabs div {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.tabs button {
    background: unset;
    font-family: courier;
    color: silver;
    text-shadow: 0 1px 1px darkslategray;
    box-shadow: inset 0 -2px 2px #333, inset 0 2px 2px silver;
    height: 30px;
    padding: 5px 15px;
    border: solid 1px darkslategray;
    text-transform: uppercase;
    font-weight: bold;
    transition: 120ms all ease-in-out;
}
.tabs button:hover {
    filter: brightness(85%);
    box-shadow: inset 0 2px 2px #000;
}
.tabs button:active,
.toggle-tabs[value='page1'] ~ .tabs div.tab-page1 button,
.toggle-tabs[value='page2'] ~ .tabs div.tab-page2 button,
.toggle-tabs[value='patron'] ~ .tabs div.tab-patron button,
.toggle-tabs[value='npc'] ~ .tabs div.tab-npc button,
.toggle-tabs[value='settings'] ~ .tabs div.tab-settings button {
    filter: brightness(85%);
    box-shadow: inset 0 3px 5px #000;
}

body .charsheet .page1,
body .charsheet .page2,
body .charsheet .patron,
body .charsheet .npc,
body .charsheet .settings {
    display: none;
}
body .charsheet .page1:after,
body .charsheet .page2:after,
body .charsheet .patron:after,
body .charsheet .npc:after,
body .charsheet .settings:after {
    content: 'Imperium Maledictum Excultus Character Sheet Ver.0.24 | https://app.roll20.net/users/561389/craig-g | https://app.roll20.net/users/2699740/robert-b';
    text-align: right;
    font-size: 8px;
}
body .toggle-tabs[value='page1'] ~ div.page1,
body .toggle-tabs[value='page2'] ~ div.page2,
body .toggle-tabs[value='patron'] ~ div.patron,
body .toggle-tabs[value='npc'] ~ div.npc,
body .toggle-tabs[value='settings'] ~ div.settings {
    display: grid;
}

.charsheet .toggle-sheet:not([value='character']) ~ .tabs div.tab-page1,
.charsheet .toggle-sheet:not([value='character']) ~ .tabs div.tab-page2,
.charsheet .toggle-sheet:not([value='patron']) ~ .tabs div.tab-patron,
.charsheet .toggle-sheet:not([value='npc']) ~ .tabs div.tab-npc,
.charsheet .toggle-sheet[value='patron'] ~ div .character {
    display: none;
}

body .charsheet .tabs .roller {
    flex: 1;
    height: 30px;
    text-align: right;
    align-items: center;
}
body .charsheet .tabs .roller > * {
    width: fit-content;
}
body .charsheet .tabs .roller > input,
body .charsheet .tabs .roller > input[type=number],
body .charsheet .tabs .roller > select,
body .charsheet .tabs .roller > .input {
    background: repeating-linear-gradient(
        #000 2px,
        #050 4px);
    font-family: courier;
    text-transform: uppercase;
    color: white;
    text-shadow: 0 0 4px white;
    box-shadow: inset 0 2px 2px black, 0 1px 1px silver;
    border: solid 1px darkslategray;
    height: 100%;
    line-height: unset;
}

/* ++END TABS++ */

.charsheet .grid.lined {
    mix-blend-mode: multiply;
}
.charsheet .grid.lined > .grid,
.charsheet .grid.lined .repcontainer,
.charsheet .grid.lined .repitem {
    background: darkgray;
    gap: 1px;
    height: fit-content;
}
.charsheet .grid.lined .repcontainer {
    border-top: solid 1px darkgray;
}
body .charsheet div .grid.lined input,
body .charsheet div .grid.lined input[type=number],
body .charsheet .grid.lined select,
body .grid.lined .input,
.charsheet .grid.lined > .grid > *,
.charsheet .grid.lined .repitem > * {
    background: white;
    border: none;
    border-radius: unset;
    padding: 2px 0;
    height: unset;
    text-align: center;
    overflow: hidden;
}
body .charsheet .grid.lined > .grid > *.pullup,
body .charsheet .grid.lined .repitem > *.pullup {
    padding: 0;
}
.charsheet .grid.lined:not(.tight) label::first-letter,
.charsheet .grid.lined:not(.tight) .label::first-letter {
    font-size: 1.5em;
}
.charsheet .grid.lined > .grid > *:first-child,
.charsheet .grid.lined .repitem > *:nth-child(2),
.characteristics .lined > .grid > *:nth-child(10n+11),
.skills .lined > .grid > *:nth-child(7n+5) {
    text-align: left;
}
.skills .lined > .grid > *:nth-child(n+0):nth-child(-n+4) {
    font-weight: bold;
    font-size: 0.8em;
}
body .charsheet .repitem input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    margin: 0;
    padding: 0;
    border: none;
    display: grid;
    place-content: center;
}
body .charsheet .repitem input[type=checkbox]:before {
    transition: 120ms all ease-in-out;
    content: '&';
    font-family: 'Pictos';
}
body .charsheet .repitem input[type=checkbox]:checked:before {
    content: '_';
}
body .charsheet .repitem .toggle-details + .auto-expand {
    transition: 120ms all ease-in-out;
    display: none;
}
body .charsheet .repitem .toggle-details[value='1'] + .auto-expand {
    display: block;
}

body .charsheet .grid .hint {
    color: gray;
    text-transform: capitalize;
    text-align: center;
}

body .charsheet .grid .lrg {
    font-size: 18px;
}

.vsplit {
    position: relative;
}
.vsplit:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    background: slategray;
    height: calc(100% - 50px);
    width: 1.5px;
    margin-left: -0.75px;
}
.vsplit h2 {
    xbackground-color: white;
}
body .charsheet div .grid.vsplit label,
body .charsheet div .grid.vsplit .label {
    text-align: center;
    xbackground-color: white;
}
body .charsheet div .grid.vsplit input,
body .charsheet div .grid.vsplit input[type=number],
body .charsheet .grid.vsplit select,
body .charsheet div .grid input.dotted,
body .charsheet div .grid input[type=number].dotted,
body .charsheet div .grid select.dotted {
    border: dashed 0.5px gray;
    border-radius: 5px;
    text-align: center;
}
body .grid.vsplit .input,
body .charsheet div .grid .input.dotted {
    border: none;
    text-align: center;
}
body .charsheet div .grid input.unlined,
body .charsheet div .grid input[type=number].unlined,
body .charsheet div .grid select.unlined,
body .charsheet div .grid .input.unlined {
    border: none;
    text-align: center;
}

/* ++PAGE 1++ */
body .charsheet .split {
    position: relative;
}
body .charsheet .split:before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translate(-50%, -0%);
    height: 14px;
    width: 14px;
    background: linear-gradient(105deg,
        #00000000 0%,
        #00000000 calc(50% - 0.8px),
        black 50%,
        #00000000 calc(50% + 0.8px),
        #00000000 100%);
}
body .charsheet .xp:after {
    content: 'XP';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translate(-50%, -0%);
    font-size: 10px;
}
body .charsheet div .grid.split input[type=number],
body .charsheet div .grid.split .input {
    text-align: center;
}

body .charsheet .characteristics .grid.lined > .grid > *:nth-child(n+32):nth-child(-n+41) {
    background: linear-gradient(90deg, gainsboro 50%, white 50%);
    letter-spacing: 0.2em;
    font-weight: bold;
    text-indent: 0.2em;
}
body .charsheet .characteristics .grid.lined > .grid > button[type=action]:hover {
    background: linear-gradient(90deg, black 50%, darkslategray 50%);
}
body .charsheet .characteristics .grid.lined > .grid > button[type=action]:active {
    background: linear-gradient(90deg, darkslategray 50%, slategray 50%);
}

.corruption.vsplit:before {
    left: 24%;
}
.corruption .auto-expand {
    background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/chaos.png') center center no-repeat;
    background-size: contain;
    min-height: 75px;
    mix-blend-mode: multiply;
}

/* ++PAGE 2++ */
.warpcharge.vsplit:before {
    bottom: 20px;
    left: 57px;
    height: calc(100% - 97px);
}

.wounds.vsplit:before {
    height: calc(100% - 72px);
}

.encumbrance.vsplit:before {
    bottom: 20px;
    height: calc(100% - 61px);
}

.repeating_weapons ~ .repcontainer .melee,
.repeating_weapons ~ .repcontainer .weaponspec[value='Brawling'] ~ .ranged,
.repeating_weapons ~ .repcontainer .weaponspec[value='One-handed'] ~ .ranged,
.repeating_weapons ~ .repcontainer .weaponspec[value='Two-handed'] ~ .ranged {
    display: none;
}
.repeating_weapons ~ .repcontainer .weaponspec[value='Brawling'] ~ .melee,
.repeating_weapons ~ .repcontainer .weaponspec[value='One-handed'] ~ .melee,
.repeating_weapons ~ .repcontainer .weaponspec[value='Two-handed'] ~ .melee {
    display: grid;
}

.powers h2 {
    position: relative;
}
.powers h2 .flex {
    position: absolute;
    right: 0;
    top: 0;
}

/* ++NPC++ */
.charsheet .npc .grid.lined > .grid > * > .label {
    text-align: center;
}

/* ++ROLL TEMPLATES++ */

.sheet-rolltemplate-imtest,
.sheet-rolltemplate-imbasic {
    box-sizing: border-box;
    background: repeating-linear-gradient(
        #000 2px,
        #050 4px);
    width: 100%;
    box-shadow: 0 2px 4px 0 #0002, 0 3px 10px 0 #0001;
}
.sheet-rolltemplate-imtest .sheet-container .inlinerollresult,
.sheet-rolltemplate-imbasic .sheet-container .inlinerollresult {
    background: none;
    border: 0;
    padding: 0;
}
.sheet-rolltemplate-imtest .sheet-container,
.sheet-rolltemplate-imbasic .sheet-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
.sheet-rolltemplate-imtest .sheet-container *,
.sheet-rolltemplate-imbasic .sheet-container * {
    font-family: courier;
    text-transform: uppercase;
    color: white;
    text-shadow: 0 0 4px white;
}
.sheet-rolltemplate-imtest .sheet-container h1,
.sheet-rolltemplate-imtest .sheet-container p,
.sheet-rolltemplate-imbasic .sheet-container h1,
.sheet-rolltemplate-imbasic .sheet-container p {
    font-size: 13px;
    margin: 0;
    padding: 0 5px;
    line-height: unset;
}
.sheet-rolltemplate-imtest .sheet-container h1,
.sheet-rolltemplate-imtest .sheet-container h1 *,
.sheet-rolltemplate-imbasic .sheet-container h1,
.sheet-rolltemplate-imbasic .sheet-container h1 * {
    color: yellow;
    text-shadow: 0 0 4px yellow;
    padding: 5px;
}
.sheet-rolltemplate-imtest .sheet-container *:first-child,
.sheet-rolltemplate-imbasic .sheet-container *:first-child {
    margin-top: 5px;
}
.sheet-rolltemplate-imtest .sheet-container .sheet-options,
.sheet-rolltemplate-imbasic .sheet-container .sheet-options {
    text-align: center;
}
.sheet-rolltemplate-imtest .sheet-container .sheet-options,
.sheet-rolltemplate-imbasic .sheet-container .sheet-options {
    margin-top: 5px;
}
.sheet-rolltemplate-imtest .sheet-container .sheet-options,
.sheet-rolltemplate-imtest .sheet-container .sheet-options a[href^="~"],
.sheet-rolltemplate-imbasic .sheet-container .sheet-options,
.sheet-rolltemplate-imbasic .sheet-container .sheet-options a[href^="~"] {
    background: linear-gradient(105deg,
        slategray 0%,
        lightslategray 45%,
        darkslategray 55%,
        slategray 100%);
    color: silver;
    border: solid 1px darkslategray;
    text-shadow: 0 1px 1px darkslategray;
    box-shadow: inset 0 2px 2px silver;
    transition: 120ms all ease-in-out;
}
.sheet-rolltemplate-imtest .sheet-container .sheet-options a[href^="~"],
.sheet-rolltemplate-imbasic .sheet-container .sheet-options a[href^="~"] {
    background: unset;
}
.sheet-rolltemplate-imtest .sheet-container .sheet-options a[href^="~"]:hover,
.sheet-rolltemplate-imbasic .sheet-container .sheet-options a[href^="~"]:hover {
    filter: brightness(85%);
    box-shadow: inset 0 2px 2px #000;
    color: yellow;
}
.sheet-rolltemplate-imtest .sheet-container .sheet-options a[href^="~"]:active,
.sheet-rolltemplate-imbasic .sheet-container .sheet-options a[href^="~"]:active {
    filter: brightness(85%);
    box-shadow: inset 0 3px 5px #000;
    color: yellow;
}