div.nop { } div.sheet-madness { position: relative; padding: 0px 25px 0px 25px; } div.sheet-madness > input[type="checkbox"].sheet-madness { top: 50%; left: 15px; } div.sheet-middle { line-height: 28px; } .sheet-help { font-size: 8pt; font-style: italic; line-height: 12px; text-align: left; color: #555; margin-bottom: 5px; } input[value="0"].sheet-madness { display: none; } input[type="checkbox"].sheet-madness, input[type="radio"].sheet-madness { opacity: 0; width: 16px; height: 16px; position: relative; top: 0px; left: 11px; margin: -5px; cursor: pointer; z-index: 1; } input[type="radio"].sheet-madness + span::before, input[type="checkbox"].sheet-madness + span::before { line-height: 14px; text-align: center; display: inline-block; vertical-align: middle; } input[type="radio"].sheet-madness + span::before { content: url('http://i.imgur.com/rz2r7u4.jpg'); width: 12px; height: 12px; font-size: 24px; top: -20px; } input[type="radio"].sheet-madness:checked ~ input[type="radio"].sheet-madness + span::before { content: url('http://i.imgur.com/txZaIqc.jpg'); } input[type="checkbox"].sheet-madness { position: absolute; /*opacity: 1;*/ } input[type="checkbox"].sheet-madness + span::before { border: solid 1px #a8a8a8; line-height: 14px; text-align: center; 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); content: ""; width: 14px; height: 14px; font-size: 12px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; position: absolute; top: 13px; left: 10px; } div.sheet-madness:last-child > input[type="checkbox"].sheet-madness + span::before { top: 3px; } input[type="checkbox"].sheet-madness:checked + span::before { content: "✖"; color: #a00; } input[type="checkbox"].sheet-madness:checked ~ input[type="radio"].sheet-madness + span::before { content: url('http://i.imgur.com/txZaIqc.jpg'); } .charsheet { background: #fff; width: 848px; } .sheet-5colrow, .sheet-4colrow, .sheet-3colrow, .sheet-2colrow { width: 100%; } .sheet-left { text-align: left; } .sheet-center { text-align: center; } .sheet-right { text-align: right; } .sheet-bottom { position: relative; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .sheet-full, input[type="number"].sheet-full { display: inline-block; width: 100%; } .sheet-med { display: inline-block; width: 75px; } .sheet-vspace { margin-top: 15px; } img.sheet-logo { position: relative; width: 100%; display: block; } div.sheet-5colrow div.sheet-col.sheet-border { width: calc(20% - 10px); margin-right: 0px; padding-left: 4px; } div.sheet-4colrow div.sheet-col.sheet-border { width: calc(25% - 20px); margin-right: 0px; padding-left: 8px; } div.sheet-3colrow div.sheet-col.sheet-border { width: calc(33% - 30px); margin-right: 15px; padding-left: 10px; } div.sheet-2colrow div.sheet-col.sheet-border { width: calc(50% - 30px); margin-right: 13px; padding-left: 12px; } div.sheet-4colrow div.sheet-2colrow div.sheet-col:first-child { width: 60%; margin-right: 0px; padding-left: 0px; } div.sheet-4colrow div.sheet-2colrow div.sheet-col:last-child { width: 35%; margin-right: 0px; padding-left: 0px; } div.sheet-col.sheet-border:not(:first-child) { border-left: 3px #ccc solid; } div.sheet-skill { position: relative; } input[type="number"] { text-align: center; } hr { border-top: 3px #ccc solid; border-bottom: none; } input[type="radio"].sheet-obsession { opacity: 0; position: absolute; top: 25%; left: 100%; width: 16px; height: 16px; } input[type="radio"].sheet-obsession:hover:not(:checked), div.sheet-skill:hover input[type="radio"].sheet-obsession:not(:checked) { opacity: 0.7; } input[type="radio"].sheet-obsession:checked { opacity: 1; } ::-webkit-input-placeholder { font-style: italic; } ::-moz-placeholder { font-style: italic; } :-ms-input-placeholder { font-style: italic; } input:-moz-placeholder { font-style: italic; } span.sheet-header { font-weight: bold; } .sheet-firearms-name, .sheet-firearms-caliber, .sheet-firearms-capacity, .sheet-firearms-damage, .sheet-rituals-name, .sheet-rituals-power, .sheet-rituals-cost, .sheet-hand-to-hand-name, .sheet-hand-to-hand-damage, .sheet-artifact-name, .sheet-artifact-power { display: inline-block; margin-right: 5px; margin-bottom: 9px; } .sheet-firearms-name { width: 37%; } .sheet-firearms-caliber { width: 19%; } .sheet-firearms-capacity, input[type="number"].sheet-firearms-capacity { width: 12%; } .sheet-firearms-damage, input[type="number"].sheet-firearms-damage { width: 22%; } .sheet-rituals-name { width: 45%; } .sheet-rituals-power { width: 25%; } select.sheet-rituals-power, select.sheet-artifact-power { vertical-align: top; } .sheet-rituals-cost, input[type="number"].sheet-rituals-cost { width: 20%; } .sheet-hand-to-hand-name, .sheet-artifact-name { width: 71%; } .sheet-hand-to-hand-damage, .sheet-artifact-power, input[type="number"].sheet-hand-to-hand-damage { width: 25%; }