How to skin the ToggleButtonBar

Question

I'm trying to skin the buttons in the ToggleButtonBar but I'm
having a hard time figuring this one out. I used the style on a
Button and it worked fine. Can someone see what's wrong?
Here's what I have by way of code:
MXML:
<mx:ApplicationControlBar width="100%" y="80">
<mx:ToggleButtonBar selectedIndex="0" horizontalGap="2"
styleName="toggleButton">
<mx:dataProvider>
<mx:Array>
<mx:Object label="ProjectCatalog"
icon="@Embed(source='images/alert.png')"/>
<mx:Object label="Snapshot"
icon="@Embed(source='images/undo.png')"/>
<mx:Object label="Country"/>
<mx:Object label="Calendar"/>
<mx:Object label="Radar"/>
<mx:Object label="Current and Previous"/>
</mx:Array>
</mx:dataProvider>
</mx:ToggleButtonBar>
</mx:ApplicationControlBar>
CSS:
.toggleButton {
upSkin:Embed(source="../images/TabButton.swf",
symbol="up_skin");
selectedUpSkin:Embed(source="../images/TabButton.swf#up_skin_selected");
overSkin:Embed(source="../images/TabButton.swf#over_skin");
selectedOverSkin:Embed(source="../images/TabButton.swf#over_skin_selected");
downSkin:Embed(source="../images/TabButton.swf#down_skin");
selectedDownSkin:Embed(source="../images/TabButton.swf#down_skin_selected");
borderStyle: none;
/* hide the default focus rectangle*/
focusThickness: 0;
}

Answer 1

Take a look at
http://www.scalenine.com/
themes source files:
E.g:
CSS:
ToggleButtonBar
buttonStyleName: "buttonBarButton";
firstButtonStyleName: "firstButtonBarButton";
lastButtonStyleName: "lastButtonBarButton";
horizontalGap:10;
// ButtonBarButtons
.firstButtonBarButton
disabledSkin: Embed(source="messenger.swf",
symbol="ButtonBar_firstDisabledSkin");
downSkin: Embed(source="messenger.swf",
symbol="ButtonBar_firstDownSkin");
overSkin: Embed(source="messenger.swf",
symbol="ButtonBar_firstOverSkin");
selectedDisabledSkin: Embed(source="messenger.swf",
symbol="ButtonBar_firstSelectedDisabledSkin");
selectedDownSkin: Embed(source="messenger.swf",
symbol="ButtonBar_firstSelectedUpSkin");
selectedOverSkin: Embed(source="messenger.swf",
symbol="ButtonBar_firstSelectedUpSkin");
selectedUpSkin: Embed(source="messenger.swf",
symbol="ButtonBar_firstSelectedUpSkin");
upSkin: Embed(source="messenger.swf",
symbol="ButtonBar_firstUpSkin");
color: #ffffff;
textRollOverColor: #ffffff;
textSelectedColor: #ffffff;
.buttonBarButton
disabledSkin: Embed(source="messenger.swf",
symbol="ButtonBar_buttonDisabledSkin");
downSkin: Embed(source="messenger.swf",
symbol="ButtonBar_buttonDownSkin");
overSkin: Embed(source="messenger.swf",
symbol="ButtonBar_buttonOverSkin");
selectedDisabledSkin: Embed(source="messenger.swf",
symbol="ButtonBar_buttonSelectedDisabledSkin");
selectedDownSkin: Embed(source="messenger.swf",
symbol="ButtonBar_buttonSelectedUpSkin");
selectedOverSkin: Embed(source="messenger.swf",
symbol="ButtonBar_buttonSelectedUpSkin");
selectedUpSkin: Embed(source="messenger.swf",
symbol="ButtonBar_buttonSelectedUpSkin");
upSkin: Embed(source="messenger.swf",
symbol="ButtonBar_buttonUpSkin");
color: #ffffff;
textRollOverColor: #ffffff;
textSelectedColor: #ffffff;
.lastButtonBarButton
disabledSkin: Embed(source="messenger.swf",
symbol="ButtonBar_lastDisabledSkin");
downSkin: Embed(source="messenger.swf",
symbol="ButtonBar_lastDownSkin");
overSkin: Embed(source="messenger.swf",
symbol="ButtonBar_lastOverSkin");
selectedDisabledSkin: Embed(source="messenger.swf",
symbol="ButtonBar_lastSelectedDisabledSkin");
selectedDownSkin: Embed(source="messenger.swf",
symbol="ButtonBar_lastSelectedUpSkin");
selectedOverSkin: Embed(source="messenger.swf",
symbol="ButtonBar_lastSelectedUpSkin");
selectedUpSkin: Embed(source="messenger.swf",
symbol="ButtonBar_lastSelectedUpSkin");
upSkin: Embed(source="messenger.swf",
symbol="ButtonBar_lastUpSkin");
color: #ffffff;
textRollOverColor: #ffffff;
textSelectedColor: #ffffff;
}