.charsheet div.sheet-clear { clear:both; } input.sheet-tab:not(:first-child)::before{ border-left: none; } div.sheet-tab-content{ /* border: 1px solid #a8a8a8; border-top-color: #000;*/ margin: 2px 0 0 5px; padding: 5px; } .charsheet h1,h3 { text-align: center; } .charsheet input[type=text] {/* font-weight:bold; border:none; border-radius: 0px 0px 0px 0px; -moz-border-radius: 0px 0px 0px 0px; -webkit-border-radius: 0px 0px 0px 0px; border-bottom: 2px solid white;*/ } .charsheet h4 { text-align:left; } .charsheet label { display: inline; width: 88px; padding-bottom: 0px; } .charsheet input { display: inline; width: 150px; } .charsheet select { width: 40px; height: 20px; margin:0px 60px 0px 0px; padding: 0px 0px 0px 0px; } .sheet-text-fronth1 { font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold; text-align:center; width:20%; padding:10px; background:white; background-size: 100%; } .sheet-text-fronth2 { font-size: 1em; margin-top: 1.0em; margin-bottom: 1.0em; margin-left: -76px; margin-right: 0; font-weight: bold; text-align:left; width:20%; background:white; background-size: 100%; } .sheet-text-fronth3 { font-size: 1.17em; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; font-weight: bold; text-align:center; width:20%; padding:10px; background:white; background-size: 100%; } .sheet-line-behind { width:100%; height:25px; margin-top:-25px; background-color: transparent; background-image:url(http://i.imgur.com/ikbStK4.png); background-size: 100%; background-repeat: no-repeat; } .sheet-line-behindh3 { width:100%; height:25px; margin-top:-12px; background-color: transparent; background-image:url(http://i.imgur.com/ikbStK4.png); background-size: 90%; background-repeat: no-repeat; background-position:center top; } .sheet-image-div-top { /*background-image: url(http://i.imgur.com/eB448gV.png); background-size:25%; background-repeat: repeat-x; background-position: 0px 70px;*/ } .sheet-image-div-bottom { } .sheet-image-div { background-image: url(https://i.imgur.com/zcccTgq.png); background-size:100% 140px; background-repeat: repeat-x; background-position: 0px 10px; } .sheet-border-div { background-color:transparent; border-style: solid; border-width: 278px 30px 38px 23px; -moz-border-image: url(http://i.imgur.com/hjjMqek.png) 793 64 62 66 repeat; -webkit-border-image: url(http://i.imgur.com/hjjMqek.png) 793 64 62 66 repeat; -o-border-image: url(http://i.imgur.com/hjjMqek.png) 793 64 62 66 repeat; border-image: url(http://i.imgur.com/hjjMqek.png) 793 64 62 66 repeat; } .sheet-main-div { text-align:center; margin-top:-100px; } .charsheet { font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; background-color: white; } div.sheet-all{ width: 100% } div.sheet-bname { width: 11%; } div.sheet-binput { width: 20%; } input.sheet-binput { width: 100%; padding: 2px; } input.sheet-descbinput { width: 100%; } .charsheet h4{ margin-top: 3px; } div.sheet-attname{ width: 12%; } div.sheet-attdots{ margin:0px -10px 0px 0px; line-height: 22px; width: 11%; } div.sheet-abiname{ line-height: 20px; width: 12%; } div.sheet-abidots{ margin:0px -5px 0px -5px; line-height: 21px; width: 11%; } div.sheet-inputname { width: 145px; padding-left: 10px; } div.sheet-inputdots { width: 120px; text-align: right; line-height:28px; } input.sheet-inputname{ height: 25px; width: 100%; } div.sheet-spec{ margin:0px 0px 0px -5px; line-height: 20px; width: 10%; } input.sheet-spec{ height: 25px; width: 90%; } input.sheet-backname{ height: 20px; width: 66%; } input.sheet-othertraitname{ height: 25px; width: 150px; } div.sheet-back{ margin:0px -10px 0px -10px; line-height: 20px; } /* Hide actual dot/checkbox */ input[type="radio"], input[type="checkbox"] { opacity: 0; width: 16px; height: 16px; position: relative; left: 6px; margin: -10px; cursor: pointer; z-index: 1; } /* Styles common to fake dot and checkbox */ input[type="radio"] + span::before{ margin-right: 1px; border: solid 1px #a8a8a8; line-height: 14px; text-align: center; display: inline-block; vertical-align: middle; -moz-box-shadow: 0 0 2px #ccc; -webkit-box-shadow: 0 0 2px #ccc; box-shadow: 0 0 2px #ccc; background: #000000; } input[type="checkbox"] + span::before { margin-right: 1px; border: solid 1px #a8a8a8; line-height: 14px; text-align: center; display: inline-block; vertical-align: middle; -moz-box-shadow: 0 0 2px #ccc; -webkit-box-shadow: 0 0 2px #ccc; box-shadow: 0 0 2px #ccc; } /* Fake dot */ input[type="radio"] + span::before{ content: ""; width: 12px; height: 12px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } /* Fake checkbox */ input[type="checkbox"] + span::before { position:relative; content: ""; opacity: 1; width: 14px; height: 14px; font-size: 12px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } /* Styles unique to fake checkbox (checked) */ input[type="checkbox"]:checked + span::before { content: "X"; -moz-box-shadow: 0 0 2px transparent; -webkit-box-shadow: 0 0 2px transparent; box-shadow: 0 0 2px transparent; } /* Remove dot from all radios _after_ selected one */ input[type="radio"]:checked ~ input[type="radio"] + span::before { content: ""; background: #f6f6f6; background: -moz-radial-gradient(#f6f6f6, #dfdfdf); background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); background: -ms-radial-gradient(#f6f6f6, #dfdfdf); background: -o-radial-gradient(#f6f6f6, #dfdfdf); background: radial-gradient(#f6f6f6, #dfdfdf); } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } h4.sheet-health{ line-height: 26px; z-index: 0; margin: 0px 0px 0px -5px; } div.sheet-health{ } select.sheet-center-select { width:100%; height:25px; font-size:14px; font-weight:bold; text-align:center; text-align-last:center; border:none; } select.sheet-center-dots { width:100%; height:20px; font-weight: bold; font-size:14px; color:black; padding: 0px 0px 0px 0px; line-height:10px; text-align:center; text-align-last:center; border:none; } select.sheet-extrahealthr1{ height:25px; width:25px; text-align:center; text-align-last:center; font-weight:bold; margin: 0px 0px 0px 14px; } select.sheet-extrahealthr2{ height:25px; width:25px; text-align:center; text-align-last:center; font-weight:bold; margin: 0px 42px 0px -22px; } select.sheet-extrahealthr3{ height:25px; width:25px; text-align:center; text-align-last:center; font-weight:bold; margin: 0px 60px 0px -42px; } select.sheet-health{ height:25px; width:25px; text-align:center; text-align-last:center; font-weight:bold; } input[type="radio"].sheet-Hbut{ padding: 0px 0px 0px 0px; margin: 2px 8px 0px -15px; float: right; } input.sheet-Hbut:checked + span::before { opacity: 1; } input.sheet-Hbut:hover + span::before { opacity: 1; } input.sheet-Hbut + span::before { margin: 2px -7px 0px 0px; width: 14px; height: 14px; font-size: 14px; font-weight: bold; opacity: .25; float: right; -moz-border-radius: 0%; -webkit-border-radius: 0%; border-radius: 0%; background: #f6f6f6; background: -moz-radial-gradient(#f6f6f6, #dfdfdf); background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); background: -ms-radial-gradient(#f6f6f6, #dfdfdf); background: -o-radial-gradient(#f6f6f6, #dfdfdf); background: radial-gradient(#f6f6f6, #dfdfdf); } input.sheet-Hbut1 + span::before { content: "-1"; } input.sheet-Hbut2 + span::before { content: "-2"; } input.sheet-Hbut5 + span::before { content: "-5"; } input.sheet-HbutI + span::before { content: "#"; } div.sheet-res{ margin:0px 0px 0px 0px; line-height: 20px; font-weight: bold; font-size: 14px; text-align: left; } input.sheet-resspec{ height: 20px; width: 35%; float: right; } input.sheet-used+span::before { content: "X"; width: 12px; height: 12px; font-size: 12px; -moz-border-radius: 0%; -webkit-border-radius: 0%; border-radius: 0%; background: #f6f6f6; background: -moz-radial-gradient(#f6f6f6, #dfdfdf); background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); background: -ms-radial-gradient(#f6f6f6, #dfdfdf); background: -o-radial-gradient(#f6f6f6, #dfdfdf); background: radial-gradient(#f6f6f6, #dfdfdf); } input.sheet-zero:checked + span::before { opacity: 0; } input.sheet-zero:hover + span::before { opacity: 1; } input.sheet-zero + span::before { opacity: .25; font-size: 12px; content: "X"; background: #f6f6f6; background: -moz-radial-gradient(#f6f6f6, #dfdfdf); background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); background: -ms-radial-gradient(#f6f6f6, #dfdfdf); background: -o-radial-gradient(#f6f6f6, #dfdfdf); background: radial-gradient(#f6f6f6, #dfdfdf); } div.sheet-name { width: 100px; padding-left: 10px; } div.sheet-dots { width: 160px; text-align: right; } select.sheet-DP{ margin: 0px 0px 1px 0px; padding: 0px 0px 0px 0px; width: 43%; } button.sheet-DP{ height: 20px; width: 8%; } input.sheet-DPspace{ opacity: 0; width: 23%; } div.sheet-qdot { margin: -95px 0px 0px -175px; font-size:20px; } select.sheet-wheel{ width: 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } select.sheet-top { margin-top:-60px; } select.sheet-mid-eighth { margin-top: -45px; } select.sheet-mid-quarter { margin-top: -20px; } select.sheet-mid-three-eighth { margin-top: 17px; } select.sheet-middle { margin-top: 60px; } select.sheet-middle-2 { margin-top: -58px; } select.sheet-mid-five-eighth { margin-top: -13px; } select.sheet-mid-three-quarter { margin-top: 27px; } select.sheet-mid-seven-eighth { margin-top: 55px; } select.sheet-bottom { margin-top: 68px; } select.sheet-left-1 { margin-left: 0px; } select.sheet-left-2 { margin-left: -16px; } select.sheet-left-3 { margin-left: -10px; } select.sheet-left-4 { margin-left: -6px; } select.sheet-left-5 { margin-left: -3px; } select.sheet-left-6 { margin-left: -1px; } select.sheet-left-7 { margin-left: -3px; } select.sheet-left-8 { margin-left: -6px; } select.sheet-left-9 { margin-left: -10px; } select.sheet-left-10 { margin-left: -16px; } div.sheet-forms{ width: 118px; text-align: center; } input.sheet-formdots{ width: 122px; } input.sheet-formdots:checked + span::before { background: #000000; } input.sheet-formdots + span::before{ position: relative; left: -50px; background: #f6f6f6; background: -moz-radial-gradient(#f6f6f6, #dfdfdf); background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); background: -ms-radial-gradient(#f6f6f6, #dfdfdf); background: -o-radial-gradient(#f6f6f6, #dfdfdf); background: radial-gradient(#f6f6f6, #dfdfdf); } /* ******** Start code for tabs ******* */ div.sheet-tab-content{ display: none; } input.sheet-tabPrime:checked ~ div.sheet-tabPrime, input.sheet-tabBack:checked ~ div.sheet-tabBack, input.sheet-tabMeritFlaws:checked ~ div.sheet-tabMeritFlaws, input.sheet-tabOtherTraits:checked ~ div.sheet-tabOtherTraits, input.sheet-tabNotes:checked ~ div.sheet-tabNotes, input.sheet-tabBBond:checked ~ div.sheet-tabBBond, input.sheet-tabInfo:checked ~ div.sheet-tabInfo, input.sheet-tabExp:checked ~ div.sheet-tabExp, input.sheet-tabCombat:checked ~ div.sheet-tabCombat, input.sheet-tabPowers:checked ~ div.sheet-tabPowers, input.sheet-tabSorcery:checked ~ div.sheet-tabSorcery, input.sheet-tabDice:checked ~ div.sheet-tabDice{ display: block; } /* Tables */ div.sheet-table{ width: 100%; display: block; font-size: 1.25em; font-weight: bold; text-align: center; } /* Gear Tab */ div.sheet-gear{ width:48%; padding-left: 10px; text-align: center; } textarea.sheet-gear { height:250px; width:100%; } /* expanded backgrounds */ div.sheet-ebackname{ } div.sheet-ebackdesc{ width:100% } textarea.sheet-ebackdesc{ width:100%; height:105px; } div.sheet-ebacks{ display: inline; } input.sheet-ebacks { width: 37px; } input.sheet-ebacks:checked ~ div.sheet-ebacks{ display: none; } input.sheet-ebacks:checked + span::before { content: "Show"; color: #a00; -moz-box-shadow: 0 0 2px transparent; -webkit-box-shadow: 0 0 2px transparent; box-shadow: 0 0 2px transparent; } input.sheet-ebacks + span::before { width: 36px; content: "Hide"; position: relative; left: -22px; background: #f6f6f6; background: -moz-radial-gradient(#f6f6f6, #dfdfdf); background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); background: -ms-radial-gradient(#f6f6f6, #dfdfdf); background: -o-radial-gradient(#f6f6f6, #dfdfdf); background: radial-gradient(#f6f6f6, #dfdfdf); } /* experience tab*/ div.sheet-XPdesc{ width: 70%; } div.sheet-XPspent{ width: 5%; } div.sheet-XPdate{ width: 15%; } input.sheet-XPdesc{ width: 70%; } input.sheet-XPspent{ width: 5%; } input.sheet-XPdate{ width: 15%; } input.sheet-XPcomp + span::before{ background: #f6f6f6; background: -moz-radial-gradient(#f6f6f6, #dfdfdf); background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); background: -ms-radial-gradient(#f6f6f6, #dfdfdf); background: -o-radial-gradient(#f6f6f6, #dfdfdf); background: radial-gradient(#f6f6f6, #dfdfdf); } input.sheet-Dice{ width: 16%; } div.sheet-APIRollButton { display: none; } div.sheet-APINoRollButton{ display: inline; } input.sheet-APIcheck:checked ~ div.sheet-APIRollButton { display: inline; } input.sheet-APIcheck:checked ~ div.sheet-APINoRollButton { display: none; } select.sheet-dots { width:100%; height:20px; font-weight: bold; font-size:10px; color:black; padding: 0px 0px 0px 0px; line-height:15px; border:none; } input:checked + label { background: #f6f6f6; background: -moz-radial-gradient(#f6f6f6, #dfdfdf); background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); background: -ms-radial-gradient(#f6f6f6, #dfdfdf); background: -o-radial-gradient(#f6f6f6, #dfdfdf); background: radial-gradient(#f6f6f6, #dfdfdf); color:white; border-radius: 10px; border:none; background-image: url(http://i.imgur.com/YuIExQn.png); background-size:100% 100%; background-repeat: no-repeat; background-position: center; } label.sheet-tab{ text-align: center; display: inline-block; font-size: 14px; background: transparent; color:black; font-weight: bold; border-radius: 10px; border:none; line-height: 30px; width: 14%; /*originally 87px*/ height: 30px; /*originally 20px*/ cursor: pointer; position: relative; vertical-align: middle; text-shadow: 4px 4px 5px rgba(150, 150, 150, 0.5); margin-left: -12%; text-indent:12px; } input.sheet-tab { width: 14%; height: 30px; cursor: pointer; position: relative; opacity: 0; z-index: 9999; } /* ======== Sheet-arrow to hide things========*/ input.sheet-arrow[type="checkbox"] { opacity: 0; width: 25px; height: 25px; position: relative; top: 0px; left: 16px; cursor: pointer; z-index: 1; } /* -----Fake sheet-arrow checkbox----- */ input.sheet-arrow[type="checkbox"] + span::before { background: url("http://i.imgur.com/F48kFVc.png"); background-size: 12px 25px; background-repeat: no-repeat; background-position: center; content: ""; line-height: 14px; text-align: center; display: inline-block; vertical-align: middle; border-radius: 10px; border:1px solid white; width: 25px; height: 25px; transform: rotate(-90deg); /*content: "ˇ"; transform: rotate(-90deg);*/ } input.sheet-arrow[type="checkbox"]:checked + span::before { background: url("http://i.imgur.com/F48kFVc.png"); background-size: 12px 25px; background-repeat: no-repeat; background-position: center; content: ""; width: 25px; height: 25px; transform: rotate(0deg); /*content: "ˇ"; transform: rotate(0deg);*/ } div.sheet-body { display: none; } /* -----Hiding areas with sheet-arrow ----- */ input.sheet-arrow { } input.sheet-arrow:checked ~ div.sheet-body { display: block; } /*-----radio boxes-----*/ span.sheet-text-h3{ display: inline; font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold; text-align: center; width: 100% } span.sheet-text-h4{ display: inline; font-size: 1.0em; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold; text-align: center; width: 100% } button.sheet-custom-button { background-size:100% 100%; background-position:center; height:27px; width:100px; background-repeat: no-repeat; vertical-align: middle; border: none; color:white; font-weight:bold; } button.sheet-custom-button:before { content: "" !important; vertical-align: middle; } button.sheet-custom-button:focus { outline:none; } button.sheet-vampire-button { background-image:url(http://i.imgur.com/81xXfQM.png); } button.sheet-vampire-button:hover { background-image:url(http://i.imgur.com/Ethskf2.png); } button.sheet-vampire-button:disabled { background-image:url(http://i.imgur.com/w8tjKra.png); } button.sheet-vampire-button:active { background-image:url(http://i.imgur.com/HlcFh1Y.png); } .charsheet .repcontrol_del, .charsheet .repcontrol_move, .charsheet .repcontrol_add, .charsheet .repcontrol_edit { font-weight:bold; background-image:url(http://i.imgur.com/81xXfQM.png); min-height: 25px; min-width: 75px; background-size:100% 100%; background-position:center; background-repeat: no-repeat; color:white; vertical-align: middle; background-color:transparent; border: none; } .charsheet .repcontrol_move:before { content: "Move" !important; vertical-align: middle; } .charsheet .repcontrol_del:before { content: "Del" !important; vertical-align: middle; } .charsheet .repcontrol_add:before, .charsheet .repcontrol_edit:before { content: "" !important; vertical-align: middle; } .charsheet .repcontrol_del:hover, .charsheet .repcontrol_move:hover, .charsheet .repcontrol_add:hover, .charsheet .repcontrol_edit:hover { background-image:url(http://i.imgur.com/Ethskf2.png); -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; background-position:center; background-repeat: no-repeat; vertical-align: middle; border: none; color:white; background-color:transparent; } .charsheet .repcontrol_del:disabled, .charsheet .repcontrol_move:disabled, .charsheet .repcontrol_add:disabled, .charsheet .repcontrol_edit:disabled { background-image:url(http://i.imgur.com/w8tjKra.png); -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; background-position:center; background-repeat: no-repeat; vertical-align: middle; border: none; color:white; background-color:transparent; } .charsheet .repcontrol_del:active, .charsheet .repcontrol_move:active, .charsheet .repcontrol_add:active, .charsheet .repcontrol_edit:active { background-image:url(http://i.imgur.com/HlcFh1Y.png); -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; background-position:center; background-repeat: no-repeat; vertical-align: middle; border: none; color:white; background-color:transparent; } input.sheet-speedoutput { width: 30px; } /*------------- This is the roll template for standard rolls -------------*/ .sheet-rolltemplate-wod .sheet-regularContainer { width: 230px; height: 190px; padding: 2px; background: url(https://i.imgur.com/puo0z7r.png) top left; background-size: 100% 100%; background-repeat: no-repeat; font-family: "Courier New", Courier, monospace; font-weight: bold; border-spacing: 0; } .sheet-rolltemplate-wod .sheet-regularHeaderContainer { color: rgb(112, 0, 0); padding: 15px 2px 2px 20px; line-height: 1.2em; font-size: 1.2em; text-align: left; } .sheet-rolltemplate-wod .sheet-regularAttr { padding-left: 20px; font-size: 1.0em; vertical-align: top; } .sheet-rolltemplate-wod .sheet-regularResult { font-size: 1.2em; text-align: center; color: rgb(112, 0, 0); padding-bottom: 20px; } .sheet-rolltemplate-wod .inlinerollresult { background-color: transparent; color: #000000; border: none; } .sheet-rolltemplate-wod .inlinerollresult.fullcrit { color: #3FB315; border: none; } .sheet-rolltemplate-wod .inlinerollresult.fullfail { color: #000000; border: none; } .sheet-rolltemplate-wod .inlinerollresult.importantroll { color: #3FB315; border: none; } /*------------- This is the roll template for initiative -------------*/ .sheet-rolltemplate-wodinitiative .sheet-initiativeContainer { width: 230px; height: 190px; padding: 2px; background: url(https://i.imgur.com/puo0z7r.png) top left; background-size: 100% 100%; background-repeat: no-repeat; font-family: "Courier New", Courier, monospace; font-weight: bold; border-spacing: 0; } .sheet-rolltemplate-wodinitiative .sheet-initiativeHeader { color: rgb(112, 0, 0); padding: 15px 2px 2px 20px; line-height: 1.2em; font-size: 1.2em; text-align: left; } .sheet-rolltemplate-wodinitiative .sheet-initiativeAttr { padding-left: 20px; font-size: 1.0em; vertical-align: top; } .sheet-rolltemplate-wodinitiative .sheet-initiativeResult { font-size: 1.2em; text-align: center; color: rgb(112, 0, 0); padding-bottom: 20px; } .sheet-rolltemplate-wodinitiative .inlinerollresult { background-color: transparent; color: #000000; border: none; } .sheet-rolltemplate-wodinitiative .inlinerollresult.fullcrit { color: #3FB315; border: none; } .sheet-rolltemplate-wodinitiative .inlinerollresult.fullfail { color: #000000; border: none; } .sheet-rolltemplate-wodinitiative .inlinerollresult.importantroll { color: #3FB315; border: none; } /*------------- This is the roll template for rituals -------------*/ .sheet-rolltemplate-wodritual .sheet-ritualcontainer { width: 230px; height: 375px; padding: 2px; background: url(https://i.imgur.com/puo0z7r.png) top left; background-size: 100% 100%; background-repeat: no-repeat; font-family: "Courier New", Courier, monospace; font-weight: bold; border-spacing: 0; } .sheet-rolltemplate-wodritual .sheet-ritualheader { color: rgb(112, 0, 0); padding-top: 10%; padding-bottom: 5%; padding-right: 10%; padding-left: 10%; line-height: 1.2em; font-size: 1.2em; text-align: left; } .sheet-rolltemplate-wodritual .sheet-rituallevel { padding-left: 10%; padding-right: 10%; font-size: 1.0em; vertical-align: top; } .sheet-rolltemplate-wodritual .sheet-ritualattribute { padding-left: 10%; padding-right: 10%; font-size: 1.0em; vertical-align: top; max-height: 100 px; } .sheet-rolltemplate-wodritual .sheet-ritualresult { font-size: 1.2em; text-align: center; color: rgb(112, 0, 0); padding-bottom: 5%; } .sheet-rolltemplate-wodritual .sheet-ritualbookpage { font-size: .9em; text-align: center; font-style: italic; color: rgb(63, 63, 63); margin-bottom: 10%; margin-left: 7%; margin-right:7%; } .sheet-rolltemplate-wodritual .sheet-ritualdescription { font-size: 1.0em; text-align: left; position: relative; overflow: auto; max-height: 150px; color: rgb(112, 0, 0); margin-left: 10%; margin-bottom: 10px; margin-right:15px; } .sheet-rolltemplate-wodritual .sheet-ritualdescription .scrollbar { margin-left: 30px; float: left; height: 300px; width: 65px; background: #F5F5F5; overflow-y: scroll; margin-bottom: 25px; } .sheet-ritualdescription::-webkit-scrollbar { width: 1px; } .sheet-rolltemplate-wodritual .inlinerollresult { background-color: transparent; color: #000000; border: none; } .sheet-rolltemplate-wodritual .inlinerollresult.fullcrit { color: #3FB315; border: none; } .sheet-rolltemplate-wodritual .inlinerollresult.fullfail { color: #000000; border: none; } .sheet-rolltemplate-wodritual .inlinerollresult.importantroll { color: #3FB315; border: none; }