.sheet-serenity-charactersheet { font-family: "Papyrus", serif; font-size: 12pt; position: relative; max-width: 930px; -moz-box-sizing: border-box; box-sizing: border-box; } .sheet-serenity-charactersheet *,.sheet-serenity-charactersheet *:before,.sheet-serenity-charactersheet *:after { -moz-box-sizing: inherit; box-sizing: inherit; } .sheet-serenity-charactersheet input.sheet-tab { font-family: "Papyrus", serif; font-weight: bold; } .sheet-serenity-charactersheet fieldset { padding: 5px 6px; border-color: #c93f00; } .sheet-serenity-charactersheet fieldset legend { text-align: left; font-weight: bold; font-size: 125%; } .sheet-serenity-charactersheet fieldset > fieldset { border: none; padding: 0; } .sheet-serenity-charactersheet .sheet-serenity-float-group { max-width: 930px; margin: auto; } .sheet-serenity-charactersheet .sheet-serenity-float-group:after { content: ''; clear: both; display: block; margin-bottom: 15px; } .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 { width: 1px; padding: 0 10px; } .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: -webkit-box; display: -webkit-flex; display: -ms-flexbox; 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; background-image: -webkit-linear-gradient(left, #e8af20, #c93f00); background-image: linear-gradient(left, #e8af20, #c93f00); } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wounds-taken { border-radius: 0 0 30px 0; background-color: #c93f00; background-image: -webkit-linear-gradient(left, #c93f00, #e8af20); background-image: linear-gradient(left, #c93f00, #e8af20); } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shocks-taken { border-radius: 0 0 30px 30px; background-color: #cedce7; background-image: -webkit-linear-gradient(to right, #cedce7, #596a72); background-image: -webkit-linear-gradient(left, #cedce7, #596a72); background-image: linear-gradient(to right, #cedce7, #596a72); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 475px; padding-left: 15px; height: 30px; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun0 { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun0 + span { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun1 { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun1 + span { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun2 { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun2 + span { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun3 { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun3 + span { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun4 { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun4 + span { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun5 { -webkit-box-ordinal-group: 7; -webkit-order: 6; -ms-flex-order: 6; order: 6; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun5 + span { -webkit-box-ordinal-group: 7; -webkit-order: 6; -ms-flex-order: 6; order: 6; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun6 { -webkit-box-ordinal-group: 8; -webkit-order: 7; -ms-flex-order: 7; order: 7; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun6 + span { -webkit-box-ordinal-group: 8; -webkit-order: 7; -ms-flex-order: 7; order: 7; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun7 { -webkit-box-ordinal-group: 9; -webkit-order: 8; -ms-flex-order: 8; order: 8; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun7 + span { -webkit-box-ordinal-group: 9; -webkit-order: 8; -ms-flex-order: 8; order: 8; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun8 { -webkit-box-ordinal-group: 10; -webkit-order: 9; -ms-flex-order: 9; order: 9; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun8 + span { -webkit-box-ordinal-group: 10; -webkit-order: 9; -ms-flex-order: 9; order: 9; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun9 { -webkit-box-ordinal-group: 11; -webkit-order: 10; -ms-flex-order: 10; order: 10; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun9 + span { -webkit-box-ordinal-group: 11; -webkit-order: 10; -ms-flex-order: 10; order: 10; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun10 { -webkit-box-ordinal-group: 12; -webkit-order: 11; -ms-flex-order: 11; order: 11; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun10 + span { -webkit-box-ordinal-group: 12; -webkit-order: 11; -ms-flex-order: 11; order: 11; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun11 { -webkit-box-ordinal-group: 13; -webkit-order: 12; -ms-flex-order: 12; order: 12; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun11 + span { -webkit-box-ordinal-group: 13; -webkit-order: 12; -ms-flex-order: 12; order: 12; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun12 { -webkit-box-ordinal-group: 14; -webkit-order: 13; -ms-flex-order: 13; order: 13; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun12 + span { -webkit-box-ordinal-group: 14; -webkit-order: 13; -ms-flex-order: 13; order: 13; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun13 { -webkit-box-ordinal-group: 15; -webkit-order: 14; -ms-flex-order: 14; order: 14; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun13 + span { -webkit-box-ordinal-group: 15; -webkit-order: 14; -ms-flex-order: 14; order: 14; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun14 { -webkit-box-ordinal-group: 16; -webkit-order: 15; -ms-flex-order: 15; order: 15; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun14 + span { -webkit-box-ordinal-group: 16; -webkit-order: 15; -ms-flex-order: 15; order: 15; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun15 { -webkit-box-ordinal-group: 17; -webkit-order: 16; -ms-flex-order: 16; order: 16; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun15 + span { -webkit-box-ordinal-group: 17; -webkit-order: 16; -ms-flex-order: 16; order: 16; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun16 { -webkit-box-ordinal-group: 18; -webkit-order: 17; -ms-flex-order: 17; order: 17; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun16 + span { -webkit-box-ordinal-group: 18; -webkit-order: 17; -ms-flex-order: 17; order: 17; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun17 { -webkit-box-ordinal-group: 19; -webkit-order: 18; -ms-flex-order: 18; order: 18; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun17 + span { -webkit-box-ordinal-group: 19; -webkit-order: 18; -ms-flex-order: 18; order: 18; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun18 { -webkit-box-ordinal-group: 20; -webkit-order: 19; -ms-flex-order: 19; order: 19; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun18 + span { -webkit-box-ordinal-group: 20; -webkit-order: 19; -ms-flex-order: 19; order: 19; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun19 { -webkit-box-ordinal-group: 21; -webkit-order: 20; -ms-flex-order: 20; order: 20; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun19 + span { -webkit-box-ordinal-group: 21; -webkit-order: 20; -ms-flex-order: 20; order: 20; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun20 { -webkit-box-ordinal-group: 22; -webkit-order: 21; -ms-flex-order: 21; order: 21; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun20 + span { -webkit-box-ordinal-group: 22; -webkit-order: 21; -ms-flex-order: 21; order: 21; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun21 { -webkit-box-ordinal-group: 23; -webkit-order: 22; -ms-flex-order: 22; order: 22; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun21 + span { -webkit-box-ordinal-group: 23; -webkit-order: 22; -ms-flex-order: 22; order: 22; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun22 { -webkit-box-ordinal-group: 24; -webkit-order: 23; -ms-flex-order: 23; order: 23; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun22 + span { -webkit-box-ordinal-group: 24; -webkit-order: 23; -ms-flex-order: 23; order: 23; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun23 { -webkit-box-ordinal-group: 25; -webkit-order: 24; -ms-flex-order: 24; order: 24; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stun23 + span { -webkit-box-ordinal-group: 25; -webkit-order: 24; -ms-flex-order: 24; order: 24; } .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; content: attr(number); text-align: center; font-size: 9pt; margin: auto auto; position: absolute; top: 0; bottom: 0; right: 0; cursor: pointer; background-color: lightgrey; 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; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-stuns-taken input + span:before { border: 1px outset #808080; border-radius: 25px; width: 24px; height: 24px; margin: 3px 3px 0 3px; content: attr(number); 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; 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 #808080; } .sheet-serenity-charactersheet .sheet-character-life-points input[type="radio"].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; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound0 { -webkit-box-ordinal-group: 25; -webkit-order: 24; -ms-flex-order: 24; order: 24; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound0 + span { -webkit-box-ordinal-group: 25; -webkit-order: 24; -ms-flex-order: 24; order: 24; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound1 { -webkit-box-ordinal-group: 24; -webkit-order: 23; -ms-flex-order: 23; order: 23; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound1 + span { -webkit-box-ordinal-group: 24; -webkit-order: 23; -ms-flex-order: 23; order: 23; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound2 { -webkit-box-ordinal-group: 23; -webkit-order: 22; -ms-flex-order: 22; order: 22; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound2 + span { -webkit-box-ordinal-group: 23; -webkit-order: 22; -ms-flex-order: 22; order: 22; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound3 { -webkit-box-ordinal-group: 22; -webkit-order: 21; -ms-flex-order: 21; order: 21; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound3 + span { -webkit-box-ordinal-group: 22; -webkit-order: 21; -ms-flex-order: 21; order: 21; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound4 { -webkit-box-ordinal-group: 21; -webkit-order: 20; -ms-flex-order: 20; order: 20; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound4 + span { -webkit-box-ordinal-group: 21; -webkit-order: 20; -ms-flex-order: 20; order: 20; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound5 { -webkit-box-ordinal-group: 20; -webkit-order: 19; -ms-flex-order: 19; order: 19; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound5 + span { -webkit-box-ordinal-group: 20; -webkit-order: 19; -ms-flex-order: 19; order: 19; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound6 { -webkit-box-ordinal-group: 19; -webkit-order: 18; -ms-flex-order: 18; order: 18; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound6 + span { -webkit-box-ordinal-group: 19; -webkit-order: 18; -ms-flex-order: 18; order: 18; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound7 { -webkit-box-ordinal-group: 18; -webkit-order: 17; -ms-flex-order: 17; order: 17; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound7 + span { -webkit-box-ordinal-group: 18; -webkit-order: 17; -ms-flex-order: 17; order: 17; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound8 { -webkit-box-ordinal-group: 17; -webkit-order: 16; -ms-flex-order: 16; order: 16; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound8 + span { -webkit-box-ordinal-group: 17; -webkit-order: 16; -ms-flex-order: 16; order: 16; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound9 { -webkit-box-ordinal-group: 16; -webkit-order: 15; -ms-flex-order: 15; order: 15; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound9 + span { -webkit-box-ordinal-group: 16; -webkit-order: 15; -ms-flex-order: 15; order: 15; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound10 { -webkit-box-ordinal-group: 15; -webkit-order: 14; -ms-flex-order: 14; order: 14; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound10 + span { -webkit-box-ordinal-group: 15; -webkit-order: 14; -ms-flex-order: 14; order: 14; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound11 { -webkit-box-ordinal-group: 14; -webkit-order: 13; -ms-flex-order: 13; order: 13; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound11 + span { -webkit-box-ordinal-group: 14; -webkit-order: 13; -ms-flex-order: 13; order: 13; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound12 { -webkit-box-ordinal-group: 13; -webkit-order: 12; -ms-flex-order: 12; order: 12; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound12 + span { -webkit-box-ordinal-group: 13; -webkit-order: 12; -ms-flex-order: 12; order: 12; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound13 { -webkit-box-ordinal-group: 12; -webkit-order: 11; -ms-flex-order: 11; order: 11; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound13 + span { -webkit-box-ordinal-group: 12; -webkit-order: 11; -ms-flex-order: 11; order: 11; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound14 { -webkit-box-ordinal-group: 11; -webkit-order: 10; -ms-flex-order: 10; order: 10; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound14 + span { -webkit-box-ordinal-group: 11; -webkit-order: 10; -ms-flex-order: 10; order: 10; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound15 { -webkit-box-ordinal-group: 10; -webkit-order: 9; -ms-flex-order: 9; order: 9; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound15 + span { -webkit-box-ordinal-group: 10; -webkit-order: 9; -ms-flex-order: 9; order: 9; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound16 { -webkit-box-ordinal-group: 9; -webkit-order: 8; -ms-flex-order: 8; order: 8; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound16 + span { -webkit-box-ordinal-group: 9; -webkit-order: 8; -ms-flex-order: 8; order: 8; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound17 { -webkit-box-ordinal-group: 8; -webkit-order: 7; -ms-flex-order: 7; order: 7; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound17 + span { -webkit-box-ordinal-group: 8; -webkit-order: 7; -ms-flex-order: 7; order: 7; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound18 { -webkit-box-ordinal-group: 7; -webkit-order: 6; -ms-flex-order: 6; order: 6; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound18 + span { -webkit-box-ordinal-group: 7; -webkit-order: 6; -ms-flex-order: 6; order: 6; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound19 { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound19 + span { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound20 { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound20 + span { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound21 { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound21 + span { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound22 { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound22 + span { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound23 { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wound23 + span { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .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; content: attr(number); text-align: center; font-size: 9pt; margin: auto auto; position: absolute; top: 0; bottom: 0; right: 0; cursor: pointer; background-color: lightgrey; 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; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-wounds-taken input + span:before { border: 1px outset #808080; border-radius: 25px; width: 24px; height: 24px; margin: 3px 3px 0 3px; content: attr(number); 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; 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 #808080; } .sheet-serenity-charactersheet .sheet-character-life-points input[type="radio"].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; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock0 { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock0 + span { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock1 { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock1 + span { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock2 { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock2 + span { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock3 { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock3 + span { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock4 { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock4 + span { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock5 { -webkit-box-ordinal-group: 7; -webkit-order: 6; -ms-flex-order: 6; order: 6; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock5 + span { -webkit-box-ordinal-group: 7; -webkit-order: 6; -ms-flex-order: 6; order: 6; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock6 { -webkit-box-ordinal-group: 8; -webkit-order: 7; -ms-flex-order: 7; order: 7; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock6 + span { -webkit-box-ordinal-group: 8; -webkit-order: 7; -ms-flex-order: 7; order: 7; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock7 { -webkit-box-ordinal-group: 9; -webkit-order: 8; -ms-flex-order: 8; order: 8; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock7 + span { -webkit-box-ordinal-group: 9; -webkit-order: 8; -ms-flex-order: 8; order: 8; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock8 { -webkit-box-ordinal-group: 10; -webkit-order: 9; -ms-flex-order: 9; order: 9; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock8 + span { -webkit-box-ordinal-group: 10; -webkit-order: 9; -ms-flex-order: 9; order: 9; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock9 { -webkit-box-ordinal-group: 11; -webkit-order: 10; -ms-flex-order: 10; order: 10; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock9 + span { -webkit-box-ordinal-group: 11; -webkit-order: 10; -ms-flex-order: 10; order: 10; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock10 { -webkit-box-ordinal-group: 12; -webkit-order: 11; -ms-flex-order: 11; order: 11; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock10 + span { -webkit-box-ordinal-group: 12; -webkit-order: 11; -ms-flex-order: 11; order: 11; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock11 { -webkit-box-ordinal-group: 13; -webkit-order: 12; -ms-flex-order: 12; order: 12; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock11 + span { -webkit-box-ordinal-group: 13; -webkit-order: 12; -ms-flex-order: 12; order: 12; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock12 { -webkit-box-ordinal-group: 14; -webkit-order: 13; -ms-flex-order: 13; order: 13; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock12 + span { -webkit-box-ordinal-group: 14; -webkit-order: 13; -ms-flex-order: 13; order: 13; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock13 { -webkit-box-ordinal-group: 15; -webkit-order: 14; -ms-flex-order: 14; order: 14; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shock13 + span { -webkit-box-ordinal-group: 15; -webkit-order: 14; -ms-flex-order: 14; order: 14; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shocks-taken .sheet-serenity-shock0 + span:before { margin: 3px 3px 0 3px; content: attr(number); text-align: center; font-size: 9pt; margin: auto auto; position: absolute; bottom: 0; right: 0; cursor: pointer; background-color: lightgrey; 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; background-image: -webkit-linear-gradient(to right, #cedce7, #c0ccd6); background-image: -webkit-linear-gradient(left, #cedce7, #c0ccd6); background-image: linear-gradient(to right, #cedce7, #c0ccd6); font-size: 100%; top: 0; right: 25px; } .sheet-serenity-charactersheet .sheet-character-life-points .sheet-serenity-shocks-taken input + span:before { border: 1px outset #808080; border-radius: 25px; margin: 3px 3px 0 3px; content: attr(number); 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; 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 #808080; } .sheet-serenity-charactersheet .sheet-character-life-points input[type="radio"].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; } .sheet-serenity-charactersheet .sheet-character-life-points input[type="radio"].sheet-serenity-shock0 { width: 48px; } .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: 165px; } .sheet-serenity-charactersheet .sheet-character-derived-traits { text-align: right; width: 405px; height: 230px; float: left; padding-top: 3px; padding-bottom: 13px; } .sheet-serenity-charactersheet .sheet-character-derived-traits td:not(:last-child) { padding-right: 10px; } .sheet-serenity-charactersheet .sheet-character-derived-traits input { width: 90px; } .sheet-serenity-charactersheet .sheet-character-derived-traits .sheet-character-derived-description { font-size: 60%; } .sheet-serenity-charactersheet .sheet-serenity-plot-points { height: 230px; width: 330px; position: relative; float: right; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plot-points-input { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plot-points-input .sheet-serenity-plotpoint0 + span { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint0 { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint0 + span { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint1 { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint1 + span { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint2 { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint2 + span { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint3 { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint3 + span { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint4 { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint4 + span { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint5 { -webkit-box-ordinal-group: 7; -webkit-order: 6; -ms-flex-order: 6; order: 6; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint5 + span { -webkit-box-ordinal-group: 7; -webkit-order: 6; -ms-flex-order: 6; order: 6; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint6 { -webkit-box-ordinal-group: 8; -webkit-order: 7; -ms-flex-order: 7; order: 7; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint6 + span { -webkit-box-ordinal-group: 8; -webkit-order: 7; -ms-flex-order: 7; order: 7; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint7 { -webkit-box-ordinal-group: 9; -webkit-order: 8; -ms-flex-order: 8; order: 8; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint7 + span { -webkit-box-ordinal-group: 9; -webkit-order: 8; -ms-flex-order: 8; order: 8; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint8 { -webkit-box-ordinal-group: 10; -webkit-order: 9; -ms-flex-order: 9; order: 9; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint8 + span { -webkit-box-ordinal-group: 10; -webkit-order: 9; -ms-flex-order: 9; order: 9; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint9 { -webkit-box-ordinal-group: 11; -webkit-order: 10; -ms-flex-order: 10; order: 10; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint9 + span { -webkit-box-ordinal-group: 11; -webkit-order: 10; -ms-flex-order: 10; order: 10; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint10 { -webkit-box-ordinal-group: 12; -webkit-order: 11; -ms-flex-order: 11; order: 11; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint10 + span { -webkit-box-ordinal-group: 12; -webkit-order: 11; -ms-flex-order: 11; order: 11; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint11 { -webkit-box-ordinal-group: 13; -webkit-order: 12; -ms-flex-order: 12; order: 12; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint11 + span { -webkit-box-ordinal-group: 13; -webkit-order: 12; -ms-flex-order: 12; order: 12; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint12 { -webkit-box-ordinal-group: 14; -webkit-order: 13; -ms-flex-order: 13; order: 13; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint12 + span { -webkit-box-ordinal-group: 14; -webkit-order: 13; -ms-flex-order: 13; order: 13; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plot-points-input .sheet-serenity-plotpoint0 + span:before { width: 40px; height: 25px; content: attr(number); text-align: center; position: absolute; top: 0; bottom: 0; right: 0; cursor: pointer; background-color: lightgrey; 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 #808080; border-radius: 25px; width: 40px; height: 25px; content: attr(number); text-align: center; font-weight: bold; position: absolute; top: 0; bottom: 0; right: 0; cursor: pointer; background-color: lightgrey; 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 #808080; } .sheet-serenity-charactersheet .sheet-serenity-plot-points input[type="radio"].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; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint0:checked + span:before { background-color: darkgrey; } .sheet-serenity-charactersheet .sheet-serenity-plot-points .sheet-serenity-plotpoint0:active + span:before { border: 2px inset #808080; } .sheet-serenity-charactersheet .sheet-serenity-plot-points table { font-size: 10pt; white-space: nowrap; bottom: 0; position: absolute; } .sheet-serenity-charactersheet .sheet-serenity-plot-points td:first-child { border-right: 1px solid grey; padding-right: 5px; padding-bottom: 5px; text-align: right; } .sheet-serenity-charactersheet .sheet-serenity-plot-points td:last-child { padding-left: 2px; text-align: left; } .sheet-serenity-charactersheet .sheet-character-skills { text-align: right; float: left; width: 450px; } .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-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-top: 3px; 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-description,.sheet-serenity-charactersheet .sheet-serenity-history { margin-bottom: 15px; } .sheet-serenity-charactersheet .sheet-serenity-notes textarea,.sheet-serenity-charactersheet .sheet-serenity-description textarea,.sheet-serenity-charactersheet .sheet-serenity-history textarea { min-height: 200px; width: 100%; } div.sheet-tab-content { visibility: hidden; bottom: 0; position: absolute; margin-top: 45px; width: 100%; } input.sheet-tab1:checked ~ div.sheet-tab1-content,input.sheet-tab2:checked ~ div.sheet-tab2-content,input.sheet-tab3:checked ~ div.sheet-tab3-content,input.sheet-tab4:checked ~ div.sheet-tab4-content { visibility: visible; top: 0; } input.sheet-tab { opacity: 0; z-index: 1; width: 150px; height: 30px; cursor: pointer; margin: 0; } input.sheet-tab + span { position: relative; margin: -1.5px; } input.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: -webkit-linear-gradient(left, #e8af20, #c93f00); background-image: linear-gradient(left, #e8af20, #c93f00); border-radius: 5px 5px 0px 0px; width: 150px; height: 30px; font-size: 18px; z-index: -1; } input.sheet-tab:checked + span:before { background: #dcdcdc; background: -webkit-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: -webkit-linear-gradient(bottom, #fcfcfc, #dcdcdc, #fcfcfc); background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); border-bottom-color: #fff; }