.sheet-rolltemplate-eh table { background: #fff; border: solid 2px #000; border-collapse: separate; border-radius: 0; overflow: hidden; width: 100%; } .sheet-rolltemplate-eh table thead th { background: #000; color: #fff; padding: 0.5em 1em; } .sheet-rolltemplate-eh table tbody { text-align: center; } .sheet-rolltemplate-eh table tbody td { padding: 0.5em 0; } .sheet-rolltemplate-eh table tbody td hr { border-top: 1px solid #000; margin: 2px; } .sheet-rolltemplate-eh table tbody .sheet-crit { font-weight: bold; text-transform: uppercase; } .sheet-rolltemplate-eh table tbody .sheet-notes { font-size: 0.8em; font-style: italic; } .charsheet { background: #fff; height: 100%; width: 9in; } .charsheet input { border: none; box-shadow: none; } .charsheet input[type=number]::-webkit-inner-spin-button, .charsheet input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .charsheet select { box-shadow: none; height: auto; line-height: 18px; margin-bottom: 0; -moz-appearance: none; -webkit-appearance: none; } .charsheet textarea { background: linear-gradient(to bottom, transparent, transparent 17px, #000); background-attachment: local; background-size: 1px 18px; border: none; box-shadow: none; padding: 0; resize: none; } .charsheet .sheet-bubble { display: inline-block; height: 50px; position: relative; width: 48px; } .charsheet .sheet-bubble label { bottom: -16px; font-size: 10px; left: 50%; padding: 0; position: absolute; transform: translateX(-50%); width: auto; } .charsheet .sheet-bubble .sheet-inner { border: solid 3px black; border-radius: 32px; height: 32px; left: 50%; overflow: hidden; position: absolute; text-align: center; transform: translateX(-50%); width: 32px; } .charsheet .sheet-bubble .sheet-inner input { background: transparent; line-height: 32px; max-height: 32px; max-width: 32px; text-align: center; vertical-align: middle; } .charsheet .sheet-bubble .sheet-inner .sheet-readOnly { background: #ccc; display: inline-block; height: 32px; line-height: 32px; width: 32px; } .charsheet .sheet-fieldBox { background: #000; border: solid 1px #000; display: inline-block; position: relative; } .charsheet .sheet-fieldBox label { position: absolute; font-size: 0.75em; line-height: 0.75em; top: 110%; } .charsheet .sheet-fieldBox .sheet-inner input { border: none; border-radius: 0 display: inline; text-align: center; } .charsheet .sheet-labelledAbove { display: inline-block; } .charsheet .sheet-labelledAbove label { font-size: 0.8em; margin-bottom: 0; padding-top: 0.5em; } .charsheet .sheet-labelledBoxH { background: #000; border: solid 1px #000; border-radius: 0.5em; display: inline-block; overflow: hidden; } .charsheet .sheet-labelledBoxH > label { background: #000; color: #fff; display: inline; font-weight: bold; padding: 0 0.25em; vertical-align: middle; } .charsheet .sheet-labelledBoxH > .sheet-inner { background: #fff; display: inline-block; float: right; vertical-align: middle; } .charsheet .sheet-labelledBoxH > .sheet-inner > * { vertical-align: middle; } .charsheet .sheet-labelledBoxH > .sheet-inner .sheet-fraction { background: #fff; display: inline-block; } .charsheet .sheet-labelledBoxH > .sheet-inner .sheet-fraction input { border: none; display: inline; } .charsheet .sheet-labelledBoxV { background: #000; border: solid 1px #000; border-radius: 0.5em; display: inline-block; overflow: hidden; } .charsheet .sheet-labelledBoxV > label { background: #000; color: #fff; display: inline-block; font-weight: bold; margin: 0; padding: 0; text-align: center; } .charsheet .sheet-labelledBoxV > .sheet-inner { background: #fff; text-align: center; width: 100%; } .charsheet .sheet-labelledBoxV > .sheet-inner input { text-align: center; width: 100%; } .charsheet .sheet-labelledBoxV > .sheet-inner .sheet-fraction { background: #fff; display: inline-block; } .charsheet .sheet-labelledBoxV > .sheet-inner .sheet-fraction input { border: none; display: inline; } .charsheet .sheet-labelledLeft { display: inline-block; margin-bottom: 1em; min-width: 0.45in; position: relative; } .charsheet .sheet-labelledLeft label { display: inline-block; margin-bottom: 0; padding-right: 2px; width: auto; vertical-align: bottom; } .charsheet .sheet-labelledLeft .sheet-inner { border-bottom: solid 2px #000; display: inline-block; vertical-align: bottom; } .charsheet .sheet-labelledLeft .sheet-inner input { background: transparent; padding: 0; transform: translateY(2px); } .charsheet .sheet-labelledUnderlined { display: inline-block; margin-bottom: 1em; min-width: 0.45in; position: relative; } .charsheet .sheet-labelledUnderlined label { position: absolute; font-size: 0.75em; line-height: 0.75em; top: 110%; } .charsheet .sheet-labelledUnderlined .sheet-inner { border-bottom: solid 1px #000; width: 100%; } .charsheet .sheet-labelledUnderlined .sheet-inner input { border: none; border-radius: 0; padding-bottom: 0; width: 100%; } .charsheet .sheet-labelledUnderlined .sheet-inner select { border: none; border-radius: 0; padding-bottom: 0; width: 100%; } .charsheet .sheet-labelledUnderlined .sheet-inner .sheet-readOnlyBox { padding: 0; padding-top: initial; width: 100%; } .charsheet .sheet-mathOperator { display: inline-block; margin-bottom: 0.5em; padding-left: 0.25em; padding-right: 0.25em; } .charsheet .sheet-column { display: inline-block; } .charsheet .sheet-inlineBlock { display: inline-block; } .charsheet .sheet-attributes { margin-bottom: 32px; width: 100%; } .charsheet .sheet-attributes .sheet-attribute { position: relative; } .charsheet .sheet-attributes .sheet-attribute button { height: 100%; opacity: 0; position: absolute; right: 0; top: 0; width: 40%; z-index: 10; } .charsheet .sheet-attributes .sheet-attribute > label { position: absolute; left: 55%; top: 15%; width: auto; } .charsheet .sheet-attributes .sheet-attribute > label::before { content: "0"; font-family: dicefontd10; font-size: 32px; vertical-align: middle; } .charsheet .sheet-attributes .sheet-column { vertical-align: top; width: 33%; } .charsheet .sheet-attrsHeader { margin-bottom: 10px; } .charsheet .sheet-attrsHeader h2 { display: inline-block; line-height: 1em; max-width: 2in; vertical-align: middle; } .charsheet .sheet-attrsHeader .sheet-boxedIcon { display: inline-block; height: 60px; vertical-align: middle; width: 60px; } .charsheet .sheet-attrsHeader .sheet-boxedIcon.sheet-iconChassis { background: url("https://raw.githubusercontent.com/Cazra/roll20-character-sheets/engineHeart/EngineHeart/img/iconChassis.png"); } .charsheet .sheet-attrsHeader .sheet-boxedIcon.sheet-iconCrux { background: url("https://raw.githubusercontent.com/Cazra/roll20-character-sheets/engineHeart/EngineHeart/img/iconCrux.png"); } .charsheet .sheet-attrsHeader .sheet-boxedIcon.sheet-iconIntelligence { background: url("https://raw.githubusercontent.com/Cazra/roll20-character-sheets/engineHeart/EngineHeart/img/iconIntelligence.png"); } .charsheet .sheet-attrsHeader .sheet-boxedIcon.sheet-iconMovement { background: url("https://raw.githubusercontent.com/Cazra/roll20-character-sheets/engineHeart/EngineHeart/img/iconMovement.png"); } .charsheet .sheet-attrsHeader .sheet-boxedIcon.sheet-iconPhysicalInteraction { background: url("https://raw.githubusercontent.com/Cazra/roll20-character-sheets/engineHeart/EngineHeart/img/iconPhysicalInteraction.png"); } .charsheet .sheet-attrsHeader .sheet-boxedIcon.sheet-iconThresholds { background: url("https://raw.githubusercontent.com/Cazra/roll20-character-sheets/engineHeart/EngineHeart/img/iconThresholds.png"); } .charsheet .sheet-featuresDefects { margin-bottom: 32px; } .charsheet .sheet-featuresDefects table { font-size: 10px; margin-left: 8px; width: 100%; } .charsheet .sheet-featuresDefects table th:nth-child(1) { width: 30%; } .charsheet .sheet-featuresDefects table th:nth-child(2) { width: 10%; } .charsheet .sheet-featuresDefects .sheet-feature input, .charsheet .sheet-featuresDefects .sheet-defect input { border-bottom: solid 1px black; border-radius: 0; padding: 0; vertical-align: top; } .charsheet .sheet-featuresDefects .sheet-feature textarea, .charsheet .sheet-featuresDefects .sheet-defect textarea { height: 1.5em; margin-top: 1px; resize: vertical; vertical-align: top; } .charsheet .sheet-featuresDefects .sheet-feature input:nth-child(1), .charsheet .sheet-featuresDefects .sheet-defect input:nth-child(1) { width: 30%; } .charsheet .sheet-featuresDefects .sheet-feature input:nth-child(2), .charsheet .sheet-featuresDefects .sheet-defect input:nth-child(2) { width: 10%; } .charsheet .sheet-featuresDefects .sheet-feature textarea:nth-child(3), .charsheet .sheet-featuresDefects .sheet-defect textarea:nth-child(3) { width: 55%; } .charsheet .sheet-secondaryAttrs { margin-bottom: 32px; width: 100%; } .charsheet .sheet-secondaryAttrs .sheet-attribute { position: relative; } .charsheet .sheet-secondaryAttrs .sheet-attribute > label { position: absolute; left: 55%; margin-left: 1.7em; text-indent: -1.7em; top: 15%; width: auto; } .charsheet .sheet-secondaryAttrs .sheet-attribute.sheet-threshold > label { left: 37%; } .charsheet .sheet-secondaryAttrs .sheet-column { vertical-align: top; width: 33%; } .charsheet .sheet-secondaryAttrs .sheet-rollable { position: relative; } .charsheet .sheet-secondaryAttrs .sheet-rollable button { height: 100%; opacity: 0; position: absolute; right: 0; top: 0; width: 40%; z-index: 10; } .charsheet .sheet-secondaryAttrs .sheet-rollable .sheet-attribute > label::before { content: "0"; font-family: dicefontd10; font-size: 32px; vertical-align: middle; } .charsheet .sheet-top { width: 100%; } .charsheet .sheet-top .sheet-column.sheet-bio { width: 80%; } .charsheet .sheet-top .sheet-column.sheet-bio > div { width: 100%; } .charsheet .sheet-top .sheet-column.sheet-bio > div .sheet-labelledLeft { display: inline-table; } .charsheet .sheet-top .sheet-column.sheet-bio > div .sheet-labelledLeft label { display: table-cell; white-space: nowrap; width: 1px; } .charsheet .sheet-top .sheet-column.sheet-bio > div .sheet-labelledLeft .sheet-inner { display: table-cell; } .charsheet .sheet-top .sheet-column.sheet-bio > div .sheet-labelledLeft .sheet-inner input { width: 100%; } .charsheet .sheet-top .sheet-column.sheet-points { margin-left: 20px; transform: scale(1.5); width: 10%; } .charsheet .sheet-twoColumns .sheet-column { vertical-align: top; width: 49%; }