I'm afraid it's quite a hodgepodge, but here it is:
/* This section taken from the Vampire: The Masquerade */
.charsheet label {
display: inline-block;
width: 75px;
text-align: right;
padding-bottom: 0px;
}
.charsheet input {
display: inline-block;
width: 160px;
}
.charsheet {
background-color: white;
}
.charsheet select {
width: 42px;
}
/* Hide actual dot/checkbox */
input[type="radio"],
input[type="checkbox"]
{
position: absolute;
opacity: 100;
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%;
}
/* 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;
}
/* This section taken from the D&D 5E sheet */
/* overall wrapper to fix moving width issues with overflow on hidden sections */
.charsheet .sheet-overall-wrapper {
max-width: 832px;
}
/* Tweak repeating section buttons so they have a bottom margin and dont overflow when in edit mode. */
.charsheet div[class^="repcontrol"] {
margin-bottom: 5px;
}
.charsheet div[class="repcontainer editmode"] ~ div[class^="repcontrol"] button[class="btn repcontrol_add"] {
display: inline-block!important;
visibility: hidden;
}
/* Main Sheet Tabs */
.charsheet div[class^="sheet-section"] {
visibility: hidden;
opacity: 0;
max-height:0;
overflow: hidden;
}
.charsheet input.sheet-tab1:checked ~ div.sheet-section-core,
.charsheet input.sheet-tab2:checked ~ div.sheet-section-skills,
.charsheet input.sheet-tab3:checked ~ div.sheet-section-powers,
.charsheet input.sheet-tab4:checked ~ div.sheet-section-advantages,
.charsheet input.sheet-tab5:checked ~ div.sheet-section-drawbacks,
.charsheet input.sheet-tab6:checked ~ div.sheet-section-equipment,
.charsheet input.sheet-tab7:checked ~ div.sheet-section-xxxxx,
.charsheet input.sheet-tab8:checked ~ div.sheet-section-yyyyy,
.charsheet input.sheet-tab9:checked ~ div.sheet-section-zzzzz {
max-height: 999999px;
visibility: visible;
opacity: 1;
transition: opacity 0.5s linear 0s;
overflow: auto;
}
.charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] {
max-height: 999999px;
visibility: visible;
opacity: 1;
transition: opacity 0.5s linear 0s;
}
.charsheet input.sheet-tab {
width: 87px;
height: 20px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 9999;
}
.charsheet span.sheet-tab {
text-align: center;
display: inline-block;
font-size: 13px;
background: #4a6486;
color: white;
font-weight: bold;
border-radius: 4px;
width: 87px;
height: 20px;
cursor: pointer;
position: relative;
margin-left: -91px;
}
.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-tab5:checked + span.sheet-tab5,
.charsheet input.sheet-tab6:checked + span.sheet-tab6,
.charsheet input.sheet-tab7:checked + span.sheet-tab7,
.charsheet input.sheet-tab8:checked + span.sheet-tab8,
.charsheet input.sheet-tab9:checked + span.sheet-tab9,
.charsheet input.sheet-tab99:checked + span.sheet-tab99 {
background: #ab8b57;
color: white;
border-radius: 4px;
}
/* END Main sheet tabs */
/* ----Box size toggle code---- */
.sheet-container{
width:9em;/*a random width setting*/
height:auto;/*We want this div to grow with it's contents*/
position:relative;/*setting this to relative will base the later position absolute on it*/
}
.sheet-controller:checked + .sheet-container .sheet-sizer{
height:1em;/*if the controller is checked, then limit the height to 1em (~10px)*/
}
.sheet-controller:not(:checked) +.sheet-container .sheet-sizer{
height:auto;/*if the controller is not checked, then let the sizer grow as needed.*/
}
.sheet-sizer{
display:block;
opacity:0;
white-space:pre-wrap;/*this preserves the whitespace and line wraps. Lines will wrap as needed. Does not preserve trailing line breaks*/
width:100%;
min-height:1em;/*keeps the whole construct from being too thin*/
}
.sheet-visible{
resize:none;/*We probably don't want this textarea resizable*/
position:absolute;/*this will let the textarea sit on top of the sizer span*/
top:0px;/*forces the textarea to sit at the top of the div*/
left:0px;/*forces the textarea to sit at the left of the div*/
height:100%;/*the textarea will stretch from the top to bottom*/
width:100%;/*and left to right of the div*/
}
/* ----Disable resizing of text area boxes---- */
textarea {
resize: none;
padding-left: 20px;
}