.sheet-container { position: relative; } /*===Tabs===*/ input.sheet-tab { width: 150px; height: 20px; position: relative; top: 5px; left: 13px; margin: -1.5px; cursor: pointer; z-index: 1; opacity: 0; } input.sheet-tab + span::before { content: attr(title); border: solid 1px #a8a8a8; border-bottom-color: black; text-align: center; display: inline-block; background: #fff; background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); width: 150px; height: 20px; font-size: 18px; position: absolute; top: 6px; left: 13px; } input.sheet-tab:checked + span::before { background: #dcdcdc; background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); border-bottom-color: #fff; } input.sheet-phase0-flag:checked ~ input.sheet-tab2 + span::before, input.sheet-tab3 + span::before, input.sheet-tab4 + span::before { border-left: none; left: 163px; } input.sheet-phase0-flag:checked ~ input.sheet-tab3 + span::before, input.sheet-phase0-flag:checked ~ input.sheet-tab4 + span::before, input.sheet-notesTab-flag:checked ~ input.sheet-tab4 + span::before { border-left: none; left: 313px; } input.sheet-phase0-flag:checked + input.sheet-notesTab-flag:checked ~ input.sheet-tab4 + span::before { border-left: none; left: 463px; } input.sheet-tab1, input.sheet-tab1 + span::before, input.sheet-tab3, input.sheet-tab3 + span::before, div.sheet-tab-content { display: none; } input.sheet-tab1:checked ~ div.sheet-tab1, input.sheet-tab2:checked ~ div.sheet-tab2, input.sheet-tab3:checked ~ div.sheet-tab3, input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; } input.sheet-phase0-flag:checked ~ input.sheet-tab1, input.sheet-phase0-flag:checked ~ input.sheet-tab1 + span::before, input.sheet-notesTab-flag:checked ~ input.sheet-tab3, input.sheet-notesTab-flag:checked ~ input.sheet-tab3 + span::before { display: inline-block; } div.sheet-tab-content { border-top: 1px solid #000000; margin: 2px 0 0 5px; padding: 5px; } /* === GENERAL === */ .sheet-rolltemplate-fatepoints .sheet-header, .sheet-rolltemplate-refresh .sheet-header, .sheet-rolltemplate-aspect .sheet-header, .sheet-rolltemplate-skill .sheet-header, .sheet-rolltemplate-stunt .sheet-header, .sheet-rolltemplate-extra .sheet-header, .sheet-rolltemplate-consequence .sheet-header, .sheet-header { margin-bottom: 4px; padding: 2px 8px; background: black; color: white; font-weight: bold; border-top-left-radius: 10px; border-bottom-right-radius: 10px; } .sheet-inlineLabel, .sheet-rolltemplate-fatepoints .sheet-inlineLabel, .sheet-rolltemplate-refresh .sheet-inlineLabel, .sheet-rolltemplate-aspect .sheet-inlineLabel, .sheet-rolltemplate-skill .sheet-inlineLabel, .sheet-rolltemplate-stunt .sheet-inlineLabel, .sheet-rolltemplate-extra .sheet-inlineLabel, .sheet-rolltemplate-consequence .sheet-inlineLabel { font-weight: bold; } .sheet-section { float: left; width: 100%; margin: 4px 0; padding: 1px; box-sizing: border-box; } .sheet-half { max-width: 50%; } .sheet-quarter { max-width: 25%; } .sheet-threequarters { max-width: 75%; } .sheet-hidden { display: none; } .sheet-keep-whitespace { white-space: pre-wrap; } .sheet-break { clear: both; } label, select { margin: 0; } textarea { margin: 0; width: 100%; height: 200px; resize: vertical; box-sizing: border-box; } .sheet-repitem, .repitem { margin-bottom: 5px; } .sheet-small-button { font-size: 9px !important; } .sheet-action-button { font-size: 12px !important; } .sheet-header-button { font-size: 18px !important; } button[type=roll] { display: block; background-color: transparent; color: black; border: none; line-height: 12px; background-image: none; text-shadow: none; box-shadow: none; padding: 0px; margin: 0px; width: 100%; font-weight: bold; text-align: left; } button[type=roll] * { pointer-events: none; } button[type=roll]::before { display: none !important; } .sheet-section-options button[type="action"] { background-color: transparent; color: #A0A0A0; border: none; background-image: none; text-shadow: none; box-shadow: none; padding: 0px; margin: 0px; margin-right: 4px; line-height: 14px; text-align: center; vertical-align: middle; width: 18px; height: 18px; font-size: 20px; font-family: pictos; cursor: pointer; position: absolute; top: 0px; right: 0px; } button[type=roll]:hover, .sheet-section-options button[type="action"]:hover { color: #EC2127; } .sheet-section-options, .sheet-hint-options, .sheet-item-options { float: right; width: 18px; position: relative; } .sheet-section-options-flag, .sheet-hint-options-flag, .sheet-item-options-flag, .sheet-item-options-flag2 { opacity: 0; cursor: pointer; width: 18px; height: 18px; z-index: 2; position: absolute; top: 0; right: 0; } .sheet-section-options-flag + span, .sheet-hint-options-flag + span, .sheet-item-options-flag + span, .sheet-item-options-flag2 + span { margin-right: 4px; line-height: 14px; text-align: center; vertical-align: middle; width: 18px; height: 18px; font-size: 20px; font-family: pictos; color: #A0A0A0; cursor: pointer; position: absolute; top: 0px; right: 0px; } .sheet-item-options-flag2, .sheet-item-options-flag2 + span { right: 20px; } .sheet-section-options-flag:checked + span { color: white; } .sheet-hint-options-flag:checked + span, .sheet-item-options-flag:checked + span, .sheet-item-options-flag2:checked + span { color: black; } .sheet-options, .sheet-inline-options, .sheet-hint, .sheet-options-flag:checked ~ .sheet-display, .sheet-notesTab-flag:checked ~ .sheet-section-notes, .sheet-options-flag:checked ~ .sheet-skills-pyramid .sheet-display, .sheet-rollable-flag-true, .sheet-rollable-flag:checked ~ .sheet-skills-pyramid .sheet-rollable-flag-false, .sheet-ladder-rollable-true { display: none; } .sheet-display, .sheet-hints-flag:checked ~ .sheet-hint, .sheet-options-flag:checked ~ .sheet-options, .sheet-options-flag:checked ~ .sheet-skills-pyramid .sheet-options, .sheet-rollable-flag-false, .sheet-rollable-flag:checked ~ .sheet-skills-pyramid .sheet-rollable-flag-true, .sheet-ladder-rollable:checked ~ .sheet-ladder-rollable-true { display: block; } .sheet-inline-display, .sheet-options-flag:checked ~ .sheet-inline-options, .sheet-options-flag:checked ~ .sheet-skills-pyramid .sheet-inline-options { display: inline-block; } .sheet-tooltip { position: relative; display: inline-block; } .sheet-tooltip .sheet-tooltipText { visibility: hidden; width: 300px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -150px; opacity: 0; transition: opacity 0.3s; } .sheet-tooltip .sheet-tooltipText::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .sheet-tooltip:hover .sheet-tooltipText { visibility: visible; opacity: 1; } /* === BASIC === */ .sheet-logo { width: 200px; margin: -25px 5px 0 5px; vertical-align: middle; filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */ } .sheet-h1-logo { margin-top: 35px; } .sheet-section-basic tr { margin-left: 5px; } .sheet-section-basic td { padding: 2px; } .sheet-section-basic input[type="number"] { width: 100px !important; } .sheet-section-basic .sheet-column { width: calc(50% - 200px); } .sheet-large-number { font-size: 30px; } .sheet-right-buttons { margin-right: 45px; } .sheet-short-description { max-height: 150px; overflow: hidden; } .sheet-hint { border-width: 2px; border-color: black; border-style: inset; background-color: lightyellow; } .sheet-hint-icon { width: 18px; font-family: pictos; display: inline-block; vertical-align: top; text-align: center; } .sheet-hint-content { width: calc(100% - 40px); display: inline-block; } /* === Character Idea === */ .sheet-section-idea input { width: 100%; box-sizing: border-box; } /* === Phase Trio === */ .sheet-section-phase-trio input { width: 100%; box-sizing: border-box; margin-top: 2px; } /* === Id === */ .sheet-section-id { width: calc(100% - 215px); } .sheet-section-id input { width: 100%; box-sizing: border-box; } .sheet-section-id textarea { height: 64px; } .sheet-section-id-logo { width: 200px; vertical-align: middle; margin: 50px 15px 0 0px; } .sheet-section-id-info { max-width: 100%; } .sheet-section-id-fatepoints { display: none; max-width: 65px; float: right; } .sheet-section-id-fatepoints input { width: 100% !important; text-align: center; } .sheet-fatepoints-flag:checked ~ .sheet-section-id-info { max-width: calc(100% - 75px); } .sheet-fatepoints-flag:checked ~ .sheet-section-id-fatepoints { display: block; } /* === ASPECT === */ .sheet-section-aspects { padding-right: 2.5px } .sheet-section-aspects input[type="text"] { width: 100%; } /* === BONUS === */ .sheet-section-bonus { padding-left: 2.5px; } .sheet-sa-row { width: calc(100% - 20px); float: left; } .sheet-sa-row span, .sheet-consequence-row span { display: inline-block; margin-left: 2px; } .sheet-sa-free-invoke { width: 40px; } .sheet-sa-name { width: calc(100% - 50px); } /* === SKILLS === */ .sheet-skills-pyramid-shiftLevel { display: inline-block; width: 12.5%; text-align: right; } .sheet-skills-pyramid-shiftLevel button[type="roll"] { text-align: right; } .sheet-skills-pyramid .repcontainer[data-groupname="repeating_skills"] .repitem, .repeating_skills { display: inline-block; } .sheet-skills-pyramid .repcontainer[data-groupname="repeating_skills"] { display: inline-block; max-width: 75%; vertical-align: middle; } .sheet-skills-pyramid fieldset.sheet-skills + .repcontainer > .repitem { padding: 0px; margin: 0px; border: none; border-radius: 0; } .sheet-skills-pyramid-skill input[type="text"] { width: 100px; margin-right: 10px; } .sheet-skills-pyramid-skill button[type="roll"] { width: 12ch; margin-right: 1ch; } .sheet-skills-pyramid-skill, .sheet-skills-pyramid .repcontrol[data-groupname="repeating_skills"] { display: none; } .sheet-skills-pyramid .sheet-skills-pyramid-row-8 input.sheet-skills-filter[type="hidden"][value="8"] ~ .sheet-skills-pyramid-skill, .sheet-skills-pyramid .sheet-skills-pyramid-row-7 input.sheet-skills-filter[type="hidden"][value="7"] ~ .sheet-skills-pyramid-skill, .sheet-skills-pyramid .sheet-skills-pyramid-row-6 input.sheet-skills-filter[type="hidden"][value="6"] ~ .sheet-skills-pyramid-skill, .sheet-skills-pyramid .sheet-skills-pyramid-row-5 input.sheet-skills-filter[type="hidden"][value="5"] ~ .sheet-skills-pyramid-skill, .sheet-skills-pyramid .sheet-skills-pyramid-row-4 input.sheet-skills-filter[type="hidden"][value="4"] ~ .sheet-skills-pyramid-skill, .sheet-skills-pyramid .sheet-skills-pyramid-row-3 input.sheet-skills-filter[type="hidden"][value="3"] ~ .sheet-skills-pyramid-skill, .sheet-skills-pyramid .sheet-skills-pyramid-row-2 input.sheet-skills-filter[type="hidden"][value="2"] ~ .sheet-skills-pyramid-skill, .sheet-skills-pyramid .sheet-skills-pyramid-row-1 input.sheet-skills-filter[type="hidden"][value="1"] ~ .sheet-skills-pyramid-skill, .sheet-skills-pyramid .sheet-skills-pyramid-row-0 input.sheet-skills-filter[type="hidden"][value="0"] ~ .sheet-skills-pyramid-skill, .sheet-skills-pyramid .sheet-skills-pyramid-row-n1 input.sheet-skills-filter[type="hidden"][value="-1"] ~ .sheet-skills-pyramid-skill, .sheet-skills-pyramid .sheet-skills-pyramid-row-n2 input.sheet-skills-filter[type="hidden"][value="-2"] ~ .sheet-skills-pyramid-skill { display: inline-block; } /* === STUNTS === */ .sheet-section-stunt { padding-right: 2.5px } span.sheet-check-label + input[type="checkbox"] { margin-left: -2.5px; } input[type="checkbox"] + span.sheet-check-label { margin-left: -2.5px; } .sheet-stunt-bonus, .sheet-stunt-action { display: none; } .sheet-stunt-type[value="1"] ~ .sheet-stunt-action, .sheet-stunt-type[value="2"] ~ .sheet-stunt-action, .sheet-stunt-type[value="2"] ~ .sheet-stunt-bonus { display: block; } /* === EXTRAS === */ .sheet-section-stunt { padding-right: 2.5px } /* === STRESS === */ .sheet-section-extras { padding-left: 2.5px } span.sheet-stress-header-name { font-weight: bold; font-size: 150%; } span.sheet-stress-header-skill::before { content: "("; } span.sheet-stress-header-skill:empty::before { content: ""; } span.sheet-stress-header-skill::after { content: ")"; } span.sheet-stress-header-skill:empty:after { content: ""; } .sheet-stress-row input[type="checkbox"] { display: none; } .sheet-stress-row input[type="checkbox"][value="1"], .sheet-stress-row input[type="hidden"][value="2"] ~ input[type="checkbox"][value="2"], .sheet-stress-row input[type="hidden"][value="3"] ~ input[type="checkbox"][value="2"], .sheet-stress-row input[type="hidden"][value="3"] ~ input[type="checkbox"][value="3"], .sheet-stress-row input[type="hidden"][value="4"] ~ input[type="checkbox"][value="2"], .sheet-stress-row input[type="hidden"][value="4"] ~ input[type="checkbox"][value="3"], .sheet-stress-row input[type="hidden"][value="4"] ~ input[type="checkbox"][value="4"], .sheet-stress-row input[type="hidden"][value="5"] ~ input[type="checkbox"][value="2"], .sheet-stress-row input[type="hidden"][value="5"] ~ input[type="checkbox"][value="3"], .sheet-stress-row input[type="hidden"][value="5"] ~ input[type="checkbox"][value="4"], .sheet-stress-row input[type="hidden"][value="5"] ~ input[type="checkbox"][value="5"], .sheet-stress-row input[type="hidden"][value="6"] ~ input[type="checkbox"][value="2"], .sheet-stress-row input[type="hidden"][value="6"] ~ input[type="checkbox"][value="3"], .sheet-stress-row input[type="hidden"][value="6"] ~ input[type="checkbox"][value="4"], .sheet-stress-row input[type="hidden"][value="6"] ~ input[type="checkbox"][value="5"], .sheet-stress-row input[type="hidden"][value="6"] ~ input[type="checkbox"][value="6"], .sheet-stress-row input[type="hidden"][value="7"] ~ input[type="checkbox"][value="2"], .sheet-stress-row input[type="hidden"][value="7"] ~ input[type="checkbox"][value="3"], .sheet-stress-row input[type="hidden"][value="7"] ~ input[type="checkbox"][value="4"], .sheet-stress-row input[type="hidden"][value="7"] ~ input[type="checkbox"][value="5"], .sheet-stress-row input[type="hidden"][value="7"] ~ input[type="checkbox"][value="6"], .sheet-stress-row input[type="hidden"][value="7"] ~ input[type="checkbox"][value="7"], .sheet-stress-row input[type="hidden"][value="8"] ~ input[type="checkbox"][value="2"], .sheet-stress-row input[type="hidden"][value="8"] ~ input[type="checkbox"][value="3"], .sheet-stress-row input[type="hidden"][value="8"] ~ input[type="checkbox"][value="4"], .sheet-stress-row input[type="hidden"][value="8"] ~ input[type="checkbox"][value="5"], .sheet-stress-row input[type="hidden"][value="8"] ~ input[type="checkbox"][value="6"], .sheet-stress-row input[type="hidden"][value="8"] ~ input[type="checkbox"][value="7"], .sheet-stress-row input[type="hidden"][value="8"] ~ input[type="checkbox"][value="8"] { display: inline-block; zoom: 150%; margin-right: 5px; margin-top: 2.5px; } .sheet-stress-row input[type="checkbox"]::before { margin-left: -2.5px; top: -5px; position: relative; font-weight: bold; } .sheet-stress-row input[type="checkbox"][value="1"]::before { content: "1"; } .sheet-stress-row input[type="checkbox"][value="2"]::before { content: "2"; } .sheet-stress-row input[type="checkbox"][value="3"]::before { content: "3"; } .sheet-stress-row input[type="checkbox"][value="4"]::before { content: "4"; } .sheet-stress-row input[type="checkbox"][value="5"]::before { content: "5"; } .sheet-stress-row input[type="checkbox"][value="6"]::before { content: "6"; } .sheet-stress-row input[type="checkbox"][value="7"]::before { content: "7"; } .sheet-stress-row input[type="checkbox"][value="8"]::before { content: "8"; } /* === CONSEQUENCES === */ .sheet-section-conditions, .sheet-section-consequences { padding-left: 2.5px; } .sheet-section-consequences select { width: 100px; } .sheet-section-consequences input[type="text"] { margin-left: 2px; } .sheet-worth-value { position: relative; top: -0.5em; } .sheet-conditions-row .sheet-worth-value { position: relative; top: -0.25em; right: -0.5em; font-weight: bold; } .sheet-worth-text { margin-left: -3px !important; } .sheet-consequence-worth { width: 90px; display: inline-block; } .sheet-consequence-aspect { vertical-align: middle; flex-grow: 1; } span.sheet-consequence-healing { font-family: 'pictos'; margin-left: -1.5px !important; } .sheet-consequence-healing input[type="checkbox"]::before { position: relative; top: -0.65em; right: 0.5em; font-weight: bold; font-family: 'pictos'; content: "k"; } .sheet-conditions-row .sheet-consequence-worth, .sheet-consequence-healing { width: 35px; } .sheet-section-conditions, .sheet-conditions-flag:checked ~ .sheet-section-consequences { display: none; } .sheet-conditions-flag:checked ~ .sheet-section-conditions { display: block; } .sheet-conditions-row, .sheet-consequence-row { display: flex; align-items: center; } .sheet-display .sheet-conditions-row, .sheet-section-conditions .sheet-display .repcontrol[data-groupname="repeating_consequences"] { display: none; } .sheet-section-conditions .sheet-conditions-group8 input.sheet-conditions-filter[type="hidden"][value="8"] ~ .sheet-conditions-row, .sheet-section-conditions .sheet-conditions-group7 input.sheet-conditions-filter[type="hidden"][value="7"] ~ .sheet-conditions-row, .sheet-section-conditions .sheet-conditions-group6 input.sheet-conditions-filter[type="hidden"][value="6"] ~ .sheet-conditions-row, .sheet-section-conditions .sheet-conditions-group5 input.sheet-conditions-filter[type="hidden"][value="5"] ~ .sheet-conditions-row, .sheet-section-conditions .sheet-conditions-group4 input.sheet-conditions-filter[type="hidden"][value="4"] ~ .sheet-conditions-row, .sheet-section-conditions .sheet-conditions-group3 input.sheet-conditions-filter[type="hidden"][value="3"] ~ .sheet-conditions-row, .sheet-section-conditions .sheet-conditions-group2 input.sheet-conditions-filter[type="hidden"][value="2"] ~ .sheet-conditions-row, .sheet-section-conditions .sheet-conditions-group1 input.sheet-conditions-filter[type="hidden"][value="1"] ~ .sheet-conditions-row { display: flex; } /* === SETTINGS === */ .sheet-settings { display: flex; flex-wrap: wrap; } .sheet-setting { width: 200px; margin: 4px; padding: 4px; box-sizing: border-box; } .sheet-setting input[type="text"], .sheet-setting select { width: 100%; } /* === ROLL TEMPLATE === */ .sheet-rolltemplate-fatepoints .sheet-rollTemplate, .sheet-rolltemplate-refresh .sheet-rollTemplate, .sheet-rolltemplate-aspect .sheet-rollTemplate, .sheet-rolltemplate-skill .sheet-rollTemplate, .sheet-rolltemplate-stunt .sheet-rollTemplate, .sheet-rolltemplate-extra .sheet-rollTemplate, .sheet-rolltemplate-consequence .sheet-rollTemplate { position: relative; } .sheet-rolltemplate-fatepoints .sheet-rollTemplate .sheet-header, .sheet-rolltemplate-refresh .sheet-rollTemplate .sheet-header, .sheet-rolltemplate-aspect .sheet-rollTemplate .sheet-header, .sheet-rolltemplate-skill .sheet-rollTemplate .sheet-header, .sheet-rolltemplate-stunt .sheet-rollTemplate .sheet-header, .sheet-rolltemplate-extra .sheet-rollTemplate .sheet-header, .sheet-rolltemplate-consequence .sheet-rollTemplate .sheet-header { margin-top: 5px; } .sheet-rolltemplate-fatepoints .sheet-fate-point-circle, .sheet-rolltemplate-refresh .sheet-fate-point-circle, .sheet-rolltemplate-aspect .sheet-fate-point-circle, .sheet-rolltemplate-skill .sheet-fate-point-circle, .sheet-rolltemplate-stunt .sheet-fate-point-circle, .sheet-rolltemplate-extra .sheet-fate-point-circle, .sheet-rolltemplate-consequence .sheet-fate-point-circle { border-radius: 15px; top: -15px; width: 30px; height: 30px; text-align: center; right: 10px; display: block; position: absolute; background-color: gold; } .sheet-rolltemplate-fatepoints .sheet-fate-point-circle span, .sheet-rolltemplate-refresh .sheet-fate-point-circle span, .sheet-rolltemplate-aspect .sheet-bonus-circle span, .sheet-rolltemplate-skill .sheet-fate-point-circle span, .sheet-rolltemplate-stunt .sheet-fate-point-circle span, .sheet-rolltemplate-extra .sheet-fate-point-circle span, .sheet-rolltemplate-aspect .sheet-fate-point-circle span, .sheet-rolltemplate-consequence .sheet-fate-point-circle span { line-height: 30px; } .sheet-rolltemplate-fatepoints .sheet-fate-point-circle + .sheet-header, .sheet-rolltemplate-refresh .sheet-fate-point-circle + .sheet-header, .sheet-rolltemplate-aspect .sheet-fate-point-circle + .sheet-header, .sheet-rolltemplate-skill .sheet-fate-point-circle + .sheet-header, .sheet-rolltemplate-stunt .sheet-fate-point-circle + .sheet-header, .sheet-rolltemplate-extra .sheet-fate-point-circle + .sheet-header, .sheet-rolltemplate-consequence .sheet-fate-point-circle + .sheet-header { margin-top: 16px; } .sheet-rolltemplate-fatepoints .sheet-uppercase, .sheet-rolltemplate-refresh .sheet-uppercase, .sheet-rolltemplate-aspect .sheet-uppercase, .sheet-rolltemplate-skill .sheet-uppercase, .sheet-rolltemplate-stunt .sheet-uppercase, .sheet-rolltemplate-extra .sheet-uppercase, .sheet-rolltemplate-consequence .sheet-uppercase { text-transform: uppercase; } .sheet-rolltemplate-fatepoints .sheet-warning, .sheet-rolltemplate-refresh .sheet-warning, .sheet-rolltemplate-aspect .sheet-warning, .sheet-rolltemplate-skill .sheet-warning, .sheet-rolltemplate-stunt .sheet-warning, .sheet-rolltemplate-extra .sheet-warning, .sheet-rolltemplate-consequence .sheet-warning { color: red; } .sheet-rolltemplate-fatepoints .sheet-warning::before, .sheet-rolltemplate-refresh .sheet-warning::before, .sheet-rolltemplate-aspect .sheet-warning::before, .sheet-rolltemplate-skill .sheet-warning::before, .sheet-rolltemplate-stunt .sheet-warning::before, .sheet-rolltemplate-extra .sheet-warning::before, .sheet-rolltemplate-consequence .sheet-warning::before { color: red; font-family: 'pictos'; content: "!"; } .sheet-rolltemplate-aspect .sheet-bonus-circle { border-radius: 15px; top: -15px; width: 30px; height: 30px; text-align: center; right: 50px; display: block; position: absolute; background-color: silver; }