.charsheet { background:black; width:830px; font-family:"Special Elite"; font-size:0.8em; } @import url('https://fonts.googleapis.com/css?family=Averia+Sans+Libre|Indie+Flower|Special+Elite&display=swap'); div.sheet-banner, div.sheet-top, div.sheet-attributes, div.sheet-skills, div.sheet-talents, div.sheet-weapons, div.sheet-equipment { background:white; width:820px; border-radius: 5px; padding:5px; } div.sheet-box { border:1px solid black; width:100%; } .sheet-hidden { display:none; } /* 3colrow */ .charsheet .sheet-3colrow .sheet-col { width: calc(33% - 9px) !important; margin-right: 5px !important; } .charsheet .sheet-3colrow .sheet-col:last-child { margin-right: 0 !important; } /* Grid */ div.sheet-grid_top { display: grid; grid-template-columns: 535px 300px; grid-column-gap: 0px; grid-template-areas: "none wounds" "none wounds"; } div.sheet-grid_top div.sheet-wounds_area { grid-area: wounds; } div.sheet-grid_test { display: grid; grid-template-columns: 50px 230px; grid-column-gap: 0px; } div.sheet-grid_1 { display: grid; grid-template-columns: 120px 50px 75px 140px 50px 75px ; grid-column-gap: 0px; } div.sheet-grid_2 { display: grid; grid-template-columns: 120px 50px 75px 50px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px; grid-column-gap: 0px; } div.sheet-grid_2 .sheet-span_box{ align-self: end; } div.sheet-grid_3 { display: grid; grid-template-columns: 55px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px; grid-column-gap: 0px; } div.sheet-grid_4 { display: grid; grid-template-columns: 25px 220px 50px 5px 60px 25px 25px 220px 50px 5px 60px 25px ; grid-column-gap: -2px; } div.sheet-grid_5 { display: grid; grid-template-columns:25px 160px 40px 5px 40px 5px 40px 5px 40px 25px 25px 160px 40px 5px 40px 5px 40px 5px 40px 25px; grid-column-gap: 0px; } div.sheet-grid_5a { display: grid; grid-template-columns:380px 380px; grid-column-gap: 5px; } div.sheet-grid_6 { display: grid; grid-template-columns:25px 160px 40px 5px 40px 5px 40px 40px 40px 40px 5px 40px 25px; grid-column-gap: 0px; } div.sheet-grid_6a { display: grid; grid-template-columns:500px; grid-column-gap: 0px; } div.sheet-over_grid { display: grid; grid-template-columns:530px 290px; grid-column-gap: 0px; } /* text */ input.sheet-name { width:100%; height:40px; background: transparent; font-variant: small-caps; font-size: 35px; font-family: 'Indie Flower'; border:none; } input.sheet-data { width:100%; height:20px; background: transparent; font-family: 'Indie Flower'; border-top:none; border-left:none; border-right:none; border-bottom:1px solid black; } input.sheet-skill_name { width:100%; height:20px; background: transparent; font-family: 'Copperplate'; border-top:none; border-left:none; border-right:none; border-bottom:1px solid black; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .sheet-bigger { font-size: 16px; font-weight:bold; } div.sheet-label_2 { font-family: 'Courier New'; text-align:center; font-size: 1.2em; font-weight:bold; } .sheet-underline { border-top:1px solid black; border-bottom:1px solid black; } .sheet-center { text-align:center; margin: auto; } .sheet-arrows { font-family: 'Pictos'; text-align:center; align-self: center; } /* number */ input.sheet-attribute { width:70px; height:30px; font-size:30px; background: transparent; font-family: 'Copperplate'; text-align:center; border:1px solid black; } /* select */ select { overflow: hidden; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-top: -3px; padding-bottom: -4px; overflow: hidden; margin-top: -2px; margin-bottom: -3px; background: transparent; color: black; border-bottom:1px solid black; border-top:none; border-left:none; border-right:none; width:100%; height:100%; } /* textarea */ textarea.sheet-textarea { resize: vertical; height:3em; border-radius:5px; width: calc(100% - 10px); font-family: 'Indie Flower'; } .sheet-530 { width:530px; } /* Rows and Items */ .charsheet .sheet-row { height: 24px; margin: 2px 0px 2px; } .charsheet .sheet-doublerow { height: 48px; margin: 2px 0px 2px; } .charsheet .sheet-item { display: inline-block; width: 100%; height: 28px; vertical-align: middle; margin: 0 -2px; text-align: left; padding: 3px 2px; } .charsheet .sheet-trait { position: relative; } .charsheet .sheet-item.sheet-5 { width: 5px; } .charsheet .sheet-item.sheet-14 { width: 14px; } .charsheet .sheet-item.sheet-20 { width: 20px; } .charsheet .sheet-item.sheet-25 { width: 25px; } .charsheet .sheet-item.sheet-30 { width: 30px; } .charsheet .sheet-item.sheet-40 { width: 40px; } .charsheet .sheet-item.sheet-45 { width: 45px; } .charsheet .sheet-item.sheet-50 { width: 50px; } .charsheet .sheet-item.sheet-53 { width: 53px; } .charsheet .sheet-item.sheet-60 { width: 60px; } .charsheet .sheet-item.sheet-65 { width: 65px; } .charsheet .sheet-item.sheet-70 { width: 70px; } .charsheet .sheet-item.sheet-75 { width: 75px; } .charsheet .sheet-item.sheet-80 { width: 80px; } .charsheet .sheet-item.sheet-85 { width: 85px; } .charsheet .sheet-item.sheet-90 { width: 90px; } .charsheet .sheet-item.sheet-98 { width: 98px; } .charsheet .sheet-item.sheet-100 { width: 100px; } .charsheet .sheet-item.sheet-102 { width: 102px; } .charsheet .sheet-item.sheet-110 { width: 110px; } .charsheet .sheet-item.sheet-120 { width: 120px; } .charsheet .sheet-item.sheet-125 { width: 125px; } .charsheet .sheet-item.sheet-128 { width: 128px; } .charsheet .sheet-item.sheet-130 { width: 130px; } .charsheet .sheet-item.sheet-140 { width: 140px; } .charsheet .sheet-item.sheet-150 { width: 150px; } .charsheet .sheet-item.sheet-160 { width: 160px; } .charsheet .sheet-item.sheet-180 { width: 180px; } .charsheet .sheet-item.sheet-190 { width: 190px; } .charsheet .sheet-item.sheet-195 { width: 195px; } .charsheet .sheet-item.sheet-196 { width: 196px; } .charsheet .sheet-item.sheet-197 { width: 197px; } .charsheet .sheet-item.sheet-200 { width: 200px; } .charsheet .sheet-item.sheet-202 { width: 202px; } .charsheet .sheet-item.sheet-210 { width: 210px; } .charsheet .sheet-item.sheet-230 { width: 230px; } .charsheet .sheet-item.sheet-300 { width: 300px; } .charsheet .sheet-item.sheet-395 { width: 395px; } .charsheet .sheet-item.sheet-400 { width: 400px; } .charsheet .sheet-item.sheet-440 { width: 440px; } .charsheet .sheet-item.sheet-455 { width: 455px; } .charsheet .sheet-item.sheet-460 { width: 460px; } .charsheet .sheet-item.sheet-530 { width: 530px; } .sheet-auto { width: auto; } .sheet-full { width: calc(100% - 80px); } .charsheet .sheet-row label { font-size:13px; font-weight:900; text-align:left; } /* =====Buttons ===== */ button[type=roll].sheet-attribute_btn:before { content: ""; } button[type=roll].sheet-attribute_btn { margin:0px; padding:2px 3px; background:transparent; font-size:1.3em; font-weight:bold; box-shadow:none; height:16px; width:100%; color:#333; border-top:1px solid transparent; border-left:none; border-right:none; border-bottom:1px solid transparent; text-align:center; font-family:"Special Elite"; } button[type=roll].sheet-attribute_btn:hover { color:#8b0000; border-top:1px solid #8b0000; border-left:none; border-right:none; border-bottom:1px solid #8b0000; } button[type=roll].sheet-attribute_btn:active { color: #000000; border-top:1px solid #000000; border-left:none; border-right:none; border-bottom:1px solid #000000; } button { outline:none; } /* =====Skill Buttons ===== */ button[type=roll].sheet-skill:before { content: ""; } button[type=roll].sheet-skill { margin:0px; padding:2px 3px; background:transparent; font-size:1.3em; font-weight:bold; box-shadow:none; height:16px; width:100%; color:#333; border:none; text-align:center; font-family: "Pictos"; } button[type=roll].sheet-skill:hover { color:#8b0000; } button[type=roll].sheet-skill:active { color: #000000; } /* -----Health boxes----- */ /* -----Health boxes----- */ /* -----Health boxes----- */ div.sheet-healthbox { width: 12px; height: 12px; position: relative; top:1px; left:1px; border-radius: 5px; border:1px dotted black; color: #000000; } input.sheet-healthbox { margin: 0 0 0 0; opacity: 0; width: 12px; height: 12px; position: absolute; z-index: 1; } span.sheet-healthbox { margin: 0 0 0 0; display: none; border-radius: 5px; } input.sheet-unharmed { z-index: 2; } input.sheet-unharmed:checked + input.sheet-shock, input.sheet-shock:checked + input.sheet-lethal, input.sheet-lethal:checked + input.sheet-non_exist, input.sheet-non_exist:checked + input.sheet-unharmed { z-index: 3; } input.sheet-unharmed:checked ~ span.sheet-unharmed, input.sheet-shock:checked ~ span.sheet-shock, input.sheet-lethal:checked ~ span.sheet-lethal, input.sheet-non_exist:checked ~ span.sheet-non_exist { display: inline-block; } .sheet-unharmed { width: 12px; height: 12px; background: transparent; background-size: 100%; } .sheet-unharmed:before { content:" "; font-weight: 900; font-size: 12px; margin-left:3px; position: relative; top:0px; left:0px; } .sheet-shock { width: 12px; height: 12px; background: transparent; } .sheet-shock:before { content:"/"; font-family: "Contrail One"; font-weight: 900; font-size: 16px; margin-left:3px; position: relative; top:-5px; left:0px; } .sheet-lethal { width: 12px; height: 12px; background: transparent; background-size: 100%; } .sheet-lethal:before { content:"X"; font-family: "Contrail One"; color:red; font-weight: 900; font-size: 16px; margin-left:3px; position: relative; top:-3px; left:-1px; } .sheet-non_exist { width: 12px; height: 12px; background: #000000; background-size: 100%; } .sheet-non_exist:before { content:""; font-weight: 900; margin-left:3px; position: relative; top:0px; left:0px; } /* Hide actual radio/checkbox */ input.sheet-extra_data[type="checkbox"] { opacity: 0; width: 530px; height: 16px; position: relative; top: 0px; left: 0px; margin: 0px; cursor: pointer; z-index: 1; box-shadow:0px 0px 4px green; } /* Fake checkbox */ input.sheet-extra_data[type="checkbox"] + span::before { position: relative; top: -18px; left: 0px; margin-right: 0px; line-height: 14px; text-align: left; display: inline-block; vertical-align: middle; content: "Personal Data"; width: 530px; height: 14px; font-size: 12px; color:white; background:black; border-top: 1px solid transparent; border-bottom: 1px solid transparent; } input.sheet-extra_data[type="checkbox"]:checked + span::before { color:black; background:white; } input.sheet-hider[type="checkbox"]:checked ~ div.sheet-hold, input.sheet-extra_data[type="checkbox"]:checked ~ div.sheet-hold { display: none; } /* Hide actual radio/checkbox */ input.sheet-lock[type="checkbox"] { opacity: 0; width: 16px; height: 16px; position: relative; top: 0px; left: 10px; margin: -8px; cursor: pointer; z-index: 1; } /* Fake checkbox */ input.sheet-lock[type="checkbox"] + span::before { margin-right: 4px; line-height: 14px; text-align: center; display: inline-block; vertical-align: middle; font-family: 'Pictos'; content: ")"; width: 14px; height: 14px; font-size: 12px; } input.sheet-lock[type="checkbox"]:checked + span::before { content: "("; } /* Repeating Blocks */ /* Repeating Blocks */ /* Repeating Blocks */ .repcontrol { min-height: 27px; } .repcontrol .btn { /*visibility: hidden;*/ border: medium none; color: transparent !important; background: none; box-shadow: none; } .repcontrol .btn:focus { outline: 0; } .sheet-saving-throw-container .repcontrol .repcontrol_edit, .sheet-saving-throw-container .repcontrol .repcontrol_add { padding-left: 4px; padding-right: 4px; } .repcontrol .repcontrol_edit:after { content: '('; visibility: visible; font-family: pictos; background-color: transparent; border: 1px solid black; border-radius: 2px; font-size: 12px; height: 12px; width: 12px; padding: 2px 4px 2px 4px; color: black; } .editmode ~ .repcontrol .repcontrol_edit:after { content: ')'; } .repcontrol .repcontrol_add:before { content: '&'; visibility: visible; font-family: pictos; background-color: transparent; border: 1px solid black; border-radius: 2px; font-size: 12px; height: 12px; width: 12px; padding: 2px 4px 2px 4px; color: black; } .repcontrol .repcontrol_edit:hover:after, .repcontrol .repcontrol_add:hover:before { background-color: transparent; } .sheet-resources .repcontrol { margin-top: -10px; } .itemcontrol { z-index: 10; } .itemcontrol .repcontrol_del { font-size: 10px; margin-top: 3px; padding: 0px; height: 18px; width: 18px; } .itemcontrol .repcontrol_move { font-size: 10px; margin-top: 3px; padding: 0px; height: 18px; width: 18px; } /* End of Repeating Blocks */ /* End of Repeating Blocks */ /* End of Repeating Blocks */ /* %%%%% %%%%% %%%%% */ /* b7 */ /* %%%%% %%%%% %%%%% */ .sheet-rolltemplate-base { width: 240px; padding: 2px; background: white; border-radius:8px; border-width:1px; border-style:solid; color:black; font-family: 'Lucida Sans Typewriter'; } .sheet-rolltemplate-base h5 { color:#8B0000; font-size:1.2em; background:transparent; border:none; } .sheet-rolltemplate-base hr { height:10px; margin:0px; } .sheet-rolltemplate-base .inlinerollresult { background-color: transparent; color: #000000; border: none; } .sheet-rolltemplate-base .inlinerollresult.fullcrit { color: #000000; border: none; } .sheet-rolltemplate-base .inlinerollresult.fullfail { color: #000000; border: none; } .sheet-rolltemplate-base .inlinerollresult.importantroll { color: #000000; border: none; } /* %%%%% %%%%% %%%%% */ .sheet-rolltemplate-skill { width: 190px; padding: 2px; background: white; border-radius:8px; border-width:1px; border-style:solid; color:black; font-family: 'Lucida Sans Typewriter'; } .sheet-rolltemplate-skill h5 { color:#8B0000; font-size:1.2em; background:transparent; border:none; } .sheet-rolltemplate-skill hr { height:10px; margin:0px; } .sheet-rolltemplate-skill .inlinerollresult { background-color: transparent; color: #000000; border: none; } .sheet-rolltemplate-skill .inlinerollresult.fullcrit { color: #000000; border: none; } .sheet-rolltemplate-skill .inlinerollresult.fullfail { color: #000000; border: none; } .sheet-rolltemplate-skill .inlinerollresult.importantroll { color: #000000; border: none; } /* %%%%% %%%%% %%%%% */ .sheet-rolltemplate-talent { width: 190px; padding: 2px; background: white; border-radius:8px; border-width:1px; border-style:solid; color:black; } .sheet-rolltemplate-talent h5 { color:#8B0000; font-size:1.2em; background:transparent; border:none; font-family: 'Lucida Sans Typewriter'; } .sheet-rolltemplate-talent hr { height:10px; margin:0px; } .sheet-rolltemplate-talent .inlinerollresult { background-color: transparent; color: #000000; border: none; } .sheet-rolltemplate-talent .inlinerollresult.fullcrit { color: #000000; border: none; } .sheet-rolltemplate-talent .inlinerollresult.fullfail { color: #000000; border: none; } .sheet-rolltemplate-talent .inlinerollresult.importantroll { color: #000000; border: none; } .sheet-rolltemplate-talent div { font-family: 'Lucida Sans Typewriter'; } .sheet-rolltemplate-talent span.sheet-dice_note { color:blue; margin-left:10px; margin-right:10px; } .sheet-rolltemplate-talent span.sheet-template_data { font-family:'Indie Flower'; } /* %%%%% %%%%% %%%%% */ .sheet-rolltemplate-weapon { width: 190px; padding: 2px; background: white; border-radius:8px; border-width:1px; border-style:solid; color:black; } .sheet-rolltemplate-weapon h5 { color:#8B0000; font-size:1.2em; background:transparent; border:none; font-family: 'Lucida Sans Typewriter'; } .sheet-rolltemplate-weapon hr { height:10px; margin:0px; } .sheet-rolltemplate-weapon .inlinerollresult { background-color: transparent; color: #000000; border: none; } .sheet-rolltemplate-weapon .inlinerollresult.fullcrit { color: #000000; border: none; } .sheet-rolltemplate-weapon .inlinerollresult.fullfail { color: #000000; border: none; } .sheet-rolltemplate-weapon .inlinerollresult.importantroll { color: #000000; border: none; } .sheet-rolltemplate-weapon div { font-family: 'Lucida Sans Typewriter'; } .sheet-rolltemplate-weapon span.sheet-dice_note { color:blue; margin-left:10px; margin-right:10px; } .sheet-rolltemplate-weapon span.sheet-template_data { font-family:'Indie Flower'; }