roll20-character-sheets/HARP/harp.css

@import url('https://fonts.googleapis.com/css?family=Rosarivo:ital@1|Merriweather&display=swap');

.charsheet{
    width: 800px;
}

/*----------- 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*/
input.sheet-tab1:checked ~ div.sheet-section-basic,
input.sheet-tab2:checked ~ div.sheet-section-stats,
/*input.sheet-tab3:checked ~ div.sheet-section-background,*/
input.sheet-tab4:checked ~ div.sheet-section-skills,
input.sheet-tab5:checked ~ div.sheet-section-talents,
input.sheet-tab6:checked ~ div.sheet-section-combat, 
input.sheet-tab7:checked ~ div.sheet-section-grimoire,
input.sheet-tab8:checked ~ div.sheet-section-posessions,
input.sheet-tab9:checked ~ div.sheet-section-notes,
input.sheet-tab10:checked ~ div.sheet-section-settings,
input.sheet-tab11:checked ~ div.sheet-section-armor,
input.sheet-tab12:checked ~ div.sheet-section-profession,
input.sheet-tab13:checked ~ div.sheet-section-race,
input.sheet-tab14:checked ~ div.sheet-section-culture,
input.sheet-tab15:checked ~ div.sheet-section-history,
input.sheet-tab16:checked ~ div.sheet-section-artistic,
input.sheet-tab17:checked ~ div.sheet-section-athletic,
input.sheet-tab18:checked ~ div.sheet-section-concentration,
input.sheet-tab19:checked ~ div.sheet-section-general,
input.sheet-tab20:checked ~ div.sheet-section-influence,
input.sheet-tab21:checked ~ div.sheet-section-mystical-arts,
input.sheet-tab22:checked ~ div.sheet-section-outdoor,
input.sheet-tab23:checked ~ div.sheet-section-physical,
input.sheet-tab24:checked ~ div.sheet-section-subterfuge,
{
    
	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: 80px;
    	height: 25px;
    	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: 11px;	
	/*background: #1F5D5A;*/
	background: DarkOliveGreen;
	/*color: #E9C458;*/
	color: Gainsboro;
	font-style: normal;
	border-radius: 16px;
	
	width: 80px;
	height: 25px;
	cursor: pointer;	
	position: relative;
	vertical-align: middle;
	margin-left: -81px;/*originally 91px*/
}

.charsheet span.sheet-tab {
	text-align: center;
    	display: inline-block;
	
	/*background: #1F5D5A;*/
	
}

/*this modifies the span color once the radio button is selected so you know which tab is selected*/
input.sheet-tab1:checked + span.sheet-tab1,
input.sheet-tab2:checked + span.sheet-tab2,
/*input.sheet-tab3:checked + span.sheet-tab3,*/
input.sheet-tab4:checked + span.sheet-tab4,
input.sheet-tab5:checked + span.sheet-tab5,
input.sheet-tab6:checked + span.sheet-tab6,
input.sheet-tab7:checked + span.sheet-tab7,
input.sheet-tab8:checked + span.sheet-tab8,
input.sheet-tab9:checked + span.sheet-tab9,
input.sheet-tab10:checked + span.sheet-tab10,
input.sheet-tab11:checked + span.sheet-tab11,
input.sheet-tab12:checked + span.sheet-tab12,
input.sheet-tab13:checked + span.sheet-tab13,
input.sheet-tab14:checked + span.sheet-tab14,
input.sheet-tab15:checked + span.sheet-tab15,
input.sheet-tab16:checked + span.sheet-tab16,
input.sheet-tab17:checked + span.sheet-tab17,
input.sheet-tab18:checked + span.sheet-tab18,
input.sheet-tab19:checked + span.sheet-tab19,
input.sheet-tab20:checked + span.sheet-tab20,
input.sheet-tab21:checked + span.sheet-tab21,
input.sheet-tab22:checked + span.sheet-tab22,
input.sheet-tab23:checked + span.sheet-tab23,
input.sheet-tab24:checked + span.sheet-tab24,{
    
	background: white;
	/*color: #1F5D5A;*/
	color: DarkOliveGreen;
	font-size: 12px;
	/*font-style: italic;*/
	font-weight: bold;
	border-style: solid;
    border-color: DarkOliveGreen;
    border-width: 1px;
	border-radius: 16px;
}
/*----------- End Tab Setup -----------*/

/*----------Character/NPC-----------*/
.sheet-character,
.charsheet .sheet-character-switch-a:checked ~ .sheet-npc {
  display: block;
}

.charsheet .sheet-npc,
.charsheet .sheet-character-switch-a:checked ~ .sheet-character {
  display: none;
}



/* the combat tab */


/*this styles the span with the tab information and slides to the left, so it appears underneath the radio button*/

/*----------- End Tab Setup -----------*/


.repcontainer[data-groupname=repeating_profession] .repitem:nth-child(even) {
    background-color: #f4f7ed;
    margin-top: 0px;
    margin-bottom: 0px;
}


.repcontainer[data-groupname=repeating_profession] .repitem:nth-child(odd) {
    background-color: white;
    margin-top: 0px;
    margin-bottom: 0px;
}

.repcontainer[data-groupname=repeating_race] .repitem:nth-child(even) {
    background-color: #f4f7ed;
    margin-top: 0px;
    margin-bottom: 0px;
}


.repcontainer[data-groupname=repeating_race] .repitem:nth-child(odd) {
    background-color: white;
    margin-top: 0px;
    margin-bottom: 0px;
}

/* THIS SECTION IS FOR THE INSTRUCTIONS CARDS */

/*       END OF INSTRUCTION CARD SETUP*/
/* css grids */
.sheet-six-column{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "cone ctwo cthree cfour cfive csix";
}

.sheet-npc{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "cone ctwo cthree cfour cfive csix cseven ceight cnine cten celeven ctwelve cthirteen";
}

.sheet-eight-column{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "cone ctwo cthree cfour cfive csix cseven ceight";
}

.sheet-three-column{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "tcleft tccenter tcright";
}

.sheet-three-column-wide-left{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: 50% 25% 25%;
    grid-template-rows: 1fr;
    grid-template-areas: "tcleft tccenter tcright";
}

.sheet-two-column{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "colleft colright";
}

.sheet-two-column-left-wide{
    display: grid;
    width: 100%;
    grid-gap: 15px;
    grid-template-columns: 55% 40%;
    grid-template-rows: 1fr;
    grid-template-areas: "colleftw colrightw";
}

.sheet-two-column-left-narrow{
    display: grid;
    width: 100%;
    font-family: 'arial', sans-serif;
    font-size: 12px;
    background-color: #f4f7ed;
    grid-gap: 5px;
    grid-template-columns: 25% 75%;
    grid-template-rows: 1fr;
    grid-template-areas: "colleftn colrightn";
}

.sheet-two-column-right-wide{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: 35% 64%;
    grid-template-rows: 1fr;
    grid-template-areas: "colleftrw colrightrw";
}

.sheet-row{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "rrow";
}

.sheet-skill-grid{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "skbutt skname skname skname skstat skstat skranks skrbns sksbns skobns skttl skres";
}

.sheet-weapon-grid{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: .40fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "wpbutt wpname wpname wpcat wptype wpsize wprank wprbns wpstat wpother wptotal";
}

.sheet-full-armor-grid{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: 3fr .75fr 1.5fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "ardesc arfit artype ardb arbns armin armax arcast";
}

.sheet-piece-armor-grid{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: 2.25fr .75fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "pardesc parfit parloc partype pardb parbns parmin parmax parcast";
}

.sheet-spell-grid{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: .5fr 1.5fr 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "spbutt spsphere spname sppp sptype sprr sprnk sprnkbns spstat spother sptotal";
}

.sheet-cone{
    grid-area: cone;
}

.sheet-ctwo{
    grid-area: ctwo;
}

.sheet-cthree{
    grid-area: cthree;
}

.sheet-cfour{
    grid-area: cfour;
}

.sheet-cfive{
    grid-area: cfive;
}

.sheet-csix{
    grid-area: csix;
}

.sheet-cseven{
    grid-area: cseven;
}

.sheet-ceight{
    grid-area: ceight;
}

.sheet-cnine{
    grid-area: cnine;
}

.sheet-cten{
    grid-area: cten;
}

.sheet-celeven{
    grid-area: celeven;
}

.sheet-ctwelve{
    grid-area: ctwelve;
}

.sheet-cthirteen{
    grid-area: cthirteen;
}

.sheet-tcleft{
    grid-area: tcleft;
}

.sheet-tccenter{
    grid-area: tccenter;
}

.sheet-tcright{
    grid-area: tcright;
}

.sheet-colleft{
    grid-area: colleft;
}

.sheet-colright{
    grid-area: colright;
}

.sheet-colleftw{
    grid-area: colleftw;
}

.sheet-colrightrw{
    grid-area: colrightrw;
}

.sheet-colleftn{
    grid-area: colleftn;
    text-align: right;
}

.sheet-colrightn{
    grid-area: colrightn;
    
}

.sheet-colleftrw{
    grid-area: colleftrw;
}

.sheet-colrightw{
    grid-area: colrightw;
}

.sheet-skname{
    grid-area: skname;
} 
.sheet-skbutt{
    grid-area: skbutt;
} 
.sheet-skstat{
    grid-area: skstat;
} 
.sheet-skranks{
    grid-area: skranks;
} 
.sheet-skrbns{
    grid-area: skrbns;
} 
.sheet-sksbns{
    grid-area: sksbns;
} 
.sheet-skobns{
    grid-area: skobns;
} 
.sheet-skttl{
    grid-area: skttl;
} 
.sheet-skres{
    grid-area: skres;
}

.sheet-rrow{
    grid-area: rrow;
}

.sheet-wpbutt{
    grid-area: wpbutt;
}  
.sheet-wpname{
    grid-area: wpname;
}

.sheet-wpcat{
    grid-area: wpcat;
}

.sheet-wptype{
    grid-area: wptype;
} 
.sheet-wpsize{
    grid-area: wpsize;
}

.sheet-wprank{
    grid-area: wprank;
} 
.sheet-wprbns{
    grid-area: wprbns;
}

.sheet-wpstat{
    grid-area: wpstat;
} 

.sheet-wpother{
    grid-area: wpother;
} 

.sheet-wptotal{
    grid-area: wptotal;
}

.sheet-ardesc{
    gird-area: ardesc;
}       

.sheet-arfit{
    gird-area: arfit;
}

.sheet-artype{
    gird-area: artype;
}

.sheet-ardb{
    gird-area: ardb;
}

.sheet-arbns{
    gird-area: arbns;
}

.sheet-armin{
    gird-area: armin;
}

.sheet-armax{
    gird-area: armax;
}

.sheet-arcast{
    gird-area: arcast;
}

.sheet-pardesc{
    gird-area: pardesc;
}       

.sheet-parfit{
    gird-area: parfit;
}

.sheet-parloc{
    gird-area: parloc;
}

.sheet-partype{
    gird-area: partype;
}

.sheet-pardb{
    gird-area: pardb;
}

.sheet-parbns{
    gird-area: parbns;
}

.sheet-parmin{
    gird-area: parmin;
}

.sheet-parmax{
    gird-area: parmax;
}

.sheet-parcast{
    gird-area: parcast;
}

.sheet-spbutt{
    grid-area: spbutt;
} 
        
.sheet-spsphere{
    gird-area: spsphere;
}       

.sheet-spname{
    gird-area: spname;
}

.sheet-sppp{
    grid-area: sppp;
}

.sheet-sptype{
    gird-area: sptype;
}

.sheet-sprr{
    gird-area: sprr;
}

.sheet-sprnk{
    gird-area: sprnk;
}

.sheet-sprnkbns{
    gird-area: sprnkbns;
}

.sheet-spstat{
    gird-area: spstat;
}

.sheet-spother{
    gird-area: spother;
}

.sheet-sptotal{
    gird-area: sptotal;
}
/* end css grids */

.sheet-white {
    background: white;
    color: black;
    font-size: 14px;
    font-weight: normal;
}

input.sheet-under{
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 1px lightgray;
}

input[type=text].sheet-compact{
    font-family: "Arial", sans-serif;
    font-size: 13px;
    height: 20px;
    
}

input[type=text].sheet-compact-spell{
    font-family: "Arial", sans-serif;
    font-size: 11px;
    height: 20px;
    
}

input[type=text].sheet-compact-encumbrance{
    font-family: "Arial", sans-serif;
    width: 50px;
    font-size: 12px;
    height: 20px;
    
}

input[type=text].sheet-compact-label{
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    font-size: 13px;
    height: 20px;
    font-family: "Arial", sans-serif;
}

input[type=number].sheet-compact-number{
    font-size: 12px;
    height: 20px;
    width: 45px;
}

input[type=number].sheet-compact-number-skill{
    font-size: 12px;
    height: 20px;
    width: 30px;
    background: transparent;
}

input[type=number].sheet-compact-text-skill{
    font-size: 12px;
    height: 20px;
    width: 90%;
    background: transparent;
}

input[type=text].sheet-text-full{
    width: 90%;
    background: transparent;
}

input.sheet-text-225
{
    width: 225px;
}

input[type=text].sheet-text-200
{
    width: 203px;
}
input.sheet-text-175
{
    width: 175px;
}

input.sheet-text-125
{
    width: 125px;
}

input.sheet-text-on
{
    width: 73px;
}

input.sheet-text-off
{
    width: 72px;
}
input.sheet-text-put-on
{
    width: 155px;
}

input.sheet-text-150
{
    width: 150px;
}

input.sheet-text-125
{
    width: 125px;
}

input.sheet-text-100
{
    width: 100px;
}

input.sheet-text-75
{
   width: 75px;
}

input.sheet-text-50
{
   width: 50px;
}

input.sheet-text-45
{
   width: 45px;
}

input.sheet-text-25
{
   width: 17px;
}

input[type=text].sheet-text-25
{
   width: 25px;
}

select.sheet-compact-select-ci{
    font-size: 10px;
    color: black;
    height: 21px;
    width: 45%;
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 1px lightgray;
}

select.sheet-compact-select-cip{
    font-size: 10px;
    background: transparent;
    color: black;
    height: 21px;
    width: 45%;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 1px lightgray;
}

select.sheet-compact-select-cir{
    font-size: 10px;
    color: black;
    height: 19px;
    width: 45%;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 1px lightgray;
}

select.sheet-compact-select-cires{
    font-size: 9px;
    color: black;
    height: 20px;
    width: 100%;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 1px lightgray;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

select.sheet-compact-select-range{
    font-size: 9px;
    color: black;
    height: 20px;
    width: 25%;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 1px lightgray;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

select.sheet-compact-select-cistat{
    font-size: 9px;
    color: black;
    height: 20px;
    width: 40%;
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 1px lightgray;
    -webkit-appearance: none;
    -moz-appearance: none;
    /*text-indent: 1px;
    text-overflow: '';*/
}

/* will be deleted when full sheet is operational */
div.sheet-header
{
    background: #1F5D5A;
    text-align: center;
    font-size: 14px;
    border-radius: 6px 6px 6px 6px;
    color: white;
}
/* will be deleted when full sheet is operational */
div.sheet-header-one
{
    background: #E9C458;
    text-align: center;
    font-size: 10px;
    border-radius: 0px 0px 0px 0px;
    
}

div.sheet-overflow{
    overflow: scroll;
}
.sheet-section {
    padding: 2px;
    margin-top: 2px;
    margin-bottom: 2px;
    border-style: solid;
    border-color: LightGray;
    border-width: 1px;
    border-radius: 5px 5px 5px 5px;
}

div.sheet-dashboard-header
{
    background: white;
    text-align: center;
    font-size: 11px;
    border-radius: 20px 20px 20px 20px;
    color: black;
    margin: 3px;
    width: 100%;
    padding: 3px;
    border-style: solid;
    border-color: #1F5D5A;
    border-width: 1px;
}

div.sheet-instruction{
    width: 100%;
    text-align: left;
    font-family: 'Merriweather', serif;
}

div.sheet-instruction-center
{
    text-align: center;
    font-size: 14px;
    border-radius: 6px 6px 6px 6px;
    color: black;
}

div.sheet-section-title{
    font-size: 20px;  
    color: black;
    
}

div.sheet-instruction{
    font-size:13px;
    color: black;
}

div.sheet-padded{
    padding: 6px;
}

span.sheet-section-label{
    font-size: 20px;
    font-family: 'Metamorphous', cursive;
    font-family: 'Fondamento', cursive;
    font-family: 'Rosarivo', serif;
}

span.sheet-subsection-label{
    font-size: 16px;
    font-family: 'Metamorphous', cursive;
    font-family: 'Fondamento', cursive;
    font-family: 'Rosarivo', serif;
}

span.sheet-minor-label{
    font-size: 13px;
    font-family: 'Metamorphous', cursive;
    font-family: 'Fondamento', cursive;
    font-family: 'Rosarivo', serif;
}

span.sheet-minor-label-r{
    font-size: 13px;
    color: red;
    font-family: 'Metamorphous', cursive;
    font-family: 'Fondamento', cursive;
    font-family: 'Rosarivo', serif;
}

span.sheet-minor-button{
    font-size: 14px;
    font-family: 'Metamorphous', cursive;
    font-family: 'Fondamento', cursive;
    font-family: 'Rosarivo', serif;
    text-decoration: underline;
}

span.sheet-npc-button{
    font-size: 10px;
    font-family: 'Metamorphous', cursive;
    font-family: 'Fondamento', cursive;
    font-family: 'Rosarivo', serif;
    text-decoration: underline;
}

span.sheet-category-label{
    font-size: 8px;
    font-family: 'Arial',sans-serif;
}

span.sheet-category-label-r{
    color: red;
    font-size: 10px;
    font-family: 'Arial',sans-serif;
}

span.sheet-favored-label{
    font-size: 11px;
    font-family: 'Arial',sans-serif;
    padding: 3px;
    color: DarkOliveGreen;
}

input.sheet-compact-wide{
    font-size: 10px;
    height: 20px;
    width: 150px;
    
}

input.sheet-compact-mid{
    font-size: 10px;
    height: 20px;
    width: 130px;
}

input.sheet-compact{
    font-size: 10px;
    height: 20px;
    width: 110px;
}

input[type=number].sheet-compact-number{
    font-size: 10px;
    height: 20px;
    width: 45px;
}

input[type=number].sheet-npc-number{
    font-size: 9px;
    height: 15px;
    width: 35px;
}

input.sheet-compact{
    font-size: 10px;
    height: 20px;
}

input.sheet-compact-npc{
    font-size: 9px;
    height: 15px;
    width: 50px;
}

input.sheet-text-mid
{
    width: 110px;
}

textarea.sheet-history{
    font-size: 11px;
    width: 375px;
    height: 300px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 1px lightgray;
}

textarea.sheet-talent{
    font-size: 11px;
    width: 93%;
    height: 35px;
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 1px lightgray;
}

textarea.sheet-lifespan{
    font-size: 11px;
    width: 93%;
    height: 15px;
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 1px lightgray;
}

textarea.sheet-profession{
    font-size: 11px;
    width: 93%;
    height: 75px;
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 1px lightgray;
}

select.sheet-compact-select{
    font-size: 10px;
    height: 22px;
    width: 75px;
}

select.sheet-compact-select-wide{
    font-size: 10px;
    height: 22px;
    width: 150px;
}

button.sheet-nod20:before {
  content: "" !important;
}

button.sheet-button{
    
    height: 10px;
    width: 24px;
    font-size: 0;
    font-family: 'dicefontd10';
}

/*--------------- Buttons/ chreckboxes ---------------*/
button.sheet-nod20:before {
  content: "" !important;
  
}

button.sheet-button{
    
    height: 20px;
    /*width: 24px;*/
    border-radius: 10px 10px 10px 10px;
    color: black;
    Background-color: gray;
    font-size: 10px ;  
}

button.sheet-button-small{
    
    height: 9px;
    width: 22px;
    color: black;
    Background-color: LightGray;
    border-radius: 12px 12px 12px 12px;
    font-size: 8px;  
    font-family: 'Metamorphous', cursive, 'Arial';
    
}

button.sheet-button-skill{
    
    height: 9px;
    width: 10px;
    color: black;
    Background-color: LightGray;
    border-radius: 12px 12px 12px 12px;
    
}


button[type="roll"].sheet-txt-btn:before{
    content: ' ';
}

button[type="roll"].sheet-txt-btn{
    background-color: transparent;
    background-image: none;
    border: 0;
    box-shadow: none;
    text-align: left;
    text-shadow: initial
    width: 50%;
}

button[type="roll"].sheet-txt-btn:hover{
    background-color: DarkOliveGreen;
    color: GoldenRod;
    border: none;
}

input[type=checkbox].sheet-check{
    height: 12px;
    width: 12px;
}

input[type=checkbox].sheet-check-tiny{
    height: 10px;
    width: 10px;
}

.sheet-full-suit,
.sheet-armor-switch-s:checked ~ .sheet-piecemeal {
  display: block;
}

.sheet-piecemeal,
.sheet-armor-switch-s:checked ~ .sheet-full-suit {
  display: none;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}







.itemcontrol {
    margin-left: -33px;
}


.repcontrol{
	margin-right: 14px;
}

div.repcontrol button
{
	width: 13px;
    color: transparent;
    padding: 0px;
    padding-left: 2px;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);

}

div.repcontrol button.repcontrol_add::before,
div.repcontrol button.repcontrol_edit::before
{
    font-family: Pictos;
    position: relative;
    color: #000;
	width:12px;
	height:12px;
}

/* +Add */
div.repcontrol button.repcontrol_add::before
{

    content: "&"; /* & in Pictos is a + sign, while + is a plus inside a circle */
    left: -0px;
    top: -0px;
}

/* Modify */
div.repcontrol button.repcontrol_edit::before
{
	text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    content: "x"; /* x in Pictos is a crossed hammer and wrench */
    left: -0px;
    top: -0px;
}
/* Done */
div.repcontrol.editmode button.repcontrol_edit::before
{
    content: "3"; /* 3 in Pictos is a check mark */

}

/* ------------------ Skill check template --------------*/

.sheet-rolltemplate-skill .sheet-container {
    padding: 4px;
    border-style: solid;
    border-width: 1px;
    border-color: LightGray;
    /*color: OldLace;*/
    font-family: 'Merriweather', serif;
    border-radius: 2px 2px 2px 2px;
}

.sheet-rolltemplate-skill .sheet-artistic {background: DodgerBlue;color: WhiteSmoke;}
.sheet-rolltemplate-skill .sheet-athletic {background: Maroon;color: OldLace;}
.sheet-rolltemplate-skill .sheet-combat {background: black;color: OldLace;}
.sheet-rolltemplate-skill .sheet-concentration {background: SlateGray;color: WhiteSmoke;}
.sheet-rolltemplate-skill .sheet-general {background: MidnightBlue;color: OldLace;}
.sheet-rolltemplate-skill .sheet-influence {background: IndianRed;color: OldLace;}
.sheet-rolltemplate-skill .sheet-mystical {background: purple;color: OldLace;}
.sheet-rolltemplate-skill .sheet-outdoor {background: DarkOliveGreen;color: OldLace;}
.sheet-rolltemplate-skill .sheet-physical {background: SaddleBrown;color: OldLace;}
.sheet-rolltemplate-skill .sheet-subterfuge {background: Grey;color: WhiteSmoke;}
.sheet-rolltemplate-skill .sheet-unskilled {background: Crimson;color: OldLace;}

.sheet-rolltemplate-skill .sheet-partner{font-size: .5em}



.sheet-rolltemplate-skill .div{
    line-height: 18px;    
}

.sheet-rolltemplate-skill .sheet-skill-header{
    padding: 2px;
    margin-top: 5px;
    font-family: 'Merriweather', serif;
    color: black;
    background: OldLace;
    border-style: solid;
    border-color: black;
    text-align: center;
    border-right: 1px;
    border-left: 1px;
    border-top: 1px;
    border-bottom: none;
    border-radius: 2px 2px 0px 0px;
}

.sheet-rolltemplate-skill .sheet-skill-title{
    font-size: 16px;
    line-height: 18px;
}

.sheet-rolltemplate-skill .sheet-subtitle{
    font-size: 14px;
    line-height: 16px;
}

.sheet-rolltemplate-skill .sheet-content{
    text-align: center;
    padding: 2px;
    color: black;
    border-radius: 2px 2px 2px 2px;
    /*border-right: 1px;
    color: black;
    border-left: 1px;
    border-top: none;
    border-bottom: 1px;
    border-style: solid;
    border-color: black;*/
    background: OldLace;
}

.sheet-rolltemplate-skill .sheet-display{
    text-align: center;
    margin-top: 3px;
    margin-bottom: 3px;
    font-family: 'Merriweather', serif;
    font-size: 12px;
    line-height: 16px;
}

.sheet-rolltamplate-skill .sheet-fumble{
    text-align: center;
    margin-top: 3px;
    margin-bottom: 3px;
    font-family: 'Merriweather', serif;
    font-size: 12px;
    line-height: 16px;
    color: Crimson;
}

.sheet-rolltemplate-skill .sheet-display-minor{
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: 'Merriweather', serif;
    font-size: 12px;
    line-height: 16px;
}

.sheet-rolltemplate-skill .inlinerollresult{
    border: none;
    background: OldLace;
    font-family: 'Merriweather', serif;
    font-size: 16px;
    line-height: 20px;
}

.sheet-rolltemplate-skill .inlinerollresult.fullcrit{
    border: none;
    background: OldLace;
    font-family: 'Merriweather', serif;
    font-size: 16px;
    line-height: 20px;
}

.sheet-rolltemplate-skill .inlinerollresult.fullfail{
    border: none;
    background: OldLace;
    font-family: 'Merriweather', serif;
    font-size: 16px;
    line-height: 20px;
}

.sheet-rolltemplate-skill .inlinerollresult.importantroll{
    border: none;
    background: OldLace;
    font-family: 'Merriweather', serif;
    font-size: 16px;
    line-height: 20px;
}

.sheet-rolltemplate-skill .sheet-info-tag{
    font-size: 12px;
    font-family: 'Courier', sans-serif;
}

/* Roll Buttons */
.sheet-rolltemplate-skill a[href^='!'],
.sheet-rolltemplate-skill a[href^='~'],
.sheet-rolltemplate-skill a[href^='`']{
    border-radius: 5px;
    color: black;
    display: inline-block;
    border: 1px solid black;
    background-color: oldlace;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    position: relative;
    top: 0;
    transition: top ease 0.2s;
    padding: 2px 5px;
}
.sheet-rolltemplate-skill a[href^='!']:hover,
.sheet-rolltemplate-skill a[href^='~']:hover,
.sheet-rolltemplate-skill a[href^='`']:hover{
  top: -3px;
}
/* hyperlinks */
.sheet-rolltemplate-skill a:not([href^='~']):not([href^='!']):not([href^='`']){
    font-weight: bold;
    color:#3f8aa6;
}
.sheet-rolltemplate-skill a:not([href^='~']):not([href^='!']):not([href^='`']):hover {
  font-weight: bold;
  color:#70c0dd;
}
.sheet-rolltemplate-skill a:not([href^='~']):not([href^='!']):not([href^='`']):visited{
  color:purple;
}
.sheet-rolltemplate-skill a:not([href^='~']):not([href^='!']):not([href^='`']):visited:hover{
  color:rgb(187, 45, 187);
}

/*  ---- Mod Roll Template ---- if you find this. DO NOT MESS WITH IT !!! GCP-HARP-1000*/
.sheet-rolltemplate-mod .sheet-container {
    padding: 4px;
    border-style: solid;
    border-width: 1px;
    border-color: LightGray;
    /*color: OldLace;*/
    font-family: 'Merriweather', serif;
    border-radius: 2px 2px 2px 2px;
}

.sheet-rolltemplate-mod .sheet-artistic {background: DodgerBlue;color: WhiteSmoke;}
.sheet-rolltemplate-mod .sheet-athletic {background: Maroon;color: OldLace;}
.sheet-rolltemplate-mod .sheet-combat {background: black;color: OldLace;}
.sheet-rolltemplate-mod .sheet-concentration {background: SlateGray;color: WhiteSmoke;}
.sheet-rolltemplate-mod .sheet-general {background: MidnightBlue;color: OldLace;}
.sheet-rolltemplate-mod .sheet-influence {background: IndianRed;color: OldLace;}
.sheet-rolltemplate-mod .sheet-mystical {background: purple;color: OldLace;}
.sheet-rolltemplate-mod .sheet-outdoor {background: DarkOliveGreen;color: OldLace;}
.sheet-rolltemplate-mod .sheet-physical {background: SaddleBrown;color: OldLace;}
.sheet-rolltemplate-mod .sheet-subterfuge {background: Grey;color: WhiteSmoke;}
.sheet-rolltemplate-mod .sheet-unmoded {background: Crimson;color: OldLace;}

.sheet-rolltemplate-mod .sheet-partner{font-size: .5em}



.sheet-rolltemplate-mod .div{
    line-height: 18px;    
}

.sheet-rolltemplate-mod .sheet-mod-header{
    padding: 2px;
    margin-top: 5px;
    font-family: 'Merriweather', serif;
    color: black;
    background: OldLace;
    border-style: solid;
    border-color: black;
    text-align: center;
    border-right: 1px;
    border-left: 1px;
    border-top: 1px;
    border-bottom: none;
    border-radius: 2px 2px 0px 0px;
}

.sheet-rolltemplate-mod .sheet-mod-title{
    font-size: 16px;
    line-height: 18px;
}

.sheet-rolltemplate-mod .sheet-subtitle{
    font-size: 14px;
    line-height: 16px;
}

.sheet-rolltemplate-mod .sheet-content{
    text-align: center;
    padding: 2px;
    color: black;
    border-radius: 2px 2px 2px 2px;
    /*border-right: 1px;
    color: black;
    border-left: 1px;
    border-top: none;
    border-bottom: 1px;
    border-style: solid;
    border-color: black;*/
    background: OldLace;
}

.sheet-rolltemplate-mod .sheet-display{
    text-align: center;
    margin-top: 3px;
    margin-bottom: 3px;
    font-family: 'Merriweather', serif;
    font-size: 12px;
    line-height: 16px;
}

.sheet-rolltamplate-mod .sheet-fumble{
    text-align: center;
    margin-top: 3px;
    margin-bottom: 3px;
    font-family: 'Merriweather', serif;
    font-size: 12px;
    line-height: 16px;
    color: Crimson;
}

.sheet-rolltemplate-mod .sheet-display-minor{
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: 'Merriweather', serif;
    font-size: 12px;
    line-height: 16px;
}

.sheet-rolltemplate-mod .inlinerollresult{
    border: none;
    background: OldLace;
    font-family: 'Merriweather', serif;
    font-size: 16px;
    line-height: 20px;
}

.sheet-rolltemplate-mod .inlinerollresult.fullcrit{
    border: none;
    background: OldLace;
    font-family: 'Merriweather', serif;
    font-size: 16px;
    line-height: 20px;
}

.sheet-rolltemplate-mod .inlinerollresult.fullfail{
    border: none;
    background: OldLace;
    font-family: 'Merriweather', serif;
    font-size: 16px;
    line-height: 20px;
}

.sheet-rolltemplate-mod .inlinerollresult.importantroll{
    border: none;
    background: OldLace;
    font-family: 'Merriweather', serif;
    font-size: 16px;
    line-height: 20px;
}

.sheet-rolltemplate-mod .sheet-info-tag{
    font-size: 12px;
    font-family: 'Courier', sans-serif;
}

/* Roll Buttons */
.sheet-rolltemplate-mod a[href^='!'],
.sheet-rolltemplate-mod a[href^='~'],
.sheet-rolltemplate-mod a[href^='`']{
    border-radius: 5px;
    color: black;
    display: inline-block;
    border: 1px solid black;
    background-color: oldlace;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    position: relative;
    top: 0;
    transition: top ease 0.2s;
    padding: 2px 5px;
}
.sheet-rolltemplate-mod a[href^='!']:hover,
.sheet-rolltemplate-mod a[href^='~']:hover,
.sheet-rolltemplate-mod a[href^='`']:hover{
  top: -3px;
}
/* hyperlinks */
.sheet-rolltemplate-mod a:not([href^='~']):not([href^='!']):not([href^='`']){
    font-weight: bold;
    color:#3f8aa6;
}
.sheet-rolltemplate-mod a:not([href^='~']):not([href^='!']):not([href^='`']):hover {
  font-weight: bold;
  color:#70c0dd;
}
.sheet-rolltemplate-mod a:not([href^='~']):not([href^='!']):not([href^='`']):visited{
  color:purple;
}
.sheet-rolltemplate-mod a:not([href^='~']):not([href^='!']):not([href^='`']):visited:hover{
  color:rgb(187, 45, 187);
}


/*genral purpose roll template*/

.sheet-rolltemplate-info .sheet-container {
    padding: 4px;
    border-style: solid;
    border-width: 1px;
    border-color: LightGray;
    /*color: OldLace;*/
    font-family: 'Merriweather', serif;
    border-radius: 2px 2px 2px 2px;
}

.sheet-rolltemplate-info .sheet-artistic {background: DodgerBlue;color: WhiteSmoke;}
.sheet-rolltemplate-info .sheet-athletic {background: Maroon;color: OldLace;}
.sheet-rolltemplate-info .sheet-combat {background: black;color: OldLace;}
.sheet-rolltemplate-info .sheet-concentration {background: SlateGray;color: WhiteSmoke;}
.sheet-rolltemplate-info .sheet-general {background: MidnightBlue;color: OldLace;}
.sheet-rolltemplate-info .sheet-influence {background: IndianRed;color: OldLace;}
.sheet-rolltemplate-info .sheet-mystical {background: purple;color: OldLace;}
.sheet-rolltemplate-info .sheet-outdoor {background: DarkOliveGreen;color: OldLace;}
.sheet-rolltemplate-info .sheet-physical {background: SaddleBrown;color: OldLace;}
.sheet-rolltemplate-info .sheet-subterfuge {background: Grey;color: WhiteSmoke;}

.sheet-rolltemplate-info .sheet-partner{font-size: .5em}



.sheet-rolltemplate-info .div{
    line-height: 18px;    
}

.sheet-rolltemplate-info .sheet-skill-header{
    padding: 2px;
    margin-top: 5px;
    font-family: 'Merriweather', serif;
    color: black;
    background: OldLace;
    border-style: solid;
    border-color: black;
    text-align: center;
    border-right: 1px;
    border-left: 1px;
    border-top: 1px;
    border-bottom: none;
    border-radius: 2px 2px 0px 0px;
}

.sheet-rolltemplate-info .sheet-info-title{
    font-size: 16px;
    line-height: 18px;
}

.sheet-rolltemplate-info .sheet-content{
    text-align: center;
    padding: 2px;
    color: black;
    border-radius: 2px 2px 2px 2px;
    /*border-right: 1px;
    border-left: 1px;
    border-top: none;
    border-bottom: 1px;
    border-style: solid;
    border-color: black;*/
    background: OldLace;
}

.sheet-rolltemplate-info .sheet-subtitle{
    font-size: 14px;
    line-height: 16px;
}

.sheet-rolltemplate-info .sheet-display-minor{
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: 'Merriweather', serif;
    font-size: 12px;
    line-height: 16px;
}

.sheet-rolltemplate-info .sheet-display-props{
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: 'Courier', sans-serif;
    font-size: 12px;
    line-height: 16px;
}


/* this is the template for missile weapon ranges */


.sheet-rolltemplate-range .sheet-container {
    padding: 4px;
    border-style: solid;
    border-width: 1px;
    border-color: LightGray;
    /*color: OldLace;*/
    font-family: 'Merriweather', serif;
    border-radius: 2px 2px 2px 2px;
}

.sheet-rolltemplate-range .sheet-artistic {background: DodgerBlue;color: WhiteSmoke;}
.sheet-rolltemplate-range .sheet-athletic {background: Maroon;color: OldLace;}
.sheet-rolltemplate-range .sheet-combat {background: black;color: OldLace;}
.sheet-rolltemplate-range .sheet-concentration {background: SlateGray;color: WhiteSmoke;}
.sheet-rolltemplate-range .sheet-general {background: MidnightBlue;color: OldLace;}
.sheet-rolltemplate-range .sheet-influence {background: IndianRed;color: OldLace;}
.sheet-rolltemplate-range .sheet-mystical {background: purple;color: OldLace;}
.sheet-rolltemplate-range .sheet-outdoor {background: DarkOliveGreen;color: OldLace;}
.sheet-rolltemplate-range .sheet-physical {background: SaddleBrown;color: OldLace;}
.sheet-rolltemplate-range .sheet-subterfuge {background: Grey;color: WhiteSmoke;}
.sheet-rolltemplate-range .sheet-longbow {background: Sienna; color: Gainsboro;}

.sheet-rolltemplate-range .sheet-partner{font-size: .5em}



.sheet-rolltemplate-range .div{
    line-height: 18px;    
}

.sheet-rolltemplate-range .sheet-skill-header{
    padding: 2px;
    margin-top: 5px;
    font-family: 'Merriweather', serif;
    color: black;
    background: OldLace;
    border-style: solid;
    border-color: black;
    text-align: center;
    border-right: 1px;
    border-left: 1px;
    border-top: 1px;
    border-bottom: none;
    border-radius: 2px 2px 0px 0px;
}

.sheet-rolltemplate-range .sheet-range-title{
    font-size: 16px;
    line-height: 20px;
}

.sheet-rolltemplate-range .sheet-content{
    text-align: center;
    padding: 2px;
    color: black;
    border-radius: 2px 2px 2px 2px;
    /*border-right: 1px;
    border-left: 1px;
    border-top: none;
    border-bottom: 1px;
    border-style: solid;
    border-color: black;*/
    background: OldLace;
}

.sheet-rolltemplate-range .sheet-range-hdr{
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: 'Merriweather', serif;
    font-size: 14px;
    line-height: 20px;
}

.sheet-rolltemplate-range .sheet-range-display{
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: 'courier', sans-serif;
    font-size: 14px;
    line-height: 20px;
}

.sheet-rolltemplate-range .sheet-smoke{
    background-color: smokewhite;
}

.sheet-rolltemplate-range table {
  border: 1px solid;
  border-color: black;
  width: 100%;
}

.sheet-rolltemplate-range td {
  border: 1px solid;
  border-color: LightGray;
}



.charsheet input.sheet-toggle-show {
    -webkit-apperance: none;/*Appearance attribute for webkit browsers, specifically Safari*/
    appearance: none;/*Removes the default checkbox appearance and allows us to style them as any other element*/
    background-repeat: no-repeat;
    background-size: contain;
    height: 12px;
    width: 12px;*/
    padding: 0;
    border:0px solid;
    font-family:pictos;
    z-index:9999;
}

.charsheet input.sheet-toggle-show:focus{
  outline:0px solid;
  outline-offset:0;
} 

.charsheet input.sheet-toggle-show:not(:checked){
  background-image: url(https://raw.githubusercontent.com/imaginosmusic/Assets/AssetsMain/Images/OpenGear.png);
}

.charsheet input.sheet-toggle-show:checked{
  background-image: url(https://raw.githubusercontent.com/imaginosmusic/Assets/AssetsMain/Images/CloseGear.png);
}

.sheet-columns {
  display: flex;
  justify-content: space-between;
  width: 400px;
}
.sheet-columns > * {
  flex: 1;
}

input.sheet-toggle-show:not(:checked) ~ div.sheet-body{
    display: none;
}
/*
.sheet-toggle-show+span{
    display: inline-block;
    margin-left: -25px;
    cursor: pointer;	
    font-family: pictos;
	position: relative;
	vertical-align: top;
}
*/