Difference with embedded CSS vs loading runtime CSS

Question

Hi,
Move from embedded CSS to runtime CSS, but having some subtle differences.
note the numeric stepper handles have default colors, this is with embedded css and what the client wants
This one is runtime css note the handles are black.
I had this in both before embedded and runtime CSS
NumericStepper {
   fillAlphas: 0.6, 0.4, 0.75, 0.65;
   fillColors: #ffffff, #cccccc, #ffffff, #eeeeee;
   themeColor: #92de78;
I added this to the runtime css and entered the style name for the numeric stepper but still no luck
.numericStepper {
        fillAlphas: 0.6, 0.4, 0.75, 0.65;
        fillColors: #ffffff, #cccccc, #ffffff, #eeeeee;
        themeColor: #92de78;
Any ideas complete css below. BTW my alerts are not using the runtime css as well yet embedded css works fine  
@font-face {
src:url("auth_module/poetica.swf");
font-family: "Poetica Std";
Application {
   backgroundImage: Embed(source="/images/bkg.gif");
   backgroundSize: "100%";
NumericStepper {
   fillAlphas: 0.6, 0.4, 0.75, 0.65;
   fillColors: #ffffff, #cccccc, #ffffff, #eeeeee;
   themeColor: #92de78;
        .numericStepper {
        fillAlphas: 0.6, 0.4, 0.75, 0.65;
        fillColors: #ffffff, #cccccc, #ffffff, #eeeeee;
        themeColor: #92de78;
Alert{
color : #000000;
title-style-name : "alertTitle";
button-style-name :"alertButtonStyle";
header-height:21;
border-thickness: 1;
drop-shadow-enabled: true;
drop-shadow-color :#CCCCCC;
shadowDirection:right;
shadowDistance:7;
background-color: #ffffff;
corner-radius :6;
border-style :solid;
header-colors : #DDDDDD, #ffffff;
footer-colors : #DDDDDD, #ffffff;
border-color : #333333;
.alertButtonStyle {
color : #000000;
.alertTitle{
font-family :Verdana;
font-size :10;
font-weight :bold;
text-align :left;
color :#000000;
.selectedBox {
headerColors:#336633,#447744;
borderColor:#447744;
titleStyleName: "selectedHeaders";
.legendBox {
border-thickness: 2;
border-style:solid;
border-color: #93C789;
.legendMask {
stroke-color: #333333;
stroke-width:2;
shadow-color: #333333;
.legendTitle {
font-size :12;
font-weight :bold;
.accordionHeaders {
font-family: "Poetica Std";
font-size:14pt;
color:#FFCC00;
.copyrighttext {
font-family: "Poetica Std";
font-size:14pt;
TextInput {
   color: #0b333c;
List {
   color: #0b333c;
CheckBox {
   themeColor: #92DE78;
   fillColors: #ffffff, #cccccc, #ffffff, #eeeeee;
   color: #0b333c;
.piecharBackground {
backgroundImage: Embed(source="/images/bkg.gif");
   backgroundSize: "100%";
   color: #93C789;
DataGrid {
   color: #0b333c;
   rollOverColor: #92de78;
   selectionColor: #93C789;
   textRollOverColor: #cc3333;
   headerColors: #000000, #333333;
   headerStyleName: "mydataGridHeaderStyle";
.mydataGridHeaderStyle {
   color: #92de78;
ApplicationControlBar {
   highlightAlphas: 0.4, 0;
   fillAlphas: 1, 1;
   cornerRadius: 0;
   fillColors: #000000, #333333;
   backgroundColor: #000000;
   color: #93C789;
CheckBox {
color: #93C789;
Accordion {
   fillAlphas: 1, 1, 1, 1;
   fillColors: #000000, #333333, #000000, #333333;
   selectedFillColors: #000000, #333333;
   themeColor: #92de78;
   textRollOverColor: #cc3333;
   headerStyleName: "myaccordionHeader";
   borderColor: #93C789;
   backgroundImage: Embed(source="/images/bkg.gif");
   backgroundSize: "100%";
   color: #92de78;
.myaccordionHeader {
   color: #92de78;
TabNavigator {
tabStyleName: "myTabs";
selectedTabTextStyleName: "mySelectedTabs";
dropShadowEnabled: true;
backgroundColor: #2e2e2e;
borderColor: #93C789;
.mySelectedTabs {
color: #92de78;
.backGroundPanel {
        backgroundImage: Embed(source="/images/bkg.gif");
   background-size:"100%";
   color: #93C789;
   textRollOverColor: #92de78;
   dropShadowColor: #92DE78;
Button {
   fillAlphas: 1, 1, 1, 1;
   fillColors: #000000, #333333, #333333, #000000;
   color: #92de78;
   textRollOverColor: #cc3333;
   borderColor: #93C789;
   themeColor: #92de78;
RadioButton {
   themeColor: #92DE78;
   fillColors: #ffffff, #cccccc, #ffffff, #eeeeee;
   color: #0b333c;
CheckBox {
   themeColor: #92DE78;
   fillColors: #ffffff, #cccccc, #ffffff, #eeeeee;
ComboBox {
   themeColor: #92DE78;
   fillColors: #ffffff, #cccccc, #ffffff, #eeeeee;
   color: #000000;
DateChooser {
   headerColors: #000000, #333333;
   themeColor: #92DE78;
   headerStyleName: "mydateChooserHeaderStyle";
   fillColors: #ffffff, #cccccc, #ffffff, #eeeeee;
VScrollBar {
   trackColors: #333333, #666666;
   themeColor: #000000;
   borderColor: #000000;
Panel {
   borderColor: #000000;
   borderAlpha: 1;
   titleStyleName: "mypanelTitle";
   dropShadowColor: #000000;
   roundedBottomCorners: true;
   headerColors: #333333, #000000;
.selectedHeaders{
color :#000000;
font-weight:bold;
.windowStyles {
            color: #92de78;
        TitleWindow {
        color: #92de78;
        closeButtonSkin: Embed("/images/del_24.png");
            /* Set values from defaults.css to null. */
            closeButtonDisabledSkin: Embed("/images/del_24.png");
            closeButtonDownSkin:Embed("/images/del_24.png");
            closeButtonOverSkin:Embed("/images/del_24.png");
            closeButtonUpSkin: Embed("/images/del_24.png");

Answer 1

The documentation says that a NumericStepper is composed of a TextInput and 2 buttons so I do understand why the buttons are getting styled the way they are.
I added a Button and a NumericStepper to a text application using Embedded Styles and it did produce the Button style effect.  I took the Button out and of course the Numeric buttons were rendered as the default Flex style of off grey / white.
Some of the Flex objects have additional style properties that allow you to style the individual components of the object however the NumericStepper does not seem to have that option.
I think the only way around it would be to get the children of the stepper and style them individually
 var btn:Button = numericStepper.getChildAt(1) as Button;
btn.setStyle("fillColors",["#ffcccc","#cccccc"]
and do the same thing for child 2
or extend the NumericStepper and override the style to be what you would like.