I'm implementing a custom editor.css stylesheet for TinyMCE, and as expected, my custom styles are showing up just fine. The problem is when I hover over my custom styles, it doesn't seem to switch the text colour to white, like it does with the category text.

I have set two stylesheets for the "uiEditorCssPaths" in my episerver.config file, with one being the typography styles and the other being the custom style definitions, which looks something like this:

h1 {
    EditMenuName: Heading 1;
}

h2 {
    EditMenuName: Heading 2;
}

...

This works. I can see my custom styles in the Styles dropdown. But when I hover over them, the background colour changes to blue (that's OK) but the text colour stays dark grey, which happen to be the colour I'm using in my typography stylesheet for the body element.

Here's a screenshot: http://dnasir.com/wp-content/uploads/2013/07/tinymce-style-bug.jpg

How can I fix this? Removing the text colour from the typography stylesheet will cause all text to use the default text colour, which in this case is black. And I'd really like to maintain the whole WYSIWYG thing intact if possible. It doesn't make sense to me if the styles in TinyMCE appear differently to the actual stuff.

Hope someone can help. Thanks in advance.