/* Various area/container settings */ /* the overall page viewed on the website */ .charsheet { font-family: Arial, Verdana, sans-serif; padding: 0px; -webkit-box-sizing: border-box; -mox-box-sizing: border-box; box-sizing: border-box; } /* make padding/border/margin appear INSIDE div area */ .charsheet textarea, div, input, button { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* make it only expand and shrink to so wide & still be centered */ .sheet-container { margin-left: auto; margin-right: auto; min-width: 320px; padding: 0; background-color: white; color: black; text-align: center; vertical-align: middle; } /* make third only expand and shrink to so wide & still be centered */ .sheet-third { margin-left: auto; margin-right: auto; width: 275px; padding: 0; text-align: center; vertical-align: middle; } /* make third only expand and shrink to so wide & still be centered */ .sheet-fifth { margin-left: auto; margin-right: auto; width: 165px; padding: 0; text-align: center; vertical-align: middle; } /* temp make two-third only expand and shrink to so wide & still be centered */ .sheet-twoThird { margin-left: auto; margin-right: auto; max-width: 550px; padding: 0; text-align: center; vertical-align: middle; } /* for show/hide sections of the sheet sliders */ .sheet-sliders { margin-left: auto; margin-right: auto; width: 65px; padding: 0; text-align: center; vertical-align: bottom; } /* Border Test */ .sheet-borderPaper { border: 10px solid transparent; padding: 0px; -webkit-border-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/border%20Paper%20Small.png?raw=true") 10 repeat round; -moz-border-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/border%20Paper%20Small.png?raw=true") 10 repeat round; border-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/border%20Paper%20Small.png?raw=true") 10 repeat round; } /* Evasion Background paper look */ .sheet-evasion { background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/BG%20Evasion.png?raw=true"); background-repeat: no-repeat; background-position: left top; width: 275px; height: 155px; padding: 0; background-color: white; } /* Toughness Background paper look */ .sheet-toughness { background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/BG%20Toughness.png?raw=true"); background-repeat: no-repeat; background-position: left top; width: 275px; height: 155px; padding: 0; background-color: white; } /* Resolve Background paper look */ .sheet-resolve { background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/BG%20Resolve.png?raw=true"); background-repeat: no-repeat; background-position: left top; width: 275px; height: 155px; padding: 0; background-color: white; } /* Hit Points Background paper look */ .sheet-hitPoints { background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/BG%20Hit%20Points.png?raw=true"); background-repeat: no-repeat; background-position: left top; width: 275px; height: 225px; padding: 0; background-color: white; } /* Speed & Lethal Damage Background paper look */ .sheet-speedLethalDamage { background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/BG%20Speed%20and%20Lethal%20Damage.png?raw=true"); background-repeat: no-repeat; background-position: left top; width: 275px; height: 175px; padding: 0; background-color: white; } /* Wealth Background paper look */ .sheet-wealth { background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/BG%20Wealth.png?raw=true"); background-repeat: no-repeat; background-position: left top; width: 275px; height: 55px; padding: 0; background-color: white; } /* Wealth Background paper look */ .sheet-attributes { background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/BG%20Attributes.png?raw=true"); background-repeat: no-repeat; background-position: left top; width: 275px; height: 100px; padding: 0; background-color: white; } /* Action Top Background paper look */ .sheet-actionsTop { background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/BG%20Actions%20Top.png?raw=true"); background-repeat: no-repeat; background-position: left top; width: 275px; height: 50px; padding: 0; background-color: white; } /* Action Middle Background paper look */ .sheet-actionsMiddle { background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/BG%20Actions%20Middle.png?raw=true"); background-repeat: repeat-y; background-position: left top; width: 275px; min-height: 93px; padding: 0; background-color: white; } /* Action Bottom Background paper look */ .sheet-actionsBottom { background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/BG%20Actions%20Bottom.png?raw=true"); background-repeat: no-repeat; background-position: left top; width: 275px; height: 28px; padding: 0; background-color: white; } /* Action Top Background paper look */ .sheet-equipmentTop { background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/BG%20Equipment%20Top.png?raw=true"); background-repeat: no-repeat; background-position: left top; width: 165px; height: 15px; padding: 0; background-color: white; } /* Action Middle Background paper look */ .sheet-equipmentMiddle { background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/BG%20Equipment%20Middle.png?raw=true"); background-repeat: repeat-y; background-position: left top; width: 165px; padding: 0; background-color: white; } /* Action Bottom Background paper look */ .sheet-equipmentBottom { background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/BG%20Equipment%20Bottom.png?raw=true"); background-repeat: no-repeat; background-position: left top; width: 165px; height: 20px; padding: 0; background-color: white; } /* Roll Top Background paper look */ .sheet-rolltemplate-openLegend .sheet-rollTop { background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/BG%20Actions%20Top.png?raw=true"); background-size: 250px 50px; background-repeat: no-repeat; background-position: left top; width: 250px; height: 50px; padding: 0; background-color: white; } /* Roll Middle Background paper look */ .sheet-rolltemplate-openLegend .sheet-rollMiddle { background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/BG%20Actions%20Middle.png?raw=true"); background-size: 250px; background-repeat: repeat-y; background-position: left top; width: 250px; min-height: 93px; padding: 0; background-color: white; } /* Roll Bottom Background paper look */ .sheet-rolltemplate-openLegend .sheet-rollBottom { background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/BG%20Actions%20Bottom.png?raw=true"); background-size: 250px; background-repeat: no-repeat; background-position: left top; width: 250px; height: 28px; padding: 0; background-color: white; } /* sometimes you need a row of divs to look and act like a table... deal */ .sheet-makeTable, .sheet-rolltemplate-openLegend .sheet-makeTable { display: table; } .sheet-makeCell, .sheet-rolltemplate-openLegend .sheet-makeCell { display: table-cell; } /* Border effects */ .sheet-borderRound, .sheet-rolltemplate-openLegend .sheet-borderRound { border-radius: 4px; } .sheet-borderAll, .sheet-rolltemplate-openLegend .sheet-borderAll, .sheet-rolltemplate-openLegend-boon .sheet-borderAll, .sheet-rolltemplate-openLegend-attack .sheet-borderAll, .sheet-rolltemplate-openLegend-effect .sheet-borderAll { border: 1px solid black; } .sheet-borderRight, .sheet-rolltemplate-openLegend .sheet-borderRight, .sheet-rolltemplate-openLegend-boon .sheet-borderRight, .sheet-rolltemplate-openLegend-attack .sheet-borderRight, .sheet-rolltemplate-openLegend-effect .sheet-borderRight { border-right: 1px solid black; } .sheet-borderLeft, .sheet-rolltemplate-openLegend .sheet-borderLeft, .sheet-rolltemplate-openLegend-boon .sheet-borderLeft, .sheet-rolltemplate-openLegend-attack .sheet-borderLeft, .sheet-rolltemplate-openLegend-effect .sheet-borderLeft { border-left: 1px solid black; } .sheet-borderTop, .sheet-rolltemplate-openLegend .sheet-borderTop, .sheet-rolltemplate-openLegend-boon .sheet-borderTop, .sheet-rolltemplate-openLegend-attack .sheet-borderTop, .sheet-rolltemplate-openLegend-effect .sheet-borderTop { border-top: 1px solid black; } .sheet-borderBottom, .sheet-rolltemplate-openLegend .sheet-borderBottom, .sheet-rolltemplate-openLegend-boon .sheet-borderBottom, .sheet-rolltemplate-openLegend-attack .sheet-borderBottom, .sheet-rolltemplate-openLegend-effect .sheet-borderBottom { border-bottom: 1px solid black; } .sheet-borderAllDotted, .sheet-rolltemplate-openLegend .sheet-borderAllDotted, .sheet-rolltemplate-openLegend-boon .sheet-borderAllDotted, .sheet-rolltemplate-openLegend-attack .sheet-borderAllDotted, .sheet-rolltemplate-openLegend-effect .sheet-borderAllDotted { border: 1px dashed black; } .sheet-borderRightDotted, .sheet-rolltemplate-openLegend .sheet-borderRightDotted, .sheet-rolltemplate-openLegend-boon .sheet-borderRightDotted, .sheet-rolltemplate-openLegend-attack .sheet-borderRightDotted, .sheet-rolltemplate-openLegend-effect .sheet-borderRightDotted { border-right: 1px dashed black; } .sheet-borderLeftDotted, .sheet-rolltemplate-openLegend .sheet-borderLeftDotted, .sheet-rolltemplate-openLegend-boon .sheet-borderLeftDotted, .sheet-rolltemplate-openLegend-attack .sheet-borderLeftDotted, .sheet-rolltemplate-openLegend-effect .sheet-borderLeftDotted { border-left: 1px dashed black; } .sheet-borderTopDotted, .sheet-rolltemplate-openLegend .sheet-borderTopDotted, .sheet-rolltemplate-openLegend-boon .sheet-borderTopDotted, .sheet-rolltemplate-openLegend-attack .sheet-borderTopDotted, .sheet-rolltemplate-openLegend-effect .sheet-borderTopDotted { border-top: 1px dashed black; } .sheet-borderBottomDotted, .sheet-rolltemplate-openLegend .sheet-borderBottomDotted, .sheet-rolltemplate-openLegend-boon .sheet-borderBottomDotted, .sheet-rolltemplate-openLegend-attack .sheet-borderBottomDotted, .sheet-rolltemplate-openLegend-effect .sheet-borderBottomDotted { border-bottom: 1px dashed black; } /* Padding effects */ .sheet-padAll, .sheet-rolltemplate-openLegend .sheet-padAll, .sheet-rolltemplate-openLegend-boon .sheet-padAll, .sheet-rolltemplate-openLegend-attack .sheet-padAll, .sheet-rolltemplate-openLegend-effect .sheet-padAll, .sheet-rolltemplate-openLegendNormal .sheet-padAll, .sheet-rolltemplate-openLegendModern .sheet-padAll { padding-Right: 2px; padding-Left: 2px; padding-Top: 2px; padding-Bottom: 2px; -webkit-box-sizing: border-box; -mox-box-sizing: border-box; box-sizing: border-box; } .sheet-padRight, .sheet-rolltemplate-openLegend .sheet-padRight, .sheet-rolltemplate-openLegend-boon .sheet-padRight, .sheet-rolltemplate-openLegend-attack .sheet-padRight, .sheet-rolltemplate-openLegend-effect .sheet-padRight, .sheet-rolltemplate-openLegendNormal .sheet-padRight, .sheet-rolltemplate-openLegendModern .sheet-padRight { padding-Right: 10px; -webkit-box-sizing: border-box; -mox-box-sizing: border-box; box-sizing: border-box; } .sheet-padLeft, .sheet-rolltemplate-openLegend .sheet-padLeft, .sheet-rolltemplate-openLegend-boon .sheet-padLeft, .sheet-rolltemplate-openLegend-attack .sheet-padLeft, .sheet-rolltemplate-openLegend-effect .sheet-padLeft, .sheet-rolltemplate-openLegendNormal .sheet-padLeft, .sheet-rolltemplate-openLegendModern .sheet-padLeft { padding-Left: 10px; -webkit-box-sizing: border-box; -mox-box-sizing: border-box; box-sizing: border-box; } .sheet-padTop, .sheet-rolltemplate-openLegend .sheet-padTop, .sheet-rolltemplate-openLegend-boon .sheet-padTop, .sheet-rolltemplate-openLegend-attack .sheet-padTop, .sheet-rolltemplate-openLegend-effect .sheet-padTop, .sheet-rolltemplate-openLegendModern .sheet-padTop, .sheet-rolltemplate-openLegendNormal .sheet-padTop { padding-Top: 12px; -webkit-box-sizing: border-box; -mox-box-sizing: border-box; box-sizing: border-box; } .sheet-padBottom, .sheet-rolltemplate-openLegend .sheet-padBottom, .sheet-rolltemplate-openLegend-boon .sheet-padBottom, .sheet-rolltemplate-openLegend-attack .sheet-padBottom, .sheet-rolltemplate-openLegend-effect .sheet-padBottom, .sheet-rolltemplate-openLegendNormal .sheet-padBottom, .sheet-rolltemplate-openLegendModern .sheet-padBottom { padding-Bottom: 6px; -webkit-box-sizing: border-box; -mox-box-sizing: border-box; box-sizing: border-box; } /* Resizing text Boxes options */ .sheet-resizeNone textarea, .sheet-rolltemplate-openLegend .sheet-resizeNone textarea, .sheet-rolltemplate-openLegend-boon .sheet-resizeNone textarea, .sheet-rolltemplate-openLegend-attack .sheet-resizeNone textarea, .sheet-rolltemplate-openLegend-effect .sheet-resizeNone textarea, .sheet-rolltemplate-openLegendNormal .sheet-resizeNone textarea, .sheet-rolltemplate-openLegendModern .sheet-resizeNone textarea { resize: none; overflow: auto; } .sheet-resizeVert textarea, .sheet-rolltemplate-openLegend .sheet-resizeVert textarea, .sheet-rolltemplate-openLegend-boon .sheet-resizeVert textarea, .sheet-rolltemplate-openLegend-attack .sheet-resizeVert textarea, .sheet-rolltemplate-openLegend-effect .sheet-resizeVert textarea, .sheet-rolltemplate-openLegendNormal .sheet-resizeVert textarea, .sheet-rolltemplate-openLegendModern .sheet-resizeVert textarea { resize: vertical; overflow: auto; } .sheet-resizeHorz textarea, .sheet-rolltemplate-openLegend .sheet-resizeHorz textarea, .sheet-rolltemplate-openLegend-boon .sheet-resizeHorz textarea, .sheet-rolltemplate-openLegend-attack .sheet-resizeHorz textarea, .sheet-rolltemplate-openLegend-effect .sheet-resizeHorz textarea, .sheet-rolltemplate-openLegendNormal .sheet-resizeHorz textarea, .sheet-rolltemplate-openLegendModern .sheet-resizeHorz textarea { resize: horizontal; overflow: auto; } .sheet-resizeBoth textarea, .sheet-rolltemplate-openLegend .sheet-resizeBoth textarea, .sheet-rolltemplate-openLegend-boon .sheet-resizeBoth textarea, .sheet-rolltemplate-openLegend-attack .sheet-resizeBoth textarea, .sheet-rolltemplate-openLegend-effect .sheet-resizeBoth textarea, .sheet-rolltemplate-openLegendNormal .sheet-resizeBoth textarea, .sheet-rolltemplate-openLegendModern .sheet-resizeBoth textarea { resize: both; overflow: auto; } /* Text effects */ .sheet-bold, .sheet-rolltemplate-openLegend .sheet-bold, .sheet-rolltemplate-openLegend-boon .sheet-bold, .sheet-rolltemplate-openLegend-attack .sheet-bold, .sheet-rolltemplate-openLegend-effect .sheet-bold, .sheet-rolltemplate-openLegendNormal .sheet-bold, .sheet-rolltemplate-openLegendModern .sheet-bold { font-weight: bold; } .sheet-bolder, .sheet-rolltemplate-openLegend .sheet-bolder, .sheet-rolltemplate-openLegend-boon .sheet-bolder, .sheet-rolltemplate-openLegend-attack .sheet-bolder, .sheet-rolltemplate-openLegend-effect .sheet-bolder, .sheet-rolltemplate-openLegendNormal .sheet-bolder, .sheet-rolltemplate-openLegendModern .sheet-bolder { font-weight: 900; } .sheet-italic, .sheet-rolltemplate-openLegend .sheet-italic, .sheet-rolltemplate-openLegend-boon .sheet-italic, .sheet-rolltemplate-openLegend-attack .sheet-italic, .sheet-rolltemplate-openLegend-effect .sheet-italic, .sheet-rolltemplate-openLegendNormal .sheet-italic, .sheet-rolltemplate-openLegendModern .sheet-italic { font-style: italic; } .sheet-textSmall, .sheet-rolltemplate-openLegend .sheet-textSmall, .sheet-rolltemplate-openLegend-boon .sheet-textSmall, .sheet-rolltemplate-openLegend-attack .sheet-textSmall, .sheet-rolltemplate-openLegend-effect .sheet-textSmall, .sheet-rolltemplate-openLegendNormal .sheet-textSmall, .sheet-rolltemplate-openLegendModern .sheet-textSmall { font-size: 0.7em; font-family: Verdana, sans-serif; } .sheet-textMedium, .sheet-rolltemplate-openLegend .sheet-textMedium, .sheet-rolltemplate-openLegend-boon .sheet-textMedium, .sheet-rolltemplate-openLegend-attack .sheet-textMedium, .sheet-rolltemplate-openLegend-effect .sheet-textMedium, .sheet-rolltemplate-openLegendNormal .sheet-textMedium, .sheet-rolltemplate-openLegendModern .sheet-textMedium { font-size: 1.0em; } .sheet-textLarge, .sheet-rolltemplate-openLegend .sheet-textLarge, .sheet-rolltemplate-openLegend-boon .sheet-textLarge, .sheet-rolltemplate-openLegend-attack .sheet-textLarge, .sheet-rolltemplate-openLegend-effect .sheet-textLarge, .sheet-rolltemplate-openLegendNormal .sheet-textLarge, .sheet-rolltemplate-openLegendModern .sheet-textLarge { font-size: 1.2em; } .sheet-textLarger, .sheet-rolltemplate-openLegend .sheet-textLarger, .sheet-rolltemplate-openLegend-boon .sheet-textLarger, .sheet-rolltemplate-openLegend-attack .sheet-textLarger, .sheet-rolltemplate-openLegend-effect .sheet-textLarger, .sheet-rolltemplate-openLegendNormal .sheet-textLarger, .sheet-rolltemplate-openLegendModern .sheet-textLarger { font-size: 1.5em; font-family: Georgia, Verdana, sans-serif; } .sheet-textLargest, .sheet-rolltemplate-openLegend .sheet-textLargest, .sheet-rolltemplate-openLegend-boon .sheet-textLargest, .sheet-rolltemplate-openLegend-attack .sheet-textLargest, .sheet-rolltemplate-openLegend-effect .sheet-textLargest, .sheet-rolltemplate-openLegendNormal .sheet-textLargest, .sheet-rolltemplate-openLegendModern .sheet-textLargest { font-size: 2.0em; font-family: Georgia, Verdana, sans-serif; } .sheet-smallCaps { font-variant: small-caps; } /* START alignment */ .sheet-textLeft, .sheet-rolltemplate-openLegend .sheet-textLeft, .sheet-rolltemplate-openLegend-boon .sheet-textLeft, .sheet-rolltemplate-openLegend-attack .sheet-textLeft, .sheet-rolltemplate-openLegend-effect .sheet-textLeft, .sheet-rolltemplate-openLegendNormal .sheet-textLeft, .sheet-rolltemplate-openLegendModern .sheet-textLeft { text-align: left; } .sheet-textRight, .sheet-rolltemplate-openLegend .sheet-textRight, .sheet-rolltemplate-openLegend-boon .sheet-textRight, .sheet-rolltemplate-openLegend-attack .sheet-textRight, .sheet-rolltemplate-openLegend-effect .sheet-textRight, .sheet-rolltemplate-openLegendNormal .sheet-textRight, .sheet-rolltemplate-openLegendModern .sheet-textRight { text-align: right; } .sheet-textCenter, .sheet-rolltemplate-openLegend .sheet-textCenter, .sheet-rolltemplate-openLegend-boon .sheet-textCenter, .sheet-rolltemplate-openLegend-attack .sheet-textCenter, .sheet-rolltemplate-openLegend-effect .sheet-textCenter, .sheet-rolltemplate-openLegendNormal .sheet-textCenter, .sheet-rolltemplate-openLegendModern .sheet-textCenter { text-align: center; } .sheet-vertTop, .sheet-rolltemplate-openLegend .sheet-vertTop, .sheet-rolltemplate-openLegend-boon .sheet-vertTop, .sheet-rolltemplate-openLegend-attack .sheet-vertTop, .sheet-rolltemplate-openLegend-effect .sheet-vertTop, .sheet-rolltemplate-openLegendNormal .sheet-vertTop, .sheet-rolltemplate-openLegendModern .sheet-vertTop { vertical-align: top; } .sheet-vertMiddle, .sheet-rolltemplate-openLegend .sheet-vertMiddle, .sheet-rolltemplate-openLegend-boon .sheet-vertMiddle, .sheet-rolltemplate-openLegend-attack .sheet-vertMiddle, .sheet-rolltemplate-openLegend-effect .sheet-vertMiddle, .sheet-rolltemplate-openLegendNormal .sheet-vertMiddle, .sheet-rolltemplate-openLegendModern .sheet-vertMiddle { vertical-align: middle; } .sheet-vertBottom, .sheet-rolltemplate-openLegend .sheet-vertBottom, .sheet-rolltemplate-openLegend-boon .sheet-vertBottom, .sheet-rolltemplate-openLegend-attack .sheet-vertBottom, .sheet-rolltemplate-openLegend-effect .sheet-vertBottom, .sheet-rolltemplate-openLegendNormal .sheet-vertBottom, .sheet-rolltemplate-openLegendModern .sheet-vertBottom { vertical-align: bottom; } /* START Display */ .sheet-inlineBlock, .sheet-rolltemplate-openLegend .sheet-inlineBlock, .sheet-rolltemplate-openLegend-boon .sheet-inlineBlock, .sheet-rolltemplate-openLegend-attack .sheet-inlineBlock, .sheet-rolltemplate-openLegend-effect .sheet-inlineBlock, .sheet-rolltemplate-openLegendNormal .sheet-inlineBlock, .sheet-rolltemplate-openLegendModern .sheet-inlineBlock { display: inline-block; } .sheet-block, .sheet-rolltemplate-openLegend .sheet-block, .sheet-rolltemplate-openLegend-boon .sheet-block, .sheet-rolltemplate-openLegend-attack .sheet-block, .sheet-rolltemplate-openLegend-effect .sheet-block, .sheet-rolltemplate-openLegendNormal .sheet-block, .sheet-rolltemplate-openLegendModern .sheet-block { display: block; } .sheet-inline, .sheet-rolltemplate-openLegend .sheet-inline, .sheet-rolltemplate-openLegend-boon .sheet-inline, .sheet-rolltemplate-openLegend-attack .sheet-inline, .sheet-rolltemplate-openLegend-effect .sheet-inline, .sheet-rolltemplate-openLegendNormal .sheet-inline, .sheet-rolltemplate-openLegendModern .sheet-inline { display: inline; } .sheet-marginCenter, .sheet-rolltemplate-openLegend .sheet-marginCenter { margin: 0 auto; } .sheet-marginTop, .sheet-rolltemplate-openLegend .sheet-marginTop { margin-top: 5px; } .sheet-marginBottom, .sheet-rolltemplate-openLegend .sheet-margiBottom { margin-bottom: 5px; } .sheet-marginLeft, .sheet-rolltemplate-openLegend .sheet-marginLeft { margin-left: 5px; } .sheet-marginRight, .sheet-rolltemplate-openLegend .sheet-marginRight { margin-right: 5px; } /* add shadows to text or divs/boxes */ .sheet-boxShadow, .sheet-rolltemplate-openLegend .sheet-boxShadow, .sheet-rolltemplate-openLegend-boon .sheet-boxShadow, .sheet-rolltemplate-openLegend-attack .sheet-boxShadow, .sheet-rolltemplate-openLegend-effect .sheet-boxShadow, .sheet-rolltemplate-openLegendNormal .sheet-boxShadow, .sheet-rolltemplate-openLegendModern .sheet-boxShadow { box-shadow: 0 2px 8px rgba(0, 0, 0, .3); } .sheet-textShadow, .sheet-rolltemplate-openLegend .sheet-textShadow, .sheet-rolltemplate-openLegend-boon .sheet-textShadow, .sheet-rolltemplate-openLegend-attack .sheet-textShadow, .sheet-rolltemplate-openLegend-effect .sheet-textShadow, .sheet-rolltemplate-openLegendNormal .sheet-textShadow, .sheet-rolltemplate-openLegendModern .sheet-textShadow { text-shadow: 2px 2px 4px #000000; } .sheet-scroll, .sheet-rolltemplate-openLegend .sheet-scroll, .sheet-rolltemplate-openLegend-boon .sheet-scroll, .sheet-rolltemplate-openLegend-attack .sheet-scroll, .sheet-rolltemplate-openLegend-effect .sheet-scroll, .sheet-rolltemplate-openLegendNormal .sheet-scroll, .sheet-rolltemplate-openLegendModern .sheet-scroll { overflow-y: auto; } /* Text & Number formatting */ .charsheet input, .charsheet select { display: inline-block; width: 95%; padding-Top: 0; padding-Bottom: 0; } /*** Remove the 'spinners' (up/down graphic arrows), mouse wheel still works as well as up/down arrows on keyboard ***/ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: textfield; appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } /*** Select fields (options) without border or down arrow ***/ .sheet-inputSelect select { border: 0px; background: #AAAAAA; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-border-radius: 2px; border-radius: 2px; color: white; text-align: center; display: inline-block; font-size: 16px; padding: 0px; margin: 0px; line-height: 18px; height: 18px; } /*** Input as numbers ***/ .sheet-inputNumber input[type=number], .sheet-inputNumber30 input[type=number], .sheet-inputNumber60 input[type=number] { border-bottom: 1px solid #AAAAAA; border-top: 0px; border-left: 0px; border-right: 0px; background: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: textfield; -webkit-border-radius: 0px; border-radius: 10px; color: black; text-align: center; } .sheet-inputNumber30 input[type=number] { width: 30px; height: 18px; line-height: 18px; } .sheet-inputNumber60 input[type=number] { width: 60px; height: 18px; line-height: 18px; background-color: silver; } .sheet-inputNumberLarge input[type=number] { border-bottom: 0px; border-top: 0px; border-left: 0px; border-right: 0px; background: #cccccc; box-shadow: none; -webkit-appearance: none; -moz-appearance: textfield; height: 70px; width: 80px; text-align: center; color: black; font-size: 40px; } .sheet-inputNumberLargeNarrow input[type=number] { border-bottom: 0px; border-top: 0px; border-left: 0px; border-right: 0px; background: #cccccc; box-shadow: none; -webkit-appearance: none; -moz-appearance: textfield; height: 70px; width: 60px; text-align: center; color: black; font-size: 40px; } .sheet-inputNumberLargeShort input[type=number] { border-bottom: 0px; border-top: 0px; border-left: 0px; border-right: 0px; background: #cccccc; box-shadow: none; -webkit-appearance: none; -moz-appearance: textfield; height: 50px; width: 80px; text-align: center; color: black; font-size: 40px; } .sheet-inputNumberLargeNarrowShort input[type=number] { border-bottom: 0px; border-top: 0px; border-left: 0px; border-right: 0px; background: #cccccc; box-shadow: none; -webkit-appearance: none; -moz-appearance: textfield; height: 50px; width: 55px; text-align: center; color: black; font-size: 40px; } .sheet-inputNumberLargeLethal input[type=number] { border-bottom: 0px; border-top: 0px; border-left: 0px; border-right: 0px; background: #111111; box-shadow: none; -webkit-appearance: none; -moz-appearance: textfield; height: 70px; width: 60px; text-align: center; color: #cccccc; font-size: 40px; } .sheet-inputNumberLargeLethalShort input[type=number] { border-bottom: 0px; border-top: 0px; border-left: 0px; border-right: 0px; background: #111111; box-shadow: none; -webkit-appearance: none; -moz-appearance: textfield; height: 50px; width: 60px; text-align: center; color: #cccccc; font-size: 40px; } /*** FOR CHECKBOX SELECTION ***/ /*** FOR SHOW/HIDE ***/ input[type=checkbox].sheet-tab-hide { display: inline-block; width: 24px; opacity: 0; z-index: 2; } input[type=checkbox].sheet-tab-hide + div { display: inline-block; margin-left: -27px; width: 25px; font-family: pictos; font-size: 2.0em; color: #A0A0A0; cursor: pointer; } input[type=checkbox].sheet-tab-hide:checked + div { display: inline-block; color: black; } input[type=checkbox].sheet-tab-hide:hover + div, input[type=checkbox].sheet-tab-hide:hover * { display: inline-block; color: blue; } /*** END FOR SHOW/HIDE ***/ /*** END FOR CHECKBOX SELECTION ***/ /*** FOR RADIO SELECTION ***/ /*** FOR MAIN SHEET ***/ input[type=radio].sheet-tab-sheet { opacity: 0; width: 100px; height: 18px; z-index: 2; } input[type=radio].sheet-tab-sheet + div { margin-left: -100px; display: inline-block; width: 100px; padding: 5px; border: 1px solid black; border-radius: 5px; background-color: #DDDDDD; color: black; font-family: Verdana, Geneva, sans-serif; font-variant: small-caps; text-align:center; font-weight: bold; } input[type=radio].sheet-tab-sheet.sheet-main:checked + div, input[type=radio].sheet-tab-sheet.sheet-background:checked + div, input[type=radio].sheet-tab-sheet.sheet-options:checked + div { background-color: #111111; color:#DDDDDD; } /*** END FOR MAIN SHEET ***/ /*** FOR WHISPER optionsT ***/ input[type=radio].sheet-tab-chat { opacity: 0; width: 65px; height: 18px; z-index: 2; } input[type=radio].sheet-tab-chat + div { margin-left: -65px; display: inline-block; width: 65px; padding: 5px; border: 1px solid black; border-radius: 20px; background-color: #DDDDDD; color: black; font-family: "Arial Black", Gadget, sans-serif; font-variant: small-caps; text-align:center; } input[type=radio].sheet-tab-chat.sheet-public:checked + div, input[type=radio].sheet-tab-chat.sheet-gm:checked + div { background-color: #111111; color:#DDDDDD; } /*** END FOR Whisper Options ***/ /*** FOR ACTIONS ***/ input[type=radio].sheet-tab-action { opacity: 0; width: 50px; height: 18px; z-index: 2; } input[type=radio].sheet-tab-action + span { margin-left: -50px; padding: 5px; border: 1px solid black; border-radius: 5px; background-color: #DDDDDD; color: black; text-align:center; font-weight: bold; } input[type=radio].sheet-tab-action.sheet-attack:checked + span, input[type=radio].sheet-tab-action.sheet-boon:checked + span, input[type=radio].sheet-tab-action.sheet-effect:checked + span { background-color: #111111; color:#DDDDDD; } .sheet-tab-action-text + span { display: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 4; top: 100%; left: 50%; margin-left: -60px; } .sheet-tab-action-text:hover + span { display: float; } /*** END FOR ACTIONS ***/ /*** END FOR RADIO SELECTION ***/ /*** Input as text for skill name (or just a blank line) ***/ .sheet-inputName input[type=text] { border-bottom: 1px solid #AAAAAA; 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: 10px; color: black; } .sheet-inputNameShort input[type=text] { border-bottom: 1px solid #AAAAAA; 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: 10px; color: black; height: 18px; line-height: 18px; } /*** Input as text for dice size (usually d4/d6/d8/d10 etc) ***/ .sheet-inputDiceNum input[type=text] { box-shadow: none; padding: 0px; margin: 0px; width: 15px; background: none; border: none; /*** border-top: solid 1px #111111; border-bottom: solid 1px #111111; border-left: solid 1px #111111; border-right: 0px; ***/ text-align: right; } /*** Input as text for dice size (usually d4/d6/d8/d10 etc) ***/ .sheet-inputDiceType select { border: 0px; background: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-border-radius: 0px; border-radius: 0px; color: black; text-align: left; display: inline-block; padding: 0px; margin: 0px; line-height: 18px; height: 18px; width: 35px; } .sheet-inputDiceType input[type=text] { box-shadow: none; padding: 0px; margin: 0px; width: 35px; background: none; border: none; text-align: left; } /*** Input as text for dice size (usually d4/d6/d8/d10 etc) ***/ .sheet-inputDice input[type=text] { background: none; border: dashed 1px #111111; -webkit-border-radius: 4px; border-radius: 4px; text-align: center; } /*** Input as number for level of skill (typically 1 digit) ***/ .sheet-inputLevel input[type=number] { border-bottom: 0px; border-top: 0px; border-left: 0px; border-right: 0px; background: #AAAAAA; box-shadow: none; -webkit-appearance: none; -moz-appearance: textfield; -webkit-border-radius: 20px; border-radius: 20px; text-align: center; color: white; width: 30px; } /*** Attribute Button formatting to make the line clickable ***/ .sheet-attributeButton button[type=roll] { background-color: transparent; color: black; font-style: italic; text-align: left; border: none; line-height: 15px; background-image: none; text-shadow: none; box-shadow: none; margin: 0px; width: 100%; } /*** Resolve/Toughness/Agility Button formatting to make the line clickable ***/ .sheet-resistButton button[type=roll] { background-color: transparent; border: none; font-weight: bold; font-size: 2.0em; font-family: Georgia, Verdana, sans-serif; line-height: 18px; background-image: none; text-shadow: none; box-shadow: none; margin: 0px; width: 100%; } /*** Inventory Button formatting to make the line clickable ***/ .sheet-inventoryButton button[type=roll] { background-color: transparent; color: black; border: none; line-height: 12px; font-weight: bold; background-image: none; text-shadow: none; box-shadow: none; margin: 0px; width: 100%; } /*** Resolve/Toughness/Agility Button formatting to make the line clickable ***/ .sheet-speedButton button[type=roll] { background-color: #111111; color: #cccccc; border: none; font-weight: bold; font-size: 1.0em; font-family: Georgia, Verdana, sans-serif; line-height: 15px; background-image: none; border-radius: 10px; text-shadow: none; box-shadow: none; margin: 0px; width: 100%; } button[type=roll]::before, * button[type=roll]::before { content: "" !important; } button[type=roll]:hover, button[type=roll]:hover * { font-weight: normal; color: #AAAAAA; } button[type=roll] * { pointer-events: none; } /* Checkbox & Radio formatting */ /*** make regular checkboxes closer to surrounding items ***/ input.sheet-checks { width: 12px; height: 12px; display: inline; margin-left: -2px; margin-right: -2px; } /*** same as above but 2x the size ***/ input.sheet-checks25 { width: 25px; height: 25px; display: inline; margin-left: -2px; margin-right: -2px; } /*** Slider Checkbox ***/ input.sheet-checkboxSliderInvis { top: 0; right: 0; bottom: 0; left: 0; z-index: 2; position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .sheet-checkboxSlider { width: 60px; height: 20px; background: #333; margin-left: auto; margin-right: auto; margin-top: 5px; margin-bottom: 5px; border-radius: 25px; position: relative; } /*** On position ***/ .sheet-checkboxSlider:before { content: 'On'; position: absolute; top: 1px; left: 6px; height: 2px; color: #26ca28; font-size: 14px; } /*** Off position ***/ .sheet-checkboxSlider:after { content: 'Off'; position: absolute; top: 1px; left: 32px; height: 1px; color: #ddd; font-size: 14px; } /*** Clickable 'Pill' ***/ .sheet-checkboxSlider label { display: block; width: 15px; height: 10px; border-radius: 25px; transition: all .5s ease; cursor: pointer; position: absolute; z-index: 1; top: 5px; left: 6px; background: #ddd; } /*** Checkbox Checked ***/ .sheet-checkboxSlider input[type=checkbox]:checked + label { left: 30px; background: #26ca28; } /* Settings button as gear (uses letter 'y' in pictos font) as a checkbox to be used with javascript */ .sheet-settings { display: inline-block; width: 14px; opacity: 0; z-index: 2; } .sheet-settings + span { margin-left: -17px; font-size: 20px; font-family: pictos; color: #A0A0A0; cursor: pointer; display: inline-Block; } .sheet-settings:checked + span { color: black; display: inline-block; } .sheet-settings:hover + span, .sheet-settings:hover * { color: blue; display: inline-block; } /* Making the columns fit snug to each other inside the rows */ .sheet-row, .sheet-rolltemplate-openLegend .sheet-row, .sheet-rolltemplate-openLegend-boon .sheet-row, .sheet-rolltemplate-openLegend-attack .sheet-row, .sheet-rolltemplate-openLegend-effect .sheet-row, .sheet-rolltemplate-openLegendNormal .sheet-row, .sheet-rolltemplate-openLegendModern .sheet-row { letter-spacing: -0.31em; *letter-spacing: normal; *word-spacing: -0.43em; } /* Making what's in the columns be normal again */ .sheet-column, .sheet-rolltemplate-openLegend .sheet-column, .sheet-rolltemplate-openLegend-boon .sheet-column, .sheet-rolltemplate-openLegend-attack .sheet-column, .sheet-rolltemplate-openLegend-effect .sheet-column, .sheet-rolltemplate-openLegendNormal .sheet-column, .sheet-rolltemplate-openLegendModern .sheet-column { letter-spacing: normal; word-spacing: normal; } /* Hide and Show different sections */ .sheet-border, .sheet-rolltemplate-openLegend .sheet-border, .sheet-rolltemplate-openLegend-boon .sheet-borderNormal, .sheet-rolltemplate-openLegend-attack .sheet-borderNormal, .sheet-rolltemplate-openLegend-effect .sheet-borderNormal, .sheet-rolltemplate-openLegend .sheet-borderNormal, .sheet-rolltemplate-openLegendNormal .sheet-border { border: 10px solid transparent; padding: 0px; -webkit-border-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/border%20Paper.png?raw=true") 10 round; -moz-border-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/border%20Paper.png?raw=true") 10 round; border-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/border%20Paper.png?raw=true") 10 round; } .sheet-normalBorder, .sheet-rolltemplate-openLegend .sheet-normalBorder, .sheet-rolltemplate-openLegend-boon .sheet-normalBorder, .sheet-rolltemplate-openLegend-attack .sheet-normalBorder, .sheet-rolltemplate-openLegend-effect .sheet-normalBorder, .sheet-rolltemplate-openLegendNormal .sheet-normalBorder { border: 10px solid transparent; padding: 0px; -webkit-border-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/border%20Paper.png?raw=true") 10 round; -moz-border-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/border%20Paper.png?raw=true") 10 round; border-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/border%20Paper.png?raw=true") 10 round; } .sheet-display_alternate_border_flag[value="show"] ~ .sheet-normalBorder, .sheet-rolltemplate-openLegendModern .sheet-modernBorder { border: 10px solid transparent; padding: 0px; -webkit-border-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/Modern%20Border.png?raw=true") 25 round; -moz-border-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/Modern%20Border.png?raw=true") 25 round; border-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/Modern%20Border.png?raw=true") 25 round; } .sheet-rolltemplate-openLegend-boon .sheet-borderModern, .sheet-rolltemplate-openLegend-effect .sheet-borderModern, .sheet-rolltemplate-openLegend-attack .sheet-borderModern, .sheet-rolltemplate-openLegend .sheet-borderModern { border: 10px solid transparent; padding: 0px; -webkit-border-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/Modern%20Border.png?raw=true") 25 round; -moz-border-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/Modern%20Border.png?raw=true") 25 round; border-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Open%20Legend/Modern%20Border.png?raw=true") 25 round; } .sheet-agility_display_sub_flag[value="show"] ~ .sheet-sub, .sheet-fortitude_display_sub_flag[value="show"] ~ .sheet-sub, .sheet-might_display_sub_flag[value="show"] ~ .sheet-sub, .sheet-learning_display_sub_flag[value="show"] ~ .sheet-sub, .sheet-logic_display_sub_flag[value="show"] ~ .sheet-sub, .sheet-perception_display_sub_flag[value="show"] ~ .sheet-sub, .sheet-will_display_sub_flag[value="show"] ~ .sheet-sub, .sheet-deception_display_sub_flag[value="show"] ~ .sheet-sub, .sheet-persuasion_display_sub_flag[value="show"] ~ .sheet-sub, .sheet-presence_display_sub_flag[value="show"] ~ .sheet-sub, .sheet-alteration_display_sub_flag[value="show"] ~ .sheet-sub, .sheet-creation_display_sub_flag[value="show"] ~ .sheet-sub, .sheet-energy_display_sub_flag[value="show"] ~ .sheet-sub, .sheet-entropy_display_sub_flag[value="show"] ~ .sheet-sub, .sheet-influence_display_sub_flag[value="show"] ~ .sheet-sub, .sheet-movement_display_sub_flag[value="show"] ~ .sheet-sub, .sheet-prescience_display_sub_flag[value="show"] ~ .sheet-sub, .sheet-protection_display_sub_flag[value="show"] ~ .sheet-sub { background-color: #7FDBFF; } .sheet-option-main { display: none; } input[type=radio].sheet-tab-sheet.sheet-main:checked ~ .sheet-option-main.sheet-main, input[type=radio].sheet-tab-sheet.sheet-background:checked ~ .sheet-option-main.sheet-background, input[type=radio].sheet-tab-sheet.sheet-options:checked ~ .sheet-option-main.sheet-options { display: block; } .sheet-displaySheetCharacter, .sheet-displaySheetAltForm1, .sheet-displaySheetAltForm2, .sheet-displaySheetCompanion1, .sheet-displaySheetCompanion2, .sheet-displaySheetCompanion3, .sheet-displaySheetNPC { display: none; } .sheet-display_sheet_type[value="character"] ~ .sheet-displaySheetCharacter, .sheet-display_sheet_type[value="alt form 1"] ~ .sheet-displaySheetCharacter.sheet-main, .sheet-display_sheet_type[value="alt form 2"] ~ .sheet-displaySheetCharacter.sheet-main, .sheet-display_sheet_type[value="companion 1"] ~ .sheet-displaySheetCharacter.sheet-main, .sheet-display_sheet_type[value="companion 2"] ~ .sheet-displaySheetCharacter.sheet-main, .sheet-display_sheet_type[value="companion 3"] ~ .sheet-displaySheetCharacter.sheet-main, .sheet-display_sheet_type[value="alt form 1"] ~ .sheet-displaySheetAltForm1, .sheet-display_sheet_type[value="alt form 2"] ~ .sheet-displaySheetAltForm2, .sheet-display_sheet_type[value="companion 1"] ~ .sheet-displaySheetCompanion1, .sheet-display_sheet_type[value="companion 2"] ~ .sheet-displaySheetCompanion2, .sheet-display_sheet_type[value="companion 3"] ~ .sheet-displaySheetCompanion3, .sheet-display_sheet_type[value="npc"] ~ .sheet-displaySheetNPC { display: inline-block; } .sheet-option-action { display: none; } input[type=radio].sheet-tab-action.sheet-attack:checked ~ .sheet-option-action.sheet-attack, input[type=radio].sheet-tab-action.sheet-boon:checked ~ .sheet-option-action.sheet-boon, input[type=radio].sheet-tab-action.sheet-attack:checked ~ .sheet-option-action.sheet-both, input[type=radio].sheet-tab-action.sheet-boon:checked ~ .sheet-option-action.sheet-both, input[type=radio].sheet-tab-action.sheet-attack:checked ~ .sheet-option-action.sheet-all, input[type=radio].sheet-tab-action.sheet-boon:checked ~ .sheet-option-action.sheet-all, input[type=radio].sheet-tab-action.sheet-effect:checked ~ .sheet-option-action.sheet-all, input[type=radio].sheet-tab-action.sheet-effect:checked ~ .sheet-option-action.sheet-effect { display: inline-block; } .sheet-option-boon { display: none; width: 45%; } input[type=checkbox].sheet-display-boon.sheet-pl1:checked ~ .sheet-option-boon.sheet-pl1, input[type=checkbox].sheet-display-boon.sheet-pl2:checked ~ .sheet-option-boon.sheet-pl2, input[type=checkbox].sheet-display-boon.sheet-pl3:checked ~ .sheet-option-boon.sheet-pl3, input[type=checkbox].sheet-display-boon.sheet-pl4:checked ~ .sheet-option-boon.sheet-pl4, input[type=checkbox].sheet-display-boon.sheet-pl5:checked ~ .sheet-option-boon.sheet-pl5, input[type=checkbox].sheet-display-boon.sheet-pl6:checked ~ .sheet-option-boon.sheet-pl6, input[type=checkbox].sheet-display-boon.sheet-pl7:checked ~ .sheet-option-boon.sheet-pl7, input[type=checkbox].sheet-display-boon.sheet-pl8:checked ~ .sheet-option-boon.sheet-pl8, input[type=checkbox].sheet-display-boon.sheet-pl9:checked ~ .sheet-option-boon.sheet-pl9 { display: inline-block; } .sheet-show-hide { display: none; } input[type=checkbox].sheet-tab-hide:checked ~ .sheet-show-hide { display: inline-block; } .sheet-displaySettings { display: block; } .sheet-displayCharacter, .sheet-displayAttributes, .sheet-displayDefenses, .sheet-displayHealthSpeed, .sheet-displayFavoredActions, .sheet-displayOtherActions, .sheet-displayLegendaryItems, .sheet-displayFeats, .sheet-displayPerksFlaws, .sheet-displayInventory, .sheet-displayOtherInventory, .sheet-displayGoalsBeliefs, .sheet-displaySanity { display: inline-block; } .sheet-display_character_flag[value="hide"] ~ .sheet-displayCharacter, .sheet-display_attributes_flag[value="hide"] ~ .sheet-displayAttributes, .sheet-display_defenses_flag[value="hide"] ~ .sheet-displayDefenses, .sheet-display_healthspeed_flag[value="hide"] ~ .sheet-displayHealthSpeed, .sheet-display_favoredactions_flag[value="hide"] ~ .sheet-displayFavoredActions, .sheet-display_otheractions_flag[value="hide"] ~ .sheet-displayOtherActions, .sheet-display_legendaryitems_flag[value="hide"] ~ .sheet-displayLegendaryItems, .sheet-display_feats_flag[value="hide"] ~ .sheet-displayFeats, .sheet-display_perksflaws_flag[value="hide"] ~ .sheet-displayPerksFlaws, .sheet-display_inventory_flag[value="hide"] ~ .sheet-displayInventory, .sheet-display_otherinventory_flag[value="hide"] ~ .sheet-displayOtherInventory, .sheet-display_goalsbeliefs_flag[value="hide"] ~ .sheet-displayGoalsBeliefs, .sheet-display_sanity_flag[value="hide"] ~ .sheet-displaySanity, .sheet-displaySettingsFlag[value="hide"] ~ .sheet-displaySettings, .sheet-agility_display_settings_flag[value="hide"] ~ .sheet-displaySettings, .sheet-fortitude_display_settings_flag[value="hide"] ~ .sheet-displaySettings, .sheet-might_display_settings_flag[value="hide"] ~ .sheet-displaySettings, .sheet-learning_display_settings_flag[value="hide"] ~ .sheet-displaySettings, .sheet-logic_display_settings_flag[value="hide"] ~ .sheet-displaySettings, .sheet-perception_display_settings_flag[value="hide"] ~ .sheet-displaySettings, .sheet-will_display_settings_flag[value="hide"] ~ .sheet-displaySettings, .sheet-deception_display_settings_flag[value="hide"] ~ .sheet-displaySettings, .sheet-persuasion_display_settings_flag[value="hide"] ~ .sheet-displaySettings, .sheet-presence_display_settings_flag[value="hide"] ~ .sheet-displaySettings, .sheet-alteration_display_settings_flag[value="hide"] ~ .sheet-displaySettings, .sheet-creation_display_settings_flag[value="hide"] ~ .sheet-displaySettings, .sheet-energy_display_settings_flag[value="hide"] ~ .sheet-displaySettings, .sheet-entropy_display_settings_flag[value="hide"] ~ .sheet-displaySettings, .sheet-influence_display_settings_flag[value="hide"] ~ .sheet-displaySettings, .sheet-movement_display_settings_flag[value="hide"] ~ .sheet-displaySettings, .sheet-prescience_display_settings_flag[value="hide"] ~ .sheet-displaySettings, .sheet-protection_display_settings_flag[value="hide"] ~ .sheet-displaySettings, .sheet-displaySettingsFlagItem1[value="hide"] + .sheet-displaySettings, .sheet-displaySettingsFlagItem2[value="hide"] + .sheet-displaySettings, .sheet-displaySettingsFlagItem3[value="hide"] + .sheet-displaySettings, .sheet-displaySettingsFlagItem4[value="hide"] + .sheet-displaySettings, .sheet-displaySettingsFlagItem5[value="hide"] + .sheet-displaySettings, .sheet-displaySettingsFlagItem6[value="hide"] + .sheet-displaySettings, .sheet-displaySettingsFlagItem7[value="hide"] + .sheet-displaySettings, .sheet-displaySettingsFlagItem8[value="hide"] + .sheet-displaySettings, .sheet-displaySettingsFlagItem9[value="hide"] + .sheet-displaySettings, .sheet-displaySettingsFlagItem10[value="hide"] + .sheet-displaySettings, .sheet-displaySettingsFlagItem11[value="hide"] + .sheet-displaySettings, .sheet-displaySettingsFlagItem12[value="hide"] + .sheet-displaySettings, .sheet-displaySettingsFlagItem13[value="hide"] + .sheet-displaySettings, .sheet-displaySettingsFlagItem14[value="hide"] + .sheet-displaySettings, .sheet-displaySettingsFlagItem15[value="hide"] + .sheet-displaySettings, .sheet-displaySettingsFlagItem16[value="hide"] + .sheet-displaySettings, .sheet-displaySettingsFlagItem17[value="hide"] + .sheet-displaySettings, .sheet-displaySettingsFlagItem18[value="hide"] + .sheet-displaySettings, .sheet-displaySettingsFlagItem19[value="hide"] + .sheet-displaySettings, .sheet-displaySettingsFlagItem20[value="hide"] + .sheet-displaySettings, .sheet-displaySettingsFlagInitiative[value="hide"] ~ .sheet-displaySettingsInitiative { display: none; } /* Boring Pre-defined width & height options */ .sheet-width5, .sheet-rolltemplate-openLegend .sheet-width5 { width: 5%; } .sheet-width6, .sheet-rolltemplate-openLegend .sheet-width6 { width: 6%; } /* for Attribute settings */ .sheet-width10, .sheet-rolltemplate-openLegend .sheet-width10 { width: 10%; } .sheet-width15, .sheet-rolltemplate-openLegend .sheet-width15 { width: 15%; } .sheet-width20, .sheet-rolltemplate-openLegend .sheet-width20 { width: 20%; } .sheet-width25, .sheet-rolltemplate-openLegend .sheet-width25 { width: 25%; } .sheet-width30, .sheet-rolltemplate-openLegend .sheet-width30, .sheet-rolltemplate-openLegend-boon .sheet-width30, .sheet-rolltemplate-openLegend-attack .sheet-width30, .sheet-rolltemplate-openLegend-effect .sheet-width30, .sheet-rolltemplate-openLegendNormal .sheet-width30, .sheet-rolltemplate-openLegendModern .sheet-width30 { width: 30%; } .sheet-width35, .sheet-rolltemplate-openLegend .sheet-width35 { width: 35%; } .sheet-width39, .sheet-rolltemplate-openLegend .sheet-width39 { width: 39%; } /* for Attribute settings */ .sheet-width40, .sheet-rolltemplate-openLegend-boon .sheet-width40, .sheet-rolltemplate-openLegend-attack .sheet-width40, .sheet-rolltemplate-openLegend-effect .sheet-width40, .sheet-rolltemplate-openLegend .sheet-width40 { width: 40%; } .sheet-width45, .sheet-rolltemplate-openLegend .sheet-width45 { width: 45%; } .sheet-width50, .sheet-rolltemplate-openLegend .sheet-width50 { width: 50%; } .sheet-width55, .sheet-rolltemplate-openLegend-boon .sheet-width55, .sheet-rolltemplate-openLegend-attack .sheet-width55, .sheet-rolltemplate-openLegend-effect .sheet-width55, .sheet-rolltemplate-openLegend .sheet-width55 { width: 55%; } .sheet-width60, .sheet-rolltemplate-openLegend .sheet-width60 { width: 60%; } .sheet-width65, .sheet-rolltemplate-openLegend-boon .sheet-width65, .sheet-rolltemplate-openLegend-attack .sheet-width65, .sheet-rolltemplate-openLegend-effect .sheet-width65, .sheet-rolltemplate-openLegend .sheet-width65 { width: 65%; } .sheet-width70, .sheet-rolltemplate-openLegend .sheet-width70 { width: 70%; } .sheet-width75, .sheet-rolltemplate-openLegend .sheet-width75 { width: 75%; } .sheet-width80, .sheet-rolltemplate-openLegend .sheet-width80 { width: 80%; } .sheet-width85, .sheet-rolltemplate-openLegend .sheet-width85 { width: 85%; } .sheet-width90, .sheet-rolltemplate-openLegend .sheet-width90, .sheet-rolltemplate-openLegend-boon .sheet-width90, .sheet-rolltemplate-openLegend-attack .sheet-width90, .sheet-rolltemplate-openLegend-effect .sheet-width90, .sheet-rolltemplate-openLegendNormal .sheet-width90, .sheet-rolltemplate-openLegendModern .sheet-width90 { width: 90%; } .sheet-width95, .sheet-rolltemplate-openLegend .sheet-width95, .sheet-rolltemplate-openLegend-boon .sheet-width95, .sheet-rolltemplate-openLegend-attack .sheet-width95, .sheet-rolltemplate-openLegend-effect .sheet-width95, .sheet-rolltemplate-openLegendNormal .sheet-width95, .sheet-rolltemplate-openLegendModern .sheet-width95 { width: 95%; } .sheet-width100, .sheet-rolltemplate-openLegend .sheet-width100, .sheet-rolltemplate-openLegend-boon .sheet-width100, .sheet-rolltemplate-openLegend-attack .sheet-width100, .sheet-rolltemplate-openLegend-effect .sheet-width100, .sheet-rolltemplate-openLegendNormal .sheet-width100, .sheet-rolltemplate-openLegendModern .sheet-width100 { width: 100%; } .sheet-width1of3, .sheet-width2of6, .sheet-rolltemplate-openLegend .sheet-width1of3, .sheet-rolltemplate-openLegend .sheet-width2of6 { width: 33.33333%; } .sheet-width2of3, .sheet-width4of6, .sheet-rolltemplate-openLegend .sheet-width4of6, .sheet-rolltemplate-openLegend .sheet-width4of6 { width: 66.66667%; } .sheet-width1of6, .sheet-rolltemplate-openLegend .sheet-width1of6 { width: 16.66667%; } .sheet-width5of6, .sheet-rolltemplate-openLegend .sheet-width5of6 { width: 83.33333%; } .sheet-width1of8, .sheet-rolltemplate-openLegend .sheet-width1of8 { width: 12.5%; } .sheet-width3of8, .sheet-rolltemplate-openLegend .sheet-width3of8 { width: 37.5%; } .sheet-width5of8, .sheet-rolltemplate-openLegend .sheet-width5of8 { width: 62.5%; } .sheet-width7of8, .sheet-rolltemplate-openLegend .sheet-width7of8 { width: 87.5%; } .sheet-width165 { width: 165px; } .sheet-width275 { width: 275px; } .sheet-width825 { width: 825px; } .sheet-height5, .sheet-rolltemplate-openLegend .sheet-height5 { height: 5px; } .sheet-height10, .sheet-rolltemplate-openLegend .sheet-height10 { height: 10px; } .sheet-height15, .sheet-rolltemplate-openLegend .sheet-height15 { height: 15px; } .sheet-height25, .sheet-rolltemplate-openLegend .sheet-height25 { height: 25px; } .sheet-height40, .sheet-rolltemplate-openLegend .sheet-height40 { height: 40px; } .sheet-height50, .sheet-rolltemplate-openLegend .sheet-height50 { height: 50px; } .sheet-height75, .sheet-rolltemplate-openLegend .sheet-height75 { height: 75px; } .sheet-height80, .sheet-rolltemplate-openLegend .sheet-height80 { height: 80px; } .sheet-height100, .sheet-rolltemplate-openLegend .sheet-height100 { height: 100px; } .sheet-height150, .sheet-rolltemplate-openLegend .sheet-height150 { height: 150px; } /* All the color options for background & text * Colors: black, silver, gray/grey, white, red, navy, aqua, * purple, blue, teal, olive, green, lime, yellow, orange, maroon, fuchsia * text[Colorname] for text version */ .sheet-black, .sheet-rolltemplate-openLegend .sheet-black { background-color: #111111; color: #FFFFFF; } .sheet-textBlack, .sheet-rolltemplate-openLegend .sheet-textBlack { color: #111111;; } .sheet-silver, .sheet-rolltemplate-openLegend .sheet-silver { background-color: #DDDDDD; color: #111111; } .sheet-textSilver, .sheet-rolltemplate-openLegend .sheet-textSilver { color: #DDDDDD; } .sheet-gray, .sheet-grey, .sheet-rolltemplate-openLegend .sheet-gray, .sheet-rolltemplate-openLegend .sheet-grey { background-color: #AAAAAA; color: #111111; } .sheet-textGray, .sheet-textGrey, .sheet-rolltemplate-openLegend .sheet-textGray, .sheet-rolltemplate-openLegend .sheet-textGrey { color: #AAAAAA; } .sheet-white, .sheet-rolltemplate-openLegend .sheet-white, .sheet-rolltemplate-openLegend-boon .sheet-white, .sheet-rolltemplate-openLegend-attack .sheet-white, .sheet-rolltemplate-openLegend-effect .sheet-white, .sheet-rolltemplate-openLegendNormal .sheet-white, .sheet-rolltemplate-openLegendModern .sheet-white { background-color: #FFFFFF; color: #111111; } .sheet-textWhite, .sheet-rolltemplate-openLegend .sheet-textWhite { color: #FFFFFF; } .sheet-red, .sheet-rolltemplate-openLegend-boon .sheet-red, .sheet-rolltemplate-openLegend-attack .sheet-red, .sheet-rolltemplate-openLegend-effect .sheet-red, .sheet-rolltemplate-openLegend .sheet-red { background-color: #FF4136; color: #FFFFFF; } .sheet-textRed, .sheet-rolltemplate-openLegend .sheet-textRed { color: #FF4136; } .sheet-navy, .sheet-rolltemplate-openLegend .sheet-navy { background-color: #001F3F; color: #FFFFFF; } .sheet-textNavy, .sheet-rolltemplate-openLegend .sheet-textNavy { color: #001F3F; } .sheet-aqua, .sheet-rolltemplate-openLegend .sheet-aqua { background-color: #7FDBFF; color: #111111; } .sheet-textAqua, .sheet-rolltemplate-openLegend .sheet-textAqua { color: #7FDBFF;; } .sheet-purple, .sheet-rolltemplate-openLegend .sheet-purple { background-color: #B10DC9; color: #FFFFFF; } .sheet-textPurple, .sheet-rolltemplate-openLegend .sheet-textPurple { color: #B10DC9; } .sheet-blue, .sheet-rolltemplate-openLegend .sheet-blue { background-color: #0074D9; color: #FFFFFF; } .sheet-textBlue, .sheet-rolltemplate-openLegend .sheet-textBlue { color: #0074D9; } .sheet-teal, .sheet-rolltemplate-openLegend .sheet-teal { background-color: #39CCCC; color: #111111; } .sheet-textTeal, .sheet-rolltemplate-openLegend .sheet-textTeal { color: #39CCCC; } .sheet-olive, .sheet-rolltemplate-openLegend .sheet-olive { background-color: #3D9970; color: #111111; } .sheet-textOlive, .sheet-rolltemplate-openLegend .sheet-textOlive { color: #3D9970; } .sheet-green, .sheet-rolltemplate-openLegend-boon .sheet-green, .sheet-rolltemplate-openLegend-attack .sheet-green, .sheet-rolltemplate-openLegend-effect .sheet-green, .sheet-rolltemplate-openLegend .sheet-green { background-color: #2ECC40; color: #111111; } .sheet-textGreen, .sheet-rolltemplate-openLegend .sheet-textGreen { color: #2ECC40; } .sheet-lime, .sheet-rolltemplate-openLegend .sheet-lime { background-color: #01FF70; color: #111111; } .sheet-textLime, .sheet-rolltemplate-openLegend .sheet-textLime { color: #01FF70; } .sheet-yellow, .sheet-rolltemplate-openLegend .sheet-yellow { background-color: #FFDC00; color: #111111; } .sheet-textYellow, .sheet-rolltemplate-openLegend .sheet-textYellow { color: #FFDC00; } .sheet-orange, .sheet-rolltemplate-openLegend .sheet-orange { background-color: #FF851B; color: #111111; } .sheet-textOrange, .sheet-rolltemplate-openLegend .sheet-textOrange { color: #FF851B; } .sheet-maroon, .sheet-rolltemplate-openLegend .sheet-maroon { background-color: #85144b; color: #FFFFFF; } .sheet-textMaroon, .sheet-rolltemplate-openLegend .sheet-textMaroon { color: #85144b; } .sheet-fuchsia, .sheet-rolltemplate-openLegend .sheet-fuchsia { background-color: #F012BE; color: #FFFFFF; } .sheet-textFuchsia, .sheet-rolltemplate-openLegend .sheet-textFuchsia { color: #F012BE; } /* Roll Template Specific formatting */ .sheet-rolltemplate-openLegend .sheet-rollContainer, .sheet-rolltemplate-openLegend-boon .sheet-rollContainer, .sheet-rolltemplate-openLegend-attack .sheet-rollContainer, .sheet-rolltemplate-openLegend-effect .sheet-rollContainer, .sheet-rolltemplate-openLegendNormal .sheet-rollContainer, .sheet-rolltemplate-openLegendModern .sheet-rollContainer { position: relative; width: 100%; height: 100%; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); border-radius: 5px; } .sheet-rolltemplate-openLegend .sheet-row:nth-child(even), .sheet-rolltemplate-openLegend-boon .sheet-row:nth-child(even), .sheet-rolltemplate-openLegend-attack .sheet-row:nth-child(even), .sheet-rolltemplate-openLegend-effect .sheet-row:nth-child(even), .sheet-rolltemplate-openLegendNormal .sheet-row:nth-child(even), .sheet-rolltemplate-openLegendModern .sheet-row:nth-child(even) { background-color: rgba(61,153,112,0.1); /* Olive color at 10% transparent */ } .sheet-rolltemplate-openLegend .sheet-powerLevel, .sheet-rolltemplate-openLegend-boon .sheet-powerLevel, .sheet-rolltemplate-openLegend-attack .sheet-powerLevel, .sheet-rolltemplate-openLegend-effect .sheet-powerLevel, .sheet-rolltemplate-openLegendNormal .sheet-powerLevel, .sheet-rolltemplate-openLegendModern .sheet-powerLevel { font-size: 3.5em; } /* Override default dice roll display */ .sheet-rolltemplate-openLegend .sheet-roll, .sheet-rolltemplate-openLegend-boon .sheet-roll, .sheet-rolltemplate-openLegend-attack .sheet-roll, .sheet-rolltemplate-openLegend-effect .sheet-roll, .sheet-rolltemplate-openLegendNormal .sheet-roll, .sheet-rolltemplate-openLegendModern .sheet-roll { font-size: 5em; line-height: 1em; } .sheet-rolltemplate-openLegend .inlinerollresult, .sheet-rolltemplate-openLegend-boon .inlinerollresult, .sheet-rolltemplate-openLegend-attack .inlinerollresult, .sheet-rolltemplate-openLegend-effect .inlinerollresult, .sheet-rolltemplate-openLegendNormal .inlinerollresult, .sheet-rolltemplate-openLegendModern .inlinerollresult { color: #111111; background-color: transparent !important; border: none !important; } .sheet-rolltemplate-openLegend .inlinerollresult.fullcrit, .sheet-rolltemplate-openLegend-boon .inlinerollresult.fullcrit, .sheet-rolltemplate-openLegend-attack .inlinerollresult.fullcrit, .sheet-rolltemplate-openLegend-effect .inlinerollresult.fullcrit, .sheet-rolltemplate-openLegendNormal .inlinerollresult.fullcrit, .sheet-rolltemplate-openLegendModern .inlinerollresult.fullcrit { background-color: transparent !important; border: none !important; } .sheet-rolltemplate-openLegend .inlinerollresult.fullfail, .sheet-rolltemplate-openLegend-boon .inlinerollresult.fullfail, .sheet-rolltemplate-openLegend-attack .inlinerollresult.fullfail, .sheet-rolltemplate-openLegend-effect .inlinerollresult.fullfail, .sheet-rolltemplate-openLegendNormal .inlinerollresult.fullfail, .sheet-rolltemplate-openLegendModern .inlinerollresult.fullfail { background-color: transparent !important; border: none !important; } .sheet-rolltemplate-openLegend .inlinerollresult.importantroll, .sheet-rolltemplate-openLegend-boon .inlinerollresult.importantroll, .sheet-rolltemplate-openLegend-attack .inlinerollresult.importantroll, .sheet-rolltemplate-openLegend-effect .inlinerollresult.importantroll, .sheet-rolltemplate-openLegendNormal .inlinerollresult.importantroll, .sheet-rolltemplate-openLegendModern .inlinerollresult.importantroll { background-color: transparent !important; border: none !important; }