/**********************************************************************************************************/
/***************************              GLOBAL SETTINGS                      ***************************/
/********************************************************************************************************/
* {
    box-sizing: border-box;
    font-family: sans-serif;
}

button {
    background-color          : transparent;
    background-image          : none;
    box-shadow                : none;
    font-family               : Helvetica, Arial, sans-serif;
    text-shadow               : none;
    border-bottom             : 2px solid #666;
    border-bottom-right-radius: 2px;
    border-color              : #aaa;
    border-radius             : 5px;
    border-right              : 3px solid #999;
    border-style              : outset;
    padding                   : 5px 3px;
}

button:before {
    display: none;}

button:hover {
    background-color: transparent;}

button[type="roll"],
button[type="action"] {
    margin   : 0px;
    padding  : 0px;
    height   : 35px;
    width    : 36px
}

button[type="roll"] {
    font-family: "dicefontd10";
    font-size: 2.5em !important;
}

div {
    background-color: transparent;}

fieldset {
    background: transparent;
}

h2 {
    font-stretch:condensed;
}

input[type="text"],
input[type="number"] {
    padding-top     :0px;
    text-align      : center; 
    vertical-align  : middle;
    border          : 1px solid black;
    border-radius   : 2px;
}

/**** Removes the arrows for increase numbers ****/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

label {
    display      : inline-block;
    font-size    : 0.8em;
    margin-bottom: 0px;
    padding-right: 0px;
}

span {
    word-break: break-word;
}

textarea {
    border-bottom : 1px dotted #FCD116;
    font-size     : 12px;
    font-weight   : normal;
    height        : 50px;
    line-height   : 18px;
    overflow-wrap : break-word;
    overflow      : hidden;
    padding       : 2px;
    resize        : vertical;
    text-align    : left;
    vertical-align: top;
    white-space   : pre-line;
}

.charsheet {
    width: 850px;}

/* Two Column Setup */
div.sheet-2column {
    display       : inline-block;
    vertical-align: top;
    width         : 48%;
}

div.sheet-2column:first-child {
    margin-right: 2%;
}

/* Small boxes */
div.sheet-small-box {
    border: 1px solid black;
    border-radius: 2px;
    display: inline-block;
    height: 24px;
    width: 3.5em;
}

/* Shared STyles */
div.sheet-character,
div.sheet-aliases,
div.sheet-psychic,
div.sheet-backstory,
div.sheet-levelUp,
div.sheet-toughness,
div.sheet-weapons,
div.sheet-aspect,
div.sheet-contact,
div.sheet-possession,
div.sheet-notes {
    border: 2px solid black;
    border-radius: 2px;
    padding: 1%;
}

div.sheet-speed input,
div.sheet-hp input,
div.sheet-levelUp input {
    width        : 20%;
}

div.sheet-speed span,
div.sheet-toughness span,
div.sheet-nerve span  {
    padding: 5px;
}

/* The squre Attribute boxes */
div.sheet-attributes input[type="number"] {
    border-color: #000000; 
    border-style: solid;
    border-width: 2px; 
    font-size   : 2em; 
    height      : 55px; 
    margin      : 4px; 
    padding-top : 0px;
    text-align  : center; 
    width       : 55px; 
}

div.sheet-attributes div.sheet-top-labels {
    margin-left: 43%;
}

div.sheet-attributes div.sheet-top-labels label {
    width: 30%;
}

div.sheet-attributes div.sheet-top-labels label:first-child {
    margin-right: 15%;
}

div.sheet-attributes h2 {
    display: inline-block;
    width: 40%;
}

/* Section start with speed */
div.sheet-speed,
div.sheet-levelUp,
div.sheet-aspect,
div.sheet-aliases,
div.sheet-psychic,
div.sheet-contact,
div.sheet-possession,
div.sheet-notes,
div.sheet-weapons {
    margin-top: 2%;
}

div.sheet-speed div {
    margin: 2% 1%;
}

/* Half speed row */
div.sheet-speed div:nth-of-type(1) label {
    width: 25%;
}

label.sheet-half-speed {
    margin-left: 20%;
}

/* The half speed span & inputs need to be pushed left */
div.sheet-speed div:nth-of-type(1) div.sheet-small-box:nth-of-type(1) {
    margin-left: 21%;
    margin-right: 2%;
}

div.sheet-speed input[name="attr_action_points_other"] {
    margin-right: 2%;
}

/* Action points box in the half speed row */
div.sheet-speed div:nth-of-type(1) div.sheet-small-box:nth-of-type(2) {
    margin-left: 12%;
}

/* Awareness row */
div.sheet-speed div:nth-of-type(2) label {
    width: 21%;
}

/* Other needs to be shorter */
div.sheet-speed div:nth-of-type(2) label:nth-of-type(2),
div.sheet-speed div:nth-of-type(2) label:nth-of-type(3) {
    width: 19%;
}

/* Battle Reflex label needs to be longer */
div.sheet-speed div:nth-of-type(2) label:nth-of-type(4) {
    width: 24%;
}

div.sheet-speed input[name="attr_awareness"],
div.sheet-speed input[name="attr_speed"] {
    margin-left : 1%;
    margin-right: 1%;
}

div.sheet-speed input[name="attr_battle_reflex_other"] {
    margin-left: 2%;
    margin-right: 2%;
}


/* HP Row */
div.sheet-hp label:nth-of-type(1) {
    width: 21%;
}

/* HP Max & HP Level labels */
div.sheet-hp label:nth-of-type(2),
div.sheet-hp label:nth-of-type(3) {
    width: 15%;
}

/* Unspent trait points */
div.sheet-hp label:nth-of-type(4) {
    margin-left: 5%;
    width: 35%;
}

div.sheet-hp input[name="attr_hp"] {
    margin-left: 2%;
    margin-right: 7%;
}

div.sheet-hp input[name="attr_hp_lvl"] {
    margin-left: 4%;
    margin-right: 20%;
}


/* LEVEL UP Row */
div.sheet-levelUp h2 {
    text-align: center;
}

div.sheet-levelUp h3 {
    display: inline-block;
    margin-left: 2%;
    margin-right: 2%;
    width: 12%;
}

div.sheet-levelUp label {
    width: 5%;
}

div.sheet-levelUp span:last-child {
    font-size: 0.8em;
}

  /* This is the hidden input */
  div.sheet-levelUp input[type="checkbox"],
  div.sheet-weapon-classes input[type="checkbox"] {
    height  : 20px;
    left    : 5%; /* Use this to move the checkboxes over the span */
    opacity : 0; /* Comment this out to adjust checkboxes */
    position: relative;
        width   : 20px;
}

   /* This is the box that the check will live in */
div.sheet-levelUp input[type="checkbox"] + span,
div.sheet-weapon-classes input[type="checkbox"] + span  {
    background    : #fff;
    border        : 1px solid #000;
    border-radius : 3px;
    box-shadow    : inset 0px 0px 3px 1px #7c7c7c;
    display       : inline-block;
    height        : 20px;
    margin-right  : 2%;
    vertical-align: middle;
    width         : 20px; 
}

/* This is for the checkmark */
div.sheet-levelUp input[type="checkbox"]:checked + span::before,
div.sheet-weapon-classes input[type="checkbox"]:checked + span::before {
    background-color: #7b1915;
    color           : #fff;
    content         : "3";
    display         : inline-block;
    font-family     : pictos;
    font-size       : 1.2em;
    height          : 20px;
    text-align      : center;
    width           : 20px;
}

/* Character Row */
div.sheet-character label {
    width: 27%;
}

div.sheet-character input {
    margin-bottom: 1%;
}

div.sheet-character input[name="attr_character_name"] {
    margin-left: 1%;
    width: 50%;
}

/* Level label  */
div.sheet-character label:nth-of-type(2) {
    width: 9%;
}

/* Mind Type label  */
div.sheet-character label:nth-of-type(4) {
    margin-left: 20%;
    margin-right: 20%;
}

div.sheet-character input[name="attr_mind_type"] {
    width: 46%;
}

/* Motivation Row */
div.sheet-motivation {
    margin-top: 1%;
    margin-bottom: 2%;
}

div.sheet-motivation label {
    width: 20%;
}

/* Margins on CYNICISM */
div.sheet-motivation label:nth-of-type(2) {
   margin-left: 36%;
}

div.sheet-motivation input[name="attr_cynicism"] {
    margin-left: 5%;
    margin-right: 9%;
}

div.sheet-motivation input[name="attr_cynicism"],
div.sheet-motivation input[name="attr_resolve"] {
    width: 3.5em;
}

/* Toughness row */
div.sheet-toughness label {
    width: 28%;
}

div.sheet-toughness div:nth-of-type(1) label:nth-of-type(1) {
    margin-left: 21%;
    text-align: center;
    margin-right: 2%;
}

div.sheet-toughness div:nth-of-type(1) label:nth-of-type(2) {
    width: 15%;
}

div.sheet-toughness div:nth-of-type(1) label:nth-of-type(3) {
    width: 30%;
}

div.sheet-toughness div:nth-of-type(1) div.sheet-small-box:nth-of-type(1) {
    margin-left: 28%;
}

div.sheet-toughness input[name="attr_toughness_other"] {
    margin-right: 5%;
}

div.sheet-toughness div:nth-of-type(1) div.sheet-small-box:nth-of-type(2) {
    margin-left: 2%;
}

div.sheet-toughness div:nth-of-type(2) label:nth-of-type(2) {
    width: 20%;
}

div.sheet-toughness div:nth-of-type(2) label:nth-of-type(3) {
    margin-left: 2%;
    width: 18%;
}

div.sheet-toughness div:nth-of-type(2) div.sheet-small-box:nth-of-type(1){
    margin-left: 2%;
    margin-right: 5%;
}

div.sheet-toughness input[name="attr_armor_defense_other"] {
    margin-left: 3%;
}

div.sheet-toughness div:nth-of-type(2) div.sheet-small-box:nth-of-type(2) {
    margin-left: 7%;
}

/* NERVE */
div.sheet-nerve label {
    width: 30%;
}

div.sheet-nerve input[name="attr_nerve"] {
    margin-right: 3%;
}

div.sheet-nerve input[name="attr_nerve_other"] {
    margin-left: 5%;
    margin-right: 5%;
}

div.sheet-nerve div.sheet-small-box {
    margin-left: 13%;
}

/* WEAPONS BOX */
div.sheet-weapons label:nth-of-type(1) {
    margin-right: 2%;
    width: 25%;
}

div.sheet-weapons label:nth-of-type(4) {
    margin-right: 2%;
    width: 25%;
}

div.sheet-weapons label:nth-of-type(2),
div.sheet-weapons label:nth-of-type(3),
div.sheet-weapons label:nth-of-type(5) {
    width: 10%;
}

div.sheet-weapons input[name="attr_weapon"],
div.sheet-weapons input[name="attr_attack_spd"] {
    width: 25%;
}

div.sheet-weapons input[name="attr_other_notes"] {
    width: 100%;
}

div.sheet-weapon-classes label {
    text-align: center;
    width: 17%;
}

div.sheet-weapon-classes label:nth-of-type(1) {
    margin-left: 26%;
}

div.sheet-weapon-classes label:nth-of-type(5) {
    width: 25%;
}

div.sheet-weapon-classes input[type="checkbox"] + span {
    margin-right: 8%;
}


/* ASPECT row */
div.sheet-aspect input[name="attr_aspect"] {
    width: 100%;
}

/* PSYCHIC Row */
div.sheet-psychic,
div.sheet-notes {
    margin-bottom: 2%;
}

div.sheet-psychic label:nth-of-type(1) {
    width: 70%;
}

div.sheet-psychic label:nth-of-type(2) {
    width: 20%;
}

div.sheet-psychic label:nth-of-type(3) {
    width: 8%;
}

div.sheet-psychic input[name="attr_power"] {
    width: 75%;
}

div.sheet-psychic input[name="attr_overcharge"],
div.sheet-psychic input[name="attr_uses"] {
    width: 3.5em;
}

/* Possession Row */
div.sheet-possession input[type="text"] {
    width: 100%;
}