You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by jm...@apache.org on 2014/10/27 07:23:31 UTC

[31/50] [abbrv] git commit: [flex-utilities] [refs/heads/master] - FLEX-34485 make examples consistent

FLEX-34485 make examples consistent


Project: http://git-wip-us.apache.org/repos/asf/flex-utilities/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-utilities/commit/186a01be
Tree: http://git-wip-us.apache.org/repos/asf/flex-utilities/tree/186a01be
Diff: http://git-wip-us.apache.org/repos/asf/flex-utilities/diff/186a01be

Branch: refs/heads/master
Commit: 186a01bec095f3b23abf9af18daf40b0481edb73
Parents: e11842b
Author: Justin Mclean <jm...@apache.org>
Authored: Sat Oct 18 18:21:36 2014 +1100
Committer: Justin Mclean <jm...@apache.org>
Committed: Sat Oct 18 18:21:36 2014 +1100

----------------------------------------------------------------------
 .../src/spark/charts/AreaChartExample.mxml      |  11 +-
 .../src/spark/charts/BarChartExample.mxml       |  11 +-
 .../src/spark/charts/BubbleChartExample.mxml    |  15 +--
 .../spark/charts/CandleStickChartExample.mxml   |  15 +--
 .../src/spark/charts/ColumnChartExample.mxml    |  17 +--
 .../src/spark/charts/HLOCChartExample.mxml      |  15 +--
 .../src/spark/charts/LineChartExample.mxml      |  15 +--
 .../src/spark/charts/PieChartExample.mxml       |  15 +--
 .../src/spark/charts/PlotChartExample.mxml      |  15 +--
 .../spark/charts/SeriesInterpolateExample.mxml  |  19 +---
 .../src/spark/charts/SeriesSlideExample.mxml    |  19 +---
 .../src/spark/charts/SeriesZoomExample.mxml     |  19 +---
 .../src/spark/components/SearchExample.mxml     |  16 +--
 .../spark/components/VideoPlayerExample.mxml    |  16 +--
 .../components/VideoPlayerModuleLoader.mxml     |   3 +-
 .../src/spark/containers/BorderExample.mxml     |   9 +-
 .../src/spark/containers/GroupExample.mxml      |  59 +++++-----
 .../src/spark/containers/PanelExample.mxml      |  82 ++++++-------
 .../src/spark/containers/SampleHGroup.mxml      |  16 +--
 .../src/spark/containers/SampleVGroup.mxml      |  15 +--
 .../SampleVerticalHorizontalAlign.mxml          |  58 +++++-----
 .../SkinnableDataContainerExample.mxml          |   9 +-
 .../spark/containers/TabNavigator1Example.mxml  |  19 +---
 .../spark/containers/TabNavigator2Example.mxml  |   2 +-
 .../src/spark/containers/TileGroupExample.mxml  |   7 +-
 .../src/spark/controls/AccordionExample.mxml    |  21 ++--
 .../spark/controls/AdvancedDatagridExample.mxml |  19 ++--
 .../src/spark/controls/ButtonBarExample.mxml    |  17 ++-
 .../src/spark/controls/ButtonExample.mxml       |  47 ++++----
 .../src/spark/controls/CheckboxExample.mxml     |  43 ++++---
 .../src/spark/controls/ColorPickerExample.mxml  |  14 +--
 .../src/spark/controls/ComboBoxExample.mxml     |  33 +++---
 .../src/spark/controls/CustomDataGridSkin.mxml  |   8 +-
 .../controls/DataGridCustomRendererExample.mxml |   2 +-
 .../DataGridCustomRendererPrepareExample.mxml   |   2 +-
 .../src/spark/controls/DataGridExample.mxml     |  19 +---
 .../src/spark/controls/DataGroupExample.mxml    |  14 +--
 .../src/spark/controls/DateChooserExample.mxml  |  27 ++---
 .../src/spark/controls/DateFieldExample.mxml    |  27 ++---
 .../src/spark/controls/DropdownExample.mxml     |  11 +-
 .../src/spark/controls/FormExample.mxml         |  18 +--
 .../src/spark/controls/ImageExample.mxml        |  33 ++----
 .../src/spark/controls/LinkBarExample.mxml      |  17 +--
 .../src/spark/controls/LinkButtonExample.mxml   |  19 +---
 .../spark/controls/ListDataPagingExample.mxml   |   2 +-
 .../src/spark/controls/ListExample.mxml         |  73 ++++++------
 .../src/spark/controls/MenuExample.mxml         |  13 ++-
 .../spark/controls/NumericStepperExample.mxml   |  68 ++++++-----
 .../src/spark/controls/OLAPDataGridExample.mxml |  19 +---
 .../src/spark/controls/PopUpAnchor1Example.mxml |  52 +++++----
 .../src/spark/controls/PopUpAnchor2Example.mxml |  78 ++++++-------
 .../src/spark/controls/PopupButtonExample.mxml  |  17 +--
 .../src/spark/controls/ProgressBarExample.mxml  |  21 +---
 .../src/spark/controls/RadioButtonExample.mxml  |  16 +--
 .../spark/controls/RichEditableTextExample.mxml |  21 ++--
 .../src/spark/controls/SWFLoaderExample.mxml    |  19 +---
 .../spark/controls/SampleHelpFormExample.mxml   |  49 ++++----
 .../controls/SampleSequenceFormExample.mxml     |  37 +++---
 .../spark/controls/SampleSimpleFormExample.mxml |  36 +++---
 .../controls/SampleStackedFormExample.mxml      |  39 ++++---
 .../src/spark/controls/ScrollBarExample.mxml    |   9 +-
 .../src/spark/controls/Scroller1Example.mxml    |   9 +-
 .../src/spark/controls/Scroller2Example.mxml    |  64 +++++------
 .../controls/SimpleTitleWindowExample.mxml      |   8 +-
 .../src/spark/controls/SliderExample.mxml       |  60 +++++-----
 .../src/spark/controls/SpinnerExample.mxml      |  50 ++++----
 .../src/spark/controls/TabNavigatorExample.mxml |  16 +--
 .../src/spark/controls/TextAreaExample.mxml     |  95 ++++++++--------
 .../src/spark/controls/TextInputExample.mxml    |  94 +++++++--------
 .../src/spark/controls/TextLayout1Example.mxml  |   8 +-
 .../src/spark/controls/TextLayout2Example.mxml  |  16 ++-
 .../src/spark/controls/TextLayout3Example.mxml  |   7 +-
 .../src/spark/controls/TextLayout4Example.mxml  |   5 +-
 .../src/spark/controls/TitleWindowExample.mxml  |  21 +---
 .../spark/controls/ToggleButton2Example.mxml    |  62 +++++-----
 .../spark/controls/ToggleButtonBarExample.mxml  |  17 +--
 .../src/spark/controls/ToggleButtonExample.mxml |  85 +++++---------
 .../src/spark/controls/ToolTipExample.mxml      |  27 +----
 .../src/spark/controls/TreeExample.mxml         |  13 +--
 .../src/spark/controls/VideoDisplayExample.mxml |  23 ++--
 .../src/spark/controls/VideoPlayerExample.mxml  |   9 +-
 .../src/spark/controls/ViewStackExample.mxml    |  29 ++---
 .../spark/css/CSSDescendantSelectorExample.mxml |   9 +-
 .../src/spark/css/CSSIDSelectorExample.mxml     |  14 ++-
 .../spark/css/CSSTypeClassSelectorExample.mxml  |  44 +++----
 .../spark/effects/AnimatePropertiesExample.mxml |  61 +++++-----
 .../spark/effects/AnimateTransformExample.mxml  | 101 ++++++----------
 .../src/spark/effects/CrossFadeExample.mxml     |  10 +-
 .../src/spark/effects/FadeExample.mxml          |  51 ++++-----
 .../src/spark/effects/Move3DExample.mxml        |  84 +++++++-------
 .../src/spark/effects/Rotate3DExample.mxml      |  83 +++++++-------
 .../src/spark/effects/Scale3DExample.mxml       |  88 +++++++-------
 .../src/spark/effects/WipeExample.mxml          |   4 +-
 .../src/spark/events/EventExample1.mxml         |  11 +-
 .../src/spark/events/EventExample2.mxml         |  11 +-
 .../src/spark/events/EventExample3.mxml         |  11 +-
 .../src/spark/events/EventExample4.mxml         |  11 +-
 .../src/spark/events/EventExample5.mxml         |  14 +--
 .../src/spark/events/EventExample6.mxml         |  13 +--
 .../formatters/CurrencyFormatterExample.mxml    |  21 +---
 .../spark/formatters/DateFormatterExample.mxml  |  20 +---
 .../formatters/NumberFormatterExample.mxml      |  21 +---
 .../spark/formatters/PhoneFormatterExample.mxml |  21 +---
 .../formatters/SwitchFormatterExample.mxml      |  19 +---
 .../formatters/ZipCodeFormatterExample.mxml     |  19 +---
 .../src/spark/fxg/BitmapImageExample.mxml       |  11 +-
 .../src/spark/fxg/DropShadowGraphicExample.mxml |   4 +-
 .../src/spark/fxg/EclipseExample.mxml           |   4 +-
 .../src/spark/fxg/EllipseTransformExample.mxml  |  21 ++--
 .../TourDeFlex3/src/spark/fxg/LineExample.mxml  |   4 +-
 .../fxg/LinearGradientsSpreadMethodExample.mxml |   4 +-
 .../TourDeFlex3/src/spark/fxg/RectExample.mxml  |   7 +-
 .../src/spark/fxg/RichTextExample.mxml          |   8 +-
 .../src/spark/fxg/StaticFXGExample.mxml         |  19 ++--
 .../src/spark/i18n/SparkCollator2Example.mxml   |  82 ++++++-------
 .../src/spark/i18n/SparkCollatorExample.mxml    | 103 +++++++----------
 .../i18n/SparkCurrencyFormatter2Example.mxml    |  60 ++++------
 .../i18n/SparkCurrencyFormatterExample.mxml     | 110 ++++++++----------
 .../i18n/SparkCurrencyValidator2Example.mxml    |  59 ++++------
 .../i18n/SparkCurrencyValidatorExample.mxml     | 114 ++++++++-----------
 .../i18n/SparkDateTimeFormatter2Example.mxml    |  62 ++++------
 .../i18n/SparkDateTimeFormatterExample.mxml     |  93 +++++++--------
 .../src/spark/i18n/SparkFormatterExample.mxml   |  60 +++++-----
 .../i18n/SparkNumberFormatter2Example.mxml      |  61 ++++------
 .../spark/i18n/SparkNumberFormatterExample.mxml |  98 +++++++---------
 .../i18n/SparkNumberValidator2Example.mxml      |  54 ++++-----
 .../spark/i18n/SparkNumberValidatorExample.mxml | 109 +++++++-----------
 .../i18n/SparkSortandSortField2Example.mxml     |  59 ++++------
 .../i18n/SparkSortandSortFieldExample.mxml      |  85 ++++++--------
 .../src/spark/i18n/SparkStringToolsExample.mxml |  72 ++++--------
 .../itemRenderers/ItemRenderer1Example.mxml     |   8 +-
 .../itemRenderers/ItemRenderer2Example.mxml     |   6 +-
 .../itemRenderers/ListItemRendererExample.mxml  |   4 +-
 .../layouts/CustomLayoutAnimatedExample.mxml    |  47 ++++----
 .../layouts/CustomLayoutFlickrWheelExample.mxml |  51 +++++----
 .../spark/layouts/CustomLayoutFlowExample.mxml  |   2 +-
 .../layouts/CustomLayoutHBaselineExample.mxml   |   4 +-
 .../src/spark/layouts/FlickrThumbnail.mxml      |   2 +-
 .../src/spark/modules/ModuleExample.mxml        |  16 ++-
 .../other/BidirectionalBinding1Example.mxml     |   4 +-
 .../other/BidirectionalBinding2Example.mxml     |  28 ++---
 .../spark/other/ControllingViewportExample.mxml |  13 ++-
 .../src/spark/other/Cursor1Example.mxml         |  14 +--
 .../src/spark/other/Cursor2Example.mxml         |  16 +--
 .../src/spark/other/DragAndDrop1Example.mxml    |  16 +--
 .../src/spark/other/DragAndDrop2Example.mxml    |  73 ++++++------
 .../src/spark/other/FilterExample.mxml          |  19 +---
 .../src/spark/other/RepeaterExample.mxml        |  17 +--
 .../src/spark/other/ScrollBarsExample.mxml      |  13 ++-
 .../spark/skinning/ButtonWithIconExample.mxml   |   2 +-
 .../skinning/SkinningContainerExample.mxml      |   2 +-
 .../states/AnimateShaderTransitionEffect.mxml   |   4 +-
 .../src/spark/tlf/textEditBar/FileServices.mxml |   4 +-
 .../src/spark/tlf/textEditBar/GraphicBar.mxml   |   2 +-
 .../src/spark/tlf/textEditBar/LinkBar.mxml      |   2 +-
 .../validators/CreditCardValidatorExample.mxml  |  18 +--
 .../validators/CurrencyValidatorExample.mxml    |  18 +--
 .../spark/validators/DateValidatorExample.mxml  |  18 +--
 .../spark/validators/EmailValidatorExample.mxml |  18 +--
 .../spark/validators/FormValidatorExample.mxml  |  18 +--
 .../validators/NumberValidatorExample.mxml      |  18 +--
 .../validators/RegExpValidatorExample.mxml      |  16 +--
 .../SocialSecurityValidatorExample.mxml         |  20 +---
 .../validators/StringValidatorExample.mxml      |  18 +--
 .../validators/ZipCodeValidatorExample.mxml     |  20 +---
 165 files changed, 1978 insertions(+), 2852 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/charts/AreaChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/AreaChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/AreaChartExample.mxml
index f504b6c..ffc7d28 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/AreaChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/AreaChartExample.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[
@@ -37,13 +36,7 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
-	<s:Panel title="AreaChart Control" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="AreaChart Control" width="100%" height="100%">
 		
 		<s:layout>
 			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/charts/BarChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/BarChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/BarChartExample.mxml
index 554ce88..5127997 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/BarChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/BarChartExample.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 @@
             { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
         ]]>
     </fx:Script>
-	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
     
-	<s:Panel title="BarChart Control" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="BarChart Control" width="100%" height="100%">
 		
 		<s:layout>
 			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/charts/BubbleChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/BubbleChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/BubbleChartExample.mxml
index 365df88..d242cdd 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/BubbleChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/BubbleChartExample.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,18 +42,10 @@
 		mx|BubbleChart { color:#000099; }
 	</fx:Style>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
-	<s:Panel title="BubbleChart Control" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="BubbleChart Control" 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:BubbleChart id="bubblechart" height="100%" width="100%" paddingRight="5" paddingLeft="5" color="0x323232"

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/charts/CandleStickChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/CandleStickChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/CandleStickChartExample.mxml
index b39be2e..7e242c3 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/CandleStickChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/CandleStickChartExample.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,18 +41,10 @@
         ]]>
     </fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-    
-	<s:Panel title="CandlestickChart Control" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="CandlestickChart Control" 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:CandlestickChart id="candlestickchart" height="100%" width="100%" paddingRight="5" paddingLeft="5" 

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/charts/ColumnChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/ColumnChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/ColumnChartExample.mxml
index f3ba41d..b682d0b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/ColumnChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/ColumnChartExample.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,19 +33,11 @@
             { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
         ]]>
     </fx:Script>
-	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-    
-	<s:Panel title="ColumnChart Control" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+
+	<s:Panel title="ColumnChart Control" 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:ColumnChart id="column" height="100%" color="0x323232"

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/charts/HLOCChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/HLOCChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/HLOCChartExample.mxml
index 73fe34d..277690b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/HLOCChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/HLOCChartExample.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,18 +41,10 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
-	<s:Panel title="HLOCChart Control" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="HLOCChart Control" 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:HLOCChart id="hlocchart" height="100%" width="100%" paddingRight="5" paddingLeft="5"

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/charts/LineChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/LineChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/LineChartExample.mxml
index 5f61ee0..efb0151 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/LineChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/LineChartExample.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[
@@ -37,18 +36,10 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
-	<s:Panel title="LineChart Control" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="LineChart Control" 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:LineChart id="linechart" color="0x323232" height="100%"

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/charts/PieChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/PieChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/PieChartExample.mxml
index f14e5c9..9c250f3 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/PieChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/PieChartExample.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[
@@ -40,18 +39,10 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
-	<s:Panel title="PieChart Control" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="PieChart Control" 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:PieChart id="chart" height="100%" width="100%" paddingRight="5" paddingLeft="5" color="0x323232"

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/charts/PlotChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/PlotChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/PlotChartExample.mxml
index 8b1b581..8d943ec 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/PlotChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/PlotChartExample.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[
@@ -35,18 +34,10 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
-	<s:Panel title="PlotChart Control" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="PlotChart Control" 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:PlotChart id="plot" height="100%" paddingLeft="5" paddingRight="5"  color="0x323232"

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterpolateExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterpolateExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterpolateExample.mxml
index 554f633..d001823 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterpolateExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterpolateExample.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[
@@ -56,22 +55,14 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
 	<fx:Declarations>
 		<mx:SeriesInterpolate id="interpolateIn" duration="1000"/>
 	</fx:Declarations>
 	
-	<s:Panel title="Interpolate Effect" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="Interpolate Effect" 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:CandlestickChart id="candlestickchart" height="100%" paddingRight="5" paddingLeft="5" color="0x323232"
@@ -104,9 +95,9 @@
 					 text="Choose a company to view recent stock data."/>
 			
 			<s:RadioButton groupName="stocks" label="View Company A"
-						   selected="true" click="candlestickchart.dataProvider=companyAAC;"/>
+						   selected="true" click="candlestickchart.dataProvider=companyAAC"/>
 			<s:RadioButton groupName="stocks" label="View Company B"
-						   click="candlestickchart.dataProvider=companyBAC;"/>
+						   click="candlestickchart.dataProvider=companyBAC"/>
 		</s:BorderContainer>
 		
 	</s:Panel>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesSlideExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesSlideExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesSlideExample.mxml
index 4d24782..0f21724 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesSlideExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesSlideExample.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[
@@ -56,24 +55,16 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
 	<fx:Declarations>
 		<mx:SeriesSlide id="slideIn" duration="1000" direction="up"/>
 		<mx:SeriesSlide id="slideOut" duration="1000" direction="down"/>
 	</fx:Declarations>
 	
 	
-	<s:Panel title="Slide Effect" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="Slide Effect" 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:CandlestickChart id="candlestickchart" height="100%" paddingRight="5" paddingLeft="5" color="0x323232"
@@ -106,9 +97,9 @@
 					 text="Choose a company to view recent stock data."/>
 			
 			<s:RadioButton groupName="stocks" label="View Company A"
-						   selected="true" click="candlestickchart.dataProvider=companyAAC;"/>
+						   selected="true" click="candlestickchart.dataProvider=companyAAC"/>
 			<s:RadioButton groupName="stocks" label="View Company B"
-						   click="candlestickchart.dataProvider=companyBAC;"/>
+						   click="candlestickchart.dataProvider=companyBAC"/>
 		</s:BorderContainer>
 		
 	</s:Panel>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesZoomExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesZoomExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesZoomExample.mxml
index d94c176..91e35cd 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesZoomExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesZoomExample.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[
@@ -56,24 +55,16 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
 	<fx:Declarations>
 		<mx:SeriesZoom id="zoomIn" duration="1000"/>
 		<mx:SeriesZoom id="zoomOut" duration="1000"/>
 	</fx:Declarations>
 	
 	
-	<s:Panel title="Zoom Effect" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="Zoom Effect" 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:CandlestickChart id="candlestickchart" height="100%" paddingRight="5" paddingLeft="5" color="0x323232"
@@ -105,9 +96,9 @@
 					 text="Choose a company to view recent stock data."/>
 			
 			<s:RadioButton groupName="stocks" label="View Company A"
-						   selected="true" click="candlestickchart.dataProvider=companyAAC;"/>
+						   selected="true" click="candlestickchart.dataProvider=companyAAC"/>
 			<s:RadioButton groupName="stocks" label="View Company B"
-						   click="candlestickchart.dataProvider=companyBAC;"/>
+						   click="candlestickchart.dataProvider=companyBAC"/>
 		</s:BorderContainer>
 		
 	</s:Panel>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/components/SearchExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/SearchExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/components/SearchExample.mxml
index 6843f52..5ee66a6 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/components/SearchExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/components/SearchExample.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:Style>
 		@namespace s "library://ns.adobe.com/flex/spark";
@@ -62,19 +61,10 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
-	<s:Panel title="Components Samples"
-			 width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="Components Samples" 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>
 		
 		<s:HGroup >

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerExample.mxml
index 17b7efb..42626d2 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerExample.mxml
@@ -20,22 +20,12 @@
 <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="*">
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
-	<s:Panel title="Components Samples"
-			 width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="Components Samples" 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>
 		
 		<local:VideoPlayer source="assets/FlexInstaller.mp4"

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModuleLoader.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModuleLoader.mxml b/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModuleLoader.mxml
index f11dac8..deaea04 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModuleLoader.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModuleLoader.mxml
@@ -19,7 +19,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"  width="100%" height="100%">
+			   xmlns:mx="library://ns.adobe.com/flex/mx"
+			   width="100%" height="100%">
 	
 	<fx:Script>
 		<![CDATA[

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/containers/BorderExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/BorderExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/BorderExample.mxml
index 9d35416..eee4668 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/containers/BorderExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/BorderExample.mxml
@@ -23,8 +23,11 @@
 			   xmlns:mx="library://ns.adobe.com/flex/mx"
 			   xmlns:s="library://ns.adobe.com/flex/spark">
 	
-	<s:Panel width="100%" height="100%" title="BorderContainer Sample" 
-			 skinClass="skins.TDFPanelSkin">
+	<s:Panel title="BorderContainer Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
 		
 		<s:VGroup id="mainGroup" width="100%" 
 				  horizontalCenter="50" top="10">
@@ -58,7 +61,7 @@
 				</s:BorderContainer>	
 			</s:HGroup>
 			
-			<s:Label bottom="10" horizontalCenter="0" width="95%" verticalAlign="justify" color="#323232" 
+			<s:Label bottom="10" horizontalCenter="0" width="95%" verticalAlign="justify" 
 					 text="The Border class provides a container class that can be styled with a border and
 a background fill or image. It has many of the same styles as HaloBorder and is used in a similar way to the
 Halo container classes such as Box and Canvas. Examples of styles that are supported are borderWeight, borderColor, 

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/containers/GroupExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/GroupExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/GroupExample.mxml
index 6fc7fb4..85f6645 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/containers/GroupExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/GroupExample.mxml
@@ -25,50 +25,45 @@
 		<s:BasicLayout id="bl"/>
 	</s:layout>
 	
-	<!-- Note: Panel has a BasicLayout by default. The BasicLayout means that components will be
-	arranged according to their individual constraint settings, independent of each-other -->
-	<s:Panel id="mainPanel" width="100%" height="100%" top="0" left="5"
-			 title="Panel Sample" 
-			 skinClass="skins.TDFPanelSkin">
+	<s:Panel id="mainPanel" title="Group Sample" width="100%" height="100%">
 		
-	<!-- Note: main panel is BasicLayout by default. So each inner panel will be layed out
-		      according to it's constraints specified individually.                        -->
-			<s:Panel title="Basic Layout Panel"  top="0" left="5">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+		
+		<s:HGroup>
+			<s:Group>
 				<!-- Default layout is basic, therefore constraints are used for placement -->
 				<s:Label text="Apples" top="0"/>
 				<s:Label text="Oranges" top="13"/>
 				<s:Label text="Bananas" top="26"/>		
-			</s:Panel>
+			</s:Group>
 			
-			<s:Panel id="horizontalPanel" title="Horizontal Layout Panel" 
-					  top="0" left="250">
+			<s:Group id="horizontalPanel">
 				<s:layout>
 					<s:HorizontalLayout/>
 				</s:layout>
-				<!-- Note: constraints to top left on items here, but will not matter because we
-				     specified a HorizontalLayout -->
-				<s:Label text="Apples" top="0"/>
-				<s:Label text="Oranges" top="13"/>
-				<s:Label text="Bananas" top="26"/>	
-			</s:Panel>
-			<s:Panel id="vericalPanel" title="Vertical Layout Panel" 
-					  top="0" right="5">
+				<s:Label text="Apples" />
+				<s:Label text="Oranges" />
+				<s:Label text="Bananas" />	
+			</s:Group>
+			
+			<s:Group id="vericalPanel">
 				<s:layout>
 					<s:VerticalLayout/>
 				</s:layout>
-				<!-- Note: constraints to top left on items here, but will not matter because we
-				specified a VerticalLayout -->
-				<s:Label text="Apples" top="0"/>
-				<s:Label text="Oranges" top="13"/>
-				<s:Label text="Bananas" top="26"/>	
-			</s:Panel>
-			<s:Label color="0x323232" verticalAlign="justify" 
-						  left="3" bottom="30" width="100%" 
-				text="The Panel class defines a container that includes a title bar, a caption, a border, and a content area for its children.
-The Panel has a basic layout by default, which means it lays out elements within the panel by 
-their individual constraints. You can specify a different layout to use within the panel such 
-as shown in the inner panels (basic, horizontal and vertical layout panels. In that case the 
-individual constraints on the Text items are ignored, as shown here."/>
+				<s:Label text="Apples" />
+				<s:Label text="Oranges" />
+				<s:Label text="Bananas" />	
+			</s:Group>
+		</s:HGroup>
+		
+		<s:Label verticalAlign="justify" 
+				 left="3" bottom="30" width="100%" 
+				 text="The Group class defines a container that includes a content area for its children.
+The Group has a basic layout by default, which means it lays out elements within the group by 
+their individual constraints. You can specify a different layout to use within the group such 
+as shown in the inner groups (basic, horizontal and vertical layout groups)."/>
 			
 	</s:Panel>
 	

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/containers/PanelExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/PanelExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/PanelExample.mxml
index b090b2e..9fb29d2 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/containers/PanelExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/PanelExample.mxml
@@ -21,58 +21,44 @@
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
 			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
-	<!-- Note: Panel has a BasicLayout by default. The BasicLayout means that components will be
-	arranged according to their individual constraint settings, independent of each-other -->
-	<s:Panel id="mainPanel" width="100%" height="100%"
-			 title="Panel Sample" 
-			 skinClass="skins.TDFPanelSkin">
-		
-		
-			<s:HGroup horizontalCenter="0">
-				
-				<!-- Note: main panel is BasicLayout by default, so each inner panel will be layed out
-				according to it's constraints specified individually. -->
-				<s:Panel title="Basic Layout Panel" top="0" left="5">
-					<!-- Default layout is basic, therefore constraints are used for placement -->
-					<mx:Text text="Apples" top="0"/>
-					<mx:Text text="Oranges" top="15"/>
-					<mx:Text text="Bananas" top="30"/>		
-				</s:Panel>
-				
-				<s:Panel title="Horizontal Layout Panel" 
-						 top="0" left="250">
-					<s:layout>
-						<s:HorizontalLayout/>
-					</s:layout>
-					<!-- Note: constraints to top left on items here, but will not matter because we
-					specified a HorizontalLayout -->
-					<mx:Text text="Apples" top="0"/>
-					<mx:Text text="Oranges" top="15"/>
-					<mx:Text text="Bananas" top="30"/>	
-				</s:Panel>
-				
-				<s:Panel title="Vertical Layout Panel" 
-						 top="0" right="5">
-					<s:layout>
-						<s:VerticalLayout/>
-					</s:layout>
-					
-					<!-- Note: constraints to top left on items here, but will not matter because we
-					specified a VeritcalLayout -->
-					<mx:Text text="Apples" top="0"/>
-					<mx:Text text="Oranges" top="15"/>
-					<mx:Text text="Bananas" top="30"/>	
-				</s:Panel>
-			</s:HGroup>	
-		<s:Group bottom="5" width="100%">
+	<s:Panel id="mainPanel" title="Panel Sample" width="100%" height="100%">
+
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+			
+		<s:HGroup>
+			<s:Panel title="Basic Layout Panel">
+				<!-- Default layout is basic, therefore constraints are used for placement -->
+				<s:Label text="Apples" top="0"/>
+				<s:Label text="Oranges" top="13"/>
+				<s:Label text="Bananas" top="26"/>		
+			</s:Panel>
 			
-		<s:Label color="0x323232" verticalAlign="justify" 
+			<s:Panel id="horizontalPanel" title="Horizontal Layout Panel">
+				<s:layout>
+					<s:HorizontalLayout/>
+				</s:layout>
+				<s:Label text="Apples" />
+				<s:Label text="Oranges" />
+				<s:Label text="Bananas" />	
+			</s:Panel>
+			
+			<s:Panel id="vericalPanel" title="Vertical Layout Panel">
+				<s:layout>
+					<s:VerticalLayout/>
+				</s:layout>
+				<s:Label text="Apples" />
+				<s:Label text="Oranges" />
+				<s:Label text="Bananas" />	
+			</s:Panel>
+		</s:HGroup>
+			
+		<s:Label verticalAlign="justify" 
 				 left="5" bottom="15" width="95%" 
 				 text="The Panel class defines a container that includes a title bar, a caption, a border, and a content area for its children.
 The Panel has a basic layout by default, which means it lays out elements within the panel by their individual constraints. You can specify a different layout to use within the panel such 
-as shown in the inner panels (basic, horizontal and vertical layout) panels. In that case the individual constraints on the Text items are ignored, as shown here."/>
-		</s:Group>		
-		
+as shown in the inner panels (basic, horizontal and vertical layout) panels." />
 		
 	</s:Panel>
 	

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/containers/SampleHGroup.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/SampleHGroup.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleHGroup.mxml
index 1e76815..47bd945 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/containers/SampleHGroup.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleHGroup.mxml
@@ -19,16 +19,10 @@
 -->
 <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" minWidth="955" minHeight="600">
-	
-	<fx:Declarations>
-		<!-- Place non-visual elements (e.g., services, value objects) here -->
-	</fx:Declarations>
-	
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
+
 	<fx:Script>
 		<![CDATA[
-			import skins.TDFPanelSkin;
-			
 			private function applyProperties():void
 			{
 				this.mainHGroup.paddingTop = this.padTop.value;
@@ -40,7 +34,7 @@
 		]]>
 	</fx:Script>
 	
-	<s:Panel skinClass="skins.TDFPanelSkin" title="HGroup" width="100%" height="100%">
+	<s:Panel title="HGroup" width="100%" height="100%">
 		
 		<s:HGroup left="300" top="25" id="mainHGroup">
 			<s:Rect width="100" height="75">
@@ -87,7 +81,7 @@
 			</s:HGroup>    
 			
 			<s:Button label="Apply Properties" click="this.applyProperties()"/>
-			<s:Label width="75%" horizontalCenter="0" color="#323232"
+			<s:Label width="75%" horizontalCenter="0"
 					 text="The HGroup container is an instance of the Group container that uses the HorizontalLayout class. You can use
 					 the properties of the HGroup class to modify the characteristics of the HorizontalLayout class."/>
 		</s:VGroup>
@@ -95,4 +89,4 @@
 		
 	</s:Panel>
 	
-</s:Application>
\ No newline at end of file
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVGroup.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVGroup.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVGroup.mxml
index 4ebd23d..778f328 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVGroup.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVGroup.mxml
@@ -19,16 +19,10 @@
 -->
 <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" minWidth="955" minHeight="600">
-	
-	<fx:Declarations>
-		<!-- Place non-visual elements (e.g., services, value objects) here -->
-	</fx:Declarations>
-	
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
+
 	<fx:Script>
 		<![CDATA[
-			import skins.TDFPanelSkin;
-			
 			private function applyProperties():void
 			{
 				this.mainVGroup.paddingTop = this.padTop.value;
@@ -40,7 +34,8 @@
 		]]>
 	</fx:Script>
 	
-	<s:Panel skinClass="skins.TDFPanelSkin" title="VGroup Sample" width="100%" height="100%">
+	<s:Panel title="VGroup Sample" width="100%" height="100%">
+		
 		<s:HGroup width="100%" height="100%" top="10" left="10">
 			<s:VGroup top="10" left="10" width="172">
 				<s:HGroup verticalAlign="middle">
@@ -88,7 +83,7 @@
 				</s:Rect>
 			</s:VGroup>	
 			<mx:Spacer width="10"/>
-			<s:Label width="40%" horizontalCenter="0" color="#323232" 
+			<s:Label width="40%" horizontalCenter="0" 
 					 text="The VGroup container is an instance of the Group container that uses the VerticalLayout class. You can use the properties of the VGroup class to modify the characteristics of the VerticalLayout class." height="100%"/>
 				
 		</s:HGroup>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVerticalHorizontalAlign.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVerticalHorizontalAlign.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVerticalHorizontalAlign.mxml
index abfb346..24ff5aa 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVerticalHorizontalAlign.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVerticalHorizontalAlign.mxml
@@ -20,34 +20,37 @@
 <!-- http://evtimmy.com/2010/01/verticalalign-for-vgroup-and-horizontalalign-for-hgroup/ -->
 <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" backgroundColor="0x323232" color="0xFFFFFF">
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
-	<s:VGroup verticalAlign="middle" width="526" height="230" top="57" left="10">
-		<s:HGroup verticalAlign="middle" height="100%"  color="0x000000">
-			<s:Label text="VGroup" rotation="-90" color="0xFF0000"/>
+	<s:Panel id="mainPanel" title="Panel Sample" width="100%" height="100%">
+
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+			
+		<s:HGroup verticalAlign="middle" height="100%" >
+			<s:Label text="VGroup" rotation="-90" />
 			<s:BorderContainer minWidth="0" minHeight="0">
 				<s:VGroup height="{heightSlider.value}"
 						  verticalAlign="{verticalAlignChoice.selectedItem}"
 						  gap="0">
 					<s:Label text="Lorem ipsum dolor sit amet, " height="22" verticalAlign="middle"/>
 					<s:Label text="consectetur adipiscing elit." height="22" verticalAlign="middle"/>
-					
 				</s:VGroup>
 			</s:BorderContainer>
 			
-			<s:Label text="VGroup in Scroller" rotation="-90" color="0xFF0000"/>
+			<s:Label text="VGroup in Scroller" rotation="-90" />
 			<s:BorderContainer minWidth="0" minHeight="0">
 				<s:Scroller height="{heightSlider.value}">
 					<s:VGroup verticalAlign="{verticalAlignChoice.selectedItem}"
 							  gap="0">
 						<s:Label text="Lorem ipsum dolor sit amet, " height="22" verticalAlign="middle"/>
 						<s:Label text="consectetur adipiscing elit." height="22" verticalAlign="middle"/>
-						
 					</s:VGroup>
 				</s:Scroller>
 			</s:BorderContainer>
 			
-			<s:Label text="List" rotation="-90" color="0xFF0000"/>
+			<s:Label text="List" rotation="-90" />
 			
 			<s:List minWidth="0" minHeight="0" height="{heightSlider.value+2}">
 				<s:layout>
@@ -61,23 +64,24 @@
 				</s:ArrayCollection>
 			</s:List>
 		</s:HGroup>
-	</s:VGroup>
-	
-	<s:HGroup horizontalAlign="center" paddingTop="10" paddingLeft="10">
-		<s:HGroup>
-			<s:Label text="VerticalAlign:"/>
-			<s:DropDownList id="verticalAlignChoice" requireSelection="true" color="0x000000">
-				<s:dataProvider>
-					<s:ArrayCollection source="{'top bottom middle'.split(' ')}"/>
-				</s:dataProvider>
-			</s:DropDownList>
-		</s:HGroup>
-		<s:HGroup>
-			<s:Label text="Height:"/>
-			<s:HSlider id="heightSlider" minimum="0" maximum="425" value="100" width="300"/>
-		</s:HGroup>
-	</s:HGroup>		
-	<s:Label right="7" top="26" width="200"
-			 text="This sample show the use of the verticalAlign and horizontalAlign properties for use with a VGroup and
-HGroup accordingly."/>
+
+		<s:HGroup paddingTop="10" paddingLeft="10">
+			<s:HGroup>
+				<s:Label text="VerticalAlign:"/>
+				<s:DropDownList id="verticalAlignChoice" requireSelection="true" color="0x000000">
+					<s:dataProvider>
+						<s:ArrayCollection source="{'top bottom middle'.split(' ')}"/>
+					</s:dataProvider>
+				</s:DropDownList>
+			</s:HGroup>
+			<s:HGroup>
+				<s:Label text="Height:"/>
+				<s:HSlider id="heightSlider" minimum="0" maximum="425" value="100" width="300"/>
+			</s:HGroup>
+		</s:HGroup>	
+			
+		<s:Label text="This sample show the use of the verticalAlign and horizontalAlign properties for use with a VGroup and
+	HGroup accordingly."/>
+		
+	</s:Panel>
 </s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/containers/SkinnableDataContainerExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/SkinnableDataContainerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/SkinnableDataContainerExample.mxml
index 09fb38c..ba4f461 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/containers/SkinnableDataContainerExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/SkinnableDataContainerExample.mxml
@@ -21,8 +21,11 @@
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
 			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
-	<s:Panel width="100%" height="100%" title="SkinnableDataContainer" skinClass="skins.TDFPanelSkin">
-		<s:layout><s:HorizontalLayout paddingLeft="8" paddingTop="8" paddingRight="12"/></s:layout>
+	<s:Panel title="SkinnableDataContainer" width="100%" height="100%" >
+
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
 		
 		<s:VGroup>
 			<s:Label text="Famous Astronauts" fontWeight="bold" fontSize="14"/>
@@ -54,7 +57,7 @@
 				</s:ArrayCollection>
 			</s:SkinnableDataContainer>
 		</s:VGroup>
-		<s:Label color="0x323232" width="200" text="The SkinnableDataContainer is the skinnable version of the DataGroup and
+		<s:Label width="200" text="The SkinnableDataContainer is the skinnable version of the DataGroup and
 while it can hold visual elements, they are often used only to hold data items as children. Data items can be simple data items 
 such String and Number objects, and more complicated data items such as Object and XMLNode objects."/>
 	</s:Panel>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator1Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator1Example.mxml
index 15f29ef..5ddb4dc 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator1Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator1Example.mxml
@@ -54,17 +54,11 @@
 		<s:ArrayCollection id="contacts"/>
 	</fx:Declarations>
 	
-	<s:Panel width="100%" height="100%" skinClass="skins.TDFPanelSkin" title="TabBar Sample" >
+	<s:Panel title="TabBar Sample" width="100%" height="100%">
 		<s:TabBar id="tabs" left="8" y="2" dataProvider="{vs}"/>
 		<mx:ViewStack id="vs" width="95%" height="85%" left="8" y="23">
 			<s:NavigatorContent label="Contact Info"  width="100%" height="100%">
-				<s:BorderContainer width="100%" height="100%" borderWeight="2" cornerRadius="3" dropShadowVisible="true">
-					<s:backgroundFill>
-						<s:LinearGradient rotation="90">
-							<s:GradientEntry color="0xE2E2E2" />
-							<s:GradientEntry color="0x323232" />
-						</s:LinearGradient>
-					</s:backgroundFill>
+				<s:BorderContainer width="100%" height="100%" dropShadowVisible="false">
 					<mx:Form id="contactForm" defaultButton="{submitBtn}" width="100%" height="100%">
 						<mx:FormItem label="Name:">
 							<s:TextInput id="nameTxt" text="{contact.name}"/>
@@ -88,14 +82,7 @@
 				</s:BorderContainer>
 			</s:NavigatorContent>
 			<s:NavigatorContent label="Contact List" width="100%" height="100%" >
-				<s:BorderContainer width="100%" height="100%" borderWeight="2" 
-						  cornerRadius="3" dropShadowVisible="true">
-					<s:backgroundFill>
-						<s:LinearGradient rotation="90">
-							<s:GradientEntry color="0xE2E2E2" />
-							<s:GradientEntry color="0x323232" />
-						</s:LinearGradient>
-					</s:backgroundFill>
+				<s:BorderContainer width="100%" height="100%" dropShadowVisible="false">
 					<mx:DataGrid id="dg" dataProvider="{contacts}" x="5" y="5"  doubleClickEnabled="true" 
 								 doubleClick="{tabs.selectedIndex=0}" itemClick="dg_itemClickHandler(event)">
 						<mx:columns>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator2Example.mxml
index 7bc0b35..b6843e9 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator2Example.mxml
@@ -49,7 +49,7 @@
 		<s:ArrayCollection id="contacts"/>
 	</fx:Declarations>
 	
-	<s:Panel width="100%" height="100%" skinClass="skins.TDFPanelSkin" title="TabBar Sample with Custom Skin and Bidirectional Binding" >
+	<s:Panel title="TabBar Sample with Custom Skin and Bidirectional Binding" width="100%" height="100%">
 		<s:TabBar id="tabs" left="8" y="2" dataProvider="{vs}" skinClass="skins.CustomTabBarSkin" cornerRadius="4"/>
 		<mx:ViewStack id="vs" width="95%" height="85%" left="8" y="23">
 			<s:NavigatorContent label="Contact Info"  width="100%" height="100%">

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/containers/TileGroupExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/TileGroupExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/TileGroupExample.mxml
index c68120f..ad5d21b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/containers/TileGroupExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/TileGroupExample.mxml
@@ -19,7 +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" minWidth="955" minHeight="600">
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
 	<fx:Declarations>
 		<fx:Array id="orientArray">
@@ -31,7 +31,6 @@
 	<fx:Script>
 		<![CDATA[
 			import mx.collections.ArrayList;
-			import skins.TDFPanelSkin;
 			
 			private function applyProperties():void
 			{
@@ -44,7 +43,7 @@
 		]]>
 	</fx:Script>
 	
-	<s:Panel skinClass="skins.TDFPanelSkin" title="TileGroup Sample" width="100%" height="100%">
+	<s:Panel title="TileGroup Sample" width="100%" height="100%">
 		<s:TileGroup left="300" top="10" id="mainGroup">
 			<s:Rect width="100" height="75">
 				<s:fill>
@@ -90,7 +89,7 @@
 			</s:HGroup>
 			<s:Button label="Apply Properties" click="this.applyProperties()"/>
 			<mx:Spacer height="10"/>
-			<s:Label width="85%" horizontalCenter="0" color="#323232" 
+			<s:Label width="85%" horizontalCenter="0" 
 					 text="The TileGroup container is an instance of the Group container that uses the TileLayout class. You can use the properties of the 
 					 TileGroup class to modify the characteristics of the TileLayout class."/>
 

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/AccordionExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/AccordionExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/AccordionExample.mxml
index 128ee33..3d3f3a0 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/AccordionExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/AccordionExample.mxml
@@ -19,25 +19,18 @@
 -->
 <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="Accordion Container" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="Accordion 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"
+		<s:Label width="100%"
 				 text="Select an Accordion navigator button to change the panel."/>
 		
-		<mx:Accordion id="accordion" color="0x323232" width="100%" height="100%">
+		<mx:Accordion id="accordion" width="100%" height="100%">
 			<!-- Define each panel using a VBox container. -->
 			<s:NavigatorContent label="Accordion Button for Panel 1">
 				<mx:Label text="Accordion container panel 1"/>
@@ -56,9 +49,9 @@
 				 text="Programmatically select the panel using a Button control."/>
 		
 		<s:HGroup color="0x323232">
-			<s:Button label="Select Panel 1" click="accordion.selectedIndex=0;"/>
-			<s:Button label="Select Panel 2" click="accordion.selectedIndex=1;"/>
-			<s:Button label="Select Panel 3" click="accordion.selectedIndex=2;"/>
+			<s:Button label="Select Panel 1" click="accordion.selectedIndex=0"/>
+			<s:Button label="Select Panel 2" click="accordion.selectedIndex=1"/>
+			<s:Button label="Select Panel 3" click="accordion.selectedIndex=2"/>
 		</s:HGroup>
 		
 	</s:Panel>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/AdvancedDatagridExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/AdvancedDatagridExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/AdvancedDatagridExample.mxml
index fe662fa..52d066b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/AdvancedDatagridExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/AdvancedDatagridExample.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[
@@ -58,18 +57,14 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
-	<s:Panel title="AdvancedDataGrid Control" 
-			 color="0x000000" 
-			 borderAlpha="0.15" 
-			 width="600">
+	<s:Panel title="AdvancedDataGrid Control" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
 		
 		<mx:AdvancedDataGrid id="myADG" 
-							 width="100%" height="100%" 
-							 color="0x323232"
+							 width="100%" height="100%"
 							 dataProvider="{dpFlat}">
 			
 			<mx:groupedColumns>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonBarExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonBarExample.mxml
index e349f75..95026fc 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonBarExample.mxml
@@ -76,16 +76,15 @@
 		]]>
 	</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="ButtonBar Sample" 
-			 width="100%" height="100%"
-			 horizontalCenter="0" 
-			 skinClass="skins.TDFPanelSkin">
+	<s:Panel title="ButtonBar 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:Label width="50%" fontSize="13" color="0x323232"  verticalAlign="justify"
-								  text="The ButtonBar component behaves like a series of toggle buttons, where one button remains selected
+			<s:HGroup width="100%" height="100%">
+				<s:Label width="50%" verticalAlign="justify"
+						 text="The ButtonBar component behaves like a series of toggle buttons, where one button remains selected
 and only one button in the ButtonBar control can be in the selected state. That means when you select a button in a ButtonBar
 control, the button stays in the selected state until you select a different button."/>	
 				<s:VGroup left="10" top="5" color="0x000000" horizontalAlign="center">

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonExample.mxml
index 56f44ee..a366619 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonExample.mxml
@@ -31,34 +31,31 @@
 			}
 		]]>
 	</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 width="100%" height="100%" 
-			 horizontalCenter="0" 
-			 title="Button Sample" 
-			 skinClass="skins.TDFPanelSkin">
+
+	<s:Panel title="Button Sample" height="100%" width="100%">
 		
-		<s:HGroup left="5" top="5" width="100%" height="100%">
-		<s:Label width="50%" fontSize="13" color="0x323232"  verticalAlign="justify"
-					  text="The Button component is a commonly used rectangular button. The Button
+		<s:layout>
+            <s:HorizontalLayout paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" />
+        </s:layout>
+		
+		<s:Label width="50%" verticalAlign="justify"
+				 text="The Button component is a commonly used rectangular button. The Button
 component looks like it can be pressed. The default skin has a text label."/>
 					  	
-			<s:VGroup right="10" bottom="5" color="0x000000" horizontalAlign="center">
-					<s:Label text="Output"/>
-					<s:TextArea id="repeatText" top="5" right="50" width="180" height="100"/>
-					<s:Button id="standardBtn" label="Standard Button" 
-							  click="buttonClickHandler(event)" 
-							  fontWeight="normal"/>
-					<s:Button id="disabledBtn" label="Disabled Button" enabled="false"/>
-					<s:Button id="repeatBtn" label="Repeat Button" 
-							  buttonDown="buttonClickHandler(event)"  
-							  autoRepeat="true"/>
-					<s:Label verticalAlign="justify" 
-								  text="Hold down on repeat button to see autoRepeat behavior."/>
-				
-			</s:VGroup>
-		</s:HGroup>
+		<s:VGroup right="10" bottom="5" color="0x000000" horizontalAlign="center">
+			<s:Label text="Output"/>
+			<s:TextArea id="repeatText" top="5" right="50" width="180" height="100"/>
+			<s:Button id="standardBtn" label="Standard Button" 
+					  click="buttonClickHandler(event)" 
+					  fontWeight="normal"/>
+			<s:Button id="disabledBtn" label="Disabled Button" enabled="false"/>
+			<s:Button id="repeatBtn" label="Repeat Button" 
+					  buttonDown="buttonClickHandler(event)"  
+					  autoRepeat="true"/>
+			<s:Label verticalAlign="justify" 
+						  text="Hold down on repeat button to see autoRepeat behavior."/>
+			
+		</s:VGroup>
 	</s:Panel>
 	
 </s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/CheckboxExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/CheckboxExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/CheckboxExample.mxml
index 53a9712..f6ada4d 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/CheckboxExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/CheckboxExample.mxml
@@ -47,28 +47,27 @@
 							  useThousandsSeparator="true" alignSymbol="left"/>
 	</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 title="CheckBox Sample"
-			 width="100%" height="100%" 
-			 skinClass="skins.TDFPanelSkin">
-		<s:VGroup left="10" right="10" top="10" bottom="10">
-			<s:Label text="Hamburger Base Price: $4.50" />
-			<s:Label text="Select condiments for your hamburger (0.25 each):" />
-			
-			<s:CheckBox id="lettuceCB" label="Pickles" click="modifyBurger(event);"/>
-			<s:CheckBox id="tomatoCB" label="Tomato" click="modifyBurger(event);"/>
-			<s:CheckBox id="pickleCB" label="Lettuce" click="modifyBurger(event);"/>
-			<s:CheckBox id="mayoCB" label="Mayonnaise" click="modifyBurger(event);"/>
-			
-			<mx:Spacer height="10" />
-			<s:HGroup>
-				<s:Label text="Total Price: " color="0x336699" fontWeight="bold"/>
-				<s:Label id="totalString" text="$4.50" color="0x336699" fontWeight="bold"/>
-			</s:HGroup>
-		</s:VGroup>
-		<s:Label top="10" right="10" width="250" verticalAlign="justify" color="#323232" 
-					  text="The CheckBox control is a commonly used graphical control that can
+	<s:Panel title="CheckBox Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+
+		<s:Label text="Hamburger Base Price: $4.50" />
+		<s:Label text="Select condiments for your hamburger (0.25 each):" />
+		
+		<s:CheckBox id="lettuceCB" label="Pickles" click="modifyBurger(event)"/>
+		<s:CheckBox id="tomatoCB" label="Tomato" click="modifyBurger(event)"/>
+		<s:CheckBox id="pickleCB" label="Lettuce" click="modifyBurger(event)"/>
+		<s:CheckBox id="mayoCB" label="Mayonnaise" click="modifyBurger(event)"/>
+		
+		<mx:Spacer height="10" />
+		<s:HGroup>
+			<s:Label text="Total Price: " color="0x336699" fontWeight="bold"/>
+			<s:Label id="totalString" text="$4.50" color="0x336699" fontWeight="bold"/>
+		</s:HGroup>
+		<s:Label top="10" right="10" width="250" verticalAlign="justify"
+				 text="The CheckBox control is a commonly used graphical control that can
 contain a check mark or not. You can use CheckBox controls to gather a 
 set of true or false values that aren’t mutually exclusive."/>
 	</s:Panel>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/ColorPickerExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ColorPickerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ColorPickerExample.mxml
index 57a268c..6666e5d 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ColorPickerExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ColorPickerExample.mxml
@@ -20,22 +20,14 @@
 <!-- Simple example to demonstrate the ColorPicker control. -->
 <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">
-	
-	<s:layout>
-		<s:HorizontalLayout horizontalAlign="center" />
-	</s:layout>
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 
-    <s:Panel title="ColorPicker Control Example" 
-			 width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+    <s:Panel title="ColorPicker Control Example" width="100%" height="100%">
 		
 		<s:layout>
 			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
-        
+
         <s:Label width="100%" color="0x000000"
            text="Select the background color of the Skinnable container."/>
 		

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/ComboBoxExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ComboBoxExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ComboBoxExample.mxml
index 7276b06..531dfb4 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ComboBoxExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ComboBoxExample.mxml
@@ -25,8 +25,6 @@
 		<![CDATA[
 			import mx.collections.ArrayCollection;
 			
-			import skins.TDFPanelSkin;
-		
 		[Bindable]
 		public var cards:ArrayCollection = new ArrayCollection(
 			[ {label:"Visa", data:1}, 
@@ -41,24 +39,21 @@
 		]]>
 	</fx:Script>
 	
-	<s:Panel title="ComboBox Sample" skinClass="skins.TDFPanelSkin" 
-			  height="100%" width="100%">
+	<s:Panel title="ComboBox Sample" width="100%" height="100%">
 		
-		<s:HGroup top="20" horizontalCenter="0" >
-			<s:VGroup>
-				<s:Label  width="200" color="0x336699" text="Select credit card type:"/>
-				<s:ComboBox dataProvider="{cards}" width="150" color="0x000000"
-							change="changeHandler(event);" selectedIndex="0"/>
-					
-			</s:VGroup>
-			<mx:Spacer width="20"/>
-			<s:VGroup>
-				<s:Label id="myLabel" text="You selected:" fontWeight="bold"/>
-				<s:Label id="myData" text="Data:" fontWeight="bold"/>	
-			</s:VGroup>
-			
-		</s:HGroup> 
-		<s:Label color="#323232" width="75%" bottom="20" horizontalCenter="0"
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:VGroup>
+			<s:Label  width="200" color="0x336699" text="Select credit card type:"/>
+			<s:ComboBox dataProvider="{cards}" width="150" color="0x000000"
+						change="changeHandler(event)" selectedIndex="0"/>
+			<s:Label id="myLabel" text="You selected:" fontWeight="bold"/>
+			<s:Label id="myData" text="Data:" fontWeight="bold"/>	
+		</s:VGroup>
+
+		<s:Label width="75%" bottom="20" horizontalCenter="0"
 				 text="The ComboBox component is similar to a DropDownList but includes a TextInput instead of a Label. A user can type into the TextInput and the drop-down will scroll to and highlight the closest match.
 Users are allowed to type in an item not found in the dataProvider. With this behavior, a ComboBox acts as a list of suggested values, while a DropDownList acts as a list of possible values.  "/>
 			

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/CustomDataGridSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/CustomDataGridSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/CustomDataGridSkin.mxml
index b3da2b7..10402da 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/CustomDataGridSkin.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/CustomDataGridSkin.mxml
@@ -47,7 +47,7 @@
         <!--- @private -->        
         <fx:Component id="alternatingRowColorsBackground">
             <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
-                <fx:Script>
+                 <fx:Script>
                     <![CDATA[
                         import spark.components.DataGrid;
                         import spark.components.Grid;
@@ -85,7 +85,7 @@
         <!--- @private -->        
         <fx:Component id="caretIndicator">
             <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
-                <fx:Script>
+                 <fx:Script>
                     <![CDATA[
                         import spark.components.DataGrid;
                         import spark.components.Grid;
@@ -139,7 +139,7 @@
         <!--- @private -->
         <fx:Component id="hoverIndicator">
             <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
-                <fx:Script>
+                 <fx:Script>
                     <![CDATA[
                         import spark.components.DataGrid;
                         import spark.components.Grid;
@@ -178,7 +178,7 @@
         <!--- @private -->
         <fx:Component id="selectionIndicator">
             <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
-                <fx:Script>
+                 <fx:Script>
                     <![CDATA[
                         import spark.components.DataGrid;
                         import spark.components.Grid;

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererExample.mxml
index 89bd8b5..dcfd88a 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererExample.mxml
@@ -19,7 +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" minWidth="955" minHeight="600">
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 
 	<fx:Script>
 		import mx.collections.ArrayList;

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererPrepareExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererPrepareExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererPrepareExample.mxml
index 81134cb..b433620 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererPrepareExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererPrepareExample.mxml
@@ -19,7 +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" minWidth="955" minHeight="600">
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 
 	<fx:Script>
 		import mx.collections.ArrayList;

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample.mxml
index b85c824..735378d 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample.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:Declarations>
 		<fx:XMLList id="employees">
@@ -52,23 +51,15 @@
 		</fx:XMLList>
 	</fx:Declarations>
 	
-	<s:layout>
-		<s:HorizontalLayout horizontalAlign="center" />
-	</s:layout>
-	
-	<s:Panel title="DataGrid Control" 
-			 color="0x000000" 
-			 borderAlpha="0.15" 
-			 width="600">
+	<s:Panel title="DataGrid Control" width="100%" height="100%">
 		
 		<s:layout>
 			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		
-		<s:Label width="100%" color="0x323232"
-				 text="Select a row in the DataGrid control."/>
+		<s:Label width="100%" text="Select a row in the DataGrid control."/>
 		
-		<mx:DataGrid id="dg" color="0x323232" width="100%" rowCount="3" dataProvider="{employees}">
+		<mx:DataGrid id="dg" width="100%" rowCount="3" dataProvider="{employees}">
 			<mx:columns>
 				<mx:DataGridColumn dataField="name" headerText="Name"/>
 				<mx:DataGridColumn dataField="phone" headerText="Phone"/>
@@ -76,7 +67,7 @@
 			</mx:columns>
 		</mx:DataGrid>
 		
-		<mx:Form color="0x323232" width="100%" height="100%" paddingTop="0" paddingBottom="0"  >
+		<mx:Form width="100%" height="100%" paddingTop="0" paddingBottom="0"  >
 			
 			<mx:FormItem label="Name" paddingTop="0" paddingBottom="0">
 				<s:Label text="{dg.selectedItem.name}"/>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/DataGroupExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGroupExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGroupExample.mxml
index 28c1e46..571f14c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGroupExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGroupExample.mxml
@@ -28,8 +28,6 @@
 		<![CDATA[
 			import mx.collections.ArrayCollection;
 			
-			import skins.TDFPanelSkin;
-			
 			public function generateDataProvider(nItems:int = 10000):ArrayCollection {
 				var ac:ArrayCollection = new ArrayCollection();
 				
@@ -55,9 +53,11 @@
 		]]>
 	</fx:Script>
 	
-	<s:Panel title="DataGroup with Virtual Layout" 
-			 width="100%" height="100%"
-			 skinClass="skins.TDFPanelSkin">
+	<s:Panel title="DataGroup with Virtual Layout" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
 		
 		<s:Scroller horizontalCenter="0" top="10">
 			<s:DataGroup width="600" height="123" clipAndEnableScrolling="true" dataProvider="{generateDataProvider(9000)}">
@@ -124,11 +124,11 @@
 				</s:itemRenderer>
 			</s:DataGroup>
 		</s:Scroller>	
-		<s:Label width="90%" horizontalCenter="0" color="#323232" bottom="40"
+		<s:Label width="90%" horizontalCenter="0" bottom="40"
 				 text="Apache Flex DataGroups support virtualization. Virtualization is an optimization for layout and rendering 
 that reduces the footprint and startup time for containers with large numbers of items. This sample shows how
 virtualization can be achieved by only creating enough objects for the items currently being displayed. The 
 useVirtualLayout property should be set on the layout object to achieve virtualization."/>
 	</s:Panel>
 	
-</s:Application>
\ No newline at end of file
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/DateChooserExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DateChooserExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DateChooserExample.mxml
index f0017f9..0f6e9ce 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/DateChooserExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DateChooserExample.mxml
@@ -20,8 +20,7 @@
 <!-- Simple example to demonstrate DateChooser control. -->
 <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[
@@ -41,38 +40,30 @@
 	<fx:Declarations>
 		<mx:DateFormatter id="df"/>
 	</fx:Declarations>
-	
-	<s:layout>
-		<s:HorizontalLayout horizontalAlign="center" />
-	</s:layout>
-	
-	<s:Panel title="DateChooser Control Example" color="0x000000" 
-			 borderAlpha="0.15" 
-			 width="600">
-		
+
+	<s:Panel title="DateChooser Control 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>
 		
 		<s:VGroup>
 			<s:Label width="100%" color="0x000000" text="Simple DateChooser Control"/>
 			<mx:DateChooser id="dateChooser1" yearNavigationEnabled="true"  height="145"   
 							change="displayDate(DateChooser(event.target).selectedDate)" color="0x000000"/>
-			<s:Label id="selection" color="0x323232" text="Date selected:"/>
+			<s:Label id="selection" text="Date selected:"/>
 		</s:VGroup>
 		
 		<s:VGroup>
 			<s:Label width="100%" color="0x000000" text="Disable dates before Oct 31st, 2008"/>
 			<mx:DateChooser id="dateChooser2" yearNavigationEnabled="true" width="175" height="145"
 							disabledRanges="{[ {rangeEnd: new Date(2008, 9, 31)} ]}" color="0x000000"/>
-			<s:Label color="0x323232" text="Date selected: {df.format(dateChooser2.selectedDate)}"/>
+			<s:Label text="Date selected: {df.format(dateChooser2.selectedDate)}"/>
 		</s:VGroup>
 		
 		<s:VGroup width="30%">
-			<mx:Text width="100%" color="0x323232" text="Select a date in the DateChooser control."/>
-			<mx:Text width="100%" color="0x323232" text="Select it again while holding down the Control key to clear it."/>
+			<mx:Text width="100%" text="Select a date in the DateChooser control."/>
+			<mx:Text width="100%" text="Select it again while holding down the Control key to clear it."/>
 		</s:VGroup>
 		
 	</s:Panel>    

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/DateFieldExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DateFieldExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DateFieldExample.mxml
index 1572d85..19e5299 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/DateFieldExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DateFieldExample.mxml
@@ -20,8 +20,7 @@
 <!-- Simple example to demonstrate the DateField control. -->
 <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[
@@ -41,18 +40,10 @@
 		<mx:DateFormatter id="df"/>
 	</fx:Declarations>
 	
-	<s:layout>
-		<s:HorizontalLayout horizontalAlign="center" />
-	</s:layout>
-	
-	<s:Panel title="DateField Control Example" color="0x000000" 
-			 borderAlpha="0.15" 
-			 width="600">
-		
+	<s:Panel title="DateField Control 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>
 		
 		<s:BorderContainer width="50%" borderColor="0xDCDCDC" height="100%" borderStyle="solid">
@@ -61,15 +52,15 @@
 				<s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/>
 			</s:layout>
 			
-			<s:Label id="selection" color="0x323232" text="Date selected:" />
+			<s:Label id="selection" text="Date selected:" />
 			
 			<mx:DateField id="dateField1" yearNavigationEnabled="true"
 						  change="dateChanged(DateField(event.target).selectedDate)" color="0x000000"/>
 			
-			<s:Label color="0x000000" text="Basic DateField:"/>
+			<s:Label text="Basic DateField:"/>
 			
 			
-			<s:Label width="100%" color="0x323232"
+			<s:Label width="100%"
 					 text="Select a date in the DateField control. Select it again while holding down the Control key to clear it."/>
 			
 		</s:BorderContainer>
@@ -80,12 +71,12 @@
 				<s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/>
 			</s:layout>
 			
-			<s:Label color="0x323232" text="Date selected: {df.format(dateField2.selectedDate)}"/>
+			<s:Label text="Date selected: {df.format(dateField2.selectedDate)}"/>
 			
 			<mx:DateField id="dateField2" yearNavigationEnabled="true" 
 						  disabledRanges="{[ {rangeEnd: new Date(2008, 9, 31)} ]}" color="0x000000"/>
 			
-			<s:Label color="0x000000" text="Disable dates on or before Oct 31, 2008."/>
+			<s:Label text="Disable dates on or before Oct 31, 2008."/>
 			
 		</s:BorderContainer>