Styling the different states on a Spark CheckBox control in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/17/styling-the-different-states-on-an-fxcheckbox-control-in-flex-gumbo/ -->
<s:Application name="FxCheckBox_statesStyle_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:layout>
        <s:BasicLayout />
    </s:layout>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        /* all states */
        s|CheckBox {
            fontWeight: bold;
            fontSize: 24;
            symbolColor: black;
        }
 
        /* deselected states */
        s|CheckBox:up,
        s|CheckBox:over,
        s|CheckBox:down,
        s|CheckBox:disabled {
            baseColor: red;
            color: red;
        }
 
        /* selected states */
        s|CheckBox:upAndSelected,
        s|CheckBox:overAndSelected,
        s|CheckBox:downAndSelected,
        s|CheckBox:disabledAndSelected {
            baseColor: green;
            color: green;
        }
    </fx:Style>
 
    <s:CheckBox id="ch"
                label="enabled"
                selected="true"
                color="black"
                baseColor="white"
                x="10"
                y="10" />
 
    <s:CheckBox id="checkBox"
                label="FxCheckBox"
                enabled="{ch.selected}"
                horizontalCenter="0"
                verticalCenter="0" />
 
</s:Application>