/*general styling*/ .sheet-wrapper { background-color:WhiteSmoke; font-family: Book Antiqua,serif; font-size:0.85em; -moz-appearance:auto; -webkit-appearance: auto; width:650px; margin:auto; border-style:double; border-width:5px; } .sheet-wrapper input[type="number"]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance:none; margin: 0; } .sheet-wrapper input[type="number"] { -moz-appearance:textfield; -webkit-appearance:textfield; width:30px; } hr { border: 0; height: 2px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); } .charsheet .inlinerollresult { background-color:transparent; text-decoration:none; vertical-align:middle; } .textchatcontainer span.inlinerollresult.fullfail { border:none; color:red; } ::-webkit-input-placeholder { font-style:oblique; font-size:10px; color:gray;} input::-moz-placeholder { font-style:oblique; font-size:10px; color:gray;} input[type="number"]::-moz-placeholder { font-style:oblique; font-size:7px; text-align:center; color:gray;} textarea::-moz-placeholder { font-style:oblique; font-size:10px; color:gray;} /*Tooltip formatting*/ .sheet-tooltip { position:absolute; background-color:white; border:2px solid black; border-radius:4px; padding:3px; font-size:9px; text-align:center; visibility:hidden; color:black; width:100px; z-index:1; } /*header formatting*/ .sheet-logo { width:120px; margin:5px; } .sheet-player { font-size:14px; font-weight:bold; font-family:Monospace; width:180px; } .sheet-headeralignleft { width:70px; float:left; } input[type="checkbox"].sheet-ispcornpc, input[type="checkbox"].sheet-ispcornpc + span::before { position:relative; vertical-align: top; bottom:93px; left:580px; } input[type="checkbox"].sheet-ispcornpc { /*hide checkbox*/ opacity: 0; -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); position:relative; left:593px; bottom:85px; width: 2em; height: 1em; margin: 0px; margin-top:-30px; margin-bottom:-8px; cursor: pointer; z-index:1; } input[type="checkbox"].sheet-ispcornpc + span::before { /* Fake checkbox for NPC*/ margin-right: 3px; margin-top:-30px; margin-bottom:-8px; margin-left:-25px; line-height:11px; cursor:pointer; text-align: right; display: inline-block; vertical-align: top; background-color:black; color:white; border:2px solid gray; border-radius:5px; padding:5px; content: "PdM"; width:37px; font-size: 18px; font-family:fantasy; font-weight:bold; } input[type="checkbox"].sheet-ispcornpc:checked + span::before { /* Fake checkbox for PC*/ content: "PJ"; width:37px; text-align:left; border:2px solid black; background-color:white; color:black; } .sheet-pccharsheet, .sheet-npccharsheet { display:none; } input[type="checkbox"].sheet-ispcornpc:checked ~ .sheet-pccharsheet { display:block; } input[type="checkbox"].sheet-ispcornpc:not(:checked) ~ .sheet-npccharsheet { display:block; } .sheet-buttonforgenericroll, .sheet-buttonforresistanceroll { position:relative; display:inline-block; width:45px; height:45px; bottom:85px; left:485px; margin-bottom:-45px; z-index:3; } .sheet-buttonforgenericroll button[type="roll"], .sheet-buttonforresistanceroll button[type="roll"] { color:#805500; height:40px; width:40px; font-size:33px; background-color:transparent; } .sheet-buttonforgenericroll:hover .sheet-tooltip { visibility:visible; top:38px; right:-33px; } .sheet-buttonforgenericroll .sheet-tooltip::after { content: " "; position: absolute; bottom: 100%; /* At the bottom of the tooltip */ left: 50%; margin-left: -7px; border-width: 7px; border-style: solid; border-color: transparent transparent black transparent; } .sheet-buttonforresistanceroll:hover .sheet-tooltip { visibility:visible; left:-31px; top:38px; } .sheet-buttonforresistanceroll .sheet-tooltip::after { content: " "; position: absolute; bottom: 100%; /* At the bottom of the tooltip */ left: 50%; margin-left: -7px; border-width: 7px; border-style: solid; border-color: transparent transparent black transparent; } .sheet-buttonforresistanceroll button[type=roll]::before { content: 'T'; } .sheet-buttonforgenericroll button[type=roll]::before { content: 't'; } /*Initiative button formatting*/ .sheet-buttonforinitiative { position:relative; left:570px; bottom:35px; margin-bottom:-50px; width:55px; height:35px; font-size:9px; } .sheet-buttonforinitiativeroll { width:55px; height:35px; border-radius:15px; } button[type=roll].sheet-buttonforinitiativeroll::before { content: ''; } /*tab selection formmating*/ .sheet-tab, .sheet-tablabel{ display:inline-block; width:75px; } .sheet-tablabel { border:2px solid black; border-bottom:none; padding: 4px; box-shadow: 0px 0px 3px 0px #888888; border-radius:10% 10% 0 0; margin:4px; margin-bottom:-1px; font-size:13px; background-color:gainsboro; } input[type="radio"].sheet-tab { /*hide checkbox*/ opacity:0; -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); width: 31px; height: 11px; position: relative; left: 62px; bottom:3px; margin: 0px; margin-left:-33px; cursor: pointer; z-index: -1em; } input[type="radio"].sheet-tab:checked + label { position:relative; bottom:10px; padding-bottom:15px; margin-bottom:-12px; border-top-left-radius:4px; border-top-right-radius:4px; border-bottom:none; font-weight:900; background-color:whitesmoke; box-shadow: none; } .sheet-separator hr { width:100%; background-color:black; height:2px; margin-top:0px; } /*tab exhibition*/ .sheet-tabpage { display:none; } input.sheet-tab-basic:checked ~ div.sheet-tab-basic, input.sheet-tab-skills:checked ~ div.sheet-tab-skills, input.sheet-tab-combat:checked ~ div.sheet-tab-combat, input.sheet-tab-magic:checked ~ div.sheet-tab-magic, input.sheet-tab-itens:checked ~ div.sheet-tab-itens { display: block; } /*Two collumns general formatting*/ .sheet-separatedCollumns { display:inline-block; margin:0px; margin-left:4px; vertical-align:top; } /*basic informations formatting*/ .sheet-basic-information { font-size:10px; margin-top:8px; } .sheet-inputbasicinformation { width:210px; color:black; position:relative; font-size:11px; border-bottom:1px solid black; } .sheet-textalign, .sheet-initiativealign { display:inline-block; } .sheet-textalign { width:81px; } .sheet-initiativealign { font-size:9px; } .sheet-inputexp, .sheet-inputinitiative { border-bottom:1px solid black; margin-right:0px; font-size:16px; text-align:center; font-weight:bold; } .sheet-inputinitiative { font-size:12px; } /*Phase and actual condition formatting*/ .sheet-estagioline { text-align:left; margin-top:10px; margin-bottom:5px; margin-left:30px; } .sheet-estagiolabel { font-weight:bold; color: black; text-align:left; margin-left:7px; font-size:8px; } .sheet-estagioinput input[type=number] { border-radius:45%; border:2px solid black; box-shadow: inset 0px 0px 4.2px 2.1px rgba(0,0,0,0.1); margin:0; text-align:center; font-size:25px; width:40px; height:40px; z-index:2; } .sheet-inputexpline { margin-bottom:-31px; z-index: 1; } .sheet-actualconditionscontainer { width:500px; text-align:center; position:relative; bottom:15px; margin:auto; margin-top:-120px; padding:7px; z-index:1; } .sheet-secondaryicons { position:relative; margin-right:-53px; margin-left:40px; } .sheet-reviewline { display:inline-block; position:relative; text-align:center; bottom:7px; } .sheet-reviewline span.sheet-secondarytotalshow { position:relative; top:18px; right:26px; font-size:9px; font-style:italic; } .sheet-reviewline label.sheet-secondaryattrshow { position:relative; width:50px; height:10px; padding:0px; margin-bottom:-13px; text-align:center; font-size:8px; z-index:0; } .sheet-reviewline input[type='number'] { background-color:transparent; border-color:transparent; border:none; outline:none; box-shadow:none; text-align:center; font-weight:bold; position:relative; top:5px; width:50px; height:40px; font-size:20px; outline:none; } /*attributes collumns formatting*/ .sheet-col-align { display: inline-block; -webkit-align-content:left; vertical-align:center; margin-left:4px; padding-left:5px; width:310px; } .sheet-attributeinput { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; width:30px; border:2px solid #000; margin:0; height:20px; box-sizing: border-box; text-align:center; } .sheet-attributeoutput { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; width:33px; border:2.10px solid #000; margin:0; height:13.0px; box-sizing: border-box; text-align:center; border-radius:45%; } .sheet-row-align { display:inline-block; line-height:16px; } .sheet-row-text { width:180px; font-size:13px; margin-left:10px; margin-right:-10px; } .sheet-row-inputspace { width:30px; } .sheet-row-button button[type="roll"] { box-sizing: border-box; width:30px; height:30px; } .sheet-blocksheader h3 { background-color: #303030; background: linear-gradient(to bottom, #404040, #181818); color: white; text-align:center; border:2.00px solid black; border-radius:3px; margin-bottom:8px; margin-top:11px; } .sheet-basicheader { width:310px; margin-left:8px; } .sheet-defativasub { font-size:0.5em; position:relative; top:-35px; left:0px; text-align:center; padding-top:1px; } .sheet-doublerowadjust { position:relative; bottom:-27px; margin-top:-27px; } /*Characterizations and behavior formatting */ .sheet-characterizationhint, .sheet-characterizationcost { display:inline-block; font-size:8px; } .sheet-characterizationhint { width:100px; margin:0px; padding-left:10px; } .sheet-characterizationcost { float:right; width:30px; margin:0px; margin-right:12px; padding:0px; text-align:center; } .sheet-characterization-name, .sheet-characterizationcostbox { display:inline-block; } .sheet-characterization-name { width:260px; border:1.5px solid black; margin:0px; margin-bottom:2px; } .sheet-characterizationcostbox { float:right; text-align:center; border:1.5px solid black; margin:0px; margin-bottom:2px; margin-right:2px; } /*Behavior formatting start*/ .sheet-behave { width:33px; display:inline-block; } .sheet-behave-block-internal hr { width:100%; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); margin-top:-0.6em; } .sheet-behave-block-internal label { text-align:center; } /*Skills tab formatting start*/ /*Skill basic information row*/ .sheet-tabheader_left, .sheet-tabheader_right { display:inline-block; width:305px; margin-bottom:7px; } .sheet-tabheader_left input[type='number'], .sheet-tabheader_right input[type='number'] { width:36px; height:30px; border:1px solid black; text-align:center; padding:0px; } .sheet-tabheader_right { margin-left:34px; } /*Skill table formatting*/ .sheet-skillgroup { border:1px dashed black; width:315px; } .sheet-skilgrouptitle { background-color:black; background: linear-gradient(to bottom, #404040, #181818); padding-bottom:4.0px; } .sheet-skillgroupcolor { color:white; font-weight:bold; margin-left:7px; } .sheet-skillinformation { font-size:6.0px; width:25px; } .sheet-skillname { width:145px; font-size:9.0px; padding-left:5px; } .sheet-skillinputdescription { background-color:Gainsboro; } .sheet-skillmod, .sheet-skilllevel, .sheet-skilltotal, .sheet-skillroll { display:inline-block; width:35px; font-size:8px; text-align:center; vertical-align:middle; margin:-3px; } .sheet-skillroll button[type="roll"] { box-sizing: border-box; width:30px; height:30px; font-size:16px; } .sheet-skillinput { border:1.5px solid black; border-radius:15%; text-align:center; } input[type='text'].sheet-skillespecialization { position:relative; bottom:3.5px; height:22px; width:300px; margin-left:5px; font-size:10px; display:none; } textarea.sheet-skillespecialization { position:relative; height:55px; width:290px; margin-left:5px; font-size:10px; display:none; } input[type='checkbox'].sheet-skillname { width:145px; height:20px; margin-right:-145px; opacity:0; z-index:1; } .sheet-labeltoshowskill { display:inline-block; width:135px; margin-left:5px; margin-top:-20px; font-size:12px; letter-spacing:-0.75px; } input[type='checkbox']:checked.sheet-skillname + label::before{ font-size:11px; font-weight:bold; cursor:pointer; } input[type='checkbox'].sheet-skillname + label::before { font-size:11px; font-weight:bold; cursor:pointer; } input[type='checkbox']:checked.sheet-skillname + label.sheet-labeltoshowskill::before {content:'⇓';} input[type='checkbox'].sheet-skillname + label.sheet-labeltoshowskill::before {content:'•';} input[type='checkbox']:checked.sheet-skillname ~ .sheet-skillextrarow > input[type='text'].sheet-skillespecialization, input[type='checkbox']:checked.sheet-skillname ~ .sheet-skillextrarow > textarea.sheet-skillespecialization { display:block; } .sheet-skillline2 { background-color:rgba(245,245,245,1); margin-top:1.5px; margin-bottom:1.5px; } .sheet-skillline1 { background-color:white; margin-top:1.5px; margin-bottom:1.5px; } .sheet-iconsdescription { font-size:10px; } /*Skill table formatting end*/ /*Language section formattin start*/ .sheet-languagestart { position:relative; background-color:black; top:6px; padding:2.5px; } .sheet-languagestart h4 { color:white; } .sheet-languageformatting { width:40%; } .sheet-languagename { width:250px; } .sheet-languagenameindex { font-size:8px; position:relative; width:30%; display:inline-block; } .sheet-languagenameindex2 { left:140px; } .sheet-isprimary { margin-right:6px; } .repcontainer[data-groupname="repeating_languages"] > .repitem { display: inline-block; margin-top:9px; width:47%; background-color:rgba(245,245,245,1); padding-bottom:8px; margin-left:8px; padding-left:6px; border:2px solid black; border-radius:3px; } /*Language section formattin end*/ /*Perfect tasks section formattin start*/ .sheet-perfecttasks { position:relative; background-color:black; top:6px; padding:2.5px; } .sheet-perfecttasks h4 { color:white; } .sheet-skillnamefortasksindex { font-size:11px; position:relative; width:20%; top:11px; left:22px; } .sheet-skillfortasks { width:190px; font-size:10px; font-weight:bold; } .sheet-taskofskill { width:415px; height:50px; font-size:9px; } .repcontainer[data-groupname="repeating_perfecttasks"] > .repitem { margin-top:9px; background-color:rgba(245,245,245,1); padding-bottom:8px; margin-left:8px; padding-left:5.5px; border:2px solid black; border-radius:2.6px; } /*End of skill page formatting*/ /*Start of combat page formatting*/ /*weapon group formatting*/ .sheet-weapongroupleft { background-color:black; background: linear-gradient(to bottom, #404040, #181818); border-radius:3px; margin-bottom:5px; } .sheet-weapongroupleft .sheet-weapongrouplabel { font-size:14px; line-height:12px; font-weight:bold; text-align:center; color:black; color:white; float:left; width:55px; transform:rotate(270deg); margin-top:24px; margin-left:-12px; margin-right:-10px; } .sheet-weapongrouplevelrow { display:inline-block; border-left:1.50px; border-right:1.50px; border-bottom:1.000px; margin:3px; margin-right:2px; } .sheet-weapongroupblock { width:510px; } .sheet-weapongroup { color:black; text-align:center; padding:1.000px; width:28px; color:white; font-size:11px; position:Relative; top:4px; } .sheet-weapongrouplevel { background-color:white; color:black; font-weight:bold; text-align:center; position:relative; bottom:7px; } label.sheet-weapongroup:hover .sheet-tooltip { visibility:visible; z-index:1; width:126px; right:-53px; bottom:25px; } label.sheet-weapongroup .sheet-tooltip::after { content: " "; position: absolute; top: 100%; left: 50%; margin-left: -7px; border-width: 7px; border-style: solid; border-color: gray transparent transparent transparent; } /*tables from combat start*/ .sheet-weapongrouptable { background-color:white; color:black; border-top: 3.5px solid black; border-left: 3.5px solid black; border-right: 3.5px solid black; border-radius:3.00px; position:relative; padding:3.3px; font-size:13px; width:98.5%; } .sheet-tablebody { margin:auto; margin-left:2px; } .sheet-weapontablerow1, .sheet-weapontablerow2, .sheet-weapontablerow3, .sheet-weapontablerow4, .sheet-weapontablerow5, .sheet-weapontablerow6, .sheet-weapontablerow7, .sheet-weapontablerow8, .sheet-weapontablerow9, .sheet-weapontablerow10, .sheet-weapontablerow11 { display:inline-block; } .sheet-tablebody .sheet-weapontablerow1, .sheet-tablebody input.sheet-weapontablerow1 { width:202px; } select.sheet-weapontablerow2 { position:relative; bottom:2px; width:35px; height:28px; -webkit-appearance:none; -moz-appearance:none; appearance:none; border:1px solid black; text-align:center; font-size:9px; margin:1px; margin-left:-1px; margin-top:-3px; padding:0px; } .sheet-weapontype { width:25px; } .sheet-tablebody .sheet-weapontablerow3, .sheet-tablebody input.sheet-weapontablerow3 { width:35px; } .sheet-tablebody .sheet-weapontablerow4, .sheet-tablebody input.sheet-weapontablerow4 { width:32px; } .sheet-tablebody .sheet-weapontablerow5, .sheet-tablebody input.sheet-weapontablerow5 { width:47px; } .sheet-tablebody .sheet-weapontablerow6, .sheet-tablebody input.sheet-weapontablerow6, .sheet-tablebody .sheet-weapontablerow7, .sheet-tablebody input.sheet-weapontablerow7, .sheet-tablebody .sheet-weapontablerow8, .sheet-tablebody input.sheet-weapontablerow8 { width:30px; } .sheet-weapontablerow9 { width:110px; -webkit-appearance:none; -moz-appearance:none; appearance:none; text-align:center; font-size:9px; margin-left:-1px; } select.sheet-weapontablerow9 { position:relative; bottom:2px; border:1px solid black; height:28px; margin-top:2px; padding:0px; vertical-align:top; } .sheet-tablebody .sheet-weapontablerow10, .sheet-tablebody input.sheet-weapontablerow10 { width:35px; } .sheet-tablebody .sheet-weapontablerow11, .sheet-tablebody input.sheet-weapontablerow11 { width:25px; } button[type="roll"].sheet-weapontablerow11 { position:relative; width: 15px; height:32px; top:5px; background-color:default; } .repcontainer[data-groupname="repeating_weaponselection"] > .repitem button[type="roll"] { margin-left:-3px; margin-top:-5px; margin-right:-4px; } .sheet-selectedweapons { color:white; text-align:center; font-size:11px; } .sheet-inputweaponproperty { font-size:11px; color:black; text-align:center; border:0.5px solid black; } .sheet-weapontablefirstline { background-color:black; background: linear-gradient(to bottom, #404040, #181818); } .sheet-weapontablerow1, .sheet-weapontablerow2, select.sheet-weapontablerow2, .sheet-weapontablerow3, .sheet-weapontablerow4, .sheet-weapontablerow5, .sheet-weapontablerow6, .sheet-weapontablerow7, .sheet-weapontablerow8, .sheet-weapontablerow9, .sheet-weapontablerow10, .sheet-weapontablerow11 { margin-top:-5px; } label.sheet-weaponbonus:hover .sheet-tooltip, label.sheet-weapontotal:hover .sheet-tooltip, label.sheet-weaponL:hover .sheet-tooltip, label.sheet-weaponM:hover .sheet-tooltip, label.sheet-weaponP:hover .sheet-tooltip { visibility:visible; width:150px; z-index:1; } label.sheet-damageandbonus:hover .sheet-tooltip { visibility:visible; width:150px; z-index:1; position:absolute; top:25px; left:-45px; } label.sheet-damageandbonus .sheet-tooltip::after { content: " "; position: absolute; bottom: 100%; /* At the top of the tooltip */ left: 50%; margin-left: -7px; border-width: 7px; border-style: solid; border-color: transparent transparent gray transparent; } label.sheet-damageandbonus2 .sheet-tooltip::after { left:42%; } /*show weapon damages*/ .repcontainer[data-groupname="repeating_weaponselection"] > .repitem input[type="checkbox"] { opacity: 0; width: 35px; height: 16px; position: relative; margin-right: -33px; cursor: pointer; z-index: 1; } .repcontainer[data-groupname="repeating_weaponselection"] > .repitem input[type="checkbox"] + span::before { line-height: 14px; text-align: center; display: inline-block; vertical-align: middle; content: "─"; width: 35px; height: 14px; font-size: 12px; } .repcontainer[data-groupname="repeating_weaponselection"] > .repitem input[type="checkbox"]:checked + span::before { font-family:pictos; content: "`"; } .repcontainer[data-groupname="repeating_weaponselection"] > .repitem { border:1px solid black; border-radius:3px; margin-bottom:4px; padding-bottom:-5px; } /*weapon damages block*/ .sheet-weapontablelinehidden { display:none; margin-bottom:-4px; } .repcontainer[data-groupname="repeating_weaponselection"] > .repitem input[type="checkbox"]:checked ~ .sheet-weapontablelinehidden { display:block; } .sheet-weapontablerow12, .sheet-weapontablerow13, .sheet-weapontablerow14, .sheet-weapontablerow15, .sheet-weapontablerow16, .sheet-weapontablerow17, .sheet-weapontablerow18, .sheet-weapontablerow19, .sheet-weapontablerow20, .sheet-weapontablerow21, .sheet-weapontablerow22, .sheet-weapontablerow23, .sheet-weapontablerow24, .sheet-weapontablerow25, .sheet-weapontablerow26 { display:inline-block; margin-top:-5px; } .sheet-weapontablerow27, .sheet-weapontablerow28 { display:inline-block; } .sheet-weapontablerow27 { color:white; width:73px; height:24px; font-size:11px; border-radius:3px; margin-bottom:5px; text-align:center; vertical-align:top; } .sheet-weapontablerow28 { width:530px; height:15px; font-size:11px; } .sheet-weapontablerow12, .sheet-weapontablerow21 { height:26px; border:1px solid black; border-radius:3px; position:relative; top:-5px; } input[type="number"].sheet-weapontablerow22 { width:40px; } input[type="number"].sheet-weapontablerow13, input[type="number"].sheet-weapontablerow14, input[type="number"].sheet-weapontablerow15, input[type="number"].sheet-weapontablerow16, input[type="number"].sheet-weapontablerow17, input[type="number"].sheet-weapontablerow18, input[type="number"].sheet-weapontablerow19, input[type="number"].sheet-weapontablerow20, input[type="number"].sheet-weapontablerow23, input[type="number"].sheet-weapontablerow24, input[type="number"].sheet-weapontablerow25, input[type="number"].sheet-weapontablerow26 { width:34px; } /*Weapon table end*/ /*Tec start*/ .sheet-combattecblock { margin-left:5px; } .sheet-combattechnicgroup { background-color:white; color:black; border-top: 2.2px solid black; border-left: 2.2px solid black; border-right: 2.2px solid black; border-radius:3px; position:relative; padding:2px; font-size:15px; width:98.5%; margin-top:11px; } .sheet-tectablerow1, .sheet-tectablerow2, .sheet-tectablerow3, .sheet-tectablerow4, .sheet-tectablerow5, .sheet-tectablerow6 { display:inline-block; background-color:white; border-radius:3px; box-sizing: border-box; } .sheet-tectablerow1 { width:255px; margin-left:2px; } input.sheet-tectablerow1 { width:254px; } .sheet-tectablerow2 { width:45px; } .sheet-tectablerow3, .repcontainer[data-groupname="repeating_tecselection"] > .repitem input.sheet-tectablerow3 { width:35px; } .sheet-tectablerow4, .repcontainer[data-groupname="repeating_tecselection"] > .repitem input.sheet-tectablerow4 { width:37px; } .sheet-tectablerow5, .repcontainer[data-groupname="repeating_tecselection"] > .repitem input.sheet-tectablerow5 { width:40px; } .sheet-tectablerow6 { width:200px; } select.sheet-tectablerow6 { vertical-align:middle; position:relative; bottom:5px; } .sheet-tectablerow7 { position:relative; left:10px; bottom:1px; width:70px; } .sheet-showlongdescriptionfortec { width:20px; } .sheet-tectablerow8 { width:60px; vertical-align:top; margin-left:-60px; padding:4px; border:1px solid black; border-radius:3px 3px 3px 3px; background-color:gainsboro; z-index:1; } button[type="roll"].sheet-tectablerow9 { position:relative; float:right; width:25px; height:25px; } .sheet-tectablerow10 { width:615px; height:75px; margin:auto; margin-top:2px; margin-bottom:2px; z-index:0; } /*Selection if will or not will be presented the roll result in the chat*/ .sheet-rolltec, .sheet-tectablerow11, .sheet-tectablerow12 { display:inline-block; width:140px; height:20px; font-size:11px; margin:0px; padding:4px; } .sheet-tectablerow11 { border-radius:4px 0px 0px 4px; box-shadow:1px 1px 2px 1px grey inset; } .sheet-tectablerow12 { border-radius:0px 4px 4px 0px; box-shadow:-1px -1px 2px 1px grey inset; } .sheet-rolltec { width:148px; height:36px; margin-right:-148px; position:relative; z-index:2; opacity:0; } input.sheet-rolltec { height:32px; } input[value="mostradesc"].sheet-rolltec { margin-left:60px; } .sheet-tectablerow11, .sheet-tectablerow12 { position:relative; z-index:0; background-color:gainsboro; font-weight:100; border: none; text-align:center; } .sheet-showtecinformation, .sheet-showtecroll { display:none; } input[value="mostradesc"]:checked ~ .sheet-showtecinformation { display: block; } input[value="mostradesc"]:checked ~ .sheet-tectablerow11 { background-color:white; font-weight:bold; border:1px solid black; box-shadow:none; } input[value="mostraroll"]:checked ~ .sheet-showtecroll { display: block; } input[value="mostraroll"]:checked ~ .sheet-tectablerow12 { background-color:white; font-weight:bold; border:1px solid black; box-shadow:none; } /*End of selection*/ .sheet-selectedtec { color:white; text-align:center; font-size:11px; } .sheet-inputtecproperty { font-size:11px; color:black; text-align:center; border:0.5px solid black; position:relative; } select.sheet-tectablerow6.sheet-inputtecproperty { position:relative; top:5px; -moz-appearance:none; -webkit-appearance:none; appearance:none; } .sheet-inputtecdescription { font-size:11px; color:black; text-align:justify; border:0.5px solid black; } .sheet-tectablefirstline { background-color:black; background: linear-gradient(to bottom, #404040, #181818); } button[type=roll].sheet-showtecinformation::before { font-family:pictos custom; content: 'y'; font-weight:bold; } .repcontainer[data-groupname="repeating_tecselection"] > .repitem { margin-top:3px; border:2px solid gray; border-radius:5px; background-color: #F0F0F0; } .repcontainer[data-groupname="repeating_tecselection"] > .repitem input[name="attr_mostradescricaocompleta"] { opacity: 0; width: 65px; height: 27px; position: relative; cursor: pointer; z-index: 1; } .repcontainer[data-groupname="repeating_tecselection"] > .repitem .sheet-tectablerow10 { display:none; } .sheet-tectablerow7, .sheet-tectablerow8, .sheet-tectablerow11, .sheet-tectablerow12 { display:inline-block; } .repcontainer[data-groupname="repeating_tecselection"] > .repitem input[name="attr_mostradescricaocompleta"]:checked ~ .sheet-tectablerow8 { background-color:white; font-weight:900; margin-bottom:-10px; padding-bottom:9px; border:1px solid black; border-bottom:none; border-radius:3px 3px 0px 0px; z-index:1; } .repcontainer[data-groupname="repeating_tecselection"] > .repitem input[name="attr_mostradescricaocompleta"]:checked ~ .sheet-tectablerow10 { display:block; } .repcontainer { margin-right:10px; } /*Tec end*/ /*Improved tec start*/ .sheet-improvedtechniquecolumn { width:400px; } .sheet-improvedtechniquegroup { background-color:white; color:black; border-top: 2.2px solid black; border-left: 2.2px solid black; border-right: 2.2px solid black; border-radius:3px; position:relative; padding-left:3px; padding-bottom:3px; padding-right:0px; font-size:15px; margin-top:11px; } .sheet-improvedtechniquecolumn, .sheet-improvedgroupcolumn { display:inline-block; vertical-align:top; } .sheet-ittablerow1, .sheet-ittablerow2, .sheet-ittablerow3 { display:inline-block; background-color:white; margin-left:4px; margin-right:-5px; border-radius:3px; } .sheet-ittablerow1 { width:150px; } .sheet-ittablerow2, input[type="number"] .sheet-ittablerow2 { width:40px !important; } .sheet-ittablerow3 { width:195px; } .sheet-inputitproperty { font-size:1em; color:black; text-align:center; border:0.5px solid black; } .sheet-ittablefirstline { background-color:black; background: linear-gradient(to bottom, #404040, #181818); } .sheet-ittablefirstline label { color:white; text-align:center; padding:0px; font-size:0.95em; } .repcontainer[data-groupname="repeating_improvedtechniques"] > .repitem { margin-top:1px; padding-right:-5px; } /*Improved tec end*/ /*Improved weapon group start*/ .sheet-improvedgroupcolumn { width:210px; margin-left:15px; } .sheet-alignimprovedgroupcolumn { margin-left:5px; margin-right:-5px; } .sheet-improvedweapongroup { background-color:white; color:black; border-top: 2.2px solid black; border-left: 2.2px solid black; border-right: 2.2px solid black; border-radius:3px; padding-left:3px; padding-top:3px; font-size:15px; margin-top:11px; } .sheet-igtablerow1, .sheet-igtablerow2, .sheet-igtablerow3{ display:inline-block; background-color:white; } .sheet-igtablerow1 { width:100px; } .sheet-igtablerow2, input[type="number"].sheet-igtablerow2{ width:50px; } .sheet-igtablerow3, input[type="number"].sheet-igtablerow3{ width:50px; } .sheet-improvedgroup { color:white; text-align:center; font-size:11px; } .sheet-inputigproperty { font-size:11px; color:black; text-align:center; border:0.5px solid black; margin-top:2px; } .sheet-igtablefirstline { background-color:black; background: linear-gradient(to bottom, #404040, #181818); } .repcontainer[data-groupname="repeating_improvedtechniques"] > .repitem { margin-top:1px; } /*Defensive equipment start*/ .sheet-armorgrouptable { background-color:white; color:black; border-top: 2.2px solid black; border-left: 2.2px solid black; border-right: 2.2px solid black; border-radius:3px; position:relative; padding:3px; font-size:15px; width:522px; margin-top:11px; } .sheet-armortablerow1, .sheet-armortablerow2, .sheet-armortablerow3, .sheet-armortablerow4, .sheet-armortablerow5, .sheet-armortablerow6 { display:inline-block; background-color:white; } .sheet-armortablerow1 { width:200px; } .sheet-armortablerow2 { width:60px; } .sheet-armortablerow3 { width:40px !important; } .sheet-armortablerow4 { width:55px !important; } .sheet-armortablerow5 { width:60px !important; } .sheet-armortablerow6 { width:100px; } .sheet-selectedarmor { color:white; text-align:center; font-size:1em; } .sheet-inputarmorproperty { font-size:11px; color:black; text-align:center; border:0.5px solid black; } .sheet-armortablefirstline { background-color:black; background: linear-gradient(to bottom, #404040, #181818); } .repcontainer[data-groupname="repeating_defenseselection"] > .repitem { margin-top:1px; } /*Defensive equipment end*/ /*Combat page end*/ /*Magic page start*/ .sheet-magicheader { background-color:black; background: linear-gradient(to bottom, #404040, #181818); color:white; border-radius:1.15px; padding:5.5px; width:640px; text-align:center; font-weight:bold; font-size:14px; } .repcontainer[data-groupname="repeating_magiclist"] > .repitem { background-color:rgba(245,245,245,1); } .sheet-magiclistfirstrow { margin:0px; } .sheet-magiclistfirstrow label { display:inline-block; background-color:black; background: linear-gradient(to bottom, #404040, #181818); color:white; font-size:10px; text-align:center; line-height:22px; padding:0px; padding-bottom:3px; padding-top:3px; margin:0px; margin-top:5px; border-radius:3px; } input.sheet-magiccolumntext, input.sheet-magiclistinput, label.sheet-magiclistinput, input.sheet-magiccolumnshortdescription { display:inline-block; border: 1.5px solid black; text-align:center; } label.sheet-magiccolumntext, input.sheet-magiccolumntext { width:137px; line-height:22px; padding:0px; padding-bottom:3px; padding-top:3px; } label.sheet-magiclistinput, input[type="number"].sheet-magiclistinput { width:50px; line-height:22px; padding:0px; padding-bottom:3px; padding-top:3px; text-align:center; border: none; } input[type="number"].sheet-magiclistinput { border:1.5px solid black; } label.sheet-magiccolumnshortdescription, input.sheet-magiccolumnshortdescription { width:254px; margin-right:0px; line-height:22px; padding:0px; padding-bottom:3px; padding-top:3px; } .repcontainer[data-groupname="repeating_magiclist"] > .repitem input[type="checkbox"], .sheet-magiclistopendescription, .sheet-magicdurationtext, .sheet-magicdurationtextinput, .sheet-magicevocationtext, .sheet-magicreachtext { display:inline-block; margin-top:3px; } label.sheet-magicevocationtext { margin-left:10px; } label.sheet-magicdurationtext, label.sheet-magicevocationtext, label.sheet-magicreachtext { width:60px; height:20px; background: linear-gradient(to bottom, #404040, #181818); color:white; font-weight:bold; font-size:10px; border: 2px solid black; border-radius:3px; padding:2px; padding-left:4px; z-index:1; } input[type="text"].sheet-magicdurationtextinput, input[type="text"].sheet-magicevocationtext, input[type="text"].sheet-magicreachtext { padding:0px; padding-left:4px; height:28px; width:99px; border:1px solid black; margin-left:-1px; z-index:0; } label.sheet-magiclistopendescription { position:relative; width:50px; height:20px; border:2px solid black; border-radius:5px; padding-bottom:11px; padding-top:4px; margin-left:-56px; text-align:center; background-color:gainsboro; cursor:pointer; z-index:1; } .repcontainer[data-groupname="repeating_magiclist"] > .repitem input[type="checkbox"] { position:relative; width:45px; height:20px; transform:scale(1.6); margin-top:-2px; margin-left:12px; opacity:0; z-index:2; } .repcontainer[data-groupname="repeating_magiclist"] > .repitem input[type="checkbox"]:checked ~ label.sheet-magiclistopendescription { font-weight:900; background-color:white; text-decoration:underline; border-bottom:none; border-radius:5px 5px 0px 0px; } .sheet-showmagicinformation { position:relative; width:20px; height:20px; } .sheet-magiclistlongeffect { border: 2px solid black; margin-top:-13px; margin-left:2px; margin-right:2px; padding:2px; height:130px; z-index:0; } .sheet-expandablemagicinformation { margin-right:5px; margin-bottom:5px; border-top:1px solid white; border-bottom:1px solid white; height:90px; display:none; } .repcontainer[data-groupname="repeating_magiclist"] > .repitem input[name="attr_showmagiceffect"]:checked ~ div.sheet-expandablemagicinformation { display:block; } /*Magic page end Itens page beggining*/ .sheet-itensrow { display:inline-block; text-align:center; width:45px; font-weight:bold; } .sheet-blockwealthy { display:inline-block; width:162px; margin-left:50px; } .sheet-moneytable { border-bottom:4px solid black; } .sheet-objectheader { border-top:3px solid black; border-left:3px solid black; border-right:3px solid black; margin-top:5px; background-color:rgba(215,215,215,1); } .sheet-objetcvalue, .sheet-objetcname, .sheet-objetcdescription { display:inline-block; border-radius:2px; font-weight:bold; text-align:center; padding:0px; padding-top:5px; padding-bottom:5px; } .sheet-objetcvalue, input[type="number"].sheet-objetcvalue { width:45px; } .sheet-objetcname { width:215px; } .sheet-objetcdescription { width:360px; } .sheet-itenselection { border-bottom:3px solid black; border-left:3px solid black; border-right:3px solid black; background-color:rgba(245,245,245,1); } .repcontainer[data-groupname="repeating_itensselection"] > .repitem { background-color:rgba(245,245,245,1); } /*Formatting of the NPC Sheet - Begginning*/ /*Buttons*/ .sheet-buttonfornpc { display:inline-block; position:relative; left:108px; bottom:5px; } button.sheet-buttonfornpcrfrm { box-sizing: border-box; width:40px; height:40px; border-radius:7px; } button[type=roll].sheet-buttonfornpcrfrm::before { content: '0'; font-size:30px; margin-right:-25px; position:relative; bottom:-5px; color:gray; z-index:0; } span.sheet-textfornpcbutton { font-size:15px; position:relative; bottom:2px; font-weight:bold; } /*Basic data*/ .sheet-npc_basicdatagroup { margin-left:11px; } .sheet-npc_basicdata { display:inline-block; background-color:rgb(70,70,70); border:2px solid gray; border-radius:7px; padding:6px; margin:5px; position:relative; text-align:center; width:50px; } .sheet-npc_basic { text-align:center; color:whitesmoke; font-size:16px; } input.sheet-npc_basic { font-weight:bold; color:black; width:30px; } .sheet-npc_name { display:inline; margin-bottom:5px; position:relative; } .sheet-npc_type, .sheet-npc_initiative { display:inline; margin-bottom:5px; position:relative; } label.sheet-npc_initiative { margin-left:25px; } span.sheet-npc_initiative { font-weight:bold; } input[type="number"].sheet-npc_initiative { border:1px solid black; text-align:center; font-weight:bold; } input.sheet-npc_name { border:1.5px solid black; border-radius:5px; } input.sheet-npc_type { border:1.5px solid black; width:218px; border-radius:5px; } /*NPC attack table*/ .sheet-npc_attacktableheader1, .sheet-npc_attacktableheader2 { display:inline-block; vertical-align:middle; } .sheet-npc_attacktableheader1 { width:196px; padding:5px; background-color:rgb(70,70,70); color:white; font-weight:bold; border-radius:3px; margin-left:44px; margin-right:2px; } .sheet-npc_attacktableheader2 { width:26px; height:28px; padding:0px; font-size:10px; border-radius:3px; background-color:rgb(70,70,70); color:white; } .sheet-npc-attacktable { margin-bottom:10px; margin-top:5px; } .sheet-npc_attacktableinput { border:1.5px solid black; margin-bottom:3px; text-align:center; } input[type="number"].sheet-npc_attacktableinput { width:28px; padding-right:0px; padding-left:0px; } button.sheet-npc_attacktableinput { position:relative; bottom:1px; left:5px; box-sizing: border-box; border:1.4px solid black; border-radius:3px; height:25px; width:25px; font-size:18px; } .sheet-npc_attacktableinput1 { margin-left:10px; } /*NPCs Attributes formatting*/ .sheet-npc_attributes_section { margin-left:50px; } .sheet-npc_attributes { display:inline-block; margin:0px; width:68px; padding:3px; font-size:14px; border:1px solid black; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom:none; background-color:rgb(70,70,70); color:Ghostwhite; } .sheet-npc_attributes_value { display:inline-block; text-align:center; margin:0px; width:68px; padding:3px; font-size:14px; border:1px solid black; border-top:none; border-bottom:none; background-color:rgb(70,70,70); color:Ghostwhite; } .sheet-npc_attributes_button { display:inline-block; margin:0px; width:68px; padding:3px; font-size:14px; border:1px solid black; border-top:none; border-bottom-right-radius:5px; border-bottom-left-radius:5px; background-color:rgb(70,70,70); color:Ghostwhite; text-align:center; } .sheet-npc_attribute_input { width:68px; text-align:center; font-weight:bold; } .sheet-npc_attribute_buttonroll { text-align:center; } /*NPCs Skills formatting*/ .sheet-npc_skillsection { margin-top:10px; border-top:3px solid black; border-bottom:1px solid black; } .sheet-npc_sectiontitle { font-size:16px; font-style:oblique; font-weight:800; } select.sheet-npc-skillname { position:relative; top:1px; } .sheet-npc-skillname { display:inline-block; border:1.5px solid black; width:180px; } input.sheet-npc-skillname { text-align:center; } input.sheet-npc_skillextra { text-align:justify; width:380px; } /*NPCs powers formatting*/ .sheet-npc_powername { display:inline-block; border:1.5px solid black; width:180px; vertical-align:top; } input.sheet-npc_powername { text-align:center; } textarea.sheet-npc_powerextra { width:370px; height:55px; } /*Início da formatação do Roll Template Cabeçalho*/ .sheet-rolltemplate-tagmar_rolagem_completa .inlinerollresult, .sheet-rolltemplate-tagmar_teste_de_resistencia .inlinerollresult { background-color:transparent; font-weight:normal; border:none; width:50px; } .sheet-rolltemplate-tagmar_rolagem_completa table, .sheet-rolltemplate-tagmar_teste_de_resistencia table { border: 4px double black; background-color:GhostWhite; width:220px; margin-bottom:3px; } .sheet-rolltemplate-tagmar_rolagem_completa th, .sheet-rolltemplate-tagmar_teste_de_resistencia th { background-color:GhostWhite; height:30px; text-align:left; /* border-bottom:; */ } .sheet-rolltemplate-title_1 { color:black; font-size:16px; font-weight:bold; padding-top:7px; padding-bottom:7px; font-variant: petite-caps; } .sheet-rolltemplate-title_pre_1 { font-family:Pictos; } .sheet-rolltemplate-title_skill { color:black; font-size:14px; font-weight:bold; padding-top:7px; padding-bottom:7px; font-variant: petite-caps; letter-spacing:-0.075em; } .sheet-rolltemplate-skilltype { height:11px; } .sheet-rolltemplate-title_battle { color:black; font-size:16px; font-weight:bold; padding-top:7px; padding-bottom:7px; font-variant: petite-caps; letter-spacing:-1px; } .sheet-rolltemplate-title_pre_battle { font-family:"Pictos Custom"; } .sheet-rolltemplate-title_magic { color:black; font-size:16px; font-weight:bold; padding-top:7px; padding-bottom:7px; font-variant: petite-caps; } .sheet-rolltemplate-title_pre_magic { font-family:'Pictos Three'; } .sheet-rolltemplate-subheader, .sheet-rolltemplate-subheadercharname { color:black; font-size:12px; text-align:left; font-weight:bold; padding-bottom:5px; } .sheet-rolltemplate-rolltextformat { font-style:italic; font-size:12px; margin-top:12px; margin-bottom:10px; } .sheet-rolltemplate-columnoftest .inlinerollresult { font-weight:bold; background-color:black; color:white; padding:6px; font-size:14px; } .sheet-rolltemplate-d20showresult { position:relative; font-family: dicefontd20; font-size:38px; font-weight:bold; color:silver; vertical-align:middle; text-align:center; opacity:50%; z-index:1; width:50px; } .sheet-rolltemplate-diceresultformatting .inlinerollresult { position:relative; background-color:transparent; /*border:3px solid black;*/ border-radius:50%; padding:2px; margin-left:-50px; font-size:18px; font-weight:bold; z-index:2; width:50px; } .sheet-rolltemplate-diceresultformatting { text-align:center; } .sheet-rolltemplate-rolltextformat, .sheet-rolltemplate-columnoftest, .sheet-rolltemplate-diceresultformatting, .sheet-rolltemplate-d20showresult { display:inline-block; } label.sheet-rolltemplate-diceresultformatting{ width:25px; } label.sheet-rolltemplate-columnoftest { width:25px; } .sheet-rolltemplate-magicdetails { font-size:11px; } .sheet-rolltemplate-skillspecializationheader, .sheet-rolltemplate-skillspecializationheader span { font-size:10px; height:30px; vertical-align:bottom; } .sheet-rolltemplate-skillspecialization, .sheet-rolltemplate-skillspecialization span { font-weight:bold; margin-left:15px; } .sheet-rolltemplate-perfectskillheader, .sheet-rolltemplate-perfectskillheader span { font-size:11px; font-weight:bold; } .sheet-rolltemplate-perfectskilllist, .sheet-rolltemplate-perfectskilllist span { font-size:11px; font-style:italic; text-indent:5px; } .sheet-rolltemplate-color { text-align:center; padding-top:15px; padding-bottom:15px; line-height:30px; } .sheet-rolltemplate-attackdescriptionrow { text-align:left; font-style:italic; font-size:11px; font-weight:bold; } .sheet-rolltemplate-resultrow { line-height:35px; } .sheet-rolltemplate-danoausente, .sheet-rolltemplate-dano00format, .sheet-rolltemplate-dano25format, .sheet-rolltemplate-dano50format, .sheet-rolltemplate-dano75format, .sheet-rolltemplate-dano100format, .sheet-rolltemplate-dano125format { text-align:center; font-weight:bold; } .sheet-rolltemplate-danoausente { color:gray; font-weight:100; font-style:italic; } .sheet-rolltemplate-dano00format { color:white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; font-weight:lighter; } .sheet-rolltemplate-dano25format { color:#CCCC00; /*text-shadow: -0.5px 0 black, 0 0.5px black, 0.5px 0 black, 0 -0.5px black;*/ } .sheet-rolltemplate-dano50format { color:#e67300; /*text-shadow: -0.5px 0 #202020, 0 0.5px #202020, 0.5px 0 #202020, 0 -0.5px #202020;*/ } .sheet-rolltemplate-dano75format { color:red; } .sheet-rolltemplate-dano100format { color:blue; } .sheet-rolltemplate-dano125format { color:darkblue; } .sheet-rolltemplate-green, .sheet-rolltemplate-white, .sheet-rolltemplate-yellow, .sheet-rolltemplate-orange, .sheet-rolltemplate-red, .sheet-rolltemplate-blue, .sheet-rolltemplate-darkblue, .sheet-rolltemplate-gray { border:2px solid black; border-radius:10px; padding:8px; text-align:center; font-weight:bold; /*box-shadow: inset 0px 0px 4.2px 2.1px rgba(0,0,0,0.1);*/ } .sheet-rolltemplate-green { background-color:green; color:white; } .sheet-rolltemplate-white { background-color:white; } .sheet-rolltemplate-yellow { background-color:yellow; } .sheet-rolltemplate-orange { background-color:orange; } .sheet-rolltemplate-red { background-color:red; color:white; } .sheet-rolltemplate-blue { background-color:blue; color:white; } .sheet-rolltemplate-darkblue { background-color:#00008B; color:white; } .sheet-rolltemplate-gray { background-color:gray; color:white; } .sheet-rolltemplate-subinformation { font-weight:900; font-size:12px; /*text-decoration:underline;*/ margin:2px; } .sheet-rolltemplate-alert { text-align:justify; text-indent:11px; font-size:11px; font-style:oblique; font-weight:200; padding:7px; } /*Resistance tests formatting*/ .sheet-rolltemplate-resistancerow { text-align:center; text-decoration:underline overline; } .sheet-rolltemplate-hide { display:none; } .sheet-rolltemplate-d20r { position:relative; text-align:center; font-size:16px; } .sheet-rolltemplate-resistancealtfont { font-family: dicefontd20; font-size:45px; font-weight:bold; color:Gainsboro; position:relative; margin-right:-33px; top:15px; text-align:center; z-index:0; } .sheet-rolltemplate-diceforresistanceresult { text-align:center; padding-top:7px; padding-bottom:7px; line-height:45px; } .sheet-rolltemplate-resistancealtfont, .sheet-rolltemplate-d20r { display:inline-block; width:35px; } .sheet-rolltemplate-resistanceresultrowfalha { font-size:18px; color:red; text-align:center; padding:8px; border:2px double rgb(80,0,0); border-radius:7px; } .sheet-rolltemplate-resistanceresultrowsucesso { font-size:18px; font-weight:900; text-align:center; color:gray; padding:8px; border:2px double black; border-radius:7px; } /*Início da formatação do rolltemplate da iniciativa*/ .sheet-rolltemplate-tagmar_iniciativa { border-left:3px solid black; border-bottom:2px dashed black; border-top:2px dashed black; border-right:1px dotted black; border-radius:20px 0px 0px 20px; background-color:whitesmoke; width:220px; } .sheet-rolltemplate-initiative_firstline { background-color:white; border-bottom:1px dashed gray; font-size:16px; font-weight:900; text-align:left; padding-top:7px; padding-bottom:7px; margin-left:15px; margin-right:25px; } .sheet-rolltemplate-initiative_secondline { font-size:14px; text-align:left; margin-top:7px; margin-bottom:7px; margin-left:15px; } .sheet-rolltemplate-initiative_thirdline { font-size:18px; font-weight:bold; text-align:center; margin-top:12px; margin-bottom:12px; } .sheet-rolltemplate-tagmar_iniciativa .inlinerollresult { background-color:darkred; color:white; border:2px solid gray; border-radius:50%; display:block; width:24px; height:24px; margin:auto; padding:4px; }