body {
    font-family: Arial;
}

.subtle {
    color: grey;
    font-size: 11pt;
}

.noinputbox {
    width: 2em;
    border: none;
    outline: none;
}
.small {
    font-size: 10pt;
}
.x-small {
    font-size: 8pt;
    font-weight: normal;
}
.inline-btn {
    display: inline-block;
}

.rght {
    float: right;
}
.column-1 {
    width: 210px;
}
.column-2 {
    width: 575px;
    max-width: 575px;
}
#general-information {
    width: 575px;
}


#character {
    width: 210mm;
    float: left;
}

#control {
    float: left;
    margin: 0.5em;
    text-align: center;
}
#control h3 {
    margin: 0.5em 0 1em;
    font-size: 0.90em;
}
#control h2 {
    margin: 0;
    font-size: 1.10em;
}
#control h1 {
    margin: 0;
    font-size: 1.50em;
}

td {
    vertical-align: text-top;
}

#about-character td:first-child {
    width: 90px;
}
#archetypes, #about-character input {
    width: 100%;
}
#karma-cost, #attribute-cost {
    width: 50px;
}
textarea.big-text {
    width: 100%;
    min-height: 5em;
    box-sizing: border-box;
}

#character {
    overflow: hidden;
    border: 1px solid lightgray;
}

#attribute-tables {
    width: 100%;
}
#attribute-tables .ranks {
    text-align: right;
}
.attribute {
    width: 100%;
    border-collapse: collapse;
    border: solid 1px lightgray;
    margin-bottom: 0.3em;
}
.attribute tr:first-child {
    background-color: #eaeaea;
}
.attribute tr:not(:first-child) {
    border-bottom: 1px solid lightgrey;
}
.attribute td {
    font-size: 11pt;
    height: 18px;
    padding: 0.1em 0.2em 0 0.3em;
    vertical-align: middle;
}
.attribute span {
    font-size: 20pt;
    line-height: 11px;
    vertical-align: top;
}
.attribute input {
    float: right;
    width: 3em;
    margin: 0 auto;
    padding-left: 4px;
    border-width: 1px;
    border-style: solid;
    border-color: lightgray;
    border-radius: 5px;
    background-color: #fcfcfc;
}
.attribute input[type=text]:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    border-color: rgba(81, 203, 238, 1);
    outline: none;
}
.attribute-label {
    font-size: 13pt;
    width: 125px;
    text-decoration: underline;
}
.attribute .unfilled {
    border-color: #ed9a9a;
    border-radius: 7px;
    outline: none;
    background-color: #fff;
    box-shadow: 0 0 10px #ed9a9a;
}
.rank {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 1px;
    border: 1px solid black;
    border-radius: 50%;
    background-color: white;
}
.rank-filled {
    background-color: black;
}

.w100 {
    width: 100%;
}

.health-container {
    margin-top: 0.3em;
    box-sizing: border-box;
}
.health {
    height: 130px;
    box-sizing: border-box;
    float: left;
}
.health.soul {
    width: 22%;
    margin-right: 2%;
}
.health.vitality {
    width: 22%;
    margin-right: 2%;
}
.health.wounds {
    width: 52%;
}
.health table {
    height: 100%;
    width: 100%;
}
.health th {
    text-align: center;
    background-color: #eaeaea;
}
.health table, .health td, .health th {
    border: 1px solid black;
}
.wounds th input {
    border-radius: 5px;
    text-align: center;
    width: 1.5em;
}
.soul th {
    padding: 0 0.3em;
}
.wounds td {
    padding-left: 0.2em;
}
input#soul, input#vitality {
    font-size: 2em;
    width: 100%;
    height: 75px;
    text-align: center;
    box-sizing: border-box;
}
.i-wound {
    cursor: pointer;
}
.i-wound::after {
    content: "☐";
}
.i-wound-filled::after {
    content: "☒";
}


#weapons {
    border: solid 1px black;
}
#weapons td {
    padding: 0px;
}
#weapons td input {
    border: solid 1px black;
    padding-left: 3px;
    width: 126px;
}
#weapons td:not(:first-child) input {
    text-align: center;
    width: 65px;
}

input.fate {
    width: 50px;
}
span.help_text {
    font-size: 8pt;
}
table#karma, table#fates, table#fates caption {
    background-color: #eaeaea;
}
table#fates {
    width: 100%;
    border: 1px solid black;
}
table#fates caption {
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
}
#fates td {
    vertical-align: middle;
    border: 1px solid black;
}
#fates td .ranks {
    float: right;
    height: 10px;
    padding: 0;
    margin: 0;
}
#fates td .fate {
    overflow: hidden;
    width: auto;
    height: 100%;
    padding-right: 4px;
}
#fates td .fate input {
    width: 100%;
    box-sizing: border-box;
}