/*----------- 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-overview,
.charsheet input.sheet-tab2:checked ~ div.sheet-section-elites,
.charsheet input.sheet-tab3:checked ~ div.sheet-section-rank,
.charsheet input.sheet-tab4:checked ~ div.sheet-section-specialists,

{
	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: 200px;
    	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: 1.2em;
	font-family: stencil;
    background: #E6CAB0;
    color: #7C3E00;
    border: solid 1px rgba(0, 0, 0, 0.35);
    border-radius: 4px;
    width: 200px;
    height: 20px;
    cursor: pointer;
    position: relative;
    vertical-align: ;
    margin-left: -201px;
}

/*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: #7C3E00;
    color: white;
	border-radius: 4px;
}