Character Sheet CSS

/* Tooltip container */
.charsheet-tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.sheet-tooltip .sheet-tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  width: 180px;
  top: 85%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

/* Show the tooltip text when you mouse over the tooltip container */
.sheet-tooltip:hover .sheet-tooltiptext {
  visibility: visible;
}

/*----------- 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-core,
.charsheet input.sheet-tab2:checked ~ div.sheet-section-skills,
.charsheet input.sheet-tab3:checked ~ div.sheet-section-spells,
.charsheet input.sheet-tab4:checked ~ div.sheet-section-gear {
    display: block;
}

.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;
    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: black;
    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: #bfc4c6;
    border-radius: 4px;
}
/*----------- End Tab Setup -----------*/

.sheet-bold {
    font-weight: 900;
}

.sheet-italic {
    font-style: italic;
}

.sheet-inline {
    display: inline-block;
}

.sheet-insanities-row {
    border: 1px solid black;
}

.sheet-sanity-sheet-row {
    border: 1px solid black;
}

.sheet-collapse {
    display: none;
}

.sheet-collapse-show:checked ~.sheet-collapse {
    display: block;
}

.sheet-collapse1 {
    display: none;
}

.sheet-collapse-show1:checked ~.sheet-collapse1 {
    display: block;
}

.sheet-collapse2 {
    display: none;
}

.sheet-collapse-show2:checked ~.sheet-collapse2 {
    display: block;
}

.sheet-collapse3 {
    display: none;
}

.sheet-collapse-show3:checked ~.sheet-collapse3 {
    display: block;
}

.sheet-collapse4 {
    display: none;
}

.sheet-collapse-show4:checked ~.sheet-collapse4 {
    display: block;
}

.sheet-collapse5 {
    display: none;
}

.sheet-collapse-show5:checked ~.sheet-collapse5 {
    display: block;
}

.sheet-collapse6 {
    display: none;
}

.sheet-collapse-show6:checked ~.sheet-collapse6 {
    display: block;
}

.sheet-textarea1 {
  width: 90%;
  height: 100px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
}

.sheet-textarea2 {
  width: 90%;
  height: 100px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
}

.sheet-container {
    width: 1000px;
    position: relative;
}


.sheet-buttonwidth {
  max-width: 186px;
}

/* rolltemplate skill rolls*/
.sheet-rolltemplate-ataw table {
    width: 100%;
    border: 1px solid black;
    color: black;
    background: #FFFFFF;
}
.sheet-rolltemplate-ataw caption {
    text-align: center;
    background: black;
    color: white;
    font-weight: bold;
    padding: 2px;
  border: 1px solid black;
  line-height: 1.6em;
}
.sheet-rolltemplate-ataw td {
  padding: 2px;
  border-bottom: 1px solid black;
}
.sheet-rolltemplate-ataw td.sheet-template_label {
    font-weight: bold;
}
.sheet-rolltemplate-ataw td.sheet-template_value {
    text-align: center;
}
.sheet-rolltemplate-ataw .inlinerollresult  {
  display: inline-block;
  min-width: 1.5em;
  text-align: center;
  border: 2px solid black;
    background: #BEBEBE;
}
.sheet-rolltemplate-ataw .inlinerollresult.fullcrit {
  border: 2px solid black;
    background: #BEBEBE;
}
.sheet-rolltemplate-ataw .inlinerollresult.fullfail {
  border: 2px solid black;
    background: #BEBEBE;
}
.sheet-rolltemplate-ataw .inlinerollresult.importantroll {
  border: 2px solid black;
    background: #BEBEBE;
}
/* rolltemplate stat rolls*/
.sheet-rolltemplate-stat table {
    width: 100%;
    border: 1px solid black;
    color: black;
    background: #FFFFFF;
}
.sheet-rolltemplate-stat caption {
    text-align: center;
    background: #FFA500;
    color: black;
    font-weight: bold;
    padding: 2px;
  border: 1px solid black;
  line-height: 1.6em;
}
.sheet-rolltemplate-stat td {
  padding: 2px;
  border-bottom: 1px solid black;
}
.sheet-rolltemplate-stat td.sheet-template_label {
    font-weight: bold;
}
.sheet-rolltemplate-stat td.sheet-template_value {
    text-align: center;
}
.sheet-rolltemplate-stat .inlinerollresult  {
  display: inline-block;
  min-width: 1.5em;
  text-align: center;
  border: 2px solid black;
    background: #BEBEBE;
}
.sheet-rolltemplate-stat .inlinerollresult.fullcrit {
  border: 2px solid black;
    background: #BEBEBE;
}
.sheet-rolltemplate-stat .inlinerollresult.fullfail {
  border: 2px solid black;
    background: #BEBEBE;
}
.sheet-rolltemplate-stat .inlinerollresult.importantroll {
  border: 2px solid black;
    background: #BEBEBE;
}

/* rolltemplate stat2 rolls*/
.sheet-rolltemplate-stat2 table {
    width: 100%;
    border: 1px solid black;
    color: black;
    background: #FFFFFF;
}
.sheet-rolltemplate-stat2 caption {
    text-align: center;
    background: #FFA500;
    color: black;
    font-weight: bold;
    padding: 2px;
  border: 1px solid black;
  line-height: 1.6em;
}
.sheet-rolltemplate-stat2 td {
  padding: 2px;
  border-bottom: 1px solid black;
}
.sheet-rolltemplate-stat2 td.sheet-template_label {
    font-weight: bold;
}
.sheet-rolltemplate-stat2 td.sheet-template_value {
    text-align: center;
}
.sheet-rolltemplate-stat2 .inlinerollresult  {
  display: inline-block;
  min-width: 1.5em;
  text-align: center;
  border: 2px solid black;
    background: #BEBEBE;
}
.sheet-rolltemplate-stat2 .inlinerollresult.fullcrit {
  border: 2px solid black;
    background: #BEBEBE;
}
.sheet-rolltemplate-stat2 .inlinerollresult.fullfail {
  border: 2px solid black;
    background: #BEBEBE;
}
.sheet-rolltemplate-stat2 .inlinerollresult.importantroll {
  border: 2px solid black;
    background: #BEBEBE;
}