Why isn't additional.css over riding the default css?

[John Lester]

Ok so I'm trying to help someone at vbulletin.com change the back ground color of the font and size drop down boxes in the editor (version 4.1.x). With some help from Wayne I found the relevant css file to poke around in, /clientscript/ckeditor/skins/kama/editor.css

So I changed the color in the file itself and checked on my test site and it works (the back ground color changed). So then I added the code to additional.css but it doesn't work (the back ground color doesn't change).

Why?

Original code

.cke_panel_listItem a:hover,.cke_panel_listItem a:focus,.cke_panel_listItem a:active{
  border-color: #316ac5;
  background-color: #dff1ff;
}

Code used in additional.css

.cke_panel_listItem a:hover,.cke_panel_listItem a:focus,.cke_panel_listItem a:active{
  border-color: #316ac5;
  background-color: #000000 !important;
}

It gets even stranger, I can change the color of the back ground for the drop down arrows for those boxes.

Original code

.cke_skin_kama .cke_rcombo .cke_off a:hover .cke_openbutton,.cke_skin_kama .cke_rcombo .cke_off a:focus .cke_openbutton,.cke_skin_kama .cke_rcombo .cke_off a:active .cke_openbutton,.cke_skin_kama .cke_rcombo .cke_on .cke_openbutton{
  border-color: #316ac5;
  background-color: #dff1ff;
}

Code in additional.css

.cke_skin_kama .cke_rcombo .cke_off a:hover .cke_openbutton,.cke_skin_kama .cke_rcombo .cke_off a:focus .cke_openbutton,.cke_skin_kama .cke_rcombo .cke_off a:active .cke_openbutton,.cke_skin_kama .cke_rcombo .cke_on .cke_openbutton{
  border-color: #316ac5;
  background-color: #000000 !important;
}