<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/ -->
<s:SparkSkin name="CustomAccordionHeaderSkin"
             xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark" 
             minWidth="21" minHeight="21"
             alpha.disabled="0.5">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
        <s:State name="selectedUp" />
        <s:State name="selectedOver" />
        <s:State name="selectedDown" />
        <s:State name="selectedDisabled" />
    </s:states>
    
    <fx:Script>
        <![CDATA[
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
        ]]>
    </fx:Script>

    
    <!-- layer 3: fill -->
    <s:Rect left="1" right="1" top="1" bottom="1" radiusX="7" excludeFrom="disabled">
        <s:stroke>
            <s:SolidColorStroke color="#cbcccd" />
        </s:stroke>
        
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="#f0f0f0" />
                <s:GradientEntry color="#dadada" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
</s:SparkSkin>