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


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


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


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

h3{
  text-align: center;
}

.sheet-short{
  width: 50px;
}

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

.sheet-slash{
  font-size: 2em;
  font-weight: bold;
}


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

input[type="text"].sheet-w30,
input[type="number"].sheet-w30{
  width: 30px;
}

input[type="text"].sheet-w40,
input[type="number"].sheet-w40{
  width: 40px;
}

input[type="text"].sheet-w50,
input[type="number"].sheet-w50{
  width: 50px;
}

input[type="text"].sheet-w70,
input[type="number"].sheet-w70{
  width: 70px;
}

input[type="text"].sheet-w110,
input[type="number"].sheet-w110{
  width: 110px;
}

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

input[type="text"].sheet-stat,
input[type="number"].sheet-stat{
  font-size: 2em;
  font-weight: bold;
}

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



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


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

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

button[type="roll"].sheet-txt-btn{
  height: 22px;
  border-style: none;
  background-color: transparent;
  margin-left: 5px;
  font-weight: bold;
  padding: 2px 5px 4px 5px;
}

button[type="roll"].sheet-txt-btn:hover{
    background-color: #d9d9d9;
    border-radius: 10px;
}


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

.sheet-version{
    float: right;
    margin-top: -20px;
}


/* --------- General Section Styling ------------- */
.sheet-section {
  display: flex;
  padding: 5px;
  border: 2px solid black;
  background: white;
  opacity: 0.9;
}

.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;
}


/* Tabs */

.sheet-character,
.sheet-journal,
.sheet-config{
  display: none;
}

/* show the selected tab */
.sheet-tabstoggle[value="character"] ~ div.sheet-character,
.sheet-tabstoggle[value="journal"] ~ div.sheet-journal,
.sheet-tabstoggle[value="configuration"] ~ div.sheet-config{
  display: grid;
}


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

div.sheet-page1 {
  display: grid;
  grid-template-columns: 4fr 8fr 5fr 6fr;
  grid-template-rows: repeat(5, 2fr) 5fr 4fr;
  grid-template-areas:"name name    name    name     " 
                      "attr skills  hp      condition"
                      "attr skills  prof    condition"
                      "attr skills  ac      condition"
                      "attr skills  speed   condition"
                      "attr skills  saves   ammo     " 
                      "attr attacks attacks attacks  "; 
  width: 850px;
  height: 1000px;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Stargate-RPG/images/bg.png);
  background-repeat: no-repeat;
  background-size: 700px 700px;
  background-position: center;
  background-color: black;
  margin-top: -23px;
}

div.sheet-page2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:    1fr 1fr 1fr;
  grid-template-areas:"racial feats    "
                      "class  equipment"
                      "prof   notes    ";
  width: 840px;
  height: 990px;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Stargate-RPG/images/bg.png);
  background-repeat: no-repeat;
  background-size: 700px 700px;
  background-position: center;
  background-color: black;
  margin-top: -23px;
  grid-gap: 10px;
  padding: 5px;
}

div.sheet-config {
  display: grid;
  width: 50px;
  height: 1000px;
}

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


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

/* NAME SECTION */
div.sheet-name{
  grid-area: name;
  padding: 5px 0px 0px 0px;
  margin: 5px;
  width: 834px;
}

div.sheet-name label{
    padding-left: 10px;
}

/* ATTRS SECTION */
div.sheet-attr{
  grid-area: attr;
}
div.sheet-attr .sheet-stat{
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Stargate-RPG/images/attr.png);
  background-repeat: no-repeat;
  background-size: 124px 113px;
  width: 120px;
  height: 120px;
  background-position: center;
}
div.sheet-attr span:not(.sheet-mod),
div.sheet-skills span:not(.sheet-mod){
  font-weight: bold;
  font-size: 1.1em;
  text-transform: uppercase;
}

div.sheet-attr span:not(.sheet-mod){
  font-size: 1.5em;
}

div.sheet-skills span.sheet-mod,
div.sheet-prof span.sheet-mod,
div.sheet-saves span.sheet-mod{
  width: 25px;
  margin-top: 4px;
  border-style: none none solid none;
  margin-bottom: 4px;
  border-width: 2px;
  text-align: center;
}

div.sheet-attr span.sheet-mod{
  width: 25px;
  margin-top: 4px;
  border-style: none;
  margin-bottom: 17px;
  border-width: 2px;
  text-align: center;
  font-weight: bold;
}

div.sheet-attr input[type="number"]{
  width: 2em;
  margin-bottom: 7px;
  border-style: none;
  font-weight: bold;
  font-size: 1.5em;
}

div.sheet-attr button[type="roll"].sheet-large{
    font-size: 1.5em;
    margin-bottom: 2px;
    border-radius: 15px;
}


/* skills SECTION */

div.sheet-skills{
  grid-area:skills;
  padding-left: 10px;
  margin: 5px 2px 5px 5px;
}

div.sheet-skills div{
  align-content: space-around;
}

div.sheet-skills span:not(.sheet-mod),
div.sheet-condition span{
  text-transform: uppercase;
}

div.sheet-skills span:not(.sheet-mod){
    font-size: 0.7em;
    padding-top: 9px;
    margin-left: 0px;
}

div.sheet-skills .sheet-mod{
  margin: 0px 4px 0px 4px; 
}

div.sheet-skills button[type="roll"]{
    margin-right: 0px;
    text-transform: uppercase;
    font-size: 1.2em;
}

div.sheet-skills input[type="number"],
div.sheet-saves input[type="number"]{
    margin-left: 5px;
}

/* hp SECTION */

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

div.sheet-hp > div:nth-child(2) {
  width: 100px;
}


div.sheet-hp div,
div.sheet-prof div,
div.sheet-ac div,
div.sheet-speed div{
  flex-grow: .4;
  margin: 5px;
}

div.sheet-hp label,
div.sheet-prof label{
  font-size: 1.1em;
  font-weight: bold;
}

div.sheet-ac label,
div.sheet-speed .sheet-speed label{
  font-size: 1.2em;
  font-weight: bold;
}

div.sheet-hp label.sheet-txtcenter{
  font-size: 1.8em;
}

div.sheet-hp .sheet-determ label{
  font-size: 1.2em;
  margin-right: 25px;
}

/* condition SECTION */

div.sheet-condition{
  grid-area:condition;
  padding-left: 10px;
  margin: 8px 25px 8px 4px; 
}

div.sheet-condition span{
  padding-left: 5px;
  font-weight: bold;
}

/* prof SECTION */

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

div.sheet-prof > div:nth-child(1) > label:nth-child(1){
  width: 80px;
}

div.sheet-prof > div:nth-child(2) > label:nth-child(1) {
 padding: 0px;
}


div.sheet-prof .sheet-init{
  margin-left: 2px;
  margin-right: 2px;
  padding-left: 2px;
  padding-right: 2px;
}

div.sheet-prof .sheet-moxie{
  width: 50px;
}

.sheet-prof > div:nth-child(2) > label:nth-child(1) {
  width: 56px;
}


div.sheet-moxie > label:nth-child(1) {
  width: 54px;
}


/* ac SECTION */

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

div.sheet-prof label.sheet-wide,
div.sheet-ac label.sheet-wide{
  width: 96px;
  padding: 0px;
}


/* speed SECTION */

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

div.sheet-speed input[type="text"]{
  padding: 5px
}

div.sheet-speed div.sheet-death label{
    width: 100px;
    padding: 0px;
}

div.sheet-speed div.sheet-death span{
    font-size: 0.8em;
    font-weight: bold;
}

div.sheet-speed div.sheet-death div{
  margin: 5px 0px;
}

div.sheet-death > div:nth-child(3) > span:nth-child(4){
    padding-right: 9px;
}

div.sheet-speed div.sheet-death input[type="checkbox"]{
    transform: scale(0.8);
}


/* saves SECTION */

div.sheet-saves{
  grid-area:saves;
  margin: 5px 20px 5px 5px;
  justify-content: space-between;
}

div.sheet-saves div{
  padding-left: 8px;
}

div.sheet-saves span.sheet-mod{
  margin: 0px 4px; 
}

div.sheet-saves div.sheet-mb20{
    margin-bottom: 20px;
}



/* ammo SECTION */

div.sheet-ammo.sheet-grid{
  grid-area:ammo;
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  padding: 5px 20px 5px 0px;
}

div.sheet-ammo label{
  text-align: center;
  padding: 0px 0px 5px 0px;
}

div.sheet-ammo div{
  margin: 7px 1px 7px 1px;
}


/* attacks SECTION */

div.sheet-attacks{
  grid-area:attacks;
  display: grid;
  grid-template-columns: 4fr repeat(5, 1fr) 2fr;
  grid-template-rows: repeat(5, 1fr);
  margin: 0px 20px 10px 5px;
}

div.sheet-attacks label{
  text-transform: capitalize;
}

div.sheet-attacks .sheet-name{
  padding-left: 65px;
}

div.sheet-attacks .sheet-dmg-type{
  padding-left: 9px;
}

div.sheet-attacks span{
  height: 25px;
}

div.sheet-attacks div button[type="roll"],
div.sheet-attacks div input[type="text"]{
 height: 20px;
}

div.sheet-attacks .sheet-mr15{
    margin-right: 15px;
}

div.sheet-attacks .sheet-ml15{
    margin-left: 15px;
}

div.sheet-attacks .sheet-pl20{
    padding-left: 20px;
}





/*  -------- Page 2 -------- */


div.sheet-page2 label{
  font-size: 1.4em;
  font-weight: bold;
  text-align: center;
  width: 140px;
}

div.sheet-page2 textarea{
  width: 390px;
  height: 280px;
  margin-bottom: 0px;
}

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

input.sheet-tab1:checked ~ div.sheet-tab1,
input.sheet-tab2:checked ~ div.sheet-tab2{
  display: grid;
}

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

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

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