[SOLVED] Must be a simple mistake I'm making: Flex CSS style not working in a trival case

Must be a simple mistake I'm making: Flex CSS style not working in a trival case

I must be making a simple mistake (new to Flex). Here is main.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
                backgroundColor="#ff0000">
    <mx:Style source="/testing123.css"/>
    <mx:Canvas top="0" bottom="0" left="0" right="0" styleName="bg-lowlight" >
    </mx:Canvas>
</mx:Application>

and here is testing123.css:

.bg-lowlight

    {
        backgroundColor: #003366;
    }

The Canvas renders fine in design mode (a nice deep blue) but when I run the application (either in the browser or in the Flash Player) the frame is red (the color from the Application tag). If I specify the color for the Canvas directly, instead of through the styleName, it works as expected (blue canvas at runtime).

I'm using FlexBuilder3, and would much rather put colors in a .css file than on every Flex element!

Help!!!

*** Additional problem description ... has nothing to do with an external .css file. Even if I declare the CSS styles within the main.xml file, it still looks fine in Design mode and wrong when it runs. I am completely stymied.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#ff0000">
    <mx:Style > 
.bg-lowlight
{
    backgroundColor: #003366;
}
    </mx:Style>
    <mx:Canvas top="0" bottom="0" left="0" right="0" styleName="bg-lowlight" id="canvas1">
    </mx:Canvas>
</mx:Application>

Solution

So...with CookieOfFortune's help I tracked down the root of the problem:

the CSS class name (bg-lowlight) was invalid. The '-' is not allowed

that's what happens, I guess, when you guess at what is logical!