Return-Path: 
 <commits-return-15821-apmail-flex-commits-archive=flex.apache.org@flex.apache.org>
X-Original-To: apmail-flex-commits-archive@www.apache.org
Delivered-To: apmail-flex-commits-archive@www.apache.org
Received: from mail.apache.org (hermes.apache.org [140.211.11.3])
	by minotaur.apache.org (Postfix) with SMTP id 9A5EF17404
	for <apmail-flex-commits-archive@www.apache.org>;
 Mon, 27 Oct 2014 06:23:08 +0000 (UTC)
Received: (qmail 96135 invoked by uid 500); 27 Oct 2014 06:23:03 -0000
Delivered-To: apmail-flex-commits-archive@flex.apache.org
Received: (qmail 96070 invoked by uid 500); 27 Oct 2014 06:23:03 -0000
Mailing-List: contact commits-help@flex.apache.org; run by ezmlm
Precedence: bulk
List-Help: <mailto:commits-help@flex.apache.org>
List-Unsubscribe: <mailto:commits-unsubscribe@flex.apache.org>
List-Post: <mailto:commits@flex.apache.org>
List-Id: <commits.flex.apache.org>
Reply-To: dev@flex.apache.org
Delivered-To: mailing list commits@flex.apache.org
Received: (qmail 96004 invoked by uid 99); 27 Oct 2014 06:23:03 -0000
Received: from tyr.zones.apache.org (HELO tyr.zones.apache.org)
 (140.211.11.114)
    by apache.org (qpsmtpd/0.29) with ESMTP; Mon, 27 Oct 2014 06:23:03 +0000
Received: by tyr.zones.apache.org (Postfix, from userid 65534)
	id AA57A902FC2; Mon, 27 Oct 2014 06:23:03 +0000 (UTC)
Content-Type: text/plain; charset="us-ascii"
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
From: jmclean@apache.org
To: commits@flex.apache.org
Date: Mon, 27 Oct 2014 06:23:29 -0000
Message-Id: <52e331caf65e43a09f8da270b5360e5e@git.apache.org>
In-Reply-To: <91674f9dbcc842aea3b539f1c41a0147@git.apache.org>
References: <91674f9dbcc842aea3b539f1c41a0147@git.apache.org>
X-Mailer: ASF-Git Admin Mailer
Subject: [29/50] [abbrv] FLEX-34485 make examples consistent

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonExample.mxml
index 722215d..6abdfa2 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonExample.mxml
@@ -41,71 +41,38 @@
 			}
 		]]>
 	</fx:Script>
-	<fx:Style>
-		@namespace "library://ns.adobe.com/flex/spark";
-		
-		ToggleButton:upAndSelected,
-		ToggleButton:overAndSelected {
-			baseColor: #000000;
-			color: #FFFFFF;
-		}
-		ToggleButton:downAndSelected {
-			baseColor: #336699;
-			color: #FFFFFF;
-		}
-		ToggleButton:disabledAndSelected {
-			baseColor: #E2E2E2;
-			color: #212799;
-		}
-		ToggleButton:up {
-			baseColor: #C0C0C0;
-			color: #323232;
-		}
-		ToggleButton:over {
-			baseColor: #FFFFFF;
-			color: #000000;
-		}
-		ToggleButton:down {
-			baseColor: #014f9f;
-			color: #FFFFFF;
-		}
-	</fx:Style>
+
 	<s:states> 
 		<s:State name="show"/>    
 		<s:State name="hide"/> 
 	</s:states> 
 	
-	<!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
-	source tabs for each sample.	-->
-	<s:Panel width="100%" height="100%" 
-			 horizontalCenter="0" 
-			 title="ToggleButton Sample" 
-			 skinClass="skins.TDFPanelSkin">
+	<s:Panel title="ToggleButton Sample" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
 		
-			
-			<s:HGroup left="5" top="5" width="100%" height="100%">
-				<s:VGroup color="0x000000">
-						<s:Label text="The Outfitters Clothing Store" fontSize="18" color="0x014f9f"/>
-						<s:Label text="Order Number: 904234113441-2342"/>
-						<s:VGroup width="80%"  horizontalCenter="0">
-							<s:Label text="Purchaser: Anna Thomas"/>
-							<s:Label text="Date: 7/20/2009"/>
-							<s:Label text="Order Total: $114.00"/>
-							<s:ToggleButton id="showBtn" label.hide="Show Details" label.show="Hide Details"
-											click="myBtn_clickHandler(event)"/>
-						</s:VGroup>
-				</s:VGroup>
-				<s:HGroup right="50" top="5">
-					<s:Panel title="Details" horizontalCenter="0" top="300" width="350" height="170"  
-							color="#FFFFFF"  includeIn="show">
-						<mx:DataGrid dataProvider="{items}" width="100%" height="100%" color="0x000000"/>
-					</s:Panel>
-				</s:HGroup>
-			</s:HGroup>
-			<s:HGroup horizontalCenter="0" bottom="15"  verticalAlign="middle" clipAndEnableScrolling="true" width="88%">
-			<s:Label fontSize="13" color="0x323232" verticalAlign="justify" width="100%"
-						  text="Clicking the button toggles it between the up and down states. If you click the button while it is in the up state, it toggles to the down state. You must click
-the button again to toggle it back to the up state."/>
+		<s:HGroup>			
+			<s:VGroup>
+					<s:Label text="The Outfitters Clothing Store" fontSize="18" />
+					<s:Label text="Order Number: 904234113441-2342"/>
+					<s:VGroup width="80%"  horizontalCenter="0">
+						<s:Label text="Purchaser: Anna Thomas"/>
+						<s:Label text="Date: 7/20/2009"/>
+						<s:Label text="Order Total: $114.00"/>
+						<s:ToggleButton id="showBtn" label.hide="Show Details" label.show="Hide Details"
+										click="myBtn_clickHandler(event)"/>
+					</s:VGroup>
+			</s:VGroup>
+			<s:HGroup right="50" top="5">
+				<s:Panel title="Details" horizontalCenter="0" top="300" width="350" height="170" includeIn="show">
+					<mx:DataGrid dataProvider="{items}" width="100%" height="100%"/>
+				</s:Panel>
 			</s:HGroup>
+		</s:HGroup>
+		
+		<s:Label width="100%"
+				 text="Clicking the button toggles it between the up and down states. If you click the button while it is in the up state, it toggles to the down state. You must click
+		the button again to toggle it back to the up state."/>
 	</s:Panel>	
 </s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/ToolTipExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToolTipExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToolTipExample.mxml
index 899f6df..e5dcb44 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ToolTipExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToolTipExample.mxml
@@ -19,30 +19,9 @@
 -->
 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
-			   xmlns:mx="library://ns.adobe.com/flex/mx" 
-			   skinClass="TDFGradientBackgroundSkin">
-	
-	<fx:Style>
-		@namespace mx "library://ns.adobe.com/flex/mx";
-		
-		mx|ToolTip 
-		{
-			fontFamily: "Arial";
-			fontSize: 12;
-			fontStyle: "italic";
-			color: #000000;
-			backgroundColor: #FCEA1E;
-		}
-	</fx:Style>
-	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
-	<s:Panel title="ToolTip Samples"
-			 width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
+
+	<s:Panel title="ToolTip Samples" width="100%" height="100%">
 		
 		<s:layout>
 			<s:VerticalLayout horizontalAlign="center" 

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/TreeExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TreeExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TreeExample.mxml
index 47f98d5..f87e33c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TreeExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TreeExample.mxml
@@ -19,8 +19,7 @@
 -->
 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
-			   xmlns:mx="library://ns.adobe.com/flex/mx" 
-			   skinClass="TDFGradientBackgroundSkin">
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
 	<fx:Script>
         <![CDATA[
@@ -57,20 +56,18 @@
 		<s:VerticalLayout horizontalAlign="center" />
 	</s:layout>
     
-	<s:Panel title="Tree Control" color="0x000000" 
-			 borderAlpha="0.15" 
-			 width="600">
-		
+	<s:Panel title="Tree Control" width="100%" height="100%">
+
 		<s:layout>
 			<s:VerticalLayout horizontalAlign="center" 
 							  paddingLeft="10" paddingRight="10" 
 							  paddingTop="10" paddingBottom="10"/>
 		</s:layout>
          
-         <s:Label width="100%" color="0x323232" 
+         <s:Label width="100%"
             text="Select a node in the Tree control."/>
 
-        <mx:HDividedBox width="100%" height="100%" color="0x323232">
+        <mx:HDividedBox width="100%" height="100%">
             <mx:Tree id="myTree" width="50%" height="100%" labelField="@label"
                 showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
             <s:TextArea height="100%" width="50%"

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/VideoDisplayExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/VideoDisplayExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/VideoDisplayExample.mxml
index 2da694d..e91cd8f 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/VideoDisplayExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/VideoDisplayExample.mxml
@@ -19,14 +19,9 @@
 -->
 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
-			   xmlns:mx="library://ns.adobe.com/flex/mx" 
-			   skinClass="TDFGradientBackgroundSkin"
+			   xmlns:mx="library://ns.adobe.com/flex/mx"
 			   initialize="init(event)">
-	
-	<s:layout>
-		<s:HorizontalLayout horizontalAlign="center" />
-	</s:layout>
-	
+
 	<fx:Script>
 		<![CDATA[
 			import flashx.textLayout.conversion.TextConverter;
@@ -45,7 +40,11 @@
 		<fx:String id="TitleText"><![CDATA[<b>VideoDisplay Control:</b><br />Use the buttons to control the video.]]></fx:String>
 	</fx:Declarations>
 	
-	<s:VGroup width="600" horizontalAlign="center" paddingTop="10">
+	<s:Panel title="Video Display Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
 		
 		<s:RichText width="75%" color="0xffffff" textAlign="center"
 					textFlow="{TextConverter.importToFlow(TitleText, TextConverter.TEXT_FIELD_HTML_FORMAT)}"
@@ -54,11 +53,11 @@
 		<s:VideoDisplay id="myVid" width="66%" height="66%" source="./spark/controls/assets/FlexInstaller.mp4" autoPlay="false"/>
 		
 		<s:HGroup>
-			<s:Button label="Play" color="0x00000" click="myVid.play();"/>
-			<s:Button label="Pause" color="0x00000" click="myVid.pause();"/>
-			<s:Button label="Stop" color="0x00000" click="myVid.stop();"/>
+			<s:Button label="Play" color="0x00000" click="myVid.play()"/>
+			<s:Button label="Pause" color="0x00000" click="myVid.pause()"/>
+			<s:Button label="Stop" color="0x00000" click="myVid.stop()"/>
 		</s:HGroup>
 		
-	</s:VGroup>
+	</s:Panel>
 	
 </s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/VideoPlayerExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/VideoPlayerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/VideoPlayerExample.mxml
index 89d8590..195f3b8 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/VideoPlayerExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/VideoPlayerExample.mxml
@@ -43,12 +43,9 @@
 		]]>
 	</fx:Script>
 	
-	<!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
-	source tabs for each sample.	-->
-	<s:Panel title="VideoPlayer Sample" 
-			 width="100%" height="100%" 
-			 skinClass="skins.TDFPanelSkin">
-		<s:Label top="10" right="10" width="250" verticalAlign="justify" color="#323232" 
+	<s:Panel title="VideoPlayer Sample" width="100%" height="100%">
+		
+		<s:Label top="10" right="10" width="250" verticalAlign="justify" 
 					  text="The VideoPlayer control lets you play progressively downloaded or streaming
 video, live or recorded video. It supports multi-bit rate streaming when used with a server that supports
 multi-bit rate streaming, such as Flash Media Server 3.5. The VideoPlayer control contains a full UI 

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/ViewStackExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ViewStackExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ViewStackExample.mxml
index 59b6f27..9a9386c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ViewStackExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ViewStackExample.mxml
@@ -19,43 +19,34 @@
 -->
 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
-			   xmlns:mx="library://ns.adobe.com/flex/mx" 
-			   skinClass="TDFGradientBackgroundSkin">
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
-	<s:Panel title="ViewStack Container" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="ViewStack Container" width="100%" height="100%">
 		
 		<s:layout>
 			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		
-		<s:Label width="100%" color="0x323232" textAlign="center"
+		<s:Label width="100%" textAlign="center"
 				 text="Use the Button controls to change panels of the ViewStack container."/>
 		
-		<s:BorderContainer borderStyle="solid" width="100%" color="0x323232">
+		<s:BorderContainer borderStyle="solid" width="100%">
 			
 			<s:layout>
-				<s:HorizontalLayout horizontalAlign="center"  
-									paddingTop="5" paddingLeft="5" 
-									paddingRight="5" paddingBottom="5" />
+				<s:HorizontalLayout paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" />
 			</s:layout>
 			
 			<s:Button id="searchButton" label="Search Panel"
-					  click="myViewStack.selectedChild=search;"/>
+					  click="myViewStack.selectedChild=search"/>
 			<s:Button id="cInfoButton" label="Customer Info Panel"
-					  click="myViewStack.selectedChild=custInfo;"/>
+					  click="myViewStack.selectedChild=custInfo"/>
 			<s:Button id="aInfoButton" label="Account Panel"
-					  click="myViewStack.selectedChild=accountInfo;"/>
+					  click="myViewStack.selectedChild=accountInfo"/>
 		</s:BorderContainer>
 		
 		<!-- Define the ViewStack and the three child containers and have it
 		resize up to the size of the container for the buttons. -->
-		<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%" color="0x323232">
+		<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">
 			
 			<s:NavigatorContent id="search" label="Search" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" >
 				
@@ -85,7 +76,7 @@
 				<s:HGroup>
 					<s:Label text="Email Address"/>
 					<s:TextInput id="email" width="200"/>
-					<s:Button label="Submit" click="email.text='';" />
+					<s:Button label="Submit" click="email.text=''" />
 				</s:HGroup>
 			</s:NavigatorContent>
 			

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/css/CSSDescendantSelectorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/css/CSSDescendantSelectorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/css/CSSDescendantSelectorExample.mxml
index db20ea3..f942061 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/css/CSSDescendantSelectorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/css/CSSDescendantSelectorExample.mxml
@@ -54,7 +54,12 @@
 		}
 	</fx:Style>
 	
-	<s:Panel title="Advanced CSS: Descendant Selector Example" height="100%" width="100%" skinClass="skins.TDFPanelSkin">
+	<s:Panel title="Advanced CSS: Descendant Selector Example" height="100%" width="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
 		<s:Group width="50%" height="50%">
 			<s:ButtonBar id="viewMenu" requireSelection="true" x="10" y="10">
 				<s:dataProvider>
@@ -68,7 +73,7 @@
 				<mx:Text text="This text component has a style setting with a reference to a Halo Text component."/>
 			</s:VGroup>
 		</s:Group>
-		<s:Label width="200" color="0x323232" text="Descendant selectors can be used to specifically qualify the component you 
+		<s:Label width="200" text="Descendant selectors can be used to specifically qualify the component you 
 want to style via the namespace and component. See the Style settings in the code for reference." x="440" y="10"/>
 	</s:Panel>
 </s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/css/CSSIDSelectorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/css/CSSIDSelectorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/css/CSSIDSelectorExample.mxml
index 7cb1571..576ca4c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/css/CSSIDSelectorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/css/CSSIDSelectorExample.mxml
@@ -23,7 +23,7 @@
 	<fx:Style>
 		#submitButton {
 			baseColor: #1E407E;
-			color: #FFFFFF;
+			color: #003399;
 		}
 		
 	</fx:Style>
@@ -43,12 +43,16 @@
 	
 	<s:Panel height="100%" width="100%"
 			 horizontalCenter="0" verticalCenter="0"
-			 title="Advanced CSS: ID Selector Example" 
-			 skinClass="skins.TDFPanelSkin">
-		<s:Label top="20" left="30" width="140" color="0x323232" verticalAlign="justify" 
+			 title="Advanced CSS: ID Selector Example">
+
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label verticalAlign="justify" 
 					  text="Only the Button with the id 'submitButton' will have custom colors."/>
 		
-		<s:VGroup horizontalCenter="0" horizontalAlign="center" verticalCenter="0">
+		<s:VGroup>
 				<s:HGroup verticalAlign="middle">
 					<s:Label text="First Name:"/>
 					<s:TextInput id="firstName" width="100"/>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/css/CSSTypeClassSelectorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/css/CSSTypeClassSelectorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/css/CSSTypeClassSelectorExample.mxml
index b6dc266..80ef2ca 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/css/CSSTypeClassSelectorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/css/CSSTypeClassSelectorExample.mxml
@@ -43,30 +43,32 @@
 		}
 	</fx:Style>
 	
-	<s:Panel title="Advanced CSS: Type+Class Selector Sample" height="100%" width="100%"
-			 styleName="blueTheme" skinClass="skins.TDFPanelSkin">
-		<s:HGroup horizontalCenter="0" top="15">
-			<s:Label width="270" color="0x323232" text="This Panel has a styleName, but the Lists and Panel have some different styles defined in a Type+Class selector. See the style section for the styles applied."/>
-			<s:ComboBox selectedIndex="0">
-				<s:ArrayCollection source="[Monday,Tuesday,Wednesday,Thursday,Friday]"/>
-			</s:ComboBox>		
-			<s:VGroup horizontalCenter="0" top="8">
-				<s:Label text="Text:"/>
-				<s:TextInput text="some text" styleName="blueTheme"/>
-				<s:Label text="Units:"/>
-				<s:NumericStepper styleName="blueTheme"/>
-				<s:List id="carList" selectedIndex="2" styleName="blueTheme">
-					<s:dataProvider>
-						<mx:ArrayCollection source="[Civic, M3, Prius, Blazer, Tahoe]" />
-					</s:dataProvider>
-				</s:List>
-			</s:VGroup>
-			<s:List id="fruitList" selectedIndex="2" styleName="greenTheme">
+	<s:Panel title="Advanced CSS: Type+Class Selector Sample" height="100%" width="100%" styleName="blueTheme">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label width="270" text="This Panel has a styleName, but the Lists and Panel have some different styles defined in a Type+Class selector. See the style section for the styles applied."/>
+		<s:ComboBox selectedIndex="0">
+			<s:ArrayCollection source="[Monday,Tuesday,Wednesday,Thursday,Friday]"/>
+		</s:ComboBox>		
+		<s:VGroup horizontalCenter="0" top="8">
+			<s:Label text="Text:"/>
+			<s:TextInput text="some text" styleName="blueTheme"/>
+			<s:Label text="Units:"/>
+			<s:NumericStepper styleName="blueTheme"/>
+			<s:List id="carList" selectedIndex="2" styleName="blueTheme">
 				<s:dataProvider>
-					<mx:ArrayCollection source="[Apples,Bananas,Grapes]" />
+					<mx:ArrayCollection source="[Civic, M3, Prius, Blazer, Tahoe]" />
 				</s:dataProvider>
 			</s:List>
-		</s:HGroup>
+		</s:VGroup>
+		<s:List id="fruitList" selectedIndex="2" styleName="greenTheme">
+			<s:dataProvider>
+				<mx:ArrayCollection source="[Apples,Bananas,Grapes]" />
+			</s:dataProvider>
+		</s:List>
 	</s:Panel>
 
 </s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/effects/AnimatePropertiesExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/AnimatePropertiesExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/AnimatePropertiesExample.mxml
index d070c76..293eb90 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/effects/AnimatePropertiesExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/AnimatePropertiesExample.mxml
@@ -41,47 +41,40 @@
 		</s:Animate>
 	</fx:Declarations>
 	
-	<s:layout>
-		<s:HorizontalLayout 
-			horizontalAlign="center" 
-			gap="100" 
-			paddingTop="8"/>
-	</s:layout>
-	
-	<s:TileGroup id="tileGroup" 
-				 horizontalGap="1" 
-				 verticalGap="1" 
-				 direction="ltr" 
-				 columnWidth="50"
-				 rowHeight="50" 
-				 useHandCursor="true" 
-				 buttonMode="true">
+	<s:Panel title="Animate Properties Effect Sample" width="100%" height="100%" >
 		
-		<mx:Image source="@Embed('assets/images/2.jpg')" click="a.play()" />
-		<mx:Image source="@Embed('assets/images/3.jpg')" click="a.play()" />
-		<mx:Image source="@Embed('assets/images/4.jpg')" click="a.play()" />
-		<mx:Image source="@Embed('assets/images/5.jpg')" click="a.play()" />
-		<mx:Image source="@Embed('assets/images/6.jpg')" click="a.play()" />
-		<mx:Image source="@Embed('assets/images/7.jpg')" click="a.play()" />
-		<mx:Image source="@Embed('assets/images/8.jpg')" click="a.play()" />
-		<mx:Image source="@Embed('assets/images/9.jpg')" click="a.play()" />
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
 		
-	</s:TileGroup>
-	
-	<s:HGroup top="8" right="8">
-		<s:VGroup width="100%" >
-			<s:Label text="Animate Properties Sample" 
-					 fontSize="18" 
-					 color="#B7B6B6"/>
+		<s:TileGroup id="tileGroup" 
+					 horizontalGap="1" 
+					 verticalGap="1" 
+					 direction="ltr" 
+					 columnWidth="50"
+					 rowHeight="50" 
+					 useHandCursor="true" 
+					 buttonMode="true">
+			
+			<mx:Image source="@Embed('assets/images/2.jpg')" click="a.play()" />
+			<mx:Image source="@Embed('assets/images/3.jpg')" click="a.play()" />
+			<mx:Image source="@Embed('assets/images/4.jpg')" click="a.play()" />
+			<mx:Image source="@Embed('assets/images/5.jpg')" click="a.play()" />
+			<mx:Image source="@Embed('assets/images/6.jpg')" click="a.play()" />
+			<mx:Image source="@Embed('assets/images/7.jpg')" click="a.play()" />
+			<mx:Image source="@Embed('assets/images/8.jpg')" click="a.play()" />
+			<mx:Image source="@Embed('assets/images/9.jpg')" click="a.play()" />
 			
+		</s:TileGroup>
+		
+		<s:VGroup width="100%">
 			<s:Label width="250" 
-					 verticalAlign="justify" 
-					 color="#323232" 
+					 verticalAlign="justify"
 					 text="With the Spark Animate class, you can animate any arbitrary property of an object by using MotionPaths or SimpleMotionPaths. In this sample, the horizontalGap, verticalGap, and z properties of the TileGroup are being incremented over the course of the animation."/>
 			
 			<s:Label text="{'horizontalGap = ' + tileGroup.horizontalGap}"/>
 			<s:Label text="{'verticalGap = ' + tileGroup.verticalGap}" />
 		</s:VGroup>
-	</s:HGroup>
-	
+		
+	</s:Panel>
 </s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/effects/AnimateTransformExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/AnimateTransformExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/AnimateTransformExample.mxml
index e6307a1..95a0f28 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/effects/AnimateTransformExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/AnimateTransformExample.mxml
@@ -28,89 +28,52 @@
 				<s:motionPaths>
 					<s:MotionPath property="translationX" >
 						<s:keyframes>
-							<s:Keyframe time="250" value="0"/>
-							<s:Keyframe time="550" value="60"/>
-							<s:Keyframe time="850" value="100"/>
-							<s:Keyframe time="1150" value="140"/>
-							<s:Keyframe time="1450" value="180"/>
-							<s:Keyframe time="1750" value="220"/>
-							<s:Keyframe time="2050" value="140"/>
-							<s:Keyframe time="2350" value="100"/>
-							<s:Keyframe time="2650" value="60"/>
-							<s:Keyframe time="2950" value="0"/>
+							<s:Keyframe time="250" value="20"/>
+							<s:Keyframe time="550" value="80"/>
+							<s:Keyframe time="850" value="120"/>
+							<s:Keyframe time="1150" value="160"/>
+							<s:Keyframe time="1450" value="200"/>
+							<s:Keyframe time="1750" value="240"/>
+							<s:Keyframe time="2050" value="160"/>
+							<s:Keyframe time="2350" value="120"/>
+							<s:Keyframe time="2650" value="80"/>
+							<s:Keyframe time="2950" value="20"/>
 						</s:keyframes>
 					</s:MotionPath>
 				
 					<s:MotionPath property="translationY" >
 						<s:keyframes>
-							<s:Keyframe time="250" value="100"/>
-							<s:Keyframe time="550" value="0"/>
-							<s:Keyframe time="850" value="100"/>
-							<s:Keyframe time="1150" value="0"/>
-							<s:Keyframe time="1450" value="100"/>
-							<s:Keyframe time="1750" value="0"/>
-							<s:Keyframe time="2050" value="100"/>
-							<s:Keyframe time="2350" value="0"/>
-							<s:Keyframe time="2650" value="100"/>
-							<s:Keyframe time="2950" value="0"/>
+							<s:Keyframe time="250" value="160"/>
+							<s:Keyframe time="550" value="60"/>
+							<s:Keyframe time="850" value="160"/>
+							<s:Keyframe time="1150" value="60"/>
+							<s:Keyframe time="1450" value="160"/>
+							<s:Keyframe time="1750" value="60"/>
+							<s:Keyframe time="2050" value="160"/>
+							<s:Keyframe time="2350" value="60"/>
+							<s:Keyframe time="2650" value="160"/>
+							<s:Keyframe time="2950" value="60"/>
 						</s:keyframes>
 					</s:MotionPath>
 				</s:motionPaths>
 		</s:AnimateTransform>
 	</fx:Declarations>
 	
-	<fx:Style>
-		@namespace "library://ns.adobe.com/flex/spark";
+	<s:Panel title="AnimateTransform Effect Sample (Bounce)" width="100%" height="100%">
 		
-		Button:up{ 
-			baseColor: #000000; 
-			color: #FFFFFF; 
-			fontWeight: "bold";
-		}
-		Button:over{ 
-			baseColor: #878787; 
-			color: #FFFFFF; 
-			fontWeight: "bold";
-		}
-		Button:down{ 
-			baseColor: #878787; 
-			color: #000000; 
-			fontWeight: "bold";
-		}
-		Button:disabled { 
-			baseColor: #FFFFFF; 
-			color: #878787; 
-			fontWeight: "bold";
-		}
-		Label { 
-			fontFamily: "Arial";
-			fontWeight: "bold";
-		}
-	</fx:Style>
-	
-	<!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
-	source tabs for each sample.	-->
-	<s:Panel title="AnimateTransform Effect Sample (Bounce)" 
-			 width="100%" height="100%" 
-			 skinClass="skins.TDFPanelSkin">
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
 		
-		<s:Group left="3">
-			<mx:Image y="0" id="myImage" 
-					  source="@Embed(source='assets/ApacheFlexIcon.png')"
-					  click="bounceEffect.end();bounceEffect.play();"/>	
-		</s:Group>
+		<s:Label text="Click the Apache Flex logo to bounce it!" />
 		
-		<s:HGroup bottom="5" left="3">
-			<s:Label text="Click the Apache Flex logo to bounce it!" color="0x000000"/>
-		</s:HGroup>
-		<s:HGroup top="5" right="5">
-			<s:VGroup width="100%" >
-				<s:Label text="Cross Fade Sample" fontSize="18" color="#B7B6B6"/>
-				<s:Label width="250" verticalAlign="justify" color="#323232" 
-							  text="Unlike the Animate class, which you can use to animate any target property, the AnimateTransform effect only supports the animation of certain properties on the target. To use keyframes and motion paths with the AnimateTransform effect, use the MotionPath class to specify keyframes for one or more of the following properties of the AnimateTransform class:
-							  movement (translationX, translationY, and translationZ), rotation (rotationX, rotationY, and rotationZ), scale (scaleX, scaleY, and scaleZ)."/>
-			</s:VGroup>
-		</s:HGroup>
+		<s:Label width="250" verticalAlign="justify" 
+					  text="Unlike the Animate class, which you can use to animate any target property, the AnimateTransform effect only supports the animation of certain properties on the target. To use keyframes and motion paths with the AnimateTransform effect, use the MotionPath class to specify keyframes for one or more of the following properties of the AnimateTransform class:
+					  movement (translationX, translationY, and translationZ), rotation (rotationX, rotationY, and rotationZ), scale (scaleX, scaleY, and scaleZ)."/>
 	</s:Panel>
+		
+	<mx:Image x="20" y="60" id="myImage" 
+			  source="@Embed(source='assets/ApacheFlexIcon.png')"
+			  click="bounceEffect.end();bounceEffect.play()"/>	
 	
 </s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/effects/CrossFadeExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/CrossFadeExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/CrossFadeExample.mxml
index 4ce258e..6833432 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/effects/CrossFadeExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/CrossFadeExample.mxml
@@ -36,9 +36,7 @@
 		</s:Transition>
 	</s:transitions>
 	
-	<s:Panel title="CrossFade Effect Sample with Transition"
-		width="100%" height="100%" 
-		skinClass="skins.TDFPanelSkin">
+	<s:Panel title="CrossFade Effect Sample with Transition" width="100%" height="100%">
 		
 		<s:HGroup verticalCenter="0" horizontalCenter="0">
 			<s:VGroup>
@@ -53,12 +51,12 @@
 				</s:Group>
 				<s:Button id="playButton" left="264" bottom="174"
 						  label="Cross Fade"
-						  click="currentState = (currentState == 'flipped') ? 'default' : 'flipped';" y.default="-33"/>
+						  click="currentState = (currentState == 'flipped') ? 'default' : 'flipped'" y.default="-33"/>
 			</s:VGroup>
 			<mx:Spacer width="50"/>
 			<s:VGroup width="100%" >
-				<s:Label text="Cross Fade Sample" fontSize="18" color="#B7B6B6"/>
-				<s:Label width="250" verticalAlign="justify" color="#323232" 
+				<s:Label text="Cross Fade Sample" fontSize="18"/>
+				<s:Label width="250" verticalAlign="justify" 
 						 text="The CrossFade effect performs a bitmap transition effect by running a crossfade between the first and second bitmaps. 
 						 The crossfade blends the two bitmaps over the duration of the animation."/>
 			</s:VGroup>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/effects/FadeExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/FadeExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/FadeExample.mxml
index 54d62c4..8fcbef3 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/effects/FadeExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/FadeExample.mxml
@@ -25,36 +25,33 @@
 	<fx:Declarations>
 		<s:Fade id="fadeEffect" target="{targetImg}" alphaFrom="{Number(fromVal.text)}" alphaTo="{Number(toVal.text)}"
 				repeatCount="2" repeatBehavior="reverse" effectStart="playButton.enabled=false"
-				effectEnd="playButton.enabled=true;"/>
+				effectEnd="playButton.enabled=true"/>
 	</fx:Declarations>
 	
-	<s:Panel title="Fade Effect Sample"
-			 width="100%" height="100%" 
-			 skinClass="skins.TDFPanelSkin">
+	<s:Panel title="Fade Effect Sample" width="100%" height="100%">
 		
-		<s:HGroup verticalCenter="0" horizontalCenter="0">
-			<s:VGroup>
-				<s:HGroup verticalAlign="middle">
-					<s:Label text="Fade alpha from:" verticalAlign="bottom"/>
-					<s:TextInput id="fromVal" text="1.0" widthInChars="3"/>
-				</s:HGroup>
-				<s:HGroup verticalAlign="middle">
-					<s:Label text="Fade alpha to:" verticalAlign="bottom"/>
-					<s:TextInput id="toVal" text="0.0" widthInChars="3"/>
-				</s:HGroup>
-				<s:Button id="playButton"
-						  left="5" bottom="5"
-						  label="Fade" click="fadeEffect.play();"/>
-			</s:VGroup>
-			
-			<s:BitmapImage id="targetImg" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
-			
-			<s:VGroup width="100%" >
-				<s:Label text="Fade Sample" fontSize="18" color="#B7B6B6"/>
-				<s:Label width="180" verticalAlign="justify" color="#323232" 
-							 text="The Fade effect changes the alpha of a target using the following parameters: alphaFrom, alphaTo. Click 'Fade' to watch the effect."/>
-			</s:VGroup>	
-		</s:HGroup>
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+		
+		<s:VGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Fade alpha from:" verticalAlign="bottom"/>
+				<s:TextInput id="fromVal" text="1.0" widthInChars="3"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Fade alpha to:" verticalAlign="bottom"/>
+				<s:TextInput id="toVal" text="0.0" widthInChars="3"/>
+			</s:HGroup>
+			<s:Button id="playButton"
+					  left="5" bottom="5"
+					  label="Fade" click="fadeEffect.play()"/>
+		</s:VGroup>
+		
+		<s:BitmapImage id="targetImg" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+		
+		<s:Label width="180" verticalAlign="justify" 
+					 text="The Fade effect changes the alpha of a target using the following parameters: alphaFrom, alphaTo. Click 'Fade' to watch the effect."/>
 		
 	</s:Panel>
 </s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/effects/Move3DExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/Move3DExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/Move3DExample.mxml
index b40ada6..dfe6b03 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/effects/Move3DExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/Move3DExample.mxml
@@ -41,59 +41,55 @@
 				   zFrom="{targetImg.z}" zBy="{Number(zVal.text)}"
 				   duration="{duration.value}"
 				   repeatCount="{repeatCnt.value}" repeatBehavior="{chkReverse.selected?'reverse':'loop'}"
-				   effectStart="this.targetImg.alpha=.7" effectEnd="this.targetImg.alpha=1.0;"/>
+				   effectStart="this.targetImg.alpha=.7" effectEnd="this.targetImg.alpha=1.0"/>
 	</fx:Declarations>
 	
-	<!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
-	source tabs for each sample.	-->
-	<s:Panel width="100%" height="100%" 
-			 horizontalCenter="0" 
-			 title="Move3D Effect Sample" 
-			 skinClass="skins.TDFPanelSkin">
+	<s:Panel title="Move3D Effect Sample" width="100%" height="100%" >
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+		
+		<s:VGroup>
 		
-		<s:HGroup left="10" top="5" width="100%" height="100%" horizontalCenter="0">
-			<s:VGroup width="40%">
-				
-			
 			<s:HGroup verticalAlign="middle">
 				<s:Label text="Move X By" verticalAlign="bottom"/>
 				<s:TextInput id="xVal" text="40" widthInChars="3"/>
 			</s:HGroup>
-				
-				<s:HGroup verticalAlign="middle">
-					<s:Label text="Move Y By" verticalAlign="bottom"/>
-					<s:TextInput id="yVal" text="40" widthInChars="3"/>
-				</s:HGroup>
-				<s:HGroup verticalAlign="middle">
-					<s:Label text="Move Z By" verticalAlign="bottom"/>
-					<s:TextInput id="zVal" text="-150" widthInChars="3"/>
-				</s:HGroup>
-				<s:HGroup verticalAlign="middle">
-					<s:Label text="Repeat Num" verticalAlign="bottom"/>
-					<s:NumericStepper id="repeatCnt" width="35" 
-									  value="2" minimum="1"/>
-				</s:HGroup>
-				<s:HGroup verticalAlign="middle">
-					<s:Label text="Duration" verticalAlign="bottom"/>
-					<s:NumericStepper id="duration" width="58" 
-									  minimum="100" maximum="9999"  
-									  value="1000"  
-									  snapInterval="100" />
-				</s:HGroup>
-				<s:CheckBox id="chkReverse" label="Repeat in Reverse?" selected="true"/>
-				<s:Button id="playButton"
-						  label="Move Image" click="moveEffect.play();"/>
-			</s:VGroup>
-			<s:HGroup horizontalCenter="0" height="30%" verticalAlign="middle" width="40%">
-				<s:BitmapImage id="targetImg" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>				
+			
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Move Y By" verticalAlign="bottom"/>
+				<s:TextInput id="yVal" text="40" widthInChars="3"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Move Z By" verticalAlign="bottom"/>
+				<s:TextInput id="zVal" text="-150" widthInChars="3"/>
 			</s:HGroup>
-			<s:VGroup top="0" right="5" horizontalAlign="right" width="30%">
-				<s:Label text="Move3D Effect Sample" fontSize="18" color="#B7B6B6"/>
-				<s:Label color="#323232" width="200" verticalAlign="justify"
-						 text="The Move3D class moves a target object in three dimensions around the transform center. A scale of 
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Repeat Num" verticalAlign="bottom"/>
+				<s:NumericStepper id="repeatCnt" width="35" 
+								  value="2" minimum="1"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Duration" verticalAlign="bottom"/>
+				<s:NumericStepper id="duration" width="58" 
+								  minimum="100" maximum="9999"  
+								  value="1000"  
+								  snapInterval="100" />
+			</s:HGroup>
+			<s:CheckBox id="chkReverse" label="Repeat in Reverse?" selected="true"/>
+			<s:Button id="playButton"
+					  label="Move Image" click="moveEffect.play()"/>
+		</s:VGroup>
+		<s:HGroup>
+			<s:BitmapImage id="targetImg" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>				
+		</s:HGroup>
+		<s:VGroup>
+			<s:Label text="Move3D Effect Sample" fontSize="18"/>
+			<s:Label width="200" verticalAlign="justify"
+					 text="The Move3D class moves a target object in three dimensions around the transform center. A scale of 
 2.0 means the object has been magnified by a factor of 2, and a scale of 0.5 means the object has been 
 reduced by a factor of 2. A scale value of 0.0 is invalid."/>
-			</s:VGroup>
-		</s:HGroup>
+		</s:VGroup>
 	</s:Panel>
 </s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/effects/Rotate3DExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/Rotate3DExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/Rotate3DExample.mxml
index 3fc6364..4680a79 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/effects/Rotate3DExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/Rotate3DExample.mxml
@@ -29,55 +29,48 @@
 					angleZFrom="0.0" angleZTo="{Number(zVal.text)}"
 					duration="{duration.value}"
 					repeatCount="{repeatCnt.value}" repeatBehavior="{chkReverse.selected?'reverse':'loop'}"
-				   	effectStart="this.targetImg.alpha=.8" effectEnd="this.targetImg.alpha=1.0;"/>
+				   	effectStart="this.targetImg.alpha=.8" effectEnd="this.targetImg.alpha=1.0"/>
 	</fx:Declarations>
 	
-	<!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
-	source tabs for each sample.	-->
-	<s:Panel width="100%" height="100%" 
-			 horizontalCenter="0" 
-			 title="Rotate3D Effect Sample" 
-			 skinClass="skins.TDFPanelSkin">
+	<s:Panel title="Rotate3D Effect Sample" width="100%" height="100%">
 		
-		<s:HGroup horizontalCenter="0" top="10">
-			<s:VGroup >
-				<s:HGroup verticalAlign="middle">
-					<s:Label text="Rotate X To" verticalAlign="bottom"/>
-					<s:TextInput id="xVal" text="0.0" widthInChars="3"/>
-				</s:HGroup>
-				<s:HGroup verticalAlign="middle">
-					<s:Label text="Rotate Y By" verticalAlign="bottom"/>
-					<s:TextInput id="yVal" text="360.0" widthInChars="3"/>
-				</s:HGroup>
-				<s:HGroup verticalAlign="middle">
-					<s:Label text="Rotate Z To" verticalAlign="bottom"/>
-					<s:TextInput id="zVal" text="0.0" widthInChars="3"/>
-				</s:HGroup>
-				<s:HGroup verticalAlign="middle">
-					<s:Label text="Repeat Num" verticalAlign="bottom"/>
-					<s:NumericStepper id="repeatCnt" value="2" width="35" minimum="1"/>
-				</s:HGroup>
-				<s:HGroup verticalAlign="middle">
-					<s:Label text="Duration" verticalAlign="bottom"/>
-					<s:NumericStepper id="duration" width="58" 
-									  minimum="100" maximum="9999"  
-									  value="1000"  
-									  snapInterval="100" />
-				</s:HGroup>
-				<s:CheckBox id="chkReverse" label="Repeat in Reverse?" selected="true"/>
-				<s:Button id="playButton"
-						  label="Rotate Image" click="rotateEffect.play();"/>
-			</s:VGroup>
-			<s:HGroup horizontalCenter="0" height="60%" verticalAlign="middle" width="10%">
-				<s:BitmapImage id="targetImg" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+		
+		<s:VGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Rotate X To" verticalAlign="bottom"/>
+				<s:TextInput id="xVal" text="0.0" widthInChars="3"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Rotate Y By" verticalAlign="bottom"/>
+				<s:TextInput id="yVal" text="360.0" widthInChars="3"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Rotate Z To" verticalAlign="bottom"/>
+				<s:TextInput id="zVal" text="0.0" widthInChars="3"/>
 			</s:HGroup>
-			<s:VGroup top="0" right="5" horizontalAlign="right">
-				<s:Label text="Rotate3D Effect Sample" fontSize="18" color="#B7B6B6"/>
-				<s:Label color="#323232" width="200" verticalAlign="justify"
-							  text="The Rotate3D class rotates a target object in three dimensions around the x, y, or z
-axes. The rotation occurs around the transform center of the target." textAlign="left"/>
-			</s:VGroup>
-		</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Repeat Num" verticalAlign="bottom"/>
+				<s:NumericStepper id="repeatCnt" value="2" width="35" minimum="1"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Duration" verticalAlign="bottom"/>
+				<s:NumericStepper id="duration" width="58" 
+								  minimum="100" maximum="9999"  
+								  value="1000"  
+								  snapInterval="100" />
+			</s:HGroup>
+			<s:CheckBox id="chkReverse" label="Repeat in Reverse?" selected="true"/>
+			<s:Button id="playButton"
+					  label="Rotate Image" click="rotateEffect.play()"/>
+		</s:VGroup>
 		
+		<s:BitmapImage id="targetImg" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+
+		<s:Label width="200" verticalAlign="justify"
+				 text="The Rotate3D class rotates a target object in three dimensions around the x, y, or z
+axes. The rotation occurs around the transform center of the target." textAlign="left"/>		
 	</s:Panel>
 </s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/effects/Scale3DExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/Scale3DExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/Scale3DExample.mxml
index 5d8e7c7..eb265b5 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/effects/Scale3DExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/Scale3DExample.mxml
@@ -29,59 +29,51 @@
 				   scaleZFrom="1.0" scaleZTo="{Number(zVal.text)}"
 				   duration="{duration.value}"
 				   repeatCount="{repeatCnt.value}" repeatBehavior="{chkReverse.selected?'reverse':'loop'}"
-				   effectStart="this.targetImg.alpha=.7" effectEnd="this.targetImg.alpha=1.0;"/>
+				   effectStart="this.targetImg.alpha=.7" effectEnd="this.targetImg.alpha=1.0"/>
 	</fx:Declarations>
 	
-	<!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
-	source tabs for each sample.	-->
-	<s:Panel width="100%" height="100%" 
-			 horizontalCenter="0" 
-			 title="Scale3D Effect Sample" 
-			 skinClass="skins.TDFPanelSkin">
+	<s:Panel title="Scale3D Effect Sample" width="100%" height="100%">
 		
-		<s:HGroup left="5" top="5" width="100%" height="100%" horizontalCenter="0">
-			<s:VGroup width="40%">
-				<s:HGroup verticalAlign="middle">
-					<s:Label text="Scale X To" verticalAlign="bottom"/>
-					<s:TextInput id="xVal" text="0.5" widthInChars="3"/>
-				</s:HGroup>
-				<s:HGroup verticalAlign="middle">
-					<s:Label text="Scale Y To" verticalAlign="bottom"/>
-					<s:TextInput id="yVal" text="0.5" widthInChars="3"/>
-				</s:HGroup>
-				<s:HGroup verticalAlign="middle">
-					<s:Label text="Scale Z To" verticalAlign="bottom"/>
-					<s:TextInput id="zVal" text="1.0" widthInChars="3"/>
-				</s:HGroup>
-				<s:HGroup verticalAlign="middle">
-					<s:Label text="Repeat Num" verticalAlign="bottom"/>
-					<s:NumericStepper id="repeatCnt" width="35" 
-									  value="2" minimum="1"/>
-				</s:HGroup>
-				<s:HGroup verticalAlign="middle">
-					<s:Label text="Duration" verticalAlign="bottom"/>
-					<s:NumericStepper id="duration" width="58" 
-									  minimum="100" maximum="9999"  
-									  value="1000"  
-									  snapInterval="100" />
-				</s:HGroup>
-				<s:CheckBox id="chkReverse" label="Repeat in Reverse?" selected="true"/>
-				<s:Button id="playButton"
-						  label="Scale Image" click="scaleEffect.play();"/>
-			</s:VGroup>
-			<s:HGroup horizontalCenter="0" height="30%" verticalAlign="middle" width="40%">
-				<s:BitmapImage id="targetImg" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>				
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+
+		<s:VGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Scale X To" verticalAlign="bottom"/>
+				<s:TextInput id="xVal" text="0.5" widthInChars="3"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Scale Y To" verticalAlign="bottom"/>
+				<s:TextInput id="yVal" text="0.5" widthInChars="3"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Scale Z To" verticalAlign="bottom"/>
+				<s:TextInput id="zVal" text="1.0" widthInChars="3"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Repeat Num" verticalAlign="bottom"/>
+				<s:NumericStepper id="repeatCnt" width="35" 
+								  value="2" minimum="1"/>
 			</s:HGroup>
-			<s:VGroup top="0" right="5" horizontalAlign="right" width="30%">
-				<s:Label text="Scale3D Effect Sample" fontSize="18" color="#B7B6B6"/>
-				<s:Label color="#323232" width="200" verticalAlign="justify"
-							  text="The Scale3D class scales a target object in three dimensions around the transform center. A scale of 
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Duration" verticalAlign="bottom"/>
+				<s:NumericStepper id="duration" width="58" 
+								  minimum="100" maximum="9999"  
+								  value="1000"  
+								  snapInterval="100" />
+			</s:HGroup>
+			<s:CheckBox id="chkReverse" label="Repeat in Reverse?" selected="true"/>
+			<s:Button id="playButton"
+					  label="Scale Image" click="scaleEffect.play()"/>
+		</s:VGroup>
+		
+		<s:BitmapImage id="targetImg" width="50%" height="50%" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+		
+		<s:Label width="200" verticalAlign="justify"
+				 text="The Scale3D class scales a target object in three dimensions around the transform center. A scale of 
 2.0 means the object has been magnified by a factor of 2, and a scale of 0.5 means the object has been 
-reduced by a factor of 2. A scale value of 0.0 is invalid."/>
-			</s:VGroup>
-		</s:HGroup>
-	
-			
+reduced by a factor of 2. A scale value of 0.0 is invalid."/>	
 		
 	</s:Panel>
 </s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/effects/WipeExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/WipeExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/WipeExample.mxml
index ac96897..fb0312b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/effects/WipeExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/WipeExample.mxml
@@ -36,7 +36,7 @@
 		</s:Transition>
 	</s:transitions>
 	
-	<s:Panel title="Wipe Effect Example" skinClass="skins.TDFPanelSkin"
+	<s:Panel title="Wipe Effect Example" 
 			 width="100%" height="100%">
 		
 		<s:HGroup horizontalCenter="0" top="15" >
@@ -52,7 +52,7 @@
 				</s:Group>
 				<s:Button 
 					label="Wipe Right"
-					click="currentState = (currentState == 'flipped') ? 'default' : 'flipped';" />
+					click="currentState = (currentState == 'flipped') ? 'default' : 'flipped'" />
 			</s:VGroup>
 			
 			

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/events/EventExample1.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample1.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample1.mxml
index e7557f4..a343bb8 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample1.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample1.mxml
@@ -19,8 +19,7 @@
 -->
 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
-			   xmlns:mx="library://ns.adobe.com/flex/mx" 
-			   skinClass="TDFGradientBackgroundSkin">
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
 	<fx:Script>
 		<![CDATA[
@@ -28,14 +27,8 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
 	<s:Panel title="Handling Events - Inline property Sample"
-			 width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+			 width="100%" height="100%">
 		
 		<s:layout>
 			<s:VerticalLayout horizontalAlign="center" 

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/events/EventExample2.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample2.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample2.mxml
index 075743b..98a3876 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample2.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample2.mxml
@@ -19,8 +19,7 @@
 -->
 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
-			   xmlns:mx="library://ns.adobe.com/flex/mx" 
-			   skinClass="TDFGradientBackgroundSkin">
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
 	<fx:Script>
 		<![CDATA[
@@ -28,14 +27,8 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
 	<s:Panel title="Handling Events - Inline Block Sample"
-			 width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+			 width="100%" height="100%">
 		
 		<s:layout>
 			<s:VerticalLayout horizontalAlign="center" 

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/events/EventExample3.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample3.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample3.mxml
index 780d0da..8fc2376 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample3.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample3.mxml
@@ -19,8 +19,7 @@
 -->
 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
-			   xmlns:mx="library://ns.adobe.com/flex/mx" 
-			   skinClass="TDFGradientBackgroundSkin">
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
 	<fx:Script>
 		<![CDATA[
@@ -34,14 +33,8 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
 	<s:Panel title="Handling Events - Function Sample"
-			 width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+			 width="100%" height="100%">
 		
 		<s:layout>
 			<s:VerticalLayout horizontalAlign="center" 

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/events/EventExample4.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample4.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample4.mxml
index 609302f..be76c29 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample4.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample4.mxml
@@ -19,8 +19,7 @@
 -->
 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
-			   xmlns:mx="library://ns.adobe.com/flex/mx" 
-			   skinClass="TDFGradientBackgroundSkin">
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
 	<fx:Script>
 		<![CDATA[
@@ -34,14 +33,8 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
 	<s:Panel title="Handling Events - Function with addEventListener Sample"
-			 width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+			 width="100%" height="100%">
 		
 		<s:layout>
 			<s:VerticalLayout horizontalAlign="center" 

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/events/EventExample5.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample5.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample5.mxml
index 4ffe293..bc4d275 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample5.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample5.mxml
@@ -20,8 +20,7 @@
 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
 			   xmlns:mx="library://ns.adobe.com/flex/mx" 
-			   xmlns:local="*"
-			   skinClass="TDFGradientBackgroundSkin">
+			   xmlns:local="*">
 	
 	<fx:Script>
 		<![CDATA[
@@ -29,20 +28,13 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
-	<fx:Declarations>
-		
+	<fx:Declarations>	
 		<!-- Dispatching an Event -->
 		<local:FiveSecondTrigger triggered="Alert.show('five second event triggered')"/>
 	</fx:Declarations>
 	
 	<s:Panel title="Dispatching Events Sample"
-			 width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+			 width="100%" height="100%">
 		
 		<s:layout>
 			<s:VerticalLayout horizontalAlign="center" 

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/events/EventExample6.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample6.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample6.mxml
index eb82cfb..d2359ee 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample6.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample6.mxml
@@ -19,23 +19,16 @@
 -->
 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
-			   xmlns:mx="library://ns.adobe.com/flex/mx" 
-			   skinClass="TDFGradientBackgroundSkin">
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
 	<fx:Script>
 		<![CDATA[
 			import mx.controls.Alert;
 		]]>
 	</fx:Script>
-	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
+
 	<s:Panel title="Dispatching Custom Events Sample"
-			 width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+			 width="100%" height="100%">
 		
 		<s:layout>
 			<s:VerticalLayout horizontalAlign="center" 

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml
index 07c52f5..ab6a551 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml
@@ -19,8 +19,7 @@
 -->
 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
-			   xmlns:mx="library://ns.adobe.com/flex/mx" 
-			   skinClass="TDFGradientBackgroundSkin">
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
 	<fx:Script>
 		<![CDATA[
@@ -44,11 +43,7 @@
 			}
 		]]>
 	</fx:Script>
-	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
+
 	<fx:Declarations>
 		<mx:CurrencyFormatter id="usdFormatter" precision="2" currencySymbol="$" decimalSeparatorFrom="."  rounding="nearest"
 							  decimalSeparatorTo="." useNegativeSign="true" useThousandsSeparator="true" alignSymbol="left"/>
@@ -57,17 +52,13 @@
 	</fx:Declarations>
 	
 	
-	<s:Panel title="CurrencyFormatter Example" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="CurrencyFormatter Example" width="100%" height="100%">
 		
 		<s:layout>
-			<s:HorizontalLayout horizontalAlign="center" 
-								paddingLeft="10" paddingRight="10" 
-								paddingTop="10" paddingBottom="10"/>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		
-		<mx:Form color="0x323232">
+		<mx:Form>
 			<mx:FormItem label="Enter dollar amount:">
 				<s:TextInput id="priceUS" text="" width="50%"/>
 			</mx:FormItem>
@@ -77,7 +68,7 @@
 			</mx:FormItem>
 			
 			<mx:FormItem>
-				<s:Button label="Validate and Format" click="Format();"/>
+				<s:Button label="Validate and Format" click="Format()"/>
 			</mx:FormItem>
 		</mx:Form>
 		

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/formatters/DateFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/DateFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/DateFormatterExample.mxml
index 5162dd5..84eabf9 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/DateFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/DateFormatterExample.mxml
@@ -19,8 +19,7 @@
 -->
 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
-			   xmlns:mx="library://ns.adobe.com/flex/mx" 
-			   skinClass="TDFGradientBackgroundSkin">
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
 	<fx:Script>
         <![CDATA[
@@ -43,28 +42,19 @@
         ]]>
     </fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-    
 	<fx:Declarations>
 		<mx:DateFormatter id="dateFormatter" formatString="month: MM, day: DD, year: YYYY"/>
 		
 		<mx:DateValidator id="dateVal" source="{dob}" property="text" inputFormat="mm/dd/yyyy"/>
 	</fx:Declarations>
     
-    
-	<s:Panel title="DateFormatter Example" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="DateFormatter Example" width="100%" height="100%">
 		
 		<s:layout>
-			<s:HorizontalLayout horizontalAlign="center" 
-								paddingLeft="10" paddingRight="10" 
-								paddingTop="10" paddingBottom="10"/>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
          
-         <mx:Form width="100%" color="0x323232">
+         <mx:Form width="100%">
             <mx:FormItem label="Enter date (mm/dd/yyyy):" width="100%">
                 <s:TextInput id="dob" text=""/>
             </mx:FormItem>
@@ -74,7 +64,7 @@
             </mx:FormItem>
 
             <mx:FormItem>
-                <s:Button label="Validate and Format" click="Format();"/>
+                <s:Button label="Validate and Format" click="Format()"/>
             </mx:FormItem>
         </mx:Form>
         

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/formatters/NumberFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/NumberFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/NumberFormatterExample.mxml
index e0c9127..f304565 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/NumberFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/NumberFormatterExample.mxml
@@ -19,8 +19,7 @@
 -->
 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
-			   xmlns:mx="library://ns.adobe.com/flex/mx" 
-			   skinClass="TDFGradientBackgroundSkin">
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
 	<fx:Script>
 		<![CDATA[
@@ -44,26 +43,18 @@
 			}
 		]]>
 	</fx:Script>
-	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
+
 	<fx:Declarations>
 		<mx:NumberFormatter id="numberFormatter" />
 	</fx:Declarations>
 	
-	<s:Panel title="Formatter Example" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="Formatter Example" width="100%" height="100%">
 		
 		<s:layout>
-			<s:HorizontalLayout horizontalAlign="center" 
-								paddingLeft="10" paddingRight="10" 
-								paddingTop="10" paddingBottom="10"/>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		
-		<mx:Form color="0x323232">
+		<mx:Form>
 			<mx:FormItem label="Enter number - a letter is invalid:">
 				<s:TextInput id="inputVal" text="" width="75%"/>
 			</mx:FormItem>
@@ -73,7 +64,7 @@
 			</mx:FormItem>
 			
 			<mx:FormItem>
-				<s:Button label="Validate and Format" click="Format();"/>
+				<s:Button label="Validate and Format" click="Format()"/>
 			</mx:FormItem>
 		</mx:Form>
 		

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/formatters/PhoneFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/PhoneFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/PhoneFormatterExample.mxml
index 49f114c..5aef11b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/PhoneFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/PhoneFormatterExample.mxml
@@ -19,8 +19,7 @@
 -->
 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
-			   xmlns:mx="library://ns.adobe.com/flex/mx" 
-			   skinClass="TDFGradientBackgroundSkin">
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
 	<fx:Script>
 		<![CDATA[
@@ -42,28 +41,20 @@
 			}
 		]]>
 	</fx:Script>
-	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
+
 	<fx:Declarations>
 		<mx:PhoneFormatter id="phoneFormatter" formatString="(###) ###-####" validPatternChars="#-() "/>
 		
 		<mx:PhoneNumberValidator id="pnVal" source="{phone}" property="text" allowedFormatChars=""/>
 	</fx:Declarations>
 	
-	<s:Panel title="PhoneNumberValidator Example" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="PhoneNumberValidator Example" width="100%" height="100%">
 		
 		<s:layout>
-			<s:HorizontalLayout horizontalAlign="center" 
-								paddingLeft="10" paddingRight="10" 
-								paddingTop="10" paddingBottom="10"/>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		
-		<mx:Form color="0x323232">
+		<mx:Form>
 			<mx:FormItem label="Enter a 10-digit phone number:">
 				<s:TextInput id="phone" text="" width="75%"/>
 			</mx:FormItem>
@@ -73,7 +64,7 @@
 			</mx:FormItem>
 			
 			<mx:FormItem>
-				<s:Button label="Validate and Format" click="Format();"/>
+				<s:Button label="Validate and Format" click="Format()"/>
 			</mx:FormItem>
 		</mx:Form>
 		

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml
index 084d0aa..1402e0c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml
@@ -19,8 +19,7 @@
 -->
 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
-			   xmlns:mx="library://ns.adobe.com/flex/mx" 
-			   skinClass="TDFGradientBackgroundSkin">
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
 	<fx:Script>
         <![CDATA[
@@ -48,31 +47,23 @@
             }
         ]]>
     </fx:Script>
-	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
     
 	<fx:Declarations>
 		<mx:SocialSecurityValidator id="scVal" source="{scNum}" property="text"/>
 	</fx:Declarations>
    
         
-	<s:Panel title="SwitchSymbolFormatter Example" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="SwitchSymbolFormatter Example" width="100%" height="100%">
 		
 		<s:layout>
-			<s:HorizontalLayout horizontalAlign="center" 
-								paddingLeft="10" paddingRight="10" 
-								paddingTop="10" paddingBottom="10"/>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
          
-         <mx:Form color="0x323232" width="100%">
+         <mx:Form width="100%">
          	<s:Label text="Enter a 9 digit Social Security number with no separator characters:" />
          	
          	<s:TextInput id="scNum" text="" width="50%" maxChars="9"/>
-            <s:Button label="Validate and Format" click="Format();"/>
+            <s:Button label="Validate and Format" click="Format()"/>
 			
             <mx:FormItem label="formatted Social Security number:">
                 <s:Label id="formattedSCNumber" text="" />

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml
index 16ab586..4a425cb 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml
@@ -19,8 +19,7 @@
 -->
 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
-			   xmlns:mx="library://ns.adobe.com/flex/mx" 
-			   skinClass="TDFGradientBackgroundSkin">
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
 	<fx:Script>
         <![CDATA[
@@ -44,27 +43,19 @@
         ]]>      
     </fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
 	<fx:Declarations>
 		<mx:ZipCodeFormatter id="zipFormatter" formatString="#####-####"/>
 
     <mx:ZipCodeValidator id="zcVal" source="{zip}" property="text" allowedFormatChars=""/>
 	</fx:Declarations>
     
-	<s:Panel title="ZipCodeFormatter Example" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="ZipCodeFormatter Example" width="100%" height="100%">
 		
 		<s:layout>
-			<s:HorizontalLayout horizontalAlign="center" 
-								paddingLeft="10" paddingRight="10" 
-								paddingTop="10" paddingBottom="10"/>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
          
-         <mx:Form width="100%" color="0x323232">
+         <mx:Form width="100%">
             <mx:FormItem label="Enter a 5 or 9 digit U.S. ZIP code:" width="100%">
                 <s:TextInput id="zip" text=""/>
             </mx:FormItem>
@@ -74,7 +65,7 @@
             </mx:FormItem>
 
             <mx:FormItem>
-                <s:Button label="Validate and Format" click="Format();"/>
+                <s:Button label="Validate and Format" click="Format()"/>
             </mx:FormItem>
         </mx:Form>
         

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/fxg/BitmapImageExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/BitmapImageExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/BitmapImageExample.mxml
index 3cdcd76..bc792d0 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/fxg/BitmapImageExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/BitmapImageExample.mxml
@@ -18,13 +18,10 @@
 
 -->
 <!-- BitmapGraphicExample.mxml -->
-<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
-			   width="694" height="277">
-	    <s:Panel title="BitmapImage Sample"
-            width="100%" height="100%"
-            horizontalCenter="0" verticalCenter="0" skinClass="skins.TDFPanelSkin">
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
+	<s:Panel title="BitmapImage Sample" width="100%" height="100%">
 		<s:layout>
-			<s:HorizontalLayout paddingLeft="15" paddingRight="15" paddingTop="15" paddingBottom="15"/>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		<s:VGroup>
 			<s:ComboBox id="fillModes" selectedItem="repeat">
@@ -66,7 +63,7 @@
         </s:Graphic>
 
         
-		<s:Label color="0x323232" width="200" text="A BitmapImage element defines a rectangular region in its parent element's coordinate space, filled with bitmap data drawn from a source file."/>
+		<s:Label width="200" text="A BitmapImage element defines a rectangular region in its parent element's coordinate space, filled with bitmap data drawn from a source file."/>
     </s:Panel>
 
 </s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/fxg/DropShadowGraphicExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/DropShadowGraphicExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/DropShadowGraphicExample.mxml
index 3e123ea..5705448 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/fxg/DropShadowGraphicExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/DropShadowGraphicExample.mxml
@@ -23,7 +23,7 @@
 	
 	<s:Panel width="100%" height="100%"
 			 title="DropShadows with MXML Graphics Example"
-			 skinClass="skins.TDFPanelSkin" x="0">
+			 x="0">
 			  
 	    <s:Group horizontalCenter="0" y="5" width="117">
 			<s:Graphic id="ellipse1">
@@ -54,7 +54,7 @@
 			</s:Graphic>
 			
 		</s:Group>
-	    <s:Label width="250" verticalAlign="justify" color="#323232" x="10" y="30" 
+	    <s:Label width="250" verticalAlign="justify" x="10" y="30" 
 	    			  text="The DropShadowFilter class lets you add a drop shadow to display
 objects. The shadow algorithm is based on the same box filter that the blur filter uses. You have 
 several options for the style of the drop shadow, including inner or outer shadow and knockout mode. 

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/fxg/EclipseExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/EclipseExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/EclipseExample.mxml
index 0e89a7b..275ac4c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/fxg/EclipseExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/EclipseExample.mxml
@@ -21,7 +21,7 @@
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
 			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
-	<s:Panel title="Ellipse Graphic Sample" skinClass="skins.TDFPanelSkin"
+	<s:Panel title="Ellipse Graphic Sample" 
 			 width="100%" height="100%">
 		
 		<s:Graphic horizontalCenter="0" verticalCenter="0">
@@ -40,7 +40,7 @@
 				</s:fill>
 			</s:Ellipse>
 		</s:Graphic>
-		<s:Label right="25" top="10" width="270" color="0x323232" text="The Ellipse class is a filled graphic element that draws an ellipse. Graphic
+		<s:Label right="25" top="10" width="270" text="The Ellipse class is a filled graphic element that draws an ellipse. Graphic
 objects are placed in a Graphic tag which defines the root of an FXG document."/>
 	</s:Panel>
 </s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/fxg/EllipseTransformExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/EllipseTransformExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/EllipseTransformExample.mxml
index 19ce21f..83764f4 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/fxg/EllipseTransformExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/EllipseTransformExample.mxml
@@ -42,16 +42,22 @@
 				  b="0.34202014332"
 				  c="0.34202014332"
 				  d="0.939692620786"
-				  tx="100"
-				  ty="310"
+				  tx="50"
+				  ty="210"
 				  />
 	</fx:Declarations>
 	
-	<s:Label text="An Ellipse Using a Transform for Rotation" fontWeight="bold" fontSize="14" horizontalCenter="0"
-				  y="20" />
-	
-	<s:Label id="descriptionText" horizontalCenter="0" y="45" width="300"/>
-	<s:Ellipse id="ellipse1" width="60" height="70" horizontalCenter="0" y="90">
+	<s:Panel title="Ellipse Transform Sample" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+			
+		<s:Label text="An Ellipse Using a Transform for Rotation" />
+		
+		<s:Label id="descriptionText" width="300"/>
+		<s:Button label="Apply Transform" click="addMatrix()" x="40" y="330" />
+	</s:Panel>
+	<s:Ellipse id="ellipse1" width="60" height="70" x="40" y="120">
 		<s:fill>
 			<s:LinearGradient>
 				<s:GradientEntry color="#00FF00" alpha="1" ratio="0"/>
@@ -62,5 +68,4 @@
 			<s:SolidColorStroke color="0x666666" weight="1"/>
 		</s:stroke>
 	</s:Ellipse>
-	<s:Button label="Apply Transform" click="addMatrix()" x="40" y="330" />
 </s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/fxg/LineExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/LineExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/LineExample.mxml
index 9d5368a..a7bdb1c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/fxg/LineExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/LineExample.mxml
@@ -22,7 +22,7 @@
 			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
 	
-	<s:Panel title="Line Graphic Sample" width="100%" height="100%" skinClass="skins.TDFPanelSkin">
+	<s:Panel title="Line Graphic Sample" width="100%" height="100%" >
 		<s:Group left="133" top="100">
 			
 			<s:Line xFrom="0" xTo="0" yFrom="0" yTo="100">
@@ -90,7 +90,7 @@
 				</s:stroke>
 			</s:Line>
 		</s:Group>
-		<s:Label color="0x323232" right="20" top="15" width="250" text="The Line class is a graphic element that draws a line between two points.
+		<s:Label right="20" top="15" width="250" text="The Line class is a graphic element that draws a line between two points.
 The default stroke for a line is undefined; therefore, if you do not specify the stroke, the line is invisible."/>
 	</s:Panel>
 </s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml
index 42e7db7..7fb10f2 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml
@@ -28,10 +28,10 @@
 	
 	<s:Panel title="LinearGradient Control" 
 			  width="100%" height="100%"
-			 skinClass="skins.TDFPanelSkin">
+			 >
 		
 		<s:HGroup horizontalCenter="0" top="10">
-		<s:Label verticalAlign="justify" color="#323232" x="10" y="30" width="200"
+		<s:Label verticalAlign="justify" x="10" y="30" width="200"
 					  text="The LinearGradient class lets you specify the fill of a graphical element, where a gradient specifies a gradual color transition in the fill color. You add a series of GradientEntry objects to the LinearGradient object's entries Array to define the colors that make up the gradient fill."/>	
 		<s:Rect id="rect1" height="150" width="160" >
 			<s:fill>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/fxg/RectExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/RectExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/RectExample.mxml
index a131ac2..ace6e5a 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/fxg/RectExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/RectExample.mxml
@@ -20,13 +20,8 @@
 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
 			   xmlns:mx="library://ns.adobe.com/flex/mx">
-	<fx:Script>
-		<![CDATA[
-			import skins.TDFPanelSkin;
-		]]>
-	</fx:Script>
 	
-	<s:Panel title="Rect Graphic Sample" skinClass="skins.TDFPanelSkin"
+	<s:Panel title="Rect Graphic Sample" 
 			 width="100%" height="100%">
 		
 			 

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/fxg/RichTextExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/RichTextExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/RichTextExample.mxml
index f7aacd3..0475df6 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/fxg/RichTextExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/RichTextExample.mxml
@@ -21,7 +21,7 @@
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
 			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
-	<s:Panel title="RichText Sample" width="100%" height="100%" skinClass="skins.TDFPanelSkin">
+	<s:Panel title="RichText Sample" width="100%" height="100%" >
 		<s:layout>
 			<s:HorizontalLayout paddingLeft="8" paddingRight="8" paddingTop="8"/>
 		</s:layout>
@@ -36,7 +36,7 @@
 				</s:RichText>
 				<s:Rect width="100%" height="100%">
 					<s:stroke>
-						<s:SolidColorStroke color="blue"/>
+						<s:SolidColorStroke/>
 					</s:stroke>
 				</s:Rect>
 			</s:Group>
@@ -47,12 +47,12 @@
 				</s:RichText>
 				<s:Rect width="100%" height="100%">
 					<s:stroke>
-						<s:SolidColorStroke color="blue"/>
+						<s:SolidColorStroke/>
 					</s:stroke>
 				</s:Rect>
 			</s:Group>
 		</s:Group>
-		<s:Label width="270" color="0x323232" text="RichText is a low-level UIComponent that can display one or more lines of richly-formatted text and embedded images. For performance reasons, it does not support scrolling, selection, editing, clickable hyperlinks, or images loaded from URLs. If you need those capabilities, see the RichEditableText class."/>
+		<s:Label width="270" text="RichText is a low-level UIComponent that can display one or more lines of richly-formatted text and embedded images. For performance reasons, it does not support scrolling, selection, editing, clickable hyperlinks, or images loaded from URLs. If you need those capabilities, see the RichEditableText class."/>
 	</s:Panel>
 
 </s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/fxg/StaticFXGExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/StaticFXGExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/StaticFXGExample.mxml
index 3d86c9c..c82cfa6 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/fxg/StaticFXGExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/StaticFXGExample.mxml
@@ -23,16 +23,16 @@
                xmlns:fxg="*">
 	
 	
-	<s:Panel width="100%" height="100%"
-			 title="Static FXG Sample"
-			 skinClass="skins.TDFPanelSkin">
-		<s:Label verticalAlign="justify" color="#323232" x="10" y="30" width="200"
+	<s:Panel title="Static FXG Sample" width="100%" height="100%">
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label verticalAlign="justify" width="200"
 					  text="You can use a static file of fxg within your MXML. You include the inline
 component as shown here."/>
-					  		
-		<fxg:OrangeCrayonStar id="crayonStar" right="160"/>
 		
-		<s:VGroup right="180" bottom="20">
+		<s:VGroup>
 				<s:VGroup bottom="100">
 					<s:HSlider id="star_width" maximum="400" change="crayonStar.width=star_width.value" 
 							   horizontalCenter="-90" y="250" />
@@ -42,9 +42,10 @@ component as shown here."/>
 					<s:HSlider id="star_height" maximum="400" change="crayonStar.height=star_height.value" 
 							   horizontalCenter="90" y="250" />
 					<s:Label horizontalCenter="90" y="269" text="height"/>	
-				</s:VGroup>	
-			
+				</s:VGroup>				
 		</s:VGroup>
+		
+		<fxg:OrangeCrayonStar id="crayonStar" />
 	</s:Panel>
 	
 	

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.mxml
index 815f269..81e20fe 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.mxml
@@ -21,24 +21,6 @@
 			   xmlns:s="library://ns.adobe.com/flex/spark"
 			   xmlns:mx="library://ns.adobe.com/flex/mx"
 			   width="100%" height="100%" creationComplete="compareStrings()">
-	<fx:Style>
-		@namespace s "library://ns.adobe.com/flex/spark";
-		@namespace mx "library://ns.adobe.com/flex/mx";
-		s|Label {
-			color: #FFFFFF;
-			font-weight: bold;
-		}
-		#titleL {
-			font-size: 20;
-		}
-		s|ComboBox {
-			alternating-item-colors: #424242;
-		}
-		s|Form {
-			background-color: #424242;
-		}
-		
-	</fx:Style>
 	<fx:Script>
 		<![CDATA[
 			import mx.collections.ArrayCollection;
@@ -64,37 +46,41 @@
 			}
 		]]>
 	</fx:Script>
+	
 	<fx:Declarations>
-		<!-- Place non-visual elements (e.g., services, value objects) here -->
 		<s:SortingCollator id="sortCollator" locale="{localeCB.selectedItem}"/>
 	</fx:Declarations>
-	<s:Scroller width="100%" height="100%">
-		<s:Group>
-			<s:Form>
-				<s:Label id="titleL" text="Spark Collator"/>
-				<s:Label text="Compare two strings by using SortingCollator"/>
-				<s:Spacer height="15"/>
-				
-				<s:FormItem label="Locales:" toolTip="Select a locale for the collator instance.">
-					<s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="5" change="compareStrings()"/>
-				</s:FormItem>
-				<s:FormItem label="Collator Options:" toolTip="Set properties for the collator instance.">
-					<s:HGroup>
-						<s:CheckBox id="ignoreCaseCB" label="ignoreCase" change="sortCollator.ignoreCase = ignoreCaseCB.selected;compareStrings()"/>
-						<s:CheckBox id="ignDiacriticsCB" label="ignoreDiacritics" change="sortCollator.ignoreDiacritics = ignDiacriticsCB.selected;compareStrings()"/>
-						<s:CheckBox id="ignSymbolsCB" label="ignoreSymbols" change="sortCollator.ignoreSymbols = ignSymbolsCB.selected;compareStrings()"/>
-						<s:CheckBox id="ignKanaTypeCB" label="ignoreKanaType" change="sortCollator.ignoreKanaType = ignKanaTypeCB.selected;compareStrings()"/>
-						<s:CheckBox id="ignCharacterWidthCB" label="ignoreCharacterWidth" change="sortCollator.ignoreCharacterWidth = ignCharacterWidthCB.selected;compareStrings()"/>
-					</s:HGroup>
-				</s:FormItem>
-				<s:FormItem label="Strings:" toolTip="Input two strings and find out their compare result.">
-					<s:HGroup>
-						<s:TextInput id="firstTI" text="coté" change="compareStrings()"/>
-						<s:Label id="operatorL" text=" " fontSize="15"/>
-						<s:TextInput id="secondTI" text="côte" change="compareStrings()"/>
-					</s:HGroup>
-				</s:FormItem>
-			</s:Form>
-		</s:Group>
-	</s:Scroller>
+
+	<s:Panel title="Spark Collator" width="100%" height="100%">
+
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+			
+		<s:Form height="100%" width="100%">
+			<s:Label text="Compare two strings by using SortingCollator"/>
+			<s:Spacer height="15"/>
+			
+			<s:FormItem label="Locales:" toolTip="Select a locale for the collator instance.">
+				<s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="5" change="compareStrings()"/>
+			</s:FormItem>
+			<s:FormItem label="Collator Options:" toolTip="Set properties for the collator instance.">
+				<s:HGroup>
+					<s:CheckBox id="ignoreCaseCB" label="ignoreCase" change="sortCollator.ignoreCase = ignoreCaseCB.selected;compareStrings()"/>
+					<s:CheckBox id="ignDiacriticsCB" label="ignoreDiacritics" change="sortCollator.ignoreDiacritics = ignDiacriticsCB.selected;compareStrings()"/>
+					<s:CheckBox id="ignSymbolsCB" label="ignoreSymbols" change="sortCollator.ignoreSymbols = ignSymbolsCB.selected;compareStrings()"/>
+					<s:CheckBox id="ignKanaTypeCB" label="ignoreKanaType" change="sortCollator.ignoreKanaType = ignKanaTypeCB.selected;compareStrings()"/>
+					<s:CheckBox id="ignCharacterWidthCB" label="ignoreCharacterWidth" change="sortCollator.ignoreCharacterWidth = ignCharacterWidthCB.selected;compareStrings()"/>
+				</s:HGroup>
+			</s:FormItem>
+			<s:FormItem label="Strings:" toolTip="Input two strings and find out their compare result.">
+				<s:HGroup>
+					<s:TextInput id="firstTI" text="coté" change="compareStrings()"/>
+					<s:Label id="operatorL" text=" " fontSize="15"/>
+					<s:TextInput id="secondTI" text="côte" change="compareStrings()"/>
+				</s:HGroup>
+			</s:FormItem>
+		</s:Form>
+
+	</s:Panel>
 </s:Application>