Files
2022-08-04 18:26:34 -06:00

1029 lines
22 KiB
CSS

@import url('https://fonts.googleapis.com/css?family=Metamorphous&display=swap');
/*this hides the radio button for each tab, makes it 100px wide and 40px tall and makes sure it's above everything else*/
.charsheet{
background: white;
}
.charsheet input.sheet-tab {
width: 23px;
height: 23x;
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: 14px;
/*--background: #4e4e4e;*/
color: black;
font-style: normal;
border-radius: 16px;
line-height: 25px;
width: 23px;
height: 23px;
cursor: pointer;
position: relative;
vertical-align: middle;
margin-left: -25px;/*originally 91px*/
}
.charsheet span.sheet-tab-u {
background: WhiteSmoke;
color: LightGray;
}
.charsheet span.sheet-tab-d {
background: LightGray;
color: white;
}
.charsheet span.sheet-tab {
text-align: center;
display: inline-block;
/*--background: #4e4e4e;*/
}
/*this modifies the span color once the radio button is selected so you know which tab is selected*/
.charsheet input.sheet-hp-tab0:checked + span.sheet-hp-tab0,
.charsheet input.sheet-hp-tab1:checked + span.sheet-hp-tab1,
.charsheet input.sheet-hp-tab2:checked + span.sheet-hp-tab2,
.charsheet input.sheet-hp-tab3:checked + span.sheet-hp-tab3,
.charsheet input.sheet-hp-tab4:checked + span.sheet-hp-tab4,
.charsheet input.sheet-hp-tab5:checked + span.sheet-hp-tab5,
.charsheet input.sheet-hp-tab6:checked + span.sheet-hp-tab6,
.charsheet input.sheet-hp-tab7:checked + span.sheet-hp-tab7,
.charsheet input.sheet-hp-tab8:checked + span.sheet-hp-tab8,
.charsheet input.sheet-hp-tab9:checked + span.sheet-hp-tab9,
.charsheet input.sheet-hp-tab10:checked + span.sheet-hp-tab10,
.charsheet input.sheet-hp-tab11:checked + span.sheet-hp-tab11,
.charsheet input.sheet-hp-tab12:checked + span.sheet-hp-tab12,
.charsheet input.sheet-hp-tab13:checked + span.sheet-hp-tab13,
.charsheet input.sheet-hp-tab14:checked + span.sheet-hp-tab14,
.charsheet input.sheet-hp-tab15:checked + span.sheet-hp-tab15,
.charsheet input.sheet-hp-tab16:checked + span.sheet-hp-tab16,
.charsheet input.sheet-hp-tab17:checked + span.sheet-hp-tab17,
.charsheet input.sheet-hp-tab18:checked + span.sheet-hp-tab18,
.charsheet input.sheet-hp-tab19:checked + span.sheet-hp-tab19,
.charsheet input.sheet-hp-tab20:checked + span.sheet-hp-tab20,
.charsheet input.sheet-hp-tab21:checked + span.sheet-hp-tab21,
.charsheet input.sheet-hp-tab22:checked + span.sheet-hp-tab22,
.charsheet input.sheet-hp-tab23:checked + span.sheet-hp-tab23,
.charsheet input.sheet-hp-tab24:checked + span.sheet-hp-tab24,
.charsheet input.sheet-hp-tab25:checked + span.sheet-hp-tab25,
.charsheet input.sheet-hp-tab26:checked + span.sheet-hp-tab26,
.charsheet input.sheet-hp-tab27:checked + span.sheet-hp-tab27,
.charsheet input.sheet-hp-tab28:checked + span.sheet-hp-tab28,
.charsheet input.sheet-hp-tab29:checked + span.sheet-hp-tab29,
.charsheet input.sheet-hp-tab30:checked + span.sheet-hp-tab30,
.charsheet input.sheet-hp-tab31:checked + span.sheet-hp-tab31,
.charsheet input.sheet-hp-tab32:checked + span.sheet-hp-tab32,
.charsheet input.sheet-hp-tab33:checked + span.sheet-hp-tab33,
.charsheet input.sheet-hp-tab34:checked + span.sheet-hp-tab34,
.charsheet input.sheet-hp-tab35:checked + span.sheet-hp-tab35,
.charsheet input.sheet-hp-tab36:checked + span.sheet-hp-tab36,
.charsheet input.sheet-hp-tab37:checked + span.sheet-hp-tab37,
.charsheet input.sheet-hp-tab38:checked + span.sheet-hp-tab38,
.charsheet input.sheet-hp-tab39:checked + span.sheet-hp-tab39,
.charsheet input.sheet-hp-tab40:checked + span.sheet-hp-tab40,
.charsheet input.sheet-hp-tab41:checked + span.sheet-hp-tab41,
.charsheet input.sheet-hp-tab42:checked + span.sheet-hp-tab42,
.charsheet input.sheet-hp-tab43:checked + span.sheet-hp-tab43,
.charsheet input.sheet-hp-tab44:checked + span.sheet-hp-tab44,
.charsheet input.sheet-hp-tab45:checked + span.sheet-hp-tab45,
.charsheet input.sheet-hp-tab46:checked + span.sheet-hp-tab46,
.charsheet input.sheet-hp-tab47:checked + span.sheet-hp-tab47,
.charsheet input.sheet-hp-tab48:checked + span.sheet-hp-tab48,
.charsheet input.sheet-hp-tab49:checked + span.sheet-hp-tab49,
.charsheet input.sheet-mp-tab0:checked + span.sheet-mp-tab0,
.charsheet input.sheet-mp-tab1:checked + span.sheet-mp-tab1,
.charsheet input.sheet-mp-tab2:checked + span.sheet-mp-tab2,
.charsheet input.sheet-mp-tab3:checked + span.sheet-mp-tab3,
.charsheet input.sheet-mp-tab4:checked + span.sheet-mp-tab4,
.charsheet input.sheet-mp-tab5:checked + span.sheet-mp-tab5,
.charsheet input.sheet-mp-tab6:checked + span.sheet-mp-tab6,
.charsheet input.sheet-mp-tab7:checked + span.sheet-mp-tab7,
.charsheet input.sheet-mp-tab8:checked + span.sheet-mp-tab8,
.charsheet input.sheet-mp-tab9:checked + span.sheet-mp-tab9,
.charsheet input.sheet-mp-tab10:checked + span.sheet-mp-tab10,
.charsheet input.sheet-mp-tab11:checked + span.sheet-mp-tab11,
.charsheet input.sheet-mp-tab12:checked + span.sheet-mp-tab12,
.charsheet input.sheet-mp-tab13:checked + span.sheet-mp-tab13,
.charsheet input.sheet-mp-tab14:checked + span.sheet-mp-tab14,
.charsheet input.sheet-mp-tab15:checked + span.sheet-mp-tab15,
.charsheet input.sheet-mp-tab16:checked + span.sheet-mp-tab16,
.charsheet input.sheet-mp-tab17:checked + span.sheet-mp-tab17,
.charsheet input.sheet-mp-tab18:checked + span.sheet-mp-tab18,
.charsheet input.sheet-mp-tab19:checked + span.sheet-mp-tab19,
.charsheet input.sheet-mp-tab20:checked + span.sheet-mp-tab20,
.charsheet input.sheet-mp-tab21:checked + span.sheet-mp-tab21,
.charsheet input.sheet-mp-tab22:checked + span.sheet-mp-tab22,
.charsheet input.sheet-mp-tab23:checked + span.sheet-mp-tab23,
.charsheet input.sheet-mp-tab24:checked + span.sheet-mp-tab24,
.charsheet input.sheet-mp-tab25:checked + span.sheet-mp-tab25,
.charsheet input.sheet-mp-tab26:checked + span.sheet-mp-tab26,
.charsheet input.sheet-mp-tab27:checked + span.sheet-mp-tab27,
.charsheet input.sheet-mp-tab28:checked + span.sheet-mp-tab28,
.charsheet input.sheet-mp-tab29:checked + span.sheet-mp-tab29,
.charsheet input.sheet-mp-tab30:checked + span.sheet-mp-tab30,
.charsheet input.sheet-mp-tab31:checked + span.sheet-mp-tab31,
.charsheet input.sheet-mp-tab32:checked + span.sheet-mp-tab32,
.charsheet input.sheet-mp-tab33:checked + span.sheet-mp-tab33,
.charsheet input.sheet-mp-tab34:checked + span.sheet-mp-tab34,
.charsheet input.sheet-mp-tab35:checked + span.sheet-mp-tab35,
.charsheet input.sheet-mp-tab36:checked + span.sheet-mp-tab36,
.charsheet input.sheet-mp-tab37:checked + span.sheet-mp-tab37,
.charsheet input.sheet-mp-tab38:checked + span.sheet-mp-tab38,
.charsheet input.sheet-mp-tab39:checked + span.sheet-mp-tab39,
.charsheet input.sheet-mp-tab40:checked + span.sheet-mp-tab40,
.charsheet input.sheet-mp-tab41:checked + span.sheet-mp-tab41,
.charsheet input.sheet-mp-tab42:checked + span.sheet-mp-tab42,
.charsheet input.sheet-mp-tab43:checked + span.sheet-mp-tab43,
.charsheet input.sheet-mp-tab44:checked + span.sheet-mp-tab44,
.charsheet input.sheet-mp-tab45:checked + span.sheet-mp-tab45,
.charsheet input.sheet-mp-tab46:checked + span.sheet-mp-tab46,
.charsheet input.sheet-mp-tab47:checked + span.sheet-mp-tab47,
.charsheet input.sheet-mp-tab48:checked + span.sheet-mp-tab48,
.charsheet input.sheet-mp-tab49:checked + span.sheet-mp-tab49,
{
/*background: white;*/
color: black;
/*font-family: 'Yatra One', cursive;*/
font-size: 14px;
/*font-style: italic;*/
font-weight: bold;
border-style: solid;
border-color: black;
border-width: 1px;
border-radius: 16px;
}
.sheet-main {
display: grid;
width: 800px;
/*height: 900px;*/
grid-gap: 4px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 60px 330px 183px 183px 243px 310px 175px .25fr .5fr;
grid-template-areas:"header header header header header-rigt header-right header-right header-right"
"personal personal personal personal characteristics characteristics characteristics characteristics"
"skill skill skill skill skill hp hp hp"
"skill skill skill skill skill power power power"
"skill skill skill skill skill armor armor armor"
"weap weap weap weap weap weap weap weap"
"spell spell spell spell spell alleg alleg alleg"
"note note note note note equip equip equip"
"aff aff aff aff aff aff aff aff ";
}
.sheet-character {
display: grid;
width: 100%;
grid-gap: 2px;
grid-template-columns: 20% 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-areas: "namelbl nameinp nameinp nameinp nameinp nameinp nameinp nameinp"
"speclbl specinp specinp agelbl ageinp gendlbl gendinp gendinp"
"brthlbl brthinp brthinp brthinp brthinp brthinp brthinp brthinp"
"famllbl famlinp famlinp famlinp famlinp famlinp famlinp famlinp"
"occplbl occpinp occpinp occpinp occpinp occpinp occpinp occpinp"
"lattlbl lattinp lattinp lattinp lattinp lattinp lattinp lattinp";
}
.sheet-characteristics-scores {
display: grid;
width: 100%;
grid-gap: 2px;
grid-template-columns: 1fr 20% 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas: "strlbl strval efflbl effval"
"conlbl conval stalbl staval"
"sizlbl sizval emplbl empval"
"intlbl intval idalbl idaval"
"powlbl powval luklbl lukval"
"dexlbl dexval agilbl agival"
"applbl appval chalbl chaval";
}
.sheet-allegiance{
display: grid;
width: 100%;
grid-gap: 2px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "lgtlbl ballbl shdlbl"
"lgtval balval shdval";
}
.sheet-two-column{
display: grid;
width: 100%;
grid-gap: 2px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: "colleft colright";
}
.sheet-two-column-skill{
display: grid;
width: 100%;
grid-gap: 2px;
grid-template-columns: 1fr 75px;
grid-template-rows: 1fr;
grid-template-areas: "colleftsk colrightsk";
}
.sheet-weapon{
display: grid;
width: 100%;
grid-gap: 2px;
grid-template-columns: 5% 20% 12% 8% 8% .75fr .75fr 8% 1fr 1fr .75fr;
grid-template-rows: 21px;
grid-template-areas: "wpnact wpnname wpnskill wpnbase wpnperc wpndmg wpndb wpnhnd wpnhp wpnlen wpnpary";
}
/*----------------- GENERAL CSS ------------------*/
.sheet-page-title{
font-size: 42px;
font-family: 'Metamorphous', cursive;
font-weight: bold;
color: SlateGrey;
}
.sheet-section-title{
font-size: 20px;
font-family: 'Metamorphous', cursive;
/*font-family: 'Inknut Antiqua', serif;*/
}
.sheet-section-subtitle{
font-size: 12px;
font-family: 'Metamorphous', cursive;
/*font-family: 'Inknut Antiqua', serif;*/
}
.sheet-section-subhead{
font-weight: normal;
font-size: 12px;
font-family: 'Metamorphous', cursive;
/*font-family: 'Inknut Antiqua', serif;*/
}
.sheet-section {
padding: 2px;
border-style: solid;
border-color: LightGray;
border-width: 1px;
border-radius: 5px 5px 5px 5px;
}
.sheet-flex-col {
display: flex;
flex-flow: row wrap;
/*justify-content: flex-start;*/
}
.sheet-flex-center {
align-items: center;
justify-content: center;
}
/*------------- Section-specific CSS -------------*/
.sheet-header {
grid-area: header;
flex-direction: column;
}
.sheet-header-right {
grid-area: header-right;
text-align: right;
flex-direction: column;
}
.sheet-personal {
grid-area: personal;
}
.sheet-characteristics {
grid-area: characteristics;
}
.sheet-power {
grid-area: power;
}
.sheet-skill {
grid-area: skill;
}
.sheet-hp {
grid-area: hp;
}
.sheet-alleg {
grid-area: alleg;
}
.sheet-spell {
grid-area: spell;
}
.sheet-weap {
grid-area: weap;
}
.sheet-armor {
grid-area: armor;
}
.sheet-note {
grid-area: note;
}
.sheet-equip {
grid-area: equip;
}
.sheet-aff {
grid-area: aff;
}
/*-----Character css grid--------------*/
.sheet-namelbl{
grid-area: namelbl;
}
.sheet-nameinp{
grid-area: nameinp;
}
.sheet-speclbl{
grid-area: speclbl;
}
.sheet-specinp{
grid-area: specinp;
}
.sheet-agelbl{
grid-area: agelbl;
}
.sheet-ageinp{
grid-area: ageinp;
}
.sheet-gendlbl{
grid-area: gendlbl;
}
.sheet-gendinp{
grid-area: gendinp;
}
.sheet-brthlbl{
grid-area: brthlbl;
}
.sheet-brthinp{
grid-area: brthinp;
}
.sheet-famllbl{
grid-area: famllbl;
}
.sheet-famlinp{
grid-area: famlinp;
}
.sheet-occplbl{
grid-area: occplbl;
}
.sheet-occpinp{
grid-area: occpinp;
}
.sheet-lattlbl{
grid-area: lattlbl;
}
.sheet-lattinp{
grid-area: lattinp;
}
/*---------------- characteristics grid ------------*/
.sheet-strlbl{
grid-area: strlbl;
}
.sheet-strval{
grid-area: strval;
}
.sheet-conlbl{
grid-area: conlbl;
}
.sheet-conval{
grid-area: conval;
}
.sheet-sizlbl{
grid-area: sizlbl;
}
.sheet-sizval{
grid-area: sizval;
}
.sheet-intlbl{
grid-area: intlbl;
}
.sheet-intval{
grid-area: intval;
}
.sheet-powlbl{
grid-area: powlbl;
}
.sheet-powval{
grid-area: powval;
}
.sheet-dexlbl{
grid-area: dexlbl;
}
.sheet-dexval{
grid-area: dexval;
}
.sheet-applbl{
grid-area: applbl;
}
.sheet-appval{
grid-area: appval;
}
.sheet-efflbl{
grid-area: efflbl;
}
.sheet-effval{
grid-area: effval;
}
.sheet-stalbl{
grid-area: stalbl;
}
.sheet-staval{
grid-area: staval;
}
.sheet-idalbl{
grid-area: idalbl;
}
.sheet-idaval{
grid-area: idaval;
}
.sheet-luklbl{
grid-area: luklbl;
}
.sheet-lukval{
grid-area: lukval;
}
.sheet-agilbl{
grid-area: agilbl;
}
.sheet-agival{
grid-area: agival;
}
.sheet-chalbl{
grid-area: chalbl;
}
.sheet-chaval{
grid-area: chaval;
}
/*------ Allegiance styles -----*/
.sheet-lgtlbl{
grid-area: lgtlbl;
}
.sheet-lgtval{
grid-area: lgtval;
}
.sheet-ballbl{
grid-area: ballbl;
}
.sheet-balval{
grid-area: balval;
}
.sheet-shdlbl{
grid-area: shdlbl;
}
.sheet-shdval{
grid-area: shdval;
}
/*-------- two column parent ------------------*/
.sheet-colleft{
grid-area: colleft:
}
.sheet-colleft{
grid-area: colright:
}
/*-------- two column child ------------------*/
.sheet-colleft-skill{
grid-area: colleftsk:
font-weight: normal;
}
.sheet-colleft-skill{
grid-area: colrightsk:
}
/*------------weapons table*/
.sheet-wpnname{
grid-area: wpnname;
}
.sheet-wpnskill{
grid-area: wpnskill;
vertical-align: bottom;
}
.sheet-wpnperc{
grid-area: wpnperc;
}
.sheet-wpndmg{
grid-area: wpndmg;
}
.sheet-wpnhp{
grid-area: wpnhp;
}
.sheet-wpndb{
grid-area: wpndb;
}
.sheet-wpnlen{
grid-area: wpnlen;
}
.sheet-wpnpary{
grid-area: wpnpary;
}
/*-------------control styles-----------------------*/
span.sheet-small{
font-size: 10px;
}
div.sheet-small{
font-size: 10px;
}
div.sheet-normal{
font-weight: normal;
}
div.sheet-skills{
font-size: 13px;
}
input.sheet-text-full{
width: 100%;
}
input.sheet-text-225
{
width: 225px;
}
input.sheet-text-200
{
width: 203px;
}
input.sheet-text-175
{
width: 175px;
}
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-compact{
font-family: "Arial", sans-serif;
font-size: 13px;
height: 20px;
}
input.sheet-under{
border-top: none;
border-left: none;
border-right: none;
border-bottom: solid 1px lightgray;
}
input.sheet-noborder{
border-top: none;
border-left: none;
border-right: none;
border-bottom: none;
}
input[type=number].sheet-compact-number{
font-size: 12px;
height: 20px;
width: 45px;
}
textarea.sheet-attitude{
width: 97%;
height: 75px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: solid 1px lightgray;
}
textarea.sheet-anote{
width: 94%;
/*height: 75px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: solid 1px lightgray;*/
border: solid 1px lightgray;
}
span.sheet-button-text{
font-size: 10px;
font-family: 'Metamorphous', cursive, 'Arial';
margin-left: -18px;
line-height: 12px;
}
select.sheet-compact-select-ci{
font-size: 10px;
color: black;
height: 18px;
width: 100%;
margin-top: 2px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: solid 1px lightgray;
}
/*--------------- 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: 15px;
color: black;
Background-color: LightGray;
border-radius: 12px 12px 12px 12px;
}
input[type=checkbox].sheet-check{
height: 12px;
width: 12px;
}
/*-------- General roll template********************/
.sheet-rolltemplate-general {
}
.sheet-rolltemplate-general .sheet-container {
/* by default, the border is the same color as the header. You can change this here, e.g. to black */
}
.sheet-rolltemplate-general .sheet-outline {
text-align: center;
margin-bottom: 2px;
}
.sheet-rolltemplate-general .div{
line-height: 14px;
}
.sheet-rolltemplate-general .sheet-general-header{
padding: 4px;
margin-bottom: 1px;
font-family: 'Metamorphous', cursive, 'Arial';
background: OldLace;
border-style: solid;
border-width: 1px;
border-color: black;
text-align: center;
border-radius: 2px 2px 2px 2px;
}
.sheet-rolltemplate-general .sheet-general-title{
font-size: 20px;
line-height: 22px;
}
.sheet-rolltemplate-general .sheet-subtitle{
font-size: 16px;
line-height: 18px;
border-style: solid;
}
.sheet-rolltemplate-general .sheet-content{
padding: 4px;
border-radius: 2px 2px 2px 2px;
border: 1px;
border-style: solid;
border-color: black;
background: OldLace;
}
.sheet-rolltemplate-general .sheet-key{
font-style: bold;
}
.sheet-rolltemplate-general .sheet-description{
padding: 4px;
width: 90%;
text-align: center;
line-height: 14px;
font-style: italic;
}
/* ------------------ Skill check template --------------*/
.sheet-rolltemplate-skill .sheet-container {
padding: 4px;
background: Silver;
border-style: solid;
border-width: 1px;
border-color: Black;
color: black;
font-family: 'Metamorphous', cursive, 'Arial';
border-radius: 2px 2px 2px 2px;
}
.sheet-rolltemplate-skill .div{
line-height: 14px;
}
.sheet-rolltemplate-skill .sheet-skill-header{
padding: 4px;
margin-top: 10px;
font-family: 'Metamorphous', cursive, 'Arial';
color: black;
background: OldLace;
border-style: solid;
border-color: black;
text-align: center;
border-right: 1px;
border-left: 1px;
border-top: none;
border-bottom: none;
border-radius: 2px 2px 0px 0px;
}
.sheet-rolltemplate-skill .sheet-skill-title{
font-size: 20px;
line-height: 22px;
}
.sheet-rolltemplate-skill .sheet-subtitle{
font-size: 16px;
line-height: 18px;
}
.sheet-rolltemplate-skill .sheet-content{
text-align: center;
padding: 4px;
color: black;
border-radius: 0px 0px 2px 2px;
background: OldLace;
}
.sheet-rolltemplate-skill .sheet-display{
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
font-family: 'Metamorphous', cursive, 'Arial';
font-size: 12px;
line-height: 16px;
}
.sheet-rolltemplate-skill .inlinerollresult{
border: none;
background: OldLace;
font-family: 'Metamorphous', cursive, 'Arial';
font-size: 12px;
line-height: 20px;
}
.sheet-rolltemplate-skill .inlinerollresult.fullcrit{
border: none;
background: OldLace;
font-family: 'Metamorphous', cursive, 'Arial';
font-size: 12px;
line-height: 20px;
}
.sheet-rolltemplate-skill .inlinerollresult.fullfail{
border: none;
background: OldLace;
font-family: 'Metamorphous', cursive, 'Arial';
font-size: 12px;
line-height: 20px;
}
.sheet-rolltemplate-skill .inlinerollresult.importantroll{
border: none;
background: OldLace;
font-family: 'Metamorphous', cursive, 'Arial';
font-size: 12px;
line-height: 20px;
}
.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 */
}