.charsheet {
    
    background: url("https://i.pinimg.com/originals/04/fd/c1/04fdc124d0ef65ce49a87591d0a73b2f.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    min-width: 100% 
    max-width: 900px;

}

.sheet-column {
    float: left;
    width: 30%;
    /* border: 1px solid black; */
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    
}

/* Clear floats after the columns */
.sheet-row:after {
    content: "";
    display: table;
    clear: both;
    margin-left: auto;
    margin-right: auto;
    
}

.sheet {
    
}

.sheet-info-block { 

    display:table-cell;
}


.sheet-line-data {
    
}

.sheet-line-input {
    width:160px; 
    margin: 60;
}

.sheet-line-smallinput {
    width:10px;
    
}

input {
    background-color: #C3AD7E;
    border-color: black;
    box-sizing: border-box;
    color: black;
}

.sheet-model {

    display:block;
    margin-left:80px;
    margin-right: auto;
    margin-top:10px;
    width:18%;
    position:absolute;
}

.sheet-center-block {
    margin:auto;
    display:inline-block;
}















/*----------- 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-core,
.charsheet input.sheet-tab2:checked ~ div.sheet-section-edges,
.charsheet input.sheet-tab3:checked ~ div.sheet-section-skills,
.charsheet input.sheet-tab4:checked ~ div.sheet-section-gear,
.charsheet input.sheet-tab5:checked ~ div.sheet-section-arcanum,
.charsheet input.sheet-tab6:checked ~ div.sheet-section-journal {
	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: 40px;
    	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: 40px;
    	cursor: pointer;	
	position: relative;
	vertical-align: middle;
	margin-left: -101px;/*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-tab99:checked + span.sheet-tab99 {
    
    	background: #2c424e;
    	color: #bfc4c6;
	border-radius: 4px;
}
/*----------- End Tab Setup -----------*/