roll20-character-sheets/Rivers_Of_London/rol.css

.charsheet {
    background-color: aliceblue;
    border: 0px;
    color:black;
    width: 840px;
	margin: 2px;
	line-height: 1.0;
}

.dummy{
	/*incase BOM decides to screw up css */
}

/* 
 * ==== Sheet controls ==== 
 */
 
 
.sheet-select-spacer {
     margin-left: 170px;
 }
 
 
.sheet-select-radio {
    margin: 0px 10px 0px 5px;
    vertical-align: text-bottom;   
}


.sheet-select-label {
    margin: 0px 10px 0px 5px;
    vertical-align: text-bottom;    
}

.sheet-manifestation-cost-section {
   display: block;
   margin: 30px;
   background-color: rgba(180,180,180,0.18);
   padding: 10px;
   border-radius:5px;
   
}

.sheet-total-section {
   margin-top: 10px;
}

.sheet-manifestation-cost-item {
   display: block;
}

.sheet-page-control {
    float: right;
}


#sheet-btn-stats,
#sheet-btn-contacts,
#sheet-btn-equipment
{
	border: 1px solid darkgrey;
	border-radius: 3px;
	color: gray;
	box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3);
}

.charsheet .sheet-page-toggle[value="stats"] ~ #sheet-btn-stats,
.charsheet .sheet-page-toggle[value="contacts"] ~ #sheet-btn-contacts,
.charsheet .sheet-page-toggle[value="equipment"] ~ #sheet-btn-equipment {
    background: white;
    color: black;
    box-shadow: inset 0px 5px 10px 0px rgba(0,0,0,0.3);
}


.sheet-demimonde-only {
	display: none;
}

.sheet-human-magic-only {
	display: none;
}

.sheet-human-only {
    display: none;
}

.charsheet .sheet-demimonde-toggle.not([value="Demi-Monde"]) ~ .sheet-demimonde-only {
    display: none;
}

.charsheet .sheet-demimonde-toggle[value="Demi-Monde"] ~ .sheet-demimonde-only {
    display: inline-block;
}

.charsheet .sheet-demimonde-toggle.not([value="Human-Magic"]) ~ .sheet-human-magic-only {
    display: none;
}
.charsheet .sheet-demimonde-toggle[value="Human-Magic"] ~ .sheet-human-magic-only {
    display: inline-block;
}

.charsheet .sheet-demimonde-toggle.not([value="Human"]) ~ .sheet-human-only {
    display: none;
}

.charsheet .sheet-demimonde-toggle[value="Human"] ~ .sheet-human-only {
    display: inline-block;
}

.sheet-stats-page,
.sheet-contacts-page,
.sheet-equipment-page {
  margin-top: 5px;
  display: none;
}

 /* Not a fan of controlling dynamic visibilty via CSS but it seems to be the way it is done for Roll 20? */
.charsheet .sheet-page-toggle[value="stats"] ~ div.sheet-stats-page,
.charsheet .sheet-page-toggle[value="contacts"] ~ div.sheet-contacts-page,
.charsheet .sheet-page-toggle[value="equipment"] ~ div.sheet-equipment-page {
    display: block;
}

.sheet-lock-icon {
    display: inline-block;
    width: 20px;
    padding-left: 5px;
}


.sheet-text-readonly {
      display: none;
}

.sheet-text-edit,
.sheet-textarea-edit {
    border-color: rgba(0,0,0,0);
    background-color: rgba(255,255,255,0.5); 
    box-shadow: inset 1px 1px 1px lightgrey;	
	display: inline-block;
}

.sheet-textarea-edit {
	border-color: rgba(0,0,0,0);
    box-shadow: inset 1px 1px 1px lightgrey;
    background-image:
	linear-gradient(to right, rgba(255,255,255,0.5) 10px, transparent 10px),
	linear-gradient(to left, rgba(255,255,255,0.5) 10px, transparent 10px),
	repeating-linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5) 30px, #ddd 30px, #ddd 31px, rgba(255,255,255,0.5) 31px);		
}


.charsheet .sheet-lock-state[value="on"] ~ input.sheet-text-readonly,
.charsheet .sheet-lock-state[value="on"] ~ textarea.sheet-text-readonly {
	background-color: transparent;
    border-color: #ddd;
    display: inline-block;
}

.charsheet .sheet-lock-state[value="on"] ~ input.sheet-text-edit,
.charsheet .sheet-lock-state[value="on"] ~ textarea.sheet-text-edit,
.charsheet .sheet-lock-state[value="on"] ~ .sheet-total-section {
    display: none;
}

.charsheet .sheet-lock-state[value="0"] ~ .sheet-total-section {
    display: inline-block;;
}

.charsheet .sheet-lock-state[value="0"] ~ input.sheet-text-edit,
.charsheet .sheet-lock-state[value="0"] ~ textarea.sheet-text-edit {
    border-color: rgba(0,0,0,0);
    background-color: rgba(255,255,255,0.5); 
    box-shadow: inset 1px 1px 1px lightgrey;
    display: inline-block;
}

.charsheet .sheet-lock-state[value="0"] ~ input.sheet-text-readonly,
.charsheet .sheet-lock-state[value="0"] ~ textarea.sheet-text-readonly {
    display: none;
}



.charsheet .sheet-lock-state[value="0"] ~ textarea.sheet-textarea-edit {

    display: inline-block;
    /*
	border-color: rgba(0,0,0,0);
    box-shadow: inset 1px 1px 1px lightgrey;
	background-image:
	linear-gradient(to right, rgba(255,255,255,0.5) 10px, transparent 10px),
	linear-gradient(to left, rgba(255,255,255,0.5) 10px, transparent 10px),
	repeating-linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5) 30px, #ddd 30px, #ddd 31px, rgba(255,255,255,0.5) 31px);	*/
}
.charsheet .sheet-lock-state[value="on"] ~ textarea.sheet-textarea-edit {

    display: none;
    /*
	border-color: rgba(0,0,0,0);
    box-shadow: inset 1px 1px 1px lightgrey;
	background-image:
	linear-gradient(to right, rgba(255,255,255,0.5) 10px, transparent 10px),
	linear-gradient(to left, rgba(255,255,255,0.5) 10px, transparent 10px),
	repeating-linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5) 30px, #ddd 30px, #ddd 31px, rgba(255,255,255,0.5) 31px);	*/
}


.charsheet .sheet-lock-state ~ input[type="checkbox"] + span { 
    box-shadow: inset 1px 1px 1px lightgrey;
    background-color: rgba(255,255,255,0.5);  
}

.charsheet .sheet-lock-state[value="0"] ~ input[type="checkbox"] + span {    
    box-shadow: inset 1px 1px 1px lightgrey;
    background-color: rgba(255,255,255,0.5);  
}
.charsheet .sheet-lock-state[value="on"] ~ input[type="checkbox"] + span {    
    box-shadow: none;
    background-color: transparent;  
}

.charsheet .sheet-lock-state[value="on"] ~ input[type="checkbox"] {    
    display: none;
}

.charsheet .sheet-text-always-edit {
    border-color: rgba(0,0,0,0);
    box-shadow: inset 1px 1px 1px lightgrey;
    background-color: rgba(255,255,255,0.5);  
    display: inline-block;    
}



.sheet-section-unlocked {
    display: inline-block;
}

.sheet-section-locked {
  display: none;
}

.charsheet .sheet-lock-state[value="on"] ~ div.sheet-section-locked {
    display: inline-block;
}
.charsheet .sheet-lock-state[value="on"] ~ div.sheet-section-unlocked {
    display: none;
}

.charsheet .sheet-lock-state[value="0"] ~ div.sheet-section-unlocked {
    display: inline-block;
}

.charsheet .sheet-lock-state[value="0"] ~ div.sheet-section-locked {
    display: none;
}
/* 
 * ==== Sheet layout ==== 
 */
 
.charsheet .sheet-grid-section-stats{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows:  1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:  "bio bio stats stats sup sup"
                        "bio bio stats stats health health"
                        "common common expert expert advantages advantages"
                        "common common expert expert advantages advantages"
                        "common common expert expert combat combat"
                        "weapons weapons weapons weapons weapons weapons"
                      ;
  grid-gap: 2px;
}



.charsheet div.sheet-block{
  display: grid;
  padding: 0px;
  border: 1px solid lightsteelblue;
}

.charsheet div.sheet-bio{
  grid-area: bio;
}

.charsheet div.sheet-stats{
  grid-area: stats;
}

.charsheet div.sheet-sup{
  grid-area: sup;
}

.charsheet div.sheet-notes{
  grid-area: notes;
}

.charsheet div.sheet-advantages{
  grid-area: advantages;
}

.charsheet div.sheet-disadvantages{
  grid-area: disadvantages;
}

.charsheet div.sheet-common{
  grid-area: common;
}

.charsheet div.sheet-expert{
  grid-area: expert;
}

.charsheet div.sheet-combat{
  grid-area: combat;
}

.charsheet div.sheet-health{
  grid-area: health;
}

.charsheet div.sheet-weapons{
  grid-area: weapons;
}

.charsheet div.sheet-magic{
  grid-area: magic;
}


.charsheet .sheet-grid-section-magic {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows:  1fr 2fr;
  grid-template-areas:  "contacts contacts contacts contacts contacts contacts"
                        "magic magic magic magic magic magic"
                      ;
  grid-gap: 2px;
}

.charsheet div.sheet-contacts{
  grid-area: contacts;
}


.charsheet div.sheet-magic{
  grid-area: magic;
}


.charsheet .sheet-grid-section-equipment {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows:  2fr 2fr;
  grid-template-areas:  "equipment equipment equipment notes notes notes"
                        "equipment equipment equipment notes notes notes"
                      ;
  grid-gap: 2px;
}

.charsheet div.sheet-equipment{
  grid-area: equipment;
}


.charsheet div.sheet-notes{
  grid-area: notes;
}


/*
 * ==== Sheet header ===== 
 */
.sheet-game-name {
    font-size: 20px;
    font-style: oblique;
    font-weight: bold;
    margin: 0px 10px 2px 10px;
    color: darkblue;
    vertical-align: text-bottom;
    text-shadow: -6px 7px 10px rgb(7 90 240 / 50%), 20px 20px 20px rgb(18 85 224 / 40%), 30px 30px 30px rgb(0 0 0 / 10%);
}

.sheet-version {
    color: lightgrey;
    margin: 0px 5px 2px 5px;
    vertical-align: text-bottom;
}

.sheet-demimonde-control {
    margin: 10px 5px 5px 10px;
    width: 250px;
    padding: 5px;
    border-radius: 5px;
    background-color: #80808006;
}

.sheet-damage-dscription {
    margin: 0px 5px 0px 5px;
}

/* 
 *==== General section stuff  ==== 
 */

h4.sheet-section-head {
   color: white;
   background-color: midnightblue;
   padding-left: 2px;
   padding-right: 2px;
   margin: 0px 0px 5px 0px;
   text-align: left;
   vertical-align: top;
   font-weight: normal;
   font-style: normal;
   height: 1.5em;
}

h3.sheet-subsection-head {
    color: darkblue;
    font-size: 14px;
    margin: 5px;
}

div.sheet-section-row {
    vertical-align: top;
}

div.sheet-section-spacer {
	height: 1.5em;
}

label.sheet-label {
   display: inline-block;
   vertical-align: top;
   padding-top: 6px;
   margin: 0px 5px 0px 5px;
   font-size: 1em;
}

label.sheet-label-underline {
   display: inline-block;
   vertical-align: top;
   padding-top: 6px;
   margin: 0px 5px 0px 5px;
   font-size: 1em;
   margin-right: 10px;
   padding-left: 4px;
   border-bottom: 1px solid;
   border-color: #ddd;
   border-radius: 3px;
}

label.sheet-label-short-width {
   width: 50px;
}

label.sheet-label-medium-width {
   width: 80px;
}

label.sheet-label-long-width {
   width: 100px;
}

label.sheet-label-icon {
	font-size: 1.5em;
	width: 1.5em;
	margin: 0 0 0 5px;
	padding: 0 0 0 0px;
}

label.sheet-label-icon-padded {
	font-size: 1.5em;
	width: 1.5em;
	margin: 0 0 0 5px;
	padding: 0 0 0 20px;
}

label.sheet-label-right {
    text-align: right;    
}

.sheet-contacts-div {
    margin-left: 5px;
}

.sheet-spells-div {
    margin-left: 5px;
}

/* 
 * Text hints
 * TODO - need a better way to do the hint stuff 
 */
.sheet-hint {
    font-size: 0.5em;
    font-style: italic;
    vertical-align: top;
    display: inline-block;
    text-align: right;
}
.sheet-hint-short-width {
    width: 70px;
}

.sheet-hint-medium-width {
    width: 100px;
}

.sheet-hint-long-width {
    width: 120px;
}

.sheet-hint-xlong-label {
    width: 130px;
}

.sheet-hint-full {
    width: 45px;
}

.sheet-hint-half {
    width: 55px;
}

.sheet-hint-starting {
    width: 45px;
}

.sheet-hint-current {
    width: 55px;
}

.sheet-hint-weapon-name {
    width: 290px;
}

.sheet-hint-weapon-damage {
    width: 40px;
}

.sheet-hint-weapon-range {
    width: 47px;
}

.sheet-hint-armour-regular {
    width: 45px;  
}

.sheet-hint-armour-balistic {
    width: 60px;  
}

input.sheet-magic-mastery {
    width: 25px;
    margin-left: 5px;
}

.sheet-hint-mastery {
    width 25px;    
}

.sheet-hint-order {
    width: 40px;   
}

.sheet-hint-magic-name {
    width: 335px;   
}

.sheet-magic-skill {
    margin: 0px 2px 0px 5px;
    padding: 5px;
    background-color: #80808006;
    border-radius: 5px;
}

/*
 * ==== General Inputs ==== 
 */


input[type="text"] {
  /*background-color: transparent; */
  border-style: none none solid none;
  /*border-color: #ddd; */
  padding: 2px 4px 2px 4px;
  margin: 2px 0px 2px 0px;   
}

input[type="number"] {
  /*background-color: transparent;*/
  border-style: none none solid none;
  border-color: #ddd;
  width: 3.5em;
}



input.sheet-text-long {
	width:380px;
	/*vertical-align: text-top;*/
}


input.sheet-text-short {
	width:170px;
	/*vertical-align: text-top;*/
}

input.sheet-weapon-name {
    margin-left: 5px;
    width: 290px;
}

input.sheet-weapon-damage {
    margin-left: 5px;
    width: 30px;
}

input.sheet-weapon-range {
    margin-left: 5px;
    width: 40px;
}

input.sheet-armour-regular {
    width: 3.5em;
}

input.sheet-armour-balistic {
    width: 3.5em;
    margin-left: 10px;
}

input.sheet-contact-details {
    margin-left: 5px;
    width: 370px;
}


input[type="number"].sheet-magic-order {
    width: 30px !important;
}


input.sheet-magic-name {
    width: 330px;
}

select {
  background-color: transparent;
  border-style: none none solid none;
  border-color: grey;
  width: 10em;  
}

select.sheet-dropdown-edit {
    border-color: rgba(0,0,0,0);
    box-shadow: inset 1px 1px 1px lightgrey;
    background-color: rgba(255,255,255,0.5);  
    margin-top: 2px;
}

input.sheet-dropdown-value {
    width: 10em;    
    padding: 5px 5px 5px 8px;
    box-shadow: inset 1px 1px 1px lightgrey;
}

textarea {
    background-color: transparent;
    margin: 0 0 0 0;
	resize: none;
	background-attachment: local;
    background-image:
	linear-gradient(to right, aliceblue 10px, transparent 10px),
	linear-gradient(to left, aliceblue 10px, transparent 10px),
	repeating-linear-gradient(aliceblue, aliceblue 30px, #ccc 30px, #ccc 31px, aliceblue 31px);
    line-height: 31px;
	border: 0px;
	padding: 1px 1px 1px 1px;
}

input[readonly] {
  background-color: transparent;
}

input[type="checkbox"].sheet-checkbox {
  border-style: solid black;
  border-radius: 0px;
}

input[type="checkbox"].sheet-health-mental  {
    position: absolute;
    opacity: 0;
    width: 25px;
    height: 25px;
    cursor: pointer;
    z-index: 1;
}

.sheet-contacts input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
    z-index: 1;
    margin-top: 4px;
}

.sheet-spells input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
    z-index: 1;
    margin-top: 4px;
}

.sheet-expert input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
    z-index: 1;
    margin-top: 4px;
}

input[type="checkbox"].sheet-health-mental  + span {
    padding: 4px;
	vertical-align: text-top;
	width: 12px;
    text-align: center;
	font-weight: bold;
	background-color: rgba(255,255,255,0.5);
	box-shadow: inset 1px 1px 1px lightgrey;
	font-size: 15px;	
}

.sheet-contacts input[type="checkbox"] + span {
    padding: 1px;
	vertical-align: text-top;
	width: 12px;
    display: inline-block;
    text-align: center;
}

.sheet-spells input[type="checkbox"] + span {
    padding: 1px;
	vertical-align: text-top;
	width: 12px;
    display: inline-block;
    text-align: center;
}

.sheet-expert input[type="checkbox"] + span {
    padding: 1px;
	vertical-align: text-top;
	width: 12px;
    display: inline-block;
    text-align: center;
}

/* Contacts checkbox icons */
.sheet-health input[type="checkbox"] + span::before {
    font-family: 'fontello';
    content: '';
} 

.sheet-health input[type="checkbox"]:checked + span::before {
    font-family: 'fontello';
    content: '';
}

/* Contacts checkbox icons */
.sheet-contacts input[type="checkbox"] + span::before {
    font-family: 'pictos';
    content: 'k';
    /*width: 15px;*/
} 

.sheet-contacts input[type="checkbox"]:checked + span::before {
    font-family: 'pictos';
    content: '*';
     /*width: 15px;*/
}


/* spell checkbox icons */
.sheet-spells input[type="checkbox"] + span::before {
	/*font-family: 'pictos';*/
    content: ' ';
	display: inline-block;
	font-weight: Bold;
    /*width: 15px;*/
} 

.sheet-spells input[type="checkbox"]:checked + span::before {
	font-family: 'pictos';
    content: '3';
     /*width: 15px;*/
	font-weight: Bold;
}

/* magic checkbox icons */
.sheet-expert input[type="checkbox"] + span::before {
    font-family: 'pictos';
    content: '*';
} 

.sheet-expert input[type="checkbox"]:checked + span::before {
    font-family: 'pictos';
    content: '3';
}


.sheet-heart-icon::before {
    font-family: 'pictos';
    content: 'k';
	color: red;
}

.sheet-head-icon::before {
    font-family: 'pictos';
    content: 'U';
	color: blue;
}


input[type="checkbox"].sheet-lock-state {
    position: absolute;
    opacity: 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
    z-index: 1;
    margin-top: 6px;  
}

/* Lock checkbox icons */
input[type="checkbox"].sheet-lock-state {
    display: inline-block;
}

input[type="checkbox"].sheet-lock-state  + span::before {
    font-family: 'pictos';
    content: ')';
     /*width: 15px;*/
    font-size: 15px;
}

input[type="checkbox"].sheet-lock-state:checked + span::before {
    font-family: 'pictos';
    content: '(';
     /*width: 15px;*/
    font-size: 15px;
}

/* 
 * ==== 'roll' buttons ====
 */

button#sheet-damage-strength:before {
    font-family: 'pictos custom';
    content: 't';
}

button#sheet-damage-dexterity:before {
    font-family: 'pictos custom';
    content: 't';
}

input#sheet-checkbox-demimode {
    vertical-align: bottom;
    margin: 2px;
}


/*
 * ==== Specific Inputs ==== 
 */
 
 
input.sheet-adv-input {
    width: 95%;
    margin-top: 3px;
    margin-left: 5px;
	font-weight: bold;
}

input.sheet-expert-skill {
    width: 115px;
    font-weight: bold;
    margin-left: 5px;
    margin-right: 10px;
}

textarea.sheet-textarea-residence {
    /*background-color: transparent;*/
    line-height: 1.3em;

    width:160px;
    height: 4.5em;
    background-image: none;
    /*border-bottom: 1px solid black;*/
    
    padding: 2px 4px 2px 4px;
    margin: 2px 5px 2px 0px; 
}

textarea.sheet-damage-description  {
	border-style: none;
	background-color: transparent;
	height: 40px;
	line-height: 20px;
	font-size: 12px;
	background-image: none;
	margin-left: 2px;
	width: 98%;
} 

textarea.sheet-minor-effect {
	height: 220px;
	margin-left: 5px;
}
textarea.sheet-major-effect {
	height: 220px;
	margin-right: 5px;
}

input.sheet-affinity-input {
	width: 260px;
}

input.sheet-luckrefresh-input {
	width: 260px;
}

input.sheet-vestigia-input {
	width: 693px;
}
 
textarea.sheet-affinity  {
    border: 1px solid #ededed;
    margin-left: 5px;
    padding-left: 10px;
    padding-right: 10px;
	width: 97%;
	height: 17em;
} 
 
textarea.sheet-signare {
    border: 1px solid #ededed;
    margin-left: 5px;
    padding-left: 10px;
    padding-right: 10px;
	width: 95%;
	height: 5em; 
}

textarea.sheet-spellnotes {
    border: 1px solid #ededed;
    margin-left: 5px;
    padding-left: 10px;
    padding-right: 10px;
	width: 95%;
	height: 10em; 
}

textarea.sheet-contactnotes {
    border: 1px solid #ededed;
    margin-left: 5px;
    padding-left: 10px;
    padding-right: 10px;
	width: 95%;
	height: 5em; 
}

textarea.sheet-deminotes {
    border: 1px solid #ededed;
    margin-left: 5px;
    padding-left: 10px;
    padding-right: 10px;
	width: 95%;
	height: 10em; 
}

textarea.sheet-abilitynotes {
    border: 1px solid #ededed;
    margin-left: 5px;
    padding-left: 10px;
    padding-right: 10px;
	width: 95%;
	height: 25em; 
}

textarea.sheet-equipment  {
    border: 1px solid #ededed;
    margin-left: 5px;
    padding-left: 10px;
    padding-right: 10px;
	width: 93%;
	height: 36em;
} 
 
textarea.sheet-notes {
    border: 1px solid #ededed;
    margin-left: 5px;
    padding-left: 10px;
    padding-right: 10px;
	width: 93%;
	height: 36em; 
}

input[type="text"].sheet-damage-status  {
	background-color: transparent;
    color: red;
	border-style: none;
} 

/*  ==== stuff for roll templates ==== */

.sheet-rolltemplate-rol .sheet-template-charname {
	padding: 5px;
	font-style: italic;
	font-weight: bold;
}


.sheet-rolltemplate-rol div.sheet-template-container {
	border: 2px solid #000 !important;
	border-radius: 3px 3px 3px 3px;
}

.sheet-rolltemplate-rol .sheet-template-rollname-skill {
	background-color: darkblue;
	color: white;
	padding: 2px;
	border-bottom: 1px solid black;
	line-height: 1.6em;
	font-size: 1.2em;
	font-weight: bold;
}

.sheet-rolltemplate-rol .sheet-template-rollname-damage {
	background-color: darkred;
	color: white;
	padding: 2px;
	border-bottom: 1px solid black;
	line-height: 1.6em;
	font-size: 1.2em;
	font-weight: bold;
	font-weight: bold;
}

.sheet-rolltemplate-rol .sheet-template-details {
    background-color: lightgrey;
	padding: 5px;
	border-bottom: 1px solid black;
	font-weight: bold;
}

.sheet-rolltemplate-rol .sheet-template-status {
    background-color: lightgrey;
	padding: 5px;
	border-bottom: 1px solid black;
	font-style: italic;
}

.sheet-rolltemplate-rol .sheet-template-result {
    background-color: white;
	padding: 5px;
	border-bottom: 1px solid black;
	font-weight: bold;
}

.sheet-rolltemplate-rol .inlinerollresult  {
	display: inline-block;
	min-width: 1.5em;
	text-align: center;
	border: 0px;
	background-color: rgba(0, 0, 0,0);
}

.sheet-rolltemplate-rol .sheet-template-critical {
    color: purple;
}

.sheet-rolltemplate-rol .sheet-template-hard {
    color: green;
}

.sheet-rolltemplate-rol .sheet-template-success {
    color: green;
}

.sheet-rolltemplate-rol .sheet-template-fail {
    color: black;
}

.sheet-rolltemplate-rol .sheet-template-fumble {
    color: red;
}