how to override font-color dynamically with css color property

I am working in wavemaker for creating web projects. In Dojo Grid there is default mouse over event for which the data in the grid will show in white color font and grey color background

I have created another css for same mouse over. Here the background-color is overriding but the font color is not changing.

Please find below the overriding css code:

body.tundra.wm_default .dojoxGridRowOver 
{
    background-color: #FCFDCB;
    color: grey !important;
}

The Grey color font is not coming even when I set it as "!important"

Please see here http://jsfiddle.net/M8fED/ for my sample exaple

Solution

Hi dwreck08 I found out the answer for my Question the following code is working in wavemaker

/* Custom mouse-over color for rows */
.wm_default .wmlist-item.wmlist-item-over,
.dj_ie6 .wm_template .wmlist-item.wmlist-item-over,
.wm_default div.dojoxGrid-row.dojoxGrid-row-over, 
.wm_default .dojoxGrid-row.dojoxGrid-row-odd.dojoxGrid-row-over,
.wm_default .dojoxGridRowOver, 
.wm_default .dojoxGridRowOdd.dojoxGridRowOver,
.wm_default #wavemakerNode .wmlayout .dojoxGridRowOdd.dojoxGridRowOver a,
.wm_default .dojoxGridRowOver td.dojoxGridCell
{
    /* Document-ClickablesHover-Background */
    background-color: #FCFDCB; /* Document-ClickablesHover-Background_Color */

    /* Document-ClickablesHover-Font */
    color: #666666; /* Document-ClickablesHover-Font_Color */
}

Thanks for your help once again