body {
    font-family: sans-serif;
    margin: 0px;
}

input {
    font-weight: bold;
}

.informational {
    padding-left: 10px;
}

.centered {
    text-align: center;
}

#copyButton {
    margin: 2px;
    font-size: 14px;
}

#saveImage {
    margin: 2px;
    font-size: 14px;
}


.indent_label {
    margin-left: 10px;
}

.feedback {
    border-top: 1px solid black;
}

#aboutInstruct {
    border: 2px dashed black;
    padding: 5px;
    width: 48%;
    margin: 5px 5px 12px;
}

a {
    font-weight: bold;
    color: #2a507f;
    margin-left: 10px;
}

a visited {
    font-weight: bold;
    color: #2a507f;
}

#calcChar {
    position: relative;
    width: 48%;
    border: 2px dashed black;
    padding: 5px;
    margin: 5px;
}

.sub4Head {
    display: inline;
}

.sub3Head{
    display:inline;
}

.sub2Head {
    display: inline;
}

.instruction {
    font-size: 12px;
    font-family: monospace;
    margin-left: 2px;
}

.instructSmall {
    font-size: 15px;
}

.instructVerySmall {
    font-size: 12px;
}

.bold {
    font-weight: bold;
}

.statValueBoxes {
    font-size: 14px;
    color: black;
    text-align: center;
}

#pickupSkillPointField_label {
    font-size: 13px;
}

.skillValueBoxes {
    font-size: 13px;
    color: black;
    text-align: center;
}

/* Stats Points Remaining Output */
#statPointsLine, #careerSkillPointsLine, #pickupSkillPointsLine {
    font-size: 13px;
    margin-left: 10px;
}

#statPointsRemaining, #careerSkillPointsRemaining, #pickupSkillPointsRemaining {
    font-weight: bold;
}

#rollOutput {
    display: inline;
}
#manualClothesSelect {
    display: none;
}
#manualHairSelect {
    display: none;
}
#manualAffecSelect {
    display: none;
}
#manualEthSelect {
    display: none;
}
#manualLangSelect {
    display: none;
}
#manualFamSelect {
    display: none;
}
#parentSomethingHappened {
    display: none;
}
#manualParentSelect {
    display: none;
}
#parentsOkayRadio {
    display: none;
}
#parentsIssuesRadio {
    display: none;
}
#parentsOkayRadio_label {
    display: none;
    padding-top: 12px;
}

#parentsIssuesRadio_label {
    display: none;
}

/* Family Tragedy */
#manualFamDanger {
    display: none;
}
#manualFamDanger_label {
    display: none;
    padding-top: 12px;
}

#manualFamOkay {
    display: none;
}
#manualFamOkay_label {
    display: none;
}
#famTragedyHeader {
    display: none;
    padding-top: 12px;
}
#familyTragedySelect {
    display: none;
}

#familyTragedyOutput {
    display: none;
}
#familyTragedyOutput_label {
    display: none;
}

#manualChildSelect {
    display: none;
}
#manualSiblingSelect {
    display: none;
}

#persTraitsSelect {
    display: none;
}

#persValSelect {
    display: none;
}

#youValSelect {
    display: none;
}

#youFeelSelect {
    display: none;
}

#posSelect {
    display: none;
}

/* LifeTable */
#lifeTable tr:nth-child(odd) {
    background-color: #E6E6E6;
}

#lifeTable {
    font-size: 12px;
    border-collapse: collapse;
    display: none;
    padding: 0px;
    margin: 0px;
}

#lifeTable tr {
    height: 70px;
}

#lifeTable td {
    border: 1px solid #ccc;
    padding: 3px;
}

#lifeTable td:nth-child(1) {
    width: 30px;
    vertical-align: middle;
    text-align: center;
}

#lifeTable td:nth-child(2) {
    width: 80px;
}

#lifeTable td:nth-child(3) {
    width: 240px;
}

#lifeTable td:nth-child(4) {
    width: 240px;
}

.boldTableHead {
    font-weight: bold;
    background-color: #BDBDBD !important;
    border: 1px solid #ccc;
    font-size: 12px;
    height: 35px !important;
}

.enemyDetailTableHeader {
    font-weight: bold;
    border: 1px solid #ccc;
    background-color: #D8D8D8 !important;
}

.enemyDetailTable {
    font-size: 12px;
    border-collapse: collapse;
    background-color: #FFF;
}

.enemyDetailTable tr {
    height: 25px !important;
}

.enemyDetailTable td {
    border: 1px solid #A4A4A4 !important;
}

.enemyDetailTable td:nth-child(1) {
    width: 85px !important;
}

.enemyDetailTable td:nth-child(2) {
    width: 170px !important;
}

.enemyDetailTable td:nth-child(3) {
    width: 220px !important;
}

/* Who's Angry */
.enemyDetailTable td:nth-child(4) {
    width: 120px !important;
}

/* Reaction if they see you */
.enemyDetailTable td:nth-child(5) {
    width: 155px !important;
}
/* What can they throw at you */
.enemyDetailTable td:nth-child(6) {
    width: 150px !important;
}

.redBack {
    background-color: #FE2E2E;
}

.red {
    color: #FE2E2E;
}

#roleSelect {
    display: none;
}

#roleSelect_label {
    display: none;
}

#roleField {
    font-size: 16px;
    color: black;
}

#careerSkills {
    font-weight: bold;
}

#rollMethod {
    font-size: 13px;
    width: 220px;
}

#careerSkillTable {
    font-size: 15px;
}

#careerSkillTable td {
    height: 20px;
    padding-right: 10px;
}

#statRollTable {
    font-size: 14px;
}

#statRollTable tr {
    width: 42%;
}

#statRollTable td {
    width: 19%;
}

#rollOutput td{
    font-size: 25px !important;
}

/* Begin Character Output */
#fullCharOutput {
    float: right;
    overflow: visible;
    top: 0;
    right: 0;
    padding-right: 10px;
    padding-left: 3px;
    width: 48%;
    border: 3px solid black;
    background-color: white;
    margin-right: 5px;
}

#charNameOutput {
    border: 1px solid black;
    font-weight: bold;
    display: inline-block;
    width: 300px;
    height: 18px;
    padding: 4px 4px;
}

#charNameOutput_label {
    display: inline-block;
    background-color: black;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    padding: 5px 5px;
}

/* "text box" for character role */
#charRoleOutput {
    border: 1px solid black;
    font-weight: bold;
    display: inline-block;
    width: 100px;
    height: 17px;
    padding: 4px 4px;
}

#charRoleOutput_label {
    display: inline-block;
    background-color: black;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    padding: 5px 5px;
    margin-top: 5px;
}

.charStatOutput {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 17px;
}

.charStatOutputDervied {
    font-weight: bold;
    font-size: 17px;
}

#charPointsOutput {
    border: 1px solid black;
    font-weight: bold;
    display: inline-block;
    width: 32px;
    height: 18px;
    margin-left: 5px;
    margin-top: 5px;
    margin-bottom: 8px;
    padding: 4px;
    text-align: center;
}

/* Words "Character Points" */
#charPointsOutput_label {
    background-color: black;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    padding: 5px;
}

#stats_label {
    background-color: black;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    display: inline-block;
    padding: 5px;
}

/* Word "Stats" */
#stats {
    display: inline-block;
}

#statsTable th {
    text-align: left;
    font-weight: normal;
}

#charINTOutput_label {
    display: inline-block;
    padding-top: 3px;
}

.savebtm {
    display: inline-block;
    border-spacing: 0;
    border: 2px solid black;
    margin: 4px;
}

.savebtm td {
    border: 1px solid black;
    padding: 2px;
    width: 40px;
}

.savebtm tr:first-child {
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    font-size: 14px;
}

.savebtm tr:nth-child(2) td {
    height: 40px;
    font-weight: bold;
    border: 1px solid black;
    text-align: center;
    font-size: 14px;
}

#charOutputStats {
    margin-top: 7px;
    padding-left: 5px;
}

/* Skills */
#skills_label {
    background-color: black;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    padding: 4px;
    margin-left: 5px;
}

#skillCharOutput {
    font-weight: bold;
    margin-top: 8px;
    margin-left: 5px;
    display: block;
}

#pickupSkillCharOutput {
    font-weight: bold;
    margin-left: 5px;
    display: block;
}


/* Style */
#charStyleOutput {
    display: block;
    margin-left: 5px;
    display: block;
    padding-top: 5px;
}

#styleCharOutput_label {
    margin-top: 2px;
    display: inline-block;
    background-color: black;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    padding: 5px;
    margin-left: 5px;
}

#clothesCharOutput_label {
    font-weight: bold;
}

#hairCharOutput_label {
    font-weight: bold;
}

#affecCharOutput_label {
    font-weight: bold;
}

#ethCharOutput_label {
    font-weight: bold;
}

#langCharOutput_label {
    font-weight: bold;
}

/* Family Background */
#charFamOutput {
    margin-left: 5px;
    padding-top: 5px;
}

#famBackCharOutputTitle {
    margin-top: 2px;
    display: inline-block;
    background-color: black;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    padding: 4px;
}

#famBackCharOutputTitle {
    /*not part of charFamOutput Div*/
    margin-left: 5px;
}

#famRankCharOutput_label {
    font-weight: bold;
}

#parentStatusCharOutput_label {
    font-weight: bold;
}

#familyStatusCharOutput_label {
    font-weight: bold;
}

#childEnvCharOutput_label {
    font-weight: bold;
}

/* Siblings */
#charSiblingOutput {
    margin-left: 5px;
}

#siblingCharOutputTitle {
    margin-left: 5px;
}

#siblingCharOutputTitle {
    margin-top: 2px;
    display: inline-block;
    background-color: black;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    padding: 4px;
}

#charSiblingOutputNum {
    border: 1px solid black;
    font-weight: bold;
    display: inline-block;
    width: 32px;
    height: 18px;
    margin-left: 5px;
    margin-top: 5px;
    margin-bottom: 8px;
    padding: 2px;
    text-align: center;
}

.charSiblingOutputItems {
    text-transform: capitalize;
}

.dynamicPar {
    font-weight: bold;
    display: block;
    padding-top: 10px;
}


/* Motivations */
#charMotivOutput {
    margin-left: 5px;
}

#motivCharOutput {
    margin-top: 2px;
    display: inline-block;
    background-color: black;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    padding: 5px;
}

#persTraitCharOutput_label {
    font-weight: bold;
}

#persValCharOutput_label {
    font-weight: bold;
}

#valMostCharOutput_label {
    font-weight: bold;
}

#feelPeopleCharOutput_label {
    font-weight: bold;
}

#valPosessionCharOutput_label {
    font-weight: bold;
}

/* Life Events */
#charLifeEventsTitle {
    margin-top: 2px;
    display: inline-block;
    background-color: black;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    padding: 4px;
    margin-bottom: 5px;
}

#charLifeEventsTitle_label {
    padding-left: 5px;
}

#charLifeEvents {
    padding-left: 5px;
}

#charLifeEvents {
    padding-left: 5px;
}