Altering the appearance of cflayout tabs in CF9

I'm trying to overide the default appearance of cflayout tabs.

By putting an edited background sprite into the website images folder I can alter the hover appearance, but I cannot seem to get the text to turn white on hover by referencing the built in .x-tab-strip-over class.

In action here

    <style type="text/css">
    div.x-tab-panel-header, ul.x-tab-strip-top {
        background-image: none;
        background-color: transparent;
        padding-bottom: 0px;
    }
    div.x-tab-panel-header {
        border: 0px;
    }
    .x-tab-strip-active, .x-tab-strip-text {
        font-weight: normal !important;
        font-size: 14px !important;
        font-family: arial !important;
    }
    .x-tab-strip-over {
        color: white !important;
    }
    .x-tab-right, .x-tab-left, .x-tab-strip-inner {
        background-image: url(images/xd-tabs-sprite.gif) !important;
    }
</style>

<cflayout type="tab">
    <cflayoutarea title="Mouse">
        Mickey Mouse
    </cflayoutarea>开发者_StackOverflow;
    <cflayoutarea title="Duck">
        Donald Duck
    </cflayoutarea>
</cflayout>

Any clues appreciated

CF9 uses ExtJS 3.x while Cf8 uses ExtJS 2.x

How to use:

1. Click Ext Theme Builder.
2. Select Template (blue or gray) in the top toolbar (i recommend - gray)
3. Select Base Color, Header Color, Background color, Border color, Header Font, Font, Window transparency, Toolset (Default, Vista, TargetProcess, Graphite) and ExtJS version. Unselected Border color will be assigned automatically according to base color
4. Click Apply
5. Enter Theme name
6. Click Download Theme. It will be xtheme-Theme name.zip file

http://extbuilder.dynalias.com/springapp/mainpage.htm

Use:

.x-tab-panel-header .x-tab-strip-over span {
    color: white;
}
.x-tab-panel-header .x-tab-strip-over.x-tab-strip-active span {
    color: red;
}

There's a lot going on in there, so I just tested until I found something that worked.