[flexcoders] Nested classes picking up CSS

[Geoffrey]

Here's the basic setup.  On display 1 there is Panel A, on display 2
there is Panel B.  Both Panels contain 'CommonPanel'.

Using an external CSS file, how can I get CommonPanel to have
different styles?

I tried something like:

Display_1.mxml
<mx:Panel id="panelA" styleName="level1">
   <local:CommonPanel id="foo"/>
</mx:Panel>


Display_2.mxml
<mx:Panel id="panelB" styleName="level2">
   <local:CommonPanel id="foo2"/>
</mx:Panel>

CSS file
.level1.Panel{
   border-color: #FFFFFF;
}

.level2.Panel{
   border-color: #000000;
}


This is a very simplified version of the real code, where in the real
code the "CommonPanel" is nested a few layers down.

My basic goal is to have common components take on a different style
depending on the parent it's contained within.  I would like to set
the parents style via styleName and have that propagate down through
the children through something like:
.styleA{}
.styleA.Panel{}
.styleA.DataGrid{}
.styleA.CustomClass{}
...etc...

Thanks in advance,
Geoff