.charsheet .sheet-version::after { content: 'Sheet Version 0.7'; } @font-face { font-family: 'Nocker'; src: url('http://www.geeksville.us/fonts/Coal/Nocker.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'BoydUncial'; src: url('http://www.geeksville.us/fonts/Coal/BoydUncial.ttf'); } h1, h2, h3, h4, .sheet-font{ font-family: 'Nocker'; } h4{ line-height: 19px; } div.sheet-skills{ height:19px; } .sheet-health { line-height:28px; font-weight: bold; } .sheet-n { display:inline; } .charsheet label { display: inline-block; width: 75px; text-align: right; padding-bottom: 0px; } .charsheet input { display: inline-block; width: 155px; } .charsheet { background-color: white; } .charsheet select { width: 42px; } /* Hide actual dot/checkbox */ input[type="radio"], input[type="checkbox"] { 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, input[type="checkbox"] + 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%; } /* Styles unique to fake checkbox (unchecked) */ input[type="checkbox"] + span::before { position:relative; content: ""; opacity: .25; width: 14px; height: 14px; font-size: 12px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } /* Styles unique to fake checkbox (checked) */ input[type="checkbox"]:checked + span::before { content: "✖"; color: #a00; -moz-box-shadow: 0 0 2px transparent; -webkit-box-shadow: 0 0 2px transparent; box-shadow: 0 0 2px transparent; } /* Remove dot from all radios _after_ selected one */ input[type="radio"]:checked ~ input[type="radio"] + span::before { content: ""; } input.sheet-used+span::before { content: "✖"; width: 12px; height: 12px; font-size: 12px; -moz-border-radius: 0%; -webkit-border-radius: 0%; border-radius: 0%; } input.sheet-zero:checked + span::before { opacity: 0; } input.sheet-zero:hover + span::before { opacity: 1; } input.sheet-zero+ span::before { font-size: 12px; content: "✖"; opacity: 0.25; } input.sheet-DP1Spec + span::before, input.sheet-DP2Spec + span::before, input.sheet-DP2Spec + span::before, input.sheet-DP3Spec + span::before, input.sheet-DP4Spec + span::before, input.sheet-DP5Spec + span::before { opacity: 1; margin-bottom: 10px; } div.sheet-DP1, div.sheet-DP2, div.sheet-DP2, div.sheet-DP3, div.sheet-DP4, div.sheet-DP5 { display: inline; } div.sheet-DP1wSpec, div.sheet-DP2wSpec, div.sheet-DP2wSpec, div.sheet-DP3wSpec, div.sheet-DP4wSpec, div.sheet-DP5wSpec { display: none; } input.sheet-DP1Spec:checked ~ div.sheet-DP1, input.sheet-DP2Spec:checked ~ div.sheet-DP2, input.sheet-DP2Spec:checked ~ div.sheet-DP2, input.sheet-DP3Spec:checked ~ div.sheet-DP3, input.sheet-DP4Spec:checked ~ div.sheet-DP4, input.sheet-DP5Spec:checked ~ div.sheet-DP5 { display: none; } input.sheet-DP1Spec:checked ~ div.sheet-DP1wSpec, input.sheet-DP2Spec:checked ~ div.sheet-DP2wSpec, input.sheet-DP2Spec:checked ~ div.sheet-DP2wSpec, input.sheet-DP3Spec:checked ~ div.sheet-DP3wSpec, input.sheet-DP4Spec:checked ~ div.sheet-DP4wSpec, input.sheet-DP5Spec:checked ~ div.sheet-DP5wSpec { display: inline; } h4.sheet-SCorI1, h4.sheet-SCorI2, h4.sheet-CorC1, h4.sheet-CorC2 { display: block; } input.sheet-SCorI1, input.sheet-SCorI2, input.sheet-CorC1, input.sheet-CorC2 { width: 120px; } input.sheet-SCorI1:checked ~ h4.sheet-SCorI1, input.sheet-SCorI2:checked ~ h4.sheet-SCorI2 { display: none; } input.sheet-CorC1:checked ~ h4.sheet-CorC1, input.sheet-CorC2:checked ~ h4.sheet-CorC2 { display: none; }