roll20-character-sheets-tester/Song_of_Swords/Song-of-Swords.css

/*----------- 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-health,
.charsheet input.sheet-tab4:checked ~ div.sheet-section-inventory,

{
	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: 50px;
    	height: 50px;
    	cursor: pointer;	
	position: relative;
	left: 580px;
	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: 30pt;
	font-family: arial;
    background: #d1c6b0;
    color: #631515;
    border: solid 1px rgba(0, 0, 0, 0.35);
    border-radius: 4px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    position: relative;
	left: 580px;
    vertical-align: ;
    margin-left: -50px;
}

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

.charsheet {
    background-image: url("https://i.imgur.com/chknARt.jpg");
	background-repeat: repeat-y;
}

/* Remove input highlights */

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

skilltable {
	border: 1px solid black;
}

td.sheet-skilltable-td {
	border-width: 1px; 
	border-style: none dashed dotted none; 
	border-color: black;
	border-collapse: collapse;
	padding: 0 0 0 5px;
}

td.sheet-boontable-td {
	border-width: 1px; 
	border-style: none dashed dotted none; 
	border-color: black;
	border-collapse: collapse;
}
 
textarea.sheet-repeatingdesc {
background: none; 
width: 210px; 
height: 50px; 
border-radius: 2px; 
resize: vertical;
}

textarea.sheet-repeatingdesc2 {
background: none; 
width: 380px; 
height: 50px; 
border-radius: 2px; 
resize: vertical;
}

textarea.sheet-repeatingdesc3 {
background: none; 
width: 370px; 
height: 50px; 
border-radius: 2px; 
resize: vertical;
}

textarea.sheet-repeatingdesc4 {
background: none; 
width: 340px; 
height: 50px; 
border-radius: 2px; 
resize: vertical;
}

textarea.sheet-repeatingdesc5 {
background: none; 
width: 790px; 
height: 50px; 
border-radius: 2px; 
resize: vertical;
}

div.sheet-divtable {
	display: table; 
	border: 1px solid black;"
}

div.sheet-divtablerow {
	display: table-row;
}

div.sheet-divtabledata {
	display: table-cell;
	border-width: 1px; 
	border-style: none none dotted none; 
	border-color: black;
	border-collapse: collapse;
	padding: 0 0 0 0px;
}

div.sheet-divtabledatab {
	display: table-cell;
	border-width: 1px; 
	border-style: none dashed dotted none; 
	border-color: black;
	border-collapse: collapse;
	padding: 0 0 0 0px;
}

div.sheet-divtableinvis {
	display: table-cell;
	border-width: 0px; 
	border-style: none ; 
	border-collapse: collapse;
	padding: 0px 0px 0px 0px;
}

div.sheet-divtabledatainv {
	display: table-cell;
	border-width: 0px; 
	border-style: none; 
	border-collapse: collapse;
	padding: 0px 0px 0px 0px;
}