Files

2086 lines
61 KiB
CSS

select,
div,
button,
textarea,
span,
input,
img,
label{
box-sizing: border-box;
font-family:sans-serif;
}
div{
margin: 0px;
padding: 0px;
}
img{
margin: 0px;
padding: 0px;
}
.fullpc table, .fullpc th, .fullpc td {
max-width:850px;
border: 1px solid black;
text-align:center;
font-size: 1.00em;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR&display=swap');
/* ==== CLASSES ==== */
.top-area {display:block; position:relative; clear:both; overflow:hidden; min-height:200px;}
.top-area .left {display:block; position:relative; width:35%; float:left;}
.top-area .right {display:block; position:relative; width:35%; float:right;}
.top-area .logo {display:block; position:absolute; top:50%; left:38%; right:38%; text-align:center; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.top-area .logo img {max-width:100%;}
.icon-text-field {display:table; width:100%; table-layout:fixed; position:relative; border-bottom:1px dashed #333; word-break: keep-all;}
.icon-text-field.no-line {border-bottom:0;}
.icon-text-field input[type="text"] {display:block; position:relative; width:100%; box-sizing:border-box; height:30px; text-align:left; padding:0 10px; color:#000;}
.icon-text-field input[type="text"].point {font-weight:800; color:#000;}
.icon-text-field .icon {display:table-cell; height:30px; vertical-align:middle; width:90px; padding-left:20px; box-sizing:border-box; color:#777;}
.icon-text-field .icon:before {content:""; display:block; position:absolute; top:50%; left:0; width:15px; height:15px; background:url('https://i.imgur.com/wnVubts.png') no-repeat 50% 50%; background-size:contain; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.icon-text-field span + span {width:auto !important; padding-left:0;}
.icon-text-field span + span:before {display:none;}
.icon-text-field span.effect {
display: table-cell; height: 30px; vertical-align: middle; width: 90px; padding-left: 20px; box-sizing: border-box; color: #777;}
.icon-text-field textarea {height:50px; text-align:left; padding:5px 10px;}
.icon-text-field.sub-text span {}
.icon-text-field.sub-text span:before {display:none;}
.icon-text-field .side {width:60px !important; text-align:center;}
.icon-text-field .side input[type="checkbox"] {display:none;}
.icon-text-field .side input[type="checkbox"] + label {display:inline-block; position:relative; vertical-align:middle; text-align:left; text-indent:-999px; overflow:hidden; width:15px; height:15px; border-radius:100%; box-sizing:border-box; border:2px solid #000; cursor:pointer; margin:0;}
.icon-text-field .side input[type="checkbox"]:checked + label {background:#333;}
.icon-text-field .select-group em {display:block; height: 30px; float:left; position:relative; font-style: normal;}
.icon-text-field .select-group input {
position: absolute; width: 100%; height: 28px; opacity: 0;
}
.icon-text-field .select-group span {
pointer-events: none; height: 30px; display: inline-table;
padding: 8px 3px; background-color: white; color: #dddddd;
}
.icon-text-field .select-group span.black {
color: #000;
}
.icon-text-field .select-group input:checked + span {
color: #000000;
}
.icon-text-field .select-group select {
text-align: left; text-align-last:left;width:65px; font-weight:bold; vertical-align: middle; height: 32px; color: #000000; position: absolute;
}
.icon-text-field .select-group select:focus {
background: transparent;
}
.icon-text-field .select-group em.selector {
display:none; white-space: nowrap;
}
.icon-text-field .select-group {
display: flex; justify-content: space-between;
}
.icon-text-field .select-group input:checked + em.selector {
display:block;
}
.icon-text-row {display:block; overflow:hidden; clear:both; width: 100%; height:auto;}
.icon-text-row .cols {width:50%; float:left;}
.icon-text-row .icon-text-field span {width:70px;}
.icon-text-row.group-3 .cols {width:33.33%;}
.design-text-field {text-align:center; margin-top:-20px;}
.design-text-field .item {display:inline-block; vertical-align:middle; width:70px; height:70px; background:url('https://i.imgur.com/To23ccc.png') no-repeat 50% 50%; background-size:contain;}
.design-text-field .item p {display:block; position:relative; height:55%; margin:0;}
.design-text-field .item span {display:block; position:absolute; top:50%; left:0; right:0; color:#fff; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.design-text-field .item input[type="text"] {display:block; position:relative; width:80%; margin:0 auto; box-sizing:border-box; text-align:center; color:#000; font-weight:800; font-size:13px;}
.senario-area {display:block; position:relative; clear:both; overflow:hidden; margin:20px 0;}
.senario-area .left {display:block; position:absolute; width:300px; top:0; left:0; }
.senario-area .right {display:block; position:relative; margin-left:350px; min-height:270px;}
.senario-area .design-text-area {text-align:center; font-weight:800;width:300px; height:271px; padding:45px; background:url('https://i.imgur.com/FqueMIm.png') no-repeat 50% 50%; background-size:contain; box-sizing:border-box;}
.senario-area .design-text-area textarea {display:block; margin-top:5px; height:160px; width:100%; text-align:left;}
.design-graph-bar.ty1 {width: 57%;}
.design-graph-bar.ty2 {width: 42%;}
.design-graph-bar {display:inline-block; position:relative; line-height:40px; height:40px; overflow:hidden; padding:0 32px 0 135px; background:url('https://i.imgur.com/99M42p7.png') repeat-x 0 50%; background-size: auto 100%;}
.design-graph-bar:before {content:""; display:block; position:absolute; top:0; left:0; width:40px; bottom:0; background:url('https://i.imgur.com/M4VO22z.png') no-repeat 0 50%; background-size:auto 100%; box-sizing:border-box; }
.design-graph-bar .tail,
.design-graph-bar.ty2:after {content:""; display:block; position:absolute; top:0; right:0; width:32px; bottom:0; background:url('https://i.imgur.com/M4VO22z.png') no-repeat 100% 50%; background-size:auto 100%; box-sizing:border-box; }
.design-graph-bar + .design-graph-bar {margin-top:10px;}
.design-graph-bar span {display:block; position:absolute; top:0; bottom:0; line-height:40px; padding-left:25px; left:40px; }
.design-graph-bar select,
.design-graph-bar input[type="number"] {height:30px; text-align:center; font-weight:800; color:#000; width:40px; box-sizing:border-box;}
.design-graph-bar select {margin-bottom:6px;}
.design-graph-bar span:before {content:""; display:block; position:absolute; left:0; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); width:20px; height:20px; background:url('https://i.imgur.com/VV4zOa1.png') no-repeat 50% 50%; background-size:contain;}
.design-graph-bar.ty2 span:before {background-image:url('https://i.imgur.com/KGrf90v.png');}
.sub-design-title {display:block; position:relative; font-family: sans-serif; font-size:13px; font-weight:800; margin-top:20px; margin-bottom:10px; background:url('https://i.imgur.com/PQC0K0S.png') no-repeat 50% 50%; background-size:contain; height:40px; text-align:center; line-height:40px;}
.sub-design-title.ty2 {background-image:url('https://i.imgur.com/eCvmnOn.png'); background-size: 540px 40px; width:540px;}
.sub-design-title.ty3 {background-image:url('https://i.imgur.com/46qPhvI.png'); background-size: 300px 40px; width:300px;}
.floot-roll-box {display:block; clear:both; overflow:hidden;}
.floot-roll-box .roll-left {width:30%; float:left;}
.floot-roll-box .roll-right {width:68%; float:right; margin-right:1px;}
.floot-roll-box table {width:100%; height:100px;}
.floot-roll-box table td {vertical-align:middle;}
.floot-roll-box .roll-left button[type=action],
.floot-roll-box .roll-right button[type=roll] {height:20px; width:20px; line-height:20px; font-size:1.1em; margin:0; padding:0;}
.floot-roll-box .roll-left button[type=action]:before {font-family: "dicefontd20";
content: "t";}
.spell-table {position:relative; padding:26px 20px 20px; background:url('https://i.imgur.com/D6OiWLf.png') no-repeat 50% 50%; background-size:100% 100%; box-sizing:border-box;}
.spell-table table {width:100%; vertical-align:middle;}
.spell-table th {background: white}
.spell-table .dim th {background: #e4e4e4}
.spell-table .soul-spec {background:url('https://i.imgur.com/C7AvDtk.png') no-repeat 0 50%; background-color: white; background-size:auto 100%; padding-left:20px;}
.spell-table .soul-spec input {height:30px;}
.spell-table .table-title th {vertical-align: top;}
.other-book-box {clear:both; overflow:hidden; display:block;}
.other-book-box .sub-design-title {font-size:16px;}
.other-book-box .book-left {width:540px; float:left;}
.other-book-box .relation-right {width:300px; float:right;}
/* ==== CLASSES ==== */
.underlined{
border-bottom: 1px solid black;
}
.bordered{
border: 1px solid black;
margin-bottom: 4px;
}
.titled{
margin-top: -13px;
padding-top: 25px;
}
.block{display: block;}
.inbox{
padding-left:2px;
padding-bottom: 20px;
margin-bottom: 12px;
text-align: left;
}
.inboxright{
padding-bottom: 20px;
text-align: right;
}
.indent{
text-indent: 10px;
}
.padindent{
padding-left: 10px;
}
.margindent {
margin-left: 10px;
}
.bold{
font-weight: bold;
}
.center{
text-align: center;
}
.invisible {
opacity: 0;
}
/* ==== DIVS ==== */
div.fullpc{
display: block;
vertical-align: top;
text-align: left;
width: 850px;
max-width: 850px;
background-color: white;
font-family: 'Times New Roman';
color: black;
}
div.myrow{
width: 100%;
text-align: left;
}
div.myrow.right{
text-align: right;
}
div.myrow.right input,
div.myrow.right select {
font-size:9.5pt;
}
.bordered.titled.inboxright div.myrow.right{
font-size: 1pt;
}
div.myrow.center{
text-align: center;
}
div.colhalf{
display: inline-block;
vertical-align: top;
text-align: left;
}
div.col1third{
display: inline-block;
vertical-align: top;
width: 276px;
max-width: 25%;
margin: 1px;
text-align: center;
}
div.col2third{
display: inline-block;
vertical-align: top;
width: 560px;
max-width: 37%;
}
.blacklabel{
display: inline-flex;
align-items: center;
background-color: black;
color: white;
text-align: center;
vertical-align: top;
height: 24px;
text-transform: uppercase;
border: none;
}
.blacklabel.pnty {
flex-flow: row nowrap;
justify-content: space-between;
}
.blacklabel.sqr {
flex-flow: column wrap;
justify-content: center;
}
.blacklabel.right {
flex-flow: row nowrap;
justify-content: flex-end;
}
.blacklabel .big {
display: inline-block;
line-height: 1.0em;
font-weight: bold;
font-size: 15px;
}
.blacklabel .big.only {
flex-grow: 2;
}
.blacklabel .med {
display: block;
font-size: 0.80em;
line-height: 0.85em;
overflow-wrap: break-word;
}
.blacklabel .med.only {
margin-top: 2px;
}
img.brdleft,
img.brdright {
display: inline-block;
height: inherit;
}
img.brdleft {margin-right: 4px;}
img.brdright {margin-left: 4px;}
div.identity{
display: inline-block;
margin-left: 4px;
}
div.boxed.greybg{
background-color: #DDD;
}
div.subcol {
display: inline-block;
vertical-align: top;
}
div.initiative {display: block;}
.identity span{
display: block;
margin-left: 2px;
text-transform: capitalize;
font-size: 1.03em;
color: black;
}
.identity input[type=text].medium {width: 100px;}
.identity input[type=text].small {width: 46px;}
.initiative .blacklabel {width: 70px;}
.initiative div.boxed {margin-left: 5px;}
.magictable {display: flex;flex-direction: row;align-items: center;column-gap: 2px;}
.acitems .item {width: 190px;}
.acitems .equipped {width: 16px;}
.acitems .ac,
.acitems .flat,
.acitems .touch,
.acitems .natural,
.acitems .deflection,
.acitems .dodge,
.acitems .check,
.acitems .max,
.acitems .spellfailure {width: 32px;}
.acitems .spacer.type,
.acitems .type {width: 63px;}
.acitems .lab.totals {width: 90px;}
.acitems .lab.shield,
.acitems .lab.armor {width: 50px;}
.repeating_acitems_container div.myrow {padding-left: 16px; height: 21px;}
.attacks {text-align: right;}
.attacks div.padindent {padding-left: 22px;}
.attacks .dmgbase {width: 120px;}
.attacks .dmgtype {width: 120px;}
.attacks span.lbl.atk {
width: 55px;
vertical-align: bottom;
}
.attacks .blacklabel .weapon-title {width: 180px;}
.attacks .blacklabel .atk-title {width: 105px;}
.attacks .blacklabel .damage-title {width: 50px;}
.attacks .blacklabel .ammo-title {width: 40px;}
div.attack {margin-bottom: 2px;}
.attack .weapon {
display: inline-block;
width: 208px;
text-align: left;
font-size: 1.1em;
padding-left: 2px;
vertical-align: top;
}
.attack .weapon .vs {
width: auto;
text-align: right;
font-family: sans-serif;
font-size: 0.8em;
white-space: pre;
vertical-align: top;
}
.attacks .atk {
display: inline-block;
width: 105px;
vertical-align: top;
}
.attacks .damage {
display: inline-block;
width: 50px;
vertical-align: top;
}
.attacks .atk .pseudoattr,
.attacks .damage .pseudoattr {
text-align: center;
font-family: sans-serif;
font-size: 0.95em;
}
.attacks .ammo {width: 40px;}
.attacks select.type {width: 55px;}
.attacks select.vs {width: 90px;}
.attacks select.dmg {width: 70px;}
.skills .blacklabel {width: 85%;}
.skills .blacklabel.totalranks {
width: 165px;
margin-left: 133px;
}
.skills .name {width: 180px;}
.skill .number,
.spellcasting .number,
.spells .number {
width: 30px;
text-align: center;
}
.skill span.perform,
.skill span.craft,
.skill span.knowledge,
.skill span.profession,
.skill span.custom {width: 60px;}
.skill span.custom.only {width: 180px;}
.skill input[type="text"].craft,
.skill input[type="text"].knowledge,
.skill input[type="text"].perform,
.skill input[type="text"].profession,
.skill input[type="text"].custom {width: 117px;}
.spellcasting .perlevel {margin-bottom: 1px;}
.spellcasting .perlevel .lab,
.spellcasting .perlevel .level {
width: 40px;
margin: 0px 1px 0px 1px;
}
.spellcasting .perlevel .boxed {margin: 0px 1px 0px 1px;}
.spells .blacklabel {width: 60%;}
div.spell {margin-top: 2px;}
.spell .lab {text-align: left;}
span.std {width: 80px;}
input[type="text"].std {
font-size: 1.2em;
line-height: 1.2em;
}
div.ability,
div.acvalues,
div.initiative,
div.repeating_acitems_container,
div.saves,
div.babs,
div.attackmods,
div.defenses,
div.attack,
div.skill,
div.concentration,
div.spell,
div.statblock,
div.encumbrance,
div.speeds,
div.gearitem,
div.skills,
div.attacks {
position: relative;
}
.spell input[type="text"].std {width: 180px;}
.fullpc .feat input[type="text"].std,
.fullpc .ability input[type="text"].std {width: 320px;}
.statblock .feat input[type="text"].std {width: 210px;}
.autoex.std {
display: inline-block;
vertical-align: bottom;
}
.spell .autoex.std {
width: 180px;
max-width: 180px;
}
.fullpc .feat .autoex.std {
width: 320px;
max-width: 320px;
}
.statblock .feat .autoex.std {
width: 210px;
max-width: 210px;
}
.spell span.med {width: 95px;}
.spell input[type="text"].med {
width: 150px;
font-size: 1.2em;
line-height: 1.2em;
}
.statblock .npcatk .attack {
display: inline-block;
position: relative;
}
.spells .pseudoattr.sml {width: 25px;}
.fullpc .money .blacklabel,
.fullpc .feats .blacklabel,
.fullpc .traits .blacklabel,
.fullpc .gear .blacklabel.title {width: 95%;}
.fullpc .gear .blacklabel.total {
width: calc(100% + 2px);
padding-right: 2px;
margin-top: 2px;
margin-right: -2px;
margin-bottom: -2px;
}
.gear .qty {width: 50px;}
.gear .total {width: 35px;}
.gear .weight {width: 85px;}
.gear .wtotal {
width: 45px;
color: black;
}
.gearitem input.item {width: 260px;}
.gear span.overload {color: white;}
.gear input.overload[value="over"] + span.overload {
font-weight: bold;
color: #BE202E;
text-transform: uppercase;
}
.encumbrance .lab.std {width: 75px;}
/* ===== SPANS ===== */
span.roundblack {
background-color: black;
border-radius: 50%;
font-family: sans-serif;
font-weight: bold;
color: white;
font-size: 0.8em;
height: 12px;
width: 12px;
line-height: 12px;
vertical-align: bottom;
text-align: center;
}
span.spacer{
min-width: 10px;
text-align: center;
}
span.lab {
text-align: center;
vertical-align: bottom;
font-family: sans-serif;
font-size: 0.84em;
line-height: 1.1em;
text-transform: capitalize;
white-space: pre;
color: black;
}
.lab.right{text-align: right;}
.abilities .lab:first-child {width: 80px;}
.abilities .lab {width: 50px;}
.hpvalues .lab {width: 40px;}
.initiative .lab {width: 45px;}
.acvalues .lab,
.saves .lab,
.babs .lab,
.attackmods .lab,
.defenses .lab,
.speeds .lab {width: 40px;}
.lbl {
text-align: left;
vertical-align: bottom;
font-family: sans-serif;
font-size: 0.95em;
line-height: 1.2em;
text-transform: capitalize;
white-space: pre;
}
.lbl.right {text-align: right;}
.lbl.upper {text-transform: uppercase;}
span.pseudoattr {
font-size: 1.2em;
line-height: 16px;
height: 18px;
vertical-align: bottom;
white-space: pre-line;
overflow: hidden;
}
div.boxed span.pseudoattr {
min-width: 36px;
margin-top: 3px;
}
.acitems div.boxed {width: 28px;}
.acitems div.boxed span.pseudoattr {
min-width: 26px;
width: 26px;
}
.skills .lab.class {width: 20px;}
.skills .lab.name {
width: 176px;
text-align: left;
}
.skills .lab.total,
.skills .lab.ability,
.skills .lab.ranks,
.skills .lab.misc {width: 39px;}
.skills .lab.temp {width: 37px;}
.skill div.skillability {display: none;}
.skill input.skillability[value="strength"] + div.skillability,
.skill input.skillability[value="dexterity"] + div.skillability {display: inline-block;}
.fullpc .feat,
.fullpc .ability {margin-top: 2px;}
.statblock .senses {width: 350px;}
.statblock .type {width: 325px;}
.statblock .aura {width: 458px;}
.statblock .skill {
width: 115px;
text-align: right;
}
span.npc-section {
display: block;
width: 100%;
border-top: 1px solid black;
border-bottom: 1px solid black;
text-transform: uppercase;
font-family: sans-serif;
font-size: 1.15em;
margin-top: 10px;
padding-left: 2px;
}
.multiclass {
text-align: left;
white-space: nowrap;
}
.multiclass .lab {
width: 30px;
font-weight: bold;
}
.labline.multiclass.bord {border-bottom: 1px dotted #CCC;}
.multiclass .lab.spellcasting {
width: 176px;
text-transform: uppercase;
text-align: left;
}
.multiclass .lab.class {width: 140px;}
.multiclass .lab.fav {width: 15px;}
.multiclass .lab.hd {width: 24px;}
.multiclass .lab.spell,
.multiclass .spell {
width: 20px;
text-align: center;
}
.multiclass .ability {width: 70px;}
.multiclass .lab.fail {
width: 20px;
text-align: left;
}
.multiclass .boxed {width: 30px;}
/* ===== INPUTS ===== */
input, textarea{
background-color: transparent;
text-align:center;
display: inline-block;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
font-family: '';
font-size: 1.0em;
color: rgb(85, 85, 85);
border: none;
border-radius: 0;
box-shadow: none;
resize:none;
}
input:focus, textarea:focus, select:focus{
background-color: #f5f5f5;
outline: none;
}
input[type="text"].right {text-align: right;}
input[type="text"].spsml {width: 20px;}
input[type="text"].sml {width: 30px;}
input[type="text"].small {width: 45px;}
input[type="text"].smlmed {width: 80px;}
input[type="text"].medium {width: 140px;}
input[type="number"]{
text-align: center;
vertical-align: middle;
}
input[type="number"].nospin::-webkit-inner-spin-button,
input[type="number"].nospin::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
}
input[type=number].nospin {
-moz-appearance:textfield;
}
input[type="number"].spsml {width: 20px;}
.npc-display input[type="number"].spsml {vertical-align: top;}
input[type="number"].sml {width: 30px;}
div.boxed input[type="number"]{
width: 36px;
height: 18px;
margin-top: 2px;
}
.identity input[type="number"],
.attacks input[type="number"],
.spells input[type="number"],
.statblock input[type="number"].medium {width: 35px;}
.repeating_acitems_container input[type="number"] {width: 28px;}
.spells input[type="number"].sml {width: 25px;}
.skill input[type="number"],
.spellcasting input[type="number"] {width: 30px;}
input[type="number"].underlined,
input[type="text"].underlined {vertical-align: bottom;}
select {
width: auto;
text-align: center;
text-align-last:center;
height: 19px;
line-height: 1.1em;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-transform: capitalize;
vertical-align: bottom;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
font-size: 1.0em;
font-family: sans-serif;
border: none;
border-radius: 0;
box-shadow: none;
resize: none;
background: transparent;
}
select.alignment {
width: 110px;
}
select.size {
width: 80px;
}
.repeating_acitems_container select{
width: 50px;
}
.myrow .spell-name {flex:1;width:100px;}
.myrow .spell-cost {width:52px;}
.myrow .spell-type,
.myrow .spell-skill,
.myrow .spell-target {width:58px;}
.myrow .spell-charge,
.myrow .spell-correction {width:45px;}
.magictable input:last-child {
margin: 0px 7px 0px 5px;
}
.magictable input:first-child {
margin: 0px 0px 0px 18px;
}
/* ===== ABILITIES ===== */
.baseattr {
opacity: 0;
height: 0px;
width: 0px;
pointer-events: none;
display: inline;
position: absolute;
}
.finalattr {
display: inline-block;
}
.boxed:hover .baseattr,
.boxed .baseattr:focus {
opacity: 1;
width: 36px;
height: 18px;
pointer-events: auto;
position: static;
}
.boxed:hover .finalattr,
.boxed .baseattr:focus ~ .finalattr {
display: none;
}
/* ===== FLAGS ===== */
.boxed .attr-flag:not([value="0"]) + span,
.spellcasting .attr-flag:not([value="0"]) + span,
.spells .attr-flag:not([value="0"]) + span.prepared {color: #501414;}
.boxed .attr-flag:not([value="0"]) + span:after,
.spellcasting .attr-flag:not([value="0"]) + span:after,
.spells .attr-flag:not([value="0"]) + span.prepared:after {
content: "e";
font-family: "Pictos";
font-size: 0.8em;
font-weight: bold;
position: absolute;
margin-left: 1px;
}
.boxed .attr-flag:not([value="0"]) + .finalattr{color: #501414;}
.boxed .attr-flag:not([value="0"]) + .finalattr:after{
content: "e";
font-family: "Pictos";
font-size: 0.8em;
font-weight: bold;
position: absolute;
margin-left: 1px;
}
.skill .attr-flag:not([value="0"]) + span {color: #501414;}
.skill .attr-flag:not([value="0"]) + span:after{
font-family: "Pictos";
font-size: 0.8em;
font-weight: bold;
margin-left: 1px;
}
.skill .attr-flag[value="1"] + span:after {
content: "U";
}
.skill .attr-flag[value="2"] + span:after {
content: "e";
}
.skill .attr-flag[value="3"] + span:after {
content: "Ue";
}
.spell .attr-flag + span{
position: absolute;
right: 75px;
}
.spell .attr-flag:not([value="0"]) + span:after{
font-family: "Pictos Three";
font-size: 1.2em;
font-weight: bold;
color: #BE202E;
background: #DDD;
content: "g";
}
.spell .domain-flag + span {
margin-left: 2px;
}
.spell .domain-flag:not([value="0"]) + span:after {
font-family: "Times New Roman";
font-size: 0.60em;
font-weight: normal;
color: black;
background: transparent;
content: "D";
vertical-align: super;
line-height: 0.9em;
}
/* ===== BUTTONS ===== */
button[type="compendium"].myrol,
button[type="roll"].myrol {
text-align: center;
text-decoration: none;
background:none;
background-image:none;
border: none;
box-shadow: none;
text-shadow: none;
padding: inherit;
margin: 2px;
color: inherit;
font-family: inherit;
font-size: inherit;
line-height: inherit;
text-transform: inherit;
text-align: inherit;
vertical-align: inherit;
border-radius: none;
}
button[type="compendium"].myrol:hover,
button[type="roll"].myrol:hover{
color: #aaa;
}
.charsheet .spell-table button[type="roll"].myrol:before, .blacklabel button[type="roll"].myrol.big:before{
content: none;
}
.charsheet .spell-table button[type="roll"].myrol{
font-size: 13px;
}
.blacklabel button[type="roll"].myrol.big {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
line-height: 1.0em;
}
.blacklabel button[type="roll"].myrol.big.only {
flex-grow: 2;
}
button[type="roll"].myrol.margindent {margin-left: 14px;}
.statblock button[type="roll"].myrol{margin: 0px 0px 0px 0px;}
button[type="roll"].myrol.underl {
margin-left: 14px;
border-bottom: 1px dotted #999;
}
.spells .spell button[type="roll"].myrol.underl,
.spelllike .spell button[type="roll"].myrol.underl {font-style: italic;}
.spells .spell button[type="roll"].myrol.underl {
margin-right: 2px;
border-bottom: 1px dotted transparent;
}
button[type="roll"].myrol.underl:hover,
.spells .spell button[type="roll"].myrol.underl:hover {border-bottom: 1px dotted #BE202E;}
.statblock .attack .lbl.atk {width: 55px;}
.statblock .prep {
width: 55px;
text-align: center;
}
button[type="compendium"].myrol {
display: none;
}
.fromcompendium:not([value=""]) + button[type="compendium"].myrol {
display: inline-block;
}
/* ===== PSEUDO CHECKS and RADIOS ===== */
input[type="checkbox"].pseudocheck,
input[type="radio"].pseudocheck {
opacity: 0;
width: 13px;
cursor: pointer;
z-index: 10;
margin-top: 3px;
line-height: 13px;
}
input[type="checkbox"].pseudocheck + span,
input[type="radio"].pseudocheck + span {
font-size: 13px;
line-height: 13px;
white-space: nowrap;
display: inline-block;
margin-left: -13px;
}
input[type="checkbox"].pseudocheck + span::before,
input[type="radio"].pseudocheck + span::before {
text-align: middle;
display: inline-block;
vertical-align: middle;
background: transparent;
}
input[type="checkbox"].pseudocheck + span::before {
content: "";
line-height: 18px;
font-size: 18px;
}
input[type="checkbox"].pseudocheck:checked + span::before {
content: "";
}
input[type="radio"].pseudocheck + span {
border: 1px solid black;
border-radius: 50%;
width: 13px;
height: 13px;
vertical-align: bottom;
}
input[type="radio"].pseudocheck + span::before {
content: "";
margin-top: -4px;
}
input[type="radio"].pseudocheck:checked + span::before {
content: "";
}
/* ==== LEFT FILLED RADIO ==== */
.dots {
display: inline-block;
position: relative;
white-space: nowrap;
}
.spell div.dots {
width: 70px;
text-align: left;
vertical-align: top;
}
.dots input[type="radio"] {
position: absolute;
opacity: 0;
z-index: 1;
}
.dots input[type="radio"],
.dots input[type="radio"] + span {
display: inline-block;
width: 13px;
height: 13px;
margin: 3px -1px 0px -1px;
}
.dots input[type="radio"] + span {
vertical-align: top;
position: relative;
background: transparent;
}
.dots input[type="radio"]:not([value="0"]) + span {
border: 1px solid black;
border-radius: 50%;
}
.dots input[type="radio"]:not([value="0"]) + span::before {
content: "";
position: absolute;
top: -3px;
left: 0px;
}
.dots input[type="radio"]:checked ~ input[type="radio"] + span::before {
content: " ";
}
.dots input[type="radio"][value="0"] + span:before {
content: "";
font-family: sans-serif;
font-size: 1.2em;
line-height: 0.9em;
position: relative;
}
.dots input[type="radio"][value="0"]:hover + span:before {
font-weight: bold;
color: #BE202E;
}
/* ===== PSEUDO TABS ===== */
div.tabmain,
div.tabadd,
div.tabspell,
div.tabconf {
display: none;
text-align: center;
width: 100%;
border-top: 1px solid black;
padding-top: 4px;
}
input.tabmain:checked ~ div.tabmain{
display: block;
}
input.tabadd:checked ~ div.tabadd{
display: block;
}
input.tabspell:checked ~ div.tabspell{
display: block;
}
input.tabconf:checked ~ div.tabconf{
display: block;
}
input.tabmain,
input.tabadd,
input.tabspell,
input.tabconf{
margin: 0;
margin-top: -4px;
margin-bottom: -4px;
padding: 0;
display: inline-block;
opacity: 0;
width: 110px;
height: 20px;
z-index: 2;
}
input.tabmain + span,
input.tabadd + span,
input.tabspell + span,
input.tabconf + span{
color: #666666;
background-color: #BBBBBB;
font-size: 0.85em;
text-align:center;
display: inline-block;
width: 110px;
height: 20px;
margin: 0;
margin-left: -110px;
margin-right: -5px;
padding:0;
margin-bottom: -1px;
text-transform: uppercase;
border: 1px solid #666666;
border-bottom-color: black;
z-index: 1;
}
input.tabmain:checked + span,
input.tabadd:checked + span,
input.tabspell:checked + span,
input.tabconf:checked + span{
font-weight: bold;
color: black;
background-color: white;
border-left-color: black;
border-top-color: black;
border-right-color: black;
border-bottom-color: white;
}
/* ===== OPTIONS ===== */
.options-flag {
opacity: 0;
position: absolute;
width: 16px;
min-height: 16px;
z-index: 2;
}
input.options-flag {
margin-left: 2px;
}
.options-flag + span {
position: absolute;
white-space: nowrap;
width: 16px;
height: 16px;
font-size: 16px;
font-family: pictos;
color: #BBBBBB;
cursor: pointer;
margin-top: 0px;
margin-left: 2px;
display: none;
}
.options-flag:hover + span,
.options-flag:checked + span {
color: #C3996B;
display: block;
}
.abilities .options-flag,
.abilities .options-flag + span,
.acvalues .options-flag,
.acvalues .options-flag + span,
.initiative .options-flag,
.initiative .options-flag + span,
.saves .options-flag.fortitude,
.saves .options-flag.fortitude + span,
.babs .options-flag.bab,
.babs .options-flag.bab + span,
.attackmods .options-flag.melee,
.attackmods .options-flag.melee + span,
.defenses .options-flag.cmd,
.defenses .options-flag.cmd + span,
.attacks .options-flag,
.attacks .options-flag + span,
.concentration .options-flag,
.concentration .options-flag + span,
.spell .options-flag,
.spell .options-flag + span,
.speeds .options-flag,
.speeds .options-flag + span {
top: -2px;
left: 5px;
}
.saves .options-flag.reflex,
.saves .options-flag.reflex + span {
top: -2px;
left: 148px;
}
.saves .options-flag.will,
.saves .options-flag.will + span {
top: -2px;
left: 281px;
}
.babs .options-flag.cmb,
.babs .options-flag.cmb + span {
top: -2px;
left: 262px;
}
.attackmods .options-flag.ranged,
.attackmods .options-flag.ranged + span {
top: -2px;
left: 215px;
}
.defenses .options-flag.sr,
.defenses .options-flag.sr + span {
top: -2px;
left: 174px;
}
.abilities .ability:hover .options-flag + span,
.acvalues:hover .options-flag + span,
.initiative:hover .options-flag + span,
.acitem:hover .options-flag + span,
.saves:hover .options-flag + span,
.babs:hover .options-flag + span,
.attackmods:hover .options-flag + span,
.defenses:hover .options-flag + span,
.attack:hover .options-flag + span,
.skill:hover .options-flag + span,
.concentration:hover .options-flag + span,
.spell:hover .options-flag + span,
.statblock .head-info:hover .options-flag + span,
.statblock .npcatk .attack:hover .options-flag + span,
.feat:hover .options-flag + span,
.ability:hover .options-flag + span,
.metamagic:hover .options-flag + span,
.encumbrance:hover .options-flag + span,
.speeds:hover .options-flag + span {
display: block;
}
.options,
.options-fortitude,
.options-reflex,
.options-will,
.options-bab,
.options-cmb,
.options-melee,
.options-ranged,
.options-cmd,
.options-sr {
display: none;
margin-top: 2px;
border-top: 1px dotted rgba(195,153,107,0.2);
border-bottom: 2px dotted #C3996B;
margin:5px 10px;
}
.fullpc .options,
.options-fortitude,
.options-reflex,
.options-will,
.options-bab,
.options-cmb,
.options-melee,
.options-ranged,
.options-cmd,
.options-sr {
background-color: rgb(250,250,250);
}
.spelllike .options,
.npcatk .options {
background-color: rgb(250,250,250);
}
.options-flag:checked ~ .options,
.options-flag.fortitude:checked ~ .options-fortitude,
.options-flag.reflex:checked ~ .options-reflex,
.options-flag.will:checked ~ .options-will,
.options-flag.bab:checked ~ .options-bab,
.options-flag.cmb:checked ~ .options-cmb,
.options-flag.melee:checked ~ .options-melee,
.options-flag.ranged:checked ~ .options-ranged,
.options-flag.cmd:checked ~ .options-cmd,
.options-flag.sr:checked ~ .options-sr {
display: inherit;
}
.optional-flag,
.optional-flag0 {display: none;}
.optional,
.tabspell.optional.inl,
.tabspell.optional.inl + span.optional.inl,
.spells .col1third.optional.inl {display: none;}
.optional-flag:not([value=""]) + .optional.blk,
.optional-flag0:not([value="0"]) + .optional.blk {display: block;}
.optional-flag:not([value=""]) + .optional.inl,
.optional-flag0:not([value="0"]) + .optional.inl,
.optional-flag0:not([value="0"]) + .tabspell.optional.inl,
.optional-flag0:not([value="0"]) + .tabspell.optional.inl + span.optional.inl,
.spells .optional-flag0:not([value="0"]) + .col1third.optional.inl {display: inline-block;}
.list-checker {
text-align:left; height: 100%; padding-top: 3px;
}
.list-checker .options-flag + span {
display: inline-block;
text-transform: none;
}
.list-checker .options-flag:checked + span {
display: inline-block;
}
/* ===== AUTO EXPAND TEXTAREA ===== */
.autoex {
position: relative;
cursor: text;
font-size: 1.1em;
line-height: 1.4em;
min-height: 1.4em;
text-align: left;
}
.autoex span {
visibility: hidden;
display: block;
font-family: inherit;
font-size: inherit;
line-height: inherit;
white-space: pre-wrap;
text-align: inherit;
min-height: inherit;
}
.autoex textarea {
display: block;
z-index: 1;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
font-family: inherit;
font-size: 0.9em;
line-height: 1.5em;
white-space: pre-wrap;
text-align: inherit;
min-height: inherit;
}
.hpvalues.autoex {
font-size: 1.15em;
line-height: 1.15em;
}
/* ===== REPEATING SECTIONS CTRL ===== */
.fullpc .repcontrol {
margin-top: 2px;
min-height: 27px;
width: 90%;
text-align: center;
}
.repcontrol .btn {
border: none;
color: white !important;
background: none;
box-shadow: none;
font-size: 0;
}
.fullpc .repcontrol .btn {padding: 0px 0px 0px 0px;}
.statblock .repcontrol .btn {
padding: 0px 0px 0px 0px;
margin-left: 10px;
display: inline-block;
width: 25px;
font-size: 0px;
}
.repcontrol .btn:focus {outline: 0;}
.repcontrol .repcontrol_add:before {
content: '&';
font-family: pictos;
color: black;
display: inline-block;
}
.fullpc .repcontrol .repcontrol_add:before,
.fullpc .repcontrol .repcontrol_edit:after {
border: 1px solid black;
border-radius: 50%;
font-size: 13px;
padding: 3px;
height: 12px;
width: 12px;
line-height: 12px;
}
.statblock .repcontrol .repcontrol_add:before,
.statblock .repcontrol .repcontrol_edit:after {
font-size: 12px;
padding: 2px;
height: 10px;
width: 10px;
line-height: 10px;
}
.repcontrol .repcontrol_edit:after {
content: '(';
font-family: pictos;
color: black;
display: inline-block;
}
.editmode ~ .repcontrol .repcontrol_edit:after {
content: ')';
vertical-align: bottom;
}
.repcontrol .repcontrol_edit:hover:after,
.repcontrol .repcontrol_add:hover:before {
color: #C3996B;
border-color: #C3996B;
}
.repcontainer .repitem .itemcontrol {z-index: 10;}
.repcontainer .repitem .itemcontrol .repcontrol_del {
float: right;
font-size: 10px;
padding: 0px;
height: 18px;
width: 18px;
}
.repcontainer .repitem .itemcontrol .repcontrol_move {
cursor: move;
float: left;
font-size: 10px;
padding: 0px;
height: 18px;
width: 18px;
}
.statblock .npcatk .repitem,
.statblock .npcatk .repcontrol,
.statblock .npcatk .repcontainer {vertical-align: top;}
.statblock .npcatk .repitem {display: inline-block;}
.statblock .npcatk .repcontrol {display: inline-block;}
.statblock .npcatk .repcontainer {display: inline;}
.statblock .npcatk.melee .repcontainer,
.statblock .npcatk.feats .repcontainer {max-width: 560px;}
.statblock .npcatk.ranged .repcontainer {max-width: 545px;}
.statblock .npcatk.special .repcontainer {max-width: 500px;}
.statblock .npcatk.spells .repcontainer {max-width: 540px;}
/* Templates Frame */
.sheet-rolltemplate-modulation-table,
.sheet-rolltemplate-fate-mutation-table,
.sheet-rolltemplate-ordinary-scene-table,
.sheet-rolltemplate-fumble-table,
.sheet-rolltemplate-event-table {
width: 100%;
max-width: 500px;
display: table;
table-layout: fixed;
word-break: keep-all;
text-align: center;
}
.sheet-rolltemplate-modulation-table .sheet-template-top,
.sheet-rolltemplate-fate-mutation-table .sheet-template-top,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-top,
.sheet-rolltemplate-fumble-table .sheet-template-top,
.sheet-rolltemplate-event-table .sheet-template-top {
height: 25px;
padding: 0px;
margin: 0px;
display: table-row;
}
.sheet-rolltemplate-modulation-table .sheet-template-top .sheet-left,
.sheet-rolltemplate-fate-mutation-table .sheet-template-top .sheet-left,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-top .sheet-left,
.sheet-rolltemplate-fumble-table .sheet-template-top .sheet-left,
.sheet-rolltemplate-event-table .sheet-template-top .sheet-left {
width: 30px;
height: 25px;
display: table-cell;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/t_corner.png");
background-repeat: no-repeat;
background-position: left top;
background-size: 100px;
}
.sheet-rolltemplate-modulation-table .sheet-template-top .sheet-center,
.sheet-rolltemplate-fate-mutation-table .sheet-template-top .sheet-center,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-top .sheet-center,
.sheet-rolltemplate-fumble-table .sheet-template-top .sheet-center,
.sheet-rolltemplate-event-table .sheet-template-top .sheet-center {
height: 25px;
display: table-cell;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/thline.png");
background-repeat: repeat-x;
background-size: auto 40px;
background-position: top;
}
.sheet-rolltemplate-modulation-table .sheet-template-top .sheet-right,
.sheet-rolltemplate-fate-mutation-table .sheet-template-top .sheet-right,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-top .sheet-right,
.sheet-rolltemplate-fumble-table .sheet-template-top .sheet-right,
.sheet-rolltemplate-event-table .sheet-template-top .sheet-right {
width: 30px;
height: 25px;
display: table-cell;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/t_corner.png");
background-repeat: no-repeat;
background-position: right top;
background-size: 100px;
}
.sheet-rolltemplate-modulation-table .sheet-template-middle,
.sheet-rolltemplate-fate-mutation-table .sheet-template-middle,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-middle,
.sheet-rolltemplate-fumble-table .sheet-template-middle,
.sheet-rolltemplate-event-table .sheet-template-middle {
display: table-row;
}
.sheet-rolltemplate-modulation-table .sheet-template-middle .sheet-left,
.sheet-rolltemplate-fate-mutation-table .sheet-template-middle .sheet-left,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-middle .sheet-left,
.sheet-rolltemplate-fumble-table .sheet-template-middle .sheet-left,
.sheet-rolltemplate-event-table .sheet-template-middle .sheet-left {
width: 30px;
display: table-cell;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/t_v_line.png");
background-repeat: repeat-y;
background-size: 45px auto;
background-position: left;
}
.sheet-rolltemplate-modulation-table .sheet-template-middle .sheet-center,
.sheet-rolltemplate-fate-mutation-table .sheet-template-middle .sheet-center,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-middle .sheet-center,
.sheet-rolltemplate-fumble-table .sheet-template-middle .sheet-center,
.sheet-rolltemplate-event-table .sheet-template-middle .sheet-center {
display: table-cell;
background: white;
}
.sheet-rolltemplate-modulation-table .sheet-template-middle .sheet-right,
.sheet-rolltemplate-fate-mutation-table .sheet-template-middle .sheet-right,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-middle .sheet-right,
.sheet-rolltemplate-fumble-table .sheet-template-middle .sheet-right,
.sheet-rolltemplate-event-table .sheet-template-middle .sheet-right {
width: 30px;
display: table-cell;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/t_v_line.png");
background-repeat: repeat-y;
background-size: 45px auto;
background-position: right;
}
.sheet-rolltemplate-modulation-table .sheet-template-bottom,
.sheet-rolltemplate-fate-mutation-table .sheet-template-bottom,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-bottom,
.sheet-rolltemplate-fumble-table .sheet-template-bottom,
.sheet-rolltemplate-event-table .sheet-template-bottom {
height: 25px;
display: table-row;
}
.sheet-rolltemplate-modulation-table .sheet-template-bottom .sheet-left,
.sheet-rolltemplate-fate-mutation-table .sheet-template-bottom .sheet-left,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-bottom .sheet-left,
.sheet-rolltemplate-fumble-table .sheet-template-bottom .sheet-left,
.sheet-rolltemplate-event-table .sheet-template-bottom .sheet-left {
width: 30px;
height: 25px;
display: table-cell;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/t_corner.png");
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100px;
}
.sheet-rolltemplate-modulation-table .sheet-template-bottom .sheet-center,
.sheet-rolltemplate-fate-mutation-table .sheet-template-bottom .sheet-center,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-bottom .sheet-center,
.sheet-rolltemplate-fumble-table .sheet-template-bottom .sheet-center,
.sheet-rolltemplate-event-table .sheet-template-bottom .sheet-center {
height: 25px;
display: table-cell;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/thline.png");
background-repeat: repeat-x;
background-size: auto 40px;
background-position: bottom;
}
.sheet-rolltemplate-modulation-table .sheet-template-bottom .sheet-right,
.sheet-rolltemplate-fate-mutation-table .sheet-template-bottom .sheet-right,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-bottom .sheet-right,
.sheet-rolltemplate-fumble-table .sheet-template-bottom .sheet-right,
.sheet-rolltemplate-event-table .sheet-template-bottom .sheet-right {
width: 30px;
height: 25px;
display: table-cell;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/t_corner.png");
background-repeat: no-repeat;
background-position: right bottom;
background-size: 100px;
}
/* asdfasdfasdfasdf */
/* asdfasdfasdfasdf */
/* asdfasdfasdfasdf */
.sheet-rolltemplate-Magic {
width: 100%;
max-width: 500px;
display: table;
table-layout: fixed;
word-break: keep-all;
text-align: center;
}
.sheet-rolltemplate-Magic .sheet-template-top {
height: 30px;
padding: 0px;
margin: 0px;
display: table-row;
}
.sheet-rolltemplate-Magic .sheet-template-top .sheet-left {
width: 30px;
height: 30px;
display: table-cell;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/rt_1_1.png");
background-repeat: no-repeat;
background-size: 30px 30px;
}
.sheet-rolltemplate-Magic .sheet-template-top .sheet-center {
height: 30px;
display: table-cell;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/rt_1_2.png");
background-repeat: repeat-x;
background-size: auto 30px;
}
.sheet-rolltemplate-Magic .sheet-template-top .sheet-right {
width: 30px;
height: 30px;
display: table-cell;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/rt_1_3.png");
background-repeat: no-repeat;
background-size: 30px 30px;
}
.sheet-rolltemplate-Magic .sheet-template-middle {
display: table-row;
}
.sheet-rolltemplate-Magic .sheet-template-middle .sheet-left {
width: 30px;
display: table-cell;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/rt_2_1.png");
background-repeat: repeat-y;
background-size: 30px auto;
}
.sheet-rolltemplate-Magic .sheet-template-middle .sheet-center {
display: table-cell;
background: white;
}
.sheet-rolltemplate-Magic .sheet-template-middle .sheet-right {
width: 30px;
display: table-cell;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/rt_2_3.png");
background-repeat: repeat-y;
background-size: 30px auto;
}
.sheet-rolltemplate-Magic .sheet-template-bottom {
height: 30px;
display: table-row;
}
.sheet-rolltemplate-Magic .sheet-template-bottom .sheet-left {
width: 30px;
height: 30px;
display: table-cell;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/rt_3_1.png");
background-repeat: no-repeat;
background-size: 30px 30px;
}
.sheet-rolltemplate-Magic .sheet-template-bottom .sheet-center {
height: 30px;
display: table-cell;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/rt_3_2.png");
background-repeat: repeat-x;
background-size: auto 30px;
}
.sheet-rolltemplate-Magic .sheet-template-bottom .sheet-right {
width: 30px;
height: 30px;
display: table-cell;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/rt_3_3.png");
background-repeat: no-repeat;
background-size: 30px 30px;
}
.sheet-rolltemplate-Magic .sheet-divider,
.sheet-rolltemplate-modulation-table .sheet-divider,
.sheet-rolltemplate-fate-mutation-table .sheet-divider,
.sheet-rolltemplate-ordinary-scene-table .sheet-divider,
.sheet-rolltemplate-fumble-table .sheet-divider,
.sheet-rolltemplate-event-table .sheet-divider {
height: 0px;
border-bottom: 1px solid #999;
}
.sheet-rolltemplate-Magic .sheet-title,
.sheet-rolltemplate-modulation-table .sheet-title,
.sheet-rolltemplate-fate-mutation-table .sheet-title,
.sheet-rolltemplate-ordinary-scene-table .sheet-title,
.sheet-rolltemplate-fumble-table .sheet-title,
.sheet-rolltemplate-event-table .sheet-title {
font-size: 1.1em;
font-weight: bold;
color: #222222;
padding-bottom: 7px;
text-align: center;
}
.sheet-rolltemplate-Magic .sheet-subtitle,
.sheet-rolltemplate-modulation-table .sheet-subtitle,
.sheet-rolltemplate-fate-mutation-table .sheet-subtitle,
.sheet-rolltemplate-ordinary-scene-table .sheet-subtitle,
.sheet-rolltemplate-fumble-table .sheet-subtitle,
.sheet-rolltemplate-event-table .sheet-subtitle {
text-align: center;
font-size: 1.2em;
font-family: 'Noto Serif KR', serif;
text-align: center;
color: #fff;
background: #222;
padding: 5px 20px;
margin: 3px 0px;
}
.sheet-rolltemplate-Magic .sheet-desc,
.sheet-rolltemplate-Magic .sheet-desc .inlinerollresult,
.sheet-rolltemplate-modulation-table .sheet-desc,
.sheet-rolltemplate-fate-mutation-table .sheet-desc,
.sheet-rolltemplate-ordinary-scene-table .sheet-desc,
.sheet-rolltemplate-fumble-table .sheet-desc,
.sheet-rolltemplate-event-table .sheet-desc {
background-color: transparent;
border: 0px;
font-size: 13px;
padding-top: 10px;
font-weight: normal;
color: #404040;
}
.sheet-rolltemplate-modulation-table .sheet-desc .inlinerollresult,
.sheet-rolltemplate-fate-mutation-table .sheet-desc .inlinerollresult,
.sheet-rolltemplate-ordinary-scene-table .sheet-desc .inlinerollresult,
.sheet-rolltemplate-fumble-table .sheet-desc .inlinerollresult,
.sheet-rolltemplate-event-table .sheet-desc .inlinerollresult {
background-color: transparent;
border: 0px;
}
.sheet-rolltemplate-Magic .sheet-skillname {
text-align: center;
font-size: 1.2em;
font-family: 'Noto Serif KR', serif;
text-align: center;
color: #222;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
padding: 5px 20px;
margin: 3px 0px;
}
.sheet-rolltemplate-Magic .sheet-recite {
font-size: 13px;
font-family: 'Noto Serif KR', serif;
padding: 20px 15px;
margin-top: 10px;
background: #f8f8f8;
}
.sheet-rolltemplate-Magic .sheet-recite .inlinerollresult {
font-size: 13px;
}
.sheet-rolltemplate-Magic .sheet-target {
border-top: 1px solid #999;
border-bottom: 1px solid #999;
padding: 3px;
font-size: 0.95em;
font-weight: bold;
}
.sheet-rolltemplate-Magic .sheet-spec {
padding-top: 7px;
}
.sheet-rolltemplate-Magic .sheet-spec span {
font-size: 0.9em;
}
.sheet-rolltemplate-Magic .sheet-random {
display: grid;
grid-template-columns: 1fr;
border: 1px dotted #999;
padding: 3px;
margin: 10px;
margin-top: 15px;
text-decoration: none;
}
.sheet-rolltemplate-Magic .sheet-random.sheet-button {
border: 3px double #999;
background: #fafafa;
}
.sheet-rolltemplate-Magic .sheet-random.sheet-button:hover {
background: #eeeeee;
color: #dc143c;
cursor: pointer;
}
.sheet-rolltemplate-Magic .sheet-random a,
.sheet-rolltemplate-Magic .sheet-random div {
grid-row-start: 1;
grid-column-start: 1;
padding: 5px;
z-index: 49;
}
.sheet-rolltemplate-Magic .sheet-random a {
display: block;
text-align: center;
background-color: transparent;
color: transparent;
border: 0px;
z-index: 50;
}
.sheet-rolltemplate-Magic .sheet-random span {
display: block;
text-align: center;
font-size: 1.2em;
font-weight: bold;
margin-top: 5px;
}
.sheet-rolltemplate-Magic .sheet-random .sheet-area {
font-size: 1em;
margin: 0px;
font-weight: normal;
color: #444;
}
/* ===== ROLL TEMPLATES ===== */
.sheet-rolltemplate-Magic,
.sheet-rolltemplate-npc {font-family: sans-serif;}
/* API buttons */
/*.sheet-rolltemplate-Magic a[href^="~"] {
background-color: transparent;
padding: 0px 0px 0px 0px;
color: #182C4A;
display: inline-block;
border: none;
text-align: left;
font-family: sans-serif;
font-size: 0.95em;
line-height: 1em;
text-transform: capitalize;
white-space: pre;
font-weight: bold;
}*/
.sheet-rolltemplate-Magic a:hover {color: #BE202E;}
/* Rolls */
.sheet-rolltemplate-Magic .inlinerollresult,
.sheet-rolltemplate-npc .inlinerollresult {
background-color: transparent;
border: none;
padding: 0px 0px;
font-weight: bold;
cursor: help;
font-size: 1.25em;
padding: 2px;
}
.sheet-rolltemplate-Magic .inlinerollresult {color: #000;}
.sheet-rolltemplate-Magic .sheet-mdl,
.sheet-rolltemplate-Magic .sheet-mdl span {
vertical-align: middle;
display: inline-block;
padding-top: 1px;
font-size: 1.06em;
}
.sheet-rolltemplate-Magic .sheet-resright .inlinerollresult,
.sheet-rolltemplate-npc .sheet-bigres .inlinerollresult {
font-size: 1.6em;
line-height: 1.45em;
}
.sheet-rolltemplate-Magic .success,
.sheet-rolltemplate-npc .success {
color: #247305;
}
.sheet-rolltemplate-Magic .failure,
.sheet-rolltemplate-npc .failure {
color: #BE202E;
}
.sheet-rolltemplate-Magic .inlinerollresult.fullcrit,
.sheet-rolltemplate-npc .inlinerollresult.fullcrit {
border: none;
color: #247305;
}
.sheet-rolltemplate-Magic .inlinerollresult.importantroll,
.sheet-rolltemplate-npc .inlinerollresult.importantroll {
border: none;
color: #4A57ED;
}
.sheet-rolltemplate-Magic .inlinerollresult.fullfail,
.sheet-rolltemplate-npc .inlinerollresult.fullfail {
border: none;
color: #BE202E;
}
/* classes */
.sheet-rolltemplate-Magic div,
.sheet-rolltemplate-Magic span,
.sheet-rolltemplate-Magic img,
.sheet-rolltemplate-npc div,
.sheet-rolltemplate-npc span,
.sheet-rolltemplate-npc img {
box-sizing: border-box;
}
.sheet-rolltemplate-Magic div,
.sheet-rolltemplate-npc div {
margin: 0px;
padding: 0px;
}
.sheet-rolltemplate-Magic img,
.sheet-rolltemplate-npc img {
margin: 0px;
padding: 0px;
}
.sheet-rolltemplate-Magic .sheet-center,
.sheet-rolltemplate-npc .sheet-center {text-align: center;}
.sheet-rolltemplate-Magic .sheet-right,
.sheet-rolltemplate-npc .sheet-right {text-align: right;}
.sheet-rolltemplate-Magic .sheet-ital,
.sheet-rolltemplate-npc .sheet-ital {font-style: italic;}
.sheet-rolltemplate-Magic .sheet-inl,
.sheet-rolltemplate-npc .sheet-inl {display: inline;}
.sheet-rolltemplate-Magic .sheet-bold,
.sheet-rolltemplate-npc .sheet-bold {font-weight: bold;}
.sheet-rolltemplate-Magic .sheet-vtop,
.sheet-rolltemplate-npc .sheet-vtop {vertical-align: top;}
.sheet-rolltemplate-Magic .sheet-myrow,
.sheet-rolltemplate-npc .sheet-myrow {
padding: 5px;
border:1px solid #182C4A;
border-top:0px;
border-bottom:0px;
background:#fff;
}
.sheet-rolltemplate-Magic .sheet-vtop + .sheet-myrow {background: linear-gradient(to left,white,#D8DBE6);}
.sheet-rolltemplate-npc .sheet-bordered .sheet-myrow:nth-child(even) {background: linear-gradient(to left,#c3996b7a,white);}
.sheet-rolltemplate-Magic span.sheet-notes,
.sheet-rolltemplate-npc span.sheet-notes {
font-family: sans-serif;
font-size: 0.9em;
color: black;
}
.sheet-rolltemplate-Magic .sheet-lbl,
.sheet-rolltemplate-npc .sheet-lbl {
text-align: left;
font-family: sans-serif;
line-height: 1em;
text-transform: capitalize;
white-space: pre;
}
.sheet-rolltemplate-Magic .sheet-bordered,
.sheet-rolltemplate-npc .sheet-bordered {
border-bottom:1px solid #182C4A;
text-align: left;
vertical-align: top;
position: relative;
}
/* ICONS */
.sheet-rolltemplate-Magic .sheet-icon,
.sheet-rolltemplate-npc .sheet-icon {
position: absolute;
top: 6px;
left: -40px;
width: 40px;
text-align: center;
}
.sheet-rolltemplate-Magic .img {padding-bottom:10px;}
.sheet-rolltemplate-Magic .img img,
.sheet-rolltemplate-npc .img img {display:block; margin:0 auto;}
.element-to-determine-style-A3[value='1'] ~ div .element-to-style-A3,
.element-to-determine-style-B3[value='1'] ~ div .element-to-style-B3,
.element-to-determine-style-C3[value='1'] ~ div .element-to-style-C3,
.element-to-determine-style-D3[value='1'] ~ div .element-to-style-D3,
.element-to-determine-style-E3[value='1'] ~ div .element-to-style-E3,
.element-to-determine-style-F3[value='1'] ~ div .element-to-style-F3,
.element-to-determine-style-A5[value='1'] ~ div .element-to-style-A5,
.element-to-determine-style-B5[value='1'] ~ div .element-to-style-B5,
.element-to-determine-style-C5[value='1'] ~ div .element-to-style-C5,
.element-to-determine-style-D5[value='1'] ~ div .element-to-style-D5,
.element-to-determine-style-E5[value='1'] ~ div .element-to-style-E5,
.element-to-determine-style-F5[value='1'] ~ div .element-to-style-F5,
.element-to-determine-style-A7[value='1'] ~ div .element-to-style-A7,
.element-to-determine-style-B7[value='1'] ~ div .element-to-style-B7,
.element-to-determine-style-C7[value='1'] ~ div .element-to-style-C7,
.element-to-determine-style-D7[value='1'] ~ div .element-to-style-D7,
.element-to-determine-style-E7[value='1'] ~ div .element-to-style-E7,
.element-to-determine-style-F7[value='1'] ~ div .element-to-style-F7,
.element-to-determine-style-A9[value='1'] ~ div .element-to-style-A9,
.element-to-determine-style-B9[value='1'] ~ div .element-to-style-B9,
.element-to-determine-style-C9[value='1'] ~ div .element-to-style-C9,
.element-to-determine-style-D9[value='1'] ~ div .element-to-style-D9,
.element-to-determine-style-E9[value='1'] ~ div .element-to-style-E9,
.element-to-determine-style-F9[value='1'] ~ div .element-to-style-F9,
.element-to-determine-style-A11[value='1'] ~ div .element-to-style-A11,
.element-to-determine-style-B11[value='1'] ~ div .element-to-style-B11,
.element-to-determine-style-C11[value='1'] ~ div .element-to-style-C11,
.element-to-determine-style-D11[value='1'] ~ div .element-to-style-D11,
.element-to-determine-style-E11[value='1'] ~ div .element-to-style-E11,
.element-to-determine-style-F11[value='1'] ~ div .element-to-style-F11 {
background-color: transparent;
color:white;
}
.element-to-determine-style-A2[value='1'] ~ div .element-to-style-A2,
.element-to-determine-style-B2[value='1'] ~ div .element-to-style-B2,
.element-to-determine-style-C2[value='1'] ~ div .element-to-style-C2,
.element-to-determine-style-D2[value='1'] ~ div .element-to-style-D2,
.element-to-determine-style-E2[value='1'] ~ div .element-to-style-E2,
.element-to-determine-style-F2[value='1'] ~ div .element-to-style-F2,
.element-to-determine-style-A4[value='1'] ~ div .element-to-style-A4,
.element-to-determine-style-B4[value='1'] ~ div .element-to-style-B4,
.element-to-determine-style-C4[value='1'] ~ div .element-to-style-C4,
.element-to-determine-style-D4[value='1'] ~ div .element-to-style-D4,
.element-to-determine-style-E4[value='1'] ~ div .element-to-style-E4,
.element-to-determine-style-F4[value='1'] ~ div .element-to-style-F4,
.element-to-determine-style-A6[value='1'] ~ div .element-to-style-A6,
.element-to-determine-style-B6[value='1'] ~ div .element-to-style-B6,
.element-to-determine-style-C6[value='1'] ~ div .element-to-style-C6,
.element-to-determine-style-D6[value='1'] ~ div .element-to-style-D6,
.element-to-determine-style-E6[value='1'] ~ div .element-to-style-E6,
.element-to-determine-style-F6[value='1'] ~ div .element-to-style-F6,
.element-to-determine-style-A8[value='1'] ~ div .element-to-style-A8,
.element-to-determine-style-B8[value='1'] ~ div .element-to-style-B8,
.element-to-determine-style-C8[value='1'] ~ div .element-to-style-C8,
.element-to-determine-style-D8[value='1'] ~ div .element-to-style-D8,
.element-to-determine-style-E8[value='1'] ~ div .element-to-style-E8,
.element-to-determine-style-F8[value='1'] ~ div .element-to-style-F8,
.element-to-determine-style-A10[value='1'] ~ div .element-to-style-A10,
.element-to-determine-style-B10[value='1'] ~ div .element-to-style-B10,
.element-to-determine-style-C10[value='1'] ~ div .element-to-style-C10,
.element-to-determine-style-D10[value='1'] ~ div .element-to-style-D10,
.element-to-determine-style-E10[value='1'] ~ div .element-to-style-E10,
.element-to-determine-style-F10[value='1'] ~ div .element-to-style-F10,
.element-to-determine-style-A12[value='1'] ~ div .element-to-style-A12,
.element-to-determine-style-B12[value='1'] ~ div .element-to-style-B12,
.element-to-determine-style-C12[value='1'] ~ div .element-to-style-C12,
.element-to-determine-style-D12[value='1'] ~ div .element-to-style-D12,
.element-to-determine-style-E12[value='1'] ~ div .element-to-style-E12,
.element-to-determine-style-F12[value='1'] ~ div .element-to-style-F12,
.element-to-determine-style-MuLian[value='1'] ~ div .element-to-style-MuLian,
.element-to-determine-style-MuoChie[value='1'] ~ div .element-to-style-MuoChie,
.element-to-determine-style-Soul[value='1'] ~ div .element-to-style-Soul {
background-color: transparent;
color:white;
}
.element-to-determine-style-A[value='1'] ~ div .element-to-style-A,
.element-to-determine-style-B[value='1'] ~ div .element-to-style-B,
.element-to-determine-style-C[value='1'] ~ div .element-to-style-C,
.element-to-determine-style-D[value='1'] ~ div .element-to-style-D,
.element-to-determine-style-E[value='1'] ~ div .element-to-style-E,
.element-to-determine-style-Z[value='1'] ~ div .element-to-style-Z{
background-color: black;
}
.spell-table .inner {background: #333333;}
.select-color[value="1"] ~ .spell-table .inner {background: #999999;}
.select-color[value="2"] ~ .spell-table .inner {background: #4492b0;}
.select-color[value="3"] ~ .spell-table .inner {background: #7d0c02;}
.select-color[value="4"] ~ .spell-table .inner {background: #b2a7d3;}
.select-color[value="5"] ~ .spell-table .inner {background: #8ab2fe;}
.select-color[value="6"] ~ .spell-table .inner {background: #5584e3;}
.select-color[value="7"] ~ .spell-table .inner {background: #203581;}
.select-color[value="8"] ~ .spell-table .inner {background: #1e1f54;}
.select-color[value="9"] ~ .spell-table .inner {background: #d8ad2b;}
.select-color[value="10"] ~ .spell-table .inner {background: #e3bf95;}
.select-color[value="11"] ~ .spell-table .inner {background: #897050;}
.select-color[value="12"] ~ .spell-table .inner {background: #473a2a;}
.select-color[value="13"] ~ .spell-table .inner {background: #9ece8b;}
.select-color[value="14"] ~ .spell-table .inner {background: #516948;}
.select-color[value="15"] ~ .spell-table .inner {background: #7fb550;}
.select-color[value="16"] ~ .spell-table .inner {background: #7f57a5;}
.select-color[value="17"] ~ .spell-table .inner {background: #ff869a;}
.color-item {text-align:center;margin:5px;}
.color-item label {width:30px;height:20px;margin-bottom:0px;}
.color-item input {}
.sheet-rolltemplate-Magic .blacklabel .big,
.sheet-rolltemplate-npc .big {display:block; font-size:12px; padding:0 0 5px; text-align:center; font-weight:normal; border-bottom:1px solid rgba(255,255,255,.3); margin-bottom:5px;}
.sheet-rolltemplate-npc .big {color: #3C2517;}
.sheet-rolltemplate-Magic .sheet-resright,
.sheet-rolltemplate-npc .sheet-resright {
display: block;
text-align:center;
border-top: 0px;
border-bottom: 0px;
background:#fff;
clear: both;
font-size: 1.3em;
text-transform: uppercase;
line-height: 1.0em;
padding: 10px;
}
/* -------------------------------------------------------------------------- */
button[type=roll].old-roll,
button[type=action].old-roll {
color: #BEBEBE;
background-color: #BEBEBE;
font-weight: bold;
text-align:center;
width: 20px;
height: 20px;
margin: 0.0 !important;
padding: 0.0em !important;
border: 1px solid black;
border-radius: 5px;
font-size: 13pt;
}
button[type=action].old-roll::before {
font-family: "dicefontd20";
content: "t";
}