.charsheet label { display: inline-block; } .charsheet input { display: inline-block; width: 165px; } .sheet-col strong.sheet-dee { font-size: 1.4em; font-weight: bold; padding-right: 4px; } .charsheet input.sheet-short { width: 3.5em; } .charsheet { background-image: url("http://i.imgur.com/HEpfBm0.jpg"); } select.sheet-dtype { width: 60px; vertical-align: top; } .sheet-table{ width:100%; } .sheet-table td, .sheet-table th{ font-size: 1.2em; font-weight: bold; text-align: center; padding: 5px; } input[type="number"] { -moz-appearance: textfield; } input[type="number"]:hover, input[type="number"]:focus { -moz-appearance: number-input; } .sheet-desc-show:not(:checked)~.sheet-desc, .sheet-macro-text-show:not(:checked)~.sheet-macro-text, .sheet-sect-show:not(:checked)~.sheet-sect { display:none; } div[class^="sheet-section"] { visibility: hidden; opacity: 0; max-height:0; overflow: hidden; } div[class^="sheet-npc"] { visibility: hidden; opacity: 0; max-height:0; overflow: hidden; } input.sheet-tab99:checked ~ div[class^="sheet-section"] { max-height: 999999px; visibility: visible; opacity: 1; transition: opacity 0.5s linear 0s; overflow: auto; } input.sheet-tab { width: 70px; height: 20px; cursor: pointer; position: relative; opacity: 0; z-index: 9999; } span.sheet-tab { text-align: center; display: inline-block; font-size: 13px; background: black; color: white; font-weight: bold; width: 70px; height: 20px; cursor: pointer; position: relative; margin-left: -75px; } input.sheet-tab::before { content: attr(title); text-align: center; display: inline-block; width: 100%; height: 100%; background: black; color: white; font-weight: bold; } input.sheet-tab:checked::before { background:gray; color:white; } input.sheet-tab1:checked ~ div.sheet-section-roleplay, input.sheet-tab2:checked ~ div.sheet-section-combat, input.sheet-tab3:checked ~ div.sheet-section-spells { max-height: 999999px; visibility: visible; opacity: 1; transition: opacity 0.5s linear 0s; overflow: hidden; } input.sheet-tab1:checked + span.sheet-tab1, input.sheet-tab2:checked + span.sheet-tab2, input.sheet-tab3:checked + span.sheet-tab3, input.sheet-tab99:checked + span.sheet-tab99 { background: gray; color: white; } .sheet-text-button { font-size:100%; color:white; background-color:black; border:0px; } button, button:hover, button:active { background-image: none; } input[type="checkbox"] + span::before { margin-right: 4px; line-height: 14px; text-align: center; display: inline-block; vertical-align: middle; content: "[show]"; width: 14px; height: 14px; font-size: 12px; } input[type="checkbox"]:checked + span::before { content: "[hide]"; } .sheet-spellsTable{ border-collapse:collapse; border-spacing:0; border-color:#ccc; width: 100%; } .sheet-spellsTable td{ padding:2px 1px; border-style:solid; border-width:1px; overflow:hidden; word-break:normal; border-color:#ccc; color:#333; background-color:#F0F0F0; } .sheet-spellsTable th{ font-weight:normal; padding:2px 1px; border-style:solid; border-width:1px; overflow:hidden; word-break:normal; border-color:#ccc; color:#333; background-color:#D0D0D0; }