/*----------- Repeating Blocks -------------*/ .charsheet .repcontrol_add { display: block; background:#7F2108; color:white; text-shadow:0px 0px 2px #000,0px 0px 2px #000,0px 0px 2px #000; box-shadow:none; float:left!important; margin-bottom:0px; font-size:0.9em; height:2.2em; font-family: Copperplate, 'Copperplate Gothic Light', fantasy; } .charsheet .repcontrol_edit { display: inline-block; background:#7F2108; color:white; text-shadow:0px 0px 2px #000,0px 0px 2px #000,0px 0px 2px #000; box-shadow:none; float:none!important; margin-bottom:5px; font-size:0.9em; height:2.2em; font-family: Copperplate, 'Copperplate Gothic Light', fantasy; } .charsheet .repcontrol_del { background:red; color:white; text-shadow:0px 0px 2px #000,0px 0px 2px #000,0px 0px 2px #000; box-shadow:none; float:none!important; margin-bottom:5px; font-size:0.9em; height:2.2em; } /*----------- Top Half -------------*/ .sheet-top_half { background-size:840px; } /* background toggle*/ .sheet-useBackground input[value="1"]:checked ~ *.sheet-background { background-image:none; background-color:#F3F8F6; } .sheet-useBackground input[value="2"]:checked ~ *.sheet-background { background-image:url("http://i.imgur.com/izwlEug.jpg"); background-size: 100%; } .sheet-banner { background-image:url('https://cf.geekdo-images.com/images/pic619982_t.jpg'); background-repeat: no-repeat; background-size: 100% 100%; height:200px; width:200px; margin-left:auto; margin-right:auto; } /*----------- Tabs Setup -------------*/ .charsheet { width:840px; } div.sheet-core-content { display: none; width:840px; } .charsheet div[class^="sheet-section"] { display: none; background-size:840px; } .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 { display: block; } .charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] { display: block; } .charsheet input.sheet-tab { width: 100px; height: 20px; cursor: pointer; position: relative; opacity: 0; z-index: 998; box-shadow: 0px 0px 5px blue; } .charsheet span.sheet-tab { text-align: center; display: inline-block; font-size: 13px; background-repeat: no-repeat; color: #7F2108; font-weight: bold; font-family: Copperplate, 'Copperplate Gothic Light', fantasy; border-radius: 4px; border: 2px solid #7F2108; width: 100px; height: 20px; cursor: pointer; position: relative; vertical-align: middle; margin-left: -105px; } .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-tab99:checked + span.sheet-tab99 { background: #7F2108; /*originally ab8b57*/ color: white; /*originally white*/ border-radius: 4px; border: 2px solid #7F2108; } /*----------- End Tab Setup -----------*/ /*----------- Font -----------*/ .sheet-tableI { margin-left:auto; margin-right:auto; font-family: Copperplate, 'Copperplate Gothic Light', fantasy; } .sheet-tableI th { font-size:8px; vertical-align:super; } .sheet-font { font-family: Copperplate, 'Copperplate Gothic Light', fantasy; font-weight:normal; } .sheet-tableII th { background:#000; color:white; } .sheet-tableII { margin-left:auto; margin-right:auto; } .sheet-tableII th.sheet-heading { background:#000; color:white; font-size:9px; } .sheet-text { border-top:none; border-left:none; border-right:none; border-radius:0px; box-shadow:none; font-size:12px; background: transparent; } input.sheet-text[type="text"]:focus { border-bottom:1px solid #000; border-radius:0px; box-shadow:none; background: white; } .sheet-title { border-top:none; border-left:none; border-right:none; border-radius:0px; box-shadow:none; font-size:1.8em; font-family: Copperplate, 'Copperplate Gothic Light', fantasy; text-align:center; background: transparent; } .sheet-number[type="text"]:focus, .sheet-number[type="number"]:focus, input.sheet-title[type="text"]:focus { border-radius:0px; box-shadow:none; background: white; } .sheet-number[type="number"] { background: transparent; border:none; border-radius:0px; box-shadow:none; text-align:center; border-bottom:1px solid #000; } .sheet-number[type="number"]::-webkit-inner-spin-button, .sheet-number[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .sheet-number[type="text"] { background: transparent; border:none; border-radius:0px; box-shadow:none; text-align:center; border-bottom:1px solid #000; width:100px; } input[type=number] { -moz-appearance:textfield; } input[type=number]:hover { -moz-appearance:none; } .sheet-ability { background: white; border:none; border-radius:5px; box-shadow:none; text-align:center; color:black: font-size:1.2em; margin:2px; } .sheet-ability[type="text"] { background: white; border:none; border-radius:5px; box-shadow:none; text-align:center; color:black: font-size:1.2em; margin:2px; width:100px; } select.sheet-number { background: transparent; width:80px; border:none; border-radius:0px; margin-bottom: 0; -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; padding-top:0; font-size:0.9em; } .sheet-type { border:none; border-radius:0px; box-shadow:none; text-align:center; background: transparent; width:130px; } .sheet-Rating[type="number"]:-ms-input-placeholder, .sheet-Specialty[type="number"]:-ms-input-placeholder{ font-size:0.5em; } .sheet-Rating[type="number"]:placeholder, .sheet-Specialty[type="number"]:placeholder{ font-size:0.5em; } .sheet-Rating[type="number"]::-webkit-input-placeholder, .sheet-Specialty[type="number"]::-webkit-input-placeholder{ font-size:0.5em; } .sheet-Rating[type="number"]:-moz-placeholder, .sheet-Specialty[type="number"]:-moz-placeholder{ font-size:0.5em; } .sheet-Rating[type="number"]::-moz-placeholder, .sheet-Specialty[type="number"]::-moz-placeholder { font-size:0.5em; } select.sheet-Specialty { width:90px; margin-bottom: 0; -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; padding-top:0; font-size:0.7em; } .sheet-smaller { font-size:0.8em } .sheet-smallest { font-size:0.7em } h3 { font-family: Copperplate, 'Copperplate Gothic Light', fantasy; text-align:center; } h4 { font-family: Copperplate, 'Copperplate Gothic Light', fantasy; color: #000; font-weight:bold; text-align:center; } h5 { font-family: Copperplate, 'Copperplate Gothic Light', fantasy; color: #000; font-weight:bold; } textarea.sheet-notes { border-radius:15px; border: 2px solid #7F2108; height:120px; resize:vertical; font-family: Copperplate, 'Copperplate Gothic Light', fantasy; } textarea.sheet-longnotes { border-radius:15px; border: 2px solid #7F2108; height:120px; resize:vertical; font-family: Copperplate, 'Copperplate Gothic Light', fantasy; } /*-----Tool Tips-----*/ div.sheet-tooltips { position: relative; display: inline; } div.sheet-tooltips span { position: absolute; width:140px; color: #000000; background: #FFFFFF; border: 2px solid #6D6D6D; height: 30px; line-height: 30px; text-align: center; visibility: hidden; border-radius: 6px; } div.sheet-tooltips span:before { content: ''; position: absolute; top: 50%; right: 100%; margin-top: -12px; width: 0; height: 0; border-right: 12px solid #6D6D6D; border-top: 12px solid transparent; border-bottom: 12px solid transparent; } div.sheet-tooltips span:after { content: ''; position: absolute; top: 50%; right: 100%; margin-top: -8px; width: 0; height: 0; border-right: 8px solid #FFFFFF; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } div.sheet-tooltips:hover span { visibility: visible; opacity: 1; left: 100%; top: 50%; margin-top: -15px; margin-left: -15px; z-index: 999; } .sheet-skill_name { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: none; box-shadow: none; outline:0; padding:0; margin:0; background: transparent; font-weight:bold; font-variant:small-caps; width: 90px; color: black; text-align:center; } /*-----radio boxes-----*/ /*-----Tool Tips-----*/ div.sheet-tooltipsdown { position: relative; display: inline; } div.sheet-tooltipsdown span { position: absolute; width:800px; color: #000; background: #fff; height: 350px; line-height: 30px; text-align: center; visibility: hidden; border-radius: 6px; border:3px solid black; } div.sheet-tooltipsdown span:after { content: ''; position: absolute; top: 50%; right: 100%; margin-top: -8px; width: 0; height: 0; border-right: 8px solid #000000; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } div:hover.sheet-tooltipsdown span { visibility: visible; opacity: 1; left: 100%; top: 50%; margin-top: -15px; margin-left: 15px; z-index: 999; } /*-----radio boxes-----*/ input.sheet-hider:not(:checked) ~ div.sheet-hold { display: none; } input.sheet-hider:checked ~ div.sheet-hold { display: inline; } .sheet-hidden { display:none; } /* -----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: 14px; text-align: center; display: inline-block; vertical-align: middle; -moz-box-shadow: 0 0 10px rgba(216,218,300, 1.8); -webkit-box-shadow: 0 0 10px rgba(216,218,300, 1.8); box-shadow: 0 0 10px rgba(216,218,300, 1.8); background: black; color:black; content: ""; width: 12px; height: 12px; -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: ""; background: #fff; } /*------------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; background: none; } /* ----Hide actual Big radio---- */ input.sheet-bigcheck[type="radio"] { width: 14px; height: 14px; position: relative; top: -2px; left: 5px; margin-left: 0px; margin-top: -10px; margin-bottom: -10px; margin-right: -10px; cursor: pointer; z-index: 1; opacity: 0; } /* ----Fake Big radio ---- */ input.sheet-bigcheck[type="radio"] + span::before { margin-right: 4px; line-height: 14px; text-align: center; display: inline-block; vertical-align: middle; position: relative; top: -2px; left: 0px; -moz-box-shadow: 0 0 2px #000; -webkit-box-shadow: 0 0 2px #000; box-shadow: inset 0 0 2px #000, inset 0 0 4px #000; background:#F3F8F6; } input.sheet-bigcheck[type="radio"] + 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="radio"]:checked + span::before { color: red; content: "✓"; text-shadow:none; font-weight:bold; } /* ----Hide actual Big Checkbox---- */ input.sheet-bigcheck[type="Checkbox"] { width: 14px; height: 14px; position: relative; top: -2px; left: 5px; margin-left: 0px; margin-top: -10px; margin-bottom: -10px; margin-right: -10px; cursor: pointer; z-index: 1; opacity: 0; } /* ----Fake Big Checkbox ---- */ input.sheet-bigcheck[type="Checkbox"] + span::before { margin-right: 4px; line-height: 14px; text-align: center; display: inline-block; vertical-align: middle; position: relative; top: -2px; left: 0px; -moz-box-shadow: 0 0 2px #000; -webkit-box-shadow: 0 0 2px #000; box-shadow: inset 0 0 2px #000, inset 0 0 4px #000; } 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: "✓"; text-shadow:none; font-weight:bold; } /*------------Button-----------*/ /* ======== skillbtn ========*/ .sheet-skillbtn button[type="roll"]:before, .sheet-skillbtn:before { content: ""!important; display: none; border:none; } .sheet-skillbtn button[type="roll"], .sheet-skillbtn { display: block; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #000; box-shadow: none; outline:0; margin: 0; background: black; font-size:1em !important; font-weight:bold; font-variant:small-caps; height:90px; width: 100px; padding-left:20px; color: white; } .sheet-skillbtn button[type="roll"]:hover, .sheet-skillbtn:hover { background: black; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(left, black , white); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, black, white); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, black, white); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, black , white); /* Standard syntax */ } .sheet-skillbtn button[type="roll"]:active, .sheet-skillbtn:active { background: black; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(left, white , black); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, white, black); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, white, black); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, white , black); /* Standard syntax */ } /*------------Button-----------*/ /* ======== btn ========*/ .sheet-btn button[type="roll"]:before, .sheet-btn:before { content: ""!important; display: none; border:none; } .sheet-btn button[type="roll"], .sheet-btn { display: block; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: none; box-shadow: none; outline:0; margin: 0; background: transparent; font-size:12px !important; font-weight:bold; font-variant:small-caps; height:20px; width: 90px; padding-left:20px; color: black; } .sheet-btn button[type="roll"]:hover, .sheet-btn:hover { background: black; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(left, black , white); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, black, white); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, black, white); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, black , white); /* Standard syntax */ color: white; } .sheet-btn button[type="roll"]:active, .sheet-btn:active { background: black; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(left, white , black); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, white, black); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, white, black); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, white , black); /* Standard syntax */ color: white; } /* ======== weapon ========*/ .sheet-weapon button[type="roll"]:before, .sheet-weapon:before { content: ""!important; display: none; border:none; } .sheet-weapon button[type="roll"], .sheet-weapon { display: block; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: none; box-shadow: none; outline:0; margin: 0; background: black; font-size:1.2em !important; font-weight:bold; height:50px; width: 100px; padding-left:20px; color: white; -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Safari */ transform: rotate(90deg); } .sheet-weapon button[type="roll"]:hover, .sheet-weapon:hover { background: black; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(white, black); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(white, black); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(white, black); /* For Firefox 3.6 to 15 */ background: linear-gradient(white, black); /* Standard syntax */ } .sheet-weapon button[type="roll"]:active, .sheet-weapon:active { background: white; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(black, white); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(black, white); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(black, white); /* For Firefox 3.6 to 15 */ background: linear-gradient(black, white); /* Standard syntax */ } /* ======== fxbtn ========*/ .sheet-fxbtn button[type="roll"]:before, .sheet-fxbtn:before { content: ""!important; display: none; border:none; } .sheet-fxbtn button[type="roll"], .sheet-fxbtn { display: block; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 2px solid #7F2108; box-shadow: none; outline:0; margin: 0; background: transparent; font-size:12px !important; font-weight:bold; font-variant:small-caps; height:20px; width: 90px; padding-left:20px; color: #fff; } .sheet-fxbtn button[type="roll"]:hover, .sheet-fxbtn:hover { background: black; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(left, black , #7F2108); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, black, #7F2108); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, black, #7F2108); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, black , #7F2108); /* Standard syntax */ color: white; } .sheet-fxbtn button[type="roll"]:active, .sheet-fxbtn:active { background: black; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(left, #7F2108 , black); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, #7F2108, black); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, #7F2108, black); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, #7F2108 , black); /* Standard syntax */ color: white; } /*=== Roll Templates ===*/ /*=== show ===*/ .sheet-rolltemplate-show table { width: 100%; border-radius:15px 15px 15px 15px; color: #7F2108; font-size: 1em; font-variant: small-caps; box-shadow: none; background: #F3F8F6; box-shadow: 0px 0px 2px #7F2108, 0px 0px 2px #7F2108, 0px 0px 2px #7F2108; } .sheet-rolltemplate-show td { padding: 5px; } /*=== attack ===*/ .sheet-rolltemplate-attack table { width: 100%; border-radius:15px 15px 15px 15px; color: #7F2108; font-size: 1em; font-variant: small-caps; box-shadow: none; background: #F3F8F6; box-shadow: 0px 0px 2px #7F2108, 0px 0px 2px #7F2108, 0px 0px 2px #7F2108; } .sheet-rolltemplate-attack td { padding: 5px; } .sheet-rolltemplate-attack td.sheet-confirm { font-style:italic; color:black; } .sheet-rolltemplate-attack td.sheet-detail { font-style:italic; border-radius:15px 15px 0px 0px; } .sheet-rolltemplate-attack td.sheet-last_left { border-radius:0px 0px 0px 15px; } .sheet-rolltemplate-attack td.sheet-last_right { border-radius:0px 0px 15px 0px; } .sheet-rolltemplate-attack td.sheet-damage .inlinerollresult .fullcrit, .sheet-rolltemplate-attack td.sheet-damage .inlinerollresult .fullfail, .sheet-rolltemplate-attack td.sheet-damage .inlinerollresult .importantroll, .sheet-rolltemplate-attack td.sheet-damage .inlinerollresult, .sheet-rolltemplate-attack .inlinerollresult { background:transparent; border:none; box-shadow:none; color:black; } .sheet-rolltemplate-attack .inlinerollresult.fullcrit { border: none; background:black; color:white; border-radius:5px; box-shadow:none; } .sheet-rolltemplate-attack .inlinerollresult.fullfail { border: none; background:red; color:white; border-radius:5px; box-shadow:none; } .sheet-rolltemplate-attack .inlinerollresult.importantroll { border: none; } /*=== show ===*/ .sheet-rolltemplate-fx table { width: 100%; border-radius:15px 15px 15px 15px; color: #7F2108; font-size: 1em; font-variant: small-caps; box-shadow: none; background: #F3F8F6; box-shadow: 0px 0px 2px #7F2108, 0px 0px 2px #7F2108, 0px 0px 2px #7F2108; } .sheet-rolltemplate-fx td { padding: 5px; }