@import url("https://fonts.googleapis.com/css?family=Courier+Prime&display=swap"); .charsheet { flex-wrap: wrap; color: #333; position: relative; top: -11px; line-height: 18px; cursor: default; box-sizing: border-box; padding: 0 !important; font-family: "Courier Prime"; font-size: 16px; } .charsheet div, .charsheet span, .charsheet textarea, .charsheet ul, .charsheet li, .charsheet span, .charsheet label { box-sizing: border-box; } .charsheet button[type=roll] { text-shadow: none; background: transparent; box-shadow: none; font-weight: bold; font-family: inherit; outline: none; border-radius: 0; transition: all 0.2s; } .charsheet button[type=roll].btn::before { content: ""; } .charsheet label { margin: 0; padding: 0; display: flex; width: auto; color: #333; font: inherit; flex-wrap: wrap; } .charsheet label input[type=checkbox], .charsheet label input[type=radio] { position: absolute; } .charsheet label:hover input[type=checkbox] + span, .charsheet label:hover input[type=radio] + span { opacity: 0.7; } .charsheet input[type=text], .charsheet textarea { border: none; font-family: inherit; background: transparent; box-shadow: none; width: 100%; padding: 0; margin: 0; color: #333; border-radius: 0; transition: all 0.2s, height 0.4s; } .charsheet input[type=text] { border-bottom: 1px solid black; margin-right: 10px; } .charsheet textarea { resize: vertical; display: block; } .charsheet textarea:active { transition: height 0s; } .charsheet input[type=number] { border-color: #c7c7c7; color: #333; box-shadow: none; } .charsheet input[type=checkbox], .charsheet input[type=radio] { opacity: 0; z-index: 1; -moz-appearance: none; position: relative; } .charsheet input[type=checkbox] + span, .charsheet input[type=radio] + span { cursor: pointer; display: inline-block; transition: all 0.2s, opacity 0s; position: absolute; } .charsheet ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #c7c7c7; } .charsheet :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #c7c7c7; opacity: 1; } .charsheet ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #c7c7c7; opacity: 1; } .charsheet :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #c7c7c7; } .charsheet ::-ms-input-placeholder { /* Microsoft Edge */ color: #c7c7c7; } .charsheet ::placeholder { /* Most modern browsers support this now. */ color: #c7c7c7; } .charsheet ul { list-style: none; margin: 0; } .charsheet li { position: relative; } .charsheet li::before { transform: rotate(45deg) scale(0.9); font-family: Georgia, serif; content: '■'; left: 0; top: -.1em; position: absolute; } .charsheet button { background-color: white; background-image: none; border-radius: 0; } .charsheet button[type=roll].sheet-inherit, .charsheet input[type=text].sheet-inherit { font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; } .charsheet .sheet-space-after::after { content: ' '; } .sheet-focus-shadow[value="1"] ~ .sheet-wrapper textarea:focus, .sheet-focus-shadow[value="1"] ~ .sheet-wrapper input[type=text]:focus, .sheet-focus-shadow[value="1"] ~ .sheet-wrapper input[type=number]:focus { box-shadow: inset 0 0 1px 1px rgba(66, 66, 66, 0.3), 0 0 2px 1px rgba(66, 66, 66, 0.3); } .sheet-hidden { display: none !important; } .sheet-wrapper { position: relative; } /* REPEATING SECTION CONTROLS */ /* REPEATING SECTION CONTROLS */ .repcontrol { display: flex; } .repcontrol .repcontrol_edit { margin-left: auto; order: 1; } .repcontrol button { background: transparent; color: #777; border-radius: 0; border-color: #b4b4b4; transition: all 0.2s; font-family: pictos; font-size: 0; font-weight: bold; padding: 5px 3px 2px; line-height: 8px; margin-top: 5px; } .repcontrol button:hover { color: black; border-color: black; background: #c7c7c7; } .repcontrol button.repcontrol_edit::after { content: "("; } .repcontrol button.repcontrol_add::after { content: "&"; } .repcontrol button.repcontrol_edit::after, .repcontrol button.repcontrol_add::after { font-size: 12px; } .repcontainer.editmode + .repcontrol button.repcontrol_edit::after { content: ")"; } .sheet-free-repcontrol .repcontrol { margin-top: 3px; } .sheet-playbook-selector { width: 28.75%; } .sheet-playbook-selector select { border: 0; border-radius: 0; font-size: 18px; letter-spacing: 1px; color: white; background-color: black; text-transform: uppercase; font-weight: bold; padding-top: 0; height: 19px; width: 100%; margin-right: 10px; } .sheet-playbook-selector optgroup { font-size: 14px; } .sheet-stats input[type=number] { text-align: center; font-size: 30px; margin-top: 8px; width: 100%; margin-left: auto; margin-right: auto; } .sheet-stats .sheet-title { width: 100%; text-align: center; margin: 0px; font-size: 18px; } .sheet-stats .sheet-moves { width: 100%; text-align: center; margin: 0; font-size: 12px !important; border: 0; padding-top: 0 !important; padding-bottom: 0 !important; } .sheet-stats input::-webkit-outer-spin-button, .sheet-stats input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .sheet-stats .sheet-statbutton { border: 0; background-color: black; color: white; margin: 0 !important; font-size: 18px; width: 100%; text-align: center; } .sheet-stats .sheet-statresetbutton { border: 0; background-color: black; color: white; margin: 0 !important; font-size: 18px; width: 100%; text-align: center; } .sheet-stat-selector textarea { position: absolute; border: 0; height: 70px; font-size: 16px; z-index: -1; top: 10px; left: 2px; resize: none; } .sheet-stat-selector button { border: 1px solid black; width: 100%; height: 70px; padding: 0; z-index: 1; background-color: transparent; margin-top: 10px; } .sheet-stat-selector .sheet-text { margin-top: 20px; color: red; } .sheet-stat-selector .repcontrol { display: none !important; } .sheet-statcheck[value="0"] ~ .sheet-stats, .sheet-statcheck[value="1"] ~ .sheet-stat-selector { display: none; } .sheet-statcheck[value="1"] ~ .sheet-stats, .sheet-statcheck[value="0"] ~ .sheet-stat-selector { display: block; } .sheet-flexwidth[value="0"] ~ .sheet-container { width: 860px; } .sheet-flexwidth[value="1"] ~ .sheet-container { min-width: 860px; max-width: 1190px; } /* COLUMN LAYOUT */ .sheet-flex { display: flex; } .sheet-flex-wrap { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; } .sheet-flex-center { text-align: center; display: flex; justify-content: center; align-items: center; } .sheet-right-column { padding-left: 5px; } .sheet-col10 { width: 10%; } .sheet-col15 { width: 15%; } .sheet-col42 { width: 42.5%; } .sheet-col47 { width: 47%; } .sheet-col53 { width: 53%; } .sheet-col37 { width: 37%; } .sheet-col33 { width: 33.3%; } .sheet-col40 { width: 40%; } .sheet-col24b { width: 24.25%; } .sheet-col50 { width: 50%; } .sheet-col52b { width: 52%; } .sheet-col55 { width: 55%; } .sheet-col45 { width: 45%; } .sheet-col63 { width: 63%; } .sheet-col100 { width: 100%; } /* FONT STYLES */ .sheet-label, input[type=text].sheet-label, textarea.sheet-label, button[type=roll].sheet-label { text-transform: uppercase; font-weight: bold; } .sheet-uppercase { text-transform: uppercase; } .sheet-smallcaps, input[type=text].sheet-smallcaps, textarea.sheet-smallcaps { font-variant: small-caps; font-weight: bold; } .sheet-text { color: black; text-align: justify; padding: 3px 0 2px; line-height: 13px; } .sheet-title { font-size: 16px; letter-spacing: 1px; color: white; background-color: black; padding: 3px 5px; margin-right: 10px; } .sheet-section-head { text-align: center; font-size: 18px; padding-top: 10px; } .sheet-tanstaafl { padding: 5px; } .sheet-tanstaafl .sheet-oweLabel { border-right: 2px solid black; border-bottom: 2px solid black; text-align: center; } .sheet-tanstaafl .sheet-owedLabel { border-bottom: 2px solid black; text-align: center; } .sheet-tanstaafl .sheet-owe { border-right: 2px solid black; min-height: 215px; } .sheet-tanstaafl .sheet-owed input[type=text], .sheet-tanstaafl .sheet-owe input[type=text] { text-align: center; border: none; } .sheet-tanstaafl button { margin: 2px; } .sheet-exp { padding-left: 5px; margin-top: 5px; /* CHECKBOXES */ } .sheet-exp .sheet-xpboxcontainer { width: 32px; } .sheet-exp .sheet-xpbox { margin-right: -30px; } .sheet-exp input.sheet-xpbox, .sheet-exp .sheet-xpbox + span { height: 30px; width: 30px; flex: 0 0 auto; } .sheet-exp .sheet-tanstbox span { background: #aaa; } .sheet-exp .sheet-xpbox + span { border: 2px solid black; } .sheet-exp .sheet-xpbox:checked + span { background: red; } .sheet-exp .sheet-xpbox:hover + span { opacity: 0.7; } .sheet-notes { margin-top: 10px; padding-left: 5px; } .sheet-notes textarea { border: 2px solid black; padding: 2px; } .sheet-harm { padding: 5px; } .sheet-harm input.sheet-harmbox { margin-right: -30px; } .sheet-harm .sheet-harmboxcontainer { border-bottom: 2px solid black; text-align: left; height: 80px; } .sheet-harm .sheet-harmboxsubcontainer { height: 40px; padding-left: 5px; padding-top: 5px; } .sheet-harm input.sheet-harmbox, .sheet-harm .sheet-harmbox + span { height: 30px; width: 30px; flex: 0 0 auto; } .sheet-harm .sheet-harmbox + span { border: 2px solid black; } .sheet-harm .sheet-harmbox:checked + span { background: red; } .sheet-harm .sheet-harmbox:hover + span { opacity: 0.7; } .sheet-harm .sheet-harmtags textarea { border: 2px solid black; padding: 2px; height: 62px; border-top: none; } .sheet-harm .sheet-harmlabel { padding-top: 30px; height: 80px; text-align: right; font-size: 14px; text-transform: lowercase; } .sheet-harm .sheet-taglabel { width: 100%; text-align: center; height: 18px; border-left: 2px solid black; border-right: 2px solid black; font-size: 18px; } .sheet-harm .sheet-smalltaglabel { background-color: #d8d8d8; font-size: 12px; text-transform: lowercase; } .sheet-gearsection { margin: 0 5px; border: 2px solid black; } .sheet-gearsection input[type=checkbox] { margin: 5px; margin-right: -25px; } .sheet-gearsection input.sheet-gearcheck, .sheet-gearsection .sheet-gearcheck + span { height: 20px; width: 20px; flex: 0 0 auto; } .sheet-gearsection .sheet-gearcheck + span { border: 1px solid black; margin: 5px; } .sheet-gearsection .sheet-gearcheck:checked + span { background: red; } .sheet-gearsection .sheet-gearcheck:hover + span { opacity: 0.7; } .sheet-gearsection input[type=text] { width: 295px; margin: 0; margin-left: 30px; } .sheet-bottomsection-head { margin-top: 10px; text-align: center; font-size: 16px; background-color: black; color: white; height: 35px; padding-top: 10px; padding-bottom: 10px; } .sheet-bottomsection-desc { margin-top: 10px; margin-right: 10px; padding-left: 5px; text-align: left; font-size: 12px; border-top: 2px solid black; border-bottom: 2px solid black; height: 35px; } .sheet-bottomsection .sheet-col33 { padding: 5px; } .sheet-bottomsection input[type=checkbox] { margin: 5px; margin-right: -15px; margin-left: 0; } .sheet-bottomsection input.sheet-btmcheck, .sheet-bottomsection .sheet-btmcheck + span { height: 10px; width: 10px; flex: 0 0 auto; } .sheet-bottomsection .sheet-btmcheck + span { border: 1px solid black; margin: 5px; } .sheet-bottomsection .sheet-btmcheck:checked + span { background: black; } .sheet-bottomsection .sheet-btmcheck:hover + span { opacity: 0.7; } .sheet-bottomsection input[type=text] { width: 255px; margin-left: 20px; margin-right: 0; border: none; font-size: 18px; outline: none; } .sheet-bottomsection textarea { width: 100%; height: 80px; outline: none; border-right: 1px solid #8c8c8c; border-bottom: 1px solid #8c8c8c; } .sheet-levelingup input[type=text] { font-size: 14px; } .sheet-linksection input[type=text] { margin: 0; margin-top: 10px; width: 100%; border-bottom: 1px solid black; border-right: 1px solid #8c8c8c; } .sheet-linksection input[type=text]:focus { outline: 1px solid blue; } .sheet-linksection textarea { height: 40px; } .sheet-rolltemplate-mp table { border: 1px solid black; width: 100%; } .sheet-rolltemplate-mp th { padding: 5px; color: white; background-color: black; font-family: "Courier Prime"; text-align: center; font-size: 18px; } .sheet-rolltemplate-mp td { padding: 5px; background-color: white; font-family: "Courier Prime"; } .sheet-rolltemplate-mp .inlinerollresult { background-color: black; border: 1px solid black !important; color: white; font-size: 20px; } .sheet-rolltemplate-mp .inlinerollresult .fullfail, .sheet-rolltemplate-mp .inlinerollresult .fullcrit { border: 1px solid black; } .sheet-rolltemplate-mp .sheet-result { text-align: right; }