* { font-family: Badaboom, 'Comic Sans', sans-serif; letter-spacing: 2px; font-size: 20px; margin-bottom: 0 !important; } .sheet-3colrow .sheet-col { width: calc(33% - 3.5px) !important; margin-right: 3px !important; } .sheet-2colrow .sheet-col { width: calc(50% - 6px) !important; margin-right: 6px !important; } .sheet-section input[type=text], .sheet-section input[type=number] { padding: 0; line-height: 1em; color: black; } label, h3, .sheet-perks-derps input[type=text] { -webkit-text-stroke: 0.5px black; color: white; text-shadow: -0.5px -0.5px 0 black, 0.5px -0.5px 0 black, -0.5px 0.5px 0 black, 0.5px 0.5px 0 black; padding: 0; } label { cursor: pointer; } h3 { font-size: 150%; margin-bottom: 10px !important; } input[type=number] { border-width: 2.5px; border-style: solid; text-align: center; } .sheet-width2 { width: 2em !important; } .sheet-right { position: absolute; right: 5px; top: 0; } .sheet-section { position: relative; min-height: 26px; border-radius: 5px; border: 3px solid #800; padding: 5px 0 5px 10px; margin-top: 3px; background: #ccc; } .sheet-biographical input, .sheet-perks-derps label input:first-of-type { border: none; background: transparent; width: 74%; } .sheet-biographical input:not(:focus), .sheet-perks-derps label input:first-of-type:not(:focus) { box-shadow: none; } .sheet-health, .sheet-movement, .sheet-armour { background: #aaa; } .sheet-health { font-size: 28px; min-height: 28px; vertical-align: middle; } .sheet-health input { width: 34px; height: 28px; z-index: 2; opacity: 0; } .sheet-health input + span::before { margin-left: -34px; content: url(http://i.imgur.com/xWdfCY4.png); z-index: 1; } .sheet-health input:checked ~ input + span::before { content: url(http://i.imgur.com/v98a6ws.png); } .sheet-strength { background: #957; } .sheet-strength-skills, .sheet-dexterity-skills, .sheet-intelligence-skills, .sheet-charisma-skills { padding-right: 15px; } .sheet-strength-skills { background: #878; } .sheet-strength-skills div, .sheet-dexterity-skills div, .sheet-intelligence-skills div, .sheet-charisma-skills div { margin-top: 4px; } .sheet-strength-skills label, .sheet-dexterity-skills label, .sheet-intelligence-skills label, .sheet-charisma-skills label { text-align: right; } .sheet-dexterity { background: #ab6; } .sheet-dexterity-skills { background: #9a5; } .sheet-intelligence { background: #5ad; } .sheet-intelligence-skills { background: #8af; } .sheet-charisma { border-color: #7a3; background: #ad6; } .sheet-charisma-skills { background: #9c6; } .sheet-strength label, .sheet-dexterity label, .sheet-intelligence label, .sheet-charisma label { font-size: 175%; padding-top: 5px; } .sheet-strength input, .sheet-dexterity input, .sheet-intelligence input, .sheet-charisma input { border: none; background: url(http://i.imgur.com/USMMM3q.png) no-repeat 0 0; background-size: 40px 40px; height: 40px; width: 55px !important; text-align: center; box-shadow: none; } .sheet-inventory { padding-right: 10px; height: 360px; border-bottom-left-radius: 50% 30px; border-bottom-right-radius: 50% 30px; padding-bottom: 35px; position: relative; } .sheet-inventory-content input { width: 100%; } .sheet-inventory-content { overflow-y: auto; height: 100%; } .sheet-inventory > input { width: 40px; height: 40px; position: absolute; z-index: 3; opacity: 0; } .sheet-inventory > input + span { position: absolute; } .sheet-inventory > input + span::before { content: url(http://i.imgur.com/RD6NFfR.png?1); width: 40px; height: 40px; z-index: 2; } .sheet-inventory > input:checked + span::before { content: url(http://i.imgur.com/jWx25Ey.png?1); } .sheet-perks-derps, .sheet-notes { margin-top: 15px; padding-right: 10px; } .sheet-perks-derps textarea, .sheet-notes textarea { width: calc(100% - 10px); margin-top: 3px; background: transparent; color: black; } .sheet-perks-derps textarea { height: 2em; } .sheet-notes textarea { height: 302px; } .sheet-perks-derps label { margin-top: 5px; display: flex; font-size: 20px; } .sheet-perks-derps label input { flex: 1 1 10%; margin-left: 5px; } @font-face { font-family: Badaboom; src: local('BADABB__.TTF'), url(http://static.cmdr-class.com/badaboom.ttf) format('truetype'); }