/*-- ED4 Character Sheet v2.3 Last update: 8-22-2018
Author: Dougansf --*/

h3 {text-indent: 20px;}

{color: black; font-size: 90%}

input {font-size: 90%}

/*----------- Main 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-attributes,
.charsheet input.sheet-tab2:checked ~ div.sheet-section-talents,
.charsheet input.sheet-tab3:checked ~ div.sheet-section-skills,
.charsheet input.sheet-tab4:checked ~ div.sheet-section-knacks,
.charsheet input.sheet-tab5:checked ~ div.sheet-section-questor,
.charsheet input.sheet-tab6:checked ~ div.sheet-section-equipment,
.charsheet input.sheet-tab7:checked ~ div.sheet-section-matrixes,
.charsheet input.sheet-tab8:checked ~ div.sheet-section-grimoire,
.charsheet input.sheet-tab9:checked ~ div.sheet-section-treasury,
.charsheet input.sheet-tab10:checked ~ div.sheet-section-NPC,
.charsheet input.sheet-tab51:checked ~ div.sheet-section-circle1,
.charsheet input.sheet-tab52:checked ~ div.sheet-section-circle2,
.charsheet input.sheet-tab53:checked ~ div.sheet-section-circle3,
.charsheet input.sheet-tab54:checked ~ div.sheet-section-circle4,
.charsheet input.sheet-tab55:checked ~ div.sheet-section-circle5,
.charsheet input.sheet-tab56:checked ~ div.sheet-section-circle6,
.charsheet input.sheet-tab57:checked ~ div.sheet-section-circle7,
.charsheet input.sheet-tab58:checked ~ div.sheet-section-circle8,

{
    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 40px 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;
}

/*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-size: 13px;    
    background: #c7c3b0;
    color: black;
    font-weight: bold;
    border-radius: 5px;
    
    width: 100px;
        height: 20px;
        cursor: pointer;    
    position: relative;
    vertical-align: middle;
    margin-left: -90px;/*originally 91px*/
}

/*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-tab5:checked + span.sheet-tab5,
.charsheet input.sheet-tab6:checked + span.sheet-tab6,
.charsheet input.sheet-tab7:checked + span.sheet-tab7,
.charsheet input.sheet-tab8:checked + span.sheet-tab8,
.charsheet input.sheet-tab9:checked + span.sheet-tab9,
.charsheet input.sheet-tab10:checked + span.sheet-tab10,
.charsheet input.sheet-tab51:checked + span.sheet-tab51,
.charsheet input.sheet-tab52:checked + span.sheet-tab52,
.charsheet input.sheet-tab53:checked + span.sheet-tab53,
.charsheet input.sheet-tab54:checked + span.sheet-tab54,
.charsheet input.sheet-tab55:checked + span.sheet-tab55,
.charsheet input.sheet-tab56:checked + span.sheet-tab56,
.charsheet input.sheet-tab57:checked + span.sheet-tab57,
.charsheet input.sheet-tab58:checked + span.sheet-tab58,
.charsheet input.sheet-tab99:checked + span.sheet-tab99 {
    
        background: #034cb2;
        color: #FFFFFF;
    border-radius: 5px;
}
/*----------- End Main Tab Setup -----------*/