Multiple Layers of Colors.. Help!

So I have a grid in which I define the column colors by adding a CSS rule to the stylesheet as such:

//add a CSS rule for medium column width and text style
try
{
//FF
document.styleSheets[1].insertRule("#myGrid .aw-column-" + lcv + "{width: 75px; text-align: center; background-color: lime;}", document.styleSheets[1].cssRules.length);
}
catch(e)
{
//IE
document.styleSheets[1].addRule("#myGrid .aw-column-" + lcv, "{width: 75px; text-align: center; background-color: lime;}", document.styleSheets[1].rules.length);
}

Now I would like to color the last row of data red. I use:

obj.getRowTemplate(lastRow).setStyle("background", "red");

The problem is that my column colors (green) lay over the row color (red) I defined. I can tell this is the case because when I scroll the table I see the red row, but as soon as I stop scrolling, the green columns cover the red row up.

How can I make the red row color appear over the green column colors? I have tried defining the row color both before and after defining the green columns, to no avail.

Thanks!

Note: I also tried:

obj.getRowTemplate(lastRow).setStyle("background", "red!important");

and it gave same results as described above.

The column styles are applied to the cell element, which is inside the row element. Because of that the cell background will always overwrite (is on top of) row background. The only way to change this is to use css class and clear cell backgrounds for the colored rows -

#myGrid .aw-red-row {background: red}
#myGrid .aw-red-row .aw-grid-cell {background: none}

obj.getRowTemplate(lastRow).setClass("red", "row");

Yahtzee!

I knew it was the column colors overwriting any kind of row color I tried to specify.. and that definitely did the trick!

Thanks for the help, and thanks for a great set of tools. =]