.charsheet { background-color: white; font-family: "Times New Roman", Georgia, Serif; } .charsheet input { border: none; border-bottom: solid 1px black; } .sheet-Basics { width: 80px; font-weight: bold; font-size: 1em; padding-left: 5px; padding-right: 5px; color: black; display: inline-block; } .sheet-woundsinput { border: none; width:35px; font-size: 1em; text-align: center; } .sheet-woundslabel { width:120px; margin-bottom: -5px; } .sheet-BigSkills { font-weight: bold; font-size: 1em; color: black; display: inline-block; /*margin-right: 5px;*/ font-family: "Times new Roman", Geogria, Serif; } .charsheet h2, .charsheet h3 { text-align: center; width: 100%; } .sheet-skillBox { width: 20px; height: 20px; border: solid 1px black; margin-right: 10px; } button[type=roll].sheet-skillButton::before { background-image: none; /*background-color: #f2f5d3;*/ /*background-color: white;*/ font-size: inherit; font-family: "Times New Roman", Georgia, Serif; content: ""; } button[type=roll].sheet-skillButton { background-image: none; font-family: "Times New Roman", Georgia, Serif; font-size: inherit; } .sheet-skillfield { width: 100%; height: 100%; border: none; font-size: .75em; padding: 0px; margin: 0px; text-align: center; } .charsheet table.sheet-schedule tr:nth-child(even) { background-color: #e0e0e0; border-top:1px solid black; border-bottom: 1px solid black; } .sheet-schedInput { width:90px; border: none; /*border-bottom: solid 1px black; */ padding-bottom: 5px; text-align: center; background-color: inherit; color: black; font-size: .75em; font-family: "Times New Roman", Georgia, Serif; } .charsheet td { border: solid 1px black; text-align: center; } .charsheet th { border: solid 1px black; } /* Hide actual dot/checkbox */ input[type="radio"] { position: absolute; opacity: 0; width:15px; cursor: pointer; z-index: 1; margin-top: 6px; } /* Styles common to fake dot and checkbox */ input[type="radio"] + span::before { border: solid 1px #a8a8a8; line-height: 14px; text-align: middle; display: inline-block; vertical-align: middle; -moz-box-shadow: 0 0 2px #ccc; -webkit-box-shadow: 0 0 2px #ccc; box-shadow: 0 0 2px #ccc; background: #f6f6f6; background: -moz-radial-gradient(#f6f6f6, #dfdfdf); background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); background: -ms-radial-gradient(#f6f6f6, #dfdfdf); background: -o-radial-gradient(#f6f6f6, #dfdfdf); background: radial-gradient(#f6f6f6, #dfdfdf); } /* Styles unique to fake dot (checked or left of checked) */ input[type="radio"] + span::before { content: "•"; width: 12px; height: 12px; font-size: 36px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } /* Remove dot from all radios _after_ selected one */ input[type="radio"]:checked ~ input[type="radio"] + span::before { content: ""; } /* Hide Buttons for different sections */ .sheet-HideSched:checked ~ *.sheet-Sched, .sheet-HideSpells:checked ~ *.sheet-Spells, .sheet-HidePotions:checked ~ *.sheet-Potions { display: none; } .charsheet span.sheet-is-Sched, .charsheet span.sheet-is-Spells, .charsheet span.sheet-is-Potions { text-align: center; display: inline-block; width: 20%; height: 20px; /*font-size: 9px;*/ /*background: #65763c;*/ background: black; /*#93537c;*/ color: white; /*white;*/ font-weight: bold; border-radius: 4px; margin-left: -20%; } .charsheet span.sheet-is-Sched::before, .charsheet span.sheet-is-Spells::before, .charsheet span.sheet-is-Potions::before { content: "Hide"; } .charsheet .sheet-HideSched:checked + span.sheet-is-Sched::before, .charsheet .sheet-HideSpells:checked + span.sheet-is-Spells::before, .charsheet .sheet-HidePotions:checked + span.sheet-is-Potions::before { content: "Show"; } .charsheet input.sheet-HideSched, .charsheet input.sheet-HideSpells, .charsheet input.sheet-HidePotions { width: 158px; height: 20px; cursor: pointer; margin-left: auto; margin-top: auto; opacity: 0; z-index: 9999; margin-right: 10px; } .charsheet .sheet-HideSched:checked + span.sheet-is-Sched, .charsheet .sheet-HideSpells:checked + span.sheet-is-Spells, .charsheet .sheet-HidePotions:checked + span.sheet-is-Potions { background: #990000; /*#65763c;*/ color: white; /*white;*/ border-radius: 4px; }