.sheet-header { background: url(https://i.imgur.com/7zOqeM6.png) no-repeat 90% 50%; min-height: 185px; } .sheet-Wound { width: 100px; } .sheet-emo{ width: 200px !important; } .sheet-col3{ min-width: 280px !important; } .sheet-skill { border: 5px solid; border-radius: 10px; padding: 10px 15px; } .sheet-CallingDetail div div { padding: 10px 15px; padding-right: 20%; border: 5px solid; border-radius: 10px; width: 60%; margin: 5px auto; } .sheet-joy { border-color: #FBD676 !important; background: #FCE9B7 url(https://i.imgur.com/UAdHPJx.png) no-repeat 90% 50%; } .sheet-love { border-color: #ACD59D !important; background: #D3E8CB url(https://i.imgur.com/BL0Ft7i.png) no-repeat 90% 50%; } .sheet-grief { border-color: #97C5E9 !important; background: #C9E0F3 url(https://i.imgur.com/EM0MOLn.png) no-repeat 90% 50%; } .sheet-fear { border-color: #A697C7 !important; background: #CDC6E0 url(https://i.imgur.com/AudRc9v.png) no-repeat 90% 50%; } .sheet-anger { border-color: #ED7A82 !important; background: #F6B9B8 url(https://i.imgur.com/rc1qs05.png) no-repeat 90% 50%; } .sheet-Calling { display: inline; position: relative; padding-right: 23px; margin-bottom: 12px; cursor: pointer; font-size: 15px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none !important; } select, .sheet-name { width: 100px; border: none; background: transparent; overflow: hidden; height: 25px; border-bottom:2px solid #272822; margin-top:10px; margin-left:3px; margin-right:6px; } .sheet-name { width: 300px; vertical-align: bottom !important; } /* Hide the browser's default checkbox */ .sheet-Calling input { position: absolute; opacity: 0; cursor: pointer; } /* Create a custom checkbox */ .sheet-checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; border-width: 2px; border-style: solid; border-radius: 5px; background-image: none !important; } .sheet-joy:hover input ~ .sheet-checkmark, .sheet-joy input:checked ~ .sheet-checkmark { background-color: #FBD676; } .sheet-love:hover input ~ .sheet-checkmark, .sheet-love input:checked ~ .sheet-checkmark { background-color: #ACD59D; } .sheet-grief:hover input ~ .sheet-checkmark, .sheet-grief input:checked ~ .sheet-checkmark { background-color: #97C5E9; } .sheet-fear:hover input ~ .sheet-checkmark, .sheet-fear input:checked ~ .sheet-checkmark { background-color: #A697C7; } .sheet-anger:hover input ~ .sheet-checkmark, .sheet-anger input:checked ~ .sheet-checkmark { background-color: #ED7A82; } .sheet-active:hover input ~ .sheet-checkmark, .sheet-active input:checked ~ .sheet-checkmark { background-color: #272822; } /* Create the checkmark/indicator (hidden when not checked) */ .sheet-checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ input:checked ~ .sheet-checkmark:after { display: block; } /* Style the checkmark/indicator */ .sheet-checkmark:after { left: 6px; top: 3px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .sheet-CallingDetail { display:none; } div.sheet-CallingAdventurer { width: 80%; border-width: 2px; border-style: solid; border-radius: 5px; display: block; padding: 20px; margin: 10px auto; } div.sheet-CallingDetail p { margin: 5px auto; padding: 0px 10px; } div.sheet-CallingDetail h3 { font-size: 3em; color: #444; padding-left: 10px; } div.sheet-CallingDetail h4 { border-bottom: 2px solid; border-radius: 5px; padding: 5px 20px; font-style: italic; margin-bottom: 15px; background: #444; color: #ccc; } .sheet-wounds label { font-size: 10px; display: inline; padding-right: 4px; } label select { display:inline; } .sheet-gear label { font-size: 10px; } .sheet-gear p { border: 2px solid; border-radius: 5px; padding: 10px; padding-right: 15px; } .sheet-gear1 { margin-top: 10px; } .sheet-gear input[type=text] { border: 2px solid #ccc; border-radius: 4px; width: 100%; padding: 5px 5px; margin: 0px 5px; } .sheet-gear textarea { width: 100%; height: 100px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: #f8f8f8; resize: vertical; } .sheet-gear select { width: 100%; margin: 0px 5px; padding: 5px 5px; border: none; border-radius: 4px; background-color: #f1f1f1; }