roll20-character-sheets/Dragonlance 5th Age/DL-5th-age.css

/* ROLL20 Styles */
 .sheet-col {
}
 .charsheet {
     background: url("https://i.imgur.com/bpVH2tR.jpg");
     color:black;
}
/*----------- 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-2, .charsheet input.sheet-tab3:checked ~ div.sheet-section-3 {
     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: #ededed;
     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 {
     background: #cc0707;
     color: #fff;
     border-radius: 4px;
}
/*----------- End Tab Setup -----------*/
 .sheet-container {
     width: 99%;
     padding-bottom: 5px;
     padding: 5px 5px;
     margin-top: 20px;
     border: 1px double #7a7a7a;
     outline-style: double;
     outline-color: gray;
     border-top: 5px solid orange;
}
/* Ability Icons */
 .sheet-ability-icons {
     width: 40%;
}
/* Headers */
 .sheet-section-header-img {
     position: relative;
     left: -8px;
}
 .sheet-section-border {
     width: 100%;
     border-bottom: 3px solid #000000;
     margin-bottom: 1px;
     padding-bottom: 1px;
}
/* DivTable.com */
 .sheet-divTable{
     display: table;
}
 .sheet-divTableRow {
     display: table-row;
}
 .sheet-divTableHeading {
     display: table-header-group;
}
 .sheet-divTableCell, .sheet-divTableHead, .sheet-LdivTableCell {
     display: table-cell;
    /*border: 1px solid red;
    */
}
 .sheet-divTableHeading {
     display: table-header-group;
}
 .sheet-divTableFoot {
     display: table-footer-group;
}
 .sheet-divTableBody {
     display: table-row-group;
}
 .sheet-divTableCell {
     text-align:center;
     white-space: nowrap;
     overflow: hidden;
}
 .sheet-blue {
     border: 1px solid gray;
}
 .sheet-LdivTableCell {
     display: inline-block;
     text-align:left;
}
/* BLUE TABLE */
 .sheet-blueTable {
     width: 100%;
     text-align: center;
}
 .sheet-divTable.sheet-blueTable .sheet-divTableCell, .sheet-divTable.sheet-blueTable .sheet-divTableHead {
}
 .sheet-divTable.sheet-blueTable .sheet-divTableBody .sheet-divTableCell {
}
 .sheet-divTable.sheet-blueTable .sheet-divTableHeading {
}
 .sheet-divTable.sheet-blueTable .sheet-divTableHeading .sheet-divTableHead {
     font-weight: bold;
     text-align: center;
}
 .sheet-blueTable .sheet-tableFootStyle {
}
/* CINEROUS TABLE */
 .sheet-cinereousTable {
     width: 100%;
     text-align: left;
}
 .sheet-divTable.sheet-cinereousTable .sheet-divTableCell, .sheet-divTable.cinereousTable .sheet-divTableHead {
}
 .sheet-divTable.sheet-cinereousTable .sheet-divTableBody .sheet-divTableCell {
}
 .sheet-cinereousTable .sheet-tableFootStyle {
}
/* MISC */
 .sheet-shortfield {
     width: 30%;
     text-align: center;
     display: inline-block;
     margin: 3px 0px;
}
 .sheet-medfield-centered {
     width: 75%;
     text-align: center;
     margin: 3px 0px;
}
 .sheet-medfield {
     width: 75%;
     text-align: left;
     margin: 2px 0px;
}
 .sheet-longfield {
     width: 100%;
     text-align: left;
     margin: 2px 0px;
}
 .sheet-yellowlbl {
     text-align: center;
}
 .sheet-repeating-sm {
     width: 45%;
     text-align: center;
     margin-top: 9px;
}
 .sheet-repeating1 {
     width: 100%;
}
 .sheet-repeating2 {
     text-align: left;
     margin-top: 10px;
}
 .sheet-textarea {
     width: 97%;
     height: 300px 
}
 .sheet-input-number {
     float:left;
}
 .sheet-repeating {
     width: 75%;
     margin: 2px 0px;
}