.sheet-serenity-charactersheet { font-family: "Papyrus", serif; font-size: 12pt; position: relative; max-width: 930px; width: 930px; box-sizing: border-box; /* Mixin */ } .sheet-serenity-charactersheet *, .sheet-serenity-charactersheet *:before, .sheet-serenity-charactersheet *:after { box-sizing: inherit; width: auto; height: auto; padding: 0; margin: 0; font-family: "Papyrus", serif; border-collapse: separate; line-height: 1.42857143; vertical-align: middle; } .sheet-serenity-charactersheet select { margin: 2px; } .sheet-serenity-charactersheet input[type="text"] { margin: 2px 0; } .sheet-serenity-charactersheet input[type="radio"] { margin: 3px 3px 0 5px; } .sheet-serenity-charactersheet fieldset, .sheet-serenity-charactersheet .sheet-serenity-fieldset { padding: 20px 6px 5px 6px; margin: 0 2px; border: 2px groove #c93f00; position: relative; } .sheet-serenity-charactersheet fieldset { border: none; padding: 0; } .sheet-serenity-charactersheet label { font-weight: normal !important; font-size: inherit !important; } .sheet-serenity-charactersheet .sheet-serenity-fieldset-title { position: absolute !important; top: -15px; left: 10px; padding: 0 5px; background-color: white !important; text-align: left; font-weight: bold; font-size: 125%; } .sheet-serenity-charactersheet .sheet-tab { font-family: "Papyrus", serif; font-weight: bold; } .sheet-serenity-charactersheet .sheet-serenity-float-group { max-width: 930px; margin: auto; background: white !important; page-break-inside: avoid; } .sheet-serenity-charactersheet .sheet-serenity-float-group:after { content: ''; clear: both; display: block; margin-bottom: 15px; } .sheet-serenity-charactersheet .sheet-serenity-asset-specialization, .sheet-serenity-charactersheet .sheet-serenity-complication-specialization { display: inline-block; } .sheet-serenity-charactersheet .sheet-serenity-asset-description, .sheet-serenity-charactersheet .sheet-serenity-complication-description, .sheet-serenity-charactersheet .sheet-serenity-character-custom-assets, .sheet-serenity-charactersheet .sheet-serenity-character-custom-complications { text-align: left; } .sheet-serenity-charactersheet .sheet-serenity-character-custom-assets, .sheet-serenity-charactersheet .sheet-serenity-character-custom-complications { display: block; } .sheet-serenity-charactersheet .sheet-serenity-custom-asset, .sheet-serenity-charactersheet .sheet-serenity-custom-complication { display: flex; padding-top: 5px; } .sheet-serenity-charactersheet .sheet-serenity-custom-asset textarea, .sheet-serenity-charactersheet .sheet-serenity-custom-complication textarea { flex-grow: 1; margin-left: 5px; } .sheet-serenity-charactersheet .sheet-serenity-custom-asset-enable, .sheet-serenity-charactersheet .sheet-serenity-custom-complication-enable { display: none; } .sheet-serenity-charactersheet .sheet-serenity-custom-asset-enable+.sheet-serenity-arrow:before, .sheet-serenity-charactersheet .sheet-serenity-custom-complication-enable+.sheet-serenity-arrow:before { content: ""; margin-right: 5px; margin-bottom: 3px; border: solid black; border-width: 0 2px 2px 0; display: inline-block; padding: 2px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .sheet-serenity-charactersheet .sheet-serenity-custom-asset-enable:checked+.sheet-serenity-arrow:before, .sheet-serenity-charactersheet .sheet-serenity-custom-complication-enable:checked+.sheet-serenity-arrow:before { content: ""; margin-right: 5px; margin-bottom: 1px; border: solid black; border-width: 0 2px 2px 0; display: inline-block; padding: 2px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .sheet-serenity-charactersheet .sheet-serenity-custom-assets, .sheet-serenity-charactersheet .sheet-serenity-custom-complications { display: none; } .sheet-serenity-charactersheet .sheet-serenity-custom-asset-enable:checked~.sheet-serenity-custom-assets { display: block; } .sheet-serenity-charactersheet .sheet-serenity-custom-complication-enable:checked~.sheet-serenity-custom-complications { display: block; } .sheet-serenity-charactersheet .sheet-character-info { width: 100%; border: 2px groove #c93f00; text-align: right; padding: 0 5px; } .sheet-serenity-charactersheet .sheet-character-info tr:first-child { vertical-align: top; } .sheet-serenity-charactersheet .sheet-character-info tr:last-child { vertical-align: top; } .sheet-serenity-charactersheet .sheet-character-info input { width: 275px; } .sheet-serenity-charactersheet .sheet-character-info textarea { width: 225px; height: 100%; } .sheet-serenity-charactersheet .sheet-character-info .sheet-serenity-logo { min-width: 1px; padding: 0 10px; } .sheet-serenity-charactersheet .sheet-character-info .sheet-serenity-logo img { width: 175px; } .sheet-serenity-charactersheet .sheet-character-info .sheet-serenity-label { width: 1px; white-space: nowrap; padding-right: 5px; } .sheet-serenity-charactersheet .sheet-character-life-points { margin: 0 auto; width: 750px; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stuns-taken, .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wounds-taken { display: flex; padding-left: 10px; height: 35px; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stuns-taken { border-radius: 30px 0 0 0; background-color: #e8af20 !important; background-image: linear-gradient(to right, #e8af20, #c93f00) !important; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wounds-taken { border-radius: 0 0 30px 0; background-color: #c93f00 !important; background-image: linear-gradient(to right, #c93f00, #e8af20) !important; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shocks-taken { border-radius: 0 0 30px 30px; background-color: #cedce7 !important; background-image: linear-gradient(to right, #cedce7, #596a72) !important; display: flex; width: 475px; padding-left: 15px; height: 30px; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun0 { order: 1; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun0+span { order: 1; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun0+span:before { content: "0"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun1 { order: 2; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun1+span { order: 2; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun1+span:before { content: "1"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun2 { order: 3; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun2+span { order: 3; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun2+span:before { content: "2"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun3 { order: 4; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun3+span { order: 4; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun3+span:before { content: "3"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun4 { order: 5; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun4+span { order: 5; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun4+span:before { content: "4"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun5 { order: 6; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun5+span { order: 6; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun5+span:before { content: "5"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun6 { order: 7; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun6+span { order: 7; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun6+span:before { content: "6"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun7 { order: 8; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun7+span { order: 8; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun7+span:before { content: "7"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun8 { order: 9; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun8+span { order: 9; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun8+span:before { content: "8"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun9 { order: 10; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun9+span { order: 10; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun9+span:before { content: "9"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun10 { order: 11; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun10+span { order: 11; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun10+span:before { content: "10"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun11 { order: 12; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun11+span { order: 12; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun11+span:before { content: "11"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun12 { order: 13; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun12+span { order: 13; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun12+span:before { content: "12"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun13 { order: 14; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun13+span { order: 14; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun13+span:before { content: "13"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun14 { order: 15; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun14+span { order: 15; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun14+span:before { content: "14"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun15 { order: 16; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun15+span { order: 16; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun15+span:before { content: "15"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun16 { order: 17; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun16+span { order: 17; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun16+span:before { content: "16"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun17 { order: 18; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun17+span { order: 18; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun17+span:before { content: "17"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun18 { order: 19; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun18+span { order: 19; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun18+span:before { content: "18"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun19 { order: 20; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun19+span { order: 20; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun19+span:before { content: "19"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun20 { order: 21; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun20+span { order: 21; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun20+span:before { content: "20"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun21 { order: 22; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun21+span { order: 22; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun21+span:before { content: "21"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun22 { order: 23; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun22+span { order: 23; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun22+span:before { content: "22"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun23 { order: 24; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun23+span { order: 24; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun23+span:before { content: "23"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stuns-taken .sheet-serenity-stun0+span:before { width: 24px; height: 24px; margin: 3px 3px 0 3px; text-align: center; font-size: 9pt; margin: auto auto; position: absolute; top: 0; bottom: 0; right: 0; cursor: pointer; background-color: lightgrey !important; box-shadow: 1px 1px 2px #333; font-size: 150%; font-weight: bold; font-family: "Papyrus", serif; line-height: 27px; top: 2px; right: -1px; border: none; box-shadow: none; content: 'S'; background: #e8af20 !important; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stuns-taken input+span:before { border: 1px outset grey; border-radius: 25px; width: 24px; height: 24px; margin: 3px 3px 0 3px; text-align: center; font-weight: bold; font-size: 9pt; margin: auto auto; position: absolute; top: 0; bottom: 0; right: 0; cursor: pointer; background-color: lightgrey !important; box-shadow: 1px 1px 2px #333; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun:not(.sheet-serenity-stun0):active+span:before { border: 2px inset grey; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun { opacity: 0; z-index: 1; width: 24px; height: 24px; margin: 3px 3px 0 3px; cursor: pointer; } .sheet-serenity-charactersheet .sheet-character-life-points input[type="radio"].sheet-serenity-stun+span { position: relative; } .sheet-serenity-charactersheet .sheet-character-life-points input[type="radio"]:checked:not(.sheet-serenity-stun0).sheet-serenity-stun+span:before, .sheet-serenity-charactersheet .sheet-character-life-points input[type="radio"]:checked.sheet-serenity-stun~input:not(.sheet-serenity-stun0).sheet-serenity-stun+span:before { background-color: red !important; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound0 { order: 24; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound0+span { order: 24; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound0+span:before { content: "0"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound1 { order: 23; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound1+span { order: 23; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound1+span:before { content: "1"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound2 { order: 22; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound2+span { order: 22; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound2+span:before { content: "2"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound3 { order: 21; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound3+span { order: 21; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound3+span:before { content: "3"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound4 { order: 20; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound4+span { order: 20; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound4+span:before { content: "4"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound5 { order: 19; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound5+span { order: 19; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound5+span:before { content: "5"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound6 { order: 18; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound6+span { order: 18; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound6+span:before { content: "6"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound7 { order: 17; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound7+span { order: 17; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound7+span:before { content: "7"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound8 { order: 16; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound8+span { order: 16; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound8+span:before { content: "8"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound9 { order: 15; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound9+span { order: 15; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound9+span:before { content: "9"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound10 { order: 14; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound10+span { order: 14; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound10+span:before { content: "10"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound11 { order: 13; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound11+span { order: 13; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound11+span:before { content: "11"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound12 { order: 12; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound12+span { order: 12; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound12+span:before { content: "12"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound13 { order: 11; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound13+span { order: 11; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound13+span:before { content: "13"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound14 { order: 10; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound14+span { order: 10; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound14+span:before { content: "14"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound15 { order: 9; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound15+span { order: 9; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound15+span:before { content: "15"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound16 { order: 8; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound16+span { order: 8; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound16+span:before { content: "16"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound17 { order: 7; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound17+span { order: 7; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound17+span:before { content: "17"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound18 { order: 6; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound18+span { order: 6; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound18+span:before { content: "18"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound19 { order: 5; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound19+span { order: 5; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound19+span:before { content: "19"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound20 { order: 4; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound20+span { order: 4; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound20+span:before { content: "20"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound21 { order: 3; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound21+span { order: 3; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound21+span:before { content: "21"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound22 { order: 2; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound22+span { order: 2; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound22+span:before { content: "22"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound23 { order: 1; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound23+span { order: 1; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound23+span:before { content: "23"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wounds-taken .sheet-serenity-wound0+span:before { width: 24px; height: 24px; margin: 3px 3px 0 3px; text-align: center; font-size: 9pt; margin: auto auto; position: absolute; top: 0; bottom: 0; right: 0; cursor: pointer; background-color: lightgrey !important; box-shadow: 1px 1px 2px #333; font-size: 150%; font-weight: bold; font-family: "Papyrus", serif; line-height: 27px; top: 2px; right: -1px; border: none; box-shadow: none; content: 'W'; background: #e8af20 !important; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wounds-taken input+span:before { border: 1px outset grey; border-radius: 25px; width: 24px; height: 24px; margin: 3px 3px 0 3px; text-align: center; font-weight: bold; font-size: 9pt; margin: auto auto; position: absolute; top: 0; bottom: 0; right: 0; cursor: pointer; background-color: lightgrey !important; box-shadow: 1px 1px 2px #333; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound:not(.sheet-serenity-wound0):active+span:before { border: 2px inset grey; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound { opacity: 0; z-index: 1; width: 24px; height: 24px; margin: 3px 3px 0 3px; cursor: pointer; } .sheet-serenity-charactersheet .sheet-character-life-points input[type="radio"].sheet-serenity-wound+span { position: relative; } .sheet-serenity-charactersheet .sheet-character-life-points input[type="radio"]:checked:not(.sheet-serenity-wound0).sheet-serenity-wound+span:before, .sheet-serenity-charactersheet .sheet-character-life-points input[type="radio"]:checked.sheet-serenity-wound~input:not(.sheet-serenity-wound0).sheet-serenity-wound+span:before { background-color: red !important; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock0 { order: 1; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock0+span { order: 1; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock0+span:before { content: "0"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock1 { order: 2; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock1+span { order: 2; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock1+span:before { content: "1"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock2 { order: 3; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock2+span { order: 3; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock2+span:before { content: "2"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock3 { order: 4; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock3+span { order: 4; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock3+span:before { content: "3"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock4 { order: 5; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock4+span { order: 5; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock4+span:before { content: "4"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock5 { order: 6; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock5+span { order: 6; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock5+span:before { content: "5"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock6 { order: 7; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock6+span { order: 7; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock6+span:before { content: "6"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock7 { order: 8; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock7+span { order: 8; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock7+span:before { content: "7"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock8 { order: 9; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock8+span { order: 9; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock8+span:before { content: "8"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock9 { order: 10; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock9+span { order: 10; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock9+span:before { content: "9"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock10 { order: 11; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock10+span { order: 11; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock10+span:before { content: "10"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock11 { order: 12; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock11+span { order: 12; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock11+span:before { content: "11"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock12 { order: 13; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock12+span { order: 13; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock12+span:before { content: "12"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock13 { order: 14; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock13+span { order: 14; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock13+span:before { content: "13"; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shocks-taken .sheet-serenity-shock0+span:before { margin: 3px 3px 0 3px; text-align: center; font-size: 9pt; margin: auto auto; position: absolute; bottom: 0; right: 0; cursor: pointer; background-color: lightgrey !important; box-shadow: 1px 1px 2px #333; width: 24px; height: 24px; font-size: 150%; font-weight: bold; font-family: "Papyrus", serif; line-height: 27px; top: 2px; right: -1px; border: none; box-shadow: none; content: 'Shock'; background-color: #cedce7 !important; background-image: linear-gradient(to right, #cedce7, #c0ccd6) !important; font-size: 100%; top: 0; right: 25px; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shocks-taken input+span:before { border: 1px outset grey; border-radius: 25px; margin: 3px 3px 0 3px; text-align: center; font-weight: bold; font-size: 9pt; margin: auto auto; position: absolute; top: 0; bottom: 0; right: 0; cursor: pointer; background-color: lightgrey !important; box-shadow: 1px 1px 2px #333; width: 24px; height: 24px; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock:not(.sheet-serenity-shock0):active+span:before { border: 2px inset grey; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock { opacity: 0; z-index: 1; width: 24px; height: 24px; margin: 3px 3px 0 3px; cursor: pointer; } .sheet-serenity-charactersheet .sheet-character-life-points input[type="radio"].sheet-serenity-shock+span { position: relative; } .sheet-serenity-charactersheet .sheet-character-life-points input[type="radio"]:checked:not(.sheet-serenity-shock0).sheet-serenity-shock+span:before, .sheet-serenity-charactersheet .sheet-character-life-points input[type="radio"]:checked.sheet-serenity-shock~input:not(.sheet-serenity-shock0).sheet-serenity-shock+span:before { background-color: red !important; } .sheet-serenity-charactersheet .sheet-character-life-points input[type="radio"].sheet-serenity-shock0 { width: 48px; } .sheet-serenity-charactersheet .sheet-character-life-points div.sheet-serenity-stun, .sheet-serenity-charactersheet .sheet-character-life-points div.sheet-serenity-wound { cursor: default; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-life-points { float: left; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-life-penalty { float: right; } .sheet-serenity-charactersheet .sheet-character-attributes { text-align: right; float: left; height: 230px; width: 180px; } .sheet-serenity-charactersheet .sheet-character-attributes td:not(:last-child) { text-align: right; } .sheet-serenity-charactersheet .sheet-character-derived-traits { text-align: right; width: 405px; height: 230px; float: left; padding-bottom: 13px; } .sheet-serenity-charactersheet .sheet-character-derived-traits td:not(:last-child) { padding-right: 10px; text-align: right; } .sheet-serenity-charactersheet .sheet-character-derived-traits input { width: 90px; } .sheet-serenity-charactersheet .sheet-character-derived-traits .sheet-character-derived-explanation { font-size: 60%; } .sheet-serenity-charactersheet .sheet-serenity-advancement-points { height: 55px; width: 330px; float: right; margin-top: 15px; } .sheet-serenity-charactersheet .sheet-serenity-advancement-points input { width: 100%; text-align: right; } .sheet-serenity-charactersheet .sheet-serenity-plot-points { height: 160px; width: 330px; position: relative; float: right; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plot-points-notes { font-size: small; padding: 10px; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plot-points-input { display: flex; flex-flow: row wrap; justify-content: flex-start; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plot-points-input .sheet-serenity-plotpoint0+span { flex-basis: 100%; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint0 { order: 1; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint0+span { order: 1; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint0+span:before { content: "0"; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint1 { order: 2; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint1+span { order: 2; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint1+span:before { content: "1"; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint2 { order: 3; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint2+span { order: 3; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint2+span:before { content: "2"; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint3 { order: 4; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint3+span { order: 4; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint3+span:before { content: "3"; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint4 { order: 5; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint4+span { order: 5; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint4+span:before { content: "4"; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint5 { order: 6; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint5+span { order: 6; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint5+span:before { content: "5"; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint6 { order: 7; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint6+span { order: 7; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint6+span:before { content: "6"; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint7 { order: 8; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint7+span { order: 8; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint7+span:before { content: "7"; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint8 { order: 9; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint8+span { order: 9; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint8+span:before { content: "8"; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint9 { order: 10; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint9+span { order: 10; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint9+span:before { content: "9"; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint10 { order: 11; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint10+span { order: 11; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint10+span:before { content: "10"; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint11 { order: 12; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint11+span { order: 12; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint11+span:before { content: "11"; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint12 { order: 13; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint12+span { order: 13; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint12+span:before { content: "12"; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plot-points-input .sheet-serenity-plotpoint0+span:before { width: 40px; height: 25px; text-align: center; position: absolute; top: 0; bottom: 0; right: 0; cursor: pointer; background-color: lightgrey !important; box-shadow: 1px 1px 2px #333; font-family: "Papyrus", serif; font-weight: bold; line-height: 25px; left: 7px; top: -28px; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plot-points-input input+span:before { border: 1px outset grey; border-radius: 25px; width: 40px; height: 25px; text-align: center; font-weight: bold; position: absolute; top: 0; bottom: 0; right: 0; cursor: pointer; background-color: lightgrey !important; box-shadow: 1px 1px 2px #333; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint:not(.sheet-serenity-plotpoint0):active+span:before { border: 2px inset grey; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint { opacity: 0; z-index: 1; width: 40px; height: 25px; cursor: pointer; } .sheet-serenity-charactersheet .sheet-serenity-plot-points input[type="radio"].sheet-serenity-plotpoint+span { position: relative; } .sheet-serenity-charactersheet .sheet-serenity-plot-points input[type="radio"]:checked:not(.sheet-serenity-plotpoint0).sheet-serenity-plotpoint+span:before, .sheet-serenity-charactersheet .sheet-serenity-plot-points input[type="radio"]:checked.sheet-serenity-plotpoint~input:not(.sheet-serenity-plotpoint0).sheet-serenity-plotpoint+span:before { background-color: #e8af20 !important; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint0:checked+span:before { background-color: darkgrey !important; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint0:active+span:before { border: 2px inset grey; } .sheet-serenity-charactersheet .sheet-character-skills { text-align: right; float: left; width: 450px; } .sheet-serenity-charactersheet .sheet-character-skills td { text-align: right; } .sheet-serenity-charactersheet .sheet-character-skills td:nth-child(2) { border-right: 2px groove #c93f00; padding-right: 10px; padding-bottom: 5px; } .sheet-serenity-charactersheet .sheet-character-skills td:nth-child(3) { padding-left: 10px; } .sheet-serenity-charactersheet .sheet-serenity-character-specialties { float: right; width: 470px; } .sheet-serenity-charactersheet .sheet-serenity-character-assets { float: left; width: 450px; } .sheet-serenity-charactersheet .sheet-serenity-character-complications { float: right; width: 470px; } .sheet-serenity-charactersheet .sheet-serenity-character-specialties, .sheet-serenity-charactersheet .sheet-serenity-character-assets, .sheet-serenity-charactersheet .sheet-serenity-character-complications { text-align: right; } .sheet-serenity-charactersheet .sheet-serenity-asset-specialization, .sheet-serenity-charactersheet .sheet-serenity-complication-specialization { white-space: nowrap; } .sheet-serenity-charactersheet .sheet-serenity-assets, .sheet-serenity-charactersheet .sheet-serenity-asset-description, .sheet-serenity-charactersheet .sheet-serenity-complications, .sheet-serenity-charactersheet .sheet-serenity-complication-description { width: 100%; margin: 2px; } .sheet-serenity-charactersheet .sheet-serenity-currency { width: 440px; float: left; height: 210px; } .sheet-serenity-charactersheet .sheet-serenity-currency input { width: 130px; margin-left: 10px; } .sheet-serenity-charactersheet .sheet-serenity-currency .sheet-serenity-currency-conversions { text-align: center; padding-top: 5px; } .sheet-serenity-charactersheet .sheet-serenity-combat-actions { float: right; height: 210px; width: 480px; padding-bottom: 13px; } .sheet-serenity-charactersheet .sheet-serenity-combat-actions table { font-size: 11pt; text-align: right; margin: 0 auto; } .sheet-serenity-charactersheet .sheet-serenity-combat-actions td:first-child { border-right: 1px solid grey; padding-right: 5px; padding-bottom: 5px; } .sheet-serenity-charactersheet .sheet-serenity-combat-actions td:last-child { padding-left: 5px; } .sheet-serenity-charactersheet .sheet-serenity-character-equipment { float: left; width: 440px; } .sheet-serenity-charactersheet .sheet-serenity-character-equipment textarea { min-height: 250px; width: 100%; } .sheet-serenity-charactersheet .sheet-serenity-character-weapons { float: right; width: 480px; margin-bottom: 15px; } .sheet-serenity-charactersheet .sheet-serenity-character-weapons .sheet-serenity-unarmed { border-bottom: 2px groove #c93f00; padding-bottom: 5px; margin-bottom: 5px; } .sheet-serenity-charactersheet .sheet-serenity-character-weapons .sheet-serenity-weapon-name-label, .sheet-serenity-charactersheet .sheet-serenity-character-weapons .sheet-serenity-weapon-damage-label, .sheet-serenity-charactersheet .sheet-serenity-character-weapons .sheet-serenity-weapon-range-label, .sheet-serenity-charactersheet .sheet-serenity-character-weapons .sheet-serenity-weapon-rof-label, .sheet-serenity-charactersheet .sheet-serenity-character-weapons .sheet-serenity-weapon-magazine-label, .sheet-serenity-charactersheet .sheet-serenity-character-weapons .sheet-serenity-weapon-weight-label { display: inline-block; font-size: 75%; } .sheet-serenity-charactersheet .sheet-serenity-character-weapons .sheet-serenity-weapon-name-label { width: 170px; } .sheet-serenity-charactersheet .sheet-serenity-character-weapons .sheet-serenity-weapon-damage-label { width: 115px; } .sheet-serenity-charactersheet .sheet-serenity-character-weapons .sheet-serenity-weapon-range-label { width: 50px; } .sheet-serenity-charactersheet .sheet-serenity-character-weapons .sheet-serenity-weapon-rof-label { width: 40px; } .sheet-serenity-charactersheet .sheet-serenity-character-weapons .sheet-serenity-weapon-magazine-label { width: 30px; } .sheet-serenity-charactersheet .sheet-serenity-character-weapons .sheet-serenity-unarmed .sheet-serenity-weapon-name { display: inline-block; margin-right: -2px; } .sheet-serenity-charactersheet .sheet-serenity-character-weapons .sheet-serenity-weapon-name { width: 160px; } .sheet-serenity-charactersheet .sheet-serenity-character-weapons .sheet-serenity-weapon-damage, .sheet-serenity-charactersheet .sheet-serenity-character-weapons .sheet-serenity-weapon-weight, .sheet-serenity-charactersheet .sheet-serenity-character-weapons .sheet-serenity-weapon-rof, .sheet-serenity-charactersheet .sheet-serenity-character-weapons .sheet-serenity-weapon-magazine { width: 35px; } .sheet-serenity-charactersheet .sheet-serenity-character-weapons .sheet-serenity-weapon-range { width: 50px; } .sheet-serenity-charactersheet .sheet-serenity-character-armor { float: right; width: 480px; margin-bottom: 15px; } .sheet-serenity-charactersheet .sheet-serenity-character-armor .sheet-serenity-armor-name-label, .sheet-serenity-charactersheet .sheet-serenity-character-armor .sheet-serenity-armor-rating-label, .sheet-serenity-charactersheet .sheet-serenity-character-armor .sheet-serenity-armor-penalty-label, .sheet-serenity-charactersheet .sheet-serenity-character-armor .sheet-serenity-armor-weight-label { display: inline-block; font-size: 75%; white-space: nowrap; } .sheet-serenity-charactersheet .sheet-serenity-character-armor .sheet-serenity-armor-name-label { width: 160px; } .sheet-serenity-charactersheet .sheet-serenity-character-armor .sheet-serenity-armor-rating-label { width: 115px; } .sheet-serenity-charactersheet .sheet-serenity-character-armor .sheet-serenity-armor-penalty-label { width: 80px; } .sheet-serenity-charactersheet .sheet-serenity-character-armor .sheet-serenity-armor-name { width: 160px; } .sheet-serenity-charactersheet .sheet-serenity-character-armor .sheet-serenity-armor-rating, .sheet-serenity-charactersheet .sheet-serenity-character-armor .sheet-serenity-armor-weight { width: 35px; } .sheet-serenity-charactersheet .sheet-serenity-character-armor .sheet-serenity-armor-penalty { width: 40px; } .sheet-serenity-charactersheet .sheet-serenity-character-armor .sheet-serenity-armor-effects { width: 335px; } .sheet-serenity-charactersheet .sheet-serenity-notes, .sheet-serenity-charactersheet .sheet-serenity-explanation, .sheet-serenity-charactersheet .sheet-serenity-history { margin-bottom: 15px; } .sheet-serenity-charactersheet .sheet-serenity-notes textarea, .sheet-serenity-charactersheet .sheet-serenity-explanation textarea, .sheet-serenity-charactersheet .sheet-serenity-history textarea { min-height: 200px; width: 100%; } .sheet-serenity-charactersheet .sheet-serenity-tooltip { position: relative; } .sheet-serenity-charactersheet .sheet-serenity-tooltip .sheet-serenity-tooltip-text { position: absolute; z-index: 1; text-align: left; font-size: 12pt; font-weight: normal; /* vertically center */ top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); /* basic styles */ width: 400px; padding: 10px; border-radius: 10px; background: #111111 !important; color: #CCC; opacity: 0; transition: 0.3s opacity; display: none; /* move to right */ left: 100%; margin-left: 15px; /* and add a small left margin */ } .sheet-serenity-charactersheet .sheet-serenity-tooltip .sheet-serenity-tooltip-text table { color: inherit; margin: 5px auto; border-spacing: 0; } .sheet-serenity-charactersheet .sheet-serenity-tooltip .sheet-serenity-tooltip-text table td { padding: 5px; border: none; border-top: 1px solid #CCCCCC; text-align: left; font-size: 12pt; } .sheet-serenity-charactersheet .sheet-serenity-tooltip .sheet-serenity-tooltip-text table th { text-align: center; padding: 0 8px; } .sheet-serenity-charactersheet .sheet-serenity-tooltip .sheet-serenity-tooltip-text table tr:first-child td { border: none; } .sheet-serenity-charactersheet .sheet-serenity-tooltip .sheet-serenity-tooltip-text .sheet-serenity-tooltip-table-center td { text-align: center; } .sheet-serenity-charactersheet .sheet-serenity-tooltip .sheet-serenity-tooltip-text .sheet-serenity-tooltip-table-center-first-col td:first-child { text-align: center; } .sheet-serenity-charactersheet .sheet-serenity-tooltip .sheet-serenity-tooltip-text .sheet-serenity-tooltip-table-left-first-col td:first-child { text-align: left; } .sheet-serenity-charactersheet .sheet-serenity-tooltip .sheet-serenity-tooltip-text.sheet-serenity-tooltip-text-wide { width: 500px; } .sheet-serenity-charactersheet .sheet-serenity-tooltip .sheet-serenity-tooltip-text.sheet-serenity-tooltip-text-left { /* reset defaults */ left: initial; margin: initial; /* set new values */ right: 100%; margin-right: 15px; } .sheet-serenity-charactersheet .sheet-serenity-tooltip .sheet-serenity-tooltip-text:after { content: ""; position: absolute; /* vertically center */ top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); /* the arrow */ border: 10px solid #111111; border-color: transparent #111111 transparent transparent; opacity: 0; transition: 0.3s; /* position tooltip correctly */ right: 100%; margin-left: -5px; } .sheet-serenity-charactersheet .sheet-serenity-tooltip .sheet-serenity-tooltip-text.sheet-serenity-tooltip-text-left:after { /* reset defaults */ right: initial; margin: initial; border: initial; /* set new values */ left: 100%; margin-right: -5px; /* the arrow */ border: 10px solid #111111; border-color: transparent transparent transparent #111111; } .sheet-serenity-charactersheet .sheet-serenity-tooltip:hover .sheet-serenity-tooltip-text, .sheet-serenity-charactersheet .sheet-serenity-tooltip:hover .sheet-serenity-tooltip-text:after { opacity: 1; display: block; } div.sheet-tab-content { visibility: hidden; bottom: 0; position: absolute; margin-top: 45px; width: 100%; } input[type="radio"].sheet-tab1:checked~div.sheet-tab1-content, input[type="radio"].sheet-tab2:checked~div.sheet-tab2-content, input[type="radio"].sheet-tab3:checked~div.sheet-tab3-content, input[type="radio"].sheet-tab4:checked~div.sheet-tab4-content { visibility: visible; top: 0; } input[type="radio"].sheet-tab { opacity: 0; z-index: 1; width: 150px; height: 30px; cursor: pointer; margin: 0; } input[type="radio"].sheet-tab+span { position: relative; margin: -1.5px; } input[type="radio"].sheet-tab+span:before { content: attr(title); position: absolute; left: -150px; border: solid 1px #a8a8a8; border-bottom-color: black; text-align: center; display: inline-block; background-color: #e8af20; background-image: linear-gradient(left, #e8af20, #c93f00); border-radius: 5px 5px 0px 0px; width: 150px; height: 30px; font-size: 18px; z-index: -1; } input[type="radio"].sheet-tab:checked+span:before { background: #dcdcdc; background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); border-bottom-color: #fff; } /* Mixin */