/* CSS Reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, select { margin: 0; padding: 0; border: 0; font-size: 10px; font: inherit; vertical-align: baseline; } /* Multiple Sheet Functionality */ div.sheet-sheetType { display: none; } input.sheet-crewmemberSelector:checked ~ div.sheet-crewmemberSheet, input.sheet-shipSelector:checked ~ div.sheet-shipSheet, input.sheet-launchSelector:checked ~ div.sheet-launchSheet { display: block; } /* Multiple Tab Functionality */ div.sheet-tabType { display: none; } input.sheet-tab1Selector:checked ~ div.sheet-tab1, input.sheet-tab2Selector:checked ~ div.sheet-tab2, input.sheet-tab3Selector:checked ~ div.sheet-tab3 { display: block; } /*Hide Radio Buttons for tabs*/ input[type="radio"].sheet-tabSelector { opacity: 0; position: relative; width: 150px; height: 20px; top: 18px; left: 400px; cursor: pointer; z-index: 3; white-space: nowrap; margin: 2px; } /*Fake tabs*/ input[type="radio"].sheet-tabSelector + span::before { content: attr(title); border: solid 1px #a8a8a8; position: absolute; top: 185px; left: 410px; line-height: 20px; text-align: center; vertical-align: middle; background: #D3D3D3; width: 150px; height: 20px; z-index: 0; font-size: 10px; } input[type="radio"].sheet-tab2 + span::before { left: 572px; } input[type="radio"].sheet-tab3 + span::before { left: 730px; } /*Change selected tab appearence*/ input.sheet-tabSelector:checked + span::before { background: #fff; border-bottom-color: #fff; } /*General Sheet Style*/ body { font-family: "PT Sans", Helvetica, sans-serif; font-size: 1em; color: #000; background-color: #FFF; line-height: 150%; } section.sheet-header { display: block; vertical-align: middle; background-color: black; color: #fdf6ee; } img.sheet-BGImg { z-index: -1; } h1, h2, h3, h4, th { text-align: left; font-variant: small-caps; font-weight: 500; } h1 { font-size: 2em; } h2 { font-size: 1.3em; } h3 { font-size: 1.1em; } h4 { font-size: 0.9em; } td, p { font-size: 1em; } br { font-size: 0.5em; height: 50%; } hr { border-top: 1px solid #D3D3D3; } /*All Hidden styles*/ .sheet-hidden { display: none; } /*Grid*/ div.sheet-rowTop { position: static; } div.sheet-row250 { position: absolute; top: 250px; } div.sheet-row300 { position: absolute; top: 300px; } div.sheet-row350 { position: absolute; top: 350px; } div.sheet-row400 { position: absolute; top: 400px; } div.sheet-row450 { position: absolute; top: 450px; } div.sheet-row500 { position: absolute; top: 500px; } div.sheet-row600 { position: absolute; top: 600px; } div.sheet-row650 { position: absolute; top: 650px; } div.sheet-row700 { position: absolute; top: 700px; } div.sheet-row800 { position: absolute; top: 800px; } div.sheet-row850 { position: absolute; top: 850px; } div.sheet-row900 { position: absolute; top: 900px; } div.sheet-row950 { position: absolute; top: 950px; } div.sheet-row1000 { position: absolute; top: 1000px; } div.sheet-row1050 { position: absolute; top: 1050px; } div.sheet-row1100 { position: absolute; top: 1100px; } div.sheet-row1150 { position: absolute; top: 1150px; } div.sheet-row1200 { position: absolute; top: 1200px; } div.sheet-row1250 { position: absolute; top: 1250px; } div.sheet-row1300 { position: absolute; top: 1300px; } div.sheet-row1350 { position: absolute; top: 1350px; } div.sheet-row1400 { position: absolute; top: 1400px; } div.sheet-row1500 { position: absolute; top: 1500px; } div.sheet-row1600 { position: absolute; top: 1600px; } div.sheet-row1650 { position: absolute; top: 1650px; } div.sheet-row1700 { position: absolute; top: 1700px; } div.sheet-row1800 { position: absolute; top: 1800px; } div.sheet-row1900 { position: absolute; top: 1900px; } div.sheet-row1950 { position: absolute; top: 1950px; } div.sheet-row2000 { position: absolute; top: 2000px; } div.sheet-row2100 { position: absolute; top: 2100px; } div.sheet-row2150 { position: absolute; top: 2150px; } div.sheet-row2200 { position: absolute; top: 2200px; } div.sheet-row2250 { position: absolute; top: 2250px; } div.sheet-row2300 { position: absolute; top: 2300px; } div.sheet-row2400 { position: absolute; top: 2400px; } div.sheet-row2500 { position: absolute; top: 2500px; } div.sheet-row2600 { position: absolute; top: 2600px; } div.sheet-row2650 { position: absolute; top: 2650px; } div.sheet-row2700 { position: absolute; top: 2700px; } div.sheet-row2750 { position: absolute; top: 2750px; } div.sheet-row2800 { position: absolute; top: 2800px; } div.sheet-row2850 { position: absolute; top: 2850px; } div.sheet-row2900 { position: absolute; top: 2900px; } div.sheet-row2950 { position: absolute; top: 2950px; } div.sheet-row3000 { position: absolute; top: 3000px; } div.sheet-row3100 { position: absolute; top: 3100px; } div.sheet-row3200 { position: absolute; top: 3200px; } div.sheet-row3300 { position: absolute; top: 3300px; } div.sheet-columnLeft { justify-content: space-between; position: absolute; left: auto; top: auto; } div.sheet-column200 { justify-content: space-between; position: absolute; left: 200px; top: auto; } div.sheet-column225 { justify-content: space-between; position: absolute; left: 225px; top: auto; } div.sheet-column300 { justify-content: space-between; position: absolute; left: 300px; top: auto; } div.sheet-column400 { justify-content: space-between; position: absolute; left: 400px; } div.sheet-column450 { justify-content: space-between; position: absolute; left: 450px; } div.sheet-column500 { justify-content: space-between; position: absolute; left: 500px; top: auto; } div.sheet-column600 { justify-content: space-between; position: absolute; left: 600px; top: auto; } div.sheet-column700 { justify-content: space-between; position: absolute; left: 700px; top: auto; } /*select & text boxes*/ select, textarea, input[type="text"], input[type="number"] { border-style: hidden; border-bottom: solid 1px #000; font-family: 'PT Sans', sans-serif; color: #000; height: 120%; font-variant: normal; } input[type="number"] { text-align: center; } select.sheet-start { border-style: hidden; border: none; font-weight: normal; } select.sheet-full, input[type="text"].sheet-full, input[type="number"].sheet-full, p.sheet-full { width: 95%; } input[type="text"].sheet-aspect, select.sheet-aspect { font-weight: bold; } select.sheet-most, input[type="text"].sheet-most, input[type="number"].sheet-most { width: 80%; } select.sheet-threeQuarters, input[type="text"].sheet-threeQuarters, input[type="number"].sheet-threeQuarters { width: 60%; } select.sheet-half, input[type="text"].sheet-half, input[type="number"].sheet-half, p.sheet-half { width: 47%; } select.sheet-third, input[type="text"].sheet-third, input[type="number"].sheet-third { width: 32%; } select.sheet-quarter, input[type="text"].sheet-quarter, input[type="number"].sheet-quarter { width: 28%; } select.sheet-fifth, input[type="text"].sheet-fifth, input[type="number"].sheet-fifth { width: 21%; } select.sheet-sixth, input[type="text"].sheet-sixth, input[type="number"].sheet-sixth { width: 12%; } select.sheet-typeSelector { font-variant: small-caps; width: 37%; border: none; } textarea { border: none; font-variant: normal; width: 92%; overflow: hidden; } textarea.sheet-description { height: 2.5em; } textarea.sheet-data { height: 6em; } textarea.sheet-trailer { height: 4em; width: 95%; } /*Tables*/ /* Aspects */ div.sheet-fullPage { width: 900px; box-sizing: content-box; } table.sheet-twoThirdPage, div.sheet-twoThirdPage { width: 600px; box-sizing: content-box; } table.sheet-halfPage, div.sheet-halfPage { width: 430px; box-sizing: content-box; } /*Departments, skills, specialties, tools*/ table.sheet-thirdPage, div.sheet-thirdPage { width: 280px; box-sizing: content-box; } table.sheet-quarterPage, div.sheet-quarterPage { width: 200px; box-sizing: content-box; } tr.sheet-skill, tr.sheet-specialty, p.sheet-skill, p.sheet-specialty { width: 128px; box-sizing: content-box; text-align: left; } tr.sheet-specialty, p.sheet-specialty { text-indent: 10px; } td.sheet-skilldice { text-indent: -30px; } td.sheet-right, p.sheet-right { text-align: right; } td.sheet-department { font-variant: small-caps; font-weight: 500; } td.sheet-smallCell { width: 30px; } /*Lists*/ div.sheet-doubleColumn { width: 580px; box-sizing: content-box; } /* Hide actual radio/checkbox for dice tracks*/ input[type="radio"].sheet-D10, input[type="checkbox"].sheet-Overcharge, input[type="radio"].sheet-Boost, input[type="radio"].sheet-D6, input[type="checkbox"].sheet-D6, input[type="radio"].sheet-Reactor, input[type="checkbox"].sheet-armourConditionSlot, input[type="checkbox"].sheet-resilienceConditionSlot, input[type="checkbox"].sheet-integertyConditionSlot, input[type="checkbox"].sheet-vitalityConditionSlot, input[type="checkbox"].sheet-checkbox, input[type="checkbox"].sheet-patch { opacity: 0; width: 16px; height: 16px; position: relative; top: 5px; left: 6px; margin: -10px; cursor: pointer; z-index: 1; } /* Fake checkbox for general checkboxes*/ input[type="checkbox"].sheet-checkbox + span::before { margin-right: 4px; line-height: 14px; text-align: center; display: inline-block; vertical-align: middle; content: "◎"; width: 14px; height: 14px; font-size: 12px; } /* Fake checkbox checks as filled general checkboxes*/ input[type="checkbox"]:checked.sheet-checkbox + span::before { content: "◉"; } /* Fake checkbox as Armour condition slot*/ input[type="checkbox"].sheet-armourConditionSlot + span::before { margin-right: 4px; line-height: 14px; text-align: center; vertical-align: middle; width: 10px; height: 10px; font-size: 22px; font-family: "Pictos Custom"; content: "e"; } /* Fake checkbox checks as filled Armour condition slots*/ input[type="checkbox"]:checked.sheet-armourConditionSlot + span::before { margin-right: 4px; line-height: 14px; text-align: center; vertical-align: middle; width: 10px; height: 10px; font-size: 22px; font-family: "Pictos Three"; content: "b"; } /* Fake checkbox as Resilience condition slot*/ input[type="checkbox"].sheet-resilienceConditionSlot + span::before { margin-right: 4px; line-height: 14px; text-align: center; vertical-align: middle; width: 10px; height: 10px; font-size: 22px; font-family: "Pictos Custom"; content: "e"; } /* Fake checkbox checks as filled Resilience condition slots*/ input[type="checkbox"]:checked.sheet-resilienceConditionSlot + span::before { margin-right: 4px; line-height: 14px; text-align: center; vertical-align: middle; width: 10px; height: 10px; font-size: 20px; font-family: "dicefontd6"; content: "C"; } /* Fake checkbox as Integrity condition slot*/ input[type="checkbox"].sheet-integertyConditionSlot + span::before { margin-right: 4px; line-height: 14px; text-align: center; vertical-align: middle; width: 10px; height: 10px; font-size: 22px; font-family: "Pictos Custom"; content: "e"; } /* Fake checkbox checks as filled Integrity condition slots*/ input[type="checkbox"]:checked.sheet-integertyConditionSlot + span::before { margin-right: 4px; line-height: 14px; text-align: center; vertical-align: middle; width: 10px; height: 10px; font-size: 21px; color: darkred; font-family: "Pictos"; content: "*"; } /* Fake checkbox as Vitality condition slot*/ input[type="checkbox"].sheet-vitalityConditionSlot + span::before { margin-right: 4px; line-height: 14px; text-align: center; vertical-align: middle; width: 10px; height: 10px; font-size: 22px; font-family: "Pictos Custom"; content: "e"; } /* Fake checkbox checks as filled Integrity condition slots*/ input[type="checkbox"]:checked.sheet-vitalityConditionSlot + span::before { margin-right: 4px; line-height: 14px; text-align: center; vertical-align: middle; width: 10px; height: 10px; font-size: 18px; color: darkred; font-family: "Pictos"; content: "D"; } /* Fake checkbox for patches*/ input[type="checkbox"].sheet-patch + span::before { margin-right: 4px; line-height: 14px; text-align: center; display: inline-block; vertical-align: middle; content: "☐"; width: 14px; height: 14px; font-size: 18px; } /* Fake checkbox checks as filled patches*/ input[type="checkbox"]:checked.sheet-patch + span::before { content: "☒"; } /* Fake radio as D10s*/ input[type="radio"].sheet-D10 + span::before { margin-right: 6px; line-height: 14px; text-align: center; vertical-align: middle; width: 12px; height: 12px; font-size: 24px; font-family: "dicefontd10"; content: "J"; } /* Remove fill from all radios _after_ selected D10 */ input[type="radio"]:checked.sheet-D10 ~ input[type="radio"].sheet-D10 + span::before { margin-right: 6px; line-height: 14px; text-align: center; vertical-align: middle; width: 12px; height: 12px; font-size: 24px; font-family: "dicefontd10"; content: "0"; } /* Fake checkbox as Overcharge*/ input[type="checkbox"].sheet-Overcharge + span::before { margin-right: 4px; line-height: 14px; text-align: center; vertical-align: middle; width: 12px; height: 12px; font-size: 22px; color: lightgray; font-family: "Pictos"; content: "!"; } /* Remove fill from unchecked Overcharge */ input[type="checkbox"]:checked.sheet-Overcharge + span::before { margin-right: 4px; line-height: 14px; text-align: center; vertical-align: middle; width: 12px; height: 12px; font-size: 22px; color: orange; font-family: "Pictos"; content: "!"; } /* Fake radio as Uparrows*/ input[type="radio"].sheet-Boost + span::before { margin-right: 4px; line-height: 14px; text-align: center; vertical-align: middle; letter-spacing: 0.12em; width: 12px; height: 12px; font-size: 24px; font-family: "dicefontd4"; content: "A"; } /* Remove fill from all radios _after_ selected Uparrows */ input[type="radio"]:checked.sheet-Boost ~ input[type="radio"].sheet-Boost + span::before { margin-right: 4px; line-height: 14px; text-align: center; vertical-align: middle; letter-spacing: 0.12em; width: 12px; height: 12px; font-size: 24px; font-family: "dicefontd4"; content: "0"; } /* Alter the 0 die to a different font */ input[type="radio"].sheet-ZeroDie + span::before { font-size: 14px; color: lightgray; content: "|"; } /* Description Damage*/ em.sheet-techlevelBoost { line-height: 14px; text-align: center; vertical-align: middle; width: 12px; height: 12px; font-size: 22px; font-style: normal; font-family: "dicefontd4"; } /* Description Advantage */ em.sheet-FittingAdv, select.sheet-FittingAdv { margin-right: 4px; line-height: 14px; text-align: center; vertical-align: middle; height: 120%; font-size: 22px; font-family: "dicefontd10"; border: none; font-weight: normal; } /* Fake radio as Reactor Capacity*/ input[type="radio"].sheet-Reactor + span::before { margin-right: 4px; text-align: center; vertical-align: baseline; width: 18px; height: 18px; font-size: 18px; font-family: 'Pictos'; content: "Q"; } /* Remove fill from all radios _after_ selected Reactor Capacity */ input[type="radio"]:checked.sheet-Reactor ~ input[type="radio"].sheet-Reactor + span::before { margin-right: 4px; text-align: center; vertical-align: baseline; width: 18px; height: 18px; font-size: 18px; color: lightgray; font-family: 'Pictos'; content: "Q"; } } /* Fake radio D6 */ input[type="radio"].sheet-D6 + span::before, input[type="checkbox"].sheet-D6 + span::before { margin-right: 4px; line-height: 14px; text-align: center; vertical-align: middle; width: 12px; height: 12px; font-size: 22px; font-family: "dicefontd6"; content: "0"; } input[type="radio"]:checked.sheet-D6 + span::before, input[type="checkbox"]:checked.sheet-D6 + span::before { margin-right: 4px; line-height: 14px; text-align: center; vertical-align: middle; width: 12px; height: 12px; font-size: 20px; font-family: "dicefontd6"; content: "F"; } /* Roll Button Appearance*/ button[type=roll].sheet-rollButton::before { }