/*----------- Tabs Setup -------------*/ .charsheet { background:white; } div.sheet-core-content { display: none; width:840px; } .charsheet div[class^="sheet-section"] { /*visibility: hidden; opacity: 0; max-height:0; overflow: hidden;*/ display: none; } .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 { /*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; } .charsheet span.sheet-tab { text-align: center; display: inline-block; /*originally inline-block*/ font-size: 13px; background: white; /*originally 4a6486*/ color: black; /*originally white*/ /*font-family: "Tinos", "Quattrocento", "Lustria", "Buenardserif", serif;*/ font-weight: bold; border-radius: 4px; border: 2px solid black; width: 100px; /*originally 87px*/ height: 40px; /*originally 20px*/ cursor: pointer; position: relative; vertical-align: middle; margin-left: -101px;/*originally 91px*/ } .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-tab99:checked + span.sheet-tab99 { background: black; /*originally ab8b57*/ color: white; /*originally white*/ border-radius: 4px; border: 2px solid red; } .charsheet input.sheet-tab3:hover + span.sheet-tab3 { background:url ('http://us.cdn4.123rf.com/168nwm/alancotton/alancotton1410/alancotton141000166/32619198-an-redacted-red-ink-stamp-on-a-white-background.jpg'); background-repeat: no-repeat; background-size: 100px 40px; background-position: center center; content:''; border:2px solid transparent; color:transparent; } /*----------- End Tab Setup -----------*/ /*----------- Font -----------*/ @font-face { font-family: 'RufscriptRegular'; src: url('http://www.geeksville.us/fonts/Coal/RufscriptRegular.ttf') format('truetype'); font-weight: normal; font-style: normal; } .sheet-italic { font-style: italic; } .sheet-center { text-align: center; } .sheet-banner { background: url('http://dailycrowdfunder.com/wp-content/uploads/2014/11/paranoiaProjectImage-1024x480.jpeg'); background-size: 800px 100px; background-repeat: no-repeat; margin-right:auto; margin-left:auto; } input[type="text"] { font-family: 'RufscriptRegular'; } h1 { background:black; color:white; text-transform: uppercase; line-height:0.7em; } .sheet-secret_side { font-size:0.7em; display:inline; vertical-align: bottom; line-height:0.7em; } h4 { background:black; color:white; text-transform: uppercase; } .sheet-subtitle { color:gray; text-align:center; } .sheet-big { font-size:1.6em; text-align:center; border-top:none; border-left:none; border-right:none; border-bottom:2px solid black; border-radius:0px; box-shadow:none; } .sheet-big[type="text"] { font-family: 'Times New Roman'; } .sheet-code { text-transform: uppercase; } .sheet-medium { font-size:1.2em; text-align:center; border-top:none; border-left:none; border-right:none; border-bottom:1px solid black; border-radius:0px; box-shadow:none; } .sheet-medium_boost { font-size:1.2em; text-align:center; border-top:none; border-left:none; border-right:none; border-bottom:none; border-radius:0px; box-shadow:none; } .sheet-middle { font-size:1.2em; border-top:none; border-left:none; border-right:none; border-bottom:1px solid black; border-radius:0px; box-shadow:none; } .sheet-small { font-size:1em; text-align:center; border-top:none; border-left:none; border-right:none; border-bottom:1px solid black; border-radius:0px; box-shadow:none; } select.sheet-power_select { margin:0; overflow: hidden; -webkit-appearance: none; background:transparent; border: none; 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; font-weight:900; text-transform: uppercase; } select.sheet-select { text-align: left; margin:0; overflow: hidden; -webkit-appearance: none; background:transparent; text-indent: 0.01px; -webkit-user-select: none; -moz-user-select: none; -webkit-padding-end: 00px; -moz-padding-end: 00px; margin-top: 0px; padding-top:0px; } textarea.sheet-textarea { width:95%; resize: vertical; overflow: auto; } textarea.sheet-notes { width:95%; resize: vertical; overflow: auto; height:20px; font-family: 'RufscriptRegular'; } /* =====tables=====*/ table.sheet-skills { width:100%; } table.sheet-skills td { padding-left:5px; } table.sheet-skills th { font-size:1.2em; font-weight:bold; text-align:left; padding-left:5px; } .sheet-right { border-right: 1px solid black; } .sheet-left { border-left: 1px solid black; } .sheet-bottom { border-bottom: 1px solid black; } /* Sheet-Choose */ /* Hide actual radio/checkbox */ input.sheet-choose[type="radio"] { opacity: 0; width: 16px; height: 16px; position: relative; top: 5px; left: 6px; margin: -10px; cursor: pointer; z-index: 1; } /* Fake radio/checkbox */ input.sheet-choose[type="radio"] + span::before { margin-right: 4px; border: none; 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 radio */ input.sheet-choose[type="radio"] + span::before { content: ""; width: 12px; height: 12px; font-size: 24px; } input.sheet-choose.sheet-one[type="radio"] + span::before { content: "1"; text-shadow: none; } input.sheet-choose.sheet-two[type="radio"] + span::before { content: "2"; text-shadow: none; } input.sheet-choose.sheet-three[type="radio"] + span::before { content: "3"; text-shadow: none; } input.sheet-choose.sheet-four[type="radio"] + span::before { content: "4"; text-shadow: none; } input.sheet-choose.sheet-five[type="radio"] + span::before { content: "5"; text-shadow: none; } input.sheet-choose.sheet-six[type="radio"] + span::before { content: "6"; text-shadow: none; } input.sheet-choose.sheet-one[type="radio"]:checked + span::before { color: green; } input.sheet-choose.sheet-two[type="radio"]:checked + span::before { color: #C7FF00; text-shadow: 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black; } input.sheet-choose.sheet-three[type="radio"]:checked + span::before { color: #FF7E00; } input.sheet-choose.sheet-four[type="radio"]:checked + span::before { color: #FF410B; } input.sheet-choose.sheet-five[type="radio"]:checked + span::before { color: red; } input.sheet-choose.sheet-six[type="radio"]:checked + span::before { color: darkred; } /* ===== Gender ===== */ input.sheet-choose.sheet-male[type="radio"] + span::before { content: "M"; text-shadow: none; font-weight:700; font-size:1.2em } input.sheet-choose.sheet-other[type="radio"]:checked + span::before, input.sheet-choose.sheet-female[type="radio"]:checked + span::before, input.sheet-choose.sheet-male[type="radio"]:checked + span::before { color: green; } input.sheet-choose.sheet-female[type="radio"] + span::before { content: "F"; text-shadow: none; font-weight:700; font-size:1.2em } input.sheet-choose.sheet-other[type="radio"] + span::before { content: "Other"; text-shadow: none; font-weight:700; font-size:1.2em } /* ----Big Check 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: "✓"; } /*=====Tooltips=====*/ /*===== top =====*/ .sheet-tooltips { position: relative; display: inline; } .sheet-tooltips span { position: absolute; width:200px; color: #000000; background: #FFFFFF; border: 2px solid #6D6D6D; height: 60px; line-height: 30px; text-align: center; visibility: hidden; border-radius: 6px; padding:2px; } .sheet-tooltips span:before { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -12px; width: 0; height: 0; border-top: 12px solid #6D6D6D; border-right: 12px solid transparent; border-left: 12px solid transparent; } .sheet-tooltips span:after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -8px; width: 0; height: 0; border-top: 8px solid #FFFFFF; border-right: 8px solid transparent; border-left: 8px solid transparent; } :hover.sheet-tooltips span { visibility: visible; opacity: 1; bottom: 30px; left: 50%; margin-left: -76px; z-index: 999; } /*===== left =====*/ .sheet-tooltips-left { position: relative; display: inline; } .sheet-tooltips-left span { position: absolute; width:280px; color: #000000; background: #FFFFFF; border: 2px solid #6D6D6D; height: 60px; line-height: 30px; text-align: center; visibility: hidden; border-radius: 6px; } .sheet-tooltips-left span:before { content: ''; position: absolute; top: 25%; left: 100%; margin-top: -12px; width: 0; height: 0; border-left: 12px solid #6D6D6D; border-top: 12px solid transparent; border-bottom: 12px solid transparent; } .sheet-tooltips-left span:after { content: ''; position: absolute; top: 25%; left: 100%; margin-top: -8px; width: 0; height: 0; border-left: 8px solid #FFFFFF; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } :hover.sheet-tooltips-left span { visibility: visible; opacity: 1; right: 100%; top: 50%; margin-top: -15px; margin-right: 15px; z-index: 999; } /* tooltipsright */ .sheet-tooltips-right { position: relative; display: inline; } .sheet-tooltips-right span { position: absolute; width:280px; color: #000000; background: #FFFFFF; border: 2px solid #6D6D6D; height: 60px; line-height: 30px; text-align: center; visibility: hidden; border-radius: 6px; } .sheet-tooltips-right span:before { content: ''; position: absolute; top: 25%; right: 100%; margin-top: -12px; width: 0; height: 0; border-right: 12px solid #6D6D6D; border-top: 12px solid transparent; border-bottom: 12px solid transparent; } .sheet-tooltips-right span:after { content: ''; position: absolute; top: 25%; right: 100%; margin-top: -8px; width: 0; height: 0; border-right: 8px solid #FFFFFF; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } :hover.sheet-tooltips-right span { visibility: visible; opacity: 1; left: 100%; top: 50%; margin-top: -15px; margin-left: 15px; z-index: 999; } /*=====Buttons=====*/ button[type=roll].sheet-lightbutton:before { background-image: none; /*background-color: #f2f5d3;*/ /*background-color: white;*/ content: ""; } button[type=roll].sheet-lightbutton { background-image: none; background: transparent; color:black; font-size:0.8em; font-weight:400; border-radius: 8px; box-shadow:none; height:28px; width:100%; border: none; padding:none; text-align:left; } button[type=roll].sheet-lightbutton:hover { border: none; background:black; color:white; } button[type=roll].sheet-lightbutton:active { border: none; background:red; color:black; } /*=====Buttons=====*/ button[type=roll].sheet-button:before { background-image: none; /*background-color: #f2f5d3;*/ /*background-color: white;*/ content: ""; } button[type=roll].sheet-button { background-image: none; background: transparent; color:black; font-size:1em; font-weight:700; border-radius: 8px; box-shadow:none; height:28px; width:100%; border: none; padding:none; } button[type=roll].sheet-button:hover { border: none; background:black; color:white; } button[type=roll].sheet-button:active { border: none; background:red; color:black; } /*=====gmbutton=====*/ button[type=roll].sheet-gmbutton:before { background-image:none; /*background-color: #f2f5d3;*/ /*background-color: white;*/ content: ""; } button[type=roll].sheet-gmbutton { background-image:none; background:yellow; color:black; font-size:0.7em; font-weight:400; border-radius: 8px; box-shadow:none; height:20px; width:20px; border: none; padding:none; border-radius:50%; } button[type=roll].sheet-gmbutton:hover { border: none; background:black; color:white; } button[type=roll].sheet-button:active { border: none; background:red; color:black; } /*-----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: 3em; 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; } /*------------rolltemplates-----------*/ /*------------comms-----------*/ .sheet-rolltemplate-comms table { width: 189px; padding: 1px; border: 1px solid; background-color: #ffffff; } .sheet-rolltemplate-comms 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-comms td { padding-left: 5px; } /*------------attack-----------*/ .sheet-rolltemplate-attack table { width: 189px; padding: 1px; border: 1px solid; background-color: #ffffff; } .sheet-rolltemplate-attack th { color: rgb(126, 45, 64); padding-left: 2px; line-height: 1.3em; font-size: 1.2em; font-family: 'RufscriptRegular'; font-variant: small-caps; } .sheet-rolltemplate-attack th.sheet-title { border-bottom:1px solid black; line-height: 1.5em; font-size: 1.4em; color: white; text-shadow: 0px 0px 3px black, 0px 0px 4px black, 0px 0px 5px black; } .sheet-rolltemplate-attack td { padding-left: 5px; } .sheet-rolltemplate-attack .sheet-italic, .sheet-rolltemplate-attack .sheet-italic, .sheet-rolltemplate-attack th.sheet-italic, .sheet-rolltemplate-attack td.sheet-italic { font-style: italic; } .sheet-rolltemplate-attack .sheet-center, .sheet-rolltemplate-attack .sheet-center, .sheet-rolltemplate-attack th.sheet-center, .sheet-rolltemplate-attack td.sheet-center { text-align: center; }