Translating Flex 3 swf skins to Flex 4

I have an app in Flex 4 that is usinf MX and Spark - but with the HALO theme.

When it was in Flex 3, I styled things using CSS and swf skins.

In my CSS it had rules such as:

RadioButton
{
    disabledIcon: Embed(source="skins_new.swf", symbol="RadioButton_disabledIcon");
    upIcon: Embed(source="skins_new.swf", symbol="RadioButton_upIcon");
    downIcon: Embed(source="skins_new.swf", symbol="RadioButton_downIcon")
}

1) How can I use this same swf and it's symbol to stylize a

s|RadioButton (spark radio button) in the exact same way?

I have tried this by putting an s| in front of RadioButton in my CSS and it does not work.

I am having a very hard time styling all the same components from my Flex 3 app to look exactly the same as Spark components.

Even basic ones... like Button, RadioButton, TitleWindow, etc.

2) Where can I find all the style properties that spark uses with its spark components?

I have looked here: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/TextArea.html?allClasses=1

However, if I look at TextArea... for MX and for Spark... I do not see a property of backgroundColor listed... and in my app in Flex 4, I am getting an error that says:

The style 'backgroundColor' is only supported by type 'mx.controls.TextArea' with the theme(s) 'halo'.   

And my code says:

<mx:TextArea
        paddingTop="5"
        width="100%"
        height="100%"
        editable="false"
        backgroundColor="#d7f1dc"
        borderStyle="none"
        text="{messageText}"/> 

This used to work work Flex 3... no longer works for FLex 4... so when UI try to find all supporting CSS properties in the ASDoc.. it does not show me all of them.

Anyone got any suggestions?  I am having a hard time and trying not to redo all my spark components in CSS... however, I need my Spark components to have an exact same look/feel as their MX component equivalent... make sense?