/*-----background-----*/ .charsheet { background: url(''); background-size:100%; } /*-----text-----*/ @font-face { font-family: 'GNUTypewriter'; src: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Adventure!/assets/fonts/GNUTypewriterStandard.ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: 'WarenhausTypenhebelStandard'; src: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Adventure!/assets/fonts/WarenhausTypenhebelStandard.otf'); font-weight: normal; font-style: normal; } h5 { text-shadow: none; color:black; } th { text-shadow: none; color:black; font-family: 'WarenhausTypenhebelStandard'; font-weight:400; } h4 { text-shadow: 0px 0px 10px white, 0px 0px 10px white, 0px 0px 10px white; color:black; text-shadow:none; } h3 { color:black; font-family: 'GNUTypewriter'; font-size:1.4em; } h2 { color:black; font-family: 'GNUTypewriter'; font-weight:400; text-shadow:none; } .charsheet { text-shadow: none; color:black; font-family: 'WarenhausTypenhebelStandard'; font-size:0.83em; } .sheet-center { text-align: center; } .sheet-left { text-align: left; } .sheet-right { text-align: right; } .sheet-textbox { width:150px; background:transparent; box-shadow:none; border-bottom: 1px solid black; border-top:none; border-left:none; border-right:none; } .sheet-healthbox { width:60px; background:transparent; box-shadow:none; border: 1px dotted black; } select { margin:0; overflow: hidden; -webkit-appearance: none; background:transparent; border: none; box-shadow:none; margin-bottom: 2px; margin-top: 0px; padding-top:0px; text-align: center; text-indent: 0.01px; -webkit-user-select: none; -moz-user-select: none; -webkit-padding-end: 00px; -moz-padding-end: 00px; font-family: 'WarenhausTypenhebelStandard'; } /*-------Tables--------*/ table.sheet-weapon, th.sheet-weapon, td.sheet-weapon { border: 1px solid black; background:transparent; } .sheet-weapon[type="text"] { background:transparent; border: none; box-shadow:none; } .sheet-weapon[type="number"] { background:transparent; border: none; box-shadow:none; text-align:center; } select.sheet-weapon { background:transparent; border: none; box-shadow:none; margin-bottom: 0px; margin-top: 0px; padding-top:0px; text-align: center; text-indent: 0.01px; -webkit-user-select: none; -moz-user-select: none; -webkit-padding-end: 00px; -moz-padding-end: 00px; } /*-----textarea-----*/ textarea { height: 50px; resize:vertical; background:transparent; } /*-----Tabs-----*/ div.sheet-core-content { display: none; width:840px; } .charsheet div[class^="sheet-section"] { display: none; background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Adventure!/assets/images/15L8aEI.jpg'); background-size:100%; padding-left:26px; padding-right:26px; padding-top:20px; height:1047px; } .charsheet input.sheet-tab1:checked ~ div.sheet-section-1, .charsheet input.sheet-tab2:checked ~ div.sheet-section-2, .charsheet input.sheet-tab3:checked ~ div.sheet-section-3, .charsheet input.sheet-tab4:checked ~ div.sheet-section-4, .charsheet input.sheet-tab5:checked ~ div.sheet-section-5, .charsheet input.sheet-tab6:checked ~ div.sheet-section-6, .charsheet input.sheet-tab7:checked ~ div.sheet-section-7, .charsheet input.sheet-tab8:checked ~ div.sheet-section-8, .charsheet input.sheet-tab9:checked ~ div.sheet-section-9 { display: block; } .charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] { display: block; } .charsheet input.sheet-tab { width: 160px; height: 40px; cursor: pointer; position: relative; opacity: 0; z-index: 9999; margin-bottom:10px; cursor: pointer; box-shadow:0px 0px 5px black; } .charsheet span.sheet-tab { text-align: center; display: inline-block; font-size: 18px; background: white; color: black; font-weight: bold; border-radius: 4px; width: 160px; /*originally 87px*/ height: 40px; /*originally 20px*/ position: relative; vertical-align: middle; margin-left: -170px;/*originally 91px*/ margin-top: -12px;/*originally 91px*/ text-shadow: none; border:2px solid gray; } .charsheet input.sheet-tab1:checked + span.sheet-tab1, .charsheet input.sheet-tab2:checked + span.sheet-tab2, .charsheet input.sheet-tab3:checked + span.sheet-tab3, .charsheet input.sheet-tab4:checked + span.sheet-tab4, .charsheet input.sheet-tab5:checked + span.sheet-tab5, .charsheet input.sheet-tab6:checked + span.sheet-tab6, .charsheet input.sheet-tab7:checked + span.sheet-tab7, .charsheet input.sheet-tab8:checked + span.sheet-tab8, .charsheet input.sheet-tab9:checked + span.sheet-tab9, .charsheet input.sheet-tab10:checked + span.sheet-tab10, .charsheet input.sheet-tab99:checked + span.sheet-tab99 { background: gray; /*originally ab8b57*/ color: white; /*originally white*/ border-radius: 4px; border:2px solid black; } /*----------- End Tab Setup -----------*/ input.sheet-arrow { float: left; } div.sheet-body { display: none; } input.sheet-arrow:checked ~ div.sheet-body { display: block; } /*-----radio boxes-----*/ /* -----Hide actual radio----- */ input.sheet-normal[type="radio"] { opacity: 0; width: 16px; height: 16px; position: relative; top: 5px; left: 6px; margin: -10px; cursor: pointer; z-index: 1; } /* -----Fake radio----- */ input.sheet-normal[type="radio"] + span::before { margin-right: 2px; border: solid 1px #a8a8a8; line-height: 12px; 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: #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); font-family: 'New Times Roman'; color:black; content: "•"; width: 11px; height: 11px; font-size: 4em; text-shadow:none; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } /* -----Remove dot from all radios _after_ selected one----- */ input.sheet-normal[type="radio"]:checked ~ input.sheet-normal[type="radio"] + span::before { content: ""; } /*------------empty traits-----------*/ input.sheet-zero[type="radio"]:checked + span::before { opacity: 0; } input.sheet-zero[type="radio"]:hover + span::before { opacity: 1; } input.sheet-zero[type="radio"] + span::before { font-size: 12px; content: "✖"; opacity: 0.25; } .sheet-grid { margin-left:auto; margin-right:auto; } /*=====Advantage =====*/ /* -----Hide actual radio----- */ input.sheet-Advantage[type="radio"] { opacity: 0; width: 16px; height: 16px; position: relative; top: 5px; left: 6px; margin: -8px; cursor: pointer; z-index: 1; } input.sheet-Advantage[type="radio"] + span::before { margin-right: 2px; 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: #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); font-family: 'New Times Roman'; color:black; content: "•"; width: 14px; height: 14px; font-size: 4em; text-shadow:none; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } /* -----Remove dot from all radios _after_ selected one----- */ input.sheet-Advantage[type="radio"]:checked ~ input.sheet-Advantage[type="radio"] + span::before { content: ""; } /*--------------Big Checkbox--------------*/ /* ----Hide actual sheet-bigcheck checkbox---- */ input.sheet-bigcheck[type="checkbox"] { opacity: 0; width: 16px; height: 16px; position: relative; top: 5px; left: 6px; margin: -8px; cursor: pointer; z-index: 1; } /* ----Fake sheet-bigcheck checkbox---- */ input.sheet-bigcheck[type="checkbox"] + span::before { margin-right: 4px; 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: #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-bigcheck[type="checkbox"] + span::before { content: ""; width: 14px; height: 14px; font-size: 12px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } input.sheet-bigcheck[type="checkbox"]:checked + span::before { color: red; content: "✓"; } /*--------------Round checkbox--------------*/ /* ----Hide actual roundcheck checkbox---- */ input.sheet-roundcheck[type="checkbox"] { opacity: 0; width: 16px; height: 16px; position: relative; top: 5px; left: 6px; margin: -10px; cursor: pointer; z-index: 1; } /* ----Fake roundcheck checkbox---- */ input.sheet-roundcheck[type="checkbox"] + span::before { margin-right: 4px; border: solid 1px #a8a8a8; line-height: 14px; text-align: center; display: inline-block; vertical-align: middle; border-radius: 20px 20px 20px 20px; -moz-box-shadow: 0 0 20px #ccc; -webkit-box-shadow: 0 0 20px #ccc; box-shadow: 0 0 20px #ccc; 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); -moz-border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px 20px 20px 20px; border-radius: 20px 20px 20px 20px; } input.sheet-roundcheck[type="checkbox"] + span::before { content: ""; width: 14px; height: 14px; font-size: 12px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; } input.sheet-roundcheck[type="checkbox"]:checked + span::before { font-family: 'New Times Roman'; color: black; font-size: 4em; content: "•"; } /*=====Buttons=====*/ button[type=roll].sheet-adv:before { background-image: none; /*background-color: #f2f5d3;*/ /*background-color: white;*/ content: ""; } button[type=roll].sheet-adv { background-image: none; background: transparent; font-family:"GNUTypewriter"; color:black; font-size:1.3em; font-weight:700; border-radius: 8px; box-shadow:none; height:28px; width:100%; border: none; padding:none; } button[type=roll].sheet-adv:hover { border: none; background:black; color:white; } button[type=roll].sheet-adv:active { border: none; background:red; color:black; } /*=====Buttons=====*/ button[type=roll].sheet-big:before { background-image: none; /*background-color: #f2f5d3;*/ /*background-color: white;*/ content: ""; } button[type=roll].sheet-big { background-image: none; background: transparent; font-family:"GNUTypewriter"; color:black; font-size:2em; font-weight:400; border-radius: 8px; box-shadow:none; height:28px; width:100%; border: none; padding:none; } button[type=roll].sheet-big:hover { border: none; background:black; color:white; } button[type=roll].sheet-big:active { border: none; background:red; color:black; } /*=====Buttons=====*/ button[type=roll].sheet-skill:before { background-image: none; /*background-color: #f2f5d3;*/ /*background-color: white;*/ content: ""; } button[type=roll].sheet-skill { background-image: none; background: transparent; font-family:"GNUTypewriter"; color:black; font-size:1em; font-weight:400; border-radius: 6px; box-shadow:none; height:20px; width:100%; border: none; padding:none; } button[type=roll].sheet-skill:hover { border: none; background:black; color:white; } button[type=roll].sheet-skill:active { border: none; background:gray; color:black; } /*=====Buttons=====*/ button[type=roll].sheet-weapon:before { background-image: none; /*background-color: #f2f5d3;*/ /*background-color: white;*/ content: ""; } button[type=roll].sheet-weapon { background-image: none; background: transparent; font-family:"GNUTypewriter"; color:black; font-size:1em; font-weight:400; border-radius: 6px; box-shadow:none; height:19px; width:19px; border: 1px solid black; padding:none; } button[type=roll].sheet-weapon:hover { border: 1px solid white; background:black; color:white; } button[type=roll].sheet-weapon:active { border: 1px solid black; background:gray; color:black; }