/*------------------------------------------------*\
  #GENERAL
\*------------------------------------------------*/


/* --------- Text ------------- */

span{
  /*overflow: hidden;*/
}

span.sheet-bold{
  font-weight: 800;
  font-size: medium;
}

label {
  margin: 5px 0px 5px 0px;
  width: 70px;
  text-transform: capitalize;
  font-size: 1.1em;
  /*overflow: hidden;*/
}
label.sheet-title{
  width: 130px;
  font-size: 1.3em;
  text-align: center;
}

.sheet-short{
  width: 50px;
}

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

input[type="text"] {
  background-color: transparent;
  border-style: none none solid none;
  border-width: 2px;
  border-radius: 0px;
  border-color: black;
  padding: 0px 4px;
  margin: 0px 4px;
  width: auto;
}

input[type="number"]{
  background-color: transparent;
  border-style: none none solid none;
  border-width: 2px;
  border-radius: 0px;
  border-color: black;
  text-align: center;
  width: 40px;
}

textarea {
  background-color: transparent;
  background-image:
      linear-gradient(to right, transparent 5px, transparent 5px),
      linear-gradient(to left, transparent 5px, transparent 5px),
      repeating-linear-gradient(transparent, transparent 20px, #030303 20px, #000 22px, transparent 21px);
  line-height: 21px;
  padding: 3px 10px;
  border-style: none;
  width: 80%;
  height: 90%;
  margin-bottom: 0px;
}


input[type="checkbox"].sheet-checkbox {
  border-style: solid black;
  border-radius: 0px;
}

/* highlights empty fields with light gray */
textarea:placeholder-shown,
input[type="text"]:placeholder-shown,
input[type="number"]:placeholder-shown{
  background-color: #EAC9D1;
}

/* higlight selected input */
textarea:focus,
input[type="text"]:focus,
input[type="number"]:focus{
  background-color: #9E9698;
}



/* -----Hides up/down buttons on numberfields that don't need them ---*/

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button,
input[type=number].sheet-txtfield::-webkit-inner-spin-button,
input[type=number].sheet-txtfield::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number],
input[type=number].sheet-txtfield {
  -moz-appearance: textfield;
}

/* dice images */

div.sheet-d20{
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Ambition_Avarice/images/d20.png); 
  background-size: 30px 30px;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
}

div.sheet-d6{
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Ambition_Avarice/images/d6.png); 
  background-size: 30px 30px;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
}

/* ------- Buttons ---------- */

button[type="roll"].sheet-d20:before,
button[type="roll"].sheet-d6:before{
  content: ' ';
}

button[type="roll"].sheet-d20:hover,
button[type="roll"].sheet-d6:hover{
  background-position: 0;
}

button[type="roll"].sheet-d20{
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Ambition_Avarice/images/d20.png); 
  background-size: 26px 26px;
  background-repeat: no-repeat;
  width: 26px;
  height: 26px;
  border-style: none;
  background-color: transparent;
  margin-left: 5px;
}

button[type="roll"].sheet-d6{
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Ambition_Avarice/images/d6.png); 
  background-size: 26px 26px;
  background-repeat: no-repeat;
  width: 26px;
  height: 26px;
  border-style: none;
  background-color: transparent;
  margin-left: 5px;
}

/*
button[type="roll"].sheet-d6:before{
  font-family: 'dicefontd6';
  content: 'f';
}*/

button[type="roll"].sheet-d10:before{
  font-family: 'dicefontd10';
  content: 'j ';
}

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


/*-----------------------------------------------------------------*\
  #SECTIONS
\*-----------------------------------------------------------------*/


/* --------- General Section Styling ------------- */
.sheet-section {
  display: flex;
  padding: 5px;
  min-height: 90%;
}

.sheet-columnflex {
  display: flex;
  flex-direction: column;
}
.sheet-rowflex {
  display: flex;
  flex-direction: row;
}
.sheet-wrap {
  flex-wrap: wrap;
}
.sheet-nowrap {
  flex-wrap: nowrap;
}

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

.sheet-middle {
  justify-content: center;
}
.sheet-spaced {
  justify-content: space-evenly;
}
.sheet-note{
  margin-top: 5px;
}

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

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: grid;
}

/* styles tab button */
input.sheet-tab
{
  width: 150px;
  height: 22px;
  position: relative;
  top: -26px;
  left: 80px;

  margin: 5px 0px 5px 0px;
  padding: 0px;
  cursor: pointer;
  z-index: 1;
  opacity: 0;
}

input.sheet-tab + span::before
{
  content: attr(title);

  width: 150px;
  height: 22px;
  position: absolute;
  top: 50px;
  left: 110px;

  border: solid 2px grey;
  border-radius: 13px;
  padding-bottom: 2px;
  text-align: center;
  font-size: 18px;
  display: inline-block;
  background: white;
}

input.sheet-tab:checked + span::before
{
  background: #e5e5e5;
}

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

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

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

/* ------------ PAGES ---------- */

div.sheet-pg1 {
  display: grid;
  grid-gap: 1px;
  grid-template-columns: 7fr 2fr 8fr 12fr 4fr 12fr;
  grid-template-rows: 4fr 8fr 8fr 5fr 3fr 5fr;
  grid-template-areas:"name      name     name     name  logo  logo " 
                      "attrs     attrs    hp-ac    hp-ac hp-ac hp-ac"
                      "saving    dungeon  dungeon  sixes sixes profs"
                      "k-spells  k-spells k-spells class class lang " /* k-spells = known spells */
                      "spells-d  spells-d spells-d speed speed speed" /* spells-d = spells per day */
                      "spells-m  spells-m spells-m misc  exp   exp  "; /* spells-m = spells memorized */
  width: 750px;
  height: 1000px;
  position: relative;
  top:-20px;
}

div.sheet-pg2 {
  display: grid;
  grid-gap: 1px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 80px fit-content(30%) auto;
  grid-template-areas:"coin    ac-types  "
                      "weapons armor     "
                      "equip   companions";
  width: 750px;
  height: 1000px;
  position: relative;
  top:-20px;
}

div.sheet-pg3 {
  display: grid;
  grid-gap: 1px;
  grid-template-columns: 2fr 1fr 2fr;
  grid-template-rows: 45px auto;
  grid-template-areas:"npc-main  npc-main    npc-main"
                      "npc-attrs npc-buttons notes   ";
  width: 600px;
  height: 700px;
  position: relative;
  top:-20px;
}

div.sheet-pg4 {
  display: grid;
  grid-gap: 1px;
  grid-template-columns: 1fr 1fr;
  width: 750px;
  height: 1000px;
  position: relative;
  top:-20px;
}

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

/* ------------ Section Specific ---------- */



/* ------- page 1 ------------ */

/* NAME SECTION */
div.sheet-name{
  grid-area: name;
}
div.sheet-name div{
  margin: 3px 5px;
}
div.sheet-name input{
  width: 150px;
}
div.sheet-name .sheet-short{
  width: 60px;
  padding-right: 0px;
}

/* LOGO SECTION */
div.sheet-logo{
  grid-area: logo;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Ambition_Avarice/images/logo.png); 
  background-size: 230px 123px;
  background-repeat: no-repeat;
}

/* ATTRS SECTION */
div.sheet-attrs{
  grid-area: attrs;
}
div.sheet-attrs span:not(.sheet-info),
div.sheet-npc-attrs span:not(.sheet-info){
  width: 25px;
  margin-top: 4px;
  border-style: none none solid none;
  margin-bottom: 4px;
  border-width: 2px;
  text-align: center;
}
div.sheet-attrs input[type="number"],
div.sheet-npc-attrs input[type="number"],
div.sheet-saving input[type="number"],
div.sheet-dungeon input[type="number"]{
  width:30px;
  padding: 0px 0px;
  margin: 4px 4px;
}
div.sheet-attrs span.sheet-note{
  width: 100px;
}

/*       HP AC SECTION            */
div.sheet-hp-ac{
  grid-area: hp-ac;
}
div.sheet-hp-ac div.sheet-hp{
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Ambition_Avarice/images/hp.png); 
  background-size: 220px 110px;
  background-repeat: no-repeat;
  width: 220px;
  height: 110px;
}
div.sheet-hp-ac div.sheet-to-hit{
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Ambition_Avarice/images/to-hit.png); 
  background-size: 100px 110px;
  background-repeat: no-repeat;
  width: 100px;
  height:110px;
}
div.sheet-hp-ac div.sheet-ac{
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Ambition_Avarice/images/ac.png); 
  background-size: 100px 110px;
  background-repeat: no-repeat;
  width: 100px;
  height: 110px;
}

div.sheet-hp-ac div.sheet-infra{
  margin-top: 15px;
}
div.sheet-hp-ac div.sheet-spaced label{
  width: 65px;
  text-align: end;
}
div.sheet-hp-ac div.sheet-die input[type="text"]{
  width: 40px;
}
div.sheet-hp-ac div.sheet-to-hit label.sheet-title{
  width: 110px;
  padding-right: 0px;
}
div.sheet-hp-ac div.sheet-ac label.sheet-title{
  width: 100px;
  padding-right: 0px;
}
/* hp-ac buttons */
div.sheet-hp-ac .sheet-buttons label{
  text-align: center;
}
div.sheet-hp-ac .sheet-buttons input[type="number"]{
  width: 30px;
}
div.sheet-hp-ac .sheet-npc-buttons button[type="roll"]{
  margin-top: 4px;
}



/* saving throws */
div.sheet-saving{
  grid-area: saving;
}

div.sheet-dungeon{
  grid-area: dungeon;
}
div.sheet-dungeon label.sheet-title{
  text-align: start;
}
div.sheet-dungeon label.sheet-title,
div.sheet-sixes label.sheet-title{
  width: 150px;
}

div.sheet-sixes{
  grid-area: sixes;
}
div.sheet-sixes textarea{
  width: 220px;
}

/* proficiencies */
div.sheet-profs{
  grid-area: profs;
}

/* known spells */
div.sheet-k-spells{
  grid-area: k-spells;
}

div.sheet-class{
  grid-area: class;
}
div.sheet-class input{
  width: 150px;
}

div.sheet-lang{
  grid-area: lang;
}
div.sheet-lang textarea{
  width: 160px;
}

/* spells per day*/
div.sheet-spells-d{
  grid-area: spells-d;
}
div.sheet-spells-d label:not(.sheet-title){
  width: 40px;
  text-align: center;
}


div.sheet-speed{
  grid-area: speed;
  align-items: flex-end;
}
div.sheet-speed label{
  margin: 5px 2px;
}
div.sheet-speed .sheet-title,
div.sheet-spells-d .sheet-title{
  width: 200px;
}
div.sheet-speed .sheet-title{
  margin-right: 55px;
}

/* spells memorized */
div.sheet-spells-m{
  grid-area: spells-m;
}

div.sheet-misc{
  grid-area: misc;
}

div.sheet-exp{
  grid-area: exp;
}
div.sheet-spells-m .sheet-title,
div.sheet-exp .sheet-title{
  width: 160px;
}
div.sheet-exp label:not(.sheet-title){
  width: 110px;
}

/* ------- page 2 equipment ------------ */

div.sheet-coin{
  grid-area: coin;
}
div.sheet-coin label{
  text-align: center;
  margin: 1px;
}


div.sheet-weapons{
  grid-area: weapons;
}

div.sheet-armor{
  grid-area: armor;
}

div.sheet-weapons div.sheet-names,
div.sheet-armor div.sheet-names{
  width: 100%;
  justify-content: space-evenly; 
}

div.sheet-weapons div.sheet-names span,
div.sheet-armor div.sheet-names span{
  font-weight: bold;
}

div.sheet-weapons div.sheet-names span:first-child,
div.sheet-armor div.sheet-names span:first-child{
  align-self: flex-start;
}


.sheet-armor > div:nth-child(2) > span:nth-child(2) {
  padding-left: 60px;
}
.sheet-armor > div:nth-child(2) > span:nth-child(4) {
  padding-right: 35px;
}
.sheet-armor > div:nth-child(2) > span:nth-child(3) {
  padding-left: 20px;
}
.sheet-armor > div:nth-child(2) > span:nth-child(5) {
  padding-right: 10px;
}


div.sheet-equip{
  grid-area: equip;
}

div.sheet-ac-types{
  grid-area: ac-types;
}
.sheet-ac-types > div:nth-child(2) > div:nth-child(2) > label:nth-child(1) {
  margin-right: 15px;
}

div.sheet-companions{
  grid-area: companions;
}
div.sheet-companions input{
  margin-bottom: 4px;
}


/* ------- page 3 NPC ------------ */

div.sheet-npc-main{
  grid-area: npc-main;
}
div.sheet-npc-main label{
  text-align: center;
}

div.sheet-npc-buttons{
  grid-area: npc-buttons;
  margin-top: 10px;
}
div.sheet-npc-buttons button[type="roll"]{
  margin-top: 5px;
}

div.sheet-notes{
  grid-area: notes;
}