@import url('https://fonts.googleapis.com/css?family=Merienda&display=swap');

.charsheet * {
	font-family: 'Merienda', Arial;
}

.charsheet .sheet-flex-section3 {
	column-count: 3;
}

.charsheet .sheet-flex-section4 {
	column-count: 4;
}

.charsheet .sheet-columns {
	display: flex;
	justify-content: space-between;
	width: 400px;
  }
  .charsheet .sheet-columns > * {
	flex: 1;
  }
  
  .charsheet input.sheet-toggle-show:not(:checked) ~ div.sheet-body,
  .charsheet input.sheet-toggle-hide:checked ~ div.sheet-body {
	  display: none;
  }

/*----------- 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-char,
.charsheet input.sheet-tab2:checked ~ div.sheet-section-abilities,
.charsheet input.sheet-tab3:checked ~ div.sheet-section-pack {
	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 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-help {
    	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: #e9e9e9;
	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 styles the span with the tab information and slides to the left, so it appears underneath the radio button*/
.charsheet span.sheet-help {
	text-align: center;
    	display: inline-block;
	font-size: 13px;
	background: #c2c2c2;
	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 -----------*/

.charsheet .full-sheet {
	padding: 3%;
}
.charsheet {
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Lot5/images/Fancy-Parchment-Paper-Background.jpg);
    background-size: 100%;
}

/*----------- Roll Template Explore -----------*/

.sheet-rolltemplate-exp table {
    width: 189px;
    height: 159px;
    padding: 2px;
    background: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Lot5/images/xBk4U1p.jpg) top left;
    background-size: 189px 159px;
    background-repeat: no-repeat;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    border-spacing: 0;
}
 
.sheet-rolltemplate-exp th {
	color: rgb(112, 0, 0);
    padding: 15px 2px 2px 20px;
	line-height: 1.2em;
	font-size: 1.2em;
    text-align: left;
}
 
 
.sheet-rolltemplate-exp td {
    padding-left: 20px;
    font-size: 1.0em;
    vertical-align: top;
}
 
.sheet-rolltemplate-exp .sheet-result {
    font-size: 1.2em;
    text-align: center;
    color: rgb(112, 0, 0);
    padding-bottom: 20px;
}
 
.sheet-rolltemplate-exp .inlinerollresult  {
    background-color: transparent;
    color: #000000;
    border: none;
}
 
.sheet-rolltemplate-exp .inlinerollresult.fullcrit {
   color: #3FB315;
    border: none;
}
 
.sheet-rolltemplate-exp .inlinerollresult.fullfail {
    color: #000000;
    border: none;
}
 
.sheet-rolltemplate-exp .inlinerollresult.importantroll {
	color: #3FB315;
    border: none;
}