.sheet-body { width: 82.5rem; height: 127.5rem; z-index: 0; } .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: 0rem; width: 30rem; border: 0.3rem solid #73AD21; padding: 1rem; } /*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; z-index: 1; } .charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] { display: block; } /*this hides the radio button for each tab, makes it 10rem wide and 2rem tall and makes sure it's above everything else*/ .charsheet input[type="radio"].sheet-tab { width: 10rem; height: 2rem; cursor: pointer; position: relative; opacity: 0; z-index: 9999; left: 2rem; } /*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: 1.5rem; background: #c7c3b0; color: black; font-weight: bold; border-top-right-radius: .6rem; width: 12rem; height: 2rem; cursor: pointer; position: relative; vertical-align: middle; margin: 0 -0.75rem 0 -10.35rem; z-index: 0; } /*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; z-index: 1; } /*----------- 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:127.5rem; width:82.5rem; 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:127.5rem; width:82.5rem; color:white; } .sheet-text { line-height:2rem; font-size:1.5em; color:blue; position: relative; border-radius: 0.6rem; height: 2.7rem; } textarea { position: relative; border-radius: 0.6rem; height: 2.7rem; } .sheet-text-center { line-height:2rem; font-size:1.5em; text-align:center; color:blue; position: relative; width: 3.5rem; margin-top: 2.4rem; } .sheet-descriptions { margin-top: 3rem; margin-left: 2.2rem; width: 16.3rem; height: 14.9rem; } .sheet-radio-type { margin-top: 0.6rem; margin-left: 1.8rem; } .sheet-radio-type1 { margin-top: 0.6rem; margin-left: 7.1rem; } .sheet-radio-type2 { margin-top: 0.6rem; margin-left: 1.7rem; } .sheet-radio-type3 { margin-top: 0.7rem; margin-left: 1.8rem; } .sheet-radio-type4 { margin-top: 0.7rem; margin-left: 1.7rem; } .sheet-radio-type5 { margin-top: 0.7rem; margin-left: 7.1rem; } input[type="radio"] { height: 1.5rem; width: 1.5rem; }