.container { width: 750px; background-color: white; position: relative; } /* Configuration of Tabs */ input.tab-button { opacity: 0; position: absolute; top: 92px; right: 16px; width: 18px; height: 18px; z-index: 2; } input.tab-button + span { position: absolute; top: 92px; right: 16px; width: 17px; height: 17px; border: 1px solid black; border-radius: 5px; background-color: #E8E8E8; color: black; text-align: center; font-weight: bold; } input.tab-button:checked + span { color: #FFFFFF; background-color: #000000; } .page { display: none; } input.tab-button.tab1:checked ~ .page.tab1, input.tab-button.tab2:checked ~ .page.tab2, input.tab-button.tab3:checked ~ .page.tab3, input.tab-button.tab4:checked ~ .page.tab4, input.tab-button.tab5:checked ~ .page.tab5, input.tab-button.tab6:checked ~ .page.tab6, input.tab-button.tab7:checked ~ .page.tab7 { display: block; } button.floating-dice-roller { border: none; background: transparent; position: absolute; height: 24px; width: 24px; top: 90px; left: 258px; } button.floating-dice-roller[type=action]::before { font-size: 24px; } input.tab-button.tab1, input.tab-button.tab1 + span { right: 347px; width: 87px; } input.tab-button.tab2, input.tab-button.tab2 + span { right: 275px; width: 69px; } input.tab-button.tab3, input.tab-button.tab3 + span { right: 224px; width: 48px; } input.tab-button.tab4, input.tab-button.tab4 + span { right: 158px; width: 63px; } input.tab-button.tab5, input.tab-button.tab5 + span { right: 87px; width: 68px; } input.tab-button.tab6, input.tab-button.tab6 + span { right: 37px; width: 47px; } input.tab-button.tab-stunts2, input.tab-button.tab-stunts2 + span { left: 115px; width: 58px; display: none; } input.tab-button.tab-aim, input.tab-button.tab-aim + span { left: 84px; width: 28px; display: none; } input.tab-button.tab-whisper, input.tab-button.tab-whisper + span { left: 16px; width: 65px; display: none; } /* SHEET HEADER */ .header { height: 91px; } .header input, .header select { border-bottom: 1px solid #B0B0B0; border-top: 0px; border-left: 0px; border-right: 0px; background: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; -webkit-border-radius: 0px; border-radius: 0px; color: black; } .header input { padding: 0px; padding-bottom: 3px; } .header select { margin-bottom: 0px; padding-bottom: 0; } .header input[type=number] { text-align: center; margin-bottom: 0px; -moz-appearance:textfield; } .header input[type=number]::-webkit-inner-spin-button, .header input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .header span { display: block; font-size: 9px; line-height: 12px; } .name-container { width: 250px; display: inline-block; } .name-container input { font-size: 20px; width: 100%; } .header-info { width: 482px; margin-left: -2px; display: block; border: 3px double #666; padding: 5px; float: right; } .info-container { display: inline-block; margin-left: -4px; } .info-container:first-child { margin-left: 0px; } /* SHEET BODY */ .container .page .body { display: inline-block; width: 750px; margin-top: 18px; } .charsheet textarea { width: calc(100% - 8px); resize: vertical; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; -webkit-border-radius: 0px; border-radius: 0px; color: black; } .charsheet input { color: black; } .section { margin-bottom: 5px; display: inline-block; border: 1px solid black; border-radius: 0px; vertical-align: top; } .section-name { display: inline-block; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid black; height: 25px; width: 100%; border-radius: 0px; background-color: #000000; } .section-name span { display: inline-block; font-size: 12px; width: 100%; text-align: center; font-weight: bold; margin-top: 3px; color: #FFFFFF; } .section-name input[type=number] { display: inline-block; font-size: 12px; text-align: center; font-weight: bold; margin-top: 3px; color: #FFFFFF; } .repcontrol { min-height: 27px; } .repcontrol .btn { border: medium none; color: white !important; background: none; box-shadow: none; } .repcontrol .btn:focus { outline: 0; } .repcontrol .repcontrol_edit:after { content: '('; visibility: visible; font-family: pictos; background-color: #fff; border: none; border-radius: 0px; font-size: 12px; height: 12px; width: 12px; padding: 2px 4px 2px 4px; color: #000000; } .editmode ~ .repcontrol .repcontrol_edit:after { content: ')'; } .repcontrol .repcontrol_add:before { content: '&'; visibility: visible; font-family: pictos; background-color: #fff; border: none; border-radius: 0px; font-size: 12px; height: 12px; width: 12px; padding: 2px 4px 2px 4px; color: #000000; } .repcontrol .repcontrol_edit:hover:after, .repcontrol .repcontrol_add:hover:before { background-color: #EFEFEF; } .resources .repcontrol { margin-top: -10px; } .itemcontrol { z-index: 10; } .itemcontrol .repcontrol_del { font-size: 10px; margin-top: 3px; padding: 0px; height: 18px; width: 18px; } .itemcontrol .repcontrol_move { font-size: 10px; margin-top: 3px; padding: 0px; height: 18px; width: 18px; } .container button[type=action]::before { content: 'Q'; font-family: dicefontd6; color: #000000; } /* CHARACTER TAB */ /* Abilities table */ .col-left-character-tab { width: 340px; float: left; } .col-right-character-tab { width: 395px; float: left; } /* Abilities table */ .body .col-left-character-tab .abilities-table { } .col-left-character-tab .abilities-table .ability-container { border: 1px solid black; border-radius: 0px; margin-bottom: 5px; width: 319px; } .abilities-table .ability-container .left-ability-container { display: inline-block; width: 267px; border-right: 1px solid black; min-height: 70px; } .ability-name { width: 250px; display: inline-block; } .half-ability-name{ width: 123px; } button.legacy-money-import-button, .autoconfig button[type=action], .initiative-section button[type=action], .income-section button[type=action], .ability-name button[type=action] { background-color: transparent; color: white; border: none; font-size: 12px; background: none; background-image: none; text-shadow: none; box-shadow: none; padding-top: 3px; font-weight: bold; } .initiative-section .section-name { text-align: center; } .page .pictos { font-family: "pictos"; } /* .autoconfig button[type=action], .initiative-section button[type=action], .income-section button[type=action] { text-align: center; } */ .initiative-section button[type=action]::before, .income-section button[type=action]::before, .ability-name button[type=action]::before, .ability-focus-list button[type=action]::before, .spell-short-container button[type=action]::before, .autoconfig button[type=action]::before { content: ""; } .initiative-section button[type=action]:hover, .initiative-section button[type=action]:hover *, .income-section button[type=action]:hover, .income-section button[type=action]:hover *, .ability-name button[type=action]:hover, .ability-name button[type=action]:hover *, .ability-focus-list button[type=action]:hover, .ability-focus-list button[type=action]:hover *, .spell-short-container button[type=action]:hover, .spell-short-container button[type=action]:hover * { color: #EC2127; } .ability-name button[type=action] *, .ability-focus-list button[type=action] * { pointer-events: none; } .autoconfig { text-align: center; } .condition-checkbox, .primary-checkbox { display: inline-block; padding-bottom: 2px; } .condition-checkbox input[type="checkbox"], .primary-checkbox input[type="checkbox"], .list-toggle-container input[type="checkbox"] { opacity: 0; width: 14px; height: 14px; position: relative; left: 5px; margin: -10px; cursor: pointer; z-index: 1; } .condition-checkbox span { text-size: 7px; } .condition-checkbox input[type="checkbox"] + span::before, .primary-checkbox input[type="checkbox"] + span::before, .list-toggle-container input[type="checkbox"] + span::before { margin-right: 4px; border: 1px solid black; line-height: 12px; text-align: center; display: inline-block; vertical-align: middle; background: white; } .list-toggle-container input[type="checkbox"] + span::before { margin-right: 24px; } .condition-checkbox input[type="checkbox"] + span::before, .primary-checkbox input[type="checkbox"] + span::before, .list-toggle-container input[type="checkbox"] + span::before { content: ""; width: 12px; height: 12px; font-size: 10px; border-radius: 0px; font-weight: bold; } .condition-checkbox input[type="checkbox"]:checked + span::before, .primary-checkbox input[type="checkbox"]:checked + span::before, .list-toggle-container input[type="checkbox"]:checked + span::before { content: "✓"; color: black; } .abilities-table .ability-container .right-ability-container { float: right; } .abilities-table .ability-container .right-ability-container input[type=number]::-webkit-inner-spin-button, .abilities-table .ability-container .right-ability-container input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .abilities-table .ability-container .right-ability-container input[type=number] { -moz-appearance:textfield; } .abilities-table .ability-container .right-ability-container input[type=number] { text-align: center; font-size: 35px; width: 50px; border: none; background: none; box-shadow: none; border-radius: 0px; color: black; margin-top: 24%; margin-bottom: 15%; } .right-50wide input[type=number] { width: 50px; } .right-50wide2 input[type=number] { width: 50px; } .right-50wide3 input[type=number] { width: 50px; } .right-50wide4 input[type=number] { width: 50px; } .right-50wide5 input[type=number] { width: 50px; } .ability-focus-list { width: 100%; min-height: 44px; background: #f5f5f5; } .ability-focus-list button[type=action] { display: inline-block; border: none; background: none; box-shadow: none; font-size: 12px; padding-right: 0px; margin: 0px; } .ability-focus-list .repitem { display: inline-block; padding: 0px; margin: 0px; } .ability-focus-list .repitem:last-child .focus-comma, .ability-focus-list .repcontrol { display:none; } /* Right column */ .sectionfourth { width: calc(25% - 5px); height: 92px; } .sectiontwofourths { width: calc(50% - 3.79px); height: 92px; } .sectionthreefourths { width: calc(75% - 4px); height: 125px; } .sectiononethird { width: calc(33.3% - 3.79px); /* height: 92px; */ float: left; } .conditions { width: 100%; text-align: center; } .condition-list .sectiononethird div { width: 100%; padding-left: 1.0em; } .conditions-section, .conviction-section, .corruption-section, .equipment-section, .experience-points-section, .fatigue-section, .fear-section, .horror-section, .income-section, .initiative-section, .initiative-focus, .mana-section, .money-section, .power-short-container, .talent-short-container, .spell-short-divtohide { display: none; } .fear-section select, .horror-section select, .fatigue-section select { display: inline-block; font-size: 9px; line-height: 9px; width: 100%; color: #A0A0A0; text-align: center; background: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; -webkit-border-radius: 0px; border: none; color: black; padding: none; } .income-section input[name="attr_income"], .health input[name="attr_health"], .fear-section input, .horror-section input, .fatigue-section input, .initiative-section input[name="attr_init"], .conviction-section input[name="attr_conviction"], .corruption-section input { display: inline-block; width: 100%; text-align: center; border: none; background: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; -webkit-border-radius: 0px; border-radius: 0px; color: black; font-size: 30px; padding-right: 0px; padding-left: 19px; padding-bottom: 0px; padding-top: 7px; } .fear-section input, .horror-section input, .fatigue-section input { padding-left: 10px; } .health .maximum-input span { height: 50px; display: inline-block; font-size: 10px; line-height: 9px; text-align: right; margin-left: 20px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; color: #A0A0A0; } .conviction-section .maximum-input span { height: 50px; display: inline-block; font-size: 10px; line-height: 9px; text-align: right; margin-left: 25px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; color: #A0A0A0; } .health input[name="attr_health"], .mana-section input[name="attr_mana"], .experience-points-section input[name="attr_experience-points"] { display: inline-block; width: 100%; text-align: center; border: none; background: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; -webkit-border-radius: 0px; border-radius: 0px; color: black; font-size: 30px; padding-right: 0px; padding-left: 19px; padding-bottom: 0px; padding-top: 7px; } .maximum-input span { height: 50px; display: inline-block; font-size: 10px; line-height: 9px; text-align: right; margin-left: 20px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; color: #A0A0A0; } .maximum-input input { display: inline-block; border-bottom: 1px solid #B0B0B0; border-top: 0px; border-left: 0px; border-right: 0px; background: none; box-shadow: none; -webkit-appearance: none; -webkit-border-radius: 0px; border-radius: 0px; color: #A0A0A0; width: 30px; font-size: 12px; line-height: 9px; text-align: center; } .maximum-input input[type=number]::-webkit-inner-spin-button, .maximum-input input[type=number]::-webkit-outer-spin-button, .experience-points-section input[type=number]::-webkit-inner-spin-button, .experience-points-section input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .experience-points-section .maximum-input span { margin-left: 62px; } .experience-points-section .maximum-input input { width: 55px; } .health .maximum-input input[type=number], .mana-section .maximum-input input[type=number], .experience-points-section input[type=number] { -moz-appearance:textfield; } .experience-points-section input[name="attr_experience-points"] { padding-right: 20px; } .sectionfull { width: 419px; } /* ------------------- sdaat ------------- */ input.mana-section-checkbox:not(:checked) + input.exp-section-checkbox:not(:checked) + input.fatigue-section-checkbox:not(:checked) + input.conviction-section-checkbox:not(:checked) + input.corruption-section-checkbox:not(:checked) ~ .page .sdaat-container .maximum-input span { margin-left: 0; } .sdaat-container .sdaat-i, .sdaat-container .sdaat-b { position: absolute; top: 36px; font-size: 20px; font-family: serif; text-transform: uppercase; color: #A0A0A0; } .sdaat-container .sdaat-i { right: 92px; } .sdaat-container .sdaat-b { right: 6px; } .sdaat-container select { height: 20px; display: inline-block; background: transparent; border: none; font-size: 10px; line-height: 9px; margin-left: 0; margin-right: 0; margin-top: 0; margin-right: 0; color: #A0A0A0; text-align: center; width: 75px; } .sdaat-container .col-double { display: inline-block; width: 39%; } .sdaat-container { text-align: center; height: 92px; position: relative; } .sdaat-container .col { width: 19%; float: left; } .income-container .income-score, .sdaat-container .sdaat-score { width: 100px; height: 30px; display: inline-block; border: 1px solid #666; border-radius: 50%; width: 35px; height: 35px; background-color: white; margin-top: 5px; margin-right: 0; margin-bottom: 0; } .income-container .income-score input, .sdaat-container .sdaat-score input { width: 100%; text-align: left; font-size: 20px; border: none; background: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; -webkit-border-radius: 0px; border-radius: 0px; color: black; margin-top: 2px; margin-left: 2px; } .sdaat-container .sdaat-score input[name="attr_armor"], .sdaat-container .sdaat-score input[name="attr_toughness"], .sdaat-container .sdaat-score input[name="attr_armor-b"] { margin-left: 7.5px; } .sdaat-container .col .maximum-input span { margin-left: 0; height: 24px; } .sdaat-container .col .maximum-input input { width: 35px; margin-left: 0; margin-top: -1px; height: 24px; } .sdaat-container .sdaat-score input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .sdaat-container .sdaat-score input[type=number] { -moz-appearance:textfield; } /* ------------------- sdaat ------------- */ .speed-defense-armor-container { height: 92px; } .speed-defense-armor-container .col { width: 32.5%; float: left; } .speed-defense-score { width: 100px; height: 30px; display: inline-block; border: 1px solid #666; border-radius: 50%; width: 35px; height: 35px; background-color: white; margin-top: 5px; margin-left: 50px;/*33px;*/ margin-right: 0px; margin-bottom: 0px; } .speed-defense-score input { width: 100%; text-align: left; font-size: 20px; border: none; background: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; -webkit-border-radius: 0px; border-radius: 0px; color: black; margin-top: 2px; margin-left: 2px; } .speed-defense-score input[name="attr_armor"] { margin-left: 7.5px; } .speed-defense-armor-container .maximum-input span { margin-left: 37px;/*22px;*/ } .speed-defense-armor-container .maximum-input input { width: 35px; margin-top: -1px; } .speed-defense-score input[type=number]::-webkit-inner-spin-button, .speed-defense-score input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .speed-defense-score input[type=number] { -moz-appearance:textfield; } .sectionfull .repitem { border-bottom: 1px solid #B0B0B0; } .section-name .repeatingcol { float: left; } .repeatingcol input, .talent-name, .col-weapon-groups input { display: inline-block; font-size: 12px; border:none; background: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; -webkit-border-radius: 0px; border-radius: 0px; color: black; text-align: center; width: 100%; margin-bottom: 0px; } .col-attack-name input, .col-attack-range input, .col-attack-reload input, .col-ammo input[type=number], .equipment-name input, .equipment-quantity input, .equipment-description input, .power-short-name input, .power-short-description input { width: 100%; } .col-attack-name { width: 158px; float: left; } .col-attack-range, .col-attack-reload, .col-attackdice { width: 55px; float: left; } .attack-container .col-ammo, .col-income-num { width: 30px; float: left; display: none; } .col-ammo input[type=number]::-webkit-inner-spin-button, .col-ammo input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .money-score input[type=number] { -moz-appearance:textfield; } .col-attackdice input { width: 38px; margin-left: 5px; } .col-attack-damage { width: 80px; } .repitem .col-attack-damage { margin-left: 323px; } .col-attack-damage input { width: 58px; margin-left: 6px; } .repeatingcol button[type=action], .focus-container button[type=action] { border: none; background: none; box-shadow: none; text-align: center; font-size: 18px; width: 10px; padding: 0px; margin-left: -2px; margin-right: 0px; } .equipment-name { width: 150px; float: left; } .equipment-quantity { width: 75px; float: left; } .equipment-description { width: 186px; } .repitem .equipment-description { margin-left: 225px; } .col-weapon-groups { border-top: 1px solid black; } .col-weapon-groups input { width: 100%; border-bottom: none; } .power-short-description textarea, .spell-short-description textarea, .row-spell-short-description textarea, .equipment-description textarea { display: inline-block; min-height: 36px; height: 18px; resize: vertical; border: none; margin: 0px; padding-bottom: 0px; margin-bottom: 1px; } .equipment-description textarea { min-height: 22px; height: 22px } .power-short-name, .talent-name { width: 150px; float: left; } .power-short-name input[type=text] { margin-top: 7px; } .power-short-description { width: 265px; } .repitem .power-short-description { margin-left: 150px; } .power-short-container .repcontrol, .talent-short-container .repcontrol, .spell-short-container .repcontrol { display: none; } .spell-short-name { width: 150px; float: left; margin-left: 0px; } .spell-short-description { width: 265px; margin-bottom: 1px; } .repitem .spell-short-description { margin-left: 150px; } .spell-short-container button[type=action] { width: 100%; display: inline-block; border: none; background: none; box-shadow: none; font-size: 12px; padding-right: 0px; margin-top: 11px; color: black; } .power-short-container textarea, .talent-short-container textarea, .spell-short-container textarea { background-color:#FFF !important; margin-bottom: 0; } .money-section { width: 100%; border-top: 1px solid black; } .money-container { display: inline-block; height: 68px; width: 50px; } .legacy-money-section .money-score, .money-section .money-score { display: inline-block; border: 1px solid #666; border-radius: 50%; width: 45px; height: 45px; background-color: white; margin-top: 2px; margin-left: 0px; margin-right: 2px; margin-bottom: 2px; float: right; } .page .autoconfig.section-name, .legacy-money-section .section-name { text-align: right; } .legacy-money-section .money-score input[type="number"], .money-section .money-score input[type="text"] { width: 100%; text-align: center; font-size: 20px; border: none; background: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; -webkit-border-radius: 0px; border-radius: 0px; color: black; margin-top: 6px; } .money-section .money-name input[type="text"] { width: 100%; font-size: 12px; color: gray; border: none; text-align: center; box-shadow: none; height: 16px; } .money-section fieldset + div { text-align: right; } .money-section fieldset + div > div { display: inline-block; } .money-score input[type=number]::-webkit-inner-spin-button, .money-score input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .money-score input[type=number] { -moz-appearance:textfield; } .legacy-money-section { display: none; } input.legacy-money-checkbox:checked ~ .page .legacy-money-section { display: block; } .income-section { height: 92px; text-align: center; width: 100px; } .ability-name button[type=roll] *, /* PERSONA TAB */ .persona-section { width: 100% } .left-persona { width: 249px; float: left; margin-right: 5px; } .right-persona { width: 495px; float: left; } .personalock:not([value="unlocked"]) ~ div.col > div.persona-section > div.personaunlocked, .personalock[value="unlocked"] ~ div.col > div.persona-section > div.personalocked {display: none;} .textbox textarea { border: none; margin: 0px; padding-bottom: 0px; min-height: 48px; height: 48px; line-height: 20px; } /* CLASS POWERS & TALENTS TABS */ .power-container, .talent-container { width: 748px; } .power-section-name, .spell-section-name { border: 1px solid black; } .persona-section-name input[type=text], .power-section-name input[type=text], .talent-section-name input[type=text], .spell-section-name input[type=text] { display: inline-block; font-size: 14px; width: 100%; text-align: center; font-weight: bold; margin-top: 3px; border: none; background: none; box-shadow: none; padding: 0px; color: #FFFFFF; } .power-stats .col, .talent-stats .col1 { width: 372px; } .power-stats span, .talent-stats span { display: inline-block; font-size: 12px; font-weight: bold; } .row-power-type-source{ margin-bottom: 4px; } .row-power-type-source .col, .row-talent-degree-source .col, .row-fullpowerdescription .col{ float: left; margin-right: 4px; } .power-container .power-stats input[type=text], .talent-container .talent-stats input[type=text], .focus-container input[type=text], .focusnamespan { display: inline-block; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #B0B0B0; background: none; box-shadow: none; border-radius: 0px; display: inline-block; text-align: left; font-size: 12px; padding: 0px; margin: 0px; } /* .spell-container .row-shortpowerdescription textarea, .spell-container .row-fullpowerdescription textarea, .spell-container .row-short-spell-description textarea, .spell-container .row-full-spell-description textarea { display: inline-block; width: 658px; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #B0B0B0; padding: 0px; margin-bottom: 0; } */ .row-shortpowerdescription textarea, .row-talentdescription textarea, .row-short-spell-description textarea { height: 36px; } .row-fullpowerdescription textarea, .row-full-spell-description textarea { height: 72px; } .degree-select[value="1"] ~ div.row > div.col > .degree2, .degree-select[value="1"] ~ div.row > div.col > .degree3, .degree-select[value="2"] ~ div.row > div.col > .degree3, .degree-select[value="1"] ~ div.row > div.aftermastery > div.col > .degree4, .degree-select[value="2"] ~ div.row > div.aftermastery > div.col > .degree4, .degree-select[value="3"] ~ div.row > div.aftermastery > div.col > .degree4, .degree-select:not([value="5"]) ~ div.row > div.aftermastery > div.col > .degree5 {color: lightgrey;} .degree-select[value="1"] ~ div.degree2, .degree-select[value="1"] ~ div.degree3, .degree-select[value="2"] ~ div.degree3, .degree-select[value="1"] ~ div.degree4, .degree-select[value="2"] ~ div.degree4, .degree-select[value="3"] ~ div.degree4, .degree-select:not([value="5"]) ~ div.degree5 {display: none;} input.degreecheckbox:not(:checked) ~ div.row > div.col > div.mod-selected > .aftermastery, input.degreecheckbox:not(:checked) ~ div.row > .aftermastery, input.degreecheckbox:checked ~ div.row > div.col > div.mod-selected > .justthree {display: none;} /* FOCUSES TAB */ .tab5 .col { width: 247px; float: left; margin-right: 3px; } .focus-section { display:inline-block; width: 100%; } .focus-section-name { border: 1px solid black; width: 100%; } .focus-container span { display: inline-block; font-size: 12px; font-weight: bold; } .focus-container .row span, .focus-container textarea { margin-left: 16px; } .focus-container input[name=attr_focusname], .focusnamespan { width: 158px; } .focus-container input[type=number]::-webkit-inner-spin-button, .focus-container input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .focus-section .focus-container input[type=number] { border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #B0B0B0; background: none; box-shadow: none; border-radius: 0px; display: inline-block; text-align: center; font-size: 12px; padding: 0px; width: 15px; -moz-appearance:textfield; } .focus-container textarea { display: inline-block; width: 247px; height: 36px; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #B0B0B0; padding: 0px; } /* MAGIC/ARCANA TAB */ .spell-container { width: 748px; } select.spell-method { width: 100px; position: absolute; left: 2px; top: 2px; height: 20px; background-color: transparent; color: white; padding: 0; border: none; } select.spell-method option { background-color: white; color: black; } .spell-section-name { position: relative; } .spell-container input.spell-method-uses-fatigue:checked ~ .spell-stats .spell-uses-points, .spell-container input.spell-method-uses-points:checked ~ .spell-stats .spell-uses-fatigue { display: none; } .spell-container input.spell-method-uses-fatigue:checked ~ .spell-stats .spell-uses-fatigue, .spell-container input.spell-method-uses-points:checked ~ .spell-stats .spell-uses-points { display: inline-block; } .spell-short-container input.spell-method-uses-fatigue:checked ~ .spell-short-name .spell-uses-points, .spell-short-container input.spell-method-uses-points:checked ~ .spell-short-name .spell-uses-fatigue { display: none; } .spell-short-container input.spell-method-uses-fatigue:checked ~ .spell-short-name .spell-uses-fatigue, .spell-short-container input.spell-method-uses-points:checked ~ .spell-short-name .spell-uses-points { display: inline-block; } .spell-container .spell-uses-fatigue input[type=text] { width: 132px; } .spell-container .spell-stats { width: 789px; } .spell-container .spell-stats .col-spell-stats { width: 263px; float: left; } .spell-container .spell-stats .col-spell-stats .col { float: left; } .spell-container .spell-stats .col-spell-stats .row { height: 20px; } .spell-container .spell-stats span, .spell-container .spell-descriptions span { font-size: 12px; font-weight: bold; margin: 0px; margin-right: 40px; } .spell-container .spell-stats input { width: 148px; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #B0B0B0; background: none; box-shadow: none; border-radius: 0px; display: inline-block; text-align: left; font-size: 12px; padding: 0px; margin-bottom: 2px; } .spell-container .spell-stats input[type=number] { -moz-appearance:textfield; width: 148px; } .spell-stats input[type=number]::-webkit-inner-spin-button, .spell-stats input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .spell-stats button[type=action] { display: inline-block; border: none; background: none; box-shadow: none; font-size: 18px; padding: 0px; margin: 0px; color: black; } .spell-stats select { display: inline-block; width: 148px; border-bottom: 1px solid #B0B0B0; border-top: 0px; border-left: 0px; border-right: 0px; margin-top: -9px; background: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; -webkit-border-radius: 0px; border-radius: 0px; color: black; } /* OPTIONS TAB */ .gamelock[value="custom"] ~ .page .gamelocked, .gamelock:not([value="custom"]) ~ .page .gameunlocked {display: none;} .page.tab7 select[name="attr_armor-penalty-for-dex"], .page.tab7 select[name="attr_initiative-tiebreaker"] { width: 50px; } input[type=checkbox].hiddencheckbox { display:none } /* Some Settings have differnt tab labels */ .powers-tab-span, .origin-tab-span, .extraordinary-tab-span, .arcana-tab-span { display: none; } input.modern-age-button:checked ~ .class-tab-span, input.threefold-button:checked ~ .class-tab-span, input.world-of-lazarus-button:checked ~ .class-tab-span, input.the-expanse-button:checked ~ .class-tab-span, input.threefold-button:checked ~ .magic-tab-span, input.world-of-lazarus-button:checked ~ .magic-tab-span, input.the-expanse-button:checked ~ .magic-tab-span, input.modern-age-button:checked ~ .magic-tab-span, input.blue-rose-button:checked ~ .magic-tab-span { display: none; } /* Blue Rose Tabs */ input.blue-rose-button:checked ~ input.tab-button.tab1, input.blue-rose-button:checked ~ input.tab-button.tab1 + span { right: 359px; width: 87px; } input.blue-rose-button:checked ~ input.tab-button.tab2, input.blue-rose-button:checked ~ input.tab-button.tab2 + span { right: 287px; width: 69px; } input.blue-rose-button:checked ~ input.tab-button.tab3, input.blue-rose-button:checked ~ input.tab-button.tab3 + span { right: 236px; width: 48px; } input.blue-rose-button:checked ~ input.tab-button.tab4, input.blue-rose-button:checked ~ input.tab-button.tab4 + span { right: 170px; width: 63px; } input.blue-rose-button:checked ~ input.tab-button.tab5, input.blue-rose-button:checked ~ input.tab-button.tab5 + span { right: 101px; width: 66px; } input.blue-rose-button:checked ~ .arcana-tab-span, input.blue-rose-button:checked ~ .tab-button.tab6 { display: block; position: absolute; top: 92px; right: 36px; width: 62px; height: 17px; border: 1px solid black; border-radius: 5px; background-color: #E8E8E8; color: black; text-align: center; font-weight: bold; } input.tab-button.tab6:checked ~ .arcana-tab-span { color: #FFFFFF; } /* The Expanse Tabs */ input.the-expanse-button:checked ~ input.tab-button.tab1, input.the-expanse-button:checked ~ input.tab-button.tab1 + span { right: 305px; width: 89px; } input.the-expanse-button:checked ~ input.tab-button.tab2, input.the-expanse-button:checked ~ input.tab-button.tab2 + span { right: 231px; width: 71px; } input.the-expanse-button:checked ~ .origin-tab-span, input.the-expanse-button:checked ~ input.tab-button.tab3 { display: block; position: absolute; top: 92px; right: 176px; width: 52px; height: 17px; border: 1px solid black; border-radius: 5px; background-color: #E8E8E8; color: black; text-align: center; font-weight: bold; } input.tab-button.tab3:checked ~ .origin-tab-span { color: #FFFFFF; } input.the-expanse-button:checked ~ input.tab-button.tab4, input.the-expanse-button:checked ~ input.tab-button.tab4 + span { right: 108px; width: 65px; } input.the-expanse-button:checked ~ input.tab-button.tab5, input.the-expanse-button:checked ~ input.tab-button.tab5 + span { right: 37px; width: 68px; } input.the-expanse-button:checked ~ input.tab-button.tab6 { display: none; } input.tab-button.tab6:checked ~ .arcana-tab-span { color: #FFFFFF; } /* Modern AGE Tabs */ input.threefold-button:checked ~ input.tab-button.tab1, input.world-of-lazarus-button:checked ~ input.tab-button.tab1, input.modern-age-button:checked ~ input.tab-button.tab1, input.threefold-button:checked ~ input.tab-button.tab1 + span, input.world-of-lazarus-button:checked ~ input.tab-button.tab1 + span, input.modern-age-button:checked ~ input.tab-button.tab1 + span { right: 406px; width: 84px; } input.threefold-button:checked ~ input.tab-button.tab2, input.world-of-lazarus-button:checked ~ input.tab-button.tab2, input.modern-age-button:checked ~ input.tab-button.tab2, input.threefold-button:checked ~ input.tab-button.tab2 + span, input.world-of-lazarus-button:checked ~ input.tab-button.tab2 + span, input.modern-age-button:checked ~ input.tab-button.tab2 + span { right: 337px; width: 66px; } input.threefold-button:checked ~ .powers-tab-span, input.world-of-lazarus-button:checked ~ .powers-tab-span, input.modern-age-button:checked ~ .powers-tab-span, input.threefold-button:checked ~ input.tab-button.tab3, input.world-of-lazarus-button:checked ~ input.tab-button.tab3, input.modern-age-button:checked ~ input.tab-button.tab3 { display: block; position: absolute; top: 92px; right: 274px; width: 60px; height: 17px; border: 1px solid black; border-radius: 5px; background-color: #E8E8E8; color: black; text-align: center; font-weight: bold; } input.tab-button.tab3:checked ~ .powers-tab-span { color: #FFFFFF; } input.threefold-button:checked ~ input.tab-button.tab4, input.world-of-lazarus-button:checked ~ input.tab-button.tab4, input.modern-age-button:checked ~ input.tab-button.tab4, input.threefold-button:checked ~ input.tab-button.tab4 + span, input.world-of-lazarus-button:checked ~ input.tab-button.tab4 + span, input.modern-age-button:checked ~ input.tab-button.tab4 + span { right: 211px; width: 60px; } input.threefold-button:checked ~ input.tab-button.tab5, input.world-of-lazarus-button:checked ~ input.tab-button.tab5, input.modern-age-button:checked ~ input.tab-button.tab5, input.threefold-button:checked ~ input.tab-button.tab5 + span, input.world-of-lazarus-button:checked ~ input.tab-button.tab5 + span, input.modern-age-button:checked ~ input.tab-button.tab5 + span { right: 144px; width: 64px; } input.threefold-button:checked ~ .extraordinary-tab-span, input.modern-age-button:checked ~ .extraordinary-tab-span, input.threefold-button:checked ~ .tab-button.tab6, input.world-of-lazarus-button:checked ~ .tab-button.tab6, input.modern-age-button:checked ~ .tab-button.tab6 { display: block; position: absolute; top: 92px; right: 36px; width: 105px; height: 17px; border: 1px solid black; border-radius: 5px; background-color: #E8E8E8; color: black; text-align: center; font-size: 12px; font-weight: bold; } input.tab-button.tab6:checked ~ .extraordinary-tab-span { color: #FFFFFF; } .dragon-age-selected, .fantasy-age-selected, .fantasy-age-core-selected, .titansgrave-selected, .blue-rose-selected, .old-age-selected, .second-gen-selected, .modern-age-selected, .threefold-selected, .world-of-lazarus-selected, .the-expanse-selected { display:none; } input.black-color-checkbox:checked ~ .tab-button:checked + span + span + span, input.black-color-checkbox:checked ~ .tab-button:checked + span + span { background-color: #000000; } .sheet-rolltemplate-age-roller .sheet-age-roller-title.sheet-age-roller-color-red, input.red-color-checkbox:checked ~ .tab-button:checked + span, input.red-color-checkbox:checked ~ .tab-button:checked + span + span, input.red-color-checkbox:checked ~ .tab-button:checked + span + span + span, input.red-color-checkbox:checked ~ .page .section-name { background-color: #810206; } .sheet-rolltemplate-age-roller .sheet-age-roller-title.sheet-age-roller-color-teal1, input.teal1-color-checkbox:checked ~ .tab-button:checked + span, input.teal1-color-checkbox:checked ~ .tab-button:checked + span + span, input.teal1-color-checkbox:checked ~ .tab-button:checked + span + span + span, input.teal1-color-checkbox:checked ~ .page .section-name { background-color: #00576B; } .sheet-rolltemplate-age-roller .sheet-age-roller-title.sheet-age-roller-color-teal2, input.teal2-color-checkbox:checked ~ .tab-button:checked + span, input.teal2-color-checkbox:checked ~ .tab-button:checked + span + span, input.teal2-color-checkbox:checked ~ .tab-button:checked + span + span + span, input.teal2-color-checkbox:checked ~ .page .section-name { background-color: #1f7b92; } .sheet-rolltemplate-age-roller .sheet-age-roller-title.sheet-age-roller-color-blue1, input.blue1-color-checkbox:checked ~ .tab-button:checked + span, input.blue1-color-checkbox:checked ~ .tab-button:checked + span + span, input.blue1-color-checkbox:checked ~ .tab-button:checked + span + span + span, input.blue1-color-checkbox:checked ~ .page .section-name { background-color: #007ab8; } .sheet-rolltemplate-age-roller .sheet-age-roller-title.sheet-age-roller-color-blue2, input.blue2-color-checkbox:checked ~ .tab-button:checked + span, input.blue2-color-checkbox:checked ~ .tab-button:checked + span + span, input.blue2-color-checkbox:checked ~ .tab-button:checked + span + span + span, input.blue2-color-checkbox:checked ~ .page .section-name { background-color: #006496; } .sheet-rolltemplate-age-roller .sheet-age-roller-title.sheet-age-roller-color-orange, input.orange-color-checkbox:checked ~ .tab-button:checked + span, input.orange-color-checkbox:checked ~ .tab-button:checked + span + span, input.orange-color-checkbox:checked ~ .tab-button:checked + span + span + span, input.orange-color-checkbox:checked ~ .page .section-name { background-image: radial-gradient(ellipse at top, #bc610e, #431c00); } .sheet-rolltemplate-age-roller .sheet-age-roller-title.sheet-age-roller-color-threefold, input.threefold-color-checkbox:checked ~ .tab-button:checked + span, input.threefold-color-checkbox:checked ~ .tab-button:checked + span + span, input.threefold-color-checkbox:checked ~ .tab-button:checked + span + span + span, input.threefold-color-checkbox:checked ~ .page .section-name { background-image: linear-gradient(135deg, #00658D, #2A828E, #87641B, #c79846, #851c07); } .sheet-rolltemplate-age-roller .sheet-age-roller-title.sheet-age-roller-color-rainbow, input.rainbow-color-checkbox:checked ~ .tab-button:checked + span, input.rainbow-color-checkbox:checked ~ .tab-button:checked + span + span, input.rainbow-color-checkbox:checked ~ .tab-button:checked + span + span + span, input.rainbow-color-checkbox:checked ~ .page .section-name { background-image: radial-gradient(circle at bottom left, mediumvioletred, firebrick, darkorange, darkkhaki, forestgreen, blue, darkviolet); } .sheet-rolltemplate-age-roller .sheet-age-roller-title.sheet-age-roller-color-green, input.green-color-checkbox:checked ~ .tab-button:checked + span, input.green-color-checkbox:checked ~ .tab-button:checked + span + span, input.green-color-checkbox:checked ~ .tab-button:checked + span + span + span, input.green-color-checkbox:checked ~ .page .section-name { background-image: radial-gradient(circle at center, #1d8514, #1d8514, black); } /* dragonscale texture from https://www.myfreetextures.com/four-dragon-scale-background-textures/ */ .sheet-rolltemplate-age-roller .sheet-age-roller-title.sheet-age-roller-color-dragon, input.dragon-color-checkbox:checked ~ .tab-button:checked + span, input.dragon-color-checkbox:checked ~ .tab-button:checked + span + span, input.dragon-color-checkbox:checked ~ .tab-button:checked + span + span + span, input.dragon-color-checkbox:checked ~ .page .section-name { background-image: url("https://i.imgur.com/ZiUOVSE.jpg"); } .sheet-rolltemplate-age-roller .sheet-age-roller-title.sheet-age-roller-color-lazarus, input.lazarus-color-checkbox:checked ~ .tab-button:checked + span, input.lazarus-color-checkbox:checked ~ .tab-button:checked + span + span, input.lazarus-color-checkbox:checked ~ .tab-button:checked + span + span + span, input.lazarus-color-checkbox:checked ~ .page .section-name { background-image: radial-gradient(circle at center, #3A8BCC, #124179); } .sheet-rolltemplate-age-roller .sheet-age-roller-title.sheet-age-roller-color-stars, input.stars-color-checkbox:checked ~ .tab-button:checked + span, input.stars-color-checkbox:checked ~ .tab-button:checked + span + span, input.stars-color-checkbox:checked ~ .tab-button:checked + span + span + span, input.stars-color-checkbox:checked ~ .page .section-name { background-image: url("http://i.imgur.com/Xsnnevo.png"); } input.stars-color-checkbox:checked ~ .tab5 .ability-strength .section-name, input.stars-color-checkbox:checked ~ .tab5 .ability-intelligence .section-name, input.stars-color-checkbox:checked ~ .tab5 .ability-accuracy .section-name, input.stars-color-checkbox:checked ~ .tab1 .ability-strength .section-name, input.stars-color-checkbox:checked ~ .tab1 .ability-fighting .section-name, input.stars-color-checkbox:checked ~ .tab1 .ability-communication .section-name, input.stars-color-checkbox:checked ~ .page .section:nth-child(odd) .section-name { background-image: url("http://i.imgur.com/CEij2yw.png"); } input.stars-color-checkbox:checked ~ .tab5 .ability-willpower .section-name, input.stars-color-checkbox:checked ~ .tab5 .ability-dexterity .section-name, input.stars-color-checkbox:checked ~ .tab5 .ability-communication .section-name, input.stars-color-checkbox:checked ~ .tab1 .ability-constitution .section-name, input.stars-color-checkbox:checked ~ .tab1 .ability-intelligence .section-name, input.stars-color-checkbox:checked ~ .tab1 .ability-willpower .section-name { background-image: url("https://i.imgur.com/aRp1Jdz.png"); } .sheet-rolltemplate-age-roller .sheet-die-face-drama.sheet-color-red, input.red-color-checkbox:checked ~ .page .repcontrol .repcontrol_edit:after, input.red-color-checkbox:checked ~ .page .repcontrol .repcontrol_add:before, input.red-color-checkbox:checked ~ button[type=action].floating-dice-roller::before, input.red-color-checkbox:checked ~ .page .attack-container button[type=action]::before, input.red-color-checkbox:checked ~ .page .spell-short-container button[type=action]::before, input.red-color-checkbox:checked ~ .page .focus-container button[type=action]::before, input.red-color-checkbox:checked ~ .page .spell-container button[type=action]::before, input.red-color-checkbox:checked ~ .page .income-section button[type=action]::before { color: #810206; } .sheet-rolltemplate-age-roller .sheet-die-face-drama.sheet-color-teal1, input.teal1-color-checkbox:checked ~ .page .repcontrol .repcontrol_edit:after, input.teal1-color-checkbox:checked ~ .page .repcontrol .repcontrol_add:before, input.teal1-color-checkbox:checked ~ button[type=action].floating-dice-roller::before, input.teal1-color-checkbox:checked ~ .page .attack-container button[type=action]::before, input.teal1-color-checkbox:checked ~ .page .spell-short-container button[type=action]::before, input.teal1-color-checkbox:checked ~ .page .focus-container button[type=action]::before, input.teal1-color-checkbox:checked ~ .page .spell-container button[type=action]::before { color: #00576B; } .sheet-rolltemplate-age-roller .sheet-die-face-drama.sheet-color-teal2, input.teal2-color-checkbox:checked ~ .page .repcontrol .repcontrol_edit:after, input.teal2-color-checkbox:checked ~ .page .repcontrol .repcontrol_add:before, input.teal2-color-checkbox:checked ~ button[type=action].floating-dice-roller::before, input.teal2-color-checkbox:checked ~ .page .attack-container button[type=action]::before, input.teal2-color-checkbox:checked ~ .page .spell-short-container button[type=action]::before, input.teal2-color-checkbox:checked ~ .page .focus-container button[type=action]::before, input.teal2-color-checkbox:checked ~ .page .spell-container button[type=action]::before { color: #1f7b92; } .sheet-rolltemplate-age-roller .sheet-die-face-drama.sheet-color-blue1, input.blue1-color-checkbox:checked ~ .page .repcontrol .repcontrol_edit:after, input.blue1-color-checkbox:checked ~ .page .repcontrol .repcontrol_add:before, input.blue1-color-checkbox:checked ~ button[type=action].floating-dice-roller::before, input.blue1-color-checkbox:checked ~ .page .attack-container button[type=action]::before, input.blue1-color-checkbox:checked ~ .page .spell-short-container button[type=action]::before, input.blue1-color-checkbox:checked ~ .page .focus-container button[type=action]::before, input.blue1-color-checkbox:checked ~ .page .spell-container button[type=action]::before { color: #007ab8; } .sheet-rolltemplate-age-roller .sheet-die-face-drama.sheet-color-blue2, input.blue2-color-checkbox:checked ~ .page .repcontrol .repcontrol_edit:after, input.blue2-color-checkbox:checked ~ .page .repcontrol .repcontrol_add:before, input.blue2-color-checkbox:checked ~ button[type=action].floating-dice-roller::before, input.blue2-color-checkbox:checked ~ .page .attack-container button[type=action]::before, input.blue2-color-checkbox:checked ~ .page .spell-short-container button[type=action]::before, input.blue2-color-checkbox:checked ~ .page .focus-container button[type=action]::before, input.blue2-color-checkbox:checked ~ .page .spell-container button[type=action]::before { color: #006496; } .sheet-rolltemplate-age-roller .sheet-die-face-drama.sheet-color-orange, input.orange-color-checkbox:checked ~ .page .repcontrol .repcontrol_edit:after, input.orange-color-checkbox:checked ~ .page .repcontrol .repcontrol_add:before, input.orange-color-checkbox:checked ~ button[type=action].floating-dice-roller::before, input.orange-color-checkbox:checked ~ .page .attack-container button[type=action]::before, input.orange-color-checkbox:checked ~ .page .spell-short-container button[type=action]::before, input.orange-color-checkbox:checked ~ .page .focus-container button[type=action]::before, input.orange-color-checkbox:checked ~ .page .spell-container button[type=action]::before { color: #BC610E; } .sheet-rolltemplate-age-roller .sheet-die-face-drama.sheet-color-stars, input.stars-color-checkbox:checked ~ .page .repcontrol .repcontrol_edit:after, input.stars-color-checkbox:checked ~ .page .repcontrol .repcontrol_add:before, input.stars-color-checkbox:checked ~ button[type=action].floating-dice-roller::before, input.stars-color-checkbox:checked ~ .page .attack-container button[type=action]::before, input.stars-color-checkbox:checked ~ .page .spell-short-container button[type=action]::before, input.stars-color-checkbox:checked ~ .page .focus-container button[type=action]::before, input.stars-color-checkbox:checked ~ .page .spell-container button[type=action]::before { color: black; } .sheet-rolltemplate-age-roller .sheet-die-face-drama.sheet-color-threefold, input.threefold-color-checkbox:checked ~ .page .repcontrol .repcontrol_edit:after, input.threefold-color-checkbox:checked ~ .page .repcontrol .repcontrol_add:before, input.threefold-color-checkbox:checked ~ button[type=action].floating-dice-roller::before, input.threefold-color-checkbox:checked ~ .page .attack-container button[type=action]::before, input.threefold-color-checkbox:checked ~ .page .spell-short-container button[type=action]::before, input.threefold-color-checkbox:checked ~ .page .focus-container button[type=action]::before, input.threefold-color-checkbox:checked ~ .page .spell-container button[type=action]::before { color: #1f7b92; } .sheet-rolltemplate-age-roller .sheet-die-face-drama.sheet-color-lazarus, input.lazarus-color-checkbox:checked ~ .page .repcontrol .repcontrol_edit:after, input.lazarus-color-checkbox:checked ~ .page .repcontrol .repcontrol_add:before, input.lazarus-color-checkbox:checked ~ button[type=action].floating-dice-roller::before, input.lazarus-color-checkbox:checked ~ .page .attack-container button[type=action]::before, input.lazarus-color-checkbox:checked ~ .page .spell-short-container button[type=action]::before, input.lazarus-color-checkbox:checked ~ .page .focus-container button[type=action]::before, input.lazarus-color-checkbox:checked ~ .page .spell-container button[type=action]::before { color: #007ab8; } .sheet-rolltemplate-age-roller .sheet-die-face-drama.sheet-color-green, input.green-color-checkbox:checked ~ .page .repcontrol .repcontrol_edit:after, input.green-color-checkbox:checked ~ .page .repcontrol .repcontrol_add:before, input.green-color-checkbox:checked ~ button[type=action].floating-dice-roller::before, input.green-color-checkbox:checked ~ .page .attack-container button[type=action]::before, input.green-color-checkbox:checked ~ .page .spell-short-container button[type=action]::before, input.green-color-checkbox:checked ~ .page .focus-container button[type=action]::before, input.green-color-checkbox:checked ~ .page .spell-container button[type=action]::before { color: #1D8514; } .sheet-rolltemplate-age-roller .sheet-die-face-drama.sheet-color-rainbow, input.rainbow-color-checkbox:checked ~ .page .repcontrol .repcontrol_edit:after, input.rainbow-color-checkbox:checked ~ .page .repcontrol .repcontrol_add:before, input.rainbow-color-checkbox:checked ~ button[type=action].floating-dice-roller::before, input.rainbow-color-checkbox:checked ~ .page .attack-container button[type=action]::before, input.rainbow-color-checkbox:checked ~ .page .spell-short-container button[type=action]::before, input.rainbow-color-checkbox:checked ~ .page .focus-container button[type=action]::before, input.rainbow-color-checkbox:checked ~ .page .spell-container button[type=action]::before { color: blueviolet; } .sheet-rolltemplate-age-roller .sheet-die-face-drama.sheet-color-dragon, input.dragon-color-checkbox:checked ~ .page .repcontrol .repcontrol_edit:after, input.dragon-color-checkbox:checked ~ .page .repcontrol .repcontrol_add:before, input.dragon-color-checkbox:checked ~ button[type=action].floating-dice-roller::before, input.dragon-color-checkbox:checked ~ .page .attack-container button[type=action]::before, input.dragon-color-checkbox:checked ~ .page .spell-short-container button[type=action]::before, input.dragon-color-checkbox:checked ~ .page .focus-container button[type=action]::before, input.dragon-color-checkbox:checked ~ .page .spell-container button[type=action]::before { color: darkred; } input.dragon-age-button:checked ~ .page .no-dragon-age-selected, input.fantasy-age-button:checked ~ .page .no-fantasy-age-selected, input.fantasy-age-core-button:checked ~ .page .no-fantasy-age-core-selected, input.titansgrave-button:checked ~ .page .no-titansgrave-selected, input.blue-rose-button:checked ~ .page .no-blue-rose-selected, input.the-expanse-button:checked ~ .page .no-the-expanse-selected, input.modern-age-button:checked ~ .page .no-modern-age-selected, input.threefold-button:checked ~ .page .no-threefold-selected, input.world-of-lazarus-button:checked ~ .page .no-world-of-lazarus-selected { display: none; } .mod-selected { display: none; } /* specific games */ input.dragon-age-button:checked ~ .page .dragon-age-selected, input.fantasy-age-button:checked ~ .page .fantasy-age-selected, input.fantasy-age-core-button:checked ~ .page .fantasy-age-core-selected, input.titansgrave-button:checked ~ .page .titansgrave-selected, input.blue-rose-button:checked ~ .page .blue-rose-selected, input.the-expanse-button:checked ~ .page .the-expanse-selected, input.modern-age-button:checked ~ .page .modern-age-selected, input.threefold-button:checked ~ .page .threefold-selected, input.world-of-lazarus-button:checked ~ .page .world-of-lazarus-selected, input.dragon-age-button:checked ~ .page .old-age-selected, input.fantasy-age-button:checked ~ .page .old-age-selected, input.titansgrave-button:checked ~ .page .old-age-selected, input.modern-age-button:checked ~ .page .mod-selected, input.threefold-button:checked ~ .page .mod-selected, input.world-of-lazarus-button:checked ~ .page .mod-selected, input.fantasy-age-button:checked ~ .page .second-gen-selected, input.fantasy-age-core-button:checked ~ .page .second-gen-selected, input.titansgrave-button:checked ~ .page .second-gen-selected, input.blue-rose-button:checked ~ .page .second-gen-selected { display: inline-block; } input.modern-age-button:checked ~ .page .no-mod-selected, input.threefold-button:checked ~ .page .no-mod-selected, input.world-of-lazarus-button:checked ~ .page .no-mod-selected { display: none; } .tab7 .row { float: right; } .col-options { width: 375px; float: left; } .small-section { width: 182.5px; } .col-options .larger-section { width: 371px; } .list-toggle-text { margin-top: 1px; margin-right: 7px; margin-bottom: 3px; float: left; } .aim-toggle-text { margin-top: 5px; margin-right: 7px; margin-bottom: 4px; float: left; } .select-text { margin-top: 5px; margin-right: 1px; float: left; } .select-drop { margin-right: 21px; } .row .stunts2-drop input[type="select"] { width: 21px; } .larger-section .row { display: inline-block; width: 370px; } .larger-section .list-toggle-container { display: inline-block; width: 370px; } .larger-section .list-toggle-container .list-toggle-checkbox { margin-left: 335px; } .list-toggle-container input[type="checkbox"] + span::before { margin-right: none; } .tab7 .section select { border-bottom: 1px solid #D3D3D3; border-top: 0px; border-left: 0px; border-right: 0px; background: none; box-shadow: none; float: right; width: 150px; border-radius: 0px; margin-top: 0px; margin-bottom: 2px; margin-left: 0px; margin-right: 1px; padding: 0px; } .tab7 .section select[name="attr_char-name-option"] { width: 75px; } .tab7 .section select[name="attr_stunts2-select"] { width: 175px; } input.conditions-section-checkbox:checked ~ .page .conditions-section, input.mana-section-checkbox:checked ~ .page .mana-section, input.exp-section-checkbox:checked ~ .page .experience-points-section, input.fatigue-section-checkbox:checked ~ .page .fatigue-section, input.fear-section-checkbox:checked ~ .page .fear-section, input.horror-section-checkbox:checked ~ .page .horror-section, input.conviction-section-checkbox:checked ~ .page .conviction-section, input.corruption-section-checkbox:checked ~ .page .corruption-section, input.ammo-col-checkbox:checked ~ .page .attack-container .col-ammo, input.power-list-checkbox:checked ~ .page .power-short-container, input.talent-list-checkbox:checked ~ .page .talent-short-container, input.spell-list-checkbox:checked ~ .page .spell-short-divtohide, input.equipment-section-checkbox:checked ~ .page .equipment-section, input.income-section-checkbox:checked ~ .page .income-section, input.initiative-section-checkbox:checked ~ .page .initiative-focus, input.initiative-section-checkbox:checked ~ .page .initiative-section, input.money-section-checkbox:checked ~ .page .money-section { display: inline-block; } input.whisper-toggle-checkbox:checked ~ input.tab-button.tab-whisper, input.whisper-toggle-checkbox:checked ~ input.tab-button.tab-whisper + span, input.aim-toggle-checkbox:checked ~ input.tab-button.tab-aim, input.aim-toggle-checkbox:checked ~ input.tab-button.tab-aim + span, input.stunts2-toggle-checkbox:checked ~ input.tab-button.tab-stunts2, input.stunts2-toggle-checkbox:checked ~ input.tab-button.tab-stunts2 + span { display: block; } input.mana-section-checkbox:not(:checked) + input.exp-section-checkbox:not(:checked) + input.fatigue-section-checkbox:not(:checked) + input.conviction-section-checkbox:not(:checked) + input.corruption-section-checkbox:not(:checked) ~ .page .speed-defense-armor-container { width: calc(75% - 2.9px); } input.mana-section-checkbox:not(:checked) + input.exp-section-checkbox:not(:checked) + input.fatigue-section-checkbox:not(:checked) + input.conviction-section-checkbox:not(:checked) + input.corruption-section-checkbox:not(:checked) ~ .page .speed-defense-score { margin-left: 33%; } input.mana-section-checkbox:not(:checked) + input.exp-section-checkbox:not(:checked) + input.fatigue-section-checkbox:not(:checked) + input.conviction-section-checkbox:not(:checked) + input.corruption-section-checkbox:not(:checked) ~ .page .maximum-input span { margin-left: 20px; } input.ammo-col-checkbox:checked ~ .page .attack-container .col-attack-name { width: 125px; } .row .aim-value-field { float: left; } .row .aim-value-field input[type=number] { text-align: center; width: 18px; border-top: 0px; border-left:0px; border-right: 0px; border-bottom: 1px solid #D3D3D3; background: none; box-shadow: none; border-radius: 0px; margin-right: 3px; margin-top: 6px; padding: 0px; } .row .aim-value-field input[type=number]::-webkit-inner-spin-button, .row .aim-value-field input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .row .aim-value-field input[type=number] { -moz-appearance:textfield; } .version-name { font-weight: bold; float: right; } .about { padding: 10px; width: 370px; } /* ROLL TEMPLATES */ .sheet-rolltemplate-default table { border: 1px solid black; } .sheet-rolltemplate-default caption { background-color: black; font-weight: bold; border-top: 1px solid black; border-bottom: 0px; border-left: 1px solid black; border-right: 1px solid black; } .sheet-rolltemplate-default td:first-child { text-align: left; } .sheet-rolltemplate-default td:nth-child(2) { text-align: right; } .sheet-rolltemplate-age-roller .sheet-age-roller-container { width: 225px; border: 1px solid black; padding: 0; margin: 0; background-color: white; color: black; } .sheet-rolltemplate-age-roller .sheet-age-roller-result { width: 100%; padding-top: 10px; text-align: center; border-bottom: 1px solid black;padding-bottom: 5px; } .sheet-rolltemplate-age-roller .sheet-die-face { font-size: 48px; font-weight: bold; font-family: "dicefontd6"; color: #333333; } .sheet-rolltemplate-age-roller .sheet-die-face-drama { text-transform: uppercase; } .sheet-rolltemplate-age-roller .sheet-die-seperator { font-size: 38px; font-weight: bold; vertical-align: top;} .sheet-rolltemplate-age-roller .sheet-age-roller-stunt + .sheet-age-roller-stunt { display: none; } .sheet-rolltemplate-age-roller .sheet-age-roller-line { padding-top: 2px; padding-bottom: 2px; text-align: top; } .sheet-rolltemplate-age-roller .sheet-age-roller-stunt { border-top: 1px solid black; color: green; font-weight: bold; } .sheet-rolltemplate-age-roller .sheet-age-roller-col1 { display: inline-block; width: 161px; text-align: left; margin-left: 5px; margin-right: 5px; } .sheet-rolltemplate-age-roller .sheet-age-roller-col2 { display: inline-block; width: 40px; text-align: right; margin-left: 5px; margin-right: 5px; font-weight: bold; } .sheet-rolltemplate-age-roller .sheet-age-roller-title { background-color: black; color: white; font-weight: bold; padding-left: 5px; padding-right: 5px; padding-bottom: 2px; padding-top: 2px; margin-bottom: 3px; } .sheet-rolltemplate-age-roller .sheet-age-roller-total { border-top: 1px solid black; } .sheet-rolltemplate-age-roller .sheet-age-roller-total .sheet-age-roller-col1 { font-weight: bold; } .sheet-rolltemplate-age-roller .sheet-age-roller-tn { border-top: 1px solid black; font-style: italic; } .sheet-rolltemplate-age-roller .sheet-age-roller-col2 .inlinerollresult { background-color: transparent; border: none; padding: 0; margin: 0; text-align: right; } .sheet-rolltemplate-age-roller .sheet-age-roller-col2 .inlinerollresult.fullfail, .sheet-rolltemplate-age-roller .sheet-age-roller-col2 .inlinerollresult.fullcrit, .sheet-rolltemplate-age-roller .sheet-age-roller-col2 .inlinerollresult.importantroll { border: none; } /* Tool tips based on http://jsfiddle.net/Lithl/4naLge77/ */ .tooltip { text-decoration-line: underline; text-decoration-style: dotted; outline: none; cursor: help; } /* .tooltip strong { line-height: 30px; } */ .tooltip:hover span { display: block; position: absolute; } .tooltip:hover { text-decoration: none; } .tooltip span { display: none; border-radius: 4px; /* box-shadow: 5px 5px 8px #eee; */ z-index: 10; padding: 14px 20px; margin-top: 10px; margin-left: -150px; width: 300px; line-height: 16px; color: #111; border: 1px solid #333; background: #eee; } .page select.color-select option { color: white; } .page select.color-select option[value=black] { background-color: black; } .page select.color-select option[value=red] { background-color: #810206; } .page select.color-select option[value=teal1] { background-color: #00576b; } .page select.color-select option[value=teal2] { background-color: #1f7b92; } .page select.color-select option[value=blue1] { background-color: #007ab8; } .page select.color-select option[value=blue2] { background-color: #006496; } .page select.color-select option[value=orange] { background-color: white; color: #bc610e; font-weight: bold; } .page select.color-select option[value=stars] { background-color: white; color: black; font-weight: bold; } .page select.color-select option[value=threefold] { background-color: white; color: #1f7b92; font-weight: bold; } .page select.color-select option[value=lazarus] { background-color: white; color: #007ab8; font-weight: bold; } .page select.color-select option[value=green] { background-color: white; color: #1d8514; font-weight: bold; } .page select.color-select option[value=rainbow] { background-color: white; color: blueviolet; font-weight: bold; } .page select.color-select option[value=dragon] { background-color: white; color: darkred; font-weight: bold; }