roll20-character-sheets/FotN/FotN.css

.sheet-container {
    position: relative;
}

/*====Tabs===*/

.sheet-hidden, 
.sheet-character,
.sheet-current,
.sheet-rgs3,
.sheet-lifepath {
    display: none;
}

.sheet-tabstoggle[value="character"] ~ div.sheet-character {
  display: grid;
  width: 800px;
  height: 1268px;
  grid-gap: 0px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 2fr 3fr 3fr 2fr 1.55fr;
  grid-template-areas:"bio stats"
                      "skills passives"
                      "actives actives"
                      "socials socials"
                      "equipment equipment"
                      "notes notes";
}

.sheet-tabstoggle[value="current"] ~ div.sheet-current {
    display: grid;
    width: 680px;
    height: 900px;
    grid-gap: 0px;
    grid-template-columns: 5fr 3fr;
    grid-template-rows: 15.1% 12.1% 9.7% 9.1% 9.3% 11% 9.9% 10.3% 13.4%;
    grid-template-areas:"derived blind"
                        "derived degen-curse"
                        "derived taunt"
                        "derived impeded"
                        "derived shroud"
                        "derived possession"
                        "derived rage"
                        "derived vulnerable"
                        "derived aura";
}

.sheet-tabstoggle[value="rgs3"] ~ div.sheet-rgs3 {
    display: grid;
    width: 800px;
    height: 1050px;
    background-color: yellow;
    background-image: url("https://github.com/yehoshua1312/Yehoshua/blob/master/roll20/roll20-character-sheets/images/rgs3sheet.png?raw=true");
    background-repeat: no-repeat;
    background-size: 100%;
    grid-gap: 0px;
    grid-template-columns:5% 45% 43.5% 6.5%;
    grid-template-rows: 5% 26% 26.5% 26% 14.5% 2%;
    grid-template-areas:"topborder topborder topborder topborder"
                        "leftborder rgs3bio rgs3derived rightborder"
                        "leftborder rgs3actives rgs3socials rightborder"
                        "leftborder rgs3passives rgs3skills rightborder"
                        "leftborder rgs3equip rgs3equip rightborder"
                        "bottomborder bottomborder bottomborder bottomborder";
    
}

.sheet-tabstoggle[value="lifepath"] ~ div.sheet-lifepath {
    display: grid;
    width: 800px;
    height: 1050px;
    background-color: yellow;
    background-image: url("https://github.com/yehoshua1312/Yehoshua/blob/master/roll20/roll20-character-sheets/images/lifepath%20sheet.png?raw=true");
    background-repeat: no-repeat;
    background-size: 100%;
    grid-gap: 0px;
    grid-template-columns:7% 43% 43.5% 6.5%;
    grid-template-rows: 5% 11% 14% 12% 13% 14% 13% 13% 2%;
    grid-template-areas:"topborder topborder topborder topborder"
                        "leftborder characteristics characteristics rightborder"
                        "leftborder earlylife earlylife rightborder"
                        "leftborder socialposition socialposition rightborder"
                        "leftborder brushes brushes rightborder"
                        "leftborder relationships relationships rightborder"
                        "leftborder lifepathnotes lifepathnotes rightborder"
                        "leftborder strings strings rightborder"
                        "bottomborder bottomborder bottomborder bottomborder";
    
}

/*.sheet-tabstoggle[value="character"] ~ div.sheet-character,
.sheet-tabstoggle[value="conditions"] ~ div.sheet-conditions,
.sheet-tabstoggle[value="lifepath"] ~ div.sheet-lifepath {
    display: block;
}*/

/*----------------- GENERAL CSS ------------------*/
input {
    display: inline-block;
    width: 16px;
}

input[type="number"] {
    display: inline-block;
    width: 500px;
}

textarea {
    display: inline-block;
    resize: vertical;
    vertical-align: top;
    height: 18px;
}

.sheet-section {
    padding: 5px;
    border-style: solid;
}

.sheet-single-char {
    width: 20px;
}

.sheet-labeltext {
    font-size: 1em;
    text-shadow: -2px 0 white, 0 2px white, 2px 0 white, 0 -2px white;
}

.sheet-checkbox, .sheet-toggle-show {
    display: inline-block;
    width: 10px;
}

.sheet-red {
    color: red;
}

.sheet-blue {
    color: blue;
}

.sheet-green {
    color: green;
}

input.sheet-toggle-show:not(:checked) ~ div.sheet-showable {
    display:none;
}

.sheet-ability-box {
    overflow: auto;
    background-repeat: no-repeat;
    border: 3px solid black;
}

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

input.sheet-stat-container {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid black;
    width: 25px;
    font-size: 1em;
}

/*-------------- Function-Specific CSS ----------------*/

        /*Rune Dropdown CSS*/
.sheet-rune-container {
    width: 25px;
    display: inline-block;
}

.sheet-type-container {
    width: 80px;
    display: inline-block;
}

.sheet-rune-child, .sheet-type-child {
    vertical-align: middle;
    width: 100%;
    height: auto;
    display: inline-block;
    padding: 1px;
    background: white;
}

.sheet-type-child {
    font-size: 0.8em;
}

.sheet-rune-child input, .sheet-rune-child input + span,
.sheet-type-child input, .sheet-type-child input + span {
    display: none;
}

.sheet-rune-child:hover {
    background: LightGray;
    position:absolute;
    width: 65px;
    height: auto;
    z-index: 1;
    top: 0;
    padding: 0px;
}

.sheet-type-child:hover {
    background: LightGray;
    position:absolute;
    width: 90px;
    height: auto;
    z-index: 1;
    top: 0;
    padding: 0px;
}

.sheet-rune-child:hover input,
.sheet-rune-child:hover input + span {
    display: inline-block;
    width: auto;
    margin-left: 1px;
}

.sheet-type-child:hover input,
.sheet-type-child:hover input + span{
    display: inline;
    width: auto;
    margin-left: 1px;
}

.sheet-rune-child:hover input + span {
   margin-right: 0px;
}

/*.sheet-type-child:hover input + span {
   display: inline;
   margin-right: 0px;
   font-size: 0.8em;
}*/

/*.sheet-rune-child:hover span {
    display: inline;
}*/

.sheet-rune-child:not(:hover) input.sheet-rune.sheet-void:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-fehu:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-tiwaz:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-berkano:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-ehwo:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-mann:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-claguz:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-ing:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-dagaz:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-othala:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-hagalaz:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-naudhneed:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-isaice:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-jethe:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-eihwas:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-pertho:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-elhaz:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-sowsun:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-thurisaz:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-cansuz:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-raidho:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-kenaz:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-gebgift:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-wunjo:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-uruz:checked + span,
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-physical:checked + span, 
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-mental:checked + span, 
.sheet-rune-child:not(:hover) input.sheet-rune.sheet-spiritual:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-manoeuvre:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-stance:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-interrupt:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-spell:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-feat:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-alka:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-rune:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-seith:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-song:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-verwandlung:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-shapechange:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-transform:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-divine:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-gate:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-shade:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-faith:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-snare:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-void:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-creation:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-providence:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-unseelie:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-ally:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-attack:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-compel:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-defend:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-provoke:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-question:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-bloodline:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-enchantment:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-primal:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-shadow:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-social:checked + span,
.sheet-type-child:not(:hover) input.sheet-type.sheet-summon:checked + span {
    display: inline-block;
}

        /* End Rune Dropdown */
        
/*------------- Section-specific CSS -------------*/
    /*-------------Character Page---------------------*/

.sheet-character .sheet-ability-box input, .sheet-character .sheet-ability-box textarea {
    background: rgba(255, 255, 255, 1);
}

.sheet-character .sheet-stat-container input {
    display: inline-block;
    background: rgba(255, 255, 255, 0.5);
    position: relative;
    width: 25px;
    
}

.sheet-character .sheet-bio {
  grid-area: bio;
  height: 130px;
  background-color: olive;
  background-image: url("https://github.com/yehoshua1312/Yehoshua/raw/master/roll20/roll20-character-sheets/images/BK-bio.png");
  background-size: 100%;
  background-opacity: 0.5;
}

.sheet-character .sheet-biotext{
    width: 50%;
}

.sheet-character .sheet-bio label {
    display: inline-block;
    width: auto;
}

.sheet-character .sheet-bio .sheet-voidrunebox {
    position: relative;
    left: 5%;
    top: 10%;
}

.sheet-character .sheet-stats {
  grid-area: stats;
  height: 130px;
  background-color: orange;
  background-image: url("https://github.com/yehoshua1312/Yehoshua/raw/master/roll20/roll20-character-sheets/images/BK-stats.png");
  background-size: 100%;
}

.sheet-character .sheet-stats .sheet-bio-stat-box {
    display: inline-block;
    position: relative;
    width: 22%;
    height: 80%;
    border: 0px solid blue;
}

.sheet-character .sheet-stats label {
    font-size: 1.2em;
    width: 100%;
    height: 10%;
    display: inline-block;
}

.sheet-character .sheet-stats .sheet-stat-image-container {
    
    display: inline-block;
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: transparent;
    height: 80%;
    width: 90%;
}

.sheet-character .sheet-stats .sheet-stat-container input {
    left: 30%;
    top: 45%;
}

.sheet-character .sheet-stats .sheet-destinycontainer {
    background-image: url("https://github.com/yehoshua1312/Yehoshua/blob/master/roll20/roll20-character-sheets/images/icon-destiny.png?raw=true");
}

.sheet-character .sheet-stats .sheet-essencecontainer {
    background-image: url("https://github.com/yehoshua1312/Yehoshua/blob/master/roll20/roll20-character-sheets/images/icon-essence.png?raw=true");
}

.sheet-character .sheet-stats .sheet-movecontainer {
    background-image: url("https://github.com/yehoshua1312/Yehoshua/blob/master/roll20/roll20-character-sheets/images/ICON-movement.png?raw=true");
}

.sheet-character .sheet-stats .sheet-sizecontainer {
    background-image: url("https://github.com/yehoshua1312/Yehoshua/blob/master/roll20/roll20-character-sheets/images/icon-size.png?raw=true");
}

.sheet-character .sheet-skills .sheet-ability-wrapper {
    width: 80%;
    position: relative;
    margin-right: auto;
    margin-left: auto; 
    background: transparent;
    display: block;
}

.sheet-character .sheet-skills {
  grid-area: skills;
  height: 223px;
  background-color: brown;
  background-image: url("https://github.com/yehoshua1312/Yehoshua/raw/master/roll20/roll20-character-sheets/images/BK-skills.png");
  background-size: 100%;
}

.sheet-character .sheet-passives {
  grid-area: passives;
  height: 223px;
  background-color: green;
  background-image: url("https://github.com/yehoshua1312/Yehoshua/raw/master/roll20/roll20-character-sheets/images/BK-passives.png");
  background-size: 100%;
}

.sheet-character .sheet-actives {
  grid-area: actives;
  height: 307px;
  background-color: coral;
  background-image: url("https://github.com/yehoshua1312/Yehoshua/raw/master/roll20/roll20-character-sheets/images/BK-actives.png?raw=true");
  background-size: 100%;
}

.sheet-character .sheet-socials {
  grid-area: socials;
  height: 307px;
  background-color: coral;
  background-image: url("https://github.com/yehoshua1312/Yehoshua/raw/master/roll20/roll20-character-sheets/images/BK-actives.png?raw=true");
  background-size: 100%;
}

.sheet-character .sheet-equipment {
  grid-area: equipment;
  background-color: grey;
  background-image: url("https://github.com/yehoshua1312/Yehoshua/blob/master/roll20/roll20-character-sheets/images/BK-equip.png?raw=true");
  background-size: 100%;
}

.sheet-character .sheet-notes {
    grid-area: notes;
    background-color: teal;
    background-image: url("https://github.com/yehoshua1312/Yehoshua/blob/master/roll20/roll20-character-sheets/images/BK-notes.png?raw=true");
    background-size: 100%;
    width: 99.5%;
}

.sheet-character .sheet-notes .sheet-notebox {
    resize: vertical;
    width: 90%;
    height: 58%;
}

.sheet-character .sheet-notes .sheet-labeltext {
    width: 10%;
}

    /*---------------------Repeating Sections----------------*/
.sheet-character .sheet-modlabel {
    display: inline-block;
    width: 50px;
    font-size: 1em;
}

.sheet-character .sheet-desclabel {
    display: inline-block;
    width: 80%;
    font-size: 1em;
}

.sheet-character .sheet-skills .sheet-skillname {
   display: inline-block;
   width: 70%;
}

.sheet-character .sheet-skills .sheet-skillrank {
    display: inline;
}

.sheet-character .sheet-skills .sheet-textbox {
    width: 85%;
}

.sheet-character .sheet-passives .sheet-passivename {
    display: inline-block;
    width: 50%;
}

.sheet-character .sheet-passives .sheet-type {
    display: inline-block;
    width: 125px;
}

.sheet-character .sheet-passives .sheet-textbox {
    display: inline-block;
    width: 85%;
}

.sheet-character .sheet-rune {
    display: inline-block;
    width: 10%;
}

.sheet-character .sheet-type {
    display: inline-block;
    width: 125px;
}

.sheet-character .sheet-actives .sheet-activename, .sheet-character .sheet-socials .sheet-socialname {
    display: inline-block;
    width: 30%;
}

.sheet-character .sheet-actives .sheet-pmeta, .sheet-character .sheet-socials .sheet-pmeta {
    display: inline-block;
    width: 75px;
    color: red;
}

.sheet-character .sheet-actives .sheet-mmeta, .sheet-character .sheet-socials .sheet-mmeta {
    display: inline-block;
    width: 75px;
    color: blue;
}

.sheet-character .sheet-actives .sheet-smeta, .sheet-character .sheet-socials .sheet-smeta {
    display: inline-block;
    width: 75px;
    color: green;
}

.sheet-character .sheet-actives .sheet-activedesc, .sheet-character .sheet-socials .sheet-socialdesc {
    display: inline-block;
    width: 100%;
}

.sheet-equip .repeating_equipment {
    display: inline-block;
    width: 100%;
}

.sheet-character .sheet-equipment .sheet-equipname {
    display: inline-block;
    width: 20%;
}

.sheet-character .sheet-equipment .sheet-textbox {
    display: inline-block;
    width: 70%;
}

    /*----------------------Current Page------------------*/
        /*-----------------------Section-Conditions--------------------*/
.sheet-current .sheet-conditions {
    grid-area: blind / blind / aura / aura;
    background-image: url("https://github.com/yehoshua1312/Yehoshua/blob/master/roll20/roll20-character-sheets/images/Conditions.png?raw=true");
    background-size: 260px 900px;
    background-repeat: no-repeat;
    position: relative;
}

.sheet-current .sheet-blind {
    grid-area: blind;
    position: center;
}

.sheet-current .sheet-degen-curse {
    grid-area: degen-curse;
}

.sheet-current .sheet-taunt {
    grid-area: taunt;
    resize: vertical;
}

.sheet-current .sheet-impeded {
    grid-area: impeded;
}

.sheet-current .sheet-shroud {
    grid-area: shroud;
}

.sheet-current .sheet-possession {
    grid-area: possession;
}

.sheet-current .sheet-rage {
    grid-area: rage;
}

.sheet-current .sheet-vulnerable {
    grid-area: vulnerable;
}

.sheet-current .sheet-aura {
    grid-area: aura;
}

.sheet-condition.sheet-grid-element input {
    background: transparent;
    width: 35px;
    color: white;
    border: none;
    font-size: 2.5em;
    display: inline-box;
}

.sheet-blind.sheet-numbox {
    position: relative;
    left: 75%;
    top: 50%;
}

.sheet-degen.sheet-numbox {
    position: relative;
    left: 40%;
    top: 15%;
}

.sheet-curse.sheet-numbox {
    position: relative;
    left: 60%;
    top: 15%;
}

.sheet-taunt.sheet-numbox {
    position: relative;
    left: 75%;
    top: 35%;
}

.sheet-impeded.sheet-numbox {
    position: relative;
    left: 75%;
    top: 5%;
}

.sheet-shroud.sheet-numbox {
    position: relative;
    left: 75%;
    top: 20%;
}

.sheet-possession.sheet-numbox {
    position: relative;
    left: 75%;
    top: 40%;
}

.sheet-rage.sheet-numbox {
    position: relative;
    left: 75%;
    top: 40%;
}

.sheet-vulnerable.sheet-numbox {
    position: relative;
    left: 75%;
    top: 30%;
}

.sheet-aura.sheet-numbox {
    position: relative;
    left: 75%;
    top: 30%;
}

        /*-----------------Section-Derived----------------*/
.sheet-current .sheet-derived {
    grid-area: derived;
    height: 100%;
    background-image: url("https://github.com/yehoshua1312/Yehoshua/blob/master/roll20/roll20-character-sheets/images/L_Background_abv.png?raw=true");
    background-size: 466px 900px;
    background-repeat: no-repeat;
    background-position: 0px center;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr;
    grid-template-areas:"PDF pierce focus"
                        "heal size move"
                        "PPF pparry evade"
                        "MDF MPF mparry"
                        "SDF SPF sparry"
                        "SoAF SoDF SoPR";
}

.sheet-derived-stat-label {
    display: block;
    height: 30px;
    position: relative;
    left: 50%;
    top: 15%;
}

.sheet-derived .sheet-stat-container {
    padding: 0px;
    width: 95%;
    height: 75%;
    position: absolute;
    top: 23%;
    background: transparent;
    background-position: ;
    background-size: 100%;
    background-repeat: no-repeat;
    border: none;
    display: inline-block;
}

.sheet-derived .sheet-stat-container input {
    position: relative;
    top: 55%;
    left: 34%;
    width: 35px;
    font-size: 1.5em;
    background: transparent;
    border: none;
}

.sheet-derived .sheet-grid-element {
    border: none;
    position: relative;
}

.sheet-stat-container input::-webkit-outer-spin-button,
.sheet-stat-container input::-webkit-inner-spin-button,
.sheet-condition.sheet-grid-element input::-webkit-outer-spin-button,
.sheet-condition.sheet-grid-element input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sheet-stat-container input[type=number],
.sheet-condition.sheet-grid-element input[type=number] {
  -moz-appearance: textfield;
}

.sheet-derived .sheet-pdf {
    grid-area: PDF;
    background: transparent;
}

.sheet-pdf .sheet-stat-container {
    background-image: url("https://github.com/yehoshua1312/Yehoshua/blob/master/roll20/roll20-character-sheets/images/icon-combat.png?raw=true");
    background-color: ;
}

.sheet-derived .sheet-pierce  {
    grid-area: pierce;
    background: transparent;
}

.sheet-pierce .sheet-stat-container {
    background-image: url("https://github.com/yehoshua1312/Yehoshua/blob/master/roll20/roll20-character-sheets/images/icon-pierce.png?raw=true");
}

.sheet-derived .sheet-focus {
    grid-area: focus;
    background: transparent;
}

.sheet-focus .sheet-stat-container {
    background-image: url("https://github.com/yehoshua1312/Yehoshua/raw/master/roll20/roll20-character-sheets/images/icon-focus.png?raw=true");
}

.sheet-derived .sheet-heal {
    grid-area: heal;
    background: transparent;
}

.sheet-heal .sheet-stat-container {
    background-image: url("https://github.com/yehoshua1312/Yehoshua/blob/master/roll20/roll20-character-sheets/images/icon-heal.png?raw=true");
}

.sheet-derived .sheet-size {
    grid-area: size;
    background: transparent;
}

.sheet-size .sheet-stat-container {
    background-image: url("https://github.com/yehoshua1312/Yehoshua/blob/master/roll20/roll20-character-sheets/images/icon-size.png?raw=true");
}

.sheet-derived .sheet-move {
    grid-area: move;
    background: transparent;
}

.sheet-move .sheet-stat-container {
    background-image: url("https://github.com/yehoshua1312/Yehoshua/blob/master/roll20/roll20-character-sheets/images/ICON-movement.png?raw=true");
}

.sheet-derived .sheet-ppf {
    grid-area: PPF;
    background: transparent;
}

.sheet-ppf .sheet-stat-container {
    background-image: url("https://github.com/yehoshua1312/Yehoshua/blob/master/roll20/roll20-character-sheets/images/Icon-armour%20physical.png?raw=true");
}

.sheet-derived .sheet-pparry {
    grid-area: pparry;
    background: transparent;
}
.sheet-pparry .sheet-stat-container {
    background-image: url("https://github.com/yehoshua1312/Yehoshua/raw/master/roll20/roll20-character-sheets/images/icon-parry.png?raw=true");
}

.sheet-derived .sheet-evade {
    grid-area: evade;
    background: transparent;
}

.sheet-evade .sheet-stat-container {
    background-image: url("https://github.com/yehoshua1312/Yehoshua/blob/master/roll20/roll20-character-sheets/images/icon-evade.png?raw=true");
}

.sheet-derived .sheet-mdf {
    grid-area: MDF;
    background: transparent;
}

.sheet-mdf .sheet-stat-container {
    background-image: url("https://github.com/yehoshua1312/Yehoshua/raw/master/roll20/roll20-character-sheets/images/icon-combat%20mental.png?raw=true");
}

.sheet-derived .sheet-mpf {
    grid-area: MPF;
    background: transparent;
}

.sheet-mpf .sheet-stat-container {
    background-image: url("https://github.com/yehoshua1312/Yehoshua/raw/master/roll20/roll20-character-sheets/images/Icon-armour%20mental.png?raw=true");
}

.sheet-derived .sheet-mparry {
    grid-area: mparry;
    background: transparent;
}

.sheet-mparry .sheet-stat-container {
    background-image: url("https://github.com/yehoshua1312/Yehoshua/raw/master/roll20/roll20-character-sheets/images/icon-mparry.png?raw=true");
}

.sheet-derived .sheet-sdf {
    grid-area: SDF;
    background: transparent;
}

.sheet-sdf .sheet-stat-container {
    background-image: url("https://github.com/yehoshua1312/Yehoshua/raw/master/roll20/roll20-character-sheets/images/icon-combat%20spiritual.png?raw=true");
}

.sheet-derived .sheet-spf {
    grid-area: SPF;
    background: transparent;
}

.sheet-spf .sheet-stat-container {
    background-image: url("https://github.com/yehoshua1312/Yehoshua/raw/master/roll20/roll20-character-sheets/images/Icon-armour%20spiritual.png?raw=true");
}

.sheet-derived .sheet-sparry {
    grid-area: sparry;
    background: transparent;
}

.sheet-sparry .sheet-stat-container {
    background-image: url("https://github.com/yehoshua1312/Yehoshua/raw/master/roll20/roll20-character-sheets/images/icon-sparry.png?raw=true");
}

.sheet-derived .sheet-soaf {
    grid-area: SoAF;
    background: transparent;
}

.sheet-soaf .sheet-stat-container {
    background-image: url("https://github.com/yehoshua1312/Yehoshua/raw/master/roll20/roll20-character-sheets/images/icon-sparry.png?raw=true");
}

.sheet-derived .sheet-sodf {
    grid-area: SoDF;
    background: transparent;
}

.sheet-sodf .sheet-stat-container {
    background-image: url("https://github.com/yehoshua1312/Yehoshua/raw/master/roll20/roll20-character-sheets/images/icon-sparry.png?raw=true");
}

.sheet-derived .sheet-sopr {
    grid-area: SoPR;
    background: transparent;
}

.sheet-sopr .sheet-stat-container {
    background-image: url("https://github.com/yehoshua1312/Yehoshua/raw/master/roll20/roll20-character-sheets/images/icon-sparry.png?raw=true");
}

    /*--------------rgs3 Page---------------------*/
.sheet-rgs3 .sheet-bio {
    grid-area: rgs3bio;
    border: 0px solid yellow;
}

.sheet-rgs3 .sheet-actives {
    grid-area: rgs3actives;
    border: 0px solid olive;
    font-size: 1em;
}

.sheet-rgs3 .sheet-socials {
    grid-area: rgs3socials;
    border: 0px solid blue;
    font-size: 1em;
}

.sheet-rgs3 .sheet-passives {
    grid-area: rgs3passives;
    border: 0px solid blue;
    font-size: 1em;
}

.sheet-rgs3 .sheet-skills {
    grid-area: rgs3skills;
    border: 0px solid green;
    font-size: 1em;
}

.sheet-rgs3 .sheet-equipment {
    grid-area: rgs3equip;
    border: 0px solid orange;
    font-size: 1em;
}

.sheet-rgs3 .sheet-currentstats {
    grid-area: rgs3derived;
    border: 0px solid brown;
}

.sheet-rgs3 .sheet-text-container {
    display: inline-block;
    background: rgba(255, 255, 255, 0.5);
}

.sheet-rgs3 .sheet-stat-container input {
    display: inline-block;
    background: rgba(255, 255, 255, 0.5);
    position: relative;
    width: 25px;
    
}

.sheet-rgs3 input.sheet-stat-container::-webkit-outer-spin-button, 
.sheet-rgs3 input.sheet-stat-container::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sheet-rgs3 .sheet-playernamebox {
    width: 22%;
    position: relative;
    float: left;
    top: 0%;
    left: 37%;
}

.sheet-rgs3 .sheet-charnamebox {
    width: 24%;
    position: relative;
    float: left;
    top: 13%;
    left: 13%;
}

.sheet-rgs3 .sheet-levelbox {
    top: 9.5%;
    left: 36%;
}

.sheet-rgs3 .sheet-essencebox input {
    top: 35%;
    left: -43%;
}

.sheet-rgs3 .sheet-destinybox input {
    top: 35%;
    left: -22%;
}

.sheet-rgs3 .sheet-basesizebox input {
    top: 35%;
    left: -1%;
}

.sheet-rgs3 .sheet-healbox input {
    top: 64%;
    left: -61.5%;
    background: transparent;
    border: none;
}

.sheet-rgs3 .sheet-movebox input {
    top: 62%;
    left: -53.5%;
    background: transparent;
    border: none;
}

.sheet-rgs3 .sheet-focusbox input {
    top: 52%;
    left: 52%;
    background: transparent;
    border: none;
}

.sheet-rgs3 .sheet-sizebox input {
    top: 52%;
    left: 64%;
    background: transparent;
    border: none;
}

.sheet-rgs3 .sheet-archtypebox {
    position: relative;
    top: 74%;
    left: 30%;
    width: 50%;
}

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

.sheet-rgs3 .sheet-currentstats .sheet-statgrid {
    display: grid;
    position: relative;
    border: 0px solid black;
    width: 47%;
    height: 72%;
    left: 52%;
    top: 4%;
    grid-gap: 0px;
    grid-template-columns: 30% 45% 25%;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas:"SoAF SoPR SoDF"
                        "PDF PPF PParry"
                        "MDF MPF MParry"
                        "SDF SPF SParry";
}

.sheet-rgs3 .sheet-currentstats .sheet-derived input {
    left: 25%;
    top: 50%;
    font-size: .85em;
    height: 40%;
    width: 44%;
    background: transparent;
    font-weight: bold;
    border: none;
    text-align: center;
}

.sheet-rgs3 .sheet-currentstats .sheet-soaf {
    grid-area: SoAF;
}

.sheet-rgs3 .sheet-currentstats .sheet-sopr {
    grid-area: SoPR;
}

.sheet-rgs3 .sheet-currentstats .sheet-pdf {
    grid-area: PDF;
}

.sheet-rgs3 .sheet-currentstats .sheet-ppf {
    grid-area: PPF;
}

.sheet-rgs3 .sheet-currentstats .sheet-pparry {
    grid-area: PParry;
}

.sheet-rgs3 .sheet-currentstats .sheet-mdf {
    grid-area: MDF;
}

.sheet-rgs3 .sheet-currentstats .sheet-mpf {
    grid-area: MPF;
}

.sheet-rgs3 .sheet-currentstats .sheet-mparry {
    grid-area: MParry;
}

.sheet-rgs3 .sheet-currentstats .sheet-sdf {
    grid-area: SDF;
}

.sheet-rgs3 .sheet-currentstats .sheet-spf {
    grid-area: SPF;
}

.sheet-rgs3 .sheet-currentstats .sheet-sparry {
    grid-area: SParry;
}

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

.sheet-rgs3 .sheet-modlabel {
    display: inline-block;
    width: 30px;
    font-size: .8em;
}

.sheet-rgs3 .sheet-desclabel {
    display: inline-block;
    width: 95%;
    font-size: 0.8em;
}

.sheet-rgs3 .sheet-reach {
    line-height: 90%;
}

.sheet-rgs3 .sheet-desc {
    display: inline-block;
    font-size: 1em;
    height: 12px;
    width: 94%;
}

/*.sheet-rgs3 .sheet-equip .sheet-textbox {
    display: inline-block;
    width: 70%;
    vertical-align: top;
    height: 18px;
}*/

.sheet-rgs3 .sheet-actives .sheet-activename {
    display: inline-block;
    width: 45%;
    height: 18px;
    font-size: 0.8em;
}

.sheet-rgs3 .sheet-socials .sheet-socialname {
    display: inline-block;
    width: 45%;
    height: 18px;
    font-size: 0.8em;
}

.sheet-rgs3 .sheet-skills .sheet-skillname {
    display: inline-block;
    width: 45%;
    height: 18px;
    font-size: 0.8em;
}

.sheet-rgs3 .sheet-equipment .sheet-equipname {
    display: inline-block;
    width: 20%;
    height: 18px;
    font-size: 0.8em;
}

.sheet-rgs3 .sheet-equipdesc {
    display: inline-block;
    font-size: 1em;
    height: 12px;
    width: 70%;
}

.sheet-rgs3 .sheet-pmeta {
    display: inline-block;
    width: 31%;
    color: red;
    font-size: 0.9em;
    height: 25px;
}

.sheet-rgs3 .sheet-mmeta {
    display: inline-block;
    width: 31%;
    color: blue;
    font-size: 0.9em;
    height: 25px;
}

.sheet-rgs3 .sheet-smeta {
    display: inline-block;
    width: 31%;
    color: green;
    font-size: 0.9em;
    height: 25px;
}

.sheet-rgs3 .sheet-passives .sheet-passivename {
    display: inline-block;
    width: 45%;
    height: 18px;
    font-size: 0.8em;
}

.sheet-rgs3 .sheet-passives .sheet-textbox {
    display: inline-block;
    width: 95%;
}

.sheet-rgs3 .sheet-skillrank {
    height: 18px;
    font-size: 0.8em;
}

    /*--------------Lifepath Page---------------------*/
.sheet-lifepath .sheet-characteristics {
    grid-area: characteristics;
    border: 0px solid yellow;
}

.sheet-lifepath .sheet-earlylife {
    grid-area: earlylife;
    border: 0px solid blue;
}

.sheet-lifepath .sheet-socialposition {
    grid-area: socialposition;
    border: 0px solid green;
}

.sheet-lifepath .sheet-brusheswithpower {
    grid-area: brushes;
    border: 0px solid purple;
}

.sheet-lifepath .sheet-dwellerrelationships {
    grid-area: relationships;
    border: 0px solid black;
}

.sheet-lifepath .sheet-lifepathnotes {
    grid-area: lifepathnotes;
    border: 0px solid red;
}

.sheet-lifepath .sheet-strings {
    grid-area: strings;
    border: 0px solid yellow;
}

.sheet-lifepath label {
    height: 1.5em;
    border: 0px solid black;
}

.sheet-lifepath .sheet-text-container {
    display: inline-block;
    background: rgba(255, 255, 255, 0.5);
    width: 22%;
    position: relative;
}

.sheet-lifepath .sheet-lifepathdesc {
    display: inline-block;
    background: rgba(255, 255, 255, 0.5);
    width: 60%;
    position: relative;
}

.sheet-lifepath .sheet-spacer {
    display: inline-block;
    width: 3%;
}

.sheet-lifepath .sheet-lifepathlabel {
    display: inline-block;
    width: 13%;
}

.sheet-lifepath .sheet-earlylifetext {
    display: inline-block;
    height: 1.8em;
    width: 85%;
    background: rgba(255, 255, 255, 0.5);
}

.sheet-lifepath .sheet-lifetext {
    display: inline-block;
    height: 1em;
    width: 80%;
    background: rgba(255, 255, 255, 0.5);
}

.sheet-lifepath .sheet-sublabel {
    display: inline-block;
    font-size: .8em;
    width: 15%;
}

.sheet-lifepath .sheet-brushes {
    height: 1.8em;
}

.sheet-lifepath .sheet-lifepathname {
    display: inline-block;
    height: 1em;
    border: 0px solid black;
    width: 98%;
}

.sheet-lifepath .sheet-earlylife label, .sheet-lifepath .sheet-socialposition label {
    position: relative;
}

.sheet-lifepath .sheet-repeatinginput {
    display: inline;
    position: relative;
    width: 83%;

}

.sheet-lifepath .sheet-contacttext {
    display: inline-block;
    height: 1.8em;
    background: rgba(255, 255, 255, 0.5);
    width:100%;
    left: 15%;
    top: -20%;
}

.sheet-lifepath .sheet-linespace {
    height: 1em;
}

.sheet-lifepath .sheet-dwellerrelationships .sheet-dweller {
    width: 15%;
}

.sheet-lifepath .sheet-dwellerrelationships .sheet-circumstance {
    width: 55%;
}

.sheet-lifepath .sheet-dwellerrelationships .sheet-state {
    width: 25%;
}

.sheet-lifepath .sheet-lifepathtext {
    display: inline-block;
    height: 1em;
}

.sheet-lifepath .sheet-lifenotes {
    display: inline-block;
    height: 70%;
    width: 97%;
    background: rgba(255, 255, 255, 0.5);
    border: 0px solid black;
}

.sheet-lifepath .sheet-strings .sheet-target {
    width: 15%;
}

.sheet-lifepath .sheet-strings .sheet-information {
    width: 55%;
}

.sheet-lifepath .sheet-strings .sheet-notes {
    width: 25%;
}

.sheet-lifepath .sheet-stringtext {
    display: inline-block;
    background: rgba(255, 255, 255, 0.5);
    height: 1.8em;
    position: relative;
}