XF 1.5 Weird prefix problem

[Tott3]

Hi, I got this either weird problem or I'm just blind and did something wrong. I'm trying to setup some class prefixes for the WoW section of my forum. However, some of them lack the shadow effect around them, such as Monk, Rogue & Priest. See picture below.

And here's my EXTRA.css, which is pretty much just copy/paste.

.prefix.prefixDK {
color: #000;
background-color: #C41F3B;
border-color: #C41F3B;
}
    a.prefixLink:hover .prefix.prefixDK {
    color: white;
    background-color: gray;
    border-color: black;
    }
   
.prefix.prefixDH {
color: #000;
background-color: #A330C9;
border-color: #A330C9;
}
    a.prefixLink:hover .prefix.prefixDH {
    color: white;
    background-color: gray;
    border-color: black;
    }
   
.prefix.prefixDRUID {
color: #000;
background-color: #FF7D0A;
border-color: #FF7D0A;
}
    a.prefixLink:hover .prefix.prefixDRUID {
    color: white;
    background-color: gray;
    border-color: black;
    }
   
.prefix.prefixHUNTER {
color: #000;
background-color: #ABD473;
border-color: #ABD473;
}
    a.prefixLink:hover .prefix.prefixHUNTER {
    color: white;
    background-color: gray;
    border-color: black;
    }
   
.prefix.prefixMAGE {
color: #000;
background-color: #69CCF0;
border-color: #69CCF0;
}
    a.prefixLink:hover .prefix.prefixMAGE {
    color: white;
    background-color: gray;
    border-color: black;
    }
   
.prefix.prefixMONK {
color: #000;
background-color: #00FF96;
border-color: #00FF96;
}
    a.prefixLink:hover .prefix.prefixMONK {
    color: white;
    background-color: gray;
    border-color: black;
    }

.prefix.prefixPALADIN {
color: #000;
background-color: #F58CBA;
border-color: #F58CBA;
}
    a.prefixLink:hover .prefix.prefixPALADIN {
    color: white;
    background-color: gray;
    border-color: black;
    }
   
.prefix.prefixPRIEST {
color: #000;
background-color: #FFFFFF;
border-color: #FFFFFF;
}
    a.prefixLink:hover .prefix.prefixPRIEST {
    color: white;
    background-color: gray;
    border-color: black;
    }
   
.prefix.prefixROGUE {
color: #000;
background-color: #FFF569;
border-color: #FFF569;
}
    a.prefixLink:hover .prefix.prefixROGUE {
    color: white;
    background-color: gray;
    border-color: black;
    }
   
.prefix.prefixSHAMAN {
color: #000;
background-color: #0070DE;
border-color: #0070DE;
}
    a.prefixLink:hover .prefix.prefixSHAMAN {
    color: white;
    background-color: gray;
    border-color: black;
    }
   
.prefix.prefixWARLOCK {
color: #000;
background-color: #9482C9;
border-color: #9482C9;
}
    a.prefixLink:hover .prefix.prefixWARLOCK {
    color: white;
    background-color: gray;
    border-color: black;
    }

.prefix.prefixWARRIOR {
color: #000;
background-color: #C79C6E;
border-color: #C79C6E;
}
    a.prefixLink:hover .prefix.prefixWARRIOR {
    color: white;
    background-color: gray;
    border-color: black;
    }

 

[Jake Bunce]

I think you mean to have the background and border be different colors which is not the case currently:

.prefix.prefixROGUE {
color: #000;
background-color: #FFF569;
border-color: #FFF569;
}