.sheet-body { width: 825px; height: 1275px; } .charsheet textarea { resize: none; /* Disables resizability */ } .sheet-block-armor-class, .sheet-block-armor-switch:checked ~ .sheet-block-armor-class-ascending { display: block; } .sheet-block-armor-class-ascending, .sheet-block-armor-switch:checked ~ .sheet-block-armor-class { display: none; } /*----------- Tabs Setup -------------*/ /*this hides the contents of each tab by default*/ .charsheet div[class^="sheet-section"] { display: none; } .charsheet input.right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px; } /*this shows the tab content when the appropriate input field is selected*/ .charsheet input.sheet-tab1:checked ~ div.sheet-section-mecha, .charsheet input.sheet-tab2:checked ~ div.sheet-section-kaiju{ 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 20px tall and makes sure it's above everything else*/ .charsheet input.sheet-tab { width: 100px; height: 20px; cursor: pointer; position: relative; opacity: 0; z-index: 9999; left: 20px; } /*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: 0px; width: 100px; height: 20px; cursor: pointer; position: relative; vertical-align: middle; margin-left: -83px;/*originally 91px*/ left: 0px; } /*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-tab99:checked + span.sheet-tab99 { background: #2c424e; color: #bfc4c6; border-radius: 0px; } /*----------- End Tab Setup -----------*/ .sheet-container { background-color:#ffffff; } .charsheet .sheet-section-mecha { background: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/MechaAndMonsters/MechaSheet.jpg"); background-repeat:no-repeat; background-position:top left; height:1275px; width:825px; color:white; } .charsheet .sheet-section-kaiju { background: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/MechaAndMonsters/KaijuSheet.jpg"); background-repeat:no-repeat; background-position:top left; height:1275px; width:825px; color:white; } .sheet-text { line-height:20px; font-size:1.5em; text-size:1.5em; color:blue; } .sheet-text-center { line-height:20px; font-size:1.5em; text-size:1.5em; text-align:center; color:blue; }