roll20-character-sheets/the-void/the-void.css

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Tektur&display=swap');

.sheet-rolltemplate-skillRoll th {
	text-align: center;
	color: #ffffff;
    background-color: #000000;
}
.sheet-rolltemplate-skillRoll table {
    width: 230px;
    padding: 2px;
	border: 1px solid;
    background-color: #ffffff;
}

.charsheet .attrib-roll td {
    margin-left: 35px;
    min-width: 50px;
}

.charsheet button.attrib-roll-button[type="roll"] {
    margin: auto 25%
}

.charsheet {
    font-family: "Tektur", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

.charsheet h2 {
    margin-bottom: 10px;
}

.charsheet input {
    font-size: 12px;
}

.charsheet h2 span {
    font-size: 35px;
    margin-left: 215px;
    text-transform: uppercase;
}

.charsheet div.summary-data legend,
div.summary-data h3,
tr.skill-headings,
.charsheet h2,
.charsheet label,
div.armor h3,
.charsheet div.health p,
.charsheet div.weapon-headings {
    font-family: "Tektur", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

.charsheet div.sheet-col-left label {
    color: #fff;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* 2 column config */
.charsheet div.sheet-col-left {
    width: calc(65% - 20px) !important;
    min-width: 540px;
    margin: 10px !important;
}

.charsheet div.sheet-col-right {
    width: calc(32% - 1px) !important;
}

/* Summary Data */
.charsheet div.summary-data {
    border: 3px solid black;
    margin: 0 auto;
    padding: 0;
    width: 390px;
}

.charsheet div.summary-data h3 {
    background-color: #000;
    border: 0;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    height: 30px;
    margin: auto;
    padding: auto;
    text-align: center;
    width: 130px;
}

.charsheet div.summary-data label,
.charsheet div.armor-stats label {
    background-color: #000;
    color: #fff;
    font-size: 10px;
}

.charsheet div.summary-data div {
    margin: 0 !important;
}

.charsheet div.left label {
    float: left;
    margin: 20px 0 0 0;
    padding-left: 5px;
}

.charsheet div.right label {
    display: inline-block;
    float: right;
    margin: 0 -1px 0 0;
    padding: 0 5px;
    text-align: right;
}

.charsheet div.left input,
.charsheet div.right input {
    border-color: #000;
    border-width: 0 0 2px 0;
    display: inline-block;
    float: right;
    margin: 0 -1px 0 0;
    padding: 0 5px 0 5px;
}

.charsheet div.left input {
    border-right-width: 2px;
}

.charsheet div.right input {
    border-left-width: 2px;
    text-align: right;
}

.charsheet div.summary-data div.name-data {
    width: 324px !important;
}

.charsheet div.summary-data div.name-data label {
    width: 35px;
}

.charsheet div.summary-data div.name-data input {
    margin-left: -50px;
    width: 325px;
}

.charsheet div.summary-data div.age-data {
    width: 60px !important;
}

.charsheet div.summary-data div.age-data label {
    width: 30px;
}

.charsheet div.summary-data div.age-data input {
    width: 60px;
}

.charsheet div.summary-data div.birthplace-data {
    width: 230px !important;
}

.charsheet div.summary-data div.birthplace-data label {
    width: 68px;
}

.charsheet div.summary-data div.birthplace-data input {
    margin-left: -83px;
    width: 231px;
}

.charsheet div.summary-data div.ethnicity-data {
    width: 155px !important;
}

.charsheet div.summary-data div.ethnicity-data label {
    width: 60px;
}

.charsheet div.summary-data div.ethnicity-data input {
    width: 155px;
}

.charsheet div.summary-data div.specialty-data {
    width: 170px !important;
}

.charsheet div.summary-data div.specialty-data label {
    width: 65px;
}

.charsheet div.summary-data div.specialty-data input {
    margin-left: -80px;
    width: 171px;
}

.charsheet div.summary-data div.physical-traits-data {
    width: 215px !important;
}

.charsheet div.summary-data div.physical-traits-data label {
    width: 100px;
}

.charsheet div.summary-data div.physical-traits-data input {
    width: 215px;
}

.charsheet div.summary-data div.psychological-traits-data label {
    width: 140px;
}

.charsheet div.summary-data div.psychological-traits-data input {
    margin-right: 1px;
    width: 250px;
}

.charsheet div.summary-data div.psychological-traits-data::after {
    content: " ";
    display: block;
    clear: both;
}

/* ATTRIBUTES */
.charsheet div.attributes {
    border: 0 none #fff;
}

.charsheet div.attributes div.sheet-2colrow {
    margin: 10px auto !important;
    width: 548px;
}

.charsheet div.attributes {
    margin: 0 !important;
    width: 50% !important;
}

.charsheet div.attributes p {
    background: transparent url('https://i.imgur.com/lnCdnDJ.png') no-repeat scroll center;
    margin: 0;
}

.charsheet div.attributes label {
    color: #fff;
    display: inline-block;
    font-size: 17px;
    margin: auto auto auto 18px;
    padding-right: 0;
    position: relative;
    text-align: right;
    top: 2px;
    width: 176px;
}

.charsheet div.attributes input[type=roll] {
    display: inline-block;
}

.charsheet div.attributes input[type=number] {
    border: none;
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
    height: 19px;
    margin: 28px 0 0 18px;
    outline: none;
    position: relative;
    text-align: center;
    top: -14px;
    width: 27px;
    padding: 0;
    outline: 0;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

/* DERIVED ATTRIBUTES */

.charsheet div.attributes div.derived p {
    margin: 0;
}

.charsheet div.derived {
    width: calc(50% - 10px) !important;
}

.charsheet div.derived label {
    color: white;
    font-size: 14px;
}

.charsheet div.derived p.speed-attribute {
    background: transparent url('https://i.imgur.com/VhZs2jT.png') no-repeat scroll center;

    height: 57px;
    position: relative;

    top: 48px;

    width: 264px;
}

.charsheet div.derived p.speed-attribute label {
    text-align: left;
    width: 67px;
    display: inline-block;
    position: relative;
    top: 19px;
    margin: 0;
    left: 14px;
    float: left;
}

.charsheet div.derived p.speed-attribute span.speed-attributes {
    display: inline-block;
    position: relative;
}

.charsheet div.derived p.speed-attribute span.speed-attributes input:last-child {
    margin-right: 0;
}

.charsheet div.derived p.speed-attribute span.speed-attributes input {
    margin: 0 33px 0 0;
    position: relative;
    top: 18px;
    left: 27px;
    font-size: 12px;
}

.charsheet div.derived input {
    height: 19px;
    width: 27px;
    top: -12px;
    left: -3px;
}

.charsheet div.attributes div.derived p.health-attribute {
    background: transparent url('https://i.imgur.com/oy26J8d.png') no-repeat scroll center;
    height: 61px;
    margin-left: 24px;
    margin-top: 67px;
    width: 200px;
}

.charsheet div.attributes div.derived p.health-attribute label {
    width: 64px;
    margin-left: 26px;
    margin-top: 18px;
}

.charsheet div.attributes div.derived p.health-attribute input {
}

.charsheet div.attributes div.derived p.fate-attribute {
    background: transparent url('https://i.imgur.com/95wEg4U.png') no-repeat scroll center;
    margin-left: 24px;
    margin-top: 5px;
    padding-top: 32px;
    height: 61px;
}

.charsheet div.attributes div.derived p.fate-attribute label {
    width: 112px;
    position: relative;
    top: -7px;
    margin-left: 43px;
}

.charsheet div.attributes div.derived p.fate-attribute input {
    top: -23px;
    margin-left: 23px;
}

/* SKILLS */

.charsheet table.skills select {
	width:52px
}

.charsheet table.skills label {
    display: inline-block;
    font-weight: bold;
    text-align: left;
    font-size: 1em;
}

.charsheet th.skill-head {
    color: #fff;
    font-size: 11px;
    font-weight: bold;
}

.charsheet tr.skill-headings {
    background-color: #000;
    border: 2px double #000;
}

.charsheet table.skills td input.number[type=number] {
    width: 23px;
    text-align: center;
}

.charsheet th.skill-profile-col {
    padding-top: 3px;
}

.charsheet th.skill-profile-col::before {
    background-color: #fff;
    border-color: transparent transparent #000 transparent;
    border-style: solid;
    border-width: 0 0 20px 20px;
    content: "";
    display: inline-block;
    float: left;
    height: 0;
    margin-left: -3px;
    margin-top: -6px;
    -webkit-transform: rotate(360deg);
    width: 0
}

.charsheet table.skills td {
    border: 2px solid #000;
}

label.skill-name,
label.attribute-name,
.skill-attribute {
    font-size: 10px;
}

.charsheet label.skill-name,
.charsheet label.attribute-name {
    font-weight: bold;
    margin: auto;
    padding-left: 5px;
}

.charsheet input.number {
    height: 24px;
    margin: auto;
    width: 20px;
    padding: 0 5px;
    background-color: #fff;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border: none;
}

.charsheet td.skill-attribute {
    font-weight: bold;
    text-align: center;
}

.charsheet input[disabled="disabled"] {
    background: transparent;
    border: 0;
    outline: 0;
}

.charsheet div.notepad,
.charsheet div.armor-stats {
    border: 2px solid #001;
}

.charsheet div.notepad,
.charsheet div.armor {
    margin-top: 20px;
}

.charsheet .sheet-2colrow .sheet-col div.armor div.armor-type-data {
    width: 170px;
    margin-right: 0;
}

.charsheet div.armor-type-data label {
    width: 25px;
}

.charsheet div.armor-type-data input {
    width: 171px;
    margin-left: -40px;
}

.charsheet .sheet-2colrow .sheet-col div.armor div.armor-reduction-data {
    width: 70px;
}

.charsheet div.armor-reduction-data label {
    width: 64px;
}

.charsheet div.armor-reduction-data input {
    width: 70px;
}

.charsheet .sheet-2colrow .sheet-col div.armor div.armor-special-data {
    margin: 5px 0 0 0;
    width: 207px;
}

.charsheet div.armor-special-data label {
    width: 50px;
}

.charsheet div.armor-special-data input {
    width: 208px;
    margin-left: -65px;
}

.charsheet div.notepad:first-child {
    margin-top: 0;
}

.charsheet div.notepad label,
.charsheet div.armor h3 {
    background: #000;
    color: #fff;
    width: auto;
    padding-left: 5px;
}

.charsheet div.notepad label {
    display: inline-block;
}

.charsheet div.armor h3 {
    width: 85px;
}

.charsheet div.notepad p {
    margin: 0;
}

.charsheet div.notepad p input {
    border-color: #000;
    border-width: 0 0 2px 0;
    display: inline-block;
    width: 100%;
    height: 20px;
    margin: 0;
}

.charsheet div.health {
    margin-top: 10px;
    width: 540px;
}

.charsheet div.health label {
    display: block;
    width: 108px;
    float: left;
    text-align: center;
    vertical-align: middle;
    line-height: 42px;
    font-size: 9px;
    padding: 0;
    margin: 0 0 0 8px;
}

.charsheet div.health span.dots {
    width: 139px;
    display: block;
    float: right;
    line-height: 10px;
    top: 7px;
    position: relative;
    padding-right: 6px;
}

.charsheet div.health span.dots input[type=radio] {
    margin: 0;
    padding: 0;
    height: 10px;
    width: 10px;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
    position: relative;
}

.charsheet div.health span.dots input[type=radio] + span {
    display: inline-block;
    height: 10px;
    width: 10px;
    margin: 0 -10px 0 0;
    padding: 0;
    background-color: transparent;
    position: relative;
    left: -10px;
    top: 2px;
}

.charsheet div.health input[type=radio][value="0"] {
    position: absolute;
    margin-left: 4px;
    margin-top: 15px;
    width: 10px;
    height: 10px;
    z-index: 2;
    opacity: 0;
}

.charsheet div.health input[type=radio][value="0"] + span {
    position: absolute;
    margin-left: 3px;
    margin-top: 17px;
    width: 10px;
    height: 10px;
    z-index: 0;
}

.charsheet div.health input[type=radio][value="0"] + span::before {
    z-index: 1;
    left: 5px;
    width: 2px;
    height: 8px;
    margin-top: -6px;
    background: #fff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    position: absolute;
    top: 50%;
}

.charsheet div.health input[type=radio][value="0"] + span > span::before {
    width: 12px;
    height: 12px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    margin: -8px 0 0;
    background: #6E6E6E;
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
}

.charsheet div.health input[type=radio][value="0"] + span > span::after {
    left: 2px;
    width: 8px;
    height: 2px;
    margin-top: -3px;
    background: #FFF;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    position: absolute;
    top: 50%;
}

.charsheet div.health input[type=radio][value="0"]:checked ~ span input[type=radio] + span span.hex-inner,
.charsheet div.health span.dots input[type=radio]:checked ~ input[type=radio] + span span.hex-inner {
    display: none;
}

.charsheet div.health span.dots input[type=radio] + span span {
    display: inline-block;
    margin: 0;
    position: absolute;
    padding: 0;
}

.charsheet div.health span.dots input[type=radio] + span span.hex-outer {
    display: inline-block;
    top: 0;
    left: 2px;
    height: 10px;
    width: 6px;
    background-color: #fff;
}

.charsheet div.health span.dots input[type=radio] + span span.hex-outer:before {
    content: " ";
    position: absolute;
    left: -3px;
    border-right: 3px solid #fff;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.charsheet div.health span.dots input[type=radio] + span span.hex-outer:after {
    content: " ";
    position: absolute;
    right: -3px;
    border-left: 3px solid #fff;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.charsheet div.health span.dots input[type=radio] + span span.hex-inner {
    display: inline-block;
    top: 2px;
    left: 1px;
    height: 6px;
    width: 4px;
    background-color: #000;
    z-index: 1;
}

.charsheet div.health span.dots input[type=radio] + span span.hex-inner:before {
    content: " ";
    position: absolute;
    left: -2px;
    border-right: 2px solid #000;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}

.charsheet div.health span.dots input[type=radio] + span span.hex-inner:after {
    content: " ";
    position: absolute;
    right: -2px;
    border-left: 2px solid #000;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}

.charsheet div.health p {
    float: right;
    display: block;
    height: 26px;
    margin: 0 10px 0 0;
    color: #fff;
    font-size: 9px;
    text-align: center;
    padding: 0 10px 10px 0;
    width: 130px;
    line-height: 12px;
    background-color: transparent;
    vertical-align: middle;
    position: relative;
    top: 9px;
}

.charsheet div.health span.dots span {
    display: inline-block;
    height: 10px;
    width: 0;
    margin: 0;
    padding: 0;
}

.charsheet div.health-shortdesc p {
    top: 14px;
}

.charsheet div.health-left {
    float: left;
    background: transparent url('https://i.imgur.com/eoJTDXC.png') no-repeat scroll center;
    width: 431px;
    position: relative;
}

.charsheet div.health-right {
    float: right;
    background: transparent url('https://i.imgur.com/eoJTDXC.png') no-repeat scroll center;
    width: 431px;
}

.charsheet div.firearms,
.charsheet div.melee {
    padding: 0;
    margin: 10px 0 0 0;
}

.charsheet div.firearms {
    width: 541px;
}

.charsheet div.melee {
    width: 323px;
}

.charsheet div.weapon-data input,
.charsheet div.weapon-data select {
    border: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    width: 100%;
    margin: 2px;
    font-size: 11px;
    font-weight: bold;
}

.charsheet div.firearms select,
.charsheet div.melee select {
    margin: 1px;
    padding: 2px;
}

.charsheet div.weapon-headings div,
.charsheet div.weapon-data div {
    float: left;
    border: 1px solid black;
    padding: 2px;
    font-size: 11px;
    text-align: center;
}

.charsheet div.weapon-stun,
.charsheet div.weapon-stun input[type=checkbox] {
    width: 35px;
}

.charsheet div.weapon-stun input[type=checkbox] {
    height: 30px;
    width: 16px;
    margin: 0;
    padding: 0;
}

.charsheet div.weapon-roll {
    width: 35px;
}

.charsheet div.melee .weapon-skill {
    width: 67px;
}

.charsheet div.firearms h4,
.charsheet div.melee h4 {
    width: 530px;
    background-color: #000;
    color: #fff;
    padding: 2px 0 0 10px;
}

.charsheet div.melee h4 {
    width: 299px;
}

.charsheet div.weapon-name,
.charsheet div.weapon-name input {
    width: 100px;
    text-align: right;
}

.charsheet div.firearms div.weapon-skill {
    width: 112px;
}

.charsheet div.weapon-damage,
.charsheet div.weapon-damage input[type=number] {
    width: 28px;
    text-align: center;
}

.charsheet div.weapon-ap,
.charsheet div.weapon-ap input[type=number] {
    width: 18px;
    text-align: center;
}

.charsheet div.firearms div.weapon-range,
.charsheet div.firearms div.weapon-range select,
.charsheet div.firearms div.weapon-range select option {
    width: 74px;
}

.charsheet div.firearms div.weapon-mag,
.charsheet div.firearms div.weapon-mag input {
    width: 41px;
    text-align: center;
}

.charsheet div.firearms div.weapon-auto,
.charsheet div.firearms div.weapon-auto input {
    width: 43px;
    text-align: center;
}

th.skill-head.roll-sheet-col {
    color: rgba(0, 0, 0, 0);
}

.charsheet .clearfix {
    *zoom: 1
}

.charsheet .clearfix:before,
.charsheet .clearfix:after {
    display: table;
    content: ""
}

.charsheet .clearfix:after {
    clear: both
}