.sheet-tracker { position: absolute; left: 855px; } .sheet-shot_display { text-align:center; border:1px dotted black; border-radius:5px; background: transparent; box-shadow:none; position: relative; left:-20px; color:black; } .sheet-shot_display[type=number]::-webkit-outer-spin-button, .sheet-shot_display[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .sheet-shot_display[type=number] { -moz-appearance:textfield; } /*-----background-----*/ .charsheet { background: white; background-size:100%; } .sheet-banner { background: url('http://2.bp.blogspot.com/-dNcHLergq0g/T_MSmDFasHI/AAAAAAAAAEw/MPmDwkUuqaU/s1600/logo.gif'); background-size: 100%; background-repeat: no-repeat; background-position: right top; } .sheet-banner-content { margin: 0 auto; padding: 100px; } /* ----- Fonts ----- */ @font-face { font-family: 'Bonzai'; src: url('http://www.geeksville.us/fonts/Coal/ChowFun.ttf'); font-weight: normal; font-style: normal; } , h1, h2, h3, h4, h5, h6 { font-family: 'Bonzai'; } /*-----Tabs-----*/ div.sheet-core-content { display: none; width:840px; } .charsheet div[class^="sheet-section"] { display: none; background: url(''); background-size:100%; padding-left:20px; padding-right:20px; padding-top:20px; padding-bottom:20px; } .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 { /*max-height: 999999px; visibility: visible; opacity: 1; transition: opacity 0.5s linear 0s; overflow: auto;*/ display: block; } .charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] { /*max-height: 999999px; visibility: visible; opacity: 1; transition: opacity 0.5s linear 0s;*/ display: block; } .charsheet input.sheet-tab { width: 100px; height: 40px; cursor: pointer; position: relative; opacity: 0; z-index: 9999; margin-bottom:10px; } .charsheet span.sheet-tab { text-align: center; display: inline-block; font-size: 15px; font-family: ''; background: white; color: red; font-weight: bold; border-radius: 4px; width: 100px; /*originally 87px*/ height: 40px; /*originally 20px*/ cursor: pointer; position: relative; vertical-align: middle; margin-left: -101px;/*originally 91px*/ text-shadow: none; border:2px solid black; font-family: 'Bonzai'; } .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 { background: black; /*originally ab8b57*/ color: white; /*originally white*/ border-radius: 4px; border:2px solid red; font-family: 'Bonzai'; } .charsheet input.sheet-tab99:checked + span.sheet-tab99 { background: #BD1606; color: white; border-radius: 4px; border:2px solid #BD1606; } .charsheet span.sheet-tab99 { background: white; color: green; font-weight: bold; border-radius: 4px; border:2px solid green; } .charsheet input.sheet-tab3:hover + span.sheet-tab3 { background: url('http://www.bikebam.com/bam3.png'); background-repeat:no-repeat; background-size: 100px 50px; background-position: center center; content:''; border:2px solid transparent; color:transparent; } /*----------- End Tab Setup -----------*/ .sheet-hidden { display:none; } /*----------- tables -----------*/ table.sheet-outlinetable { margin-left:auto; margin-right:auto; } table.sheet-outlinetable th.sheet-right, table.sheet-outlinetable td.sheet-right { border-top: 1px solid black; border-bottom: 1px solid black; border-right: 1px solid black; } table.sheet-outlinetable th.sheet-left, table.sheet-outlinetable td.sheet-left { border-top: 1px solid black; border-bottom: 1px solid black; border-left: 1px solid black; } table.sheet-outlinetable-right { margin-left:auto; } table.sheet-outlinetable-right th.sheet-right, table.sheet-outlinetable-right td.sheet-right { border-top: 1px solid black; border-bottom: 1px solid black; border-right: 1px solid black; } table.sheet-outlinetable-right th.sheet-left, table.sheet-outlinetable-right td.sheet-left { border-top: 1px solid black; border-bottom: 1px solid black; border-left: 1px solid black; } /*----------- Text Formatting -----------*/ .sheet-prime_attribute[type="number"] { border:none; background:transparent; box-shadow:none; text-align:center; color:white; font-size:1.4em; font-weight:700; text-shadow: 0px 0px 10px black, 0px 0px 5px black, 0px 0px 5px black; } .sheet-seconadry_attribute { border:none; background:transparent; box-shadow:none; } .sheet-heading { border-top:none; border-left:none; border-right:none; border-bottom:1px dotted black; background:transparent; box-shadow:none; color:blue; font-size:1.8em; font-weight:700; font-variant:small-caps; font-family:Georgia; } .sheet-skill[type="number"] { border:none; background:transparent; box-shadow:none; text-align:center; color:white; font-size:1.4em; font-weight:700; text-shadow: 0px 0px 10px black, 0px 0px 5px black, 0px 0px 5px black; } .sheet-skill[type="text"] { border:none; background:transparent; box-shadow:none; text-align:center; color:black; font-size:1em; font-weight:400; text-shadow: none; } .sheet-heading:focus, .sheet-weapon[type="number"]:focus, .sheet-weapon[type="text"]:focus, .sheet-power:focus, .sheet-skill:focus, .sheet-misc_tracker:focus { background:#add8e6; color:black; } .sheet-power { border-top:none; border-left:none; border-right:none; border-bottom:1px dotted black; background:transparent; box-shadow:none; } .sheet-weapon[type="number"], .sheet-weapon[type="text"] { border-top:none; border-left:none; border-right:none; border-bottom:1px dotted black; background:transparent; box-shadow:none; text-align:center; width:100%; color:white; font-size:1.4em; font-weight:700; text-shadow: 0px 0px 10px black, 0px 0px 5px black, 0px 0px 5px black; } select *.sheet-bold { background: black; color:white; } select.sheet-skillselect { margin:0; overflow: hidden; -webkit-appearance: none; background:transparent; box-shadow:none; 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; border:1px dotted black; border-radius: 5px; } textarea.sheet-powerdata, textarea.sheet-textarea, textarea.sheet-equipment { resize:vertical; } textarea.sheet-powerdata:focus, textarea.sheet-textarea:focus, textarea.sheet-equipment:focus { background:#add8e6; color:black; } .sheet-misc_tracker { box-shadow:none; border-left:none; border-right:none; border-top:none; border-bottom:1px dotted black;; background:transparent; font-family: 'Bonzai'; font-weight:bold; text-align:center; font-size:1.5em; } /*-----radio boxes-----*/ /* -----Hide actual radio----- */ input.sheet-normal[type="radio"] { opacity: 0; width: 15px; height: 15px; 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: 11px; 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); color:black; content: "•"; width: 11px; height: 11px; font-size: 3em; text-shadow:none; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } input.sheet-normal.sheet-nuke[type="radio"] + span::before { width: 11px; height: 11px; font-size: 1.4em; text-shadow:none; font-family: 'Pictos Three'; color:black; content: "l"; } input.sheet-normal.sheet-nuke[type="radio"]:checked + span::before { font-family: 'Pictos Three'; color:red; content: "l"; } input.sheet-normal.sheet-yellow[type="radio"] + span::before { box-shadow: 0px 0px 5px yellow,0px 0px 5px yellow,0px 0px 5px yellow,0px 0px 7px black; } input.sheet-normal.sheet-red[type="radio"] + span::before { box-shadow: 0px 0px 5px red,0px 0px 5px red,0px 0px 5px red; } input.sheet-normal.sheet-gray[type="radio"] + span::before { box-shadow: 0px 0px 5px gray,0px 0px 5px gray,0px 0px 5px gray; } /* -----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: 14px; content: "✖"; opacity: 0.25; } /*------------Better Checkbox-----------*/ /* Hide actual radio/checkbox */ input.sheet-bigcheck[type="checkbox"] { opacity: 0; width: 16px; height: 16px; position: relative; top: 5px; left: 6px; margin-top: -18px; margin-left: -10px; margin-right: -11px; margin-bottom: 0px; cursor: pointer; z-index: 1; } /* Fake radio/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); } /* Fake checkbox */ 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 { content: "✓"; } /*------------End of Better Checkbox-----------*/ /*------------buttons-----------*/ button[type="roll"].sheet-2ndattribute:before, button[type="roll"].sheet-attribute:before, button[type="roll"].sheet-skillroll:before { content: ""!important; display: none; } button[type="roll"].sheet-attribute { width: 100%; height:24px; margin: 0; font-weight: 700; text-align: center; vertical-align: center; cursor: pointer; background-image: none; background-color: white; border: 2px solid black /* 1px solid black */; border-style: outset; padding: 2px; padding-left:2px; font-size: 1.2em; color: black; text-shadow: 0px 0px 0.2em white; font-family: 'Bonzai'; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } button[type="roll"].sheet-attribute:hover { background-color: black; border: 2px solid red; color:white; } button[type="roll"].sheet-2ndattribute { width: 100%; height:24px; margin: 0; font-weight: 700; text-align: center; vertical-align: center; cursor: pointer; background-image: none; background-color: white; border: 2px solid black /* 1px solid black */; border-style: outset; padding: 2px; padding-left:2px; font-size: 0.8em; color: black; text-shadow: 0px 0px 0.2em white; font-family: 'Bonzai'; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } button[type="roll"].sheet-2ndattribute:hover { background-color: black; border: 2px solid red; color:white; } /* skillroll */ button[type="roll"].sheet-skillroll { width: 100%; height:24px; margin: 0; font-weight: 700; text-align: center; vertical-align: center; cursor: pointer; background-image: none; background-color: white; border: 2px outset white /* 1px solid black */; padding-top:2px; padding-left:2px; padding-right:2px; padding-bottom:2px; font-size: 0.8em; color: black; text-shadow: 0px 0px 0.2em white; font-family: 'Bonzai'; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } button[type="roll"].sheet-skillroll:hover { background-color: black; border: 2px inset gray; color:white; padding-top:4px; padding-left:4px; padding-right:0px; padding-bottom:0px; } button[type="roll"].sheet-skillroll:active { background-color: blue; border: 2px inset gray; color:white; padding-top:4px; padding-left:4px; padding-right:0px; padding-bottom:0px; } /* Attack Button */ .sheet-attack button[type="roll"]:before, .sheet-attack:before { content: ""!important; display: none; border:none; } .sheet-attack button[type="roll"], .sheet-attack { display: block; background: black; border-radius: 50%; height: 30px; width: 30px; margin: 0; background: radial-gradient(circle at 20px 20px, #add8e6, #000); border:none; box-shadow: none; } .sheet-attack button[type="roll"]:hover, .sheet-attack:hover { display: block; background: black; border-radius: 50%; height: 30px; width: 30px; margin: 0; background: radial-gradient(circle at 15px 15px, #add8e6, #000); } .sheet-attack button[type="roll"]:active, .sheet-attack:active { display: block; background: black; border-radius: 50%; height: 30px; width: 30px; margin: 0; background: radial-gradient(circle at 20px 20px, #fff, #0080ff); } /*========== sheet arrow ==========*/ /* ----Hide actual sheet-arrow checkbox---- */ input.sheet-arrow[type="checkbox"] { opacity: 0; width: 16px; height: 16px; position: relative; top: 5px; left: 6px; margin: -10px; cursor: pointer; z-index: 1; } /* -----Fake sheet-arrow checkbox----- */ input.sheet-arrow[type="checkbox"] + span::before { margin-right: 4px; line-height: 14px; text-align: center; display: inline-block; vertical-align: middle; float: left; content: "►"; width: 14px; height: 14px; font-size: 12px; } input.sheet-arrow[type="checkbox"]:checked + span::before { content: "▼"; } /* -----Hiding areas with sheet-arrow ----- */ input.sheet-arrow { float: left; } input.sheet-arrow:checked ~ div.sheet-body { display: block; } div.sheet-body { display: none; } /* -------------------- Roll Templates -------------------- */ .sheet-rolltemplate-show table { width: 189px; padding: 1px; border: 1px solid; background-color: #ffffff; } .sheet-rolltemplate-show th { color: rgb(126, 45, 64); padding-left: 5px; line-height: 1.3em; font-size: 1.2em; text-align: left; font-family: "Times New Roman", Times, serif; font-variant: small-caps; } .sheet-rolltemplate-show td { padding-left: 5px; } .sheet-rolltemplate-magicshow table { width: 189px; padding: 1px; border: 1px solid; background-color: #ffffff; } .sheet-rolltemplate-magicshow th { color: #2d7e6b; padding-left: 5px; line-height: 1.3em; font-size: 1.2em; text-align: left; font-family: "Times New Roman", Times, serif; font-variant: small-caps; } .sheet-rolltemplate-magicshow td { padding-left: 5px; }