roll20-custom-sheet.css

/*----------- Logo -------------*/

img.sheet-logo {
  float: right;
  padding-right: 30px;
}


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

/*this hides the contents of each tab by default*/
.charsheet div[class^="sheet-section"] {
  display: none;
}

/*this shows the tab content when the appropriate input field is selected*/
.charsheet input.sheet-tab1:checked~div.sheet-section-profile,
.charsheet input.sheet-tab2:checked~div.sheet-section-inv,
.charsheet input.sheet-tab4:checked~div.sheet-section-spells,
.charsheet input.sheet-tab3:checked~div.sheet-section-abilities {
  display: block;
  width: 800px;
  background-color: white;
}

.charsheet input.sheet-tab99:checked~div[class^="sheet-section"] {
  display: block;
}

/*this hides the radio button for each tab, makes it 100px wide and 40px tall and makes sure it's above everything else*/
.charsheet input.sheet-tab {
  width: 100px;
  height: 40px;
  cursor: pointer;
  position: relative;
  opacity: 0;
  transform: translate(6px, 17px);
  z-index: 9999;
}

/*this styles the span with the tab information and slides to the left, so it appears underneath the radio button*/
.charsheet span.sheet-tab {
  text-align: center;
  display: inline-block;
  font-size: 13px;
  background: #c7c3b0;
  color: white;
  font-weight: bold;
  border-radius: 4px;

  width: 100px;
  height: 40px;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  margin-left: -101px;
  /*originally 91px*/
}

/*this modifies the span color once the radio button is selected so you know which tab is selected*/
.charsheet input.sheet-tab1:checked+span.sheet-tab1,
.charsheet input.sheet-tab2:checked+span.sheet-tab2,
.charsheet input.sheet-tab3:checked+span.sheet-tab3,
.charsheet input.sheet-tab4:checked+span.sheet-tab4,
.charsheet input.sheet-tab5:checked+span.sheet-tab5,
.charsheet input.sheet-tab6:checked+span.sheet-tab6,
.charsheet input.sheet-tab7:checked+span.sheet-tab7,
.charsheet input.sheet-tab8:checked+span.sheet-tab8,
.charsheet input.sheet-tab99:checked+span.sheet-tab99 {

  background: #2c424e;
  color: white;
  border-radius: 4px;
}

/*----------- End Tab Setup -----------*/


/*----------- Profile Section -------------*/

.charsheet .sheet-section-profile {
  background-color: #ffffff;
  background-repeat: no-repeat;
}

.charsheet div.sheet-section-profile {
  padding-top: 30px;
  padding-bottom: 10px;

}

.charsheet .sheet-section-profile p {
  font-family: 'Ovo', serif;
  font-size: 24px;
  margin-left: 20px;
  line-height: 1.6;
  width: 800px;

}


input[type=text],
input[type=number] {
  display: inline-block;
  margin-right: 5px;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid black;
  -moz-appearance: textfield;
  font-size: 24px;
  margin-top: -5px;
}

.charsheet input.sheet-name-field {
  width: 300px;
}

.charsheet input.sheet-pronoun {
  width: 130px;
  text-align: center;
}

.charsheet input.sheet-age {
  width: 70px;
}

.charsheet input.sheet-height {
  width: 180px;
}

.charsheet input.sheet-role {
  width: 275px;
}

.charsheet input.sheet-attribute {
  width: 275px;
}

.charsheet input.sheet-attribute2 {
  width: 500px;
}

.charsheet input.sheet-clothes {
  width: 340px;
}

.charsheet input.sheet-background {
  width: 440px;
}


.charsheet input.sheet-background2 {
  width: 630px;
}

.charsheet input.sheet-ethos {
  width: 370px;
}

.charsheet input.sheet-goal {
  width: 650px;
}

.charsheet textarea.sheet-notes {
  width: 760px;
  height: 130px;
  font-size: 24px;
}

.charsheet div.sheet-profile-notes {
  padding-top: 15px;
}

/*----------- End Profile Section -------------*/

/*----------- Abilities Section -------------*/

div.sheet-section-abilities {
  padding-top: 30px;
}

div.sheet-section-abilities p {
  font-size: 24px;
}

span.sheet-ap {
  float: right;

}

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

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

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

h3.sheet-ability-header {
  text-align: center;
  color: #FFF;
  background-color: #2c424e;
  margin-top: 20px;
  margin-bottom: 20px;
}

input.sheet-ability-name {
  margin-bottom: 10px;
  font-size: 18px;
}

input.sheet-ability-cost {
  margin-bottom: 10px;
  font-size: 18px;
  width: 75px;
}

textarea.sheet-ability-description {
  font-size: 18px;
  resize: none;
  width: 790px;
  resize: none;
}


/*----------- End Abilities Section -------------*/

/*----------- Inventory Section -------------*/

div.sheet-2colrow.sheet-2colrow-top {
  padding-top: 30px;
}

.charsheet textarea.sheet-inv {
  font-size: 18px;
  resize: none;
}


/*----------- End Inventory Section -------------*/


/*----------- Ability Roll Template -------------*/

.sheet-rolltemplate-ability table {
  width: 100%;
  padding: 2px;
  background-color: white;
  border: 1px solid #2c424e;
}

.sheet-rolltemplate-ability th {
  color: #FFF;
  background-color: #2c424e;
  padding: 5px;
  line-height: 1.1em;
  font-size: 1em;
  text-align: left;
  font-family: "Arial", Helvetica, sans-serif;
  text-transform: uppercase;
}

.sheet-rolltemplate-ability td {
  font-size: 14px;
  padding: 5px;
}


/*----------- End Ability Roll Template -------------*/