/* 9th Level Games all rights reserved.  Character Sheet for playing THE EXCELLENTS polymorph RPG on ROLL20 */

/* Get Fonts */
@import url('https://fonts.googleapis.com/css?family=Indie+Flower|Open+Sans&display=swap');

/* Set Rolling Buttons */
button[type=roll].sheet-die::before {
    font-family: 'Indie Flower';
	content: 'Roll';
    font-size: 3em;
    border-radius: 12px;
    line-height: 150%;
    padding: 30px 10px;
}

button[type=roll].sheet-van::before {
    font-family: 'Indie Flower';
	content: 'Vantage';
    font-size: 2em;
    border-radius: 12px;
    padding: 10px 10px;
    line-height: 150%;
}

button[type=roll]:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

/* Define Sheet */

.charsheet {
	background-color: #fff;
	width: 600px;
	height: 900px;
}

.charsheet label {
    font-family: 'Indie Flower';
    font-size: 2em;
    color: #660099;
}

.charsheet h1 {
    font-family: 'Indie Flower';
    font-size: 8em;
}

.charsheet h2 {
    font-style: italic;
    font-family: 'Open Sans';
    font-size: 1em;
}

.charsheet input {
        font-family: 'Indie Flower';
        font-size: 1.4em;
        color: #660099;
        background: rgba(255, 255, 255, 0);
        /* border: 1px solid #FF3333; */
}

.charsheet textarea {
        font-family: 'Indie Flower';
        font-size: 1em;
        color: #660099;
        background: rgba(255, 255, 255, 0);
        /* border: 1px solid #FF3333; */
}

.charsheet select {
        font-family: 'Indie Flower';
        font-size: 1.4em;
        color: #660099;
        background: rgba(255, 255, 255, 0);
        /* border: 1px solid #FF3333; */
}

.charsheet div {
    /* border: 1px solid #73AD21; */

}

/* Setup Grid Styling */

.sheet-XP-gridContainer{
	background-image: url('https://raw.githubusercontent.com/9thLevel/roll20-character-sheets/master/Polymorph/The%20Excellents/Roll20XPCharSheet.png');
	width: 600px;
	height: 900px;
	background-repeat: no-repeat;
	background-position: left top;
	background-attachment: scroll;
	background-size: cover;
	display: grid;
	grid-gap: 1px;
	grid-template-columns: 135px 250px 175px;
	grid-template-rows: 35px 100px 55px 65px 70px 70px 70px 75px 75px 70px 75px 50px 70px;
	}
	
/* Create and Display the ROLE/ROLL Images based on selection*/

.sheet-divd4, .sheet-divd6, .sheet-divd8, .sheet-divd10 {
    	display: none;
}

input[value="d4"].sheet-roleselect ~ div.sheet-divd4,
input[value="d6"].sheet-roleselect ~ div.sheet-divd6,
input[value="d8"].sheet-roleselect ~ div.sheet-divd8,
input[value="d10"].sheet-roleselect ~ div.sheet-divd10
{
    display: inline;
}
	
}