/*----------- 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-BasicInfo,
.charsheet input.sheet-tab2:checked ~ div.sheet-section-Skills,
.charsheet input.sheet-tab3:checked ~ div.sheet-section-Abilities,
.charsheet input.sheet-tab4:checked ~ div.sheet-section-Weapons,
.charsheet input.sheet-tab5:checked ~ div.sheet-section-Items,
.charsheet input.sheet-tab6:checked ~ div.sheet-section-Religon,
.charsheet input.sheet-tab7:checked ~ div.sheet-section-Journal{
    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: 30px;
    	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: 4px;
	
	width: 100px;
    	height: 30px;
    	cursor: pointer;	
	position: relative;
	vertical-align: middle;
	margin-left: -101px;
}

/*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{
    
    	background: #2c424e;
    	color: #bfc4c6;
	border-radius: 4px;
}
/*----------- End Tab Setup -----------*/

td {
    text-align: center; 
    font-weight: bold; 
    font-size: 14px;
}

/*-- These set the style of all imput areas --*/

input {
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 2px solid black;
    border-radius: 5px;
    border-color: steelblue;
}

textarea {
    width: 98%;
    height: 20px;
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 2px solid black;
    border-radius: 5px;
    border-color: steelblue;
}