.sheet-row input { width: 100%; background-color: #b0b7d5; color: black; } .sheet-row:nth-child(even) input{ background-color: #5f77ab; } .sheet-tabHeaderArea { text-align: center; margin: auto; width: 100%; } .sheet-costType { width: 100px; } .sheet-combatTable { margin: auto; width: 100%; } .sheet-combatTableCell { display: inline-block; } .sheet-combatTableHeader { display: inline-block; } .sheet-featTable { background: #ebc555; padding: 10px; } .sheet-roleTable { background: #bd4b4d; padding: 10px; color: #fff; } .sheet-classTable { background: #5f77ab; padding: 10px; } .sheet-boxText textarea { background: #b0b7d5; } input.sheet-heading { background: #b0b7d5; } input.sheet-heading[type="number"] { text-align: center; } /*-----background-----*/ .charsheet { background: white; background-size:100%; } .sheet-banner { background: url('http://www.strikerpg.com/uploads/4/5/5/4/45540963/1421987367.png'); background-size: 100%; background-repeat: no-repeat; background-position: right top; } .sheet-banner-content { margin: 0 auto; padding: 100px; } /*-----Tabs-----*/ div.sheet-core-content { display: none; width:840px; } .charsheet div[class^="sheet-section"] { display: none; background: url(''); background-size:100%; padding-left:10px; padding-right:30px; padding-top:10px; padding-bottom:10px; } .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: 20px; font-family: ''; background: #b0b7d5; color: black; font-weight: bold; border-radius: 4px; font-family: 'Bonzai'; 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; } .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: #5f77ab; /*originally ab8b57*/ color: black; /*originally white*/ border-radius: 4px; border:2px solid #a7c2ff; } .charsheet input.sheet-tab99:checked + span.sheet-tab99 { background: #ffcd2d; color: white; border-radius: 4px; border:2px solid #ffcd2d; } .charsheet span.sheet-tab99 { background: white; color: #ffcd2d; font-weight: bold; border-radius: 4px; border:2px solid #ffcd2d; } .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; } /*----------- Text Formatting -----------*/ .sheet-seconadry_attribute { border:none; background:transparent; box-shadow:none; } .sheet-prime_attribute { 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-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:white; font-size:1.4em; font-weight:700; text-shadow: 0px 0px 10px black, 0px 0px 5px black, 0px 0px 5px black; } .sheet-skill-text[type="text"] { border:none; background:transparent; box-shadow:none; text-align:left; color:black; font-size:1em; font-weight:400; } .sheet-skill-text:focus, .sheet-heading:focus, .sheet-weapon[type="text"]:focus, .sheet-power:focus, .sheet-skill:focus { background:#add8e6; color:black; } .sheet-weapon[type="number"]:focus, .sheet-skill[type="number"]:focus{ background:#add8e6; color:black; text-shadow: none; } /*-----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: 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); color:black; content: "•"; font-family: 'New Times Roman'; 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: ""; } /*------------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-----------*/ /* -------------------- 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; }