roll20-character-sheets-tester/Stories Untold/Stories Untold.css

.charsheet textarea {
    resize: none; /* Disables resizability */
}

/*----------- Tabs Setup -------------*/

/*this hides the contents of each tab by default*/
.charsheet div[class^="sheet-section"] {
    display: none;
}

/*this shows the tab content when the appropriate input field is selected*/
.charsheet input.sheet-tab1:checked ~ div.sheet-section-character,
.charsheet input.sheet-tab2:checked ~ div.sheet-section-combat,
.charsheet input.sheet-tab3:checked ~ div.sheet-section-notes{
    display: block;
}

.charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] {
    display: block;
}

/*this hides the radio button for each tab, makes it 100px wide and 20px tall and makes sure it's above everything else*/
.charsheet input.sheet-tab {
    width: 100px;
    height: 20px;
    cursor: pointer;
    position: relative;
    opacity: 0;
    z-index: 9999;
    left: 4px;;
}

/*this styles the span with the tab information and slides to the left, so it appears underneath the radio button*/
.charsheet span.sheet-tab {
    text-align: center;
    display: inline-block;
    font-family: "Beleren Small Caps", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    background: #c7c3b0;
    color: black;
    border-radius: 1px;
    width: 100px;
    height: 20px;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    margin-left: -100px;
    left: 0px;
}

/*this modifies the span color once the radio button is selected so you know which tab is selected*/
.charsheet input.sheet-tab1:checked + span.sheet-tab1,
.charsheet input.sheet-tab2:checked + span.sheet-tab2,
.charsheet input.sheet-tab3:checked + span.sheet-tab3,
.charsheet input.sheet-tab4:checked + span.sheet-tab4,
.charsheet input.sheet-tab99:checked + span.sheet-tab99 {

    background: #2c424e;
    color: #bfc4c6;
    border-radius: 0px;
}

/*----------- End Tab Setup -----------*/
.sheet-container {
    background-color:#ffffff
}

/*----------- Tabs -----------*/
.charsheet .sheet-section-character {
    height:819px;
    width:717px;
    min-width: 500px;
    background: url("https://raw.githubusercontent.com/zschaub/roll20-character-sheets/master/Stories%20Untold/assets/images/Character%20Tab%20Blank.png");
    background-repeat:no-repeat;
    background-position:0, 0;
    background-size: cover;
    background-color: transparent;
}

.charsheet .sheet-section-combat {
    height:819px;
    width:717px;
    min-width: 500px;
    background: url("https://raw.githubusercontent.com/zschaub/roll20-character-sheets/master/Stories%20Untold/assets/images/Combat%20Tab%20Blank.png");
    background-repeat:no-repeat;
    background-position:top left;
    background-size: cover;
    background-color: transparent;
}

.charsheet .sheet-section-notes {
    height:819px;
    width:717px;
    min-width: 500px;
    background: url("https://raw.githubusercontent.com/zschaub/roll20-character-sheets/master/Stories%20Untold/assets/images/Notes%20Tab%20Blank.png");
    background-repeat:no-repeat;
    background-position:top left;
    background-size: cover;
    background-color: transparent;
}

/*----------- End Tabs -----------*/

/*----------- Character Tab -----------*/
.sheet-character_name{
    position: absolute;
    text-align: center;
    color: black;
    border: transparent;
    background: transparent;
    font-family: "Beleren Small Caps", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 17px;
    width: 183px;
    height: 20px;
    top:395px;
    left:149px;
}

.sheet-stat{
    position: absolute;
    text-align: center;
    border: transparent;
    background: transparent;
    color: black;
    font-size: 32pt;
}

.sheet-stat-vitality{
    top: 493px;
    left: 104px;
}

.sheet-roll-character-vitality{
    top: 550px;
    left: 95px;
}

.sheet-stat-might{
    top: 493px;
    left: 212px;
}

.sheet-roll-character-might{
    top: 550px;
    left: 203px;
}

.sheet-stat-mobility{
    top: 493px;
    left: 319px;
}

.sheet-roll-character-mobility{
    top: 550px;
    left: 310px;
}

.sheet-stat-precision{
    top: 630px;
    left: 104px;
}

.sheet-roll-character-precision{
    top: 687px;
    left: 95px;
}

.sheet-stat-willpower{
    top: 630px;
    left: 212px;
}

.sheet-roll-character-willpower{
    top: 687px;
    left: 203px;
}

.sheet-stat-insight{
    top: 630px;
    left: 319px;
}

.sheet-roll-character-insight{
    top: 687px;
    left: 310px;
}

.sheet-stat-charisma{
    top: 767px;
    left: 104px;
}

.sheet-roll-character-charisma{
    top: 824px;
    left: 95px;
}

.sheet-stat-spirit{
    top: 767px;
    left: 212px;
}

.sheet-roll-character-spirit{
    top: 824px;
    left: 203px;
}

.sheet-stat-presence{
    top: 767px;
    left: 319px;
}

.sheet-roll-character-presence{
    top: 824px;
    left: 310px;
}

.sheet-character-skill-radio-3{
    left: 409px;
    top: 503px;
}

.sheet-character-skill-radio-2{
    left: 409px;
    top: 522px;
}

.sheet-character-skill-radio-1{
    left: 409px;
    top: 541px;
}

.sheet-character-skill-radio0{
    left: 409px;
    top: 561px;
}

.sheet-character-skill-radio1{
    left: 409px;
    top: 580px;
}

.sheet-character-skill-radio2{
    left: 409px;
    top: 599px;
}

.sheet-character-skill-radio3{
    left: 409px;
    top: 618px;
}

.sheet-character-skill-radio4{
    left: 409px;
    top: 638px;
}

.sheet-character-skill-radio5{
    left: 409px;
    top: 657px;
}

.sheet-character-misc-radio-3{
    left: 409px;
    top: 690px;
}

.sheet-character-misc-radio-2{
    left: 409px;
    top: 709px;
}

.sheet-character-misc-radio-1{
    left: 409px;
    top: 728px;
}

.sheet-character-misc-radio0{
    left: 409px;
    top: 748px;
}

.sheet-character-misc-radio1{
    left: 409px;
    top: 767px;
}

.sheet-character-misc-radio2{
    left: 409px;
    top: 786px;
}

.sheet-character-misc-radio3{
    left: 409px;
    top: 806px;
}

.sheet-character-misc-radio4{
    left: 409px;
    top: 825px;
}

.sheet-character-misc-radio5{
    left: 409px;
    top: 844px;
}

.sheet-text-physical-description{
    left: 419px;
    top: 195px;
    width: 256px;
    height: 94px;
}

.sheet-text-skills{
    left: 419px;
    top: 363px;
    width: 256px;
    height: 94px;
}

.sheet-text-equipments{
    left: 461px;
    top: 531px;
    width: 214px;
    height: 310px;
}
/*----------- Combat Tab -----------*/

.sheet-full-control1{
    top: 161px;
    left: 327px;
}

.sheet-full-control2{
    top: 161px;
    left: 371px;
}

.sheet-reaction-fatigue1{
    top: 161px;
	left: 490px;
}

.sheet-reaction-fatigue2{
    top: 161px;
	left: 533px;
}

.sheet-reaction-fatigue3{
    top: 161px;
	left: 577px;
}

.sheet-reaction-fatigue4{
    top: 161px;
	left: 621px;
}

.sheet-reaction-fatigue5{
    top: 161px;
	left: 664px;
}

.sheet-combat-skill-radio-3{
    left: 93px;
    top: 221px;
}

.sheet-combat-skill-radio-2{
    left: 126px;
    top: 221px;
}

.sheet-combat-skill-radio-1{
    left: 159px;
    top: 221px;
}

.sheet-combat-skill-radio0{
    left: 192px;
    top: 221px;
}

.sheet-combat-skill-radio1{
    left: 225px;
    top: 221px;
}

.sheet-combat-skill-radio2{
    left: 259px;
    top: 221px;
}

.sheet-combat-skill-radio3{
    left: 292px;
    top: 221px;
}

.sheet-combat-skill-radio4{
    left: 325px;
    top: 221px;
}

.sheet-combat-skill-radio5{
    left: 358px;
    top: 221px;
}

.sheet-combat-misc-radio-3{
    left: 396px;
    top: 221px;
}

.sheet-combat-misc-radio-2{
    left: 429px;
    top: 221px;
}

.sheet-combat-misc-radio-1{
    left: 463px;
    top: 221px;
}

.sheet-combat-misc-radio0{
    left: 496px;
    top: 221px;
}

.sheet-combat-misc-radio1{
    left: 529px;
    top: 221px;
}

.sheet-combat-misc-radio2{
    left: 562px;
    top: 221px;
}

.sheet-combat-misc-radio3{
    left: 596px;
    top: 221px;
}

.sheet-combat-misc-radio4{
    left: 628px;
    top: 221px;
}

.sheet-combat-misc-radio5{
    left: 662px;
    top: 221px;
}

.sheet-roll-combat-vitality{
    top: 246px;
    left: 88px;
    height: 59px;
    width: 143px;
}

.sheet-roll-combat-might{
    top: 313px;
    left: 88px;
    height: 59px;
    width: 143px;
}

.sheet-roll-combat-mobility{
    top: 380px;
    left: 88px;
    height: 60px;
    width: 143px;
}

.sheet-roll-combat-precision{
    top: 447px;
    left: 88px;
    height: 60px;
    width: 143px;
}

.sheet-roll-combat-willpower{
    top: 515px;
    left: 88px;
    height: 60px;
    width: 143px;
}

.sheet-roll-combat-insight{
    top: 583px;
    left: 88px;
    height: 60px;
    width: 143px;
}

.sheet-roll-combat-charisma{
    top: 651px;
    left: 88px;
    height: 59px;
    width: 143px;
}

.sheet-roll-combat-spirit{
    top: 718px;
    left: 88px;
    height: 59px;
    width: 143px;
}

.sheet-roll-combat-presence{
    top: 785px;
    left: 88px;
    height: 60px;
    width: 143px;
}

.sheet-roll-combat-protect{
    width: 104px;
    height: 25px;
    top: 246px;
    left: 241px;
}

.sheet-roll-combat-stabilize{
    width: 104px;
    height: 26px;
    top: 279px;
    left: 241px;
}

.sheet-roll-combat-melee{
    width: 104px;
    height: 26px;
    top: 313px;
    left: 241px;
}

.sheet-roll-combat-grapple{
    width: 104px;
    height: 26px;
    top: 346px;
    left: 241px;
}

.sheet-roll-combat-quick{
    width: 104px;
    height: 26px;
    top: 380px;
    left: 241px;
}

.sheet-roll-combat-avoid{
    width: 104px;
    height: 26px;
    top: 414px;
    left: 241px;
}

.sheet-roll-combat-ranged{
    width: 104px;
    height: 26px;
    top: 448px;
    left: 241px;
}

.sheet-roll-combat-deflect{
    width: 104px;
    height: 26px;
    top: 481px;
    left: 241px;
}

.sheet-roll-combat-compose{
    width: 104px;
    height: 26px;
    top: 515px;
    left: 241px;
}

.sheet-roll-combat-endure{
    width: 104px;
    height: 26px;
    top: 549px;
    left: 241px;
}

.sheet-roll-combat-hold{
    width: 104px;
    height: 26px;
    top: 583px;
    left: 241px;
}

.sheet-roll-combat-analyze{
    width: 104px;
    height: 26px;
    top: 617px;
    left: 241px;
}

.sheet-roll-combat-dialogue{
    width: 104px;
    height: 26px;
    top: 650px;
    left: 241px;
}

.sheet-roll-combat-guile{
    width: 104px;
    height: 26px;
    top: 684px;
    left: 241px;
}

.sheet-roll-combat-magic{
    width: 104px;
    height: 26px;
    top: 718px;
    left: 241px;
}

.sheet-roll-combat-awaken{
    width: 104px;
    height: 27px;
    top: 751px;
    left: 241px;
}

.sheet-roll-combat-intimidate{
    width: 104px;
    height: 26px;
    top: 785px;
    left: 241px;
}

.sheet-roll-combat-inspire{
    width: 104px;
    height: 26px;
    top: 819px;
    left: 241px;
}

/*----------- Notes Tab -----------*/
.sheet-text-backstory-summary{
    left: 94px;
    top: 190px;
    width: 271px;
    height: 151px;
}

.sheet-text-miscellaneous-notes{
    left: 94px;
    top: 413px;
    width: 271px;
    height: 425px;
}

.sheet-text-personality{
    left: 403px;
    top: 189px;
    width: 271px;
    height: 152px;
}

.sheet-text-current-objectives{
    left: 403px;
    top: 413px;
    width: 271px;
    height: 185px;
}

.sheet-text-relationships{
    left: 403px;
    top: 670px;
    width: 271px;
    height: 168px;
}

/*----------- Roll Template -----------*/
.sheet-rolltemplate-SU_Roll .sheet-roll-character {
    color: black;
    font-size: 1.2em;
    line-height: 20px;
}

.sheet-rolltemplate-SU_Roll .sheet-container {
    background-color: #ffffff;
    border: 1px solid;
    padding: 2px;
    width: 189px;
}

.sheet-rolltemplate-SU_Roll .sheet-container h1 {
    color: black;
    font-size: 1.2em;
    font-variant: small-caps;
    line-height: 20px;
}

.sheet-rolltemplate-SU_Roll div {
    padding: 2px;
};

.sheet-rolltemplate-SU_Roll span {
    color: rgb(126, 45, 64);
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2em;
    font-variant: small-caps;
    line-height: 1.6em;
    padding-left: 5px;
    text-align: left;
}

.sheet-rolltemplate-SU_Roll .sheet-subheader {
    color: #000000;
    font-size: 1em;
    font-style: italic;
}

.sheet-rolltemplate-SU_Roll .sheet-arrow-vitality {
    border-bottom: 2px solid transparent;
    border-left: 180px solid #c65a1f;
    border-top: 2px solid transparent;
}

.sheet-rolltemplate-SU_Roll .sheet-arrow-might {
    border-bottom: 2px solid transparent;
    border-left: 180px solid #be151b;
    border-top: 2px solid transparent;
}

.sheet-rolltemplate-SU_Roll .sheet-arrow-mobility {
    border-bottom: 2px solid transparent;
    border-left: 180px solid #98424b;
    border-top: 2px solid transparent;
}

.sheet-rolltemplate-SU_Roll .sheet-arrow-precision {
    border-bottom: 2px solid transparent;
    border-left: 180px solid #6c5879;
    border-top: 2px solid transparent;
}

.sheet-rolltemplate-SU_Roll .sheet-arrow-willpower {
    border-bottom: 2px solid transparent;
    border-left: 180px solid #006bb7;
    border-top: 2px solid transparent;
}

.sheet-rolltemplate-SU_Roll .sheet-arrow-insight {
    border-bottom: 2px solid transparent;
    border-left: 180px solid #568094;
    border-top: 2px solid transparent;
}

.sheet-rolltemplate-SU_Roll .sheet-arrow-charisma {
    border-bottom: 2px solid transparent;
    border-left: 180px solid #919771;
    border-top: 2px solid transparent;
}

.sheet-rolltemplate-SU_Roll .sheet-arrow-spirit {
    border-bottom: 2px solid transparent;
    border-left: 180px solid #d0b82b;
    border-top: 2px solid transparent;
}

.sheet-rolltemplate-SU_Roll .sheet-arrow-presence {
    border-bottom: 2px solid transparent;
    border-left: 180px solid #ca8425;
    border-top: 2px solid transparent;
}

.sheet-rolltemplate-SU_Roll .sheet-roll-note {
    font-style: italic;
}

.sheet-rolltemplate-SU_Roll .inlinerollresult  {
    background-color: #ffffff;
    color: #000000;
    border: none;
}

.sheet-rolltemplate-SU_Roll .inlinerollresult.fullcrit {
    color: #3FB315;
    border: none;
}

.sheet-rolltemplate-SU_Roll .inlinerollresult.fullfail {
    color: #B31515;
    border: none;
}


/*----------- End Roll Template -----------*/

/*----------- Type Modifiers -----------*/
.sheet-text-area{
    position: absolute;
}

.sheet-character-roll{
    position: absolute;
    opacity: 0;
    height: 18px;
    width: 58px;
}

.sheet-combat-roll{
    position: absolute;
    opacity: 0;
}

.sheet-combat-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
    border-bottom-right-radius: 13px;
    border-bottom-left-radius: 13px;
}

.sheet-combat-checkbox:checked {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: black;

}

.sheet-mod-radio {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
}

.sheet-mod-radio:checked {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: black;

}

/* For Firefox */
.charsheet input[type='number'] {
    -moz-appearance:textfield;
}
/* Webkit browsers like Safari and Chrome */
.charsheet input[type=number]::-webkit-inner-spin-button,
.charsheet input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}