Merge commit 'f77ed26a33fcb38eb99d52e73d1629b3519939c8'
diff --git a/FlexPMD/pom.xml b/FlexPMD/pom.xml
index e35058f..45fe1f5 100644
--- a/FlexPMD/pom.xml
+++ b/FlexPMD/pom.xml
@@ -95,7 +95,7 @@
 		<!-- Flex project versions -->
 		<!-- Plugin versions -->
 
-		<flex-mojos-plugin.version>7.1.0-SNAPSHOT</flex-mojos-plugin.version>
+		<flex-mojos-plugin.version>7.0.1</flex-mojos-plugin.version>
 		<ant-run-plugin.version>1.2</ant-run-plugin.version>
 		<maven-dependency-plugin.version>2.0</maven-dependency-plugin.version>
 	</properties>
diff --git a/Squiggly/ApproveSquiggly.xml b/Squiggly/ApproveSquiggly.xml
index ea01ea3..7d6a723 100644
--- a/Squiggly/ApproveSquiggly.xml
+++ b/Squiggly/ApproveSquiggly.xml
@@ -227,6 +227,14 @@
                 <exclude name="**/*.mp3"/>
                 <exclude name="**/*.flv"/>
                 <exclude name="docs/**"/>
+                <exclude name="CONTRIBUTORS"/>
+                <exclude name="CONTRIBUTING"/>
+                <exclude name="dictionaries/en_GB/README_en_GB.txt"/>
+                <exclude name="dictionaries/en_GB/en_GB.aff"/>
+                <exclude name="dictionaries/en_GB/en_GB.dic"/>
+                <exclude name="dictionaries/en_US/README_en_US.txt"/>
+                <exclude name="dictionaries/en_US/en_US.aff"/>
+                <exclude name="dictionaries/en_US/en_US.dic"/>
                 <exclude name="main/Data/usa.txt"/>
                 <exclude name="main/Tools/AdobeSpellingDictGen/sample/sampleWordList.txt"/>
             </fileset>
diff --git a/Squiggly/CONTRIBUTORS b/Squiggly/CONTRIBUTORS
index abc46ab..78d4feb 100644
--- a/Squiggly/CONTRIBUTORS
+++ b/Squiggly/CONTRIBUTORS
@@ -3,7 +3,8 @@
 
 Apache Flex Squiggly 1.1
 ------------------------
-Christofer Dutz, Justin Mclean, Kevin Atkinson
+Alex Harui, Chris Martin, Christofer Dutz, Eliezer Reis, Justin Mclean,
+Kevin Atkinson, Mark Kessler
 
 Apache Flex Squiggly 1.0
 ------------------------
diff --git a/Squiggly/LICENSE b/Squiggly/LICENSE
index 3eccb83..83b9bb7 100644
--- a/Squiggly/LICENSE
+++ b/Squiggly/LICENSE
@@ -206,11 +206,13 @@
 
 Apache Squiggly Subcomponents:
    
-   The dictionaries found in dictionaries directory are licensed under
-   a BSD / MIT like license and are Copyright 2000-2014 by Kevin Atkinson.
+   This product bundles the SCOWL (and friends) Hunspell dictionaries
+   licensed under a BSD / MIT like license and are Copyright 2000-2014
+   by Kevin Atkinson.
    
-   For a complete details of the LICENSE please see the README in the en_GB
-   and en_US directories.
+   For complete details of the LICENSE please see:
+      dictionaries/en_US/README_en_US.txt
+      dictionaries/en_GB/README_en_GB.txt
 
   Copyright 2000-2014 by Kevin Atkinson
 
@@ -223,6 +225,3 @@
   about the suitability of this array for any purpose. It is provided
   "as is" without express or implied warranty.
 
-
-
-
diff --git a/Squiggly/README b/Squiggly/README
index 6b69397..eee55e6 100644
--- a/Squiggly/README
+++ b/Squiggly/README
@@ -1,7 +1,7 @@
 
-  Apache Flex Squiggly is a ActionScript spell checking library.
+  Apache Flex Squiggly is an ActionScript spell checking library.
 	 
-  This application is based on work donated by Adobe.
+  This application is based on work donated by Adobe Systems Inc.
   
 ==========================================================================================
 Initial Setup Required
@@ -15,9 +15,9 @@
 ==========================================================================================
 
 1.  On Linux or Mac un tar/gzip the source distribution:
-	    tar -zxvf apache-flex-squiggly-1.0.tar.gz
+	    tar -zxvf apache-flex-squiggly-1.1.tar.gz
 	Or if on windows unzip 
-		apache-flex-squiggly-1.0.zip
+		apache-flex-squiggly-1.1.zip
 
 2.  In the base directory, run:
         ant compile
@@ -63,8 +63,10 @@
 Please read the ASDocs (found in docs directory) first to understand the
 classes in Squiggly.
 
-If you are using the SpellChecker class directly, you need.
-- SpellingEngine.swc in [YourProject]/libs folder, you can find it from ./libs
+For Apache Flex projects if you are using the SpellChecker class directly, you need:
+- ApacheFlexSpellingEngine.swc in [YourProject]/libs folder
+- ApacheFlexSpellingFramwork.swc in [YourProject]/libs folder
+- ApacheFlexLinguisticUtils.swc in [YourProject]/libs folder
 - Dictionary files in [YourProject]/src folder
 
 You can obtain en_US, en_CA and en_GB dictionaries under a BSD/MIT-like license
@@ -85,16 +87,18 @@
 If you are using the simple UI integration feature (SpellUI class), in addition
 to what mentioned above, you also need:
 - SpellingConfig.xml in [YourProject]/src
-- SpellingUI.swc in [YourProject]/src
-- SpellingUIEx.swc if you need spark support in Flex 4) in [YourProject]/libs 
+- ApacheFlexSpellingUI.swc (if you need mx support) in [YourProject]/libs
+- ApacheFlexSpellingUIEx.swc (if you need spark support) in [YourProject]/libs 
+
+Note that you can only support spelling in mx or spark components not both at once.
 
 You can download dictionaries and use those by editing SpellingConfig.xml.
 
 The default name of the config file has changed from AdobeSpellingConfig.xml to
 SpellingConfig.xml.
 
-Here's the content of SpellingConfig.xml, each entry maps the languageCode with
-the relative path for resource files. 
+Here's the typical content of SpellingConfig.xml, each entry maps the languageCode
+with the relative path for resource files. 
 
 <SpellingConfig>
   <LanguageResource language="English" languageCode="en_US"
diff --git a/Squiggly/RELEASE_NOTES b/Squiggly/RELEASE_NOTES
index ca5315a..f29e5ad 100644
--- a/Squiggly/RELEASE_NOTES
+++ b/Squiggly/RELEASE_NOTES
@@ -1,16 +1,15 @@
 ------------------------------------------------
-Apche Flex Squiggly 1.1
+Apache Flex Squiggly 1.1
 ------------------------------------------------
 
 Squiggly 1.1 has the following changes from Squiggly 1.0:
 - Mavenized version of Squiggly
+- Added installer Ant file
 - Added en_US and en_GB dictionaries
-
-The following bugs have been fixed:
-
+- Now works with both Halo and Spark components
 
 ------------------------------------------------
-Apche Flex Squiggly 1.0
+Apache Flex Squiggly 1.0
 ------------------------------------------------
 
 Initial parity release for Adobe's Squiggly library.
diff --git a/Squiggly/ane/Squiggly/AdobeSpellingUITLF/src/com/adobe/linguistics/spelling/SpellUIForTLF.as b/Squiggly/ane/Squiggly/AdobeSpellingUITLF/src/com/adobe/linguistics/spelling/SpellUIForTLF.as
index 96c496b..157dc48 100644
--- a/Squiggly/ane/Squiggly/AdobeSpellingUITLF/src/com/adobe/linguistics/spelling/SpellUIForTLF.as
+++ b/Squiggly/ane/Squiggly/AdobeSpellingUITLF/src/com/adobe/linguistics/spelling/SpellUIForTLF.as
@@ -23,10 +23,10 @@
 	import com.adobe.linguistics.spelling.framework.ResourceTable;

 	import com.adobe.linguistics.spelling.framework.SpellingConfiguration;

 	import com.adobe.linguistics.spelling.framework.SpellingService;

-	import com.adobe.linguistics.spelling.ui.IHighlighter;

-	import com.adobe.linguistics.spelling.ui.IWordProcessor;

-	import com.adobe.linguistics.spelling.ui.TLFHighlighter;

-	import com.adobe.linguistics.spelling.ui.TLFWordProcessor;

+	import com.adobe.linguistics.spelling.ui.framework.IHighlighter;

+	import com.adobe.linguistics.spelling.ui.framework.IWordProcessor;

+	import com.adobe.linguistics.spelling.ui.framework.TLFHighlighter;

+	import com.adobe.linguistics.spelling.ui.framework.TLFWordProcessor;

 	import com.adobe.linguistics.utils.TextFilter;

 	import com.adobe.linguistics.utils.TextTokenizer;

 	import com.adobe.linguistics.utils.Token;

diff --git a/Squiggly/ane/Squiggly/AdobeSpellingUITLF/src/com/adobe/linguistics/spelling/ui/TLFHighlighter.as b/Squiggly/ane/Squiggly/AdobeSpellingUITLF/src/com/adobe/linguistics/spelling/ui/TLFHighlighter.as
index 3c8c7e9..69da9fe 100644
--- a/Squiggly/ane/Squiggly/AdobeSpellingUITLF/src/com/adobe/linguistics/spelling/ui/TLFHighlighter.as
+++ b/Squiggly/ane/Squiggly/AdobeSpellingUITLF/src/com/adobe/linguistics/spelling/ui/TLFHighlighter.as
@@ -35,7 +35,7 @@
 	import flashx.textLayout.edit.SelectionManager;

 	import flashx.textLayout.elements.TextFlow;

 	import flashx.textLayout.tlf_internal;

-	import com.adobe.linguistics.spelling.ui.IHighlighter;

+	import com.adobe.linguistics.spelling.framework.ui.IHighlighter;

 

 

 	use namespace tlf_internal;	

diff --git a/Squiggly/ane/Squiggly/AdobeSpellingUITLF/src/com/adobe/linguistics/spelling/ui/TLFWordProcessor.as b/Squiggly/ane/Squiggly/AdobeSpellingUITLF/src/com/adobe/linguistics/spelling/ui/TLFWordProcessor.as
index 8cb3197..dfe8791 100644
--- a/Squiggly/ane/Squiggly/AdobeSpellingUITLF/src/com/adobe/linguistics/spelling/ui/TLFWordProcessor.as
+++ b/Squiggly/ane/Squiggly/AdobeSpellingUITLF/src/com/adobe/linguistics/spelling/ui/TLFWordProcessor.as
@@ -36,7 +36,7 @@
 	import flashx.textLayout.container.ContainerController;

 	import flashx.textLayout.elements.FlowLeafElement;

 	import flashx.textLayout.elements.ParagraphElement;

-	import com.adobe.linguistics.spelling.ui.IWordProcessor;

+	import com.adobe.linguistics.spelling.framework.ui.IWordProcessor;

 	

 	use namespace tlf_internal;	

 	

diff --git a/Squiggly/build.xml b/Squiggly/build.xml
index 7c68f2f..026706b 100644
--- a/Squiggly/build.xml
+++ b/Squiggly/build.xml
@@ -28,7 +28,7 @@
         <isset property="env.FLEX_HOME" />
     </condition>
         	
-    <property name="version" value="1.0" />
+    <property name="version" value="1.1" />
 	
     <path id="flexTasks.path">
         <fileset dir="${FLEX_HOME}">
@@ -68,10 +68,10 @@
 		    <doc-classes class="com.adobe.linguistics.spelling.framework.ResourceTable"/>
 		    <doc-classes class="com.adobe.linguistics.spelling.framework.SpellingConfiguration"/>		    
 		    <doc-classes class="com.adobe.linguistics.spelling.framework.SpellingService"/>		    
-		    <doc-classes class="com.adobe.linguistics.spelling.ui.IHighlighter"/>
-		    <doc-classes class="com.adobe.linguistics.spelling.ui.HaloHighlighter"/>
-			<doc-classes class="com.adobe.linguistics.spelling.ui.SparkHighlighter"/>
-			<doc-classes class="com.adobe.linguistics.spelling.ui.TLFHighlighter"/>
+		    <doc-classes class="com.adobe.linguistics.spelling.framework.ui.IHighlighter"/>
+		    <doc-classes class="com.adobe.linguistics.spelling.framework.ui.HaloHighlighter"/>
+			<doc-classes class="com.adobe.linguistics.spelling.framework.ui.SparkHighlighter"/>
+			<doc-classes class="com.adobe.linguistics.spelling.framework.ui.TLFHighlighter"/>
 	    		    
 			<compiler.source-path path-element="main/SpellingUI/src"/>
 			<compiler.source-path path-element="main/SpellingUITLF/src"/>
@@ -80,7 +80,7 @@
 			<compiler.source-path path-element="main/SpellingFramework/src"/>
 			
 			<package name="com.adobe.linguistics.spelling" description="This package providing spell checking functionality to your action script applications. This includes the core spell checking engine and the optional SpellUI class for easy integration with your existing Flex projects." />
-			<package name="com.adobe.linguistics.spelling.ui" description="This package provides text highlighting related functionalities." />
+			<package name="com.adobe.linguistics.spelling.framework.ui" description="This package provides text highlighting related functionalities." />
 			<package name="com.adobe.linguistics.spelling.framework" description="This package provides spelling service and spelling configuration related functionalities." />
 			<package name="com.adobe.linguistics.utils" description="This package provides text parsing and tokenizing related classes." />
 		</asdoc>
@@ -99,7 +99,9 @@
                 <include name="LICENSE" />
                 <include name="NOTICE" />
                 <include name="README" />
-                <include name="RELEASE_NOTES" />
+            	<include name="RELEASE_NOTES" />
+            	<include name="CONTRIBUTING" />
+            	<include name="CONTRIBUTORS" />
                 <include name="**/*.xml" />
                 <include name="**/*.mxml" />
             	<include name="**/*.as" />
@@ -109,12 +111,14 @@
             	<include name="**/*.sh" />
             	<include name="**/*.properties" />
             	<include name="docs/**" />
+            	<include name="dictionaries/**" />
             	<exclude name="ane/**" />
             	<exclude name="main/ASDocExamples/**" />
             	<exclude name="main/Automation/**" />
             	<exclude name="main/Data/**" />
             	<exclude name="main/Demo/**" />
             	<exclude name="main/Tools/**" />
+            	<exclude name="main/generated/**" />
              </tarfileset>
          </tar>
 	</target>
@@ -126,6 +130,8 @@
                 <include name="NOTICE" />
                 <include name="README" />
                 <include name="RELEASE_NOTES" />
+            	<include name="CONTRIBUTING" />
+            	<include name="CONTRIBUTORS" />
                 <include name="**/*.xml" />
                 <include name="**/*.mxml" />
             	<include name="**/*.as" />
@@ -135,12 +141,14 @@
             	<include name="**/*.sh" />
             	<include name="**/*.properties" />
             	<include name="docs/**" />
+            	<include name="dictionaries/**" />
             	<exclude name="ane/**" />
             	<exclude name="main/ASDocExamples/**" />
             	<exclude name="main/Automation/**" />
             	<exclude name="main/Data/**" />
             	<exclude name="main/Demo/**" />
             	<exclude name="main/Tools/**" />
+            	<exclude name="main/generated/**" />
              </fileset>
          </zip>
 	</target>
@@ -154,6 +162,8 @@
 	                <include name="NOTICE" />
 	                <include name="README" />
 	                <include name="RELEASE_NOTES" />
+	            	<include name="CONTRIBUTING" />
+	            	<include name="CONTRIBUTORS" />
 	                <include name="**/*.xml" />
 	                <include name="**/*.mxml" />
 	            	<include name="**/*.as" />
@@ -163,6 +173,7 @@
 	            	<include name="**/*.sh" />
 	            	<include name="**/*.properties" />
 	            	<include name="docs/**" />
+	            	<include name="dictionaries/**" />
 	                <include name="**/*.swc" />
 	            	<exclude name="ane/**" />
 	            	<exclude name="main/ASDocExamples/**" />
@@ -170,6 +181,7 @@
 	            	<exclude name="main/Data/**" />
 	            	<exclude name="main/Demo/**" />
 	            	<exclude name="main/Tools/**" />
+	            	<exclude name="main/generated/**" />
 	             </tarfileset>
 	         </tar>
 		</target>
@@ -181,6 +193,8 @@
 	                <include name="NOTICE" />
 	                <include name="README" />
 	                <include name="RELEASE_NOTES" />
+	            	<include name="CONTRIBUTING" />
+	            	<include name="CONTRIBUTORS" />
 	                <include name="**/*.xml" />
 	                <include name="**/*.mxml" />
 	            	<include name="**/*.as" />
@@ -190,6 +204,7 @@
 	            	<include name="**/*.sh" />
 	            	<include name="**/*.properties" />
 	            	<include name="docs/**" />
+	            	<include name="dictionaries/**" />
 	                <include name="**/*.swc" />
 	            	<exclude name="ane/**" />
 	            	<exclude name="main/ASDocExamples/**" />
@@ -197,6 +212,7 @@
 	            	<exclude name="main/Data/**" />
 	            	<exclude name="main/Demo/**" />
 	            	<exclude name="main/Tools/**" />
+	            	<exclude name="main/generated/**" />
 	             </fileset>
 	         </zip>
 		</target>
@@ -207,4 +223,4 @@
     	</delete>
     	<delete dir="${basedir}/out"/> 
     </target>
-</project>
\ No newline at end of file
+</project>
diff --git a/Squiggly/dictionaries/en_GB/README b/Squiggly/dictionaries/en_GB/README_en_GB.txt
similarity index 100%
rename from Squiggly/dictionaries/en_GB/README
rename to Squiggly/dictionaries/en_GB/README_en_GB.txt
diff --git a/Squiggly/dictionaries/en_US/README b/Squiggly/dictionaries/en_US/README_en_US.txt
similarity index 100%
rename from Squiggly/dictionaries/en_US/README
rename to Squiggly/dictionaries/en_US/README_en_US.txt
diff --git a/Squiggly/installer.xml b/Squiggly/installer.xml
new file mode 100644
index 0000000..c936408
--- /dev/null
+++ b/Squiggly/installer.xml
@@ -0,0 +1,127 @@
+<?xml version="1.0"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+<project name="squiggly_install" default="install" basedir=".">
+    
+    <!-- Required for OSX 10.6 / Snow Leopard Performance. -->
+    <!-- Java 7 on Mac requires OSX 10.7.3 or higher and is 64-bit only -->
+    <!-- local.d32 is set/used in build.properties so this needs to be done first. -->
+    <condition property="local.d32" value="-d32">
+        <and>
+            <os family="windows"/>
+            <equals arg1="${sun.arch.data.model}" arg2="64"/>
+            <equals arg1="${os.arch}" arg2="x86_64"/>
+            <equals arg1="${ant.java.version}" arg2="1.6"/>
+        </and>
+    </condition>
+    	
+    <condition property="isMacOrLinux" value="mac">
+    	<or>
+    		<os family="mac" />
+    		<os family="unix" />
+    	</or>
+    </condition>
+    <condition property="isWindows" value="windows">
+        <os family="windows" />
+    </condition>
+        	
+	<property environment="env"/>
+    <condition property="FLEX_HOME" value="${env.FLEX_HOME}">
+        <isset property="env.FLEX_HOME" />
+    </condition>
+
+    <property file="${FLEX_HOME}/local.properties"/>
+    <property file="${FLEX_HOME}/build.properties"/>
+    <property file="${basedir}/${bundle}.properties"/>
+
+	<property name="download.dir" value="${FLEX_HOME}/in"/>
+	<property name="unpack.dir" value="${FLEX_HOME}/squiggly"/>
+	<property name="mirror.url" value="http://flex.apache.org/single-mirror-url.cgi" />
+	
+    <property name="squiggly.url.folder" value="flex/squiggly/1.1" />
+   
+    <target name="file-setup-win" if="isWindows">
+    	<property name="squiggly.url.file" value="apache-flex-squiggly-1.1-bin.zip" />
+    	<property name="squiggly.url.md5" value="34a0d8d445f8f1307cad35e25d1377bd" />
+    </target>
+	
+    <target name="file-setup-unix" if="isMacOrLinux">
+    	<property name="squiggly.url.file" value="apache-flex-squiggly-1.1-bin.tar.gz" />
+    	<property name="squiggly.url.md5" value="ea03691ec15f625c5281e0d01dcc9570" />
+    </target>
+
+    <target name="install" depends="file-setup-win,file-setup-unix,squiggly-download-unpack" description="Adds squiggly to an Apache Flex SDK">
+        <delete dir="${download.dir}" />
+        <echo>Squiggly installed</echo>
+    </target>
+    
+    <target name="squiggly-download-unpack" description="Downloads squiggly and copies into the Apache Flex SDK">
+        <mkdir dir="${download.dir}"/>
+    	
+    	<get src="${mirror.url}" dest="${download.dir}/mirror.txt" />
+    	<replace file="${download.dir}/mirror.txt" token="&lt;p&gt;" />
+    	<replace file="${download.dir}/mirror.txt" token="&lt;/p&gt;" />
+    	<loadfile property="squiggly.url.server" srcFile="${download.dir}/mirror.txt" />
+    	
+    	<echo>Downloading ${squiggly.url.server}/${squiggly.url.folder}/${squiggly.url.file}</echo>
+        
+    	<antcall target="download-check-md5">
+            <param name="domain" value="${squiggly.url.server}" />
+            <param name="folder" value="${squiggly.url.folder}" />
+            <param name="file" value="${squiggly.url.file}" />
+            <param name="dest" value="${download.dir}/${squiggly.url.file}"/>
+			<param name="failmessage" value="Squiggly download failed" />
+			<param name="md5" value="${squiggly.url.md5}" />
+        </antcall>
+    	
+    	<mkdir dir="${unpack.dir}"/>
+    	<antcall target="files-unzip" />
+    	<antcall target="files-untar" />
+    </target>
+			
+    <target name="files-unzip" if="isWindows">
+    	<unzip dest="${unpack.dir}">
+    		<fileset file="${download.dir}/${squiggly.url.file}" />
+    	</unzip>
+    </target>
+	
+    <target name="files-untar" if="isMacOrLinux">
+    	<untar dest="${unpack.dir}" compression="gzip">
+    		<fileset file="${download.dir}/${squiggly.url.file}" />
+    	</untar>
+    </target>
+
+    <target name="download-check-md5" description="Downloads file, and verifies checksum.">     
+    	<tstamp />
+    	<property name="ts" value="${DSTAMP}${TSTAMP}" />
+        <get src="${domain}/${folder}/${file}?ts=${ts}" dest="${dest}" verbose="true" />
+        <antcall target="check-md5" />
+    </target>
+
+    <target name="check-md5" description="Verifies MD5 checksum, and fails if checksum doesn't match">
+        <echo>Checking ${dest} matches ${md5}</echo>
+        <checksum file="${dest}" algorithm="MD5" verifyproperty="md5.failed" property="${md5}" />
+        <fail message="${failmessage}">
+            <condition>
+                <equals arg1="${md5.failed}" arg2="false" />
+            </condition>
+        </fail>
+    </target>
+</project>
diff --git a/Squiggly/main/Demo/SpellingDemoEx/src/AdobeSpellingDemoEx.mxml b/Squiggly/main/Demo/SpellingDemoEx/src/AdobeSpellingDemoEx.mxml
new file mode 100644
index 0000000..9badc49
--- /dev/null
+++ b/Squiggly/main/Demo/SpellingDemoEx/src/AdobeSpellingDemoEx.mxml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<!-- Simple example to demonstrate the Spark TextArea 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" viewSourceURL="srcview/index.html" applicationComplete="init()">
+	<s:layout>
+		<s:VerticalLayout/>
+	</s:layout>
+	
+	<fx:Script>
+		<![CDATA[
+			import com.adobe.linguistics.spelling.SpellUI;
+			import com.adobe.linguistics.spelling.framework.SpellingConfiguration;
+			import com.adobe.linguistics.spelling.framework.ResourceTable;
+			
+			
+			public function init():void
+			{
+				var resourceTable:ResourceTable = new ResourceTable();
+				resourceTable.setResource("en_US", {rule:"data/en_US.aff", dict:"data/en_US.dic"});
+				resourceTable.setResource("es_ES", {rule:"data/es_ES.aff", dict:"data/es_ES.dic"});
+				resourceTable.setResource("it_IT", {rule:"data/it_IT.aff", dict:"data/it_IT.dic"});
+				resourceTable.setResource("pt_PT", {rule:"data/pt_PT.aff", dict:"data/pt_PT.dic"});	
+				SpellingConfiguration.resourceTable = resourceTable;
+			}
+		]]>
+	</fx:Script>
+	
+	<mx:Label text="Squiggly Spell Checker Flex Demo v0.3" fontSize="30"/>
+	
+	<mx:TabNavigator width="70%" height="100%" fontSize="25">
+		<s:NavigatorContent label="English" width="100%" height="100%">
+			<s:TextArea id="ta_en" width="100%" height="100%" 
+						 text="I know Enlish. Use the context menu to see the suggestions of the missbelled word. "
+						 creationComplete="SpellUI.enableSpelling(ta_en, 'en_US');"/>
+		</s:NavigatorContent>
+		<s:NavigatorContent label="Spanish" width="100%" height="100%">
+			<s:TextArea id="ta_es" width="100%" height="100%" 
+						 text="Sé esbañol. Utilice el menú contextual para ver las sugerencias de la palabra mal eskrita. "
+						 creationComplete="SpellUI.enableSpelling(ta_es, 'es_ES');" />
+		</s:NavigatorContent>
+		<s:NavigatorContent label="Portuguese" width="100%" height="100%">
+			<s:TextArea id="ta_pt" width="100%" height="100%" 
+						 text="Eu sei Portoguês. Use o menu de contexto para ver as sugestões da palavra grafada incorectamente."
+						 creationComplete="SpellUI.enableSpelling(ta_pt, 'pt_PT');"/>
+		</s:NavigatorContent>	
+		<s:NavigatorContent label="Italian" width="100%" height="100%">
+			<s:TextArea id="ta_it" width="100%" height="100%" 
+						 text="So italianou. Utilizzare il menu di scelta rapida per visualizzare le suggestioni della parola erreta. "
+						 creationComplete="SpellUI.enableSpelling(ta_it, 'it_IT');"/>
+		</s:NavigatorContent>
+	</mx:TabNavigator>
+</s:Application>
diff --git a/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/SpellUI.as b/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/SpellUI.as
index 20a229d..65823ec 100644
--- a/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/SpellUI.as
+++ b/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/SpellUI.as
@@ -23,10 +23,10 @@
 	import com.adobe.linguistics.spelling.framework.ResourceTable;
 	import com.adobe.linguistics.spelling.framework.SpellingConfiguration;
 	import com.adobe.linguistics.spelling.framework.SpellingService;
-    import com.adobe.linguistics.spelling.ui.HaloHighlighter;
-    import com.adobe.linguistics.spelling.ui.HaloWordProcessor;
-    import com.adobe.linguistics.spelling.ui.IHighlighter;
-    import com.adobe.linguistics.spelling.ui.IWordProcessor;
+    import com.adobe.linguistics.spelling.framework.ui.HaloHighlighter;
+    import com.adobe.linguistics.spelling.framework.ui.HaloWordProcessor;
+    import com.adobe.linguistics.spelling.framework.ui.IHighlighter;
+    import com.adobe.linguistics.spelling.framework.ui.IWordProcessor;
 	import com.adobe.linguistics.utils.TextTokenizer;
 	import com.adobe.linguistics.utils.Token;
 	
diff --git a/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/SpellingContextMenu.as b/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/SpellingContextMenu.as
index d84f325..fecf48f 100644
--- a/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/SpellingContextMenu.as
+++ b/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/SpellingContextMenu.as
@@ -35,8 +35,8 @@
 	
 	import flash.geom.Point;
 	import flash.geom.Rectangle;
-	import com.adobe.linguistics.spelling.ui.IHighlighter;
-	import com.adobe.linguistics.spelling.ui.IWordProcessor;
+	import com.adobe.linguistics.spelling.framework.ui.IHighlighter;
+	import com.adobe.linguistics.spelling.framework.ui.IWordProcessor;
 	
 	public class SpellingContextMenu
 	{
diff --git a/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/HaloHighlighter.as b/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/HaloHighlighter.as
deleted file mode 100644
index 91b0d5f..0000000
--- a/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/HaloHighlighter.as
+++ /dev/null
@@ -1,126 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  Licensed to the Apache Software Foundation (ASF) under one or more
-//  contributor license agreements.  See the NOTICE file distributed with
-//  this work for additional information regarding copyright ownership.
-//  The ASF licenses this file to You under the Apache License, Version 2.0
-//  (the "License"); you may not use this file except in compliance with
-//  the License.  You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-//  Unless required by applicable law or agreed to in writing, software
-//  distributed under the License is distributed on an "AS IS" BASIS,
-//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//  See the License for the specific language governing permissions and
-//  limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-
-package com.adobe.linguistics.spelling.ui
-{
-	import __AS3__.vec.Vector;
-	
-	import com.adobe.linguistics.utils.Token;
-	
-	import flash.geom.Point;
-	import flash.text.TextField;
-	
-	import mx.core.IUITextField;
-	import com.adobe.linguistics.spelling.ui.IHighlighter;
-	import com.adobe.linguistics.spelling.ui.SpellingHighlighter;
-
-	/**
-	 * <p>This class facilitates drawing of squiggly lines below words for TextField class. TextField class is used to create display objects for text display 
-	 * and input for Halo TextArea and TextInput components. HaloHighlighter could therefore be used for drawing squiggly lines in these Halo components.</p>
-	 * 	
-	 * @playerversion Flash 10
-	 * @langversion 3.0
-	 */
-
-	public class HaloHighlighter implements IHighlighter
-	{
-		private var mTextField:TextField;
-		private var mHighlighter:SpellingHighlighter;
-		/*
-		* offset point:
-		*/
-		private var _offsetPoint:Point;
-
-		/**
-		 * The constructor for HaloHighlighter.
-		 * @param textField <code>TextField</code> in which to enable highlighting.		 
-		 * @playerversion Flash 10
-		 * @langversion 3.0
-		 */
-		public function HaloHighlighter( textField:TextField )
-		{
-			if (textField == null ) throw new Error("illegal argument."); 
-			mTextField = textField;
-			mHighlighter = null;
-			this._offsetPoint = new Point(0,0);
-		}
-		/**
-		 * Draw squiggly lines below a given token.
-		 * @param token <code>Token</code> information of the word to be highlighted.		 
-		 * @playerversion Flash 10
-		 * @langversion 3.0
-		 */
-		public function drawSquiggleAt(token:Token):void
-		{
-			squiggleWord(token);
-		}
-		
-		/**
-		 * Clear all squiggly lines in the TextField.		
-		 * @playerversion Flash 10
-		 * @langversion 3.0
-		 */
-		public function clearSquiggles():void
-		{
-			if (mHighlighter) {
-				mTextField.parent.removeChild(mHighlighter);
-				mHighlighter=null;
-			}
-			
-		}
-		
-		/**
-		 * Set offset point information for scrollable controls. This is used by the highlighter to move 
-		 * the squiggly lines as the text scrolls inside the control.	
-		 * @param op offset information as a <code>Point</code> instance.		 
-		 * @playerversion Flash 10
-		 * @langversion 3.0
-		 */		
-		public function set offsetPoint(op:Point):void{
-			_offsetPoint = op;
-		}
-		
-		/**
-		 * Get offset point information for scrollable controls. This is used by the highlighter to move 
-		 * the squiggly lines as the text scrolls inside the control.	
-		 * @param op offset information as a <code>Point</code> instance.		 
-		 * @playerversion Flash 10
-		 * @langversion 3.0
-		 */		
-		public function get offsetPoint():Point{
-			return _offsetPoint;
-		}
-		
-
-		private function squiggleWord(token:Token):void {
-						
-			if (!mHighlighter) {
-				mHighlighter= new SpellingHighlighter( mTextField as IUITextField);
-				mTextField.parent.addChild(mHighlighter);				
-			}
-						
-			mHighlighter.drawSquigglyLine(token.first, token.last);
-		
-		
-			//mTextField.parent.addChild(mHighlighter);	
-			mHighlighter.move(_offsetPoint.x, _offsetPoint.y);
-		}
-
-	}
-}
\ No newline at end of file
diff --git a/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/HaloWordProcessor.as b/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/HaloWordProcessor.as
deleted file mode 100644
index 9c05b3b..0000000
--- a/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/HaloWordProcessor.as
+++ /dev/null
@@ -1,112 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  Licensed to the Apache Software Foundation (ASF) under one or more
-//  contributor license agreements.  See the NOTICE file distributed with
-//  this work for additional information regarding copyright ownership.
-//  The ASF licenses this file to You under the Apache License, Version 2.0
-//  (the "License"); you may not use this file except in compliance with
-//  the License.  You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-//  Unless required by applicable law or agreed to in writing, software
-//  distributed under the License is distributed on an "AS IS" BASIS,
-//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//  See the License for the specific language governing permissions and
-//  limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-
-package com.adobe.linguistics.spelling.ui
-{
-	import com.adobe.linguistics.utils.ITokenizer;
-	import com.adobe.linguistics.utils.TextTokenizer;
-	import com.adobe.linguistics.utils.Token;
-	
-	import flash.text.TextField;
-	import flash.text.TextFormat;
-	
-	import mx.controls.TextArea;
-	import mx.controls.TextInput;
-	import com.adobe.linguistics.spelling.ui.IWordProcessor;
-
-
-	public class HaloWordProcessor implements IWordProcessor
-	{
-		private var mTextField:TextField;
-
-		public function HaloWordProcessor(textField:TextField)
-		{
-			if (textField == null ) throw new Error("illegal argument."); 
-			mTextField = textField;
-		}
-				
-		
-		public function replaceText(token:Token, replacement:String):void {
-			var startIndex:int = token.first;
-			var endIndex:int = token.last;
-			
-			if ( replacement == null ) return;
-			
-			if (mTextField.text.length<endIndex || startIndex<0) {
-				return;
-			}
-			
-			var _misspellStart:int = startIndex;
-			var _misspellEnd:int = endIndex;
-			// Try to preserve the format, this works if the whole misspelled word is the same format
-			var tf:TextFormat = mTextField.getTextFormat(_misspellStart, _misspellEnd);
-			mTextField.replaceText(_misspellStart, _misspellEnd, replacement);	
-			mTextField.setTextFormat(tf, _misspellStart, _misspellStart+replacement.length);
-			
-			var ta:TextArea = mTextField.parent as TextArea;
-			var ti:TextInput = mTextField.parent as TextInput;
-			
-			if (ta != null) {
-				ta.selectionBeginIndex = _misspellStart + replacement.length;
-				ta.selectionEndIndex = _misspellStart + replacement.length;
-			}
-			else if (ti != null) {
-				ti.selectionBeginIndex = _misspellStart + replacement.length;
-				ti.selectionEndIndex = _misspellStart + replacement.length;				
-			}
-			else {
-				// Do nothing if it's not a valid text component
-			}
-		}
-
-		
-		public function getWordAtPoint(x:uint, y:uint, externalTokenizer:ITokenizer=null):Token
-		{
-			var _token:Token = tryGetWordAtPoint(x,y, externalTokenizer);
-			return _token;
-		}
-		
-		private function tryGetWordAtPoint(x:uint, y:uint, externalTokenizer:ITokenizer=null):Token {
-			// TODO: use a better alternative than _misspellStart, end
-			var index:uint = mTextField.getCharIndexAtPoint(x + mTextField.scrollH, y);
-			if (index >= mTextField.text.length) return null;
-
-			var tmpToken:Token = new Token(index,index);
-			var tokenizer:ITokenizer;
-			if ( externalTokenizer == null ) {
-				tokenizer = new TextTokenizer(mTextField.text);	
-			}else {
-				tokenizer = externalTokenizer;
-			}
-			
-			var result:Token = new Token(0,0);
-			
-			var preToken:Token = tokenizer.getPreviousToken(tmpToken);
-			var nextToken:Token = tokenizer.getNextToken(tmpToken);
-			if ( preToken.last == nextToken.first ) {
-				result.first = preToken.first;
-				result.last = nextToken.last;
-				return result;		
-			}else {
-				return null;
-			}
-		}
-
-	}
-}
\ No newline at end of file
diff --git a/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/IHighlighter.as b/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/IHighlighter.as
deleted file mode 100644
index 3b5a309..0000000
--- a/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/IHighlighter.as
+++ /dev/null
@@ -1,67 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  Licensed to the Apache Software Foundation (ASF) under one or more
-//  contributor license agreements.  See the NOTICE file distributed with
-//  this work for additional information regarding copyright ownership.
-//  The ASF licenses this file to You under the Apache License, Version 2.0
-//  (the "License"); you may not use this file except in compliance with
-//  the License.  You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-//  Unless required by applicable law or agreed to in writing, software
-//  distributed under the License is distributed on an "AS IS" BASIS,
-//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//  See the License for the specific language governing permissions and
-//  limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-
-package com.adobe.linguistics.spelling.ui
-{
-	import com.adobe.linguistics.utils.Token;
-	import __AS3__.vec.Vector;
-	import flash.geom.Point;
-	
-	/**
-	 * The <code>IHighlighter</code> Interface.
-	 * This interface defines default methods which will be used for highlighting text in UI components.
-	 *
-	 * @playerversion Flash 10
-	 * @langversion 3.0
-	 */
-	
-	public interface IHighlighter
-	{
-		/**
-		 * Draw squiggly lines below a given token.
-		 * @param token <code>Token</code> information of the word to be highlighted.		 
-		 * @playerversion Flash 10
-		 * @langversion 3.0
-		 */
-		function drawSquiggleAt(token:Token):void;
-		/**
-		 * Clear all squiggly lines in the UI.		
-		 * @playerversion Flash 10
-		 * @langversion 3.0
-		 */
-		function clearSquiggles():void;
-		/**
-		 * Set offset point information for scrollable controls. This is used by the highlighter to move 
-		 * the squiggly lines as the text scrolls inside the control.	
-		 * @param op offset information as a <code>Point</code> instance.		 
-		 * @playerversion Flash 10
-		 * @langversion 3.0
-		 */		
-		function set offsetPoint(op:Point):void;
-		/**
-		 * Get offset point information for scrollable controls. This is used by the highlighter to move 
-		 * the squiggly lines as the text scrolls inside the control.	
-		 * @param op offset information as a <code>Point</code> instance.		 
-		 * @playerversion Flash 10
-		 * @langversion 3.0
-		 */		
-		function get offsetPoint():Point;
-		
-	}
-}
\ No newline at end of file
diff --git a/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/IWordProcessor.as b/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/IWordProcessor.as
deleted file mode 100644
index 8196691..0000000
--- a/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/IWordProcessor.as
+++ /dev/null
@@ -1,30 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  Licensed to the Apache Software Foundation (ASF) under one or more
-//  contributor license agreements.  See the NOTICE file distributed with
-//  this work for additional information regarding copyright ownership.
-//  The ASF licenses this file to You under the Apache License, Version 2.0
-//  (the "License"); you may not use this file except in compliance with
-//  the License.  You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-//  Unless required by applicable law or agreed to in writing, software
-//  distributed under the License is distributed on an "AS IS" BASIS,
-//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//  See the License for the specific language governing permissions and
-//  limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-
-package com.adobe.linguistics.spelling.ui
-{
-	import com.adobe.linguistics.utils.ITokenizer;
-	import com.adobe.linguistics.utils.Token;
-	
-	public interface IWordProcessor
-	{
-		function getWordAtPoint(x:uint, y:uint, externalTokenizer:ITokenizer=null):Token;
-		function replaceText(token:Token, replacement:String):void;
-	}
-}
\ No newline at end of file
diff --git a/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/SparkHighlighter.as b/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/SparkHighlighter.as
deleted file mode 100644
index ffe9653..0000000
--- a/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/SparkHighlighter.as
+++ /dev/null
@@ -1,229 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  Licensed to the Apache Software Foundation (ASF) under one or more
-//  contributor license agreements.  See the NOTICE file distributed with
-//  this work for additional information regarding copyright ownership.
-//  The ASF licenses this file to You under the Apache License, Version 2.0
-//  (the "License"); you may not use this file except in compliance with
-//  the License.  You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-//  Unless required by applicable law or agreed to in writing, software
-//  distributed under the License is distributed on an "AS IS" BASIS,
-//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//  See the License for the specific language governing permissions and
-//  limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-
-package com.adobe.linguistics.spelling.ui
-{
-	import com.adobe.linguistics.utils.Token;
-	import com.adobe.linguistics.utils.TextTokenizer;
-	import flash.geom.Point;
-	
-	import flash.display.Shape;
-	import flash.geom.Rectangle;
-	import flash.text.engine.TextLine;
-	
-	import flashx.textLayout.compose.TextFlowLine;
-	import flashx.textLayout.edit.SelectionManager;
-	import flashx.textLayout.elements.TextFlow;
-	import flashx.textLayout.tlf_internal;
-	
-	import spark.components.RichEditableText;
-	import com.adobe.linguistics.spelling.ui.IHighlighter;
-
-	use namespace tlf_internal;	
-	
-	/**
-	 * <p>This class facilitates drawing of squiggly lines below words for RichEditableText class. RichEditableText is a low-level UIComponent for displaying, 
-	 * scrolling, selecting, and editing richly-formatted text. This class is used in the skins of the Spark versions of TextInput and TextArea. 
-	 * SparkHighlighter could therefore be used for drawing squiggly lines in these Spark components.</p>
-	 * 	
-	 * @playerversion Flash 10
-	 * @langversion 3.0
-	 */
-	public class SparkHighlighter implements IHighlighter
-	{
-		
-		private var mTextField:RichEditableText;
-		private var mHighlighter:Shape;
-		/*
-		* offset point:
-		*/
-		private var _offsetPoint:Point;
-
-		/**
-		 * The constructor for SparkHighlighter.
-		 * @param richEditableText <code>RichEditableText</code> in which to enable highlighting.		 
-		 * @playerversion Flash 10
-		 * @langversion 3.0
-		 */
-		public function SparkHighlighter( richEditableText:RichEditableText )
-		{
-			if (richEditableText == null ) throw new Error("illegal argument."); 
-			mTextField = richEditableText;
-			mHighlighter = null;
-			this._offsetPoint = new Point(0,0);
-		}
-
-		/**
-		 * Draw squiggly lines below a given token.
-		 * @param token <code>Token</code> information of the word to be highlighted.		 
-		 * @playerversion Flash 10
-		 * @langversion 3.0
-		 */
-		public function drawSquiggleAt(token:Token):void
-		{
-			squiggleWord(token);
-		}
-		
-		/**
-		 * Clear all squiggly lines in the component.		
-		 * @playerversion Flash 10
-		 * @langversion 3.0
-		 */
-		public function clearSquiggles():void
-		{
-			if (mHighlighter) {
-				mTextField.removeChild(mHighlighter);
-				mHighlighter=null;
-			}		
-		}
-		
-		/**
-		 * Set offset point information for scrollable controls. This is used by the highlighter to move 
-		 * the squiggly lines as the text scrolls inside the control.	
-		 * @param op offset information as a <code>Point</code> instance.		 
-		 * @playerversion Flash 10
-		 * @langversion 3.0
-		 */		
-		public function set offsetPoint(op:Point):void{
-			_offsetPoint = op;
-		}
-		
-		/**
-		 * Get offset point information for scrollable controls. This is used by the highlighter to move 
-		 * the squiggly lines as the text scrolls inside the control.	
-		 * @param op offset information as a <code>Point</code> instance.		 
-		 * @playerversion Flash 10
-		 * @langversion 3.0
-		 */		
-		public function get offsetPoint():Point{
-			return _offsetPoint;
-		}
-
-		
-
-		// TODO: refactor this code to share with halo components, and support words that cross lines
-		private function squiggleWord(token:Token):void {
-					
-			var ta:RichEditableText = mTextField;
-			if (!ta) return;		
-			
-			if (!mHighlighter) {
-				mHighlighter= new Shape();
-				mHighlighter.graphics.clear();
-				mTextField.addChild(mHighlighter);	
-			}
-				
-		        drawSquigglyLineForRange(token.first, token.last);
-			
-			// Just adjust the left padding, top padding is not an issue 
-			//var pleft:uint = mTextField.getStyle("paddingLeft");
-			//mHighlighter.x += pleft;		
-		}
-		
-		// Draw squiggly line
-		private function drawSquigglyLineForRange(start:Number, end:Number):void
-		{
-			// draw squiggly line
-			var tf:TextFlow = mTextField.textFlow;
-			var tflFirst:TextFlowLine = tf.flowComposer.findLineAtPosition(start);
-			var tflLast:TextFlowLine = tf.flowComposer.findLineAtPosition(end);
-			var tflIndexFirst:int = tf.flowComposer.findLineIndexAtPosition(start);
-			var tflIndexLast:int = tf.flowComposer.findLineIndexAtPosition(end);
-			
-			// Pointer
-			var tflIndex:int = tflIndexFirst;
-			var tfl:TextFlowLine = tflFirst;
-			
-			if (tflIndexFirst == tflIndexLast) {
-				// Draw one line
-				drawSquigglyLineAtIndex(tflIndexFirst, start - tflFirst.absoluteStart, end - tflFirst.absoluteStart);
-			} else {
-				// Multiple lines (very long word)
-				drawSquigglyLineAtIndex(tflIndexFirst, start - tflFirst.absoluteStart);
-				
-				tflIndex++;
-				while (tflIndex != tflIndexLast) {
-					drawSquigglyLineAtIndex(tflIndex);
-					tflIndex++;
-				}
-				
-				drawSquigglyLineAtIndex(tflIndexLast, 0, end - tflLast.absoluteStart);
-			}
-		}
-		
-		// Draw a squiggly line at specific line for specific index range
-		private function drawSquigglyLineAtIndex(lineIndex:Number, startIndex:Number=0, endIndex:Number=0x7FFFFFFF):void
-		{
-			var tf:TextFlow = mTextField.textFlow;
-			var tfl:TextFlowLine = tf.flowComposer.getLineAt(lineIndex);
-			var rectLine:Rectangle = tfl.getBounds();
-			if (endIndex == 0x7FFFFFFF) {
-				drawSquigglyLineAtPoint(rectLine.left, rectLine.bottom, rectLine.right - rectLine.left);
-			}
-			else {
-				// Force to have a valid TextLine
-				var tl:TextLine = tfl.getTextLine(true);
-				if(tl==null) return;
-				var atomStartIndex:int= tl.getAtomIndexAtCharIndex(startIndex+ tl.textBlockBeginIndex);//fix for diacritic characters bug#2854971(adding textBlockBeginIndex since getAtomIndexAtCharIndex is relative to beginning of block)
-				var atomEndIndex:int= tl.getAtomIndexAtCharIndex(endIndex+tl.textBlockBeginIndex);//fix for diacritic characters bug#2854971
-				// TODO: atom index and char index is not matching for some chars, use try/catch to avoid crash
-				try {
-					var rectFirst:Rectangle = tl.getAtomBounds(atomStartIndex);
-					var rectLast:Rectangle = tl.getAtomBounds(atomEndIndex);
-					drawSquigglyLineAtPoint(rectFirst.left + tfl.x, rectLine.bottom, rectLast.right - rectFirst.left);
-				} catch (err:Error)
-				{
-					trace(err);
-				}
-			}
-				
-		}
-		// Draw a squiggly from point x,y with given width, the line is drew in mHighlighter 
-		private function drawSquigglyLineAtPoint(x:Number, y:Number, width:Number):void
-		{
-			mHighlighter.graphics.lineStyle(1, 0xfa0707, .65);
-			mHighlighter.graphics.moveTo(x, y);
-			var upDirection:Boolean = false;
-			var offset:uint = 0;
-			var stepLength:uint = 2;
-			for ( var i:uint = 1; offset <= width; i++) {
-				offset = offset + stepLength;
-				if ( upDirection )
-					mHighlighter.graphics.lineTo(x+offset,y);
-				else
-					mHighlighter.graphics.lineTo(x+offset,y+stepLength);
-				upDirection = !upDirection;
-			}	
-		}
-		
-		private function getValidFirstWordIndex():int{
-			var index:int = SelectionManager.computeSelectionIndex(mTextField.textFlow, mTextField, mTextField, 0 + mTextField.horizontalScrollPosition, 0 + mTextField.verticalScrollPosition);
-			return index;
-
-			
-		}
-		
-		private function getValidLastWordIndex():int{
-			var index:int = SelectionManager.computeSelectionIndex(mTextField.textFlow, mTextField, mTextField, mTextField.width+mTextField.horizontalScrollPosition, mTextField.height+mTextField.verticalScrollPosition);
-			return index;
-
-		}
-
-	}
-}
diff --git a/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/SparkWordProcessor.as b/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/SparkWordProcessor.as
deleted file mode 100644
index 3ae7a88..0000000
--- a/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/SparkWordProcessor.as
+++ /dev/null
@@ -1,133 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  Licensed to the Apache Software Foundation (ASF) under one or more
-//  contributor license agreements.  See the NOTICE file distributed with
-//  this work for additional information regarding copyright ownership.
-//  The ASF licenses this file to You under the Apache License, Version 2.0
-//  (the "License"); you may not use this file except in compliance with
-//  the License.  You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-//  Unless required by applicable law or agreed to in writing, software
-//  distributed under the License is distributed on an "AS IS" BASIS,
-//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//  See the License for the specific language governing permissions and
-//  limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-
-package com.adobe.linguistics.spelling.ui
-{
-	import com.adobe.linguistics.utils.ITokenizer;
-	import com.adobe.linguistics.utils.TextTokenizer;
-	import com.adobe.linguistics.utils.Token;
-	
-	import flashx.textLayout.edit.SelectionManager;
-	import flashx.textLayout.tlf_internal;
-	
-	import spark.components.RichEditableText;
-	import com.adobe.linguistics.spelling.ui.IWordProcessor;
-	
-	use namespace tlf_internal;	
-	
-	public class SparkWordProcessor implements IWordProcessor
-	{
-		private var mTextField:RichEditableText;
-
-		public function SparkWordProcessor(textField:RichEditableText)
-		{
-			if (textField == null ) throw new Error("illegal argument."); 
-			mTextField = textField;
-		}
-				
-		
-		public function replaceText(token:Token, replacement:String):void {
-			var startIndex:int = token.first;
-			var endIndex:int = token.last;
-			
-			var ta:RichEditableText = mTextField;
-			var end:int = getValidLastWordIndex();
-			
-			if ( replacement == null ) return;
-			
-			if (mTextField.text.length<endIndex || startIndex<0) {
-				return;
-			}
-			
-			var _misspellStart:int = startIndex;
-			var _misspellEnd:int = endIndex;
-			
-			// Workaround for Spark: changes in inactive components will trigger strange behavior			
-			//var selectedElementRange:ElementRange = ElementRange.createElementRange(ta.textFlow, _misspellStart, _misspellEnd);
-			//var selectedCharacterFormat:ITextLayoutFormat = ta.textFlow.interactionManager.activePosition == ta.textFlow.interactionManager.anchorPosition ? ta.textFlow.interactionManager.getCommonCharacterFormat() : selectedElementRange.characterFormat;
-			//var selectedParagraphFormat:ITextLayoutFormat = selectedElementRange.paragraphFormat;
-			//var selectedContainerFormat:ITextLayoutFormat = selectedElementRange.containerFormat;
-			
-			
-			
-			//var selectedCharacterFormat:ITextLayoutFormat = ta.textFlow.interactionManager.getCommonCharacterFormat();
-			//var selectedContainerFormat:ITextLayoutFormat = ta.textFlow.interactionManager.getCommonContainerFormat();
-			//var selectedParagraphFormat:ITextLayoutFormat = ta.textFlow.interactionManager.getCommonParagraphFormat();
-			
-			/*var tem:EditManager = new EditManager();
-			ta.textFlow.interactionManager = tem;	*/
-			
-			
-			ta.setFocus();
-			//ta.text = ta.text.substr(0, _misspellStart) + replacement + ta.text.substr(_misspellEnd);
-			
-			//tem.applyFormat(selectedCharacterFormat,selectedParagraphFormat,selectedContainerFormat);
-			//ta.textFlow.flowComposer.updateAllControllers();
-			
-			ta.textFlow;
-			//ta.selectRange(_misspellStart + replacement.length, _misspellStart + replacement.length);
-			ta.selectRange(_misspellStart+1, _misspellEnd);
-			ta.insertText(replacement);
-			ta.selectRange(_misspellStart, _misspellStart+1);
-			ta.insertText("");
-			
-			//ta.textFlow.interactionManager.applyFormat(selectedCharacterFormat,null,null);
-			
-			// Workaround for unexpected jump
-			ta.scrollToRange(end, end);
-		}
-		
-		public function getWordAtPoint(x:uint, y:uint, externalTokenizer:ITokenizer=null):Token
-		{
-			// TODO: use a better alternative than _misspellStart, end
-			var ta:RichEditableText = mTextField;	
-			var index:int = SelectionManager.computeSelectionIndex(ta.textFlow, ta, ta, x, y);
-
-			if (index >= ta.text.length) return null;
-
-			var tmpToken:Token = new Token(index,index);
-			var tokenizer:ITokenizer;
-			if ( externalTokenizer == null ) {
-				tokenizer = new TextTokenizer(mTextField.text);	
-			}else {
-				tokenizer = externalTokenizer;
-			}
-			
-			var result:Token = new Token(0,0);
-			var preToken:Token = tokenizer.getPreviousToken(tmpToken);
-			var nextToken:Token = tokenizer.getNextToken(tmpToken);
-			if ( preToken.last == nextToken.first ) {
-				result.first = preToken.first;
-				result.last = nextToken.last;
-				return result;		
-			}else {
-				return null;
-			}
-				
-		}
-
-		// TODO: workaround for unexpected jump when word replaced, to be refactored for code sharing
-		private function getValidLastWordIndex():int{
-			var index:int = SelectionManager.computeSelectionIndex(mTextField.textFlow, mTextField, mTextField, mTextField.width+mTextField.horizontalScrollPosition, mTextField.height+mTextField.verticalScrollPosition);
-			return index;
-		}
-
-
-	}
-}
\ No newline at end of file
diff --git a/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/SpellingHighlighter.as b/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/SpellingHighlighter.as
deleted file mode 100644
index 27cd2fb..0000000
--- a/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/SpellingHighlighter.as
+++ /dev/null
@@ -1,196 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  Licensed to the Apache Software Foundation (ASF) under one or more
-//  contributor license agreements.  See the NOTICE file distributed with
-//  this work for additional information regarding copyright ownership.
-//  The ASF licenses this file to You under the Apache License, Version 2.0
-//  (the "License"); you may not use this file except in compliance with
-//  the License.  You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-//  Unless required by applicable law or agreed to in writing, software
-//  distributed under the License is distributed on an "AS IS" BASIS,
-//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//  See the License for the specific language governing permissions and
-//  limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-
-package com.adobe.linguistics.spelling.ui
-{
-	import flash.display.Shape;
-	import flash.geom.Point;
-	import flash.geom.Rectangle;
-	import flash.text.TextLineMetrics;
-	
-	import mx.core.IUITextField;
-	import mx.flash.UIMovieClip;
-
-
-	public class SpellingHighlighter extends UIMovieClip
-	{
-		/*
-		* offset point:
-		*/
-		private var _offsetPoint:Point;
-		
-		/*
-		* Target TextField.
-		*/
-		private var _textField:IUITextField;
-		private static var InvalidIndexValue:int = -2;
-		public function SpellingHighlighter(textField:IUITextField) {
-			super();
-			this._textField = textField;
-			this._offsetPoint = new Point(0,0);
-		}
-		
-		public function drawSquigglyLine(firstCharIndex:int, lastCharIndex:int ):void {
-			var validFirstCharIndex:int = getValidFirstCharIndex(firstCharIndex);
-			var validLastCharIndex:int = getValidLastCharIndex(lastCharIndex);
-			if ( validFirstCharIndex == InvalidIndexValue || validLastCharIndex == InvalidIndexValue ){
-				return;
-			}
-			/* draw squiggly line here. */
-			if ( validFirstCharIndex <= validLastCharIndex ) {
-				var firstLine:int = _textField.getLineIndexOfChar(validFirstCharIndex);
-				var lastLine:int = _textField.getLineIndexOfChar(validLastCharIndex);
-				//only one line case.
-				if(lastLine==firstLine)
-				{
-					drawSingleSquigglyLine(validFirstCharIndex, validLastCharIndex);
-					return;
-				}
-				//more than one line.
-				//first line
-				drawSingleSquigglyLine(validFirstCharIndex, _textField.getLineOffset(firstLine)+_textField.getLineLength(firstLine)-1);
-				//middle....
-				for(var i:int=firstLine+1;i<lastLine;i++)
-				{
-					drawSingleSquigglyLine(_textField.getLineOffset(i), _textField.getLineOffset(i)+_textField.getLineLength(i)-1);
-				}
-				//last lines.
-				drawSingleSquigglyLine(_textField.getLineOffset(lastLine), validLastCharIndex);
-			}
-		}
-		
-		public function drawSingleSquigglyLine(firstCharIndex:int, lastCharIndex:int ):void {
-			var firstLine:int = _textField.getLineIndexOfChar(firstCharIndex);
-			var lastLine:int = _textField.getLineIndexOfChar(lastCharIndex);
-			if ( firstLine != lastLine ) {
-				return;
-			}else {
-				var rect1:Rectangle = _textField.getCharBoundaries(firstCharIndex);
-				var rect2:Rectangle = _textField.getCharBoundaries(lastCharIndex);
-				var line:int;
-				while(rect1==null){ 
-					line=_textField.getLineIndexOfChar(firstCharIndex);
-					if( (firstCharIndex+1)>(_textField.getLineOffset(line)+_textField.getLineLength(line)-1)||(firstCharIndex+1)>lastCharIndex) return;// go till the last character
-					firstCharIndex++;
-					rect1= _textField.getCharBoundaries(firstCharIndex);										
-				}
-				
-				while(rect2==null){//this case appears for diacritic characters made using Decomposed chars
-					line=_textField.getLineIndexOfChar(lastCharIndex);
-					if( lastCharIndex-1 < (_textField.getLineOffset(line))||firstCharIndex>(lastCharIndex-1) ) return; //go till the first character
-					lastCharIndex--;// check for the previos character
-					rect2= _textField.getCharBoundaries(lastCharIndex);										
-				}
-				
-				
-				var x:Number = rect1.x+_offsetPoint.x - _textField.scrollH;
-				var y:Number = rect1.y + rect1.height + 2;
-				var width:Number = rect2.x+rect2.width-rect1.x;
-				
-				// Avoid drawing outside the textField
-				if (x<0) 
-				{
-					if (x+width > 0) {
-						width += x;
-						x = 0;
-					} 
-					else
-						return;
-				}
-				if (x+width > _textField.width) 
-				{
-					if (x < _textField.width) {
-						width = textField.width - x;
-					} 	
-					else
-						return;
-				}
-				
-				// The rectangle that bound the string you want
-				// actual work here.
-				var myShape:Shape = new Shape();
-				myShape.graphics.clear();
-				//myShape.graphics.beginFill(0x0099CC, .35); 
-				myShape.graphics.lineStyle(1, 0xfa0707, .65);
-				//myShape.graphics.moveTo(0,0);
-				myShape.graphics.moveTo(x, y);
-				var upDirection:Boolean = false;
-				var offset:uint = 0;
-				var stepLength:uint = 2;
-				for ( var i:uint = 1; offset <= width; i++) {
-					offset = offset + stepLength;
-					if ( upDirection )
-						myShape.graphics.lineTo(x+offset,y);
-					else
-						myShape.graphics.lineTo(x+offset,y+stepLength);
-					upDirection = !upDirection;
-				}
-				//myShape.graphics.endFill();
-				this.addChild(myShape);	
-			}
-		}
-		
-		private function getValidFirstCharIndex(firstCharIndex:int):int{
-			if(firstCharIndex<0 || firstCharIndex>_textField.text.length-1) 
-			{
-				return InvalidIndexValue;
-			}
-			var firstLine:Number = _textField.getLineIndexOfChar(firstCharIndex);
-			
-			if(firstLine<_textField.scrollV-1)
-			{
-				firstLine = _textField.scrollV-1;
-				return _textField.getLineOffset(firstLine);
-			}
-			return firstCharIndex;
-		}
-		
-		private function getValidLastCharIndex(lastCharIndex:int):int{
-			if(lastCharIndex<0 || lastCharIndex>_textField.text.length-1) 
-			{
-				return InvalidIndexValue;
-			}
-			var lastLine:Number = _textField.getLineIndexOfChar(lastCharIndex);
-			if(lastLine>_textField.bottomScrollV-1)
-			{
-				lastLine = _textField.bottomScrollV-1;
-				return _textField.getLineOffset(lastLine)+_textField.getLineLength(lastLine)-1;
-			}
-			return lastCharIndex;
-		}
-					
-		public function set textField(tf:IUITextField):void{
-			_textField = tf;
-		}
-		
-		public function get textField():IUITextField{
-			return _textField;
-		}
-		
-		public function set offsetPoint(op:Point):void{
-			_offsetPoint = op;
-		}
-		
-		public function get offsetPoint():Point{
-			return _offsetPoint;
-		}
-
-
-	}
-}
\ No newline at end of file
diff --git a/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/TLFHighlighter.as b/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/TLFHighlighter.as
deleted file mode 100644
index 92b7c71..0000000
--- a/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/TLFHighlighter.as
+++ /dev/null
@@ -1,252 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  Licensed to the Apache Software Foundation (ASF) under one or more
-//  contributor license agreements.  See the NOTICE file distributed with
-//  this work for additional information regarding copyright ownership.
-//  The ASF licenses this file to You under the Apache License, Version 2.0
-//  (the "License"); you may not use this file except in compliance with
-//  the License.  You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-//  Unless required by applicable law or agreed to in writing, software
-//  distributed under the License is distributed on an "AS IS" BASIS,
-//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//  See the License for the specific language governing permissions and
-//  limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-
-package com.adobe.linguistics.spelling.ui
-{
-	import com.adobe.linguistics.utils.TextTokenizer;
-	import com.adobe.linguistics.utils.Token;
-	
-	import flash.display.Graphics;
-	import flash.display.Shape;
-	import flash.display.Sprite;
-	import flash.geom.Point;
-	import flash.geom.Rectangle;
-	import flash.text.engine.TextLine;
-	import flash.utils.Dictionary;
-	
-	import flashx.textLayout.compose.TextFlowLine;
-	import flashx.textLayout.container.ContainerController;
-	import flashx.textLayout.edit.SelectionManager;
-	import flashx.textLayout.elements.TextFlow;
-	import flashx.textLayout.tlf_internal;
-	import com.adobe.linguistics.spelling.ui.IHighlighter;
-
-
-	use namespace tlf_internal;	
-
-	/**
-	 * <p>This class facilitates drawing of squiggly lines below words for TLF TextFlow class.</p>
-	 * <p>The TextFlow class is responsible for managing all 
-	 * the text content of a story. In TextLayout, text is stored in a hierarchical tree of elements. TextFlow is the root object of the element tree. 
-	 * All elements on the tree derive from the base class, FlowElement. </p> 
-	 * TLFHighlighter could be used for drawing squiggly lines in any of the custom visual components(probably based on <code>Sprite</code>) which make use 
-	 * of TextFlow to display text.
-	 * 	
-	 * @playerversion Flash 10
-	 * @langversion 3.0
-	 */
-	public class TLFHighlighter implements IHighlighter
-	{
-		
-		private var mTextFlow:TextFlow;
-		private var mHighlighter:Dictionary;
-	
-		//private var mHighlighter:Shape;
-		private var ccindex:int;
-		private var cc:ContainerController;
-		/*
-		* offset point:
-		*/
-		private var _offsetPoint:Point;
-
-		/**
-		 * The constructor for TLFHighlighter.
-		 * @param textFlow <code>TextFlow</code> in which to enable highlighting.		 
-		 * @playerversion Flash 10
-		 * @langversion 3.0
-		 */
-		public function TLFHighlighter( textFlow:TextFlow )
-		{
-			if (textFlow == null ) throw new Error("illegal argument."); 
-			mTextFlow = textFlow;
-			//mHighlighter = null;
-			mHighlighter = new Dictionary(true);
-			this._offsetPoint = new Point(0,0);
-		}
-		/**
-		 * Draw squiggly lines below a given token.
-		 * @param token <code>Token</code> information of the word to be highlighted.		 
-		 * @playerversion Flash 10
-		 * @langversion 3.0
-		 */
-		public function drawSquiggleAt(token:Token):void
-		{
-			squiggleWord(token);
-		}
-		/**
-		 * Clear all squiggly lines in the component.		
-		 * @playerversion Flash 10
-		 * @langversion 3.0
-		 */
-		public function clearSquiggles():void
-		{
-			
-			for (var idx:int = 0; idx < mTextFlow.flowComposer.numControllers; idx++)
-			{	
-				var cctmp:ContainerController = mTextFlow.flowComposer.getControllerAt(idx);
-				if (!cctmp) return;	
-				if (mHighlighter[cctmp.container] != null) {
-					
-					//ToDO: This assumes single container for whole of mTextFlow. Need to implement for multiple container case.
-					cctmp.container.removeChild((mHighlighter[cctmp.container] as Shape));
-					
-					mHighlighter[cctmp.container] = null;
-				}	
-			}
-		}
-	
-		/**
-		 * Set offset point information for scrollable controls. This is used by the highlighter to move 
-		 * the squiggly lines as the text scrolls inside the control.	
-		 * @param op offset information as a <code>Point</code> instance.		 
-		 * @playerversion Flash 10
-		 * @langversion 3.0
-		 */		
-		public function set offsetPoint(op:Point):void{
-			_offsetPoint = op;
-		}
-		/**
-		 * Get offset point information for scrollable controls. This is used by the highlighter to move 
-		 * the squiggly lines as the text scrolls inside the control.	
-		 * @param op offset information as a <code>Point</code> instance.		 
-		 * @playerversion Flash 10
-		 * @langversion 3.0
-		 */	
-		public function get offsetPoint():Point{
-			return _offsetPoint;
-		}
-
-		
-
-		// TODO: refactor this code to share with halo components, and support words that cross lines
-		private function squiggleWord(token:Token):void {					
-			var ta:TextFlow = mTextFlow;
-			
-			if (!ta) return;		
-			ccindex = ta.flowComposer.findControllerIndexAtPosition(token.first);
-			
-			cc = ta.flowComposer.getControllerAt(ccindex);
-			if (!cc) return;	
-			if (mHighlighter[cc.container] == null ) {
-				mHighlighter[cc.container]= new Shape();
-				(mHighlighter[cc.container] as Shape).graphics.clear();
-				//ccindex = ta.flowComposer.findControllerIndexAtPosition(token.first);
-				
-				//var cc:ContainerController = ta.flowComposer.getControllerAt(ccindex);
-				//ToDO: This assumes single container for whole of mTextFlow. Need to implement for multiple container case.
-				cc.container.addChild((mHighlighter[cc.container] as Shape));				
-			}
-					
-		    drawSquigglyLineForRange(token.first, token.last);
-			
-			// Just adjust the left padding, top padding is not an issue 
-			//var pleft:uint = mTextFlow.getStyle("paddingLeft");
-			//mHighlighter.x += pleft;		
-		}
-		
-		// Draw squiggly line
-		private function drawSquigglyLineForRange(start:Number, end:Number):void
-		{
-			// draw squiggly line
-			var tf:TextFlow = mTextFlow;
-			var tflFirst:TextFlowLine = tf.flowComposer.findLineAtPosition(start);
-			var tflLast:TextFlowLine = tf.flowComposer.findLineAtPosition(end);
-			var tflIndexFirst:int = tf.flowComposer.findLineIndexAtPosition(start);
-			var tflIndexLast:int = tf.flowComposer.findLineIndexAtPosition(end);
-			
-			// Pointer
-			var tflIndex:int = tflIndexFirst;
-			var tfl:TextFlowLine = tflFirst;
-			
-			if (tflIndexFirst == tflIndexLast) {
-				// Draw one line
-				drawSquigglyLineAtIndex(tflIndexFirst, start - tflFirst.absoluteStart, end - tflFirst.absoluteStart);
-			} else {
-				// Multiple lines (very long word)
-				drawSquigglyLineAtIndex(tflIndexFirst, start - tflFirst.absoluteStart);
-				
-				tflIndex++;
-				while (tflIndex != tflIndexLast) {
-					drawSquigglyLineAtIndex(tflIndex);
-					tflIndex++;
-				}
-				
-				drawSquigglyLineAtIndex(tflIndexLast, 0, end - tflLast.absoluteStart);
-			}
-		}
-		
-		// Draw a squiggly line at specific line for specific index range
-		private function drawSquigglyLineAtIndex(lineIndex:Number, startIndex:Number=0, endIndex:Number=0x7FFFFFFF):void
-		{
-			var tf:TextFlow = mTextFlow;
-			var tfl:TextFlowLine = tf.flowComposer.getLineAt(lineIndex);
-			var rectLine:Rectangle = tfl.getBounds(); 
-			if (endIndex == 0x7FFFFFFF) {
-				drawSquigglyLineAtPoint(rectLine.left, rectLine.bottom, rectLine.right - rectLine.left, lineIndex);
-			}
-			else {
-				// Force to have a valid TextLine
-				var tl:TextLine = tfl.getTextLine(true);
-				if(tl==null)return;
-				var atomStartIndex:int= tl.getAtomIndexAtCharIndex(startIndex+ tl.textBlockBeginIndex);//fix for diacritic characters bug#2854971
-				var atomEndIndex:int= tl.getAtomIndexAtCharIndex(endIndex+ tl.textBlockBeginIndex);//fix for diacritic characters bug#2854971
-				// TODO: atom index and char index is not matching for some chars, use try/catch to avoid crash
-				try {
-					var rectFirst:Rectangle = tl.getAtomBounds(atomStartIndex);
-					var rectLast:Rectangle = tl.getAtomBounds(atomEndIndex);
-					drawSquigglyLineAtPoint(rectFirst.left + tfl.x, rectLine.bottom, rectLast.right - rectFirst.left, lineIndex);
-				} catch (err:Error)
-				{
-					trace(err);
-				}
-			}
-				
-		}
-		// Draw a squiggly from point x,y with given width, the line is drawn in mHighlighter 
-		private function drawSquigglyLineAtPoint(x:Number, y:Number, width:Number, lineIndex:Number):void
-		{
-			var tf:TextFlow = mTextFlow;
-			var tfl:TextFlowLine = tf.flowComposer.getLineAt(lineIndex);
-			var tl:TextLine = tfl.getTextLine(true);
-						
-			(mHighlighter[cc.container] as Shape).graphics.lineStyle(1, 0xfa0707, .65);
-			(mHighlighter[cc.container] as Shape).graphics.moveTo(x, y);
-			var upDirection:Boolean = false;
-			var offset:uint = 0;
-			var stepLength:uint = 2;
-			for ( var i:uint = 1; offset <= width; i++) {
-				offset = offset + stepLength;
-				if ( upDirection )
-					(mHighlighter[cc.container] as Shape).graphics.lineTo(x+offset,y);
-				else
-					(mHighlighter[cc.container] as Shape).graphics.lineTo(x+offset,y+stepLength);
-				upDirection = !upDirection;
-			}
-			
-			//tl.addChild(mHighlighter);
-						
-			//tf.flowComposer.updateToController(ccindex);
-
-		}
-		
-
-	}
-	
-}
-
diff --git a/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/TLFWordProcessor.as b/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/TLFWordProcessor.as
deleted file mode 100644
index 749e218..0000000
--- a/Squiggly/main/SpellingUI/src/com/adobe/linguistics/spelling/ui/TLFWordProcessor.as
+++ /dev/null
@@ -1,159 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  Licensed to the Apache Software Foundation (ASF) under one or more
-//  contributor license agreements.  See the NOTICE file distributed with
-//  this work for additional information regarding copyright ownership.
-//  The ASF licenses this file to You under the Apache License, Version 2.0
-//  (the "License"); you may not use this file except in compliance with
-//  the License.  You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-//  Unless required by applicable law or agreed to in writing, software
-//  distributed under the License is distributed on an "AS IS" BASIS,
-//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//  See the License for the specific language governing permissions and
-//  limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-
-package com.adobe.linguistics.spelling.ui
-{
-	import com.adobe.linguistics.utils.ITokenizer;
-	import com.adobe.linguistics.utils.TextTokenizer;
-	import com.adobe.linguistics.utils.Token;
-	
-	import flashx.textLayout.edit.SelectionManager;
-	import flashx.textLayout.edit.EditManager;
-	import flashx.textLayout.tlf_internal;
-	import flashx.textLayout.elements.TextFlow;
-	
-	import flashx.textLayout.container.ContainerController;
-	import flashx.textLayout.elements.FlowLeafElement;
-	import flashx.textLayout.elements.ParagraphElement;
-	import com.adobe.linguistics.spelling.ui.IWordProcessor;
-	
-	use namespace tlf_internal;	
-	
-	public class TLFWordProcessor implements IWordProcessor
-	{
-		private var mTextFlow:TextFlow;
-		private var _containerController:ContainerController;
-
-		public function TLFWordProcessor(textFlow:TextFlow)
-		{
-			if (textFlow == null ) throw new Error("illegal argument."); 
-			mTextFlow = textFlow;
-		}
-				
-		
-		public function replaceText(token:Token, replacement:String):void {
-			var startIndex:int = token.first;
-			var endIndex:int = token.last;
-			
-			var ta:TextFlow = mTextFlow;
-			//var end:int = getValidLastWordIndex();
-			
-			if ( replacement == null ) return;
-			
-			/*if (mTextFlow.text.length<endIndex || startIndex<0) {
-				return;
-			}*/
-			
-			var _misspellStart:int = startIndex;
-			var _misspellEnd:int = endIndex;
-			
-			// Workaround for Spark: changes in inactive components will trigger strange behavior			
-			//var selectedElementRange:ElementRange = ElementRange.createElementRange(ta.textFlow, _misspellStart, _misspellEnd);
-			//var selectedCharacterFormat:ITextLayoutFormat = ta.textFlow.interactionManager.activePosition == ta.textFlow.interactionManager.anchorPosition ? ta.textFlow.interactionManager.getCommonCharacterFormat() : selectedElementRange.characterFormat;
-			//var selectedParagraphFormat:ITextLayoutFormat = selectedElementRange.paragraphFormat;
-			//var selectedContainerFormat:ITextLayoutFormat = selectedElementRange.containerFormat;
-			
-			
-			
-			//var selectedCharacterFormat:ITextLayoutFormat = ta.textFlow.interactionManager.getCommonCharacterFormat();
-			//var selectedContainerFormat:ITextLayoutFormat = ta.textFlow.interactionManager.getCommonContainerFormat();
-			//var selectedParagraphFormat:ITextLayoutFormat = ta.textFlow.interactionManager.getCommonParagraphFormat();
-			
-			var tem:EditManager = ta.interactionManager as EditManager;
-			
-			
-			
-			//ta.setFocus();
-			//ta.text = ta.text.substr(0, _misspellStart) + replacement + ta.text.substr(_misspellEnd);
-			
-			//tem.applyFormat(selectedCharacterFormat,selectedParagraphFormat,selectedContainerFormat);
-			//ta.textFlow.flowComposer.updateAllControllers();
-			
-			//ta.textFlow;
-			//ta.selectRange(_misspellStart + replacement.length, _misspellStart + replacement.length);
-			
-			
-			tem.selectRange(_misspellStart, _misspellEnd-1);
-			//tem.insertText(replacement);
-			//tem.selectRange(_misspellStart, _misspellStart+1);
-			//tem.insertText("");
-			tem.overwriteText(replacement);
-			
-			//ta.textFlow.interactionManager.applyFormat(selectedCharacterFormat,null,null);
-			
-			// Workaround for unexpected jump
-			//ta.scrollToRange(end, end);
-		}
-		
-		/**
-		 @private
-		 (This property is for Squiggly Developer use only.)
-		 */
-		public function set textFlowContainerController(value:ContainerController):void {
-			_containerController = value;
-		}
-		
-		public function getWordAtPoint(x:uint, y:uint, externalTokenizer:ITokenizer=null):Token
-		{
-			// TODO: use a better alternative than _misspellStart, end
-			var ta:TextFlow = mTextFlow;	
-									
-			var index:int = SelectionManager.computeSelectionIndex(ta, _containerController.container, _containerController.container, x, y);
-
-			if (index >= ta.textLength) return null;
-
-			var currentLeaf:FlowLeafElement = ta.findLeaf(index);
-			var currentParagraph:ParagraphElement = currentLeaf ? currentLeaf.getParagraph() : null;
-			
-			if (currentParagraph == null) return null;
-			var paraStart:uint = currentParagraph.getAbsoluteStart();
-				
-			//tokenizer = new TextTokenizer(currentParagraph.getText().substring());
-			
-			var tmpToken:Token = new Token(index - paraStart,index - paraStart);
-			var tokenizer:ITokenizer;
-			if ( externalTokenizer == null ) {
-				tokenizer = new TextTokenizer(currentParagraph.getText().substring());	
-			}else {
-				tokenizer = externalTokenizer;
-			}
-			
-			var result:Token = new Token(0,0);
-			var preToken:Token = tokenizer.getPreviousToken(tmpToken);
-			var nextToken:Token = tokenizer.getNextToken(tmpToken);
-			if ( preToken.last == nextToken.first ) {
-				result.first = preToken.first + paraStart;
-				result.last = nextToken.last + paraStart;
-				return result;		
-			}else {
-				return null;
-			}
-							
-		}
-
-		// TODO: workaround for unexpected jump when word replaced, to be refactored for code sharing
-		private function getValidLastWordIndex():int{
-			var index:int = 0;
-			//var index:int = SelectionManager.computeSelectionIndex(mTextFlow.textFlow, mTextFlow, mTextFlow, mTextFlow.width+mTextFlow.horizontalScrollPosition, mTextFlow.height+mTextFlow.verticalScrollPosition);
-			return index;
-		}
-
-
-	}
-}
\ No newline at end of file
diff --git a/Squiggly/main/SpellingUIEx/src/com/adobe/linguistics/spelling/SpellUI.as b/Squiggly/main/SpellingUIEx/src/com/adobe/linguistics/spelling/SpellUI.as
index 317e05b..945c4a1 100644
--- a/Squiggly/main/SpellingUIEx/src/com/adobe/linguistics/spelling/SpellUI.as
+++ b/Squiggly/main/SpellingUIEx/src/com/adobe/linguistics/spelling/SpellUI.as
@@ -23,12 +23,12 @@
 	import com.adobe.linguistics.spelling.framework.ResourceTable;
 	import com.adobe.linguistics.spelling.framework.SpellingConfiguration;
 	import com.adobe.linguistics.spelling.framework.SpellingService;
-    import com.adobe.linguistics.spelling.ui.HaloHighlighter;
-    import com.adobe.linguistics.spelling.ui.IHighlighter;
-    import com.adobe.linguistics.spelling.ui.SparkHighlighter;
-    import com.adobe.linguistics.spelling.ui.HaloWordProcessor;
-    import com.adobe.linguistics.spelling.ui.IWordProcessor;
-    import com.adobe.linguistics.spelling.ui.SparkWordProcessor;
+    import com.adobe.linguistics.spelling.framework.ui.HaloHighlighter;
+    import com.adobe.linguistics.spelling.framework.ui.IHighlighter;
+    import com.adobe.linguistics.spelling.framework.ui.SparkHighlighter;
+    import com.adobe.linguistics.spelling.framework.ui.HaloWordProcessor;
+    import com.adobe.linguistics.spelling.framework.ui.IWordProcessor;
+    import com.adobe.linguistics.spelling.framework.ui.SparkWordProcessor;
 	import com.adobe.linguistics.utils.TextTokenizer;
 	import com.adobe.linguistics.utils.Token;
 	
diff --git a/Squiggly/main/SpellingUIEx/src/com/adobe/linguistics/spelling/SpellingContextMenu.as b/Squiggly/main/SpellingUIEx/src/com/adobe/linguistics/spelling/SpellingContextMenu.as
index fc71ce3..6c5739b 100644
--- a/Squiggly/main/SpellingUIEx/src/com/adobe/linguistics/spelling/SpellingContextMenu.as
+++ b/Squiggly/main/SpellingUIEx/src/com/adobe/linguistics/spelling/SpellingContextMenu.as
@@ -21,7 +21,7 @@
 {
 	import com.adobe.linguistics.spelling.SpellUI;
 	import com.adobe.linguistics.spelling.framework.SpellingService;
-	import com.adobe.linguistics.spelling.ui.*;
+	import com.adobe.linguistics.spelling.framework.ui.*;
 	import com.adobe.linguistics.utils.Token;
 	import com.adobe.linguistics.utils.TextTokenizer;
 	
diff --git a/Squiggly/main/SpellingUITLF/src/com/adobe/linguistics/spelling/SpellUIForTLF.as b/Squiggly/main/SpellingUITLF/src/com/adobe/linguistics/spelling/SpellUIForTLF.as
index e2bbb60..7daa76d 100644
--- a/Squiggly/main/SpellingUITLF/src/com/adobe/linguistics/spelling/SpellUIForTLF.as
+++ b/Squiggly/main/SpellingUITLF/src/com/adobe/linguistics/spelling/SpellUIForTLF.as
@@ -23,10 +23,10 @@
 	import com.adobe.linguistics.spelling.framework.ResourceTable;
 	import com.adobe.linguistics.spelling.framework.SpellingConfiguration;
 	import com.adobe.linguistics.spelling.framework.SpellingService;
-	import com.adobe.linguistics.spelling.ui.IHighlighter;
-	import com.adobe.linguistics.spelling.ui.IWordProcessor;
-	import com.adobe.linguistics.spelling.ui.TLFHighlighter;
-	import com.adobe.linguistics.spelling.ui.TLFWordProcessor;
+	import com.adobe.linguistics.spelling.framework.ui.IHighlighter;
+	import com.adobe.linguistics.spelling.framework.ui.IWordProcessor;
+	import com.adobe.linguistics.spelling.framework.ui.TLFHighlighter;
+	import com.adobe.linguistics.spelling.framework.ui.TLFWordProcessor;
 	import com.adobe.linguistics.utils.TextTokenizer;
 	import com.adobe.linguistics.utils.Token;
 	
diff --git a/Squiggly/main/SpellingUITLF/src/com/adobe/linguistics/spelling/SpellingContextMenuForTLF.as b/Squiggly/main/SpellingUITLF/src/com/adobe/linguistics/spelling/SpellingContextMenuForTLF.as
index ccc3c78..8d6d124 100644
--- a/Squiggly/main/SpellingUITLF/src/com/adobe/linguistics/spelling/SpellingContextMenuForTLF.as
+++ b/Squiggly/main/SpellingUITLF/src/com/adobe/linguistics/spelling/SpellingContextMenuForTLF.as
@@ -22,10 +22,10 @@
 	import com.adobe.linguistics.spelling.SpellUIForTLF;
 	import com.adobe.linguistics.spelling.SquigglyCustomContainerController;
 	import com.adobe.linguistics.spelling.framework.SpellingService;
-	import com.adobe.linguistics.spelling.ui.IHighlighter;
-	import com.adobe.linguistics.spelling.ui.IWordProcessor;
-	import com.adobe.linguistics.spelling.ui.TLFHighlighter;
-	import com.adobe.linguistics.spelling.ui.TLFWordProcessor;
+	import com.adobe.linguistics.spelling.framework.ui.IHighlighter;
+	import com.adobe.linguistics.spelling.framework.ui.IWordProcessor;
+	import com.adobe.linguistics.spelling.framework.ui.TLFHighlighter;
+	import com.adobe.linguistics.spelling.framework.ui.TLFWordProcessor;
 	import com.adobe.linguistics.utils.TextTokenizer;
 	import com.adobe.linguistics.utils.Token;
 	
diff --git a/Squiggly/main/SpellingUITLF/src/com/adobe/linguistics/spelling/SquigglyCustomContainerController.as b/Squiggly/main/SpellingUITLF/src/com/adobe/linguistics/spelling/SquigglyCustomContainerController.as
index 9ea0f9a..8adc994 100644
--- a/Squiggly/main/SpellingUITLF/src/com/adobe/linguistics/spelling/SquigglyCustomContainerController.as
+++ b/Squiggly/main/SpellingUITLF/src/com/adobe/linguistics/spelling/SquigglyCustomContainerController.as
@@ -20,10 +20,10 @@
 {
 	import com.adobe.linguistics.spelling.SpellUIForTLF;
 	import com.adobe.linguistics.spelling.framework.SpellingService;
-	import com.adobe.linguistics.spelling.ui.IHighlighter;
-	import com.adobe.linguistics.spelling.ui.IWordProcessor;
-	import com.adobe.linguistics.spelling.ui.TLFHighlighter;
-	import com.adobe.linguistics.spelling.ui.TLFWordProcessor;
+	import com.adobe.linguistics.spelling.framework.ui.IHighlighter;
+	import com.adobe.linguistics.spelling.framework.ui.IWordProcessor;
+	import com.adobe.linguistics.spelling.framework.ui.TLFHighlighter;
+	import com.adobe.linguistics.spelling.framework.ui.TLFWordProcessor;
 	import com.adobe.linguistics.utils.TextTokenizer;
 	import com.adobe.linguistics.utils.Token;
 	
diff --git a/Squiggly/main/build.xml b/Squiggly/main/build.xml
index c19d925..ae93580 100644
--- a/Squiggly/main/build.xml
+++ b/Squiggly/main/build.xml
@@ -72,7 +72,7 @@
 			<arg value="-include-sources"/>
 			<arg value="SpellingEngine/src"/>
 			<arg value="-output"/>
-			<arg value="${OUTPUT_DIR}/ApacheflexSpellingEngine.swc"/>
+			<arg value="${OUTPUT_DIR}/ApacheFlexSpellingEngine.swc"/>
 		</java>
 	</target>
 
@@ -98,7 +98,7 @@
 			<arg value="-external-library-path"/>
 			<arg value="${OUTPUT_DIR}/ApacheFlexLinguisticUtils.swc"/>
 			<arg value="-external-library-path"/>
-			<arg value="${OUTPUT_DIR}/ApacheflexSpellingEngine.swc"/>
+			<arg value="${OUTPUT_DIR}/ApacheFlexSpellingEngine.swc"/>
 			<arg value="-output"/>
 			<arg value="${OUTPUT_DIR}/ApacheFlexSpellingFramework.swc"/>
 		</java>
@@ -154,7 +154,7 @@
 			<arg value="-external-library-path"/>
 			<arg value="${PLAYERGLOBAL_HOME}/${playerglobal.version}/playerglobal.swc"/>
             <arg value="-external-library-path"/>
-            <arg value="${OUTPUT_DIR}/ApacheflexLinguisticUtils.swc"/>
+            <arg value="${OUTPUT_DIR}/ApacheFlexLinguisticUtils.swc"/>
             <arg value="-external-library-path"/>
             <arg value="${OUTPUT_DIR}/ApacheFlexSpellingEngine.swc"/>
             <arg value="-external-library-path"/>
@@ -215,8 +215,6 @@
             <arg value="${OUTPUT_DIR}/ApacheFlexSpellingEngine.swc"/>
             <arg value="-external-library-path"/>
             <arg value="${OUTPUT_DIR}/ApacheFlexSpellingFramework.swc"/>
-            <arg value="-external-library-path"/>
-            <arg value="${OUTPUT_DIR}/ApacheFlexSpellingUI.swc"/>
             <arg value="-output"/>
             <arg value="${OUTPUT_DIR}/ApacheFlexSpellingUIEx.swc"/>
         </java>
diff --git a/Squiggly/main/maven.xml b/Squiggly/main/maven.xml
index ca013f4..7c8b84b 100644
--- a/Squiggly/main/maven.xml
+++ b/Squiggly/main/maven.xml
@@ -19,7 +19,7 @@
 -->
 <project default="install" basedir=".">
 
-    <property name="version" value="1.0"/>
+    <property name="version" value="1.1"/>
 
     <!-- Set type to RELEASE in order to deploy to the release repo -->
     <property name="type" value="SNAPSHOT"/>
diff --git a/TourDeFlex/CONTRIBUTORS b/TourDeFlex/CONTRIBUTORS
index 9f00f94..73a0b39 100644
--- a/TourDeFlex/CONTRIBUTORS
+++ b/TourDeFlex/CONTRIBUTORS
@@ -3,8 +3,9 @@
 
 Apache Flex Tour De Flex 1.1
 ----------------------------
-Andrew Wetmore, Alex Harui, Chris Martin, Christofer Dutz, Justin Mclean,
-Lee Burrows, Mark Kessler, Nemi, OmPrakash Muppirala, Piotr Zarzycki
+Alex Harui, Andrew Wetmore, Alex Harui, Chris Martin, Christofer Dutz,
+Justin Mclean, Lee Burrows, Mark Kessler, Nemi, OmPrakash Muppirala,
+Piotr Zarzycki
 
 Apache Flex Tour De Flex 1.0
 ----------------------------
diff --git a/TourDeFlex/TourDeFlex3/README b/TourDeFlex/TourDeFlex3/README
index f09ffd9..695b151 100644
--- a/TourDeFlex/TourDeFlex3/README
+++ b/TourDeFlex/TourDeFlex3/README
@@ -18,9 +18,9 @@
 ==========================================================================================
 
 1.  On Linux or Mac un tar/gzip the source distribution:
-	    tar -zxvf apache-flex-tour-de-flex-component-explorer-1.0.tar.gz
+	    tar -zxvf apache-flex-tour-de-flex-component-explorer-1.2.tar.gz
 	Or if on windows unzip 
-		apache-flex-tour-de-flex-component-explorer-1.0.zip
+		apache-flex-tour-de-flex-component-explorer-1.2.zip
 
 2.  In the base directory, run:
         ant compile
@@ -43,14 +43,15 @@
 There are several other useful ant targets. Note that compile-shell is required if you want
 changes to explorer.xml to take effect.
 
-	 compile-shell   compile explorer shell
-	 compile-mx      compile mx examples
-	 compile-spark   compile first set of spark examples
-	 compile-spark2  compile second set of spark examples
-	 compile-spark3  compile third set of spark examples
- 	 compile-apache  compile apache examples
-	 package-tar     tar up all source files
-	 package-zip     zip up all source files
+	 compile-shell     compile explorer shell
+	 compile-mx        compile mx examples
+	 compile-spark     compile first set of spark examples
+	 compile-spark2    compile second set of spark examples
+	 compile-spark3    compile third set of spark examples
+ 	 compile-apache    compile apache examples
+ 	 compile-squiggly  compile apache squiggly examples
+	 package-tar       tar up all source files
+	 package-zip       zip up all source files
 
 ==========================================================================================
 Compiling a single example
diff --git a/TourDeFlex/TourDeFlex3/RELEASE_NOTES b/TourDeFlex/TourDeFlex3/RELEASE_NOTES
index 52ca5c6..73a2694 100644
--- a/TourDeFlex/TourDeFlex3/RELEASE_NOTES
+++ b/TourDeFlex/TourDeFlex3/RELEASE_NOTES
@@ -1,4 +1,27 @@
 ------------------------------------------------
+Apache Flex Tour De Flex Component Explorer 1.2
+------------------------------------------------
+
+Apache Flex Tour De Flex 1.2 is an update to 1.1 adding a few minor improvements.
+
+Changes since the version 1.1
+- Added welcome page
+- Added support for 3rd party examples
+- Changed examples look and feel to be more consistent
+- Added Squiggly spelling engine examples
+
+Known issues:
+- Callout example in the Apache Flex 4.9 examples fails to show the callout.
+  The sample code will work externally. See FLEX-34539 for details.
+  
+Bugs fixed and improvements:
+FLEX-34505 Add squiggly example to Tour De Flex
+FLEX-34501 Allow 3rd parties to provide examples for inclusion in TourDeFlex
+FLEX-34596 Tour De Flex linking is broken
+FLEX-34493 Loading bar not centred in panel
+FLEX-34485 Improve TourDeFlex consistency and design
+
+------------------------------------------------
 Apache Flex Tour De Flex Component Explorer 1.1
 ------------------------------------------------
 
diff --git a/TourDeFlex/TourDeFlex3/build.xml b/TourDeFlex/TourDeFlex3/build.xml
index 9d46cd3..3186ccb 100644
--- a/TourDeFlex/TourDeFlex3/build.xml
+++ b/TourDeFlex/TourDeFlex3/build.xml
@@ -66,14 +66,29 @@
 			</mxmlc>
 		</sequential>
 	</macrodef>
+	
+    <macrodef name="compile-mxml-libs">
+    	 <attribute name="example"/>
+        
+        <sequential>
+   			<mxmlc file="${basedir}/src/@{example}.mxml"
+            	output="${basedir}/src/@{example}.swf" fork="true" failonerror="true">
+				<load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
+   	            <compiler.library-path dir="${basedir}/libs" append="true">
+   	                <include name="*.swc" />
+   	            </compiler.library-path>
+			</mxmlc>
+		</sequential>
+	</macrodef>	
 		
-	<target name="compile" description="compile all examples and the explorer shell" depends="compile-shell,compile-mx,compile-spark,compile-spark2,compile-spark3,compile-apache">
+	<target name="compile" description="compile all examples and the explorer shell" depends="compile-shell,compile-mx,compile-spark,compile-spark2,compile-spark3,compile-apache,compile-squiggly">
 	</target>
 	
 	<target name="compile-shell" description="compile explorer shell">
 		<compile-mxml example="/explorer"/>
 		<compile-mxml-locales example="/loaderPanel"/>
 		<compile-mxml example="/SourceTab"/>
+		<compile-mxml example="/Welcome"/>
 	</target>
 	
 	<target name="compile-mx" description="compile mx examples">
@@ -422,6 +437,64 @@
 		<!-- Uncomment when Flex 4.14 is released -->
 		<!-- compile-mxml example="/apache/controls/SparkRichTextEditorExample"/-->
 	</target>
+	
+	<property name="download.dir" value="temp"/>
+	<property name="unpack.dir" value="squiggly"/>
+	<property name="mirror.url" value="http://flex.apache.org/single-mirror-url.cgi" />
+    <property name="squiggly.folder" value="flex/squiggly/1.0" />
+ 
+	<condition property="squiggly.file" value="apache-flex-squiggly-1.0-bin.zip">
+    	<os family="windows" />
+    </condition>
+	
+    <condition property="squiggly.file" value="apache-flex-squiggly-1.0-bin.tar.gz">
+    	<or>
+    		<os family="mac" />
+    		<os family="unix" />
+    	</or>
+    </condition>
+	
+	<target name="compile-squiggly" description="compile apache squiggly examples" depends="squiggly-download">
+		<compile-mxml-libs example="/apache/squiggly/SpellingExample"/>
+		<compile-mxml-libs example="/apache/squiggly/SpellingExExample"/>
+	</target>
+	
+    <target name="squiggly-check" description="Checks if Squiggly has been downloaded.">
+        <available file="${basedir}/libs/ApacheflexSpellingEngine.swc" property="sqigggly.present"/>
+    </target>
+        	
+    <target name="squiggly-download" depends="squiggly-check" unless="sqigggly.present" description="Downloads squiggly SDK">
+    	
+    	<mkdir dir="${download.dir}"/>
+     	
+     	<get src="${mirror.url}" dest="${download.dir}/mirror.txt" />
+     	<replace file="${download.dir}/mirror.txt" token="&lt;p&gt;" />
+     	<replace file="${download.dir}/mirror.txt" token="&lt;/p&gt;" />
+     	<loadfile property="squiggly.url" srcFile="${download.dir}/mirror.txt" />
+     	
+     	<echo>Downloading ${squiggly.url}/${squiggly.folder}/${squiggly.file}</echo>
+        <get src="${squiggly.url}/${squiggly.folder}/${squiggly.file}" 
+            dest="${download.dir}/${squiggly.file}" 
+            verbose="true"/>
+    	
+    	<!-- TOSO upzip on windows -->
+    	<mkdir dir="${unpack.dir}"/>
+    	<untar dest="${unpack.dir}" src="${download.dir}/${squiggly.file}" compression="gzip" />
+    	
+    	<mkdir dir="libs"/>
+    	<copy todir="libs">
+    		<fileset dir="${unpack.dir}/main/libs">
+    			<include name="*.swc" />
+    		</fileset>
+    	</copy>
+    	
+    	<mkdir dir="dictionaries"/>
+    	<copy todir="dictionaries">
+    		<fileset dir="${unpack.dir}/dictionaries">
+    			<include name="*.*" />
+    		</fileset>
+    	</copy>
+    </target>
 		
 	<target name="package" description="package up all source files" depends="package-dir,package-tar,package-zip">
 	</target>
@@ -500,4 +573,4 @@
     		<fileset dir="${basedir}" includes="**/*.swf" />
     	</delete>
     </target>
-</project>
\ No newline at end of file
+</project>
diff --git a/TourDeFlex/TourDeFlex3/installer.xml b/TourDeFlex/TourDeFlex3/installer.xml
index 797493b..02a26a6 100644
--- a/TourDeFlex/TourDeFlex3/installer.xml
+++ b/TourDeFlex/TourDeFlex3/installer.xml
@@ -18,7 +18,7 @@
 
 -->
 
-<project name="tour_de_flex_install" default="install" basedir=".">
+<project name="tour-de-flex_install" default="install" basedir=".">
     
     <!-- Required for OSX 10.6 / Snow Leopard Performance. -->
     <!-- Java 7 on Mac requires OSX 10.7.3 or higher and is 64-bit only -->
@@ -31,140 +31,96 @@
             <equals arg1="${ant.java.version}" arg2="1.6"/>
         </and>
     </condition>
-
+    	
+    <condition property="isMacOrLinux" value="mac">
+    	<or>
+    		<os family="mac" />
+    		<os family="unix" />
+    	</or>
+    </condition>
+    <condition property="isWindows" value="windows">
+        <os family="windows" />
+    </condition>
+        	
 	<property environment="env"/>
     <condition property="FLEX_HOME" value="${env.FLEX_HOME}">
         <isset property="env.FLEX_HOME" />
     </condition>
-	<echo>${env.FLEX_HOME}</echo>
+
     <property file="${FLEX_HOME}/local.properties"/>
     <property file="${FLEX_HOME}/build.properties"/>
-	
     <property file="${basedir}/${bundle}.properties"/>
 
 	<property name="download.dir" value="${FLEX_HOME}/in"/>
-	<property name="unpack.dir" value="${FLEX_HOME}/tourdeflex"/>
-
+	<property name="unpack.dir" value="${FLEX_HOME}/tour-de-flex"/>
 	<property name="mirror.url" value="http://flex.apache.org/single-mirror-url.cgi" />
 	
-    <property name="tourdeflex.url.folder" value="flex/tourdeflex/1.0" />
-    <condition property="tourdeflex.url.file" value="apache-flex-tour-de-flex-component-explorer-1.0-src.zip">
-    	<os family="windows" />
-    </condition>
-    <condition property="tourdeflex.url.file" value="apache-flex-tour-de-flex-component-explorer-1.0-src.tar.gz">
-    	<or>
-    		<os family="mac" />
-    		<os family="unix" />
-    	</or>
-    </condition>
-    <condition property="tourdeflex.url.md5" value="2509291d41cc325ba21ed6b9cf4306f2">
-    	<os family="windows" />
-    </condition>
-    <condition property="tourdeflex.url.md5" value="2509291d41cc325ba21ed6b9cf4306f2">
-    	<or>
-    		<os family="mac" />
-    		<os family="unix" />
-    	</or>
-    </condition>
+    <property name="tour-de-flex.url.folder" value="flex/tourdeflex/1.1" />
+   
+    <target name="file-setup-win" if="isWindows">
+    	<property name="tour-de-flex.url.file" value="apache-flex-tour-de-flex-component-explorer-1.1-src.zip" />
+    	<property name="tour-de-flex.url.md5" value="95b9895120eebac1f2cd09929629ba2c" />
+    </target>
+	
+    <target name="file-setup-unix" if="isMacOrLinux">
+    	<property name="tour-de-flex.url.file" value="apache-flex-tour-de-flex-component-explorer-1.1-src.tar.gz" />
+    	<property name="tour-de-flex.url.md5" value="95b9895120eebac1f2cd09929629ba2c" />
+    </target>
 
-    <target name="install" depends="tourdeflex-download-unpack" description="Adds TourDeFlex to SDK">
+    <target name="install" depends="file-setup-win,file-setup-unix,tour-de-flex-download-unpack" description="Adds tour-de-flex to an Apache Flex SDK">
         <delete dir="${download.dir}" />
-        <echo>${install.complete.echo}</echo>
+        <echo>Tour De Flex installed</echo>
     </target>
     
-    <target name="tourdeflex-download-unpack" description="Downloads Tour De Flex and copies into SDK">
+    <target name="tour-de-flex-download-unpack" description="Downloads tour-de-flex and copies into the Apache Flex SDK">
         <mkdir dir="${download.dir}"/>
     	
     	<get src="${mirror.url}" dest="${download.dir}/mirror.txt" />
     	<replace file="${download.dir}/mirror.txt" token="&lt;p&gt;" />
     	<replace file="${download.dir}/mirror.txt" token="&lt;/p&gt;" />
-    	<loadfile property="tourdeflex.url.server" srcFile="${download.dir}/mirror.txt" />
+    	<loadfile property="tour-de-flex.url.server" srcFile="${download.dir}/mirror.txt" />
     	
-    	<echo>Downloading ${tourdeflex.url.server}/${tourdeflex.url.folder}/${tourdeflex.url.file}</echo>
+    	<echo>Downloading ${tour-de-flex.url.server}/${tour-de-flex.url.folder}/${tour-de-flex.url.file}</echo>
         
-    	<antcall target="download_tourdeflex_with_md5">
-            <param name="srcDomain" value="${tourdeflex.url.server}" />
-            <param name="srcFolder" value="${tourdeflex.url.folder}" />
-            <param name="srcFile" value="${tourdeflex.url.file}" />
-            <param name="dest" value="${download.dir}/${tourdeflex.url.file}"/>
-			<param name="message" value="${INFO_INSTALLING_TOURDEFLEX} ${tourdeflex.url.server}/${tourdeflex.url.folder}/${tourdeflex.url.file}" />
+    	<antcall target="download-check-md5">
+            <param name="domain" value="${tour-de-flex.url.server}" />
+            <param name="folder" value="${tour-de-flex.url.folder}" />
+            <param name="file" value="${tour-de-flex.url.file}" />
+            <param name="dest" value="${download.dir}/${tour-de-flex.url.file}"/>
 			<param name="failmessage" value="Tour De Flex download failed" />
-			<param name="md5" value="${tourdeflex.url.md5}" />
+			<param name="md5" value="${tour-de-flex.url.md5}" />
         </antcall>
     	
     	<mkdir dir="${unpack.dir}"/>
-    	<condition property="platform" value="windows">
-	    	<unzip dest="${unpack.dir}">
-	    		<fileset file="${download.dir}/${tourdeflex.url.file" />
-	    	</unzip>
-    	</condition>
-    	<condition property="platform" value="mac">
-	    	<tar-ungzip dest="${unpack.dir}">
-	    		<fileset file="${download.dir}/${tourdeflex.url.file" />
-	    	</tar-ungzip>
-    	</condition>
-		<condition property="platform" value="linux">
-	    	<tar-ungzip dest="${unpack.dir}">
-	    		<fileset file="${download.dir}/${tourdeflex.url.file" />
-	    	</tar-ungzip>
-		</condition>
+    	<antcall target="files-unzip" />
+    	<antcall target="files-untar" />
+    </target>
+			
+    <target name="files-unzip" if="isWindows">
+    	<unzip dest="${unpack.dir}">
+    		<fileset file="${download.dir}/${tour-de-flex.url.file}" />
+    	</unzip>
     </target>
 	
-    <target name="download_tourdeflex_with_md5">
-        <antcall target="download_using_get" />
+    <target name="files-untar" if="isMacOrLinux">
+    	<untar dest="${unpack.dir}" compression="gzip">
+    		<fileset file="${download.dir}/${tour-de-flex.url.file}" />
+    	</untar>
     </target>
 
-    <target name="download_using_get"
-        description="Downloads file, and optionally verifies checksum.">
-        
+    <target name="download-check-md5" description="Downloads file, and verifies checksum.">     
     	<tstamp />
     	<property name="ts" value="${DSTAMP}${TSTAMP}" />
-    	
-        <antcall target="get">
-        </antcall>
+        <get src="${domain}/${folder}/${file}?ts=${ts}" dest="${dest}" verbose="true" />
+        <antcall target="check-md5" />
     </target>
-    
-    <target name="get">
-		<antcall target="get-with-params" />
-        <antcall target="check-sum" />
-    </target>
-    
-	<target name="check-params" >
-		<condition property="has-params">
-			<and>
-				<contains string="${srcDomain}/${srcFolder}/${srcFile}" substring="?" />
-				<not>
-					<contains string="${srcDomain}/${srcFolder}/${srcFile}" substring="file://" />
-				</not>
-			</and>
-		</condition>
-		<condition property="is-local">
-			<contains string="${srcDomain}/${srcFolder}/${srcFile}" substring="file://" />
-		</condition>
-		<condition property="not-local-no-params">
-			<and>
-				<not>
-					<contains string="${srcDomain}/${srcFolder}/${srcFile}" substring="file://" />
-				</not>
-				<not>
-					<contains string="${srcDomain}/${srcFolder}/${srcFile}" substring="?" />
-				</not>
-			</and>
-		</condition>
-	</target>
 
-	<target name="get-with-params" depends="check-params" if="has-params" >
-        <get src="${srcDomain}/${srcFolder}/${srcFile}&amp;ts=${ts}" dest="${dest}"/>
-	</target>
-    
-    <target name="check-sum" if="md5"
-        description="Verifies MD5 checksum, and fails if checksum doesn't match">
-        
+    <target name="check-md5" description="Verifies MD5 checksum, and fails if checksum doesn't match">
         <echo>Checking ${dest} matches ${md5}</echo>
-        <checksum file="${dest}" algorithm="MD5" verifyproperty="we.failed" property="${md5}" />
+        <checksum file="${dest}" algorithm="MD5" verifyproperty="md5.failed" property="${md5}" />
         <fail message="${failmessage}">
             <condition>
-                <equals arg1="${we.failed}" arg2="false" />
+                <equals arg1="${md5.failed}" arg2="false" />
             </condition>
         </fail>
     </target>
diff --git a/TourDeFlex/TourDeFlex3/src/3rdparty.xml b/TourDeFlex/TourDeFlex3/src/3rdparty.xml
new file mode 100755
index 0000000..29f4e0c
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/3rdparty.xml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one or more
+  ~     contributor license agreements.  See the NOTICE file distributed with
+  ~     this work for additional information regarding copyright ownership.
+  ~     The ASF licenses this file to You under the Apache License, Version 2.0
+  ~     (the "License"); you may not use this file except in compliance with
+  ~     the License.  You may obtain a copy of the License at
+  ~
+  ~         http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~     Unless required by applicable law or agreed to in writing, software
+  ~     distributed under the License is distributed on an "AS IS" BASIS,
+  ~     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~     See the License for the specific language governing permissions and
+  ~     limitations under the License.
+  -->
+
+<compTree>
+	<node label="3rd Party Components">
+		<node label="Flexicious">
+			<node label="Dashboard Framework" app="http://www.flexicious.com/resources/demo/FlexiciousClassic.swf" src="" />
+			<node label="Ultimate DataGrid" app="http://www.flexicious.com/resources/demo/FlexiciousUltimate.swf" src="" />
+			<node label="Classic DataGrid" app="http://www.flexicious.com/resources/demo/FlexiciousDashboard.swf" src="" />
+		</node>
+	</node>
+</compTree>
diff --git a/TourDeFlex/TourDeFlex3/src/SourceTab.mxml b/TourDeFlex/TourDeFlex3/src/SourceTab.mxml
index c9d8f7c..fbe44a7 100755
--- a/TourDeFlex/TourDeFlex3/src/SourceTab.mxml
+++ b/TourDeFlex/TourDeFlex3/src/SourceTab.mxml
@@ -17,7 +17,9 @@
       limitations under the License.

   -->

 

-<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">

+<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"

+		 xmlns:mx="library://ns.adobe.com/flex/mx"

+		 width="100%" height="100%">

 

     <fx:Script>

         <![CDATA[

@@ -76,7 +78,7 @@
 	</fx:Declarations>

 	

     <mx:TextArea id="ta" color="#0000A0" fontFamily="Courier" editable="false" wordWrap="false" width="100%" height="100%"/>

-	<mx:HBox width="100%">

+	<mx:HBox width="100%" paddingBottom="5" paddingRight="20">

 		<mx:Spacer width="100%" />

 		<mx:Button label="Copy" click="copyCode()" />

 		<mx:Button label="Copy Link" click="copyLink()" />

diff --git a/TourDeFlex/TourDeFlex3/src/Welcome.mxml b/TourDeFlex/TourDeFlex3/src/Welcome.mxml
new file mode 100644
index 0000000..0240899
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/Welcome.mxml
@@ -0,0 +1,52 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+				xmlns:mx="library://ns.adobe.com/flex/mx"
+				xmlns:s="library://ns.adobe.com/flex/spark"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="Welcome to Tour De Flex"
+			  paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+			  height="100%" width="100%">
+		<s:HGroup>
+			<s:Image source="@Embed('/apache/assets/ApacheFlexLogo.png')" width="50" height="50" />
+			<s:VGroup height="100%" verticalAlign="middle">
+				<s:Label text="Apache Tour De Flex" fontSize="20" fontWeight="bold" />
+			</s:VGroup>	
+		</s:HGroup>
+			
+		<s:RichText width="100%" height="100%">
+			<s:p />
+			<s:p>The Apache Flex Tour De Flex component explorer provides a sample set of working
+	  Apache Flex examples.</s:p>
+			<s:p />
+			<s:p>New in this version:</s:p>
+			<s:list>
+				<s:li>Added this welcome page</s:li>
+				<s:li>Changed examples look and feel to be more consistent</s:li>
+				<s:li>Added support for 3rd party examples</s:li>
+				<s:li>Added Squiggly spelling engine examples</s:li>
+			</s:list>
+			<s:p />
+			<s:p>For a full list of changes please see the README.</s:p>
+			<s:p />
+		</s:RichText>
+    </mx:Panel>
+</mx:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_10_0.mxml b/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_10_0.mxml
index e8fdb6b..1a7f786 100644
--- a/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_10_0.mxml
+++ b/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_10_0.mxml
@@ -20,35 +20,36 @@
 <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">
-	<s:layout>
-		<s:VerticalLayout paddingLeft="20" paddingTop="20" />
-	</s:layout>
-	
-	<s:HGroup>
-		<s:Image source="@Embed('/assets/ApacheFlexLogo.png')" width="50" height="50" />
-		<s:VGroup height="100%" verticalAlign="middle">
-			<s:Label text="Apache Flex 4.10" fontSize="20" fontWeight="bold" />
-			<s:Label text="Released Aug 6, 2013" />	
-		</s:VGroup>	
-	</s:HGroup>
 
-	<s:RichText width="100%">
-		<s:p />
-		<s:p>Apache Flex community releases Flex 4.10.0.</s:p>
-		<s:p />
-		<s:p>Differences and highlights include:</s:p>
-		<s:list>
-			<s:li>Support for latest versions of Flash Player (up to 11.8) and AIR runtimes (up to 3.8)</s:li>
-			<s:li>Improved support for older Flash Player versions (down to 10.2)</s:li>
-			<s:li>Linux support</s:li>
-			<s:li>15 new Spark components</s:li>
-			<s:li>Advanced telemetry support</s:li>
-			<s:li>480 dpi mobile skins</s:li>
-			<s:li>Over 200 bugs fixeds</s:li>
-		</s:list>
-		<s:p />
-		<s:p>For a full list of changes please see the README.</s:p>
-		<s:p />
-	</s:RichText>
-	<s:Label text="Content from Wikipedia licenced under a Creative Commons Attribution-ShareAlike 3.0 Unported License" fontSize="9" />
+	<s:Panel title="Apache Flex 4.10" width="100%" height="100%">		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:HGroup>
+			<s:Image source="@Embed('/assets/ApacheFlexLogo.png')" width="50" height="50" />
+			<s:VGroup height="100%" verticalAlign="middle">
+				<s:Label text="Apache Flex 4.10" fontSize="20" fontWeight="bold" />
+				<s:Label text="Released Aug 6, 2013" />	
+			</s:VGroup>	
+		</s:HGroup>
+		<s:RichText width="100%">
+			<s:p />
+			<s:p>Apache Flex community releases Flex 4.10.0.</s:p>
+			<s:p />
+			<s:p>Differences and highlights include:</s:p>
+			<s:list>
+				<s:li>Support for latest versions of Flash Player (up to 11.8) and AIR runtimes (up to 3.8)</s:li>
+				<s:li>Improved support for older Flash Player versions (down to 10.2)</s:li>
+				<s:li>Linux support</s:li>
+				<s:li>15 new Spark components</s:li>
+				<s:li>Advanced telemetry support</s:li>
+				<s:li>480 dpi mobile skins</s:li>
+				<s:li>Over 200 bugs fixeds</s:li>
+			</s:list>
+			<s:p />
+			<s:p>For a full list of changes please see the README.</s:p>
+			<s:p />
+		</s:RichText>
+		<s:Label text="Content from Wikipedia licenced under a Creative Commons Attribution-ShareAlike 3.0 Unported License" fontSize="9" />
+	</s:Panel>
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_11_0.mxml b/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_11_0.mxml
index 4417529..1e47ee3 100644
--- a/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_11_0.mxml
+++ b/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_11_0.mxml
@@ -20,35 +20,36 @@
 <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">
-	<s:layout>
-		<s:VerticalLayout paddingLeft="20" paddingTop="20" />
-	</s:layout>
-	
-	<s:HGroup>
-		<s:Image source="@Embed('/assets/ApacheFlexLogo.png')" width="50" height="50" />
-		<s:VGroup height="100%" verticalAlign="middle">
-			<s:Label text="Apache Flex 4.11" fontSize="20" fontWeight="bold" />
-			<s:Label text="Released Oct 28, 2013" />
-		</s:VGroup>	
-	</s:HGroup>
-	
-	<s:RichText width="100%">
-		<s:p />
-		<s:p>Apache Flex community releases Flex 4.11.0.</s:p>
-		<s:p />
-		<s:p>Differences and highlights include:</s:p>
-		<s:list>
-			<s:li>Support for Flash Player 11.9 and AIR runtime 3.9</s:li>
-			<s:li>mx:AdvancedDataGrid and mx:DataGrid speed improvements</s:li>
-			<s:li>Updated OSMF to latest version</s:li>
-			<s:li>Mobile datagrid component</s:li>
-			<s:li>120 and 640 dpi mobile skins</s:li>
-			<s:li>Desktop callout component</s:li>
-			<s:li>Over 50 bugs fixed</s:li>
-		</s:list>
-		<s:p />
-		<s:p>For a full list of changes please see the README.</s:p>
-		<s:p />
-	</s:RichText>
-	<s:Label text="Content from Wikipedia licenced under a Creative Commons Attribution-ShareAlike 3.0 Unported License" fontSize="9" />
+
+	<s:Panel title="Apache Flex 4.11" width="100%" height="100%">	
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:HGroup>
+			<s:Image source="@Embed('/assets/ApacheFlexLogo.png')" width="50" height="50" />
+			<s:VGroup height="100%" verticalAlign="middle">
+				<s:Label text="Apache Flex 4.11" fontSize="20" fontWeight="bold" />
+				<s:Label text="Released Oct 28, 2013" />
+			</s:VGroup>	
+		</s:HGroup>	
+		<s:RichText width="100%">
+			<s:p />
+			<s:p>Apache Flex community releases Flex 4.11.0.</s:p>
+			<s:p />
+			<s:p>Differences and highlights include:</s:p>
+			<s:list>
+				<s:li>Support for Flash Player 11.9 and AIR runtime 3.9</s:li>
+				<s:li>mx:AdvancedDataGrid and mx:DataGrid speed improvements</s:li>
+				<s:li>Updated OSMF to latest version</s:li>
+				<s:li>Mobile datagrid component</s:li>
+				<s:li>120 and 640 dpi mobile skins</s:li>
+				<s:li>Desktop callout component</s:li>
+				<s:li>Over 50 bugs fixed</s:li>
+			</s:list>
+			<s:p />
+			<s:p>For a full list of changes please see the README.</s:p>
+			<s:p />
+		</s:RichText>
+		<s:Label text="Content from Wikipedia licenced under a Creative Commons Attribution-ShareAlike 3.0 Unported License" fontSize="9" />
+	</s:Panel>
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_12_1.mxml b/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_12_1.mxml
index 5ec5b4f..8798b79 100644
--- a/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_12_1.mxml
+++ b/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_12_1.mxml
@@ -20,37 +20,38 @@
 <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">
-	<s:layout>
-		<s:VerticalLayout paddingLeft="20" paddingTop="20" />
-	</s:layout>
-	
-	<s:HGroup>
-		<s:Image source="@Embed('/assets/ApacheFlexLogo.png')" width="50" height="50" />
-		<s:VGroup height="100%" verticalAlign="middle">
-			<s:Label text="Apache Flex 4.12" fontSize="20" fontWeight="bold" />
-			<s:Label text="Released May 3, 2014" />
-		</s:VGroup>	
-	</s:HGroup>
-	
-	<s:RichText width="100%">
-		<s:p />
-		<s:p>Apache Flex community releases Flex 4.12.1.</s:p>
-		<s:p />
-		<s:p>Differences and highlights in 4.12.0 and 4.12.1 include:</s:p>
-		<s:list>
-			<s:li>Support for Flash Player 12.0 and 13.0 and AIR runtime 4.0 and 13.0</s:li>
-			<s:li>Fixed Adobe Flash Builder bug, which inserts a incorrect attribute while creating a new project that uses Apache Flex SDK</s:li>
-			<s:li>Extended mobile media query support</s:li>
-			<s:li>Improved mobile memory usage/performance</s:li>
-			<s:li>Improved iPad and iOS7 support</s:li>
-			<s:li>mx:AdvancedDataGrid and mx:DataGrid performance improvements</s:li>
-			<s:li>New MaskedTextinput component</s:li>
-			<s:li>JSON support for ArrayCollection and ArrayList</s:li>
-			<s:li>Over 100 bugs fixed</s:li>
-		</s:list>
-		<s:p />
-		<s:p>For a full list of changes please see the README.</s:p>
-		<s:p />
-	</s:RichText>
-	<s:Label text="Content from Wikipedia licenced under a Creative Commons Attribution-ShareAlike 3.0 Unported License" fontSize="9" />
+
+	<s:Panel title="Apache Flex 4.12" width="100%" height="100%">	
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:HGroup>
+			<s:Image source="@Embed('/assets/ApacheFlexLogo.png')" width="50" height="50" />
+			<s:VGroup height="100%" verticalAlign="middle">
+				<s:Label text="Apache Flex 4.12" fontSize="20" fontWeight="bold" />
+				<s:Label text="Released May 3, 2014" />
+			</s:VGroup>	
+		</s:HGroup>	
+		<s:RichText width="100%">
+			<s:p />
+			<s:p>Apache Flex community releases Flex 4.12.1.</s:p>
+			<s:p />
+			<s:p>Differences and highlights in 4.12.0 and 4.12.1 include:</s:p>
+			<s:list>
+				<s:li>Support for Flash Player 12.0 and 13.0 and AIR runtime 4.0 and 13.0</s:li>
+				<s:li>Fixed Adobe Flash Builder bug, which inserts a incorrect attribute while creating a new project that uses Apache Flex SDK</s:li>
+				<s:li>Extended mobile media query support</s:li>
+				<s:li>Improved mobile memory usage/performance</s:li>
+				<s:li>Improved iPad and iOS7 support</s:li>
+				<s:li>mx:AdvancedDataGrid and mx:DataGrid performance improvements</s:li>
+				<s:li>New MaskedTextinput component</s:li>
+				<s:li>JSON support for ArrayCollection and ArrayList</s:li>
+				<s:li>Over 100 bugs fixed</s:li>
+			</s:list>
+			<s:p />
+			<s:p>For a full list of changes please see the README.</s:p>
+			<s:p />
+		</s:RichText>
+		<s:Label text="Content from Wikipedia licenced under a Creative Commons Attribution-ShareAlike 3.0 Unported License" fontSize="9" />
+	</s:Panel>
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_13_0.mxml b/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_13_0.mxml
index 99ea77d..61ba11d 100644
--- a/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_13_0.mxml
+++ b/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_13_0.mxml
@@ -20,33 +20,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">
-	<s:layout>
-		<s:VerticalLayout paddingLeft="20" paddingTop="20" />
-	</s:layout>
-	
-	<s:HGroup>
-		<s:Image source="@Embed('/assets/ApacheFlexLogo.png')" width="50" height="50" />
-		<s:VGroup height="100%" verticalAlign="middle">
-			<s:Label text="Apache Flex 4.13" fontSize="20" fontWeight="bold" />
-			<s:Label text="Released Jul 28, 2014" />
-		</s:VGroup>	
-	</s:HGroup>
-	
-	<s:RichText width="100%">
-		<s:p />
-		<s:p>Apache Flex community releases Flex 4.13.0.</s:p>
-		<s:p />
-		<s:p>Differences and highlights include:</s:p>
-		<s:list>
-			<s:li>Support for Flash Player 14.0 and AIR runtime 14.0</s:li>
-			<s:li>FDB supports debugging ActionScript Workers</s:li>
-			<s:li>percentWidth for GridColumn</s:li>
-			<s:li>Add Chinese translations for all the installers of Flex</s:li>
-			<s:li>Over 30 bugs fixed</s:li>
-		</s:list>
-		<s:p />
-		<s:p>For a full list of changes please see the README.</s:p>
-		<s:p />
-	</s:RichText>
-	<s:Label text="Content from Wikipedia licenced under a Creative Commons Attribution-ShareAlike 3.0 Unported License" fontSize="9" />
+
+	<s:Panel title="Apache Flex 4.13" width="100%" height="100%">	
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:HGroup>
+			<s:Image source="@Embed('/assets/ApacheFlexLogo.png')" width="50" height="50" />
+			<s:VGroup height="100%" verticalAlign="middle">
+				<s:Label text="Apache Flex 4.13" fontSize="20" fontWeight="bold" />
+				<s:Label text="Released Jul 28, 2014" />
+			</s:VGroup>	
+		</s:HGroup>
+		<s:RichText width="100%">
+			<s:p />
+			<s:p>Apache Flex community releases Flex 4.13.0.</s:p>
+			<s:p />
+			<s:p>Differences and highlights include:</s:p>
+			<s:list>
+				<s:li>Support for Flash Player 14.0 and AIR runtime 14.0</s:li>
+				<s:li>FDB supports debugging ActionScript Workers</s:li>
+				<s:li>percentWidth for GridColumn</s:li>
+				<s:li>Add Chinese translations for all the installers of Flex</s:li>
+				<s:li>Over 30 bugs fixed</s:li>
+			</s:list>
+			<s:p />
+			<s:p>For a full list of changes please see the README.</s:p>
+			<s:p />
+		</s:RichText>
+		<s:Label text="Content from Wikipedia licenced under a Creative Commons Attribution-ShareAlike 3.0 Unported License" fontSize="9" />
+	</s:Panel>
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_14_0.mxml b/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_14_0.mxml
index 1f988e2..3e9fe67 100644
--- a/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_14_0.mxml
+++ b/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_14_0.mxml
@@ -20,32 +20,33 @@
 <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">
-	<s:layout>
-		<s:VerticalLayout paddingLeft="20" paddingTop="20" />
-	</s:layout>
-	
-	<s:HGroup>
-		<s:Image source="@Embed('/assets/ApacheFlexLogo.png')" width="50" height="50" />
-		<s:VGroup height="100%" verticalAlign="middle">
-			<s:Label text="Apache Flex 4.14" fontSize="20" fontWeight="bold" />
-			<s:Label text="Released MMM DD, 2014" />
-		</s:VGroup>	
-	</s:HGroup>
-	
-	<s:RichText width="100%">
-		<s:p />
-		<s:p>Apache Flex community releases Flex 4.14.0.</s:p>
-		<s:p />
-		<s:p>Differences and highlights include:</s:p>
-		<s:list>
-			<s:li>Support for Flash Player 15.0 and AIR runtime 15.0</s:li>
-			<s:li>New modern Android skins</s:li>
-			<s:li>New spark RichTextEditor component</s:li>
-			<s:li>Over XX bugs fixed</s:li>
-		</s:list>
-		<s:p />
-		<s:p>For a full list of changes please see the README.</s:p>
-		<s:p />
-	</s:RichText>
-	<s:Label text="Content from Wikipedia licenced under a Creative Commons Attribution-ShareAlike 3.0 Unported License" fontSize="9" />
+
+	<s:Panel title="Apache Flex 4.14" width="100%" height="100%">	
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:HGroup>
+			<s:Image source="@Embed('/assets/ApacheFlexLogo.png')" width="50" height="50" />
+			<s:VGroup height="100%" verticalAlign="middle">
+				<s:Label text="Apache Flex 4.14" fontSize="20" fontWeight="bold" />
+				<s:Label text="Released MMM DD, 2014" />
+			</s:VGroup>	
+		</s:HGroup>
+		<s:RichText width="100%">
+			<s:p />
+			<s:p>Apache Flex community releases Flex 4.14.0.</s:p>
+			<s:p />
+			<s:p>Differences and highlights include:</s:p>
+			<s:list>
+				<s:li>Support for Flash Player 15.0 and AIR runtime 15.0</s:li>
+				<s:li>New modern Android skins</s:li>
+				<s:li>New spark RichTextEditor component</s:li>
+				<s:li>Over XX bugs fixed</s:li>
+			</s:list>
+			<s:p />
+			<s:p>For a full list of changes please see the README.</s:p>
+			<s:p />
+		</s:RichText>
+		<s:Label text="Content from Wikipedia licenced under a Creative Commons Attribution-ShareAlike 3.0 Unported License" fontSize="9" />
+	</s:Panel>
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_8_0.mxml b/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_8_0.mxml
index e4e2009..a99b4ef 100644
--- a/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_8_0.mxml
+++ b/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_8_0.mxml
@@ -20,31 +20,32 @@
 <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">
-	<s:layout>
-		<s:VerticalLayout paddingLeft="20" paddingTop="20" />
-	</s:layout>
-	
-	<s:HGroup>
-		<s:Image source="@Embed('/assets/ApacheFlexLogo.png')" width="50" height="50" />
-		<s:VGroup height="100%" verticalAlign="middle">
-			<s:Label text="Apache Flex 4.8 (incubating)" fontSize="20" fontWeight="bold" />
-			<s:Label text="Released Jul 25, 2012" />
-		</s:VGroup>	
-	</s:HGroup>
-	
-	<s:RichText width="100%">
-		<s:p />
-		<s:p>Apache Flex community releases Flex 4.8.0 incubating and it as a parity release with Adobe Flex 4.6.0. This is the first release under the incubator of the Apache Software Foundation and represents the initial donation of Adobe Flex 4.6 by Adobe System Inc.</s:p>
-		<s:p />
-		<s:p>Differences and highlights include:</s:p>
-		<s:list>
-			<s:li>Flex trademark issues are largely cleared up</s:li>
-			<s:li>Bug-tracking / issue-tracking system (JIRA) transferred from the Adobe bug tracker to Apache bug tracker</s:li>
-			<s:li>Mustela test suite is donated to Apache</s:li>
-		</s:list>
-		<s:p />
-		<s:p>For a full list of changes please see the README.</s:p>
-		<s:p />
-	</s:RichText>
-	<s:Label text="Content from Wikipedia licenced under a Creative Commons Attribution-ShareAlike 3.0 Unported License" fontSize="9" />
+
+	<s:Panel title="Apache Flex 4.8 (incubating)" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:HGroup>
+			<s:Image source="@Embed('/assets/ApacheFlexLogo.png')" width="50" height="50" />
+			<s:VGroup height="100%" verticalAlign="middle">
+				<s:Label text="Apache Flex 4.8 (incubating)" fontSize="20" fontWeight="bold" />
+				<s:Label text="Released Jul 25, 2012" />
+			</s:VGroup>	
+		</s:HGroup>
+		<s:RichText width="100%">
+			<s:p />
+			<s:p>Apache Flex community releases Flex 4.8.0 incubating and it as a parity release with Adobe Flex 4.6.0. This is the first release under the incubator of the Apache Software Foundation and represents the initial donation of Adobe Flex 4.6 by Adobe System Inc.</s:p>
+			<s:p />
+			<s:p>Differences and highlights include:</s:p>
+			<s:list>
+				<s:li>Flex trademark issues are largely cleared up</s:li>
+				<s:li>Bug-tracking / issue-tracking system (JIRA) transferred from the Adobe bug tracker to Apache bug tracker</s:li>
+				<s:li>Mustela test suite is donated to Apache</s:li>
+			</s:list>
+			<s:p />
+			<s:p>For a full list of changes please see the README.</s:p>
+			<s:p />
+		</s:RichText>
+		<s:Label text="Content from Wikipedia licenced under a Creative Commons Attribution-ShareAlike 3.0 Unported License" fontSize="9" />	
+	</s:Panel>
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_9_0.mxml b/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_9_0.mxml
index ec00457..188a5ee 100644
--- a/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_9_0.mxml
+++ b/TourDeFlex/TourDeFlex3/src/apache/ApacheFlex4_9_0.mxml
@@ -20,37 +20,38 @@
 <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">
-	<s:layout>
-		<s:VerticalLayout paddingLeft="20" paddingTop="20" />
-	</s:layout>
-	
-	<s:HGroup>
-		<s:Image source="@Embed('/assets/ApacheFlexLogo.png')" width="50" height="50" />
-		<s:VGroup height="100%" verticalAlign="middle">
-			<s:Label text="Apache Flex 4.9" fontSize="20" fontWeight="bold" />
-			<s:Label text="Released Jan 11, 2013" />
-		</s:VGroup>	
-	</s:HGroup>
-	
-	<s:RichText width="100%">
-		<s:p />
-		<s:p>Apache Flex community releases Flex 4.9.0. This is the first release since Apache Flex became a top level project of the Apache Software Foundation.</s:p>
-		<s:p />
-		<s:p>Differences and highlights include:</s:p>
-		<s:list>
-			<s:li>New locales for Apache Flex including Australian, British, Canadian, Greek, Switzerland (German) and Portuguese</s:li>
-			<s:li>Apache Flex SDK can be compiled for any version of the Flash Player from 10.2 to 11.5</s:li>
-			<s:li>New PostCodeFormatter and PostCodeValidator classes for international postcode formatting and validation</s:li>
-			<s:li>New VectorList and VectorCollection classes for lists and collections of vectors</s:li>
-			<s:li>New version of the TLF (Text Layout Framework), the TLF 3.0.33 source code is now included as it is now part of the Apache Flex donation</s:li>
-			<s:li>Can use Java 7 to compile SDK (see README for instructions)</s:li>
-			<s:li>Many improvements and updates to Mustella tests</s:li>
-			<s:li>An SDK installer has also been created and is the recommended way of installing the Apache Flex SDK in an IDE</s:li>
-			<s:li>Various important bug fixes</s:li>
-		</s:list>
-		<s:p />
-		<s:p>For a full list of changes please see the README.</s:p>
-		<s:p />
-	</s:RichText>
-	<s:Label text="Content from Wikipedia licenced under a Creative Commons Attribution-ShareAlike 3.0 Unported License" fontSize="9" />
+
+	<s:Panel title="Apache Flex 4.9" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:HGroup>
+			<s:Image source="@Embed('/assets/ApacheFlexLogo.png')" width="50" height="50" />
+			<s:VGroup height="100%" verticalAlign="middle">
+				<s:Label text="Apache Flex 4.9" fontSize="20" fontWeight="bold" />
+				<s:Label text="Released Jan 11, 2013" />
+			</s:VGroup>	
+		</s:HGroup>
+		<s:RichText width="100%">
+			<s:p />
+			<s:p>Apache Flex community releases Flex 4.9.0. This is the first release since Apache Flex became a top level project of the Apache Software Foundation.</s:p>
+			<s:p />
+			<s:p>Differences and highlights include:</s:p>
+			<s:list>
+				<s:li>New locales for Apache Flex including Australian, British, Canadian, Greek, Switzerland (German) and Portuguese</s:li>
+				<s:li>Apache Flex SDK can be compiled for any version of the Flash Player from 10.2 to 11.5</s:li>
+				<s:li>New PostCodeFormatter and PostCodeValidator classes for international postcode formatting and validation</s:li>
+				<s:li>New VectorList and VectorCollection classes for lists and collections of vectors</s:li>
+				<s:li>New version of the TLF (Text Layout Framework), the TLF 3.0.33 source code is now included as it is now part of the Apache Flex donation</s:li>
+				<s:li>Can use Java 7 to compile SDK (see README for instructions)</s:li>
+				<s:li>Many improvements and updates to Mustella tests</s:li>
+				<s:li>An SDK installer has also been created and is the recommended way of installing the Apache Flex SDK in an IDE</s:li>
+				<s:li>Various important bug fixes</s:li>
+			</s:list>
+			<s:p />
+			<s:p>For a full list of changes please see the README.</s:p>
+			<s:p />
+		</s:RichText>
+		<s:Label text="Content from Wikipedia licenced under a Creative Commons Attribution-ShareAlike 3.0 Unported License" fontSize="9" />
+	</s:Panel>
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/apache/containers/CalloutExample.mxml b/TourDeFlex/TourDeFlex3/src/apache/containers/CalloutExample.mxml
index ace2200..efd462d 100644
--- a/TourDeFlex/TourDeFlex3/src/apache/containers/CalloutExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/apache/containers/CalloutExample.mxml
@@ -30,9 +30,9 @@
 		</s:Callout>
 	</fx:Declarations>
 	
-	<s:Panel title="Callout" width="100%" height="100%" borderAlpha="0.15">
+	<s:Panel title="Callout Example" width="100%" height="100%">
 		<s:layout>
-			<s:VerticalLayout paddingLeft="20" paddingTop="20" gap="10" />
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		<s:HGroup>
 			<s:Button id="show" label="Show Callout" click="callout.open(show)" />
diff --git a/TourDeFlex/TourDeFlex3/src/apache/controls/MaskedTextInputExample.mxml b/TourDeFlex/TourDeFlex3/src/apache/controls/MaskedTextInputExample.mxml
index 62c2d72..adb0daa 100644
--- a/TourDeFlex/TourDeFlex3/src/apache/controls/MaskedTextInputExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/apache/controls/MaskedTextInputExample.mxml
@@ -22,9 +22,9 @@
 			   xmlns:mx="library://ns.adobe.com/flex/mx"
 			   xmlns:x="http://flex.apache.org/experimental/ns">
 	
-	<s:Panel title="Millisecond Format" width="100%" height="100%" borderAlpha="0.15">
+	<s:Panel title="Millisecond Format Example" width="100%" height="100%">
 		<s:layout>
-			<s:VerticalLayout paddingLeft="20" paddingTop="20" gap="10" />
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		<s:HGroup verticalAlign="bottom">
 			<s:Label text="Phone Number:" />
diff --git a/TourDeFlex/TourDeFlex3/src/apache/controls/SparkRichTextEditorExample.mxml b/TourDeFlex/TourDeFlex3/src/apache/controls/SparkRichTextEditorExample.mxml
index 64baead..3a63b10 100644
--- a/TourDeFlex/TourDeFlex3/src/apache/controls/SparkRichTextEditorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/apache/controls/SparkRichTextEditorExample.mxml
@@ -42,11 +42,13 @@
 				richTextEditorOutput.text = rte.htmlText;
 			}
 		]]>
-	</fx:Script>	
-	<s:Panel title="Millisecond Format" width="100%" height="100%" borderAlpha="0.15">
+	</fx:Script>
+
+	<s:Panel title="RichTextEditor Sample" width="100%" height="100%">
 		<s:layout>
-			<s:VerticalLayout paddingLeft="20" paddingTop="20" gap="10" />
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
+
 		<s:VGroup id="container" width="600" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
 			<s:Label text="HTML Output:" fontSize="20"/>
 			<s:Label id="richTextEditorOutput" width="100%"/>
diff --git a/TourDeFlex/TourDeFlex3/src/apache/formatters/PostCodeFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/apache/formatters/PostCodeFormatterExample.mxml
index e6132e0..e9e2939 100644
--- a/TourDeFlex/TourDeFlex3/src/apache/formatters/PostCodeFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/apache/formatters/PostCodeFormatterExample.mxml
@@ -65,9 +65,9 @@
 		]]>
 	</fx:Script>
 	
-	<s:Panel title="Postcode Formatter Example" width="600" height="100%" color="0x000000" borderAlpha="0.15">
+	<s:Panel title="Postcode Formatter Example" width="100%" height="100%">		
 		<s:layout>
-			<s:VerticalLayout paddingLeft="20" paddingTop="20" gap="10" />
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		<s:HGroup verticalAlign="middle">
 			<s:Label text="Postcode" />
diff --git a/TourDeFlex/TourDeFlex3/src/apache/i18n/DateExample.mxml b/TourDeFlex/TourDeFlex3/src/apache/i18n/DateExample.mxml
index 6c40b4c..6a26e88 100644
--- a/TourDeFlex/TourDeFlex3/src/apache/i18n/DateExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/apache/i18n/DateExample.mxml
@@ -55,9 +55,9 @@
 		]]>
 	</fx:Script>
 	
-	<s:Panel title="International Date Formating" width="100%" height="100%" borderAlpha="0.15">
+	<s:Panel title="International Date Formating Example" width="100%" height="100%">	
 		<s:layout>
-			<s:VerticalLayout paddingLeft="20" paddingTop="20" gap="10" />
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		<s:HGroup verticalAlign="middle">
 			<s:Label text="Date" />
diff --git a/TourDeFlex/TourDeFlex3/src/apache/i18n/LocaleExample.mxml b/TourDeFlex/TourDeFlex3/src/apache/i18n/LocaleExample.mxml
index 3e6cbb5..6e21a40 100644
--- a/TourDeFlex/TourDeFlex3/src/apache/i18n/LocaleExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/apache/i18n/LocaleExample.mxml
@@ -20,9 +20,6 @@
 <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">
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
 
 	<fx:Script>
 		<![CDATA[
@@ -54,10 +51,10 @@
 		<mx:EmailValidator />
 	</fx:Declarations>
 
-	<s:Panel title="SDK Locale Example" width="600" height="100%" color="0x000000" borderAlpha="0.15">
+	<s:Panel title="SDK Locale Example" width="100%" height="100%">
 		<s:layout>
-			<s:VerticalLayout paddingLeft="20" paddingTop="20" gap="10" />
-		</s:layout>		
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>	
 		<s:HGroup verticalAlign="middle">
 			<s:Label text="Select Lanagage" />
 			<s:ComboBox id="locale" dataProvider="{langauges}" change="changeLocale(event)" />
diff --git a/TourDeFlex/TourDeFlex3/src/apache/i18n/MillisecondExample.mxml b/TourDeFlex/TourDeFlex3/src/apache/i18n/MillisecondExample.mxml
index 2164b65..7a313b3 100644
--- a/TourDeFlex/TourDeFlex3/src/apache/i18n/MillisecondExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/apache/i18n/MillisecondExample.mxml
@@ -45,10 +45,10 @@
 		]]>
 	</fx:Script>
 	
-	<s:Panel title="Millisecond Format" width="100%" height="100%" borderAlpha="0.15">
+	<s:Panel title="Millisecond Format Example" width="100%" height="100%">
 		<s:layout>
-			<s:VerticalLayout paddingLeft="20" paddingTop="20" gap="10" />
-		</s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>	
 		<s:HGroup>
 			<s:Label text="Formatted Date" />
 			<s:Label id="formatted" />
diff --git a/TourDeFlex/TourDeFlex3/src/apache/i18n/NumericStepperExample.mxml b/TourDeFlex/TourDeFlex3/src/apache/i18n/NumericStepperExample.mxml
index 17f6a31..f7de2bc 100644
--- a/TourDeFlex/TourDeFlex3/src/apache/i18n/NumericStepperExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/apache/i18n/NumericStepperExample.mxml
@@ -22,10 +22,10 @@
 			   xmlns:mx="library://ns.adobe.com/flex/mx"
 			   locale="en_ES">
 	
-	<s:Panel title="European Numeric Stepper" width="100%" height="100%" borderAlpha="0.15">
+	<s:Panel title="European Numeric Stepper Example" width="100%" height="100%">
 		<s:layout>
-			<s:VerticalLayout paddingLeft="20" paddingTop="20" gap="10" />
-		</s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>	
 		<s:HGroup verticalAlign="middle">
 			<s:Label text="Number" />
 			<s:NumericStepper maximum="10" snapInterval="0.05" stepSize="0.05" />
diff --git a/TourDeFlex/TourDeFlex3/src/apache/i18n/ScientificExample.mxml b/TourDeFlex/TourDeFlex3/src/apache/i18n/ScientificExample.mxml
index 2c69ad0..b12043d 100644
--- a/TourDeFlex/TourDeFlex3/src/apache/i18n/ScientificExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/apache/i18n/ScientificExample.mxml
@@ -24,10 +24,10 @@
 		<mx:CurrencyFormatter id="amount" />
 	</fx:Declarations>
 	
-	<s:Panel title="Scientific Notation" width="100%" height="100%" borderAlpha="0.15">
+	<s:Panel title="Scientific Notation Example" width="100%" height="100%">
 		<s:layout>
-			<s:VerticalLayout paddingLeft="20" paddingTop="20" gap="10" />
-		</s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>	
 		<s:HGroup verticalAlign="middle">
 			<s:Label text="Number" />
 			<s:Label text="1.23e02" />
diff --git a/TourDeFlex/TourDeFlex3/src/apache/i18n/TimeZoneExample.mxml b/TourDeFlex/TourDeFlex3/src/apache/i18n/TimeZoneExample.mxml
index 0227dcc..09a9e93 100644
--- a/TourDeFlex/TourDeFlex3/src/apache/i18n/TimeZoneExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/apache/i18n/TimeZoneExample.mxml
@@ -45,10 +45,10 @@
 		]]>
 	</fx:Script>
 	
-	<s:Panel title="Timezone Formating" width="100%" height="100%" borderAlpha="0.15">
+	<s:Panel title="Timezone Formating Example" width="100%" height="100%">
 		<s:layout>
-			<s:VerticalLayout paddingLeft="20" paddingTop="20" gap="10" />
-		</s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>	
 		<s:HGroup verticalAlign="middle">
 			<s:Label text="Date" />
 			<mx:DateField id="date" change="formatDate(event)" />
diff --git a/TourDeFlex/TourDeFlex3/src/apache/squiggly/SpellingConfig.xml b/TourDeFlex/TourDeFlex3/src/apache/squiggly/SpellingConfig.xml
new file mode 100644
index 0000000..300e394
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/apache/squiggly/SpellingConfig.xml
@@ -0,0 +1,23 @@
+	<?xml version="1.0" encoding='UTF-8'?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<SpellingConfig>
+  <LanguageResource language="English (British)" languageCode="en_GB" ruleFile="./dictionaries/en_GB/en_GB.aff" dictionaryFile="dictionaries/en_GB/en_GB.dic"/>
+  <LanguageResource language="English (US)" languageCode="en_US" ruleFile="./dictionaries/en_US/en_US.aff" dictionaryFile="dictionaries/en_US/en_US.dic"/>
+</SpellingConfig>
diff --git a/TourDeFlex/TourDeFlex3/src/apache/squiggly/SpellingExExample.mxml b/TourDeFlex/TourDeFlex3/src/apache/squiggly/SpellingExExample.mxml
new file mode 100644
index 0000000..53ab6f6
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/apache/squiggly/SpellingExExample.mxml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+			   xmlns:s="library://ns.adobe.com/flex/spark">
+	<fx:Script>
+		<![CDATA[
+			import com.adobe.linguistics.spelling.SpellUI;
+		]]>
+	</fx:Script>
+
+	<s:Panel title="Spell Check" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="20" paddingTop="20" gap="10" />
+		</s:layout>
+		<s:Group width="100%" height="100%">
+			<s:TextArea id="ta_en" width="50%" height="50%" fontSize="20"
+						text="I know Enlish. Use the context menu to see the suggestions of the missbelled word."
+						creationComplete="SpellUI.enableSpelling(ta_en, 'en_US')"/>					
+		</s:Group>
+	</s:Panel>
+
+</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/apache/squiggly/SpellingExample.mxml b/TourDeFlex/TourDeFlex3/src/apache/squiggly/SpellingExample.mxml
new file mode 100644
index 0000000..62684aa
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/apache/squiggly/SpellingExample.mxml
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
+				xmlns:s="library://ns.adobe.com/flex/spark"
+				layout="vertical">		
+<mx:Script>
+	<![CDATA[
+			import com.adobe.linguistics.spelling.SpellUI;	
+			
+			private function enableUS():void {
+				SpellUI.enableSpelling(textArea, "en_US");
+			}
+
+			private function enableGB():void {
+				SpellUI.enableSpelling(textArea, "en_GB");
+			}
+	]]>
+</mx:Script>
+	<s:Panel title="Spell Check" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="20" paddingTop="20" gap="10" />
+		</s:layout>
+		<s:VGroup width="100%" height="100%">
+			<mx:TextArea id="textArea" width="50%" height="50%" fontSize="20" text="Spell cheecking in TextArea"/>
+			<mx:Button id="tt2" label="Check British English" click="enableGB()" /> 
+			<mx:Button id="tt3" label="Check American English" click="enableUS()" />			
+		</s:VGroup>
+	</s:Panel>
+	
+</mx:Application>
+
diff --git a/TourDeFlex/TourDeFlex3/src/apache/validators/PostCodeValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/apache/validators/PostCodeValidatorExample.mxml
index 261e7f8..0dcb868 100644
--- a/TourDeFlex/TourDeFlex3/src/apache/validators/PostCodeValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/apache/validators/PostCodeValidatorExample.mxml
@@ -62,14 +62,14 @@
 	<fx:Declarations>
 		<a:PostCodeValidator id="validator" source="{postcode}" property="text" 
 					   trigger="{checkPostcode}" triggerEvent="click"
-					   invalid="Alert.show('Postcode incorrect format!', 'Postcode');"/>
+					   invalid="Alert.show('Postcode incorrect format!', 'Postcode')"/>
 	</fx:Declarations>
 		
 	
-	<s:Panel title="Postcode Validator Example" width="600" height="100%" color="0x000000" borderAlpha="0.15">
+	<s:Panel title="Postcode Validator Example" width="100%" height="100%">		
 		<s:layout>
-			<s:VerticalLayout paddingLeft="20" paddingTop="20" gap="10" />
-		</s:layout>		
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
 		<s:HGroup verticalAlign="middle">
 			<s:Label text="Postcode" />
 			<s:TextInput id="postcode" text=""/>
diff --git a/TourDeFlex/TourDeFlex3/src/explorer.mxml b/TourDeFlex/TourDeFlex3/src/explorer.mxml
index b753545..7e5bc3c 100755
--- a/TourDeFlex/TourDeFlex3/src/explorer.mxml
+++ b/TourDeFlex/TourDeFlex3/src/explorer.mxml
@@ -17,14 +17,15 @@
   -->

 

 <mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:explorer="*"

-    width="100%" height="100%" pageTitle="{TITLE}"

-    initialize="init()" creationComplete="checkParameters()" layout="vertical">

+				pageTitle="{TITLE}" layout="vertical" width="100%" height="100%"

+				paddingBottom="2" paddingTop="2" paddingLeft="2" paddingRight="2"

+			    initialize="init()" creationComplete="checkParameters()">

 

-    <fx:Script>

+     <fx:Script>

         <![CDATA[

 		import mx.core.FlexGlobals;

 

-		static protected const VERSION:String = "1.1";	

+		static protected const VERSION:String = "1.2";	

 		static protected const TITLE:String = "Tour De Flex Component Explorer";

 		static protected const FULL_TITLE:String = "Apache Flex® Tour De Flex Component Explorer " + VERSION;

 

@@ -42,8 +43,25 @@
             compLibTree.dataProvider = explorerTree;

 			

 			noExamples = (explorerTree..node.(hasOwnProperty("@app") && @app.length() > 0)).length();

+			

+			var loader:URLLoader = new URLLoader();

+			var request:URLRequest = new URLRequest("3rdparty.xml");

+			loader.addEventListener(Event.COMPLETE, load3rdParty);

+			loader.load(request);

 		}

-		

+			

+		protected function load3rdParty(event:Event):void

+		{

+		  var loader:URLLoader = URLLoader(event.target);

+		  var newNode:XML = new XML(loader.data);

+		  

+		  if (newNode..node.length() > 0) {

+			  explorerTree.appendChild(newNode.node);

+              compLibTree.dataProvider = explorerTree;

+			  noExamples += (newNode..node.(hasOwnProperty("@app") && @app.length() > 0)).length();

+		  }

+		}

+					

 		protected function checkParameters():void

 		{		

 			var parameters:Object = FlexGlobals.topLevelApplication.parameters;

@@ -53,7 +71,10 @@
 				var source:String = explorerTree..node.(hasOwnProperty("@app") && @app == application).@src;

 				loadApp(application, source);

 				openNode(application);

-			}			

+			}

+			else {

+				loadApp("Welcome", null);

+			}

 		}

 

         private function treeChanged(event:Event):void

@@ -72,7 +93,12 @@
 			

 		private function loadApp(application:String, source:String):void

 		{

-			swfLoader.loadApp(application + ".swf");

+			if (application.indexOf(".swf") > 0) {

+				swfLoader.loadApp(application);

+			}

+			else {

+				swfLoader.loadApp(application + ".swf");

+			}

             vs.loadSource(application, source);

 		}

 			

@@ -80,7 +106,7 @@
 		{

 			var urlRequest:URLRequest = new URLRequest("http://flex.apache.org/download-tourdeflex.html");

 			navigateToURL(urlRequest);

-		}	

+		}

 		

 		private function openNode(application:String):void

 		{

diff --git a/TourDeFlex/TourDeFlex3/src/explorer.xml b/TourDeFlex/TourDeFlex3/src/explorer.xml
index 8c50a5e..1a9d3de 100755
--- a/TourDeFlex/TourDeFlex3/src/explorer.xml
+++ b/TourDeFlex/TourDeFlex3/src/explorer.xml
@@ -457,7 +457,7 @@
 				<node label="Millisecond Formatting" app="apache/i18n/MillisecondExample"/>

 				<node label="NumberStepper" app="apache/i18n/NumericStepperExample"/>

 				<node label="Scientific Notation Formatting" app="apache/i18n/ScientificExample"/>

-				<node label="Timezone Formatting" app="apache/i18n/TimezoneExample"/>

+				<node label="Timezone Formatting" app="apache/i18n/TimeZoneExample"/>

 			</node>

 			<node label="Apache Flex 4.11" app="apache/ApacheFlex4_11_0">

 				<!--  Add more examples here -->

@@ -475,6 +475,10 @@
 				<node label="MaskedTextInput" app="apache/controls/SparkRichTextEditorExample"/>

 			</node> 

 			 -->

+			 <node label="Apache Flex Squiggly" app="apache/Squiggly">

+				<node label="MX Spelling Example" app="apache/squiggly/SpellingExample"/>

+				<node label="Spark Spelling Example" app="apache/squiggly/SpellingExExample"/>

+			</node>

 		</node>

 	</node>

-</compTree>
\ No newline at end of file
+</compTree>

diff --git a/TourDeFlex/TourDeFlex3/src/index.html b/TourDeFlex/TourDeFlex3/src/index.html
index 8257541..75e06d9 100755
--- a/TourDeFlex/TourDeFlex3/src/index.html
+++ b/TourDeFlex/TourDeFlex3/src/index.html
@@ -19,47 +19,61 @@
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Apache Flex® Tour De Flex Component Explorer</title>
 <script src="AC_OETags.js" language="javascript"></script>
-<style>
-body { margin: 0px; overflow:hidden }
+<style type="text/css" media="screen"> 
+    html, body  { height:100%; }
+    body { margin:0; padding:0; overflow:auto; text-align:center; 
+           background-color: #ffffff; }   
+    object:focus { outline:none; }
+    #flashContent { display:none; }
 </style>
+<script type="text/javascript" src="swfobject.js"></script>
+<script type="text/javascript">
+    var swfVersionStr = "11.1.0";
+    var xiSwfUrlStr = "";
+    var flashvars = {};
+    if (swfobject.getQueryParamValue("app") && swfobject.getQueryParamValue("app")) {
+ 		flashvars.app = swfobject.getQueryParamValue("app");
+	}
+    var params = {};
+    params.quality = "high";
+    params.bgcolor = "#ffffff";
+    params.allowscriptaccess = "sameDomain";
+    params.allowfullscreen = "true";
+    var attributes = {};
+    attributes.id = "TourDeFlex";
+    attributes.name = "TourDeFlex";
+    attributes.align = "middle";
+    swfobject.embedSWF(
+        "explorer.swf", "flashContent", 
+        "100%", "100%", 
+        swfVersionStr, xiSwfUrlStr, 
+        flashvars, params, attributes);
+    swfobject.createCSS("#flashContent", "display:block;text-align:left;");
+</script>
+<!-- Google Analytics -->
+<script type="text/javascript">
+	var _gaq = _gaq || [];
+	_gaq.push(['_setAccount', 'UA-37926454-1']);
+	_gaq.push(['_trackPageview']);
+
+	(function() {
+		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+	})();
+</script>
 </head>
 
 <body scroll='no'>
-<script language="JavaScript" type="text/javascript">
-<!--
-		AC_FL_RunContent(
-					"src", "explorer",
-					"width", "100%",
-					"height", "100%",
-					"align", "middle",
-					"id", "explorer",
-					"quality", "high",
-					"bgcolor", "#869ca7",
-					"name", "explorer",
-					"allowScriptAccess","sameDomain",
-					"type", "application/x-shockwave-flash",
-					"pluginspage", "http://www.adobe.com/go/getflashplayer"
-	);
-// -->
-</script>
-<noscript>
-	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
-			id="explorer" width="100%" height="100%"
-			codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
-			<param name="movie" value="explorer.swf" />
-			<param name="quality" value="high" />
-			<param name="bgcolor" value="#869ca7" />
-			<param name="allowScriptAccess" value="sameDomain" />
-			<embed src="explorer.swf" quality="high" bgcolor="#869ca7"
-				width="100%" height="100%" name="explorer" align="middle"
-				play="true"
-				loop="false"
-				quality="high"
-				allowScriptAccess="sameDomain"
-				type="application/x-shockwave-flash"
-				pluginspage="http://www.adobe.com/go/getflashplayer">
-			</embed>
-	</object>
-</noscript>
+<div id="flashContent">
+    <p>
+        To view this page ensure that Adobe Flash Player is installed. 
+    </p>
+    <script type="text/javascript"> 
+        var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://"); 
+        document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" 
+                        + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" ); 
+    </script> 
+</div>
 </body>
 </html>
diff --git a/TourDeFlex/TourDeFlex3/src/loaderPanel.mxml b/TourDeFlex/TourDeFlex3/src/loaderPanel.mxml
index d94bfed..bd09faf 100755
--- a/TourDeFlex/TourDeFlex3/src/loaderPanel.mxml
+++ b/TourDeFlex/TourDeFlex3/src/loaderPanel.mxml
@@ -17,9 +17,9 @@
       limitations under the License.

   -->

 

-<mx:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"

-		  horizontalAlign="center" headerHeight="10" dropShadowVisible="false">

-   <fx:Script>

+<mx:Box xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"

+		  width="100%" height="100%">

+    <fx:Script>

      <![CDATA[

      

 	public function loadApp(swfApp:String):void

@@ -30,6 +30,6 @@
     ]]>

   </fx:Script>

 

-<mx:SWFLoader id="myLoader" width="100%" height="100%" />

+<mx:SWFLoader id="myLoader" width="100%" height="100%"  horizontalAlign="center" verticalAlign="middle" />

 

-</mx:Panel>

+</mx:Box>

diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/BubbleChartExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/BubbleChartExample.mxml
index 09dd98c..b30452f 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/charts/BubbleChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/BubbleChartExample.mxml
@@ -17,8 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the BubbleChart control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
-    <fx:Script>
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
         <![CDATA[        
         import mx.collections.ArrayCollection;
 
@@ -34,11 +37,13 @@
 
 	<fx:Declarations>
 		<!-- Define custom color and line style for the bubbles. -->
-    	<mx:SolidColor id="sc1" color="blue" alpha=".3"/>
-    	<mx:SolidColorStroke id="stroke1" color="blue" weight="1"/>
+    	<mx:SolidColor id="sc1" alpha=".3"/>
+    	<mx:SolidColorStroke id="stroke1" weight="1"/>
 	</fx:Declarations>
 
-    <mx:Panel title="BubbleChart Control Example" height="100%" width="100%">
+    <mx:Panel title="BubbleChart Control Example"
+			  paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+			  height="100%" width="100%">
         <mx:BubbleChart id="bubblechart" 
             height="100%" width="100%"
             paddingRight="5" paddingLeft="5" 
@@ -51,8 +56,7 @@
                     yField="Expenses" 
                     radiusField="Amount"
                     fill="{sc1}"
-                    stroke="{stroke1}"
-                />
+                    stroke="{stroke1}" />
             </mx:series>            
         </mx:BubbleChart>            
         <mx:Legend dataProvider="{bubblechart}"/>            
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/CandlestickChartExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/CandlestickChartExample.mxml
index 68e7894..adcd8a7 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/charts/CandlestickChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/CandlestickChartExample.mxml
@@ -17,8 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the CandlestickChart control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
-    <fx:Script>
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
         <![CDATA[          
         import mx.collections.ArrayCollection;
 
@@ -49,15 +52,16 @@
 	    <mx:SolidColorStroke id="box" color="black" weight="1"/>
 	</fx:Declarations>
 
-    <mx:Panel title="CandlestickChart Control Example" height="100%" width="100%">
+    <mx:Panel title="CandlestickChart Control Example"
+			  paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+			  height="100%" width="100%">
         <mx:CandlestickChart id="candlestickchart" 
             height="100%" 
             width="100%"
             paddingRight="5" 
             paddingLeft="5" 
             showDataTips="true"
-            dataProvider="{expensesAC}"
-        >            
+            dataProvider="{expensesAC}">            
             <mx:verticalAxis>
                 <mx:LinearAxis id="vaxis" baseAtZero="false" title="Price"/>
             </mx:verticalAxis>
@@ -79,8 +83,7 @@
                     fill="{up}"
                     declineFill="{down}"
                     stroke="{wick}"
-                    boxStroke="{box}"
-                />
+                    boxStroke="{box}" />
             </mx:series>
         </mx:CandlestickChart>
     </mx:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/Column_BarChartExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/Column_BarChartExample.mxml
index 37d6a83..a48fe5e 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/charts/Column_BarChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/Column_BarChartExample.mxml
@@ -17,8 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the ColumnChart and BarChart controls. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
-    <fx:Script>
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
         <![CDATA[          
         import mx.collections.ArrayCollection;
 
@@ -42,16 +45,16 @@
 	    <mx:SolidColorStroke id="s3" color="0xFFCC66" weight="2"/>
 	</fx:Declarations>
 
-    <mx:Panel title="ColumnChart and BarChart Controls Example" 
-        height="100%" width="100%" layout="horizontal">
+    <mx:Panel title="ColumnChart and BarChart Controls Example"
+			  paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+			  layout="horizontal" height="100%" width="100%">
         <mx:ColumnChart id="column" 
             height="100%" 
             width="45%" 
             paddingLeft="5" 
             paddingRight="5" 
             showDataTips="true" 
-            dataProvider="{medalsAC}"
-        >                
+            dataProvider="{medalsAC}">                
             <mx:horizontalAxis>
                 <mx:CategoryAxis categoryField="Country"/>
             </mx:horizontalAxis>
@@ -62,22 +65,19 @@
                     yField="Gold" 
                     displayName="Gold"
                     fill="{sc1}"
-                    stroke="{s1}"
-                />
+                    stroke="{s1}" />
                 <mx:ColumnSeries 
                     xField="Country" 
                     yField="Silver" 
                     displayName="Silver"
                     fill="{sc2}"
-                    stroke="{s2}"
-                />
+                    stroke="{s2}" />
                 <mx:ColumnSeries 
                     xField="Country" 
                     yField="Bronze" 
                     displayName="Bronze"
                     fill="{sc3}"
-                    stroke="{s3}"
-                />
+                    stroke="{s3}" />
             </mx:series>
         </mx:ColumnChart>
 
@@ -97,22 +97,19 @@
                     xField="Gold" 
                     displayName="Gold"
                     fill="{sc1}"
-                    stroke="{s1}"
-                />
+                    stroke="{s1}" />
                 <mx:BarSeries 
                     yField="Country" 
                     xField="Silver" 
                     displayName="Silver"
                     fill="{sc2}"
-                    stroke="{s2}"
-                />
+                    stroke="{s2}" />
                 <mx:BarSeries 
                     yField="Country" 
                     xField="Bronze" 
                     displayName="Bronze"
                     fill="{sc3}"
-                    stroke="{s3}"
-                />
+                    stroke="{s3}" />
             </mx:series>
         </mx:BarChart>
 
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/DateTimeAxisExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/DateTimeAxisExample.mxml
index 11c28f9..92cc759 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/charts/DateTimeAxisExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/DateTimeAxisExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the DateTimeAxis class. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
 
             import mx.collections.ArrayCollection;
@@ -45,8 +47,10 @@
         ]]>
     </fx:Script>
 
-    <mx:Panel title="DateTimeAxis Example" height="100%" width="100%">
-    
+    <mx:Panel title="DateTimeAxis Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
         <mx:LineChart id="mychart" height="100%" width="100%"
             paddingRight="5" paddingLeft="5" 
             showDataTips="true" dataProvider="{stockDataAC}">
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/GridLinesExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/GridLinesExample.mxml
index 9a8765e..e6d5cdc 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/charts/GridLinesExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/GridLinesExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the GridLines class. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
 
         import mx.collections.ArrayCollection;
@@ -34,8 +36,9 @@
         ]]>
     </fx:Script>
 
-    <mx:Panel title="GridLines Example" height="100%" width="100%">
-
+    <mx:Panel title="GridLines Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
         <mx:LineChart id="linechart" height="100%" width="100%"
             paddingLeft="5" paddingRight="5" 
             showDataTips="true" dataProvider="{expensesAC}">
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/HLOCChartExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/HLOCChartExample.mxml
index 0e6c1de..6304111 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/charts/HLOCChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/HLOCChartExample.mxml
@@ -17,8 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the HLOCChart control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
-    <fx:Script>
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
         <![CDATA[          
         import mx.collections.ArrayCollection;
 
@@ -42,7 +45,9 @@
    		<mx:SolidColorStroke id="s1" color="0x000000" weight="5" joints="bevel" caps="square"/>
 	</fx:Declarations>
 
-    <mx:Panel title="HLOCChart Control Example" height="100%" width="100%">
+    <mx:Panel title="HLOCChart Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
         <mx:HLOCChart id="hlocchart" height="100%" width="100%"
             paddingRight="5" paddingLeft="5" 
             showDataTips="true" dataProvider="{stockDataAC}">
@@ -69,8 +74,7 @@
                     openTickStroke="{s1}"
                     closeTickStroke="{s1}"
                     openTickLength="7"
-                    closeTickLength="7"
-                />
+                    closeTickLength="7" />
             </mx:series>
         </mx:HLOCChart>
     </mx:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/Line_AreaChartExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/Line_AreaChartExample.mxml
index afebf63..5058f29 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/charts/Line_AreaChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/Line_AreaChartExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the LineChart and AreaChart controls. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
 
         import mx.collections.ArrayCollection;
@@ -36,18 +38,20 @@
 
 	<fx:Declarations>
 	    <!-- Define custom colors for use as fills in the AreaChart control. -->
-	    <mx:SolidColor id="sc1" color="blue" alpha=".3"/>
+	    <mx:SolidColor id="sc1" alpha=".3"/>
 	    <mx:SolidColor id="sc2" color="red" alpha=".3"/>
 	    <mx:SolidColor id="sc3" color="green" alpha=".3"/>
 	
 	    <!-- Define custom Strokes. -->
-	    <mx:SolidColorStroke id = "s1" color="blue" weight="2"/>
+	    <mx:SolidColorStroke id = "s1" weight="2"/>
 	    <mx:SolidColorStroke id = "s2" color="red" weight="2"/>
 	    <mx:SolidColorStroke id = "s3" color="green" weight="2"/>
 	</fx:Declarations>
 
     <mx:Panel title="LineChart and AreaChart Controls Example" 
-        height="100%" width="100%" layout="horizontal">
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				layout="horizontal" height="100%" width="100%">
+
 
         <mx:LineChart id="linechart" height="100%" width="45%"
             paddingLeft="5" paddingRight="5" 
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/LogAxisExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/LogAxisExample.mxml
index 3982d8f..12a7ebd 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/charts/LogAxisExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/LogAxisExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the LogAxis class. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
 
         import mx.collections.ArrayCollection;
@@ -34,7 +36,9 @@
         ]]>
     </fx:Script>
 
-    <mx:Panel title="LogAxis Example" height="100%" width="100%">
+    <mx:Panel title="LogAxis Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:LineChart id="linechart" height="100%" width="100%"
             paddingLeft="5" paddingRight="5" 
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/PieChartExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/PieChartExample.mxml
index 245a89d..b359ced 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/charts/PieChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/PieChartExample.mxml
@@ -17,8 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the PieChart control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
-    <fx:Script>
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
         <![CDATA[          
         import mx.collections.ArrayCollection;
 
@@ -37,7 +40,7 @@
 
 	<fx:Declarations>
 	    <!-- Define custom colors for use as pie wedge fills. -->
-	    <mx:SolidColor id="sc1" color="blue" alpha=".6"/>
+	    <mx:SolidColor id="sc1" alpha=".6"/>
 	    <mx:SolidColor id="sc2" color="red" alpha=".6"/>
 	    <mx:SolidColor id="sc3" color="0x663300" alpha=".6"/>
 	
@@ -51,17 +54,16 @@
 	    <mx:SolidColorStroke id="pieborder" color="0x000000" weight="2" alpha=".5"/>
 	</fx:Declarations>
 
-    <mx:Panel title="Olympics 2004 Medals Tally Panel" height="100%" width="100%">
+    <mx:Panel title="Olympics 2004 Medals Tally Panel"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
         <mx:PieChart id="chart" 
             height="100%" 
             width="100%"
             paddingRight="5" 
             paddingLeft="5" 
             showDataTips="true" 
-            dataProvider="{medalsAC}"
-        >          
-            <!--
-            -->
+            dataProvider="{medalsAC}">          
             <mx:series>
                 <mx:PieSeries 
                     nameField="Country"
@@ -71,8 +73,7 @@
                     calloutStroke="{callouts}" 
                     radialStroke="{radial}" 
                     stroke="{pieborder}"
-                    fills="{[sc1, sc2, sc3]}"
-                >
+                    fills="{[sc1, sc2, sc3]}">
                     <!-- Clear the drop shadow filters from the chart. -->
                     <mx:filters>
                         <fx:Array/>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/PlotChartExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/PlotChartExample.mxml
index f1d7435..59381e1 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/charts/PlotChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/PlotChartExample.mxml
@@ -17,8 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the PlotChart control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
-    <fx:Script>
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
         <![CDATA[
         import mx.collections.ArrayCollection;
 
@@ -32,47 +35,45 @@
 
 	<fx:Declarations>
 	    <!-- Define custom colors for use as plot point fills. -->
-	    <mx:SolidColor id="sc1" color="blue" alpha=".3"/>
+	    <mx:SolidColor id="sc1" alpha=".3"/>
 	    <mx:SolidColor id="sc2" color="red" alpha=".3"/>
 	    <mx:SolidColor id="sc3" color="green" alpha=".3"/>
 	
 	    <!-- Define custom Strokes. -->
-	    <mx:SolidColorStroke id="s1" color="blue" weight="1"/>
+	    <mx:SolidColorStroke id="s1" weight="1"/>
 	    <mx:SolidColorStroke id="s2" color="red" weight="1"/>
 	    <mx:SolidColorStroke id="s3" color="green" weight="1"/>
 	</fx:Declarations>
 
-    <mx:Panel title="PlotChart Control Example" height="100%" width="100%">
+    <mx:Panel title="PlotChart Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
         <mx:PlotChart id="plot" 
             height="100%" 
             width="100%"
             paddingLeft="5" 
             paddingRight="5" 
             showDataTips="true" 
-            dataProvider="{expensesAC}"
-        >                
+            dataProvider="{expensesAC}">                
             <mx:series>
                 <mx:PlotSeries
                     xField="Expenses"
                     yField="Profit"
                     displayName="Plot 1"
                     fill="{sc1}"
-                    stroke="{s1}"
-                />
+                    stroke="{s1}" />
                 <mx:PlotSeries
                     xField="Amount"
                     yField="Expenses"
                     displayName="Plot 2"
                     fill="{sc2}"
-                    stroke="{s2}"
-                />
+                    stroke="{s2}" />
                 <mx:PlotSeries
                     xField="Profit"
                     yField="Amount"
                     displayName="Plot 3"
                     fill="{sc3}"
-                    stroke="{s3}"
-                />
+                    stroke="{s3}" />
             </mx:series>
         </mx:PlotChart>
         <mx:Legend dataProvider="{plot}"/>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesInterpolateExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesInterpolateExample.mxml
index 13ce221..48144df 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesInterpolateExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesInterpolateExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the CandlestickChart control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
           
         import mx.collections.ArrayCollection;
@@ -56,8 +58,9 @@
     	<mx:SeriesInterpolate id="interpolateIn" duration="1000"/>
 	</fx:Declarations>
 	
-    <mx:Panel title="CandlestickChart Control Example" height="100%" width="100%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="CandlestickChart Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:CandlestickChart id="candlestickchart" height="100%" width="100%"
             paddingRight="5" paddingLeft="5" 
@@ -83,14 +86,14 @@
             </mx:series>
         </mx:CandlestickChart>
         
-        <mx:Label width="100%" color="blue"
+        <mx:Label width="100%"
             text="Choose a company to view recent stock data."/>
 
         <mx:HBox>
             <mx:RadioButton groupName="stocks" label="View Company A"
-                selected="true" click="candlestickchart.dataProvider=companyAAC;"/>
+                selected="true" click="candlestickchart.dataProvider=companyAAC"/>
             <mx:RadioButton groupName="stocks" label="View Company B"
-                click="candlestickchart.dataProvider=companyBAC;"/>
+                click="candlestickchart.dataProvider=companyBAC"/>
         </mx:HBox>
     </mx:Panel>
 </mx:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesSlideExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesSlideExample.mxml
index 09335b9..b1865f2 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesSlideExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesSlideExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the CandlestickChart control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
           
         import mx.collections.ArrayCollection;
@@ -57,8 +59,9 @@
     	<mx:SeriesSlide id="slideOut" duration="1000" direction="down"/>
 	</fx:Declarations>
 
-    <mx:Panel title="CandlestickChart Control Example" height="100%" width="100%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="CandlestickChart Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:CandlestickChart id="candlestickchart" height="100%" width="100%"
             paddingRight="5" paddingLeft="5" 
@@ -85,14 +88,14 @@
             </mx:series>
         </mx:CandlestickChart>
         
-        <mx:Label width="100%" color="blue"
+        <mx:Label width="100%"
             text="Choose a company to view recent stock data."/>
 
         <mx:HBox>
             <mx:RadioButton groupName="stocks" label="View Company A"
-                selected="true" click="candlestickchart.dataProvider=companyAAC;"/>
+                selected="true" click="candlestickchart.dataProvider=companyAAC"/>
             <mx:RadioButton groupName="stocks" label="View Company B"
-                click="candlestickchart.dataProvider=companyBAC;"/>
+                click="candlestickchart.dataProvider=companyBAC"/>
         </mx:HBox>
     </mx:Panel>
 </mx:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesZoomExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesZoomExample.mxml
index b68ca56..6df4877 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesZoomExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesZoomExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the CandlestickChart control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
           
         import mx.collections.ArrayCollection;
@@ -57,8 +59,9 @@
     	<mx:SeriesZoom id="zoomOut" duration="1000"/>
 	</fx:Declarations>
 
-    <mx:Panel title="CandlestickChart Control Example" height="100%" width="100%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="CandlestickChart Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:CandlestickChart id="candlestickchart" height="100%" width="100%"
             paddingRight="5" paddingLeft="5" 
@@ -85,14 +88,14 @@
             </mx:series>
         </mx:CandlestickChart>
         
-        <mx:Label width="100%" color="blue"
+        <mx:Label width="100%"
             text="Choose a company to view recent stock data."/>
 
         <mx:HBox>
             <mx:RadioButton groupName="stocks" label="View Company A"
-                selected="true" click="candlestickchart.dataProvider=companyAAC;"/>
+                selected="true" click="candlestickchart.dataProvider=companyAAC"/>
             <mx:RadioButton groupName="stocks" label="View Company B"
-                click="candlestickchart.dataProvider=companyBAC;"/>
+                click="candlestickchart.dataProvider=companyBAC"/>
         </mx:HBox>
     </mx:Panel>
 </mx:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/AccordionExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/AccordionExample.mxml
index 185f7a4..5abf17c 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/containers/AccordionExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/AccordionExample.mxml
@@ -17,12 +17,15 @@
   -->
 
 <!-- Simple example to demonstrate the Accordion layout container. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <mx:Panel title="Accordion Container Example" height="90%" width="90%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="Accordion Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Label width="100%" color="blue"
+        <mx:Label width="100%"
             text="Select an Accordion navigator button to change the panel."/>
 
         <mx:Accordion id="accordion" width="100%" height="100%">
@@ -40,13 +43,13 @@
             </mx:VBox>
         </mx:Accordion>
 
-        <mx:Label width="100%" color="blue"
+        <mx:Label width="100%"
             text="Programmatically select the panel using a Button control."/>
 
         <mx:HBox>
-            <mx:Button label="Select Panel 1" click="accordion.selectedIndex=0;"/>
-            <mx:Button label="Select Panel 2" click="accordion.selectedIndex=1;"/>
-            <mx:Button label="Select Panel 3" click="accordion.selectedIndex=2;"/>
+            <mx:Button label="Select Panel 1" click="accordion.selectedIndex=0"/>
+            <mx:Button label="Select Panel 2" click="accordion.selectedIndex=1"/>
+            <mx:Button label="Select Panel 3" click="accordion.selectedIndex=2"/>
         </mx:HBox>
     
     </mx:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/DividedBoxExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/DividedBoxExample.mxml
index b05004b..40ba5f7 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/containers/DividedBoxExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/DividedBoxExample.mxml
@@ -17,12 +17,15 @@
   -->
 
 <!-- Simple example to demonstrate the DividedBox layout container. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <mx:Panel title="DividedBox Container Example" height="95%" width="95%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="DividedBox Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Text width="100%" color="blue"
+        <mx:Text width="100%"
             text="A horizontal DividedBox container. Drag the divider side to side to resize the children."/>
 
         <mx:DividedBox direction="horizontal" width="100%" height="100%">
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/FormExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/FormExample.mxml
index 37b2363..70b2c9d 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/containers/FormExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/FormExample.mxml
@@ -17,7 +17,9 @@
   -->
 
 <!-- Simple example to demonstrate Form layout container. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
 	<fx:Declarations>
 	    <fx:Model id="checkModel">
@@ -42,10 +44,11 @@
 	    <mx:ZipCodeValidator source="{zip}" property="text"/>
 	</fx:Declarations>
 	
-    <mx:Panel title="Form Container Example" height="75%" width="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="Form Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Text width="100%" color="blue"
+        <mx:Text width="100%"
             text="Moving from one form field to another triggers the validator."/>
 
         <mx:Form width="100%" height="100%">
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/GridLayoutExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/GridLayoutExample.mxml
index b62f859..8fe6910 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/containers/GridLayoutExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/GridLayoutExample.mxml
@@ -17,12 +17,15 @@
   -->
 
 <!-- Simple example to demonstrate the Grid layout container.-->
-<mx:Application borderStyle="none" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
-    
-    <mx:Panel title="Grid Container Example" height="75%" width="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-        <mx:Label width="100%" color="blue" 
+    <mx:Panel title="Grid Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label width="100%" 
             text="A 3 by 3 Grid container of Button controls."/>
 
         <mx:Grid>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/HBoxExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/HBoxExample.mxml
index b8e1eed..770b16f 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/containers/HBoxExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/HBoxExample.mxml
@@ -17,12 +17,15 @@
   -->
 
 <!-- Simple example to demonstrate the HBox layout container. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <mx:Panel title="HBox Container Example" height="75%" width="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="HBox Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-       <mx:Label width="100%" color="blue"
+       <mx:Label width="100%"
            text="An HBox container with horizontally aligned children."/>
            
        <mx:HBox borderStyle="solid" paddingTop="10" paddingBottom="10" 
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/HDividedBoxExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/HDividedBoxExample.mxml
index d5e61dd..b3e2b78 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/containers/HDividedBoxExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/HDividedBoxExample.mxml
@@ -17,12 +17,15 @@
   -->
 
 <!-- Simple example to demonstrate the HDividedBox layout -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <mx:Panel title="HDividedBox Container Example" width="90%" height="90%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="HDividedBox Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Text width="100%" color="blue"
+        <mx:Text width="100%"
             text="Drag the divider side to side to resize the children."/>
 
         <mx:HDividedBox width="100%" height="100%">
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleApplicationControlBarExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleApplicationControlBarExample.mxml
index 62bac5d..b04e80a 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleApplicationControlBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleApplicationControlBarExample.mxml
@@ -18,11 +18,12 @@
 
 <!-- Simple example to demonstrate the ApplicationControlBar container. -->
 <mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
-    paddingLeft="10" paddingRight="10" paddingBottom="10" 
-    backgroundColor="0xCCCCCC">
+				borderStyle="solid"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
     <mx:ApplicationControlBar dock="true" paddingTop="0" paddingBottom="0">
-        <mx:Label text="Docked" color="blue"/>
+        <mx:Label text="Docked"/>
 
         <mx:MenuBar id="myMenuBar" labelField="@label">
             <fx:XMLList>
@@ -45,7 +46,7 @@
     <mx:Spacer height="100%" />
 
     <mx:ApplicationControlBar width="80%">
-        <mx:Label text="Normal" color="blue"/>
+        <mx:Label text="Normal"/>
         <mx:Label text="Search:" />
         <mx:TextInput width="100%" maxWidth="200" />
         <mx:Spacer width="100%" />
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleBoxExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleBoxExample.mxml
index 884c16b..7336abc 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleBoxExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleBoxExample.mxml
@@ -17,12 +17,15 @@
   -->
 
 <!-- Simple example to demonstrate the Box layout container. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <mx:Panel title="Box Container Example" height="75%" width="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="Box Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Label width="100%" color="blue"
+        <mx:Label width="100%"
             text="A Box container with vertically aligned children."/>
         <mx:Box direction="vertical" borderStyle="solid" 
                 paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
@@ -32,7 +35,7 @@
             <mx:ComboBox/>
         </mx:Box>
 
-        <mx:Label width="100%" color="blue"
+        <mx:Label width="100%"
             text="A Box container with horizontally aligned children."/>
         <mx:Box direction="horizontal" borderStyle="solid" 
                 paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleCanvasExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleCanvasExample.mxml
index 347d7cb..68fead3 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleCanvasExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleCanvasExample.mxml
@@ -17,12 +17,15 @@
   -->
 
 <!-- Simple example to demonstrate the Canvas layout container.-->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <mx:Panel title="Canvas Container Example" height="95%" width="95%" 
-        paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">
+    <mx:Panel title="Canvas Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Label width="100%" color="blue" 
+        <mx:Label width="100%" 
             text="Use absolute positioning to place the children of a Canvas container."/>
 
         <mx:Canvas borderStyle="solid" height="200" width="100%">
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleControlBarExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleControlBarExample.mxml
index 7f307e0..0316daf 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleControlBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleControlBarExample.mxml
@@ -17,15 +17,18 @@
   -->
 
 <!-- Simple example to demonstrate the ControlBar container. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <mx:Panel title="ControlBar Container Example"  width="75%" height="75%" 
-        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+    <mx:Panel title="ControlBar Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:HBox width="100%" height="100%">
             <!-- Area for your catalog. -->
             <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')" width="50%" height="100%"/>
-			<mx:Text width="50%" color="blue"
+			<mx:Text width="50%"
                 text="The ControlBar container in this example adds a Label, NumericStepper, Spacer, and Button control to the bottom of the Panel container."/>
         </mx:HBox>
 
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/SimplePanelExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/SimplePanelExample.mxml
index 7b83f63..645c4ba 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/containers/SimplePanelExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/SimplePanelExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate Panel layout container. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
        
             private function showProperties():void  {
@@ -31,15 +33,15 @@
         ]]>
     </fx:Script>
 
-    <mx:Panel id="panel" title="Panel Container Example" status="Active" 
-            height="75%" width="75%" 
-            paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel id="panel" title="Panel Container Example" status="Active"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Label width="100%" color="blue"
+        <mx:Label width="100%"
             text="Click the Button control to see panel properties."/>
 
         <mx:TextArea id="panelPropertyArea" width="100%" height="100%"/>
-        <mx:Button label="Click to view Panel properties" click="showProperties();"/>
+        <mx:Button label="Click to view Panel properties" click="showProperties()"/>
 
     </mx:Panel>
 </mx:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleTitleWindowExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleTitleWindowExample.mxml
index aa9cd40..2616d8f 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleTitleWindowExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleTitleWindowExample.mxml
@@ -23,7 +23,7 @@
 <mx:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
     title="Title Window" x="168" y="86">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[       
             import mx.managers.PopUpManager;
             import mx.controls.Text;
@@ -45,8 +45,8 @@
     </mx:HBox>
 
     <mx:HBox>
-        <mx:Button label="OK" click="returnName();"/>
-        <mx:Button label="Cancel" click="PopUpManager.removePopUp(this);"/>
+        <mx:Button label="OK" click="returnName()"/>
+        <mx:Button label="Cancel" click="PopUpManager.removePopUp(this)"/>
     </mx:HBox>
 
 </mx:TitleWindow>  
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/TabNavigatorExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/TabNavigatorExample.mxml
index 49c3a2e..411964a 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/containers/TabNavigatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/TabNavigatorExample.mxml
@@ -17,12 +17,15 @@
   -->
 
 <!-- Simple example to demonstrate the TabNavigator layout container. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <mx:Panel title="TabNavigator Container Example" height="90%" width="90%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="TabNavigator Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Label width="100%" color="blue"
+        <mx:Label width="100%"
             text="Select the tabs to change the panel."/>
 
         <mx:TabNavigator id="tn"  width="100%" height="100%">
@@ -41,7 +44,7 @@
             </mx:VBox>
         </mx:TabNavigator>
 
-        <mx:Label width="100%" color="blue"
+        <mx:Label width="100%"
             text="Programmatically select the panel using a Button control."/>
 
         <mx:HBox>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/TileLayoutExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/TileLayoutExample.mxml
index 3f7329a..f492ba0 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/containers/TileLayoutExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/TileLayoutExample.mxml
@@ -17,12 +17,15 @@
   -->
 
 <!-- Simple example to demonstrate the Tile layout container. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <mx:Panel title="Tile Container Example" height="75%" width="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="Tile Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Label width="100%" color="blue"
+        <mx:Label width="100%"
             text="A Tile container lays out its children in a grid of equal-sized cells."/>
 
         <mx:Tile direction="horizontal" borderStyle="inset" 
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/TitleWindowApp.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/TitleWindowApp.mxml
index fbdefcd..197773d 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/containers/TitleWindowApp.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/TitleWindowApp.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Main application to demonstrate TitleWindow layout container. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
        
             import mx.managers.PopUpManager;
@@ -51,11 +53,12 @@
         ]]>
     </fx:Script>
 
-    <mx:Panel title="TitleWindow Container Example" height="75%" width="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="TitleWindow Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:Button id="myButton" label="Click to open the TitleWindow container" 
-            click="showWindow();"/>
+            click="showWindow()"/>
         
         <mx:Text id="returnedName" text="" width="100%"/>
 
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/VBoxExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/VBoxExample.mxml
index b45dcfd..c58ee45 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/containers/VBoxExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/VBoxExample.mxml
@@ -17,12 +17,15 @@
   -->
 
 <!-- Simple example to demonstrate the VBox layout container. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <mx:Panel title="VBox Container Example" height="75%" width="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="VBox Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-       <mx:Label width="100%" color="blue" 
+       <mx:Label width="100%" 
            text="A VBox container with vertically aligned children."/>
            
        <mx:VBox borderStyle="solid" paddingTop="10" paddingBottom="10" 
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/VDividedBoxExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/VDividedBoxExample.mxml
index de7701a..615c43f 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/containers/VDividedBoxExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/VDividedBoxExample.mxml
@@ -17,12 +17,15 @@
   -->
 
 <!-- Simple example to demonstrate the VDividedBox layout -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <mx:Panel title="VDividedBox Container Example" width="90%" height="90%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="VDividedBox Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Text width="100%" color="blue"
+        <mx:Text width="100%"
             text="Drag the divider up and down to resize the children."/>
 
         <mx:VDividedBox width="100%" height="100%">
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/ViewStackExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/ViewStackExample.mxml
index 26e1be4..abe893a 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/containers/ViewStackExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/ViewStackExample.mxml
@@ -17,23 +17,26 @@
   -->
 
 <!-- Simple example to demonstrate the ViewStack layout container. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-     <mx:Panel title="ViewStack Container Example" height="95%" width="95%" 
-         paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+     <mx:Panel title="ViewStack Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Text width="100%" color="blue"
+        <mx:Text width="100%"
             text="Use the Button controls to change panels of the ViewStack container."/>
 
         <mx:HBox borderStyle="solid" width="100%"
             paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">
             
             <mx:Button id="searchButton" label="Search Panel"
-                click="myViewStack.selectedChild=search;"/>
+                click="myViewStack.selectedChild=search"/>
             <mx:Button id="cInfoButton" label="Customer Info Panel"
-                click="myViewStack.selectedChild=custInfo;"/>
+                click="myViewStack.selectedChild=custInfo"/>
             <mx:Button id="aInfoButton" label="Account Panel"
-                click="myViewStack.selectedChild=accountInfo;"/>
+                click="myViewStack.selectedChild=accountInfo"/>
         </mx:HBox>
 
         <!-- Define the ViewStack and the three child containers and have it
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/AdvancedDataGridExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/AdvancedDataGridExample.mxml
index ab61096..29a1ca4 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/AdvancedDataGridExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/AdvancedDataGridExample.mxml
@@ -16,9 +16,11 @@
       limitations under the License.
   -->
 
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
             import mx.collections.ArrayCollection;
                   
@@ -45,12 +47,12 @@
     </fx:Script>
 
     <mx:Panel title="AdvancedDataGrid Control Example"
-        height="75%" width="75%" layout="horizontal"
-        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:AdvancedDataGrid id="myADG" 
             width="100%" height="100%" 
-            initialize="gc.refresh();">        
+            initialize="gc.refresh()">        
             <mx:dataProvider>
                 <mx:GroupingCollection2 id="gc" source="{dpFlat}">
                     <mx:grouping>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/ButtonBarExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/ButtonBarExample.mxml
index e3725cf..5dddd37 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/ButtonBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/ButtonBarExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the ButtonBar control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
 
             import mx.events.ItemClickEvent;
@@ -33,15 +35,16 @@
         ]]>
     </fx:Script>
 
-    <mx:Panel title="ButtonBar Control Example" height="75%" width="75%"
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="ButtonBar Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-       <mx:Label width="100%" color="blue"
+       <mx:Label width="100%"
            text="Select a button in the ButtonBar control."/>
 
         <mx:TextArea id="myTA" width="100%" height="100%"/>
 
-        <mx:ButtonBar itemClick="clickHandler(event);">
+        <mx:ButtonBar itemClick="clickHandler(event)">
             <mx:dataProvider>
                 <fx:Array>
                     <fx:String>Flex SDK</fx:String>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/ButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/ButtonExample.mxml
index 0ef5c63..f3cbc4d 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/ButtonExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/ButtonExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the Button control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
 
             import flash.events.Event;
@@ -33,27 +35,27 @@
       ]]>
     </fx:Script>
 
-    <mx:Panel title="Button Control Example"
-        height="75%" width="75%" layout="horizontal"
-        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
-
-        <mx:VBox>
-            <mx:Label width="100%" color="blue"
+    <mx:Panel title="Button Control Example" layout="horizontal"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+		
+		<mx:VBox>
+            <mx:Label width="100%"
                 text="Select a Button control."/>
 
              <!-- The button can contain an image, as in the "Button with Icon" button -->
              <!-- The button can contain an image, as in the "Button with Icon" button -->
 			 <mx:Button id="iconButton" icon="@Embed('assets/ApacheFlexIcon.png')" label="Button with Icon"
-			     paddingLeft="12" paddingRight="18" labelPlacement="right" color="#993300" click="printMessage(event);"/>
+			     paddingLeft="12" paddingRight="18" labelPlacement="right" color="#993300" click="printMessage(event)"/>
 
              <!-- The size of the button and the label attributes can be customized -->
              <mx:Button label="Customized Button" color="#993300" toggle="true" selected="true"
                  textAlign="left" fontStyle="italic" fontSize="13" width="{iconButton.width}"
-                 click="printMessage(event);"/>
+                 click="printMessage(event)"/>
 
              <!-- By default, the look and feel of the customized button is
                  similar to the Default Button.  -->
-             <mx:Button label="Default Button" click="printMessage(event);"/>
+             <mx:Button label="Default Button" click="printMessage(event)"/>
         </mx:VBox>
 
          <mx:TextArea id="message" text="" editable="false" height="100%" width="100%"
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/CheckBoxExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/CheckBoxExample.mxml
index 558039b..a6810df 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/CheckBoxExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/CheckBoxExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the CheckBox control -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
 
            import mx.controls.Alert;         
@@ -55,9 +57,9 @@
         ]]>
     </fx:Script>
 
-    <mx:Panel title="CheckBox Control Example" 
-        height="75%" width="75%" layout="horizontal"
-        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+    <mx:Panel title="CheckBox Control Example" layout="horizontal"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:VBox>
             <mx:CheckBox id="milkCB" label="milk" click="modifyCart()"/>
@@ -70,7 +72,7 @@
             <mx:TextArea id="cartItems" width="300" height="50" verticalScrollPolicy="off"/>
             <!-- Event handler sendMessages() is used to handle event click -->
             <mx:CheckBox id="couponCB" label="Send me coupons for items in my cart"
-                click="sendMessage()" selected="true" color="blue"/>
+                click="sendMessage()" selected="true"/>
         </mx:VBox>
     </mx:Panel>
 </mx:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/ColorPickerExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/ColorPickerExample.mxml
index 435c332..6a454cf 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/ColorPickerExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/ColorPickerExample.mxml
@@ -17,16 +17,19 @@
   -->
 
 <!-- Simple example to demonstrate the ColorPicker control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <mx:Panel title="ColorPicker Control Example" height="75%" width="75%" 
-        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+    <mx:Panel title="ColorPicker Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
         
-        <mx:Label width="100%" color="blue"
+        <mx:Label width="100%"
            text="Select the background color of the VBox container."/>
         <mx:ColorPicker id="cp" showTextField="true" selectedColor="0xFFFFFF"/>
     
         <mx:VBox width="100%" height="100%" backgroundColor="{cp.selectedColor}" borderStyle="solid"/>
-        <mx:Label color="blue" text="selectedColor: 0x{cp.selectedColor.toString(16)}"/> 
+        <mx:Label text="selectedColor: 0x{cp.selectedColor.toString(16)}"/> 
     </mx:Panel>
 </mx:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/DateChooserExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/DateChooserExample.mxml
index 5790534..a6c3040 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/DateChooserExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/DateChooserExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate DateChooser control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
 
             // Event handler function to write the selected
@@ -38,12 +40,13 @@
     	<mx:DateFormatter id="df"/>
 	</fx:Declarations>
     
-    <mx:Panel title="DateChooser Control Example" height="75%" width="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10">
+    <mx:Panel title="DateChooser Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Label width="100%" color="blue"
+        <mx:Label width="100%"
             text="Select a date in the DateChooser control."/>
-        <mx:Label width="100%" color="blue"
+        <mx:Label width="100%"
             text="Select it again while holding down the Control key to clear it."/>
             
         <mx:HBox horizontalGap="25">
@@ -51,14 +54,14 @@
               <mx:Label text="Simple DateChooser control."/>
               <mx:DateChooser id="dateChooser1" yearNavigationEnabled="true"    
                   change="displayDate(DateChooser(event.target).selectedDate)"/>
-              <mx:Label id="selection"  color="blue" text="Date selected:"/>
+              <mx:Label id="selection"  text="Date selected:"/>
           </mx:VBox>
 
           <mx:VBox>
               <mx:Label text="Disable dates before June 1, 2006."/>
               <mx:DateChooser id="dateChooser2" yearNavigationEnabled="true"
                   disabledRanges="{[ {rangeEnd: new Date(2006, 5, 1)} ]}"/>
-              <mx:Label  color="blue" text="Date selected: {df.format(dateChooser2.selectedDate)}"/>
+              <mx:Label  text="Date selected: {df.format(dateChooser2.selectedDate)}"/>
           </mx:VBox>
         </mx:HBox>
         
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/DateFieldExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/DateFieldExample.mxml
index 8e99773..0cacfa0 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/DateFieldExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/DateFieldExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the DateField control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
       <![CDATA[
 
          // Event handler for the DateField change event.
@@ -37,21 +39,22 @@
  		<mx:DateFormatter id="df"/>
 	</fx:Declarations>
 
-    <mx:Panel title="DateField Control Example" height="75%" width="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10">
+    <mx:Panel title="DateField Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Label width="100%"  color="blue"
+        <mx:Label width="100%" 
             text="Select a date in the DateField control. Select it again to clear it."/>
 
         <mx:Label text="Basic DateField:"/>
         <mx:DateField id="dateField1" yearNavigationEnabled="true" 
             change="dateChanged(DateField(event.target).selectedDate)" />
-        <mx:Label id="selection"  color="blue" text="Date selected:" />
+        <mx:Label id="selection"  text="Date selected:" />
 
         <mx:Label text="Disable dates on or before June 1, 2006."/>
         <mx:DateField id="dateField2" yearNavigationEnabled="true" 
             disabledRanges="{[ {rangeEnd: new Date(2006, 5, 1)} ]}" />
-        <mx:Label  color="blue" text="Date selected: {df.format(dateField2.selectedDate)}"/>
+        <mx:Label  text="Date selected: {df.format(dateField2.selectedDate)}"/>
 
     </mx:Panel>
 </mx:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/HScrollBarExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/HScrollBarExample.mxml
index 6434919..629c8c5 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/HScrollBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/HScrollBarExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the HScrollBar control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
- 
-     <fx:Script>
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+      <fx:Script>
         <![CDATA[
     
             import mx.events.ScrollEvent;
@@ -37,19 +39,20 @@
         ]]>
     </fx:Script> 
   
-    <mx:Panel id="panel" title="HScrollBar Control Example" height="75%" width="75%" 
-        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+    <mx:Panel id="panel" title="HScrollBar Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
         
-        <mx:Label width="100%" color="blue"
+        <mx:Label width="100%"
            text="Click on the scroll bar to view its properties."/> 
         
         <mx:HScrollBar id="bar" width="100%" 
             minScrollPosition="0" maxScrollPosition="{panel.width - 20}" 
             lineScrollSize="50" pageScrollSize="100" 
-            scroll="myScroll(event);" 
+            scroll="myScroll(event)" 
             repeatDelay="1000" repeatInterval="500" />
           
-        <mx:TextArea height="100%" width="100%" id="showPosition" color="blue" />
+        <mx:TextArea height="100%" width="100%" id="showPosition" />
   
     </mx:Panel>  
 </mx:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/HorizontalListExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/HorizontalListExample.mxml
index 71328fa..91e0593 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/HorizontalListExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/HorizontalListExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the HorizontalList Control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
              
              [Bindable]
@@ -44,10 +46,11 @@
         ]]>
     </fx:Script>
 
-    <mx:Panel title="HorizontalList Control Example" height="75%" width="75%" 
-        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+    <mx:Panel title="HorizontalList Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Label width="100%" color="blue"
+        <mx:Label width="100%"
            text="A HorizontalList control displays items in a single row."/>
 
         <mx:HorizontalList id="CameraSelection" height="250" columnCount="3" columnWidth="125">
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/LabelExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/LabelExample.mxml
index 4125693..203ddc7 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/LabelExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/LabelExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the Label control -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
       
             private var htmlData:String="<br>This label displays <b>bold</b> and <i>italic</i> HTML-formatted text.";
@@ -36,12 +38,13 @@
         ]]>
     </fx:Script>
 
-  <mx:Panel title="Label Control Example" height="75%" width="75%" 
-      paddingTop="10" paddingLeft="10">
+  <mx:Panel title="Label Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
     
       <mx:Label id="simpleLabel" text="This Label displays plain text."/>
-      <mx:Button id="Display" label="Click to display HTML Text" click="displayHTML();"/>
-      <mx:Button id="Clear" label="Click to display plain text" click="displayText();"/>
+      <mx:Button id="Display" label="Click to display HTML Text" click="displayHTML()"/>
+      <mx:Button id="Clear" label="Click to display plain text" click="displayText()"/>
   
   </mx:Panel>
 </mx:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/LinkBarExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/LinkBarExample.mxml
index aa134bc..79447c4 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/LinkBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/LinkBarExample.mxml
@@ -17,11 +17,13 @@
   -->
 
 <!-- Simple example to demonstrate the LinkBar control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
- 
-    <mx:Panel title="LinkBar Control Example" 
-        height="75%" width="75%" horizontalAlign="center"
-        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="LinkBar Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
    
         <mx:Text width="100%" 
             text="Select a link in the LinkBar control to set the active child of the ViewStack container."/>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/LinkButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/LinkButtonExample.mxml
index ea95b38..e572386 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/LinkButtonExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/LinkButtonExample.mxml
@@ -17,21 +17,23 @@
   -->
 
 <!-- Simple example to demonstrate the LinkButton control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         import mx.controls.Alert;
     </fx:Script>
 
-    <mx:Panel title="LinkButton Control Example" 
-        height="75%" width="75%" horizontalAlign="center"
-        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+    <mx:Panel title="LinkButton Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
        
         <mx:Label width="100%" 
             text="Select the LinkButton control to open the Alert control."/>
 
         <mx:LinkButton label="LinkButton control" color="#0000FF" fontWeight="bold" 
-            click="Alert.show('LinkButton selected!');"/>
+            click="Alert.show('LinkButton selected!')"/>
 
     </mx:Panel>
 </mx:Application>   
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/Local.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/Local.mxml
index ef16637..ee6bdc7 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/Local.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/Local.mxml
@@ -17,9 +17,10 @@
   -->
 
 <!-- Flex application loaded by the SWFLoader control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" height="75" width="350">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				width="100%" height="100%">
 
-    <mx:Label color="blue" text="The Label control of the embedded application."/>
+    <mx:Label text="The Label control of the embedded application."/>
 
 </mx:Application>
        
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/MenuBarExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/MenuBarExample.mxml
index 0deacc4..ab439b2 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/MenuBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/MenuBarExample.mxml
@@ -17,9 +17,12 @@
   -->
 
 <!-- Simple example to demonstrate the MenuBar control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="initCollections();" >
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%"
+				creationComplete="initCollections()">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
 
             import mx.events.MenuEvent;
@@ -64,13 +67,14 @@
          ]]>
     </fx:Script>
 
-    <mx:Panel title="MenuBar Control Example" height="75%" width="75%" 
-        paddingTop="10" paddingLeft="10">
+    <mx:Panel title="MenuBar Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Label width="100%" color="blue"
+        <mx:Label width="100%"
            text="Select a menu item."/>
 
-        <mx:MenuBar labelField="@label" itemClick="menuHandler(event);" 
+        <mx:MenuBar labelField="@label" itemClick="menuHandler(event)" 
             dataProvider="{menuBarCollection}" />
             
     </mx:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/NumericStepperExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/NumericStepperExample.mxml
index 6869276..19d8ab8 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/NumericStepperExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/NumericStepperExample.mxml
@@ -17,16 +17,19 @@
   -->
 
 <!-- Simple example to demonstrate the NumericStepper control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <mx:Panel title="NumericStepper Control Example" height="75%" width="75%" 
-        paddingTop="10" paddingLeft="10">
+    <mx:Panel title="NumericStepper Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Text width="100%" color="blue"
+        <mx:Text width="100%"
             text="Default NumericStepper control with a minimum=0, maximum=10, and stepSize=1."/>
         <mx:NumericStepper/>
 
-        <mx:Text width="100%"  color="blue"
+        <mx:Text width="100%" 
             text="NumericStepper control with a minimum=10, maximum=40, stepSize=0.01, and starting value of 20."/>
 
         <mx:NumericStepper id="ns" 
@@ -35,7 +38,7 @@
             value="20.00" 
             width="65"/>
 
-        <mx:Label  color="blue" text="You selected {ns.value}"/>
+        <mx:Label  text="You selected {ns.value}"/>
 
     </mx:Panel>
 </mx:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/OLAPDataGridExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/OLAPDataGridExample.mxml
index e609f09..d7279b6 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/OLAPDataGridExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/OLAPDataGridExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
-        creationComplete="creationCompleteHandler();">
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%"
+				creationComplete="creationCompleteHandler()">
 
-    <fx:Script>
+     <fx:Script>
       <![CDATA[
         import mx.rpc.AsyncResponder;
         import mx.rpc.AsyncToken;
@@ -167,7 +169,7 @@
 	    <mx:OLAPCube name="FlatSchemaCube" 
 	        dataProvider="{flatData}" 
 	        id="myMXMLCube"
-	        complete="runQuery(event);">
+	        complete="runQuery(event)">
 	         
 	        <mx:OLAPDimension name="CustomerDim">
 	            <mx:OLAPAttribute name="Customer" dataField="customer"/>
@@ -197,9 +199,10 @@
     </fx:Declarations>
 		
     <mx:Panel title="OLAPCube Control Example"
-        height="75%" width="75%" layout="horizontal"
-        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:OLAPDataGrid id="myOLAPDG" width="100%" height="100%"/>
+		
     </mx:Panel>
 </mx:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/PopUpButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/PopUpButtonExample.mxml
index d8d4c86..53683fa 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/PopUpButtonExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/PopUpButtonExample.mxml
@@ -17,8 +17,10 @@
   -->
 
 <!-- Simple example to demonstrate the PopUpButton control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
-
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+	
 	<fx:Script>
 		<![CDATA[
 
@@ -51,12 +53,13 @@
 		]]>
 	</fx:Script>
 
-    <mx:Panel title="PopUpButton Control Example" height="75%" width="75%" 
-        paddingTop="10" paddingBottom="10" paddingRight="10" paddingLeft="10">
+    <mx:Panel title="PopUpButton Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Label width="100%" color="blue"
+        <mx:Label width="100%"
             text="Button label contains the name of the last selected menu item." />
-        <mx:PopUpButton id="popB" label="Edit" creationComplete="initMenu();" width="135" />
+        <mx:PopUpButton id="popB" label="Edit" creationComplete="initMenu()" width="135" />
 		
         <mx:Spacer height="50" />
         <mx:TextInput id="popTypeB" />
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/PopUpButtonMenuExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/PopUpButtonMenuExample.mxml
index c0c6009..69e2abd 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/PopUpButtonMenuExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/PopUpButtonMenuExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- PopUpMenuButton control example. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
             import mx.events.*;
             import mx.controls.*;
@@ -41,16 +43,17 @@
 	    </fx:XMLList>
 	</fx:Declarations>
 
-    <mx:Panel title="PopUpMenuButton Control Example" height="100%" width="100%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10">
+    <mx:Panel title="PopUpMenuButton Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-		<mx:Label width="100%" color="blue"
+		<mx:Label width="100%"
 		    text="Click the down arrow to open the menu."/>
 
         <mx:PopUpMenuButton id="p2" 
             dataProvider="{treeDP2}" 
             labelField="@label"
-            itemClick="itemClickHandler(event);"/>
+            itemClick="itemClickHandler(event)"/>
 
 	</mx:Panel>
 </mx:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/RadioButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/RadioButtonExample.mxml
index 5f1f156..0c8f16e 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/RadioButtonExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/RadioButtonExample.mxml
@@ -17,16 +17,19 @@
   -->
 
 <!-- Simple example to demonstrate RadioButton control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         import mx.controls.Alert;
     </fx:Script>
 
-    <mx:Panel title="RadioButton Control Example" height="75%" width="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10">
+    <mx:Panel title="RadioButton Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-       <mx:Label width="100%" color="blue"
+       <mx:Label width="100%"
            text="What year were women first allowed to compete in the Boston Marathon?"/>
 
         <mx:RadioButton groupName="year" id="option1" label="1942"/>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/RadioButtonGroupExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/RadioButtonGroupExample.mxml
index af1f0a0..5567aa3 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/RadioButtonGroupExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/RadioButtonGroupExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate RadioButtonGroup control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
 	    <![CDATA[
 	
 	    import mx.controls.Alert;
@@ -43,13 +45,14 @@
 	    ]]>
     </fx:Script>
 
-    <mx:Panel title="RadioButtonGroup Control Example" height="75%" width="75%" 
-        paddingTop="10" paddingLeft="10">
+    <mx:Panel title="RadioButtonGroup Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
     
-        <mx:Label width="100%" color="blue" 
+        <mx:Label width="100%" 
             text="Select a type of credit card."/>
 
-        <mx:RadioButtonGroup id="cardtype" itemClick="handleCard(event);"/>
+        <mx:RadioButtonGroup id="cardtype" itemClick="handleCard(event)"/>
         <mx:RadioButton groupName="cardtype" id="americanExpress" value="AmEx" 
             label="American Express" width="150" />
         <mx:RadioButton groupName="cardtype" id="masterCard" value="MC" 
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/RichTextEditorExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/RichTextEditorExample.mxml
index 9553fca..e2688cb 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/RichTextEditorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/RichTextEditorExample.mxml
@@ -18,15 +18,22 @@
 
 <!-- Simple example to demonstrate the RichTextEditor control. -->
 <mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
-    horizontalAlign="center" verticalAlign="middle">
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <mx:RichTextEditor id="rte" title="RichTextEditor" height="75%" text="Enter text into the RichTextEditor control, then click a button to display your text as plain text, or as HTML-formatted text."/>
-
-    <mx:TextArea id="rteText" width="80%" height="25%"/>
-
-    <mx:HBox>
-        <mx:Button label="Show Plain Text" click="rteText.text=rte.text;"/>
-        <mx:Button label="Show HTML Markup" click="rteText.text=rte.htmlText;"/>
-    </mx:HBox>
+    <mx:Panel title="Rich Text Editor Control Example" horizontalAlign="center"
+			paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+			height="100%" width="100%">
+		
+	    <mx:RichTextEditor id="rte" title="RichTextEditor" height="75%"
+						   text="Enter text into the RichTextEditor control, then click a button to display your text as plain text, or as HTML-formatted text."/>
+	
+	    <mx:TextArea id="rteText" width="80%" height="25%"/>
+	
+	    <mx:HBox>
+	        <mx:Button label="Show Plain Text" click="rteText.text=rte.text"/>
+	        <mx:Button label="Show HTML Markup" click="rteText.text=rte.htmlText"/>
+	    </mx:HBox>
+	</mx:Panel>
 
 </mx:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleAlert.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleAlert.mxml
index 1e85001..dbf57a0 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleAlert.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleAlert.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the Alert control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
             import mx.controls.Alert;
             import mx.events.CloseEvent;
@@ -56,19 +58,21 @@
         ]]>
     </fx:Script>
 
-    <mx:Panel title="Alert Control Example" width="75%" horizontalAlign="center" paddingTop="10">
-      <mx:Text width="100%" color="blue" textAlign="center"
+    <mx:Panel title="Alert Control Example" horizontalAlign="center"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+      <mx:Text width="100%" textAlign="center"
           text="Click the button below to display a simple Alert window."/>
-      <mx:Button label="Click Me" click="Alert.show('Hello World!', 'Message');"/>
+      <mx:Button label="Click Me" click="Alert.show('Hello World!', 'Message')"/>
 
-      <mx:Text width="100%" color="blue" textAlign="center"
+      <mx:Text width="100%" textAlign="center"
           text="Click the button below to display an Alert window and capture the button pressed by the user."/>
-      <mx:Button label="Click Me" click="clickHandler(event);"/>
+      <mx:Button label="Click Me" click="clickHandler(event)"/>
       <mx:Label id="status" fontWeight="bold"/>
 
-      <mx:Text width="100%" color="blue" textAlign="center"
+      <mx:Text width="100%" textAlign="center"
           text="Click the button below to display an Alert window that uses custom Button labels."/>
-      <mx:Button label="Click Me" click="secondClickHandler(event);"/>
+      <mx:Button label="Click Me" click="secondClickHandler(event)"/>
     </mx:Panel>
 
 </mx:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleComboBox.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleComboBox.mxml
index 2474844..9e38cd7 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleComboBox.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleComboBox.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the ComboBox control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
             import mx.collections.ArrayCollection;
 
@@ -36,15 +38,15 @@
         ]]>
     </fx:Script>
 
-    <mx:Panel title="ComboBox Control Example" 
-        height="75%" width="75%" layout="horizontal"
-        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+    <mx:Panel title="ComboBox Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:ComboBox dataProvider="{cards}" width="150" 
-            close="closeHandler(event);"/>
+            close="closeHandler(event)"/>
 
         <mx:VBox width="250">
-            <mx:Text  width="200" color="blue" text="Select a type of credit card."/>
+            <mx:Text  width="200" text="Select a type of credit card."/>
             <mx:Label id="myLabel" text="You selected:"/>
             <mx:Label id="myData" text="Data:"/>
         </mx:VBox>         
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleDataGrid.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleDataGrid.mxml
index 5ade60d..8bb895b 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleDataGrid.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleDataGrid.mxml
@@ -17,7 +17,9 @@
   -->
 
 <!-- DataGrid control example. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
 	<fx:Declarations>
 	    <fx:XMLList id="employees">
@@ -48,10 +50,11 @@
 	    </fx:XMLList>
 	</fx:Declarations>
 
-    <mx:Panel title="DataGrid Control Example" height="100%" width="100%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10">
+    <mx:Panel title="DataGrid Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Label width="100%" color="blue"
+        <mx:Label width="100%"
             text="Select a row in the DataGrid control."/>
 
         <mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}">
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleHRule.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleHRule.mxml
index 3205a56..55359a0 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleHRule.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleHRule.mxml
@@ -17,17 +17,20 @@
   -->
 
 <!-- Simple example to demonstrate the HRule control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
 	<fx:Declarations>
 		<mx:WipeLeft id="myWL"/>
 	</fx:Declarations>	
 
-    <mx:Panel title="HRule Control Example" id="myPanel" 
-        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+    <mx:Panel title="HRule Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:HRule rollOverEffect="{myWL}" width="100%" strokeWidth="1" strokeColor="red"/>
-        <mx:Label width="100%" color="blue" 
+        <mx:Label width="100%" 
             text="Move mouse over HorizontalRule control to redraw it."/>
 
     </mx:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleImage.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleImage.mxml
index b44524e..e7d3426 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleImage.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleImage.mxml
@@ -17,14 +17,16 @@
   -->
 
 <!-- Simple example to demonstrate the Image control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <mx:Panel id="myPanel" title="Image Control Example" 
-        height="75%" width="75%" horizontalAlign="center"
-        paddingTop="10" paddingLeft="10">
+    <mx:Panel id="myPanel" title="Image Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Label color="blue" text="Image embedded in the application."/>
-        <mx:Image source="@Embed('assets/ApacheFlexLogo.png')"/>
+        <mx:Label text="Image embedded in the application."/>
+        <mx:Image source="@Embed('assets/ApacheFlexLogo.png')" width="50%" height="50%" />
 
     </mx:Panel>
 </mx:Application>          
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleImageHSlider.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleImageHSlider.mxml
index 5ef85ea..587790f 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleImageHSlider.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleImageHSlider.mxml
@@ -17,41 +17,44 @@
   -->
 
 <!-- Simple example to demonstrate the HSlider control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
    
-          private var imageWidth:Number=0;
-          private var imageHeight:Number=0;
+          private var imageWidth:Number = 0;
+          private var imageHeight:Number = 0;
           
           // Event handler function to change the image size.
           private function changeSize():void
 	      {
-	         logo.width=uint(imageWidth*hSlider.value/100);
-	         logo.height=uint(imageHeight*hSlider.value/100);
+	         logo.width = uint(imageWidth*hSlider.value/100);
+	         logo.height = uint(imageHeight*hSlider.value/100);
 	      }
         ]]>
     </fx:Script>
 
-    <mx:Panel id="panel" title="HSlider Control Example" height="100%" width="95%" 
-        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+    <mx:Panel id="panel" title="HSlider Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:HBox height="100%" width="100%">
             <mx:Image id="logo" source="@Embed('assets/ApacheFlexLogo.png')" 
-                creationComplete="imageWidth=logo.width; imageHeight=logo.height;" />
+                creationComplete="imageWidth = logo.width; imageHeight = logo.height; changeSize()" />
         </mx:HBox>
 
-        <mx:Label color="blue" text="Drag the slider to resize the image."/>
+        <mx:Label text="Drag the slider to resize the image."/>
 
-        <mx:HSlider id="hSlider" minimum="0" maximum="100" value="100" 
+        <mx:HSlider id="hSlider" minimum="0" maximum="100" value="50" 
             dataTipPlacement="top" 
             tickColor="black" 
             snapInterval="1" tickInterval="10" 
             labels="['0%','100%']" 
             allowTrackClick="true" 
             liveDragging="true"
-            change="changeSize();"/>
+            change="changeSize()"/>
     </mx:Panel>
 </mx:Application>   
        
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleImageVSlider.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleImageVSlider.mxml
index 2275598..8295b90 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleImageVSlider.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleImageVSlider.mxml
@@ -17,13 +17,15 @@
   -->
 
 <!-- Simple example to demonstrate the VSlider control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
    
-          private var imageWidth:Number=0;
-          private var imageHeight:Number=0;
+          private var imageWidth:Number = 0;
+          private var imageHeight:Number = 0;
           
           // Event handler function to change the image size.
           private function changeSize():void
@@ -34,28 +36,27 @@
         ]]>
     </fx:Script>
 
-        <mx:Panel id="panel" title="VSlider Control Example" 
-            height="100%" width="100%" 
-            layout="horizontal"
-            paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+        <mx:Panel id="panel" title="VSlider Control Example" layout="horizontal"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
         
             <mx:HBox width="50%">
                 <mx:Image id="logo" source="@Embed('assets/ApacheFlexLogo.png')" 
-                    creationComplete="imageWidth=logo.width; imageHeight=logo.height;" />
+                    creationComplete="imageWidth = logo.width; imageHeight = logo.height; changeSize()" />
             </mx:HBox>
 
             <mx:VBox horizontalAlign="center">
-                <mx:Label color="blue" text="Drag the slider to resize the image."/>
+                <mx:Label text="Drag the slider to resize the image."/>
     
                 <mx:VSlider id="hSlider" 
                     dataTipPlacement="top" 
-                    minimum="0" maximum="100" value="100" 
+                    minimum="0" maximum="100" value="50" 
                     tickColor="black" 
                     snapInterval="1" tickInterval="10" 
                     labels="['0%','100%']" 
                     allowTrackClick="true" 
                     liveDragging="true" 
-                    change="changeSize();"/>
+                    change="changeSize()"/>
             </mx:VBox>
             
         </mx:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleList.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleList.mxml
index 5bdbb81..3a74f3e 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleList.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleList.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the List Control -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
         	[Bindable]
             public var selectedItem:Object;
@@ -41,12 +43,13 @@
 	    </fx:Model>
 	</fx:Declarations>
 	
-    <mx:Panel title="List Control Example" height="75%" width="75%" 
-        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+    <mx:Panel title="List Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:Label text="Select a state to see its abbreviation."/>
 
-        <mx:List id="source" width="100%" color="blue"
+        <mx:List id="source" width="100%"
             dataProvider="{mystates.state}"
             change="this.selectedItem=List(event.target).selectedItem"/>
 
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleLoader.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleLoader.mxml
index 05da3aa..242b021 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleLoader.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleLoader.mxml
@@ -17,14 +17,17 @@
   -->
 
 <!-- Simple example to demonstrate the SWFLoader control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <mx:Panel title="SWFLoader Control Example"  height="90%" width="90%"
-        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+    <mx:Panel title="SWFLoader Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:Label text="The Label control of the outer application."/>
 
-        <mx:SWFLoader id="Load" source="@Embed(source='Local.swf')" height="100" width="350"/>
+        <mx:SWFLoader id="Load" source="@Embed(source='Local.swf')" />
 
     </mx:Panel>
 </mx:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleMenuExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleMenuExample.mxml
index 2972010..abca396 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleMenuExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleMenuExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the Menu control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
        
             import mx.controls.Menu;
@@ -60,13 +62,14 @@
 	    </fx:XML>
 	</fx:Declarations>	
 
-    <mx:Panel id="panel" title="Menu Control Example" height="75%" width="75%" 
-        paddingTop="10" paddingLeft="10">
+    <mx:Panel id="panel" title="Menu Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Label width="100%" color="blue"
+        <mx:Label width="100%"
            text="Click the button to open the Menu control."/>
 
-        <mx:Button id="mybutton" label="Open Menu" click="showMenu();"/>
+        <mx:Button id="mybutton" label="Open Menu" click="showMenu()"/>
 
     </mx:Panel>
 </mx:Application>          
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleProgressBar.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleProgressBar.mxml
index b150bf3..6a14898 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleProgressBar.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleProgressBar.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the ProgressBar control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
            
           private var j:uint=10;
@@ -42,12 +44,13 @@
         ]]>    
     </fx:Script>
 
-    <mx:Panel title="ProgressBar Control Example" height="75%" width="75%" 
-        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+    <mx:Panel title="ProgressBar Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Label width="100%" color="blue"
+        <mx:Label width="100%"
             text="Click the button to increment the progress bar." />
-        <mx:Button id="Speed" label="Run" click="runit();"/>
+        <mx:Button id="Speed" label="Run" click="runit()"/>
             
         <mx:ProgressBar id="bar" labelPlacement="bottom"
             minimum="0" visible="true" maximum="100" label="CurrentProgress 0%" 
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleVRule.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleVRule.mxml
index 7163151..899ef0f 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleVRule.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/SimpleVRule.mxml
@@ -17,13 +17,16 @@
   -->
 
 <!-- Simple example to demonstrate the VRule control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-   <mx:Panel title="VRule Control Example" id="myPanel" horizontalAlign="center" 
-       paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+   <mx:Panel title="VRule Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
       
       <mx:VRule rollOverEffect="WipeUp" strokeWidth="1" strokeColor="red"/>        
-      <mx:Label width="100%" color="blue" 
+      <mx:Label width="100%" 
           text="Move mouse over VRule control to redraw it."/>
     
    </mx:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/SpacerExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/SpacerExample.mxml
index fd59199..e28005d 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/SpacerExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/SpacerExample.mxml
@@ -17,18 +17,21 @@
   -->
 
 <!-- Simple example to demonstrate the Spacer control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <mx:Panel id="panel" title="Spacer Control Example" height="75%" width="75%" 
-        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+    <mx:Panel id="panel" title="Spacer Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
         
-        <mx:Text width="100%" color="blue" 
-            text="The Spacer control pushes the second image to the right edge of the HBox container."/>
+        <mx:Text width="100%" 
+            text="The Spacer control pushes the second image to the right edge of the HBox container." />
 
         <mx:HBox width="100%">
-            <mx:Image source="@Embed('assets/ApacheFlexLogo.png')"/>
+            <mx:Image source="@Embed('assets/ApacheFlexLogo.png')" width="50%" height="50%" />
             <mx:Spacer width="100%"/>
-            <mx:Image source="@Embed('assets/ApacheFlexLogo.png')"/>
+            <mx:Image source="@Embed('assets/ApacheFlexLogo.png')" width="50%" height="50%" />
         </mx:HBox>
        
     </mx:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/TabBarExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/TabBarExample.mxml
index 07de42d..211cbd1 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/TabBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/TabBarExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the TabBar control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
 
             import mx.events.ItemClickEvent;
@@ -41,13 +43,14 @@
        ]]>
     </fx:Script>
 
-    <mx:Panel title="TabBar Control Example" height="75%" width="75%" 
-        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+    <mx:Panel title="TabBar Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Label width="100%" color="blue" 
+        <mx:Label width="100%" 
             text="Select a tab to change the current panel."/>
 
-        <mx:TabBar itemClick="clickEvt(event);">
+        <mx:TabBar itemClick="clickEvt(event)">
             <mx:dataProvider>{STATE_ARRAY}</mx:dataProvider>
         </mx:TabBar>
 
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/TextAreaExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/TextAreaExample.mxml
index 3d346f9..5df3381 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/TextAreaExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/TextAreaExample.mxml
@@ -17,10 +17,13 @@
   -->
 
 <!-- Simple example to demonstrate the TextArea control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <mx:Panel title="TextArea Control Example" height="75%" width="75%" 
-        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+    <mx:Panel title="TextArea Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
         
         <mx:TextArea width="400" height="100">
             <mx:text>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/TextExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/TextExample.mxml
index 11610a4..7bfad66 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/TextExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/TextExample.mxml
@@ -17,10 +17,13 @@
   -->
 
 <!-- Simple example to demonstrate the Text control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <mx:Panel title="Text Control Example" height="75%" width="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10">
+    <mx:Panel title="Text Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:Text width="100%">
             <mx:text>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/TextInputExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/TextInputExample.mxml
index d47364e..2e459ed 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/TextInputExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/TextInputExample.mxml
@@ -17,10 +17,13 @@
   -->
 
 <!-- Simple example to demonstrate the TextInput control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <mx:Panel title="TextInput Control Example" height="75%" width="75%" 
-        paddingTop="10" paddingLeft="10">
+    <mx:Panel title="TextInput Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
         
         <mx:TextInput id="src" text="Hello World!"/>
 
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/TileListExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/TileListExample.mxml
index 6914889..5051054 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/TileListExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/TileListExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the TileList Control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
              
              [Bindable]
@@ -44,10 +46,11 @@
         ]]>
     </fx:Script>
 
-    <mx:Panel title="TileList Control Example" height="100%" width="100%" 
-        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+    <mx:Panel title="TileList Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Label width="100%" color="blue" 
+        <mx:Label width="100%" 
             text="A TileList control displays items in rows and columns."/>
 
         <mx:TileList id="CameraSelection" height="250" width="300" 
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/ToggleButtonBarExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/ToggleButtonBarExample.mxml
index 32a5c3a..d29f166 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/ToggleButtonBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/ToggleButtonBarExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the ToggleButtonBar control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
 
             import mx.events.ItemClickEvent;
@@ -33,15 +35,16 @@
         ]]>
     </fx:Script>
 
-    <mx:Panel title="ToggleButtonBar Control Example" height="75%" width="75%"
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="ToggleButtonBar Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Label width="100%" color="blue"
+        <mx:Label width="100%"
             text="Select a button in the ToggleButtonBar control."/>
 
         <mx:TextArea id="myTA" width="100%" height="100%"/>
 
-        <mx:ToggleButtonBar itemClick="clickHandler(event);">
+        <mx:ToggleButtonBar itemClick="clickHandler(event)">
             <mx:dataProvider>
                 <fx:Array>
                     <fx:String>Flex SDK</fx:String>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/TreeExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/TreeExample.mxml
index 528db0d..cd76c85 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/TreeExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/TreeExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Tree control example. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
 
             [Bindable]
@@ -50,10 +52,11 @@
 	    </fx:XMLList>
 	</fx:Declarations>
 
-    <mx:Panel title="Tree Control Example" height="75%" width="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="Tree Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Label width="100%" color="blue" 
+        <mx:Label width="100%" 
             text="Select a node in the Tree control."/>
 
         <mx:HDividedBox width="100%" height="100%">
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/VScrollBarExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/VScrollBarExample.mxml
index 682eda7..dfc350b 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/VScrollBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/VScrollBarExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the VScrollBar control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
- 
-     <fx:Script>
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+      <fx:Script>
         <![CDATA[
     
             import mx.events.ScrollEvent;
@@ -37,19 +39,20 @@
         ]]>
     </fx:Script> 
   
-    <mx:Panel id="panel" title="VScrollBar Control Example" height="75%" width="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel id="panel" title="VScrollBar Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
         
-        <mx:Label width="100%" color="blue" 
+        <mx:Label width="100%" 
             text="Click on the scroll bar to view its properties."/>
         
         <mx:VScrollBar id="bar" height="100%" 
             minScrollPosition="0" maxScrollPosition="{panel.width - 20}"
             lineScrollSize="50" pageScrollSize="100"  
             repeatDelay="1000" repeatInterval="500" 
-            scroll="myScroll(event);"/>
+            scroll="myScroll(event)"/>
           
-        <mx:TextArea height="100%" width="100%" id="showPosition" color="blue"/>
+        <mx:TextArea height="100%" width="100%" id="showPosition"/>
   
     </mx:Panel>  
 </mx:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/controls/VideoDisplayExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/controls/VideoDisplayExample.mxml
index a641674..e1e6256 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/controls/VideoDisplayExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/controls/VideoDisplayExample.mxml
@@ -17,21 +17,23 @@
   -->
 
 <!-- Simple example to demonstrate the VideoDisplay control. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <mx:Panel title="VideoDisplay Control Example" height="75%" width="75%" 
-        horizontalAlign="center" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="VideoDisplay Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-       <mx:Text width="75%" color="blue"
+       <mx:Text width="75%"
            text="Use the buttons to control the video. The Stop button resets the video to the beginning."/>
 
 		<mx:VideoDisplay id="myVid" height="158" width="211" source="assets/FlexInstaller.mp4" autoPlay="false"/>
 
 		<mx:HBox>
-		    <mx:Button label="Play" click="myVid.play();"/>
-		    <mx:Button label="Pause" click="myVid.pause();"/>
-		    <mx:Button label="Stop" click="myVid.stop();"/>
+		    <mx:Button label="Play" click="myVid.play()"/>
+		    <mx:Button label="Pause" click="myVid.pause()"/>
+		    <mx:Button label="Stop" click="myVid.stop()"/>
 		</mx:HBox>
 
 	</mx:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/core/RepeaterExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/core/RepeaterExample.mxml
index 12da883..edb5ac6 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/core/RepeaterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/core/RepeaterExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the Repeater class. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
 		
 		    import mx.controls.Alert;
@@ -30,10 +32,11 @@
         ]]>
     </fx:Script>
 
-    <mx:Panel title="Repeater Example" width="75%" height="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="Repeater Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
   
-        <mx:Text width="100%" color="blue" 
+        <mx:Text width="100%" 
             text="Use the Repeater class to create 9 Button controls in a 3 by 3 Tile container."/>
 
         <mx:Tile direction="horizontal" borderStyle="inset" 
diff --git a/TourDeFlex/TourDeFlex3/src/mx/core/SimpleApplicationExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/core/SimpleApplicationExample.mxml
index 3b1055e..37a0dae 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/core/SimpleApplicationExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/core/SimpleApplicationExample.mxml
@@ -19,11 +19,12 @@
 <!-- Simple example to demonstrate the Application container. -->
 
 <mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
-    backgroundColor="0xCCCCCC"
+	paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+    backgroundColor="0xCCCCCC" borderStyle="solid"
     horizontalAlign="center" verticalAlign="middle"
-    applicationComplete="appComplete();">
+    applicationComplete="appComplete()">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
             
             // Event handlers for the components.
@@ -43,18 +44,18 @@
 
     <mx:ApplicationControlBar dock="true">
         <mx:Button label="Set Grey Solid Fill" 
-            click="this.setStyle('backgroundColor', 0xCCCCCC);"/>
+            click="this.setStyle('backgroundColor', 0xCCCCCC)"/>
         <mx:Button label="Set Blue Solid Fill" 
-            click="this.setStyle('backgroundColor', 0x66CCFF);"/>
+            click="this.setStyle('backgroundColor', 0x66CCFF)"/>
     </mx:ApplicationControlBar> 
 
     <mx:Panel title="Application Container Example" backgroundColor="0x9CB0BA"
         width="75%" height="75%" 
-        creationComplete="panelCreationComplete();">
+        creationComplete="panelCreationComplete()">
         
         <mx:TextArea id="myTA" height="100%" width="100%" 
             text="Event order: "
-            creationComplete="textAreaCreationComplete();"/>
+            creationComplete="textAreaCreationComplete()"/>
 
     </mx:Panel>
 </mx:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/AddItemActionEffectExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/AddItemActionEffectExample.mxml
index 1b15899..c83fad1 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/AddItemActionEffectExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/AddItemActionEffectExample.mxml
@@ -16,9 +16,11 @@
       limitations under the License.
   -->
 
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
             import mx.effects.easing.Elastic;
             import mx.collections.ArrayCollection;
@@ -75,8 +77,9 @@
 	    </mx:Sequence>   
 	</fx:Declarations>
 
-    <mx:Panel title="AddItemEffect/RemoveItemEffect Example" width="75%" height="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="AddItemEffect/RemoveItemEffect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <!-- This TileList uses a custom data change effect -->
         <mx:TileList id="tlist0" 
@@ -91,10 +94,10 @@
     
         <mx:Button 
             label="Delete selected item(s)" 
-            click="deleteItem();"/>
+            click="deleteItem()"/>
         <mx:Button 
             label="Add item" 
-            click="addItem();"/>
+            click="addItem()"/>
         
     </mx:Panel>         
 </mx:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/AnimatePropertyEffectExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/AnimatePropertyEffectExample.mxml
index 50cde02..b0efee1 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/AnimatePropertyEffectExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/AnimatePropertyEffectExample.mxml
@@ -17,7 +17,9 @@
   -->
 
 <!-- Simple example to demonstrate the AnimateProperty effect. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
 	<fx:Declarations>
 	    <mx:Sequence id="animateScaleXUpDown" >
@@ -26,14 +28,15 @@
 	    </mx:Sequence>
 	</fx:Declarations>
 
-    <mx:Panel title="AnimateProperty Effect Example" width="75%" height="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="AnimateProperty Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Text width="100%" color="blue" 
+        <mx:Text width="100%" 
             text="Click on the image to use the AnimateProperty effect with the scaleX property."/>
 
         <mx:Image id="flex" source="@Embed(source='assets/ApacheFlexLogo.png')"
-            mouseDownEffect="{animateScaleXUpDown}"/>
+            mouseDownEffect="{animateScaleXUpDown}" width="50%" height="50%" />
 
     </mx:Panel>
 </mx:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/BlurEffectExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/BlurEffectExample.mxml
index e1c86a6..fae1073 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/BlurEffectExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/BlurEffectExample.mxml
@@ -17,7 +17,9 @@
   -->
 
 <!-- Simple example to demonstrate the Blur effect. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
 	<fx:Declarations>
 	    <mx:Blur id="blurImage" duration="1000" 
@@ -28,13 +30,15 @@
 	        blurYFrom="10.0" blurYTo="0.0"/>
 	</fx:Declarations>
 
-    <mx:Panel title="Blur Effect Example" width="75%" height="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="Blur Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Text width="100%" color="blue" 
+        <mx:Text width="100%" 
             text="Click and hold the mouse on the image to see blurImage effect. Release the mouse to see the unblurImage effect."/>
 
         <mx:Image id="flex" source="@Embed(source='assets/ApacheFlexLogo.png')"
+			width="50%" height="50%"
             mouseDownEffect="{blurImage}" 
             mouseUpEffect="{unblurImage}"/>
 
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/CompositeEffectExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/CompositeEffectExample.mxml
index 351a0d5..df68784 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/CompositeEffectExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/CompositeEffectExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the Composite effect. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
 
     	import mx.effects.Move;
@@ -68,29 +70,32 @@
         ]]>
     </fx:Script>
     
-    <mx:Panel title="Composite Effect" width="75%" height="75%">
-    <mx:Canvas id="canvas" width="100%" height="100%">
-
-        <mx:Label id="a" color="#009966" text="Sequence 1" 
-            height="{(canvas.height-20)/2}" 
-            width="{(canvas.width-20)/2}"
-            effectStart=" a.text= 'sequence 1 Running';"
-            effectEnd="a.text='sequence 1 ended!!!' "/>
-
-        <mx:Label id="b" x="0" y="175" color="#00CCFF"  
-            text="Sequence 2" 
-            height="{(canvas.height-20)/2}"
-            width="{(canvas.width-20)/2}" 
-            effectStart=" b.text= 'sequence 2 Running';"
-            effectEnd="b.text='sequence 2 ended!!'" />
-
-        <mx:Button id="button"  x="245" y="85"
-            label="Start effect" 
-            click="startEffect(200,175,200,0)"
-            effectStart="button.label='parallel effect running'"
-            effectEnd="button.label='parallel effect ended!!'"/>
-
-    </mx:Canvas>
+    <mx:Panel title="Composite Effect"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+		
+	    <mx:Canvas id="canvas" width="100%" height="100%">
+	
+	        <mx:Label id="a" color="#009966" text="Sequence 1" 
+	            height="{(canvas.height-20)/2}" 
+	            width="{(canvas.width-20)/2}"
+	            effectStart=" a.text= 'sequence 1 Running'"
+	            effectEnd="a.text='sequence 1 ended!!!' "/>
+	
+	        <mx:Label id="b" x="0" y="175" color="#00CCFF"  
+	            text="Sequence 2" 
+	            height="{(canvas.height-20)/2}"
+	            width="{(canvas.width-20)/2}" 
+	            effectStart=" b.text= 'sequence 2 Running'"
+	            effectEnd="b.text='sequence 2 ended!!'" />
+	
+	        <mx:Button id="button"  x="245" y="85"
+	            label="Start effect" 
+	            click="startEffect(200,175,200,0)"
+	            effectStart="button.label='parallel effect running'"
+	            effectEnd="button.label='parallel effect ended!!'"/>
+	
+	    </mx:Canvas>
   
-  </mx:Panel>
+  	</mx:Panel>
 </mx:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/DefaultListEffectExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/DefaultListEffectExample.mxml
index 3e41a38..46e84ed 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/DefaultListEffectExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/DefaultListEffectExample.mxml
@@ -16,9 +16,11 @@
       limitations under the License.
   -->
 
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
             import mx.effects.DefaultListEffect;
             import mx.collections.ArrayCollection;
@@ -55,8 +57,9 @@
 	        color="0x0000ff"/>
 	</fx:Declarations>
 
-    <mx:Panel title="DefaultListEffect Example" width="75%" height="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="DefaultListEffect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:List id="list0" 
             width="150"
@@ -68,10 +71,10 @@
     
         <mx:Button 
             label="Delete item" 
-            click="deleteItem();"/>
+            click="deleteItem()"/>
         <mx:Button 
             label="Add item" 
-            click="addItem();"/>
+            click="addItem()"/>
 
     </mx:Panel> 
 </mx:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/DefaultTileListEffectExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/DefaultTileListEffectExample.mxml
index 9cbc514..83605e1 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/DefaultTileListEffectExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/DefaultTileListEffectExample.mxml
@@ -16,9 +16,11 @@
       limitations under the License.
   -->
 
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
             import mx.effects.DefaultTileListEffect;
             import mx.effects.easing.Elastic;
@@ -55,8 +57,9 @@
 	        color="0x0000ff"/>
 	</fx:Declarations>
 
-    <mx:Panel title="DefaultTileListEffect Example" width="75%" height="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="DefaultTileListEffect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:TileList id="tlist0" 
             height="100%" width="100%" 
@@ -70,10 +73,10 @@
     
         <mx:Button 
             label="Delete selected item(s)" 
-            click="deleteItems();"/>
+            click="deleteItems()"/>
         <mx:Button 
             label="Add item" 
-            click="addItems();"/>
+            click="addItems()"/>
 
     </mx:Panel> 
 </mx:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/DissolveEffectExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/DissolveEffectExample.mxml
index 958eab9..d991a34 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/DissolveEffectExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/DissolveEffectExample.mxml
@@ -17,16 +17,19 @@
   -->
 
 <!-- Simple example to demonstrate the Dissolve effect. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
 
 	<fx:Declarations>
 	    <mx:Dissolve id="dissolveOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
 	    <mx:Dissolve id="dissolveIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
 	</fx:Declarations>
 	
-    <mx:Panel title="Dissolve Effect Example" 
-        width="95%" height="95%" layout="horizontal" 
-        paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5">
+    <mx:Panel title="Dissolve Effect Example" layout="horizontal"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:VBox height="100%">
             <mx:Label text="Apache Flex"  
@@ -34,13 +37,14 @@
                 visible="{cb1.selected}"
                 hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/>
             
-            <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')" 
+            <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')"
+				width="50%" height="50%"
                 visible="{cb1.selected}"
                 hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/>
         </mx:VBox>
             
         <mx:VBox height="100%" width="100%">
-            <mx:Text width="100%" color="blue" 
+            <mx:Text width="100%" 
                 text="Use the Dissolve effect to show or hide the text, image, and button."/>
             
                 <mx:Spacer height="100%"/>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/FadeEffectExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/FadeEffectExample.mxml
index 576e5c7..c6853ff 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/FadeEffectExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/FadeEffectExample.mxml
@@ -17,7 +17,9 @@
   -->
 
 <!-- Simple example to demonstrate the Fade effect. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 	
 	<fx:Style>
 	     @font-face {
@@ -32,10 +34,11 @@
     	<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
 	</fx:Declarations>
 
-    <mx:Panel title="Fade Effect Example" width="95%" height="95%" 
-        paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5">
+    <mx:Panel title="Fade Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Text width="100%" color="blue" 
+        <mx:Text width="100%" 
             text="Use the Fade effect to show or hide the text and image. Use an embedded font when applying the Fade effect to text."/>
 
         <mx:Label text="Apache Flex"  
@@ -44,6 +47,7 @@
             hideEffect="{fadeOut}" showEffect="{fadeIn}"/>
             
         <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')" 
+			width="50%" height="50%"
             visible="{cb1.selected}"
             hideEffect="{fadeOut}" showEffect="{fadeIn}"/>
             
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/GlowEffectExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/GlowEffectExample.mxml
index 411eeda..64c2b1c 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/GlowEffectExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/GlowEffectExample.mxml
@@ -17,7 +17,9 @@
   -->
 
 <!-- Simple example to demonstrate the Glow effect. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
 	<fx:Declarations>
 	    <mx:Glow id="glowImage" duration="1000" 
@@ -32,13 +34,15 @@
 	        color="0x0000FF"/>
 	</fx:Declarations>
 
-    <mx:Panel title="Glow Effect Example" width="75%" height="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
-
-        <mx:Text width="100%" color="blue"
+    <mx:Panel title="Glow Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+		
+        <mx:Text width="100%"
             text="Click and hold the mouse on the image to see glowImage effect. Release the mouse to see unglowImage effect."/>
             
-        <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')" 
+        <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')"
+			width="50%" height="50%"
             mouseDownEffect="{glowImage}" 
             mouseUpEffect="{unglowImage}"/>
         
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/IrisEffectExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/IrisEffectExample.mxml
index 02d317d..608611f 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/IrisEffectExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/IrisEffectExample.mxml
@@ -17,20 +17,24 @@
   -->
 
 <!-- Simple example to demonstrate the Iris effect. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
 	<fx:Declarations>
     	<mx:Iris id="irisOut" duration="1000" showTarget="true"/>
     	<mx:Iris id="irisIn" duration="1000" showTarget="false"/>
 	</fx:Declarations>
 
-    <mx:Panel title="Iris Effect Example" width="75%" height="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="Iris Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Text width="100%" color="blue" 
+        <mx:Text width="100%" 
             text="Use the Iris effect to show or hide the logo."/>
 
         <mx:Image id="flex" source="@Embed(source='assets/ApacheFlexLogo.png')"  
+			width="50%" height="50%"
             visible="{cb1.selected}"
             showEffect="{irisIn}" hideEffect="{irisOut}"/>
 
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/MoveEffectExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/MoveEffectExample.mxml
index 2052a1d..73be776 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/MoveEffectExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/MoveEffectExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the Move effect. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
 
             private function moveImage():void {
@@ -34,15 +36,17 @@
     	<mx:Move id="myMove" target="{img}"/>
 	</fx:Declarations>
 
-    <mx:Panel title="Move Effect Example" width="95%" height="95%" 
-        paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5">
+    <mx:Panel title="Move Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-       <mx:Text width="100%" color="blue" 
+       <mx:Text width="100%" 
            text="Click anywhere on the canvas to move the logo horizontally to that position"/>
 
-        <mx:Canvas id="canvas" width="100%" height="100%" mouseDown="moveImage();">
+        <mx:Canvas id="canvas" width="100%" height="100%" mouseDown="moveImage()">
 
-            <mx:Image id="img" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+            <mx:Image id="img" source="@Embed(source='assets/ApacheFlexLogo.png')"
+				width="50%" height="50%"/>
 
         </mx:Canvas>
     
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/ParallelEffectExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/ParallelEffectExample.mxml
index 61cfdea..6c1bb28 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/ParallelEffectExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/ParallelEffectExample.mxml
@@ -17,7 +17,9 @@
   -->
 
 <!-- Simple example to demonstrate the Parallel effect. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
 	<fx:Declarations>
 	   <mx:Parallel id="expand" target="{img}">
@@ -31,10 +33,11 @@
 	    </mx:Parallel>
 	</fx:Declarations>
 
-    <mx:Panel title="Parallel Effect Example" width="100%" height="100%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="Parallel Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Text width="100%" color="blue" 
+        <mx:Text width="100%" 
             text="Use the Button controls to move and resize the logo in parallel."/>
 
         <mx:Canvas id="canvas" width="100%" height="100%">
@@ -43,8 +46,8 @@
         </mx:Canvas>
 
         <mx:ControlBar>
-            <mx:Button label="Expand" click="expand.end(); expand.play();"/>
-            <mx:Button label="Contract" click="contract.end(); contract.play();"/>
+            <mx:Button label="Expand" click="expand.end(); expand.play()"/>
+            <mx:Button label="Contract" click="contract.end(); contract.play()"/>
         </mx:ControlBar>
 
     </mx:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/PauseEffectExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/PauseEffectExample.mxml
index ae508e1..32e360a 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/PauseEffectExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/PauseEffectExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the Pause effect. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
             import mx.effects.easing.*;                   
         ]]>
@@ -33,14 +35,15 @@
 	    </mx:Sequence>
 	</fx:Declarations>
 
-    <mx:Panel title="Pause Effect Example" width="75%" height="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="Pause Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Text width="100%" color="blue" 
+        <mx:Text width="100%" 
 		    text="Click the logo to start the Sequence effect. The effect pauses for 2 seconds between moves."/>
 
-        <mx:Image
-            source="@Embed(source='assets/ApacheFlexLogo.png')" 
+        <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')"
+			width="50%" height="50%"
             mouseDownEffect="{movePauseMove}"/>
 
     </mx:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/ResizeEffectExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/ResizeEffectExample.mxml
index f73d435..63ae745 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/ResizeEffectExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/ResizeEffectExample.mxml
@@ -17,25 +17,28 @@
   -->
 
 <!-- Simple example to demonstrate the Resize effect. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
 	<fx:Declarations>
    		<mx:Resize id="expand" target="{img}" widthTo="100" heightTo="200"/>
     	<mx:Resize id="contract" target="{img}" widthTo="30" heightTo="60"/>
 	</fx:Declarations>
 
-    <mx:Panel title="Resize Effect Example" width="100%" height="100%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="Resize Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Text width="100%" color="blue" 
+        <mx:Text width="100%" 
             text="Use the Button controls to resize the image."/>
 
         <mx:Image id="img" width="30" height="60"
             source="@Embed(source='assets/ApacheFlexLogo.png')"/>
 
         <mx:ControlBar>
-            <mx:Button label="Expand" click="expand.end(); expand.play();"/>
-            <mx:Button label="Contract" click="contract.end(); contract.play();"/>
+            <mx:Button label="Expand" click="expand.end(); expand.play()"/>
+            <mx:Button label="Contract" click="contract.end(); contract.play()"/>
         </mx:ControlBar>
 
     </mx:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/RotateEffectExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/RotateEffectExample.mxml
index 544621f..c0001e3 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/RotateEffectExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/RotateEffectExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the Rotate effect. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
             [Bindable]
             public var angle:int=0;
@@ -44,23 +46,24 @@
     	<mx:Rotate id="rotate" angleFrom="{angle-45}" angleTo="{angle}" target="{myVB}"/>
 	</fx:Declarations>
 
-    <mx:Panel title="Rotate Effect Example" horizontalAlign="center" 
-        width="75%" height="75%" layout="horizontal"
-        paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5">
+    <mx:Panel title="Rotate Effect Example" layout="horizontal"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:VBox id="myVB" width="50%" horizontalAlign="center">
             <mx:Label text="Apache Flex"  
                 fontFamily="OpenSans" fontSize="14"/>
 
-            <mx:Image id="img" 
+            <mx:Image id="img"
+				width="50%" height="50%"
                 source="@Embed(source='assets/ApacheFlexLogo.png')"/>
         </mx:VBox>
 
-        <mx:Text width="50%" color="blue" 
+        <mx:Text width="50%" 
             text="Click the button to rotate the image 45 degrees. Use an embedded font when applying the Rotate effect to text."/>
 
         <mx:ControlBar>
-            <mx:Button label="Rotate 45 Degrees" click="rotateImage();"/>
+            <mx:Button label="Rotate 45 Degrees" click="rotateImage()"/>
         </mx:ControlBar>
     </mx:Panel>
 </mx:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/SequenceEffectExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/SequenceEffectExample.mxml
index 6675b33..933849b 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/SequenceEffectExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/SequenceEffectExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the Sequence effect. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
             import mx.effects.easing.*;                   
         ]]>
@@ -33,14 +35,15 @@
 	    </mx:Sequence>
 	</fx:Declarations>
 
-    <mx:Panel title="Sequence Effect Example" width="75%" height="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="Sequence Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Text width="100%" color="blue" 
+        <mx:Text width="100%" 
 		    text="Click the logo to start the Sequence effect. The effect pauses for 2 seconds between moves."/>
 
-        <mx:Image
-            source="@Embed(source='assets/ApacheFlexLogo.png')" 
+        <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')" 
+			width="50%" height="50%"
             mouseDownEffect="{movePauseMove}"/>
 
     </mx:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/SimpleEffectExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/SimpleEffectExample.mxml
index ce232d2..1ae799f 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/SimpleEffectExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/SimpleEffectExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the Effect class. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
 
             import mx.controls.Alert;
@@ -42,25 +44,26 @@
 
 	<fx:Declarations>
 	    <mx:Resize id="expand" target="{img}" widthTo="100" heightTo="200" 
-	        duration="10000" effectEnd="endEffectHandler();"/>
+	        duration="10000" effectEnd="endEffectHandler()"/>
 	</fx:Declarations>
 
-    <mx:Panel title="Resize Effect Example" width="100%" height="100%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="Resize Effect Example" 
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Text width="100%" color="blue" 
+        <mx:Text width="100%" 
             text="Use the Button controls to control the Resize effect."/>
 
         <mx:Image id="img" width="30" height="60"
             source="@Embed(source='assets/ApacheFlexLogo.png')"/>
      
         <mx:ControlBar>
-            <mx:Button id="button1" label="Start" click="expand.play(); button1.enabled=false;"/>
-            <mx:Button label="Pause" click="expand.pause();"/>
-            <mx:Button label="Resume" click="expand.resume();"/>
-            <mx:Button label="Reverse" click="expand.reverse();"/>
-            <mx:Button label="End" click="expand.end();"/>
-            <mx:Button label="Reset" click="resetHandler();"/>
+            <mx:Button id="button1" label="Start" click="expand.play(); button1.enabled=false"/>
+            <mx:Button label="Pause" click="expand.pause()"/>
+            <mx:Button label="Resume" click="expand.resume()"/>
+            <mx:Button label="Reverse" click="expand.reverse()"/>
+            <mx:Button label="End" click="expand.end()"/>
+            <mx:Button label="Reset" click="resetHandler()"/>
         </mx:ControlBar>
         
     </mx:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/SimpleTweenEffectExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/SimpleTweenEffectExample.mxml
index 93e236c..8471f73 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/SimpleTweenEffectExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/SimpleTweenEffectExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the TweenEffect class. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
         
             import mx.events.TweenEvent;
@@ -44,14 +46,15 @@
 	<fx:Declarations>
 	    <mx:Resize id="expand" target="{img}" widthTo="100" heightTo="200" 
 	        duration="10000" 
-	        tweenUpdate="tweenUpdateHandler(event);" 
-	        tweenEnd="tweenUpdateHandler(event);"/>
+	        tweenUpdate="tweenUpdateHandler(event)" 
+	        tweenEnd="tweenUpdateHandler(event)"/>
 	</fx:Declarations>
 
-    <mx:Panel title="Resize Effect Example" width="100%" height="100%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="Resize Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Text width="100%" color="blue" 
+        <mx:Text width="100%" 
             text="Use the Button controls to resize the image."/>
 
         <mx:HBox width="100%">
@@ -61,12 +64,12 @@
         </mx:HBox>
             
         <mx:ControlBar>
-            <mx:Button id="button1" label="Start" click="expand.play(); button1.enabled=false;"/>
-            <mx:Button label="Pause" click="expand.pause();"/>
-            <mx:Button label="Resume" click="expand.resume();"/>
-            <mx:Button label="Reverse" click="expand.reverse();"/>
-            <mx:Button label="End" click="expand.end();"/>
-            <mx:Button label="Reset" click="resetHandler();"/>
+            <mx:Button id="button1" label="Start" click="expand.play(); button1.enabled=false"/>
+            <mx:Button label="Pause" click="expand.pause()"/>
+            <mx:Button label="Resume" click="expand.resume()"/>
+            <mx:Button label="Reverse" click="expand.reverse()"/>
+            <mx:Button label="End" click="expand.end()"/>
+            <mx:Button label="Reset" click="resetHandler()"/>
         </mx:ControlBar>
         
     </mx:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/SoundEffectExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/SoundEffectExample.mxml
index cdbf299..50628ed 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/SoundEffectExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/SoundEffectExample.mxml
@@ -17,19 +17,23 @@
   -->
 
 <!-- Simple example to demonstrate the SoundEffect effect. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
 	<fx:Declarations>
     	<mx:SoundEffect id="mySounds" source="@Embed(source='./assets/ping.mp3')"/>
 	</fx:Declarations>
 
-    <mx:Panel title="Sound Effect Example" width="75%" height="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="Sound Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Label width="100%" color="blue" 
+        <mx:Label width="100%" 
             text="Click on the logo to hear the sound effect."/>
 
-        <mx:Image id="flex" source="@Embed(source='assets/ApacheFlexLogo.png')" 
+        <mx:Image id="flex" source="@Embed(source='assets/ApacheFlexLogo.png')"
+			width="50%" height="50%"
             mouseDownEffect="{mySounds}"/>
 
     </mx:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/WipeDownExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/WipeDownExample.mxml
index 7363a7c..7dd5d89 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/WipeDownExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/WipeDownExample.mxml
@@ -17,17 +17,20 @@
   -->
 
 <!-- Simple example to demonstrate the WipeDown effect. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
 	<fx:Declarations>
 	    <mx:WipeDown id="wipeOut" duration="1000"/>
 	    <mx:WipeDown id="wipeIn" duration="1000"/>
 	</fx:Declarations>
 
-    <mx:Panel title="WipeDown Effect Example" width="95%" height="95%" 
-        paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5">
+    <mx:Panel title="WipeDown Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Text width="100%" color="blue" 
+        <mx:Text width="100%" 
             text="Use the WipeDown effect to show or hide the text and image."/>
 
         <mx:Label text="Apache Flex"  
@@ -36,6 +39,7 @@
             hideEffect="{wipeOut}" showEffect="{wipeIn}"/>
 			
         <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')" 
+			width="50%" height="50%"
             visible="{cb1.selected}"
             hideEffect="{wipeOut}" showEffect="{wipeIn}"/>
             
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/WipeLeftExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/WipeLeftExample.mxml
index 6c3b6de..5e65afe 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/WipeLeftExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/WipeLeftExample.mxml
@@ -17,17 +17,20 @@
   -->
 
 <!-- Simple example to demonstrate the WipeLeft effect. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
 	<fx:Declarations>
     	<mx:WipeLeft id="wipeOut" duration="1000"/>
     	<mx:WipeLeft id="wipeIn" duration="1000"/>
 	</fx:Declarations>
 
-    <mx:Panel title="WipeLeft Effect Example" width="95%" height="95%" 
-        paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5">
+    <mx:Panel title="WipeLeft Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Text width="100%" color="blue" 
+        <mx:Text width="100%" 
             text="Use the WipeLeft effect to show or hide the text and image."/>
 
         <mx:Label text="Apache Flex"  
@@ -35,7 +38,8 @@
             visible="{cb1.selected}"
             hideEffect="{wipeOut}" showEffect="{wipeIn}"/>
 			
-        <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')" 
+        <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')"
+			width="50%" height="50%"
             visible="{cb1.selected}"
             hideEffect="{wipeOut}" showEffect="{wipeIn}"/>
             
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/WipeRightExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/WipeRightExample.mxml
index bd3d0fa..2a751e9 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/WipeRightExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/WipeRightExample.mxml
@@ -17,17 +17,20 @@
   -->
 
 <!-- Simple example to demonstrate the WipeRight effect. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
 	<fx:Declarations>
     	<mx:WipeRight id="wipeOut" duration="1000"/>
     	<mx:WipeRight id="wipeIn" duration="1000"/>
 	</fx:Declarations>
 
-    <mx:Panel title="WipeRight Effect Example" width="95%" height="95%" 
-        paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5">
+    <mx:Panel title="WipeRight Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Text width="100%" color="blue" 
+        <mx:Text width="100%" 
             text="Use the WipeRight effect to show or hide the text and image."/>
 
         <mx:Label text="Apache Flex"  
@@ -35,7 +38,8 @@
             visible="{cb1.selected}"
             hideEffect="{wipeOut}" showEffect="{wipeIn}"/>
 			
-        <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')" 
+        <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')"
+			width="50%" height="50%"
             visible="{cb1.selected}"
             hideEffect="{wipeOut}" showEffect="{wipeIn}"/>
             
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/WipeUpExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/WipeUpExample.mxml
index dce394c..1a79726 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/WipeUpExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/WipeUpExample.mxml
@@ -17,17 +17,20 @@
   -->
 
 <!-- Simple example to demonstrate the WipeUp effect. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
 	<fx:Declarations>
     	<mx:WipeUp id="wipeOut" duration="1000"/>
     	<mx:WipeUp id="wipeIn" duration="1000"/>
 	</fx:Declarations>
 
-    <mx:Panel title="WipeUp Effect Example" width="95%" height="95%" 
-        paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5">
+    <mx:Panel title="WipeUp Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Text width="100%" color="blue" 
+        <mx:Text width="100%" 
             text="Use the WipeUp effect to show or hide the text and image."/>
 
         <mx:Label text="Apache Flex"  
@@ -35,7 +38,8 @@
             visible="{cb1.selected}"
             hideEffect="{wipeOut}" showEffect="{wipeIn}"/>
 			
-        <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')" 
+        <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')"
+			width="50%" height="50%"
             visible="{cb1.selected}"
             hideEffect="{wipeOut}" showEffect="{wipeIn}"/>
             
diff --git a/TourDeFlex/TourDeFlex3/src/mx/effects/ZoomEffectExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/effects/ZoomEffectExample.mxml
index 0695d58..c91c401 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/effects/ZoomEffectExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/effects/ZoomEffectExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the Zoom effect. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[		
             import flash.events.MouseEvent;
 		
@@ -37,18 +39,19 @@
     </fx:Script>
 
 	<fx:Declarations>
-   		<mx:Zoom id="zoomAll" zoomWidthTo="1" zoomHeightTo="1" zoomWidthFrom=".5" zoomHeightFrom=".5"  />
+   		<mx:Zoom id="zoomAll" zoomWidthTo="0.5" zoomHeightTo="0.5" zoomWidthFrom="0.25" zoomHeightFrom="0.25"  />
 	</fx:Declarations>
 	
-    <mx:Panel title="Zoom Effect Example" width="95%" height="95%" horizontalAlign="center"
-        paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5">
+    <mx:Panel title="Zoom Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Text width="100%" color="blue"
+        <mx:Text width="100%"
             text="Move the mouse over the image to enlarge it. Move the mouse off of the image to shrink it."/>
 
         <mx:Image id="img"
             source="@Embed(source='assets/ApacheFlexLogo.png')"
-            scaleX=".5" scaleY=".5"
+            scaleX="0.25" scaleY="0.25"
             rollOver="doZoom(event)"
             rollOut="doZoom(event)"/>
 
diff --git a/TourDeFlex/TourDeFlex3/src/mx/formatters/CurrencyFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/formatters/CurrencyFormatterExample.mxml
index 82ad2c0..3bf2524 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/formatters/CurrencyFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/formatters/CurrencyFormatterExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the CurrencyFormatter. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
 
               import mx.events.ValidationResultEvent;			
@@ -52,8 +54,7 @@
 	        allowNegative="true" domain="real"/>	
 	</fx:Declarations>
 
-    <mx:Panel title="CurrencyFormatter Example" width="75%" height="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="CurrencyFormatter Example" height="100%" width="100%">
 
         <mx:Form>
             <mx:FormItem label="Enter U.S. dollar amount:">
@@ -65,7 +66,7 @@
             </mx:FormItem>
 
             <mx:FormItem>
-                <mx:Button label="Validate and Format" click="Format();"/>
+                <mx:Button label="Validate and Format" click="Format()"/>
             </mx:FormItem>
         </mx:Form>
 
diff --git a/TourDeFlex/TourDeFlex3/src/mx/formatters/DateFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/formatters/DateFormatterExample.mxml
index 9a2e875..667f272 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/formatters/DateFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/formatters/DateFormatterExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the DateFormatter. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
 
             import mx.events.ValidationResultEvent;			
@@ -46,8 +48,7 @@
 	    <mx:DateValidator id="dateVal" source="{dob}" property="text" inputFormat="mm/dd/yyyy"/>
 	</fx:Declarations>
 	
-    <mx:Panel title="DateFormatter Example" width="95%" height="95%" 
-            paddingTop="10" paddingLeft="5" paddingRight="5" paddingBottom="10">
+    <mx:Panel title="DateFormatter Example" height="100%" width="100%">
 
         <mx:Form width="100%">
             <mx:FormItem label="Enter date (mm/dd/yyyy):" width="100%">
@@ -59,7 +60,7 @@
             </mx:FormItem>
 
             <mx:FormItem>
-                <mx:Button label="Validate and Format" click="Format();"/>
+                <mx:Button label="Validate and Format" click="Format()"/>
             </mx:FormItem>
         </mx:Form>
 
diff --git a/TourDeFlex/TourDeFlex3/src/mx/formatters/NumberFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/formatters/NumberFormatterExample.mxml
index 0a990ba..1b741b8 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/formatters/NumberFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/formatters/NumberFormatterExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate NumberFormatter. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
 
           import mx.events.ValidationResultEvent;			
@@ -49,8 +51,7 @@
 	        allowNegative="true" domain="real"/>
 	</fx:Declarations>
 
-    <mx:Panel title="NumberFormatter Example" width="75%" height="75%" 
-            paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="NumberFormatter Example" height="100%" width="100%">
 
         <mx:Form>
             <mx:FormItem label="Enter number:">
@@ -62,7 +63,7 @@
             </mx:FormItem>
 
             <mx:FormItem>
-                <mx:Button label="Validate and Format" click="Format();"/>
+                <mx:Button label="Validate and Format" click="Format()"/>
             </mx:FormItem>
         </mx:Form>
         
diff --git a/TourDeFlex/TourDeFlex3/src/mx/formatters/PhoneFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/formatters/PhoneFormatterExample.mxml
index 699e0d9..ade9f11 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/formatters/PhoneFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/formatters/PhoneFormatterExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate PhoneFormatter. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
                 
             import mx.events.ValidationResultEvent;			
@@ -48,8 +50,7 @@
 	            allowedFormatChars=""/>
 	</fx:Declarations>
 
-    <mx:Panel title="PhoneFormatter Example" width="75%" height="75%" 
-            paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="PhoneFormatter Example" height="100%" width="100%">
 
         <mx:Form>
             <mx:FormItem label="Enter a 10-digit phone number:">
@@ -61,7 +62,7 @@
             </mx:FormItem>
 
             <mx:FormItem>
-                <mx:Button label="Validate and Format" click="Format();"/>
+                <mx:Button label="Validate and Format" click="Format()"/>
             </mx:FormItem>
         </mx:Form>
 
diff --git a/TourDeFlex/TourDeFlex3/src/mx/formatters/SimpleFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/formatters/SimpleFormatterExample.mxml
index 45787d5..b53133f 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/formatters/SimpleFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/formatters/SimpleFormatterExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the Formatter class. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
 
             // Event handler to format the input.            
@@ -46,8 +48,7 @@
     	<mx:NumberFormatter id="numberFormatter"/>
 	</fx:Declarations>
 
-    <mx:Panel title="NumberFormatter Example" width="75%" height="75%" 
-            paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="NumberFormatter Example" height="100%" width="100%">
 
         <mx:Form>
             <mx:FormItem label="Enter number - a letter is invalid:">
@@ -59,7 +60,7 @@
             </mx:FormItem>
 
             <mx:FormItem>
-                <mx:Button label="Validate and Format" click="Format();"/>
+                <mx:Button label="Validate and Format" click="Format()"/>
             </mx:FormItem>
         </mx:Form>
   
diff --git a/TourDeFlex/TourDeFlex3/src/mx/formatters/SwitchSymbolFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/formatters/SwitchSymbolFormatterExample.mxml
index 4bc47a0..39ac981 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/formatters/SwitchSymbolFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/formatters/SwitchSymbolFormatterExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate SwitchSymbolFormatter. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
         
             import mx.formatters.SwitchSymbolFormatter;                
@@ -50,13 +52,14 @@
     	<mx:SocialSecurityValidator id="scVal" source="{scNum}" property="text"/>
 	</fx:Declarations>
 
-    <mx:Panel title="SwitchSymbolFormatter Example" width="75%" height="75%" 
-            paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="SwitchSymbolFormatter Example"
+			  paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+			  height="100%" width="100%">
 
         <mx:Label text="Enter a 9 digit Social Security number with no separator characters:"/>
         <mx:TextInput id="scNum" text="" maxChars="9" width="50%"/>
 
-        <mx:Button label="Validate and Format" click="Format();"/>
+        <mx:Button label="Validate and Format" click="Format()"/>
         <mx:TextInput id="formattedSCNumber" editable="false" width="75%"/>
 
     </mx:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/formatters/ZipCodeFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/formatters/ZipCodeFormatterExample.mxml
index 92fa718..c87ed6a 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/formatters/ZipCodeFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/formatters/ZipCodeFormatterExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate ZipCodeFormatter. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
 
             import mx.events.ValidationResultEvent;			
@@ -47,8 +49,7 @@
     	<mx:ZipCodeValidator id="zcVal" source="{zip}" property="text" allowedFormatChars=""/>
 	</fx:Declarations>
 	
-    <mx:Panel title="ZipCodeFormatter Example" width="75%" height="75%" 
-            paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="ZipCodeFormatter Example" height="100%" width="100%">
 
         <mx:Form width="100%">
             <mx:FormItem label="Enter a 5 or 9 digit U.S. ZIP code:" width="100%">
@@ -60,7 +61,7 @@
             </mx:FormItem>
 
             <mx:FormItem>
-                <mx:Button label="Validate and Format" click="Format();"/>
+                <mx:Button label="Validate and Format" click="Format()"/>
             </mx:FormItem>
         </mx:Form>
 
diff --git a/TourDeFlex/TourDeFlex3/src/mx/printing/AdvancedPrintDataGridExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/printing/AdvancedPrintDataGridExample.mxml
index 38f0244..d133987 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/printing/AdvancedPrintDataGridExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/printing/AdvancedPrintDataGridExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- printing\ADGPrint.mxml -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
             import mx.printing.*;
             import mx.collections.ArrayCollection;
@@ -81,8 +83,8 @@
     </fx:Script>
 
     <mx:Panel title="PrintAdvancedDataGrid Control Example"
-        height="75%" width="75%" layout="horizontal"
-        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+			  paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+			  height="100%" width="100%">
 
         <mx:AdvancedDataGrid id="adg"
             width="100%" height="100%">
@@ -100,6 +102,6 @@
 
         <mx:Button id="myButton" 
             label="Print" 
-            click="doPrint();"/>
+            click="doPrint()"/>
     </mx:Panel>    
 </mx:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/printing/FormPrintFooter.mxml b/TourDeFlex/TourDeFlex3/src/mx/printing/FormPrintFooter.mxml
index 20e500b..62860e7 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/printing/FormPrintFooter.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/printing/FormPrintFooter.mxml
@@ -19,14 +19,16 @@
 <!-- Custom control for the footer area of the printed page. -->
 
 <mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
-	width="60%" horizontalAlign="right" >
+	width="60%" horizontalAlign="right">
+	
     <!-- Declare and initialize the product total variable. -->
-
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
             [Bindable]
             public var pTotal:Number = 0;
         ]]>
     </fx:Script>
+	
     <mx:Label text="Product Total: {pTotal}"/>
+	
 </mx:VBox>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/printing/FormPrintHeader.mxml b/TourDeFlex/TourDeFlex3/src/mx/printing/FormPrintHeader.mxml
index b2283fd..1c4cc16 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/printing/FormPrintHeader.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/printing/FormPrintHeader.mxml
@@ -19,7 +19,7 @@
 <!-- Custom control for the header area of the printed page. -->
 
 <mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
-	width="60%" horizontalAlign="right" >
+	width="60%" horizontalAlign="right">
 
     <mx:Label text="This is a placeholder for first page contents"/>
 </mx:VBox>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/printing/FormPrintView.mxml b/TourDeFlex/TourDeFlex3/src/mx/printing/FormPrintView.mxml
index dabe443..fb59c4d 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/printing/FormPrintView.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/printing/FormPrintView.mxml
@@ -21,7 +21,7 @@
 <mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
 	xmlns="*" backgroundColor="#FFFFFF" paddingTop="50" paddingBottom="50" paddingLeft="50">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
             import mx.core.*
             // Declare and initialize the variables used in the component.
diff --git a/TourDeFlex/TourDeFlex3/src/mx/printing/PrintDataGridExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/printing/PrintDataGridExample.mxml
index d3ef7e9..53a05dc 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/printing/PrintDataGridExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/printing/PrintDataGridExample.mxml
@@ -18,9 +18,10 @@
 
 <!-- Main application to print a DataGrid control on multiple pages. -->
 
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" initialize="initData();">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" initialize="initData()">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
 
 		import mx.core.FlexGlobals;
@@ -120,8 +121,9 @@
         ]]>
     </fx:Script>
 
-    <mx:Panel title="DataGrid Printing Example" height="75%" width="75%"
-        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+    <mx:Panel title="DataGrid Printing Example"
+			  paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+			  height="100%" width="100%">
 
         <mx:DataGrid id="myDataGrid" dataProvider="{dgProvider}">
             <mx:columns>
@@ -130,14 +132,14 @@
             </mx:columns>
         </mx:DataGrid>
 
-        <mx:Text width="100%" color="blue"
+        <mx:Text width="100%"
             text="Specify the number of lines and click Fill Grid first. Then you can click Print."/>
 
         <mx:TextInput id="dataItems" text="35"/>
 
         <mx:HBox>
-            <mx:Button id="setDP" label="Fill Grid" click="setdgProvider(int(dataItems.text));"/>
-            <mx:Button id="printDG" label="Print" click="doPrint();"/>
+            <mx:Button id="setDP" label="Fill Grid" click="setdgProvider(int(dataItems.text))"/>
+            <mx:Button id="printDG" label="Print" click="doPrint()"/>
         </mx:HBox>
     </mx:Panel>
 </mx:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/mx/states/StatesExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/states/StatesExample.mxml
index d0f70b1..3ec680d 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/states/StatesExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/states/StatesExample.mxml
@@ -17,7 +17,9 @@
   -->
 
 <!-- Simple example to demonstrate the States class. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
     <!-- Define one view state, in addition to the base state.-->
     <mx:states>
@@ -27,10 +29,11 @@
 
     <!-- Define a Panel container that defines the login form.-->
     <mx:Panel title="Login" title.register="Register" id="loginPanel" 
-        horizontalScrollPolicy="off" verticalScrollPolicy="off"
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+        		horizontalScrollPolicy="off" verticalScrollPolicy="off"	
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
-        <mx:Text width="100%" color="blue"
+        <mx:Text width="100%"
             text="Click the 'Need to Register?' link to change state. Click the 'Return to Login' link to return to the base state."/>
 
         <mx:Form id="loginForm">
diff --git a/TourDeFlex/TourDeFlex3/src/mx/states/TransitionExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/states/TransitionExample.mxml
index a246307..fd8b14a 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/states/TransitionExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/states/TransitionExample.mxml
@@ -17,7 +17,9 @@
   -->
 
 <!-- Simple example to demonstrate the Transition class. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
     <!-- Define one view state, in addition to the base state.-->
     <mx:states>
@@ -53,10 +55,11 @@
 
     <!-- Define a Panel container that defines the login form.-->
     <mx:Panel title="Login" title.register="Register" id="loginPanel" 
-        horizontalScrollPolicy="off" verticalScrollPolicy="off"
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+       			horizontalScrollPolicy="off" verticalScrollPolicy="off"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 	
-        <mx:Text width="100%" color="blue"
+        <mx:Text width="100%"
             text="Click the 'Need to Register?' link to change state. Click the 'Return to Login' link to return to the base state."/>
 
         <mx:Form id="loginForm">
diff --git a/TourDeFlex/TourDeFlex3/src/mx/validators/CreditCardValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/validators/CreditCardValidatorExample.mxml
index cbf97a5..044a310 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/validators/CreditCardValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/validators/CreditCardValidatorExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the CreditCardValidator. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
-
-    <fx:Script>
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+	
+     <fx:Script>
         import mx.controls.Alert;
     </fx:Script>
 
@@ -38,12 +40,13 @@
 	        trigger="{myButton}" triggerEvent="click"
 	        cardTypeListener="{cardTypeCombo}"
 	        cardNumberListener="{cardNumberInput}"
-	        valid="Alert.show('Validation Succeeded!');"/>
+	        valid="Alert.show('Validation Succeeded!')"/>
 	</fx:Declarations>
   
-    <mx:Panel title="CreditCardValidator Example" width="75%" height="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
-
+    <mx:Panel title="CreditCardValidator Example"	
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+		
         <mx:Form id="creditCardForm">
             <mx:FormItem label="Card Type">    
                 <mx:ComboBox id="cardTypeCombo">
diff --git a/TourDeFlex/TourDeFlex3/src/mx/validators/CurrencyValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/validators/CurrencyValidatorExample.mxml
index d937c34..ed3ccbb 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/validators/CurrencyValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/validators/CurrencyValidatorExample.mxml
@@ -17,20 +17,23 @@
   -->
 
 <!-- Simple example to demonstrate the CurrencyValidator. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         import mx.controls.Alert;
     </fx:Script>
 
 	<fx:Declarations>
 	    <mx:CurrencyValidator source="{priceUS}" property="text" precision="2" 
 	        trigger="{myButton}" triggerEvent="click" 
-	        valid="Alert.show('Validation Succeeded!');"/>
+	        valid="Alert.show('Validation Succeeded!')"/>
 	</fx:Declarations>
 
-    <mx:Panel title="CurrencyValidator Example" width="75%" height="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="CurrencyValidator Example"	
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
         
         <mx:Form>
             <mx:FormItem label="Enter a U.S. dollar amount: ">
diff --git a/TourDeFlex/TourDeFlex3/src/mx/validators/DateValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/validators/DateValidatorExample.mxml
index 17293a9..3009147 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/validators/DateValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/validators/DateValidatorExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the DateValidator. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         import mx.controls.Alert;
     </fx:Script>
 
@@ -32,11 +34,12 @@
 	
 	    <mx:DateValidator source="{dob}" property="text" allowedFormatChars="/" 
 	        trigger="{myButton}" triggerEvent="click" 
-	        valid="Alert.show('Validation Succeeded!');"/>
+	        valid="Alert.show('Validation Succeeded!')"/>
 	</fx:Declarations>
 	
-    <mx:Panel title="DateValidator Example" width="75%" height="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="DateValidator Example"	
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:Form>
             <mx:FormItem label="Enter date of birth (mm/dd/yyyy): ">
diff --git a/TourDeFlex/TourDeFlex3/src/mx/validators/EmailValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/validators/EmailValidatorExample.mxml
index 558971f..4ecd625 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/validators/EmailValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/validators/EmailValidatorExample.mxml
@@ -17,20 +17,23 @@
   -->
 
 <!-- Simple example to demonstrate the EmailValidator. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         import mx.controls.Alert;
     </fx:Script>
 
 	<fx:Declarations>
 	   <mx:EmailValidator source="{email}" property="text" 
 	       trigger="{myButton}" triggerEvent="click"
-	       valid="Alert.show('Validation Succeeded!');"/>
+	       valid="Alert.show('Validation Succeeded!')"/>
 	</fx:Declarations>
 
-   <mx:Panel title="EmailValidator Example" width="75%" height="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+   <mx:Panel title="EmailValidator Example"	
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:Form>
             <mx:FormItem label="Enter an e-mail address: ">
diff --git a/TourDeFlex/TourDeFlex3/src/mx/validators/NumberValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/validators/NumberValidatorExample.mxml
index 979ce17..3d10ec3 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/validators/NumberValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/validators/NumberValidatorExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the NumberValidator. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         import mx.controls.Alert;
     </fx:Script>
 
@@ -27,11 +29,12 @@
 	    <mx:NumberValidator source="{age}" property="text" integerError="Enter Integer value"
 	        minValue="18" maxValue="50" domain="int" 
 	        trigger="{myButton}" triggerEvent="click"
-	        valid="Alert.show('Validation Succeeded!');"/>
+	        valid="Alert.show('Validation Succeeded!')"/>
 	</fx:Declarations>
 
-    <mx:Panel title="NumberValidator Example" width="75%" height="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="NumberValidator Example"	
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:Form>
             <mx:FormItem label="Enter an age between 18 and 50: ">
diff --git a/TourDeFlex/TourDeFlex3/src/mx/validators/PhoneNumberValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/validators/PhoneNumberValidatorExample.mxml
index 309802b..8f9edaa 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/validators/PhoneNumberValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/validators/PhoneNumberValidatorExample.mxml
@@ -17,24 +17,27 @@
   -->
 
 <!-- Simple example to demonstrate the PhoneNumberValidator. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         import mx.controls.Alert;
     </fx:Script>
 
 	<fx:Declarations>
 	    <mx:PhoneNumberValidator source="{phone}" property="text" 
 	        trigger="{myButton}" triggerEvent="click"
-	        valid="Alert.show('Validation Succeeded!');"/>
+	        valid="Alert.show('Validation Succeeded!')" />
 	</fx:Declarations>
 
-    <mx:Panel title="Phone Number Validator Panel" width="75%" height="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="Phone Number Validator Panel"
+			  paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+			  height="100%" width="100%">
 
         <mx:Form>
             <mx:FormItem label="Enter 10-digit phone number: ">
-                <mx:TextInput id="phone" width="100%"/>
+                <mx:TextInput id="phone" width="100%" />
             </mx:FormItem>
 
             <mx:FormItem >
diff --git a/TourDeFlex/TourDeFlex3/src/mx/validators/RegExValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/validators/RegExValidatorExample.mxml
index 8ee9cf9..6cbab18 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/validators/RegExValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/validators/RegExValidatorExample.mxml
@@ -17,7 +17,9 @@
   -->
 
 <!-- Simple example to demonstrate the RegExpValidator. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
 	<fx:Script>
 		<![CDATA[
@@ -55,8 +57,9 @@
 			trigger="{myButton}" triggerEvent="click"/>
 	</fx:Declarations>
 	
-   <mx:Panel title="RegExpValidator Example" width="95%" height="95%" 
-        paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">
+   <mx:Panel title="RegExpValidator Example"	
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
    
         <mx:Text width="100%" text="Instructions:"/>
         <mx:Text width="100%" text="1. Enter text to search. By default, enter  a string containing the letters ABC in sequence followed by any digit."/>
diff --git a/TourDeFlex/TourDeFlex3/src/mx/validators/SimpleValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/validators/SimpleValidatorExample.mxml
index 120574e..e0986dd 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/validators/SimpleValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/validators/SimpleValidatorExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate the Validator class. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
 
 			// Import necessary classes.
@@ -51,11 +53,12 @@
 	        valid="handleValid(event)" invalid="handleValid(event)"/>
 	</fx:Declarations>
         
-    <mx:Panel title="Validator Example" width="100%" height="100%" 
-            paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">
+    <mx:Panel title="Validator Example"	
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:Form>
-            <mx:Text width="100%" color="blue"
+            <mx:Text width="100%"
                 text="Enter a value in the Name field before you can submit. The E-mail field is optional."/>
 
             <mx:FormItem label="Name: " required="true">
@@ -68,7 +71,7 @@
             
             <mx:FormItem>
                 <mx:Button id="submitButton" enabled="false" 
-                    label="Submit" click="submitForm();"/>
+                    label="Submit" click="submitForm()"/>
             </mx:FormItem>
         </mx:Form>
 
diff --git a/TourDeFlex/TourDeFlex3/src/mx/validators/SocialSecurityValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/validators/SocialSecurityValidatorExample.mxml
index 92cd7cf..92c862c 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/validators/SocialSecurityValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/validators/SocialSecurityValidatorExample.mxml
@@ -17,20 +17,23 @@
   -->
 
 <!-- Simple example to demonstrate SocialSecurityValidator. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         import mx.controls.Alert;
     </fx:Script>
 
 	<fx:Declarations>
 	    <mx:SocialSecurityValidator source="{ssn}" property="text" 
 	        trigger="{myButton}" triggerEvent="click"
-	        valid="Alert.show('Validation Succeeded!');"/>
+	        valid="Alert.show('Validation Succeeded!')"/>
 	</fx:Declarations>
 
-    <mx:Panel title="Social Security Validator Panel" width="75%" height="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="Social Security Validator Panel"	
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
         
         <mx:Form>
             <mx:FormItem label="Enter Social Security number: ">
diff --git a/TourDeFlex/TourDeFlex3/src/mx/validators/StringValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/validators/StringValidatorExample.mxml
index 6e0e655..f04e5ca 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/validators/StringValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/validators/StringValidatorExample.mxml
@@ -17,9 +17,11 @@
   -->
 
 <!-- Simple example to demonstrate StringValidator. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         import mx.controls.Alert;
     </fx:Script>
 
@@ -29,11 +31,12 @@
 	    	tooLongError="This string is longer than the maximum allowed length of 20." 
 	    	minLength="4" maxLength="20"  
 	    	trigger="{myButton}" triggerEvent="click" 
-	    	valid="Alert.show('Validation Succeeded!');"/>
+	    	valid="Alert.show('Validation Succeeded!')"/>
 	</fx:Declarations>
 
-    <mx:Panel title="StringValidator Example" width="75%" height="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="StringValidator Example"	
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
             <mx:Form>               
 			    <mx:FormItem label="Enter a name between 4 and 20 characters: ">
diff --git a/TourDeFlex/TourDeFlex3/src/mx/validators/ZipCodeValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/validators/ZipCodeValidatorExample.mxml
index b5375ef..aa193ca 100755
--- a/TourDeFlex/TourDeFlex3/src/mx/validators/ZipCodeValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/mx/validators/ZipCodeValidatorExample.mxml
@@ -17,20 +17,23 @@
   -->
 
 <!-- Simple example to demonstrate the ZipCodeValidator. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
 
-    <fx:Script>
+     <fx:Script>
         import mx.controls.Alert;
     </fx:Script>
 
 	<fx:Declarations>
 	    <mx:ZipCodeValidator source="{zip}" property="text" 
 	        trigger="{myButton}" triggerEvent="click"  
-	        valid="Alert.show('Validation Succeeded!');"/>
+	        valid="Alert.show('Validation Succeeded!')"/>
 	</fx:Declarations>
 
-    <mx:Panel title="ZipcodeValidator Example" width="75%" height="75%" 
-        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+    <mx:Panel title="ZipcodeValidator Example"	
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
 
         <mx:Form>
             <mx:FormItem label="Enter a 5 or 9 digit U.S. Zip code: ">
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"/>
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"/>
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"
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" 
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"
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"
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%"
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"
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"
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>
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>
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>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/TDFGradientBackgroundSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/TDFGradientBackgroundSkin.mxml
deleted file mode 100644
index 553aee3..0000000
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/TDFGradientBackgroundSkin.mxml
+++ /dev/null
@@ -1,49 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-
-  Licensed to the Apache Software Foundation (ASF) under one or more
-  contributor license agreements.  See the NOTICE file distributed with
-  this work for additional information regarding copyright ownership.
-  The ASF licenses this file to You under the Apache License, Version 2.0
-  (the "License"); you may not use this file except in compliance with
-  the License.  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-
--->
-<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
-			 xmlns:mx="library://ns.adobe.com/flex/mx" 
-			 xmlns:s="library://ns.adobe.com/flex/spark">
-	
-	<fx:Metadata>
-		[HostComponent("spark.components.Application")]
-	</fx:Metadata> 
-	
-	<s:states>
-		<s:State name="normal" />
-		<s:State name="disabled" />
-	</s:states>
-	
-	<s:layout>
-		<s:BasicLayout />
-	</s:layout>
-	
-	<s:Rect id="bg" width="100%" height="100%">
-		<s:fill>
-			<s:LinearGradient rotation="90">
-				<s:entries>
-					<s:GradientEntry color="0x000000" ratio="0.00" />
-					<s:GradientEntry color="0x323232" ratio="1.0" />
-				</s:entries>
-			</s:LinearGradient>    
-		</s:fill>
-	</s:Rect>
-	
-	<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
-</s:SparkSkin>
\ No newline at end of file
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 >
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/TDFGradientBackgroundSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/components/TDFGradientBackgroundSkin.mxml
deleted file mode 100644
index 553aee3..0000000
--- a/TourDeFlex/TourDeFlex3/src/spark/components/TDFGradientBackgroundSkin.mxml
+++ /dev/null
@@ -1,49 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-
-  Licensed to the Apache Software Foundation (ASF) under one or more
-  contributor license agreements.  See the NOTICE file distributed with
-  this work for additional information regarding copyright ownership.
-  The ASF licenses this file to You under the Apache License, Version 2.0
-  (the "License"); you may not use this file except in compliance with
-  the License.  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-
--->
-<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
-			 xmlns:mx="library://ns.adobe.com/flex/mx" 
-			 xmlns:s="library://ns.adobe.com/flex/spark">
-	
-	<fx:Metadata>
-		[HostComponent("spark.components.Application")]
-	</fx:Metadata> 
-	
-	<s:states>
-		<s:State name="normal" />
-		<s:State name="disabled" />
-	</s:states>
-	
-	<s:layout>
-		<s:BasicLayout />
-	</s:layout>
-	
-	<s:Rect id="bg" width="100%" height="100%">
-		<s:fill>
-			<s:LinearGradient rotation="90">
-				<s:entries>
-					<s:GradientEntry color="0x000000" ratio="0.00" />
-					<s:GradientEntry color="0x323232" ratio="1.0" />
-				</s:entries>
-			</s:LinearGradient>    
-		</s:fill>
-	</s:Rect>
-	
-	<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
-</s:SparkSkin>
\ No newline at end of file
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"
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[
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, 
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>
 	
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:Label color="0x323232" verticalAlign="justify" 
+		<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: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>
 	
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>
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>
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>
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>
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>
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%">
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."/>
 
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/skins/TDFPanelSkin.mxml
deleted file mode 100644
index f9151dc..0000000
--- a/TourDeFlex/TourDeFlex3/src/spark/containers/skins/TDFPanelSkin.mxml
+++ /dev/null
@@ -1,171 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-
-  Licensed to the Apache Software Foundation (ASF) under one or more
-  contributor license agreements.  See the NOTICE file distributed with
-  this work for additional information regarding copyright ownership.
-  The ASF licenses this file to You under the Apache License, Version 2.0
-  (the "License"); you may not use this file except in compliance with
-  the License.  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-
--->
-
-
-<!--- Custom Spark Panel Skin created for Tour de Flex.  
-
-@langversion 3.0
-@playerversion Flash 10
-@playerversion AIR 1.5
-@productversion Flex 4
--->
-<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"
-			 blendMode.disabled="layer">
-	
-	<fx:Metadata>
-		<![CDATA[ 
-		/** 
-		* @copy spark.skins.spark.ApplicationSkin#hostComponent
-		*/
-		[HostComponent("spark.components.Panel")]
-		]]>
-	</fx:Metadata> 
-	
-	<fx:Script>
-		/* Define the skin elements that should not be colorized. 
-		For panel, border and title backround are skinned, but the content area and title text are not. */
-		static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"];
-		
-		/** 
-		 * @copy spark.skins.SparkSkin#colorizeExclusions
-		 */     
-		override public function get colorizeExclusions():Array {return exclusions;}
-		
-		/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
-		static private const contentFill:Array = [];
-		
-		/**
-		 * @inheritDoc
-		 */
-		override public function get contentItems():Array {return contentFill};
-	</fx:Script>
-	
-	<s:states>
-		<s:State name="normal" />
-		<s:State name="disabled" />
-		<s:State name="normalWithControlBar" />
-		<s:State name="disabledWithControlBar" />
-	</s:states>
-	
-	<!-- drop shadow -->
-	<s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11" 
-							 angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
-	
-	<!-- layer 1: border -->
-	<s:Rect left="0" right="0" top="0" bottom="0">
-		<s:stroke>
-			<s:SolidColorStroke color="0" alpha="0.50" weight="1" />
-		</s:stroke>
-	</s:Rect>
-	
-	
-	<!-- layer 2: background fill -->
-	<!-- This layer was modified for Tour de Flex samples to have a gradient border at the bottom. -->
-	<s:Rect left="0" right="0" bottom="0" height="15">
-		<s:fill>
-			<s:LinearGradient rotation="90">
-				<s:GradientEntry color="0xE2E2E2" />
-				<s:GradientEntry color="0x000000" />
-			</s:LinearGradient>
-		</s:fill>
-	</s:Rect>
-	
-	<!-- layer 3: contents -->
-	<!--- contains the vertical stack of titlebar content and controlbar -->
-	<s:Group left="1" right="1" top="1" bottom="1" >
-		<s:layout>
-			<s:VerticalLayout gap="0" horizontalAlign="justify" />
-		</s:layout>
-		
-		<s:Group id="topGroup" >
-			<!-- layer 0: title bar fill -->
-			<!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex -->
-			<s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
-				<s:fill>
-					<s:SolidColor color="0x000000" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 1: title bar highlight -->
-			<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
-				<s:stroke>
-					<s:LinearGradientStroke rotation="90" weight="1">
-						<s:GradientEntry color="0xEAEAEA" />
-						<s:GradientEntry color="0xD9D9D9" />
-					</s:LinearGradientStroke>
-				</s:stroke>
-			</s:Rect>
-			
-			<!-- layer 2: title bar divider -->
-			<s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
-				<s:fill>
-					<s:SolidColor color="0xC0C0C0" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 3: text -->
-			<!--- Defines the appearance of the PanelSkin class's title bar. -->
-			<!-- Note: The title text display has been slightly modified for Tour de Flex. -->
-			<s:Label id="titleDisplay" lineBreak="explicit"
-						  left="9" top="1" bottom="0" minHeight="30"
-						  verticalAlign="middle" fontWeight="bold" color="#E2E2E2">
-			</s:Label>
-		</s:Group>
-		
-		<!--
-		Note: setting the minimum size to 0 here so that changes to the host component's
-		size will not be thwarted by this skin part's minimum size.   This is a compromise,
-		more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
-		-->
-		<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
-		</s:Group>
-		
-		<s:Group id="bottomGroup" minWidth="0" minHeight="0"
-				 includeIn="normalWithControlBar, disabledWithControlBar" >
-			
-			<!-- layer 0: control bar background -->
-			<!-- Note: We are skinning this to be the gradient in case we do specify control
-			bar content, but it will only display if there's a controlBarContent
-			property specified.-->
-			<s:Rect left="0" right="0" bottom="0" top="0" height="15">
-				<s:fill>
-					<s:LinearGradient rotation="90">
-						<s:GradientEntry color="0xE2E2E2" />
-						<s:GradientEntry color="0x000000" />
-					</s:LinearGradient>
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 1: control bar divider line -->
-			<s:Rect left="0" right="0" top="0" height="1" >
-				<s:fill>
-					<s:SolidColor color="0xCDCDCD" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 2: control bar -->
-			<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0">
-				<s:layout>
-					<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
-				</s:layout>
-			</s:Group>
-		</s:Group>
-	</s:Group>
-</s:SparkSkin>
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>
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>
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">
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>
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>
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."/>
 		
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.  "/>
 			
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;
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;
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;
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}"/>
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>
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>    
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>
 		
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DropdownExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DropdownExample.mxml
index d94429f..7227822 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/DropdownExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DropdownExample.mxml
@@ -66,13 +66,10 @@
 		]]>
 	</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="DropDownList Sample" 
-			 width="100%" height="100%" 
-			 skinClass="skins.TDFPanelSkin">
+	<s:Panel title="DropDownList Sample" width="100%" height="100%">
+		
 		<s:VGroup width="100%" height="100%" left="120" top="5">
-			<s:Label text="RJ's Warehouse Price Checker" fontSize="18" color="0x014f9f"/>
+			<s:Label text="RJ's Warehouse Price Checker" fontSize="18" />
 			<s:DropDownList id="list1" width="50%" dataProvider="{depts}" labelField="label" 
 							prompt="Select Category"
 							change="handleDepartmentSelected(event)"/>
@@ -81,7 +78,7 @@
 			<mx:Spacer height="10"/>
 			<s:Label fontSize="14" color="0x336699" text="The price of item: {list2.selectedItem.label} is: ${list1.selectedItem.data}" verticalAlign="bottom"/>
 		</s:VGroup>
-		<s:Label top="10" right="10" width="250" verticalAlign="justify" color="#323232" 
+		<s:Label top="10" right="10" width="250" verticalAlign="justify" 
 					  text="The DropDownList control contains a drop-down list from which the user can select a single value. Its functionality is very similar to that of the SELECT form element in HTML.
 The DropDownList control consists of the anchor button, prompt area, and drop-down-list, Use the anchor button to open and close the drop-down-list. The prompt area displays a prompt String, or the selected item in the drop-down-list."/>
 	</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/FormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/FormExample.mxml
index 79af492..3895ae7 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/FormExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/FormExample.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:Model id="checkModel">
@@ -43,23 +42,14 @@
 		<mx:ZipCodeValidator source="{zip}" property="text"/>
 		
 	</fx:Declarations>
-    
-    
-	<s:layout>
-		<s:HorizontalLayout horizontalAlign="center" />
-	</s:layout>
 	
-	<s:Panel title="Form Container: Moving from one form field to another triggers the validator" color="0x000000" 
-			 borderAlpha="0.15" 
-			 width="600">
+	<s:Panel title="Form Container: Moving from one form field to another triggers the validator" width="100%" height="100%">
 		
 		<s:layout>
-			<s:VerticalLayout horizontalAlign="center" 
-							  paddingLeft="10" paddingRight="10" 
-							  paddingTop="10" paddingBottom="10"/>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 
-        <mx:Form width="100%" color="0x323232" paddingTop="0">
+        <mx:Form width="100%" paddingTop="0">
             <mx:FormHeading fontSize="10"  label="Enter values into the form." paddingTop="0" />
 
             <mx:FormItem label="First name">
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ImageExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ImageExample.mxml
index f3473b7..35379c4 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ImageExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ImageExample.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[
@@ -32,38 +31,26 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout horizontalAlign="center" />
-	</s:layout>
-	
-	<s:Panel title="Image Samples" color="0x000000" 
-			  borderAlpha="0.15" 
-			  width="600">
-		
+	<s:Panel title="Image 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>
 		
-		<!--<mx:VBox width="100%" borderColor="0xACACAC" borderThickness="1" borderStyle="solid" horizontalAlign="center"
-		 	paddingTop="5" paddingRight="5" paddingBottom="5" paddingLeft="5" >-->
-		<s:BorderContainer width="50%" borderColor="0xACACAC" height="100%" borderStyle="solid">
-			
+		<s:BorderContainer width="50%" height="100%">
 			<s:layout>
 				<s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/>
 			</s:layout>
-			<s:Label color="0x323232" text="Sample of image embeded at compile time." />
-			<mx:Image id="embededImage" width="50%" height="50%" source="@Embed('assets/ApacheFlexLogo.png')" creationComplete="smoothImage(event);"/>
+			<s:Label text="Sample of image embeded at compile time." />
+			<mx:Image id="embededImage" width="50%" height="50%" source="@Embed('assets/ApacheFlexLogo.png')" creationComplete="smoothImage(event)"/>
 		</s:BorderContainer>
 		
-		<s:BorderContainer width="50%" borderColor="0xACACAC" height="100%" borderStyle="solid">
-			
+		<s:BorderContainer width="50%" height="100%">
 			<s:layout>
 				<s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/>
 			</s:layout>
-			<s:Label color="0x323232" text="Sample of image loaded at run-time." />
-			<mx:Image id="loadedImage" width="50%" height="50%" source="assets/ApacheFlexLogo.png" creationComplete="smoothImage(event);"/>
+			<s:Label text="Sample of image loaded at run-time." />
+			<mx:Image id="loadedImage" width="50%" height="50%" source="assets/ApacheFlexLogo.png" creationComplete="smoothImage(event)"/>
 		</s:BorderContainer>
 	</s:Panel>
 	
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/LinkBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/LinkBarExample.mxml
index eff7901..2af6b20 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/LinkBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/LinkBarExample.mxml
@@ -19,28 +19,21 @@
 -->
 <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="LinkBar Control" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="LinkBar 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" textAlign="center"
+		<s:Label width="100%" textAlign="center"
 				 text="Select a link in the LinkBar control to set the active child of the ViewStack container."/>
 		
 		<mx:LinkBar color="0x0050AA" horizontalAlign="center" width="100%" fontWeight="bold" dataProvider="{myViewStack}" borderColor="0xACACAC" borderStyle="solid"/>
 		
 		<!-- Define the ViewStack and the three child containers -->
-		<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="Customer Info" backgroundColor="0xDCDCDC" fontWeight="bold">
 				<s:layout>
@@ -64,7 +57,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>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/LinkButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/LinkButtonExample.mxml
index 02aaaf8..bcec4d0 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/LinkButtonExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/LinkButtonExample.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,21 +27,13 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout horizontalAlign="center" />
-	</s:layout>
-	
-	<s:Panel title="LinkButton Sample" color="0x000000" 
-			 borderAlpha="0.15" 
-			 width="600">
-		
+	<s:Panel title="LinkButton Sample" width="100%" height="100%">
+
 		<s:layout>
-			<s:VerticalLayout horizontalAlign="center" 
-								paddingLeft="10" paddingRight="10" 
-								paddingTop="10" paddingBottom="10"/>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		
-		<s:Label color="0x323232" text="Sample of image embeded at compile time." />
+		<s:Label text="Sample of image embeded at compile time." />
 		<mx:LinkButton label="LinkButton Control" color="0x3380DD" click="{Alert.show('LinkButton Pressed');}"
 			 textDecoration="underline" fontWeight="normal" icon="@Embed('assets/arrow_icon.png')" />
 	</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ListDataPagingExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ListDataPagingExample.mxml
index 75aeb35..619845a 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ListDataPagingExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ListDataPagingExample.mxml
@@ -20,7 +20,7 @@
 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 			   xmlns:s="library://ns.adobe.com/flex/spark"
 			   xmlns:local="*"
-			   initialize="loadSecurity();">
+			   initialize="loadSecurity()">
 	
 	<fx:Script>
 		<![CDATA[
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ListExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ListExample.mxml
index 4a405f9..b83173c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ListExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ListExample.mxml
@@ -56,42 +56,43 @@
 		}
 	</fx:Style>
 		
-	<s:Panel title="List Sample" 
-			 width="100%" height="100%"  
-			 skinClass="skins.TDFPanelSkin">
-		<s:VGroup id="vGrp" horizontalCenter="0" top="3" 
-				  width="80%" height="75%">
-			<s:HGroup verticalAlign="middle">
-				<s:Label text="Select items to add, price will be shown when added:" 
-							  verticalAlign="bottom"/>
-			</s:HGroup>
-			<s:HGroup >
-				<s:List id="myList" height="157" width="160" 
-						itemRenderer="MyListItemRenderer" 
-						change="itemIndexChangeHandler(event)">
-					<s:dataProvider>
-						<s:ArrayCollection>
-							<local:Item name="Backpack" photo="assets/ApacheFlexLogo.png" price="29.99"/>
-							<local:Item name="Boots" photo="assets/ApacheFlexLogo.png" price="69.99"/>
-							<local:Item name="Compass" photo="assets/ApacheFlexLogo.png" price="12.99"/>
-							<local:Item name="Goggles" photo="assets/ApacheFlexLogo.png" price="14.99"/>
-							<local:Item name="Helmet" photo="assets/ApacheFlexLogo.png" price="47.99"/>
-						</s:ArrayCollection>
-					</s:dataProvider>
-				</s:List>
-				<s:TextArea id="ta" width="{myList.width}" height="{myList.height}" 
-							color="0xAE0A0A" fontWeight="bold"/>
-				<s:VGroup>
-					<mx:Spacer height="10"/>
-					<s:Label text="Total of Items selected: {usdFormatter.format(this.totalPrice)}"/> 
-					<s:Button id="buyBtn" horizontalCenter="0" bottom="30" label="Buy Now!" 
-							  fontWeight="bold" 
-							  click="buyBtn_clickHandler(event)"/>
-					<s:Label id="txtResponse"/>
-				</s:VGroup>
-			</s:HGroup>
-		</s:VGroup>
-		<s:Label bottom="15" horizontalCenter="0" width="95%" verticalAlign="justify" color="#323232" 
+	<s:Panel title="List Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Select items to add, price will be shown when added:" 
+						  verticalAlign="bottom"/>
+		</s:HGroup>
+		<s:HGroup>
+			<s:List id="myList" height="157" width="160" 
+					itemRenderer="MyListItemRenderer" 
+					change="itemIndexChangeHandler(event)">
+				<s:dataProvider>
+					<s:ArrayCollection>
+						<local:Item name="Backpack" photo="assets/ApacheFlexLogo.png" price="29.99"/>
+						<local:Item name="Boots" photo="assets/ApacheFlexLogo.png" price="69.99"/>
+						<local:Item name="Compass" photo="assets/ApacheFlexLogo.png" price="12.99"/>
+						<local:Item name="Goggles" photo="assets/ApacheFlexLogo.png" price="14.99"/>
+						<local:Item name="Helmet" photo="assets/ApacheFlexLogo.png" price="47.99"/>
+					</s:ArrayCollection>
+				</s:dataProvider>
+			</s:List>
+			<s:TextArea id="ta" width="{myList.width}" height="{myList.height}" 
+						color="0xAE0A0A" fontWeight="bold"/>
+			<s:VGroup>
+				<mx:Spacer height="10"/>
+				<s:Label text="Total of Items selected: {usdFormatter.format(this.totalPrice)}"/> 
+				<s:Button id="buyBtn" horizontalCenter="0" bottom="30" label="Buy Now!" 
+						  fontWeight="bold" 
+						  click="buyBtn_clickHandler(event)"/>
+				<s:Label id="txtResponse"/>
+			</s:VGroup>
+		</s:HGroup>
+
+		<s:Label bottom="15" horizontalCenter="0" width="95%" verticalAlign="justify" 
 					  text="The Spark List control displays a list of data items. Its functionality is
 very similar to that of the SELECT form element in HTML. The user can select one or more items from the list. 
 The List control automatically displays horizontal and vertical scroll bar when the list items do not fit 
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml
index d2e6d08..303a239 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml
@@ -26,8 +26,6 @@
 			import mx.events.FlexEvent;
 			import mx.events.MenuEvent;
 			
-			import skins.TDFPanelSkin;
-			
 			protected var myMenu:Menu; 
 			
 			protected function showHandler(event:MouseEvent):void
@@ -74,14 +72,19 @@
 		</fx:XML>
 	</fx:Declarations>
 	
-	<s:Panel title="Menu Sample" width="100%" height="100%" skinClass="skins.TDFPanelSkin">
+	<s:Panel title="Menu Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
 		<s:HGroup bottom="15" horizontalCenter="0" verticalAlign="middle">
 			<s:Button label="Show Menu" click="showHandler(event)" />
 			<s:Button label="Hide Menu" click="hideHandler(event)" />
-			<s:Label text="Menu Item Selected:" fontWeight="bold" fontSize="12" color="0x336699"/>
+			<s:Label text="Menu Item Selected:" fontWeight="bold" />
 			<s:Label id="lblSelected" />
 		</s:HGroup>
-		<s:Label width="220" color="#323232" top="15" right="50"
+		<s:Label width="220" top="15" right="50"
 				 text="The Menu control is a pop-up control that contains a menu of individually selectable choices. You use ActionScript 
 				 to create a Menu control that pops up in response to a user action, typically as part of an event listener."/>	
 
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/NumericStepperExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/NumericStepperExample.mxml
index 65ca477..9a845ee 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/NumericStepperExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/NumericStepperExample.mxml
@@ -46,46 +46,42 @@
 			
 	</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="NumericStepper Sample" 
-			 width="100%" height="100%" 
-			 skinClass="skins.TDFPanelSkin">
+	<s:Panel title="NumericStepper Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
 			
-			<s:HGroup left="15" top="10">
-				<s:Label width="250" verticalAlign="justify" color="#323232" 
-						 text="The NumericStepper control allows you to select a number from an
+		<s:Label width="250" verticalAlign="justify" 
+				 text="The NumericStepper control allows you to select a number from an
 ordered set. The NumericStepper control consists of a single-line input text field and a pair of arrow buttons
 for stepping through the valid values. You can use the Up Arrow and Down arrow keys to cycle through the values."/>
-				
-				<mx:Form >
-					<mx:FormHeading id="formHead" label="Welcome to Ticket Grabber!"/>
-					<mx:FormItem label="Name:">
-						<s:TextInput id="nameTxt" widthInChars="20"/>
-					</mx:FormItem>
-					<mx:FormItem label="Address:">
-						<s:TextArea widthInChars="20" heightInLines="2"/>
-					</mx:FormItem>
-					<mx:FormItem label="Phone:">
-						<s:TextInput id="phoneTxt" widthInChars="20"/>	
-					</mx:FormItem>
-					<mx:FormItem label="Select # of tickets:">
-						<s:NumericStepper id="numStepper" width="55" 
-										  value="0" snapInterval="2"/>
-					</mx:FormItem>
-					<mx:FormItem>
-						<s:Button label="Buy Now!" click="clickHandler(event)"/>
-					</mx:FormItem>
-					<mx:FormItem>
-						<s:Group>
-							<s:Label id="responseText"/>	
-						</s:Group>
-					</mx:FormItem>
-				</mx:Form>
-			</s:HGroup>
 		
+		<mx:Form>
+			<mx:FormHeading id="formHead" label="Welcome to Ticket Grabber!"/>
+			<mx:FormItem label="Name:">
+				<s:TextInput id="nameTxt" widthInChars="20"/>
+			</mx:FormItem>
+			<mx:FormItem label="Address:">
+				<s:TextArea widthInChars="20" heightInLines="2"/>
+			</mx:FormItem>
+			<mx:FormItem label="Phone:">
+				<s:TextInput id="phoneTxt" widthInChars="20"/>	
+			</mx:FormItem>
+			<mx:FormItem label="Select # of tickets:">
+				<s:NumericStepper id="numStepper" width="55" 
+								  value="0" snapInterval="2"/>
+			</mx:FormItem>
+			<mx:FormItem>
+				<s:Button label="Buy Now!" click="clickHandler(event)"/>
+			</mx:FormItem>
+			<mx:FormItem>
+				<s:Group>
+					<s:Label id="responseText"/>	
+				</s:Group>
+			</mx:FormItem>
+		</mx:Form>
 		
-		</s:Panel>
-
+	</s:Panel>
 	
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/OLAPDataGridExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/OLAPDataGridExample.mxml
index d176fc8..083a41b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/OLAPDataGridExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/OLAPDataGridExample.mxml
@@ -19,9 +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" 
-			   skinClass="TDFGradientBackgroundSkin"
-			   creationComplete="creationCompleteHandler();">
+			   xmlns:mx="library://ns.adobe.com/flex/mx"
+			   creationComplete="creationCompleteHandler()">
 	
 	<fx:Script>
 		<![CDATA[
@@ -178,12 +177,8 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout horizontalAlign="center" />
-	</s:layout>
-	
 	<fx:Declarations>
-		<mx:OLAPCube name="FlatSchemaCube" dataProvider="{flatData}" id="myMXMLCube" complete="runQuery(event);">
+		<mx:OLAPCube name="FlatSchemaCube" dataProvider="{flatData}" id="myMXMLCube" complete="runQuery(event)">
 			<mx:OLAPDimension name="CustomerDim">
 				<mx:OLAPAttribute name="Customer" dataField="customer"/>
 				<mx:OLAPHierarchy name="CustomerHier" hasAll="true">
@@ -213,17 +208,15 @@
 	
 	
 	
-	<s:Panel title="OLAPDataGrid Control" color="0x000000" 
-			 borderAlpha="0.15" 
-			 width="600">
-		
+	<s:Panel title="OLAPDataGrid Control" width="100%" height="100%">
+
 		<s:layout>
 			<s:HorizontalLayout horizontalAlign="center" 
 								paddingLeft="10" paddingRight="10" 
 								paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		
-		<mx:OLAPDataGrid id="myOLAPDG" color="0x323232" width="100%" height="100%"/>
+		<mx:OLAPDataGrid id="myOLAPDG" width="100%" height="100%"/>
 		
 	</s:Panel>
 	
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor1Example.mxml
index 600aae0..d59b25e 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor1Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor1Example.mxml
@@ -53,29 +53,33 @@
 		</s:LinearGradient>
 	</fx:Declarations>
 	
-	<s:Panel width="100%" height="100%" title="PopUpAnchor Sample" skinClass="skins.TDFPanelSkin">	
-		<s:HGroup horizontalCenter="0" top="5">
-			<s:VGroup top="0">
-				<s:Label width="200" height="200" color="0x323232" 
-						 text="The PopUpAnchor control displays a pop-up component in a layout. It has 
-						 no visual appearance, but it has dimensions. The PopUpAnchor control is used in the DropDownList and VolumeBar controls. The PopUpAnchor displays the pop-up component by adding it to the PopUpManager, and then sizes and positions the pop-up component relative to itself."/>
-				<s:Label text=" Click the Information icon to see the PopUpAnchor in action."/>
-				<mx:Spacer width="60"/>	
-			</s:VGroup>
-			<s:VGroup>
-				<mx:LinkButton label="Information" click="currentState = 'infoOpen'" icon="@Embed('iconinfo.gif')"/>
-				<s:PopUpAnchor id="infoPopUp" left="0" bottom="0" popUpPosition="below"  
-							   includeIn="infoOpen" displayPopUp.normal="false" 
-							   displayPopUp.infoOpen="true">
-					<s:BorderContainer cornerRadius="5" backgroundFill="{fill1}" height="160" width="180" 
-							  dropShadowVisible="true">
-						<s:Label horizontalCenter="0" top="20" width="170" height="155" color="0x323232" 
-								 text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam laoreet urna fringilla risus fermentum sed aliquam lorem aliquam. Maecenas egestas, risus at adipiscing faucibus, nisl dui dignissim turpis, at consectetur magna erat in ligula."/>
-						
-						<s:Button top="2" right="2" width="16" height="16" skinClass="skins.CloseButtonSkin" click="handleClose(event)"/>
-					</s:BorderContainer>
-				</s:PopUpAnchor>
-			</s:VGroup>
-		</s:HGroup>
+	<s:Panel title="PopUpAnchor Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:VGroup top="0">
+			<s:Label width="200" height="200"
+					 text="The PopUpAnchor control displays a pop-up component in a layout. It has 
+					 no visual appearance, but it has dimensions. The PopUpAnchor control is used in the DropDownList and VolumeBar controls. The PopUpAnchor displays the pop-up component by adding it to the PopUpManager, and then sizes and positions the pop-up component relative to itself."/>
+			<s:Label text=" Click the Information icon to see the PopUpAnchor in action."/>
+			<mx:Spacer width="60"/>	
+		</s:VGroup>
+		<s:VGroup>
+			<mx:LinkButton label="Information" click="currentState = 'infoOpen'" icon="@Embed('iconinfo.gif')"/>
+			<s:PopUpAnchor id="infoPopUp" left="0" bottom="0" popUpPosition="below"  
+						   includeIn="infoOpen" displayPopUp.normal="false" 
+						   displayPopUp.infoOpen="true">
+				<s:BorderContainer cornerRadius="5" backgroundFill="{fill1}" height="160" width="180" 
+						  dropShadowVisible="true">
+					<s:Label horizontalCenter="0" top="20" width="170" height="155"
+							 text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam laoreet urna fringilla risus fermentum sed aliquam lorem aliquam. Maecenas egestas, risus at adipiscing faucibus, nisl dui dignissim turpis, at consectetur magna erat in ligula."/>
+					
+					<s:Button top="2" right="2" width="16" height="16" skinClass="skins.CloseButtonSkin" click="handleClose(event)"/>
+				</s:BorderContainer>
+			</s:PopUpAnchor>
+		</s:VGroup>
+
 	</s:Panel>
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor2Example.mxml
index 0bde928..cce939c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor2Example.mxml
@@ -36,45 +36,45 @@
 		</mx:Transition> 
 	</s:transitions>
 	
-	<s:Panel width="100%" height="100%" 
-			 title="PopUpAnchor with Form" 
-			 skinClass="skins.TDFPanelSkin">
+	<s:Panel title="PopUpAnchor with Form" width="100%" height="100%">
 		
-		<s:VGroup horizontalCenter="0" top="20">
-			<s:HGroup>
-				<mx:LinkButton label="Home" color="0x336699" click="currentState = 'normal'"/>
-				<mx:LinkButton label="About" color="0x336699" click="currentState = 'aboutOpen'"/>
-				<mx:LinkButton label="Information" color="0x336699" click="currentState = 'infoOpen'"/>
-				<mx:LinkButton label="Contact Us" color="0x336699" click="currentState = 'emailOpen'"/>
-			</s:HGroup>
-			<s:BorderContainer id="border1" excludeFrom="emailOpen" width="290" height="200" 
-					  backgroundColor="0x000000" color="0xFFFFFF" cornerRadius="7">
-				<s:Label width="200" height="200" top="20" left="5" 
-						 text.normal="Welcome to Tour de Flex!" 
-						 text.aboutOpen="Tour de Flex is constantly being updated with more cool samples!" 
-						 text.infoOpen="Check back for more Flex 4 samples weekly!"/>
-			</s:BorderContainer>
-			<s:PopUpAnchor id="emailPopUp" left="0" bottom="0" popUpPosition="below"  
-						   includeIn="emailOpen" displayPopUp.normal="false" displayPopUp.emailOpen="true">
-				<mx:Form id="form1" backgroundColor="0x000000" color="0xFFFFFF">
-					<mx:FormItem label="From :">
-						<s:TextInput/>
-					</mx:FormItem>
-					<mx:FormItem label="To :">
-						<s:TextInput/>
-					</mx:FormItem>
-					<mx:FormItem label="Subject :">
-						<s:TextInput/>
-					</mx:FormItem>
-					<mx:FormItem label="Message :">
-						<s:TextArea width="100%" height="60" maxChars="60"/>
-					</mx:FormItem>
-					<mx:FormItem direction="horizontal">
-						<s:Button label="Send" click="currentState = 'normal'" color="0x000000"/>  
-						<s:Button label="Cancel" click="currentState = 'normal'" color="0x000000"/>
-					</mx:FormItem>
-				</mx:Form>
-			</s:PopUpAnchor>
-		</s:VGroup>
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+
+		<s:HGroup>
+			<mx:LinkButton label="Home" color="0x336699" click="currentState = 'normal'"/>
+			<mx:LinkButton label="About" color="0x336699" click="currentState = 'aboutOpen'"/>
+			<mx:LinkButton label="Information" color="0x336699" click="currentState = 'infoOpen'"/>
+			<mx:LinkButton label="Contact Us" color="0x336699" click="currentState = 'emailOpen'"/>
+		</s:HGroup>
+		<s:BorderContainer id="border1" excludeFrom="emailOpen" width="290" height="200" 
+				  backgroundColor="0x000000" color="0xFFFFFF" cornerRadius="7">
+			<s:Label width="200" height="200" top="20" left="5" 
+					 text.normal="Welcome to Tour de Flex!" 
+					 text.aboutOpen="Tour de Flex is constantly being updated with more cool samples!" 
+					 text.infoOpen="Check back for more Flex 4 samples weekly!"/>
+		</s:BorderContainer>
+		<s:PopUpAnchor id="emailPopUp" left="0" bottom="0" popUpPosition="below"  
+					   includeIn="emailOpen" displayPopUp.normal="false" displayPopUp.emailOpen="true">
+			<mx:Form id="form1" backgroundColor="0x000000" color="0xFFFFFF">
+				<mx:FormItem label="From :">
+					<s:TextInput/>
+				</mx:FormItem>
+				<mx:FormItem label="To :">
+					<s:TextInput/>
+				</mx:FormItem>
+				<mx:FormItem label="Subject :">
+					<s:TextInput/>
+				</mx:FormItem>
+				<mx:FormItem label="Message :">
+					<s:TextArea width="100%" height="60" maxChars="60"/>
+				</mx:FormItem>
+				<mx:FormItem direction="horizontal">
+					<s:Button label="Send" click="currentState = 'normal'" color="0x000000"/>  
+					<s:Button label="Cancel" click="currentState = 'normal'" color="0x000000"/>
+				</mx:FormItem>
+			</mx:Form>
+		</s:PopUpAnchor>
 	</s:Panel>
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/PopupButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/PopupButtonExample.mxml
index 79de243..3c6803c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/PopupButtonExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/PopupButtonExample.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[
@@ -55,13 +54,7 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout horizontalAlign="center" />
-	</s:layout>
-	
-	<s:Panel title="PopUpButton Control" color="0x000000" 
-			 borderAlpha="0.15" 
-			 width="600">
+	<s:Panel title="PopUpButton Control" width="100%" height="100%">
 		
 		<s:layout>
 			<s:VerticalLayout horizontalAlign="center" 
@@ -69,13 +62,13 @@
 							  paddingTop="10" paddingBottom="10"/>
 		</s:layout>
          
-         <s:Label width="100%" color="0x323232"
+         <s:Label width="100%"
             text="Button label contains the name of the last selected menu item." />
-        <mx:PopUpButton id="popB" label="Edit" creationComplete="initMenu();" width="140" color="0x323232" click="{Alert.show('Action: ' + popB.label);}" />
+        <mx:PopUpButton id="popB" label="Edit" creationComplete="initMenu()" width="140" click="{Alert.show('Action: ' + popB.label);}" />
 		
         <mx:Spacer height="65" />
 		
-        <s:TextInput id="popTypeB" color="0x323232" text="...waiting" />
+        <s:TextInput id="popTypeB" text="...waiting" />
         
 	</s:Panel>
 	
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ProgressBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ProgressBarExample.mxml
index 76318e7..deccfaa 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ProgressBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ProgressBarExample.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 horizontalAlign="center" />
-	</s:layout>
     
-	<s:Panel title="ProgressBar Control" color="0x000000" 
-			 borderAlpha="0.15" 
-			 width="600">
+	<s:Panel title="ProgressBar Control" width="100%" height="100%">
 		
 		<s:layout>
-			<s:VerticalLayout horizontalAlign="center" 
-							  paddingLeft="10" paddingRight="10" 
-							  paddingTop="10" paddingBottom="10"/>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
          
-         <s:Label width="100%" color="0x323232"
+         <s:Label width="100%"
             text="Click the button to increment the progress bar." />
-        <s:Button id="Speed" label="Run" click="runit();" color="0x323232"/>
+        <s:Button id="Speed" label="Run" click="runit()"/>
             
         <mx:ProgressBar id="bar" labelPlacement="bottom" minimum="0" visible="true" maximum="100"
-         	color="0x323232" label="CurrentProgress 0%" direction="right" mode="manual" width="100%"/>
+         	label="CurrentProgress 0%" direction="right" mode="manual" width="100%"/>
             
 	</s:Panel>
 	
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/RadioButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/RadioButtonExample.mxml
index dc049db..2e1022a 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/RadioButtonExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/RadioButtonExample.mxml
@@ -54,13 +54,13 @@
 		
 	</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="RadioButton Sample" 
-			 width="100%" height="100%" 
-			 skinClass="skins.TDFPanelSkin">
+	<s:Panel title="RadioButton Sample" width="100%" height="100%">
 		
-		<s:HGroup horizontalCenter="0" top="10">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:HGroup>
 			<s:VGroup>
 				<s:Label text="1) The sky is blue:"/>
 				<s:RadioButton id="trueRadioBtn" label="True" groupName="group1"/>
@@ -84,8 +84,8 @@
 			</s:VGroup>
 		</s:HGroup>
 		
-		<s:Label bottom="20" left="5" width="100%" verticalAlign="justify" color="#323232" 
-					  text="The RadioButton control is a single choice in a set of mutually 
+		<s:Label width="100%" verticalAlign="justify"
+				 text="The RadioButton control is a single choice in a set of mutually 
 exclusive choices. A RadioButton group is composed of two or more RadioButton controls with
 the same group name. Only one member of the group can be selected at any given time." />
 	</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml
index 6af67cc..a29337f 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml
@@ -20,7 +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" 
-			   preinitialize="init();">
+			   preinitialize="init()">
 	
 	<!-- Based on samples from Peter DeHaan's blog: http://blog.flexexamples.com/ --> 
 	
@@ -59,17 +59,12 @@
 			TextFlow.defaultConfiguration = cfg;
 		}
 	</fx:Script>
-	<fx:Style>
-		@namespace s "library://ns.adobe.com/flex/spark";
-		@namespace mx "library://ns.adobe.com/flex/mx";
+	
+	<s:Panel title="RichEditableText Sample" width="100%" height="100%">
 		
-		s|VGroup s|Label {
-			fontWeight: "bold";
-		}
-	</fx:Style>
-	<s:Panel width="100%" height="100%"
-			 skinClass="skins.TDFPanelSkin"
-			 title="RichEditableText Sample">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
 		
 		<s:VGroup id="vgrp" width="100%" height="100%" top="10" left="15">
 			<s:HGroup>
@@ -83,7 +78,7 @@
 			<s:HGroup>
 				<s:Label text="Editable text:"/>
 				<s:RichEditableText id="richEdTxt" widthInChars="20" heightInLines="10" 
-									change="richEdTxt_changeHandler(event);" backgroundColor="0xCCCCCC" text="Hello world!">
+									change="richEdTxt_changeHandler(event)" backgroundColor="0xCCCCCC" text="Hello world!">
 				</s:RichEditableText>	
 			</s:HGroup>
 			<s:HGroup>
@@ -92,7 +87,7 @@
 			</s:HGroup>
 			
 		</s:VGroup>
-		<s:Label width="266" height="180" right="10" top="38" color="0x323232" text="RichEditableText is a low-level UIComponent for displaying, scrolling, selecting, and editing richly-formatted text.
+		<s:Label width="266" height="180" right="10" top="38" text="RichEditableText is a low-level UIComponent for displaying, scrolling, selecting, and editing richly-formatted text.
 The rich text can contain clickable hyperlinks and inline graphics that are either embedded or loaded from URLs. RichEditableText does not have scrollbars, but it implements 
 the IViewport interface for programmatic scrolling so that it can be controlled by a Scroller, which does provide scrollbars. It also supports vertical scrolling with the mouse wheel." />
 	</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml
index 2e3dcf8..9deee58 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.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"
 			   creationComplete="init()">
 	
 	<fx:Script>
@@ -34,21 +33,13 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout horizontalAlign="center" />
-	</s:layout>
-	
-	<s:Panel title="SWFLoader Control" color="0x000000" 
-			 borderAlpha="0.15" 
-			 width="600">
-		
+	<s:Panel title="SWFLoader Control" width="100%" height="100%">
+
 		<s:layout>
-			<s:VerticalLayout horizontalAlign="center" 
-							  paddingLeft="10" paddingRight="10" 
-							  paddingTop="10" paddingBottom="10"/>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		
-		<s:Label id="txt" color="0x323232" fontWeight="bold" text="Flash content embedded at compile time | 10 gumballs left" />
+		<s:Label id="txt" fontWeight="bold" text="Flash content embedded at compile time | 10 gumballs left" />
 		
 		<mx:SWFLoader id="swfObj" source="@Embed('assets/swf_sample.swf')"  />
 	</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleHelpFormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleHelpFormExample.mxml
index 979187f..aed6329 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleHelpFormExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleHelpFormExample.mxml
@@ -19,26 +19,33 @@
 -->
 <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="haloSilver" fontSize="14">
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
-	<s:Form horizontalCenter="0">
-		<s:FormItem label="Enter some text">
-			<s:TextInput/>
-			<s:helpContent>
-				<s:Label text="I've fallen and I can't get up!"/>
-			</s:helpContent>
-		</s:FormItem>
-		<s:FormItem label="Check a box">
-			<s:CheckBox label="option 1"/>
-			<s:CheckBox label="option 2"/>
-			<s:helpContent>
-				<s:Label text="What does it mean?"/>
-				<s:Button label="?" width="30" x="120"/>
-			</s:helpContent>
-		</s:FormItem>
-		<s:FormItem>
-			<s:Button label="Submit!"/>
-		</s:FormItem>
-	</s:Form>
-	
+	<s:Panel title="Form Sample" width="100%" height="100%">
+
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+			
+		<s:Form>
+			<s:FormItem label="Enter some text">
+				<s:TextInput/>
+				<s:helpContent>
+					<s:Label text="I've fallen and I can't get up!"/>
+				</s:helpContent>
+			</s:FormItem>
+			<s:FormItem label="Check a box">
+				<s:CheckBox label="option 1"/>
+				<s:CheckBox label="option 2"/>
+				<s:helpContent>
+					<s:Label text="What does it mean?"/>
+					<s:Button label="?" width="30" x="120"/>
+				</s:helpContent>
+			</s:FormItem>
+			<s:FormItem>
+				<s:Button label="Submit!"/>
+			</s:FormItem>
+		</s:Form>
+
+	</s:Panel>
 </s:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSequenceFormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSequenceFormExample.mxml
index eeb27f2..cb48de8 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSequenceFormExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSequenceFormExample.mxml
@@ -19,19 +19,26 @@
 -->
 <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="haloSilver" fontSize="14">
-	
-	<s:Form horizontalCenter="0">
-		<s:FormItem sequenceLabel="1." label="Enter some text">
-			<s:TextInput/>
-		</s:FormItem>
-		<s:FormItem sequenceLabel="2." label="Check a box">
-			<s:CheckBox label="option 1"/>
-			<s:CheckBox label="option 2"/>
-		</s:FormItem>
-		<s:FormItem>
-			<s:Button label="Submit it!"/>
-		</s:FormItem>
-	</s:Form>
-	
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
+
+	<s:Panel title="Form Sequence Sample" width="100%" height="100%">
+
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+			
+		<s:Form>
+			<s:FormItem sequenceLabel="1." label="Enter some text">
+				<s:TextInput/>
+			</s:FormItem>
+			<s:FormItem sequenceLabel="2." label="Check a box">
+				<s:CheckBox label="option 1"/>
+				<s:CheckBox label="option 2"/>
+			</s:FormItem>
+			<s:FormItem>
+				<s:Button label="Submit it!"/>
+			</s:FormItem>
+		</s:Form>
+		
+	</s:Panel>
 </s:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSimpleFormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSimpleFormExample.mxml
index 4d5887c..fd703ed 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSimpleFormExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSimpleFormExample.mxml
@@ -19,20 +19,26 @@
 -->
 <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="haloSilver" fontSize="14">
-	
-	<s:Form horizontalCenter="0">
-		<s:FormItem label="Enter some text">
-			<s:TextInput/>
-		</s:FormItem>
-		<s:FormItem label="Check a box">
-			<s:CheckBox label="option 1"/>
-			<s:CheckBox label="option 2"/>
-		</s:FormItem>
-		<s:FormItem>
-			<s:Button label="Submit it!"/>
-		</s:FormItem>
-	</s:Form>
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 
+	<s:Panel title="Form Simple Sample" width="100%" height="100%">
+
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+			
+		<s:Form>
+			<s:FormItem label="Enter some text">
+				<s:TextInput/>
+			</s:FormItem>
+			<s:FormItem label="Check a box">
+				<s:CheckBox label="option 1"/>
+				<s:CheckBox label="option 2"/>
+			</s:FormItem>
+			<s:FormItem>
+				<s:Button label="Submit it!"/>
+			</s:FormItem>
+		</s:Form>
+		
+	</s:Panel>
 </s:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleStackedFormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleStackedFormExample.mxml
index 0203cf9..e9c2f7d 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleStackedFormExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleStackedFormExample.mxml
@@ -19,20 +19,27 @@
 -->
 <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="haloSilver" fontSize="14">
-	
-	<s:Form skinClass="spark.skins.spark.StackedFormSkin" horizontalCenter="0">
-		<s:FormHeading label="Do some data entry" skinClass="spark.skins.spark.StackedFormHeadingSkin"/>
-		<s:FormItem label="Enter some text" skinClass="spark.skins.spark.StackedFormItemSkin">
-			<s:TextInput/>
-		</s:FormItem>
-		<s:FormItem label="Check a box" skinClass="spark.skins.spark.StackedFormItemSkin">
-			<s:CheckBox label="option 1"/>
-			<s:CheckBox label="option 2"/>
-		</s:FormItem>
-		<s:FormItem skinClass="spark.skins.spark.StackedFormItemSkin">
-			<s:Button label="Submit it!"/>
-		</s:FormItem>
-	</s:Form>
-	
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
+
+	<s:Panel title="Form Stacked Sample" width="100%" height="100%">
+
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+		
+		<s:Form skinClass="spark.skins.spark.StackedFormSkin" horizontalCenter="0">
+			<s:FormHeading label="Do some data entry" skinClass="spark.skins.spark.StackedFormHeadingSkin"/>
+			<s:FormItem label="Enter some text" skinClass="spark.skins.spark.StackedFormItemSkin">
+				<s:TextInput/>
+			</s:FormItem>
+			<s:FormItem label="Check a box" skinClass="spark.skins.spark.StackedFormItemSkin">
+				<s:CheckBox label="option 1"/>
+				<s:CheckBox label="option 2"/>
+			</s:FormItem>
+			<s:FormItem skinClass="spark.skins.spark.StackedFormItemSkin">
+				<s:Button label="Submit it!"/>
+			</s:FormItem>
+		</s:Form>
+		
+	</s:Panel>
 </s:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ScrollBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ScrollBarExample.mxml
index bed0582..f68b237 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ScrollBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ScrollBarExample.mxml
@@ -23,13 +23,12 @@
 	xmlns:mx="library://ns.adobe.com/flex/mx"
 	xmlns:s="library://ns.adobe.com/flex/spark">
 	
-	<s:Panel width="100%" height="100%"
-			 skinClass="skins.TDFPanelSkin"
-			 title="ScrollBar Sample">
+	<s:Panel title="ScrollBar Sample" width="100%" height="100%">
 		
 		<s:layout>
-				<s:HorizontalLayout paddingLeft="80" paddingTop="15"/>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
+
 		<mx:Box borderStyle="solid">
 			<s:HGroup>
 				<s:DataGroup id="vertView" left="10" top="20"
@@ -75,7 +74,7 @@
 			<s:HScrollBar viewport="{horizView}" width ="{horizView.width}"/>
 		</mx:Box>
 		
-		<s:Label paddingLeft="15" width="199" verticalAlign="justify" color="0x323232"
+		<s:Label paddingLeft="15" width="199" verticalAlign="justify"
 				 text="You can add scrollbars to any component to give scrolling capability. This sample shows
 how you can use both a vertical and horizontal ScrollBar. Also see the Scroller sample for more information."/>	
 	</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller1Example.mxml
index 05eeaf3..003776f 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller1Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller1Example.mxml
@@ -22,9 +22,12 @@
 			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
 		
-	<s:Panel width="100%" height="100%"
-		skinClass="skins.MyPanelSkin"
-		title="Scroller Sample">
+	<s:Panel title="Scroller Sample" width="100%" height="100%">
+
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
 		<s:VGroup horizontalCenter="0">
 			<s:HGroup>
 				<s:Label text="Min Viewport Inset:"/>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller2Example.mxml
index c6768bc..1ae35dc 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller2Example.mxml
@@ -41,43 +41,43 @@
 	<!-- you want to mark the children of the viewport as focusable so you're able to tab to them, 
 	but if you don't want the container itself to be focusable then you must turn tabEnabled off on it -->
 	
-	<s:Panel width="100%" height="100%" 
-			 skinClass="skins.TDFPanelSkin" 
-			 title="Scrollers and Tabbing">
+	<s:Panel title="Scrollers and Tabbing" width="100%" height="100%">
+
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
 		
 		<!-- The fields are tab-able within the VGroup container -->
-		<s:HGroup horizontalCenter="0" top="10">
-			<s:VGroup left="0" horizontalAlign="center" width="20%">
-				<s:BitmapImage id="img" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
-				<s:Label text="Item For Sale"/>
+		<s:VGroup left="0" horizontalAlign="center" width="20%">
+			<s:BitmapImage id="img" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+			<s:Label text="Item For Sale"/>
+		</s:VGroup>
+		<s:Scroller tabEnabled="true" hasFocusableChildren="true">
+			<s:VGroup>
+				<s:Label text="First Name:"/>
+				<s:TextInput id="firstName" text="firstname" color="#959494" change="txtChangeHandler(event)"/>
+				<s:Label text="Last Name:"/>
+				<s:TextInput id="lastName" text="lastname" color="#959494" change="txtChangeHandler(event)"/>
+				<s:Label text="Email:"/>
+				<s:TextInput id="emailAdd" text="email" color="#959494" change="txtChangeHandler(event)"/>
 			</s:VGroup>
-			<s:Scroller tabEnabled="true" hasFocusableChildren="true">
-				<s:VGroup>
-					<s:Label text="First Name:"/>
-					<s:TextInput id="firstName" text="firstname" color="#959494" change="txtChangeHandler(event)"/>
-					<s:Label text="Last Name:"/>
-					<s:TextInput id="lastName" text="lastname" color="#959494" change="txtChangeHandler(event)"/>
-					<s:Label text="Email:"/>
-					<s:TextInput id="emailAdd" text="email" color="#959494" change="txtChangeHandler(event)"/>
-				</s:VGroup>
-			</s:Scroller>
-			
-			<!-- Note: The scroller container automatically sets the clipAndEnableScrolling to false for
-			containers within it. See 'Controlling Viewport' sample under 'Coding Techniques' --> 
-			
-			<s:Scroller hasFocusableChildren="true" tabEnabled="false">
-				<s:VGroup width="200" height="200"> 
-					<s:Label text="Enter item name:"/>
-					<s:TextInput id="itemNameTxt" text="image-name" width="100%" color="#959494" change="txtChangeHandler(event)"/>
-					<s:Label text="Enter description of your item:"/>
-					<s:TextArea id="itemDescTxt" text="title" color="#959494" change="txtChangeHandler(event)"/>
-				</s:VGroup>
-			</s:Scroller>	
-			<s:Label right="10" width="180" verticalAlign="justify"
-						  text="If you have items within a Scroller that need to be tabbed to, you can
+		</s:Scroller>
+		
+		<!-- Note: The scroller container automatically sets the clipAndEnableScrolling to false for
+		containers within it. See 'Controlling Viewport' sample under 'Coding Techniques' --> 
+		
+		<s:Scroller hasFocusableChildren="true" tabEnabled="false">
+			<s:VGroup width="200" height="200"> 
+				<s:Label text="Enter item name:"/>
+				<s:TextInput id="itemNameTxt" text="image-name" width="100%" color="#959494" change="txtChangeHandler(event)"/>
+				<s:Label text="Enter description of your item:"/>
+				<s:TextArea id="itemDescTxt" text="title" color="#959494" change="txtChangeHandler(event)"/>
+			</s:VGroup>
+		</s:Scroller>	
+		<s:Label right="10" width="180" verticalAlign="justify"
+					  text="If you have items within a Scroller that need to be tabbed to, you can
 need to set hasFocusableChildren to true. If you do not want the container itself to be tab enabled, 
 then you must set tabEnabled to false, such as shown here."/>
-		</s:HGroup>
 	</s:Panel>
 </s:Application>
 
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml
index 204daab..b36ff70 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml
@@ -25,9 +25,9 @@
 				xmlns:s="library://ns.adobe.com/flex/spark" 
 				xmlns:mx="library://ns.adobe.com/flex/mx"  
     			title="Title Window"
-				close="PopUpManager.removePopUp(this);" >
+				close="PopUpManager.removePopUp(this)" >
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[       
 			import mx.managers.PopUpManager;
 			
@@ -55,8 +55,8 @@
 	</s:HGroup>
    
 	<s:HGroup>
-        <s:Button label="OK" click="returnName();"/>
-        <s:Button label="Cancel" click="PopUpManager.removePopUp(this);"/>
+        <s:Button label="OK" click="returnName()"/>
+        <s:Button label="Cancel" click="PopUpManager.removePopUp(this)"/>
 	</s:HGroup>
 
 </s:TitleWindow>  
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SliderExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SliderExample.mxml
index da1407e..1e699dc 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SliderExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SliderExample.mxml
@@ -21,33 +21,14 @@
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
 			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
-	<s:Panel width="100%" height="100%"
-			 skinClass="skins.TDFPanelSkin"
-			 title="HSlider/VSlider Sample">
+	<s:Panel title="HSlider/VSlider Sample" width="100%" height="100%">
 		
-		<s:VGroup left="10" top="10">
-			<s:Label text="Height:"/>
-			<s:VSlider id="slider3"
-					   minimum="50"
-					   maximum="180"
-					   value="160"
-					   liveDragging="true"/>
-		</s:VGroup>
-		<s:Group  left="40" top="25">
-			<s:Ellipse id="rect"
-					   width="{slider2.value}"
-					   height="{slider3.value}">
-				<s:fill>
-					<s:LinearGradient rotation="45">
-						<s:GradientEntry color="0x5008f3" />
-						<s:GradientEntry color="0x7a2a84" />
-						<s:GradientEntry color="0xfe08a4" />
-					</s:LinearGradient>
-				</s:fill>
-			</s:Ellipse>
-		</s:Group>
-		
-		<s:HGroup right="315" top="10" verticalAlign="middle">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+	
+				
+		<s:HGroup>
 			<s:Label text="Width:"/>
 			<s:HSlider id="slider2"
 					   minimum="50"
@@ -57,7 +38,32 @@
 			
 		</s:HGroup>
 		
-		<s:Label right="40" top="10" width="200" verticalAlign="justify" color="0x323232"
+		<s:HGroup>
+			<s:VGroup>
+				<s:Label text="Height:"/>
+				<s:VSlider id="slider3"
+						   minimum="50"
+						   maximum="180"
+						   value="160"
+						   liveDragging="true"/>
+			</s:VGroup>
+			
+			<s:Group width="200">
+				<s:Ellipse id="rect"
+						   width="{slider2.value}"
+						   height="{slider3.value}">
+					<s:fill>
+						<s:LinearGradient rotation="45">
+							<s:GradientEntry color="0x5008f3" />
+							<s:GradientEntry color="0x7a2a84" />
+							<s:GradientEntry color="0xfe08a4" />
+						</s:LinearGradient>
+					</s:fill>
+				</s:Ellipse>
+			</s:Group>
+		</s:HGroup>
+		
+		<s:Label verticalAlign="justify"
 				 text="The slider controls can be used to select a value by moving a slider thumb between 
 the end points of the slider track. The current value of the slider is determined by the relative location 
 of the thumb between the end points of the slider. The slider end points correspond to the slider’s minimum and maximum values."/>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml
index 2548ce9..7cb7f11 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml
@@ -21,30 +21,32 @@
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
 			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
-	<s:Panel title="Spinner Control Example" height="100%" width="100%"
-			 skinClass="skins.TDFPanelSkin">
-		<s:VGroup width="100%" height="100%" left="10" top="10">
-			<s:HGroup>
-				<mx:Text text="Use the arrows to change tabs:"/>            
-				<s:Spinner id="mySpinner" maximum="3"/>                    
-			</s:HGroup>
-				
-			<!-- Two way binding is being used so that changes to the tab navigator remain synced with Spinner value -->
-			<mx:TabNavigator id="myTabNav" width="75%" height="75%" selectedIndex="@{mySpinner.value}">
-				<mx:HBox label="Tab 1">
-					<mx:Text text="Text on Tab 1 " fontSize="14" color="red"/>
-				</mx:HBox>    	
-				<mx:HBox label="Tab 2">
-					<mx:Text text="Text on Tab 2" fontSize="16" color="blue"/>
-				</mx:HBox>    	    
-				<mx:HBox label="Tab 3">
-					<mx:Text text="Text on Tab 3" fontSize="18" color="green"/>
-				</mx:HBox>    	    
-				<mx:HBox label="Tab 4">
-					<mx:Text text="Text on Tab 4" fontSize="20" color="purple"/>
-				</mx:HBox>    
-			</mx:TabNavigator>  
-		</s:VGroup>
+	<s:Panel title="Spinner Control Example" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:HGroup>
+			<mx:Text text="Use the arrows to change tabs:"/>            
+			<s:Spinner id="mySpinner" maximum="3"/>                    
+		</s:HGroup>
+			
+		<!-- Two way binding is being used so that changes to the tab navigator remain synced with Spinner value -->
+		<mx:TabNavigator id="myTabNav" width="75%" height="75%" selectedIndex="@{mySpinner.value}">
+			<mx:HBox label="Tab 1">
+				<mx:Text text="Text on Tab 1 " fontSize="14" color="red"/>
+			</mx:HBox>    	
+			<mx:HBox label="Tab 2">
+				<mx:Text text="Text on Tab 2" fontSize="16"/>
+			</mx:HBox>    	    
+			<mx:HBox label="Tab 3">
+				<mx:Text text="Text on Tab 3" fontSize="18" color="green"/>
+			</mx:HBox>    	    
+			<mx:HBox label="Tab 4">
+				<mx:Text text="Text on Tab 4" fontSize="20" color="purple"/>
+			</mx:HBox>    
+		</mx:TabNavigator>
 		
 	</s:Panel>          
 </s:Application> 
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml
index 06e629a..59410df 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml
@@ -19,24 +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">
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
-	<s:Panel title="TabNavigator Container" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="TabNavigator 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" fontWeight="bold"
+		<s:Label width="100%" fontWeight="bold"
 				 text="Select the tabs to change the panel."/>
 		
-		<mx:TabNavigator id="tn"  width="100%" height="100%" color="0x323232" >
+		<mx:TabNavigator id="tn"  width="100%" height="100%">
 			<!-- Define each panel using a VBox container. -->
 			
 			<s:NavigatorContent label="Panel 1">
@@ -52,7 +46,7 @@
 			</s:NavigatorContent>
 		</mx:TabNavigator>
 		
-		<s:Label width="100%" color="0x323232"
+		<s:Label width="100%"
 				 text="Programmatically select the panel using a Button control."/>
 		
 		<s:HGroup>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextAreaExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextAreaExample.mxml
index c8892bd..a0d9827 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TextAreaExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextAreaExample.mxml
@@ -22,8 +22,6 @@
 			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	<fx:Script>
 		<![CDATA[
-			import skins.TDFPanelSkin;
-			
 			protected function changeHandler():void
 			{
 				txt.maxChars = this.maxChars.value;
@@ -34,57 +32,58 @@
 		]]>
 	</fx:Script>
 	
-	<s:Panel title="TextArea Sample"
-			 width="100%" height="100%" skinClass="skins.TDFPanelSkin">
+	<s:Panel title="TextArea Sample" width="100%" height="100%">
 		
-		<s:HGroup  top="8" width="100%" height="100%" left="80">
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:VGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Specify Max Character Input:"/>
+				<s:NumericStepper id="maxChars" maximum="200" value="100" stepSize="2" change="this.changeHandler()"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Specify Text Alignment:"/>
+				<s:DropDownList id="alignVal" prompt="left" change="this.changeHandler()">
+					<s:dataProvider>
+						<mx:ArrayList>
+							<fx:String>left</fx:String>
+							<fx:String>right</fx:String>
+							<fx:String>center</fx:String>
+							<fx:String>justify</fx:String>
+							<fx:String>start</fx:String>
+							<fx:String>end</fx:String>
+						</mx:ArrayList>
+					</s:dataProvider>
+				</s:DropDownList>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Direction:"/>
+				<s:DropDownList id="direction" prompt="ltr" change="this.changeHandler()">
+					<s:dataProvider>
+						<mx:ArrayList>
+							<fx:String>ltr</fx:String>
+							<fx:String>rtl</fx:String>
+						</mx:ArrayList>
+					</s:dataProvider>
+				</s:DropDownList>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Specify characters to restrict (use - for range):"/>
+				<s:TextInput id="restrictStr" change="this.changeHandler()" text="a-z 1-9"/> 
+			</s:HGroup>
 			<s:VGroup>
-				<s:HGroup verticalAlign="middle">
-					<s:Label text="Specify Max Character Input:"/>
-					<s:NumericStepper id="maxChars" maximum="200" value="100" stepSize="2" change="this.changeHandler()"/>
-				</s:HGroup>
-				<s:HGroup verticalAlign="middle">
-					<s:Label text="Specify Text Alignment:"/>
-					<s:DropDownList id="alignVal" prompt="left" change="this.changeHandler()">
-						<s:dataProvider>
-							<mx:ArrayList>
-								<fx:String>left</fx:String>
-								<fx:String>right</fx:String>
-								<fx:String>center</fx:String>
-								<fx:String>justify</fx:String>
-								<fx:String>start</fx:String>
-								<fx:String>end</fx:String>
-							</mx:ArrayList>
-						</s:dataProvider>
-					</s:DropDownList>
-				</s:HGroup>
-				<s:HGroup verticalAlign="middle">
-					<s:Label text="Direction:"/>
-					<s:DropDownList id="direction" prompt="ltr" change="this.changeHandler()">
-						<s:dataProvider>
-							<mx:ArrayList>
-								<fx:String>ltr</fx:String>
-								<fx:String>rtl</fx:String>
-							</mx:ArrayList>
-						</s:dataProvider>
-					</s:DropDownList>
-				</s:HGroup>
-				<s:HGroup verticalAlign="middle">
-					<s:Label text="Specify characters to restrict (use - for range):"/>
-					<s:TextInput id="restrictStr" change="this.changeHandler()" text="a-z 1-9"/> 
-				</s:HGroup>
-				<s:VGroup>
-					<s:Label text="Text:"/>
-					<s:TextArea id="txt" width="300" height="70" color="0x323232" horizontalCenter="0" verticalCenter="0" restrict="a-z 1-9"
-								change="this.changeHandler()"/>
-				</s:VGroup>
-			</s:VGroup>	
-			<s:Label width="200" color="#323232" top="20" right="80"
-					 text="TextArea is a text-entry control that lets users enter and edit multiple lines of richly formatted text. 
+				<s:Label text="Text:"/>
+				<s:TextArea id="txt" width="300" height="70" color="0x323232" horizontalCenter="0" verticalCenter="0" restrict="a-z 1-9"
+							change="this.changeHandler()"/>
+			</s:VGroup>
+		</s:VGroup>	
+		<s:Label width="200" top="20" right="80"
+				 text="TextArea is a text-entry control that lets users enter and edit multiple lines of richly formatted text. 
 It can display horizontal and vertical scrollbars for scrolling through the text and supports vertical scrolling with the mouse wheel. This sample also shows
 how you can restrict character input on the text area. The default when this is run will not allow the number 0 or caps based on the restrict range shown. The
 sample also shows how you can specify a direction on the text."/>
-		</s:HGroup>
 		
 	</s:Panel>
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextInputExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextInputExample.mxml
index c5f8b5a..1cb0137 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TextInputExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextInputExample.mxml
@@ -43,56 +43,56 @@
 		]]>
 	</fx:Script>
 	 
-	<s:Panel skinClass="skins.TDFPanelSkin" 
-			 width="100%" height="100%"
-			 title="TextInput Sample">
+	<s:Panel title="TextInput Sample" width="100%" height="100%">
 		
-		<s:VGroup top="20" width="100%" height="100%" left="200">
-			<s:HGroup verticalAlign="middle">
-				<s:Label text="Specify Max Character Input:"/>
-				<s:NumericStepper id="maxChars" value="30" stepSize="2" change="this.changeHandler(null)"/>
-			</s:HGroup>
-			<s:HGroup verticalAlign="middle">
-				<s:Label text="Specify Text Alignment:"/>
-				<s:DropDownList id="alignVal" prompt="left" change="this.changeHandler(null)">
-					<s:dataProvider>
-						<mx:ArrayList>
-							<fx:String>left</fx:String>
-							<fx:String>right</fx:String>
-							<fx:String>center</fx:String>
-							<fx:String>justify</fx:String>
-							<fx:String>start</fx:String>
-							<fx:String>end</fx:String>
-						</mx:ArrayList>
-					</s:dataProvider>
-				</s:DropDownList>
-			</s:HGroup>
-			<s:HGroup verticalAlign="middle">
-				<s:Label text="Direction:"/>
-				<s:DropDownList id="direction" prompt="ltr" change="this.changeHandler(null)">
-					<s:dataProvider>
-						<mx:ArrayList>
-							<fx:String>rtl</fx:String>
-							<fx:String>ltr</fx:String>
-						</mx:ArrayList>
-					</s:dataProvider>
-				</s:DropDownList>
-			</s:HGroup>
-			<s:HGroup verticalAlign="middle">
-				<s:Label text="Specify characters to restrict (use - for range):"/>
-				<s:TextInput id="restrictStr" change="this.changeHandler(null)"/> 
-			</s:HGroup>
-			<s:HGroup verticalAlign="middle">
-				<s:Label text="Text Input:"/>
-				<s:TextInput id="txt" maxChars="{maxChars.value}" maxWidth="150" 
-							 change="txtChangeHandler(event)" textAlign="{alignVal.selectedItem}"/>	
-			</s:HGroup>
-			<mx:Spacer height="10"/>
-			<s:Label width="85%" horizontalCenter="0" color="#323232"
-					 text="TextInput is a text-entry control that lets users enter and edit a single line of uniformly-formatted text.
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Specify Max Character Input:"/>
+			<s:NumericStepper id="maxChars" value="30" stepSize="2" change="this.changeHandler(null)"/>
+		</s:HGroup>
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Specify Text Alignment:"/>
+			<s:DropDownList id="alignVal" prompt="left" change="this.changeHandler(null)">
+				<s:dataProvider>
+					<mx:ArrayList>
+						<fx:String>left</fx:String>
+						<fx:String>right</fx:String>
+						<fx:String>center</fx:String>
+						<fx:String>justify</fx:String>
+						<fx:String>start</fx:String>
+						<fx:String>end</fx:String>
+					</mx:ArrayList>
+				</s:dataProvider>
+			</s:DropDownList>
+		</s:HGroup>
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Direction:"/>
+			<s:DropDownList id="direction" prompt="ltr" change="this.changeHandler(null)">
+				<s:dataProvider>
+					<mx:ArrayList>
+						<fx:String>rtl</fx:String>
+						<fx:String>ltr</fx:String>
+					</mx:ArrayList>
+				</s:dataProvider>
+			</s:DropDownList>
+		</s:HGroup>
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Specify characters to restrict (use - for range):"/>
+			<s:TextInput id="restrictStr" change="this.changeHandler(null)"/> 
+		</s:HGroup>
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Text Input:"/>
+			<s:TextInput id="txt" maxChars="{maxChars.value}" maxWidth="150" 
+						 change="txtChangeHandler(event)" textAlign="{alignVal.selectedItem}"/>	
+		</s:HGroup>
+		<mx:Spacer height="10"/>
+		<s:Label width="85%" horizontalCenter="0"
+				 text="TextInput is a text-entry control that lets users enter and edit a single line of uniformly-formatted text.
 This Spark version of TextInput makes use of the Text Layout Framework (TLF). Numerous properties are available to be set using the 
 textFlow object from the TLF framework. Uses of some are shown above."/>
-		</s:VGroup>
 		
 	</s:Panel>
 	
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout1Example.mxml
index 77c1737..9cf53f2 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout1Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout1Example.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"
 			   xmlns:local="*" creationComplete="init()">
 	
 	<!-- Based on original code from here and updated and enhanced for Flex 4:
@@ -48,8 +48,6 @@
 			import mx.events.FlexEvent;
 			import mx.events.SliderEvent;
 			
-			import skins.TDFPanelSkin;
-			
 			import spark.components.Group;
 			import spark.core.SpriteVisualElement;
 			
@@ -141,7 +139,7 @@
 
 		]]>
 	</fx:Script>
-	<s:Panel skinClass="skins.TDFPanelSkin" title="Text Layout Framework Sample" width="100%" height="100%">
+	<s:Panel title="Text Layout Framework Sample" width="100%" height="100%">
 		<s:layout>
 			<s:VerticalLayout paddingTop="8" paddingLeft="8"/>
 		</s:layout>
@@ -162,4 +160,4 @@
 		</s:VGroup>
 	</s:Panel>
 	
-</s:Application>
\ No newline at end of file
+</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout2Example.mxml
index a5ccfd4..c799992 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout2Example.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" maxWidth="690" maxHeight="300"
+			   xmlns:mx="library://ns.adobe.com/flex/mx"
 			   creationComplete="init()">
 	
 <!-- This sample is based on this page: http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3_Flex/WS0d70b2a8565d75766ba6608d121cc29f375-8000.html -->
@@ -72,7 +72,7 @@
 				
 				headlineController.format = hContainerFormat; 
 				hTextFlow.flowComposer.addController(headlineController); 
-				addElement(headContainer); 
+				panel.addElement(headContainer); 
 				this.addEventListener(flash.events.Event.RESIZE, resizeHandler); 
 				
 				// Body text TextFlow and flow composer 
@@ -88,8 +88,8 @@
 				
 				bodyController.format = bodyTextContainerFormat; 
 				bTextFlow.flowComposer.addController(bodyController); 
-				addElement(bodyTextContainer); 
-				resizeHandler(null); 
+				panel.addElement(bodyTextContainer); 
+				resizeHandler(null);
 			} 
 			
 			private function resizeHandler(event:Event):void 
@@ -131,5 +131,13 @@
 			} 
 		]]>
 	</fx:Script>
+	
+	<s:Panel title="News Layout Sample" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Group id="panel" width="100%" height="100%" />
+	</s:Panel>
 
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout3Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout3Example.mxml
index 09f544b..cebcc9a 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout3Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout3Example.mxml
@@ -67,9 +67,10 @@
 		}
 	]]></fx:Script>
 	
-	<s:Panel skinClass="skins.TDFPanelSkin" title="Importing Text using TLF and Flex 4" width="100%" height="100%">
+	<s:Panel title="Importing Text using TLF and Flex 4" width="100%" height="100%">
+		
 		<s:layout>
-			<s:HorizontalLayout paddingTop="8" paddingLeft="8" paddingRight="12"/>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		
 		<s:VGroup>
@@ -82,7 +83,7 @@
 						textFlow="{TextFlowUtil.importFromXML(textFlowAsXML)}"
 						horizontalCenter="0" verticalCenter="0" />
 		</s:VGroup>
-		<s:Label width="200" color="0x323232" verticalAlign="justify" text="This sample shows how you can use different types of text markup within
+		<s:Label width="200" verticalAlign="justify" text="This sample shows how you can use different types of text markup within
 the Flex 4 components that are based on TLF through an import. This can be especially useful for dynamically loading text
 that is returned from an HTTPService call at runtime for instance."/>
 		
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout4Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout4Example.mxml
index 50af0d4..48a8db1 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout4Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout4Example.mxml
@@ -50,9 +50,10 @@
 		</fx:XML> 
 	</fx:Declarations> 
 	
-	<s:Panel skinClass="skins.TDFPanelSkin" title="Text Import Format Types Sample" width="100%" height="100%">
+	<s:Panel title="Text Import Format Types Sample" width="100%" height="100%">
+		
 		<s:layout>
-			<s:HorizontalLayout paddingTop="8" paddingLeft="8" paddingRight="12"/>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		
 		<s:Label verticalAlign="justify" width="200" text="This example shows how you can use different format types for importing text
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.mxml
index 0877ab6..af5700c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.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 horizontalAlign="center" />
-	</s:layout>
-	
-	<s:Panel title="TitleWindow Container" color="0x000000" 
-			 borderAlpha="0.15" 
-			 width="600">
+	<s:Panel title="TitleWindow Container" width="100%" height="100%">
 		
 		<s:layout>
-			<s:VerticalLayout horizontalAlign="center" 
-							  paddingLeft="10" paddingRight="10" 
-							  paddingTop="10" paddingBottom="10"/>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		
-		<s:Button id="myButton" color="0x323232" height="32" label="Click to open the TitleWindow container" 
-				  click="showWindow();"/>
+		<s:Button id="myButton" height="32" label="Click to open the TitleWindow container" 
+				  click="showWindow()"/>
 		
-		<s:RichText id="returnedName" width="100%" color="0x323232" text="Waiting..."/>
+		<s:RichText id="returnedName" width="100%" text="Waiting..."/>
 		
 	</s:Panel>
 	
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml
index 721d16b..d001231 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml
@@ -22,7 +22,6 @@
 			   xmlns:mx="library://ns.adobe.com/flex/mx"
 			   currentState="hide">
 	
-
 	<fx:Script>
 		<![CDATA[
 			import mx.collections.ArrayCollection;
@@ -70,42 +69,40 @@
 			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: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" 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:Panel title="ToggleButton Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+
+		<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 horizontalCenter="0" bottom="15"  verticalAlign="middle" width="88%">
+			<s:Label 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:Panel>	
 	
 	
@@ -141,6 +138,7 @@
 			</s:Panel>
 		</s:HGroup>
 		
-	</s:Group>-->
+	</s:Group>
+	-->
 	
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml
index 422a185..6405900 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.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,24 +47,18 @@
 		
 	</fx:Declarations>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
-	<s:Panel id="tgPanel" title="ToggleButtonBar: Flash" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel id="tgPanel" title="ToggleButtonBar: Flash" width="100%" height="100%">
 		
 		<s:layout>
 			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		
-		<mx:ToggleButtonBar color="0x323232" horizontalGap="5" itemClick="clickHandler(event);" dataProvider="{dp}" />
+		<mx:ToggleButtonBar horizontalGap="5" itemClick="clickHandler(event)" dataProvider="{dp}" />
 		
-		<s:Label width="100%" textAlign="center" color="0x323232" 
+		<s:Label width="100%" textAlign="center"
 				 text="Select a button in the ToggleButtonBar control."/>
 		
-		<s:TextArea color="0x323232" id="myTA" width="100%" height="100%" text="{'Selected button index: 0' + '\n' +'Selected button label: Flash'}"/>
+		<s:TextArea id="myTA" width="100%" height="100%" text="{'Selected button index: 0' + '\n' +'Selected button label: Flash'}"/>
 		
 	</s:Panel>
 </s:Application>
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: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 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: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>
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" 
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%"
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>
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 
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>
 			
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/skins/TDFPanelSkin.mxml
deleted file mode 100644
index f9151dc..0000000
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/skins/TDFPanelSkin.mxml
+++ /dev/null
@@ -1,171 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-
-  Licensed to the Apache Software Foundation (ASF) under one or more
-  contributor license agreements.  See the NOTICE file distributed with
-  this work for additional information regarding copyright ownership.
-  The ASF licenses this file to You under the Apache License, Version 2.0
-  (the "License"); you may not use this file except in compliance with
-  the License.  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-
--->
-
-
-<!--- Custom Spark Panel Skin created for Tour de Flex.  
-
-@langversion 3.0
-@playerversion Flash 10
-@playerversion AIR 1.5
-@productversion Flex 4
--->
-<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"
-			 blendMode.disabled="layer">
-	
-	<fx:Metadata>
-		<![CDATA[ 
-		/** 
-		* @copy spark.skins.spark.ApplicationSkin#hostComponent
-		*/
-		[HostComponent("spark.components.Panel")]
-		]]>
-	</fx:Metadata> 
-	
-	<fx:Script>
-		/* Define the skin elements that should not be colorized. 
-		For panel, border and title backround are skinned, but the content area and title text are not. */
-		static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"];
-		
-		/** 
-		 * @copy spark.skins.SparkSkin#colorizeExclusions
-		 */     
-		override public function get colorizeExclusions():Array {return exclusions;}
-		
-		/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
-		static private const contentFill:Array = [];
-		
-		/**
-		 * @inheritDoc
-		 */
-		override public function get contentItems():Array {return contentFill};
-	</fx:Script>
-	
-	<s:states>
-		<s:State name="normal" />
-		<s:State name="disabled" />
-		<s:State name="normalWithControlBar" />
-		<s:State name="disabledWithControlBar" />
-	</s:states>
-	
-	<!-- drop shadow -->
-	<s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11" 
-							 angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
-	
-	<!-- layer 1: border -->
-	<s:Rect left="0" right="0" top="0" bottom="0">
-		<s:stroke>
-			<s:SolidColorStroke color="0" alpha="0.50" weight="1" />
-		</s:stroke>
-	</s:Rect>
-	
-	
-	<!-- layer 2: background fill -->
-	<!-- This layer was modified for Tour de Flex samples to have a gradient border at the bottom. -->
-	<s:Rect left="0" right="0" bottom="0" height="15">
-		<s:fill>
-			<s:LinearGradient rotation="90">
-				<s:GradientEntry color="0xE2E2E2" />
-				<s:GradientEntry color="0x000000" />
-			</s:LinearGradient>
-		</s:fill>
-	</s:Rect>
-	
-	<!-- layer 3: contents -->
-	<!--- contains the vertical stack of titlebar content and controlbar -->
-	<s:Group left="1" right="1" top="1" bottom="1" >
-		<s:layout>
-			<s:VerticalLayout gap="0" horizontalAlign="justify" />
-		</s:layout>
-		
-		<s:Group id="topGroup" >
-			<!-- layer 0: title bar fill -->
-			<!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex -->
-			<s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
-				<s:fill>
-					<s:SolidColor color="0x000000" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 1: title bar highlight -->
-			<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
-				<s:stroke>
-					<s:LinearGradientStroke rotation="90" weight="1">
-						<s:GradientEntry color="0xEAEAEA" />
-						<s:GradientEntry color="0xD9D9D9" />
-					</s:LinearGradientStroke>
-				</s:stroke>
-			</s:Rect>
-			
-			<!-- layer 2: title bar divider -->
-			<s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
-				<s:fill>
-					<s:SolidColor color="0xC0C0C0" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 3: text -->
-			<!--- Defines the appearance of the PanelSkin class's title bar. -->
-			<!-- Note: The title text display has been slightly modified for Tour de Flex. -->
-			<s:Label id="titleDisplay" lineBreak="explicit"
-						  left="9" top="1" bottom="0" minHeight="30"
-						  verticalAlign="middle" fontWeight="bold" color="#E2E2E2">
-			</s:Label>
-		</s:Group>
-		
-		<!--
-		Note: setting the minimum size to 0 here so that changes to the host component's
-		size will not be thwarted by this skin part's minimum size.   This is a compromise,
-		more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
-		-->
-		<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
-		</s:Group>
-		
-		<s:Group id="bottomGroup" minWidth="0" minHeight="0"
-				 includeIn="normalWithControlBar, disabledWithControlBar" >
-			
-			<!-- layer 0: control bar background -->
-			<!-- Note: We are skinning this to be the gradient in case we do specify control
-			bar content, but it will only display if there's a controlBarContent
-			property specified.-->
-			<s:Rect left="0" right="0" bottom="0" top="0" height="15">
-				<s:fill>
-					<s:LinearGradient rotation="90">
-						<s:GradientEntry color="0xE2E2E2" />
-						<s:GradientEntry color="0x000000" />
-					</s:LinearGradient>
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 1: control bar divider line -->
-			<s:Rect left="0" right="0" top="0" height="1" >
-				<s:fill>
-					<s:SolidColor color="0xCDCDCD" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 2: control bar -->
-			<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0">
-				<s:layout>
-					<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
-				</s:layout>
-			</s:Group>
-		</s:Group>
-	</s:Group>
-</s:SparkSkin>
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>
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"/>
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>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/css/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/css/skins/TDFPanelSkin.mxml
deleted file mode 100644
index 539c4fb..0000000
--- a/TourDeFlex/TourDeFlex3/src/spark/css/skins/TDFPanelSkin.mxml
+++ /dev/null
@@ -1,171 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-
-  Licensed to the Apache Software Foundation (ASF) under one or more
-  contributor license agreements.  See the NOTICE file distributed with
-  this work for additional information regarding copyright ownership.
-  The ASF licenses this file to You under the Apache License, Version 2.0
-  (the "License"); you may not use this file except in compliance with
-  the License.  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-
--->
-
-
-<!--- Custom Spark Panel Skin created for Tour de Flex.  
-
-@langversion 3.0
-@playerversion Flash 10
-@playerversion AIR 1.5
-@productversion Flex 4
--->
-<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"
-			 blendMode.disabled="layer">
-	
-	<fx:Metadata>
-		<![CDATA[ 
-		/** 
-		* @copy spark.skins.spark.ApplicationSkin#hostComponent
-		*/
-		[HostComponent("spark.components.Panel")]
-		]]>
-	</fx:Metadata> 
-	
-	<fx:Script>
-		/* Define the skin elements that should not be colorized. 
-		For panel, border and title backround are skinned, but the content area and title text are not. */
-		static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"];
-		
-		/** 
-		 * @copy spark.skins.SparkSkin#colorizeExclusions
-		 */     
-		override public function get colorizeExclusions():Array {return exclusions;}
-		
-		/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
-		static private const contentFill:Array = [];
-		
-		/**
-		 * @inheritDoc
-		 */
-		override public function get contentItems():Array {return contentFill};
-	</fx:Script>
-	
-	<s:states>
-		<s:State name="normal" />
-		<s:State name="disabled" />
-		<s:State name="normalWithControlBar" />
-		<s:State name="disabledWithControlBar" />
-	</s:states>
-	
-	<!-- drop shadow -->
-	<s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11" 
-							 angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
-	
-	<!-- layer 1: border -->
-	<s:Rect left="0" right="0" top="0" bottom="0">
-		<s:stroke>
-			<s:SolidColorStroke color="0" alpha="0.50" weight="1" />
-		</s:stroke>
-	</s:Rect>
-	
-	
-	<!-- layer 2: background fill -->
-	<!-- This layer was modified for Tour de Flex samples to have a gradient border at the bottom. -->
-	<s:Rect left="0" right="0" bottom="0" height="15">
-		<s:fill>
-			<s:LinearGradient rotation="90">
-				<s:GradientEntry color="0xE2E2E2" />
-				<s:GradientEntry color="0x000000" />
-			</s:LinearGradient>
-		</s:fill>
-	</s:Rect>
-	
-	<!-- layer 3: contents -->
-	<!--- contains the vertical stack of titlebar content and controlbar -->
-	<s:Group left="1" right="1" top="1" bottom="1" >
-		<s:layout>
-			<s:VerticalLayout gap="0" horizontalAlign="justify" />
-		</s:layout>
-		
-		<s:Group id="topGroup" >
-			<!-- layer 0: title bar fill -->
-			<!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex -->
-			<s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
-				<s:fill>
-					<s:SolidColor color="0x000000" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 1: title bar highlight -->
-			<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
-				<s:stroke>
-					<s:LinearGradientStroke rotation="90" weight="1">
-						<s:GradientEntry color="0xEAEAEA" />
-						<s:GradientEntry color="0xD9D9D9" />
-					</s:LinearGradientStroke>
-				</s:stroke>
-			</s:Rect>
-			
-			<!-- layer 2: title bar divider -->
-			<s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
-				<s:fill>
-					<s:SolidColor color="0xC0C0C0" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 3: text -->
-			<!--- Defines the appearance of the PanelSkin class's title bar. -->
-			<!-- Note: The title text display has been slightly modified for Tour de Flex. -->
-			<s:Label id="titleDisplay" lineBreak="explicit"
-						  left="9" top="1" bottom="0" minHeight="30"
-						  verticalAlign="middle" fontWeight="bold" color="#E2E2E2"/>
-			
-		</s:Group>
-		
-		<!--
-		Note: setting the minimum size to 0 here so that changes to the host component's
-		size will not be thwarted by this skin part's minimum size.   This is a compromise,
-		more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
-		-->
-		<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
-		</s:Group>
-		
-		<s:Group id="bottomGroup" minWidth="0" minHeight="0"
-				 includeIn="normalWithControlBar, disabledWithControlBar" >
-			
-			<!-- layer 0: control bar background -->
-			<!-- Note: We are skinning this to be the gradient in case we do specify control
-			bar content, but it will only display if there's a controlBarContent
-			property specified.-->
-			<s:Rect left="0" right="0" bottom="0" top="0" height="15">
-				<s:fill>
-					<s:LinearGradient rotation="90">
-						<s:GradientEntry color="0xE2E2E2" />
-						<s:GradientEntry color="0x000000" />
-					</s:LinearGradient>
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 1: control bar divider line -->
-			<s:Rect left="0" right="0" top="0" height="1" >
-				<s:fill>
-					<s:SolidColor color="0xCDCDCD" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 2: control bar -->
-			<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0">
-				<s:layout>
-					<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
-				</s:layout>
-			</s:Group>
-		</s:Group>
-	</s:Group>
-</s:SparkSkin>
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>
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>
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>
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>
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:HGroup left="10" top="5" width="100%" height="100%" horizontalCenter="0">
-			<s:VGroup width="40%">
-				
-			
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+		
+		<s:VGroup>
+		
 			<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: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="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>
+			<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>
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: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="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: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>
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: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="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: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>
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>
 			
 			
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/skins/TDFPanelSkin.mxml
deleted file mode 100644
index 4b06e54..0000000
--- a/TourDeFlex/TourDeFlex3/src/spark/effects/skins/TDFPanelSkin.mxml
+++ /dev/null
@@ -1,170 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-
-  Licensed to the Apache Software Foundation (ASF) under one or more
-  contributor license agreements.  See the NOTICE file distributed with
-  this work for additional information regarding copyright ownership.
-  The ASF licenses this file to You under the Apache License, Version 2.0
-  (the "License"); you may not use this file except in compliance with
-  the License.  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-
--->
-
-
-<!--- Custom Spark Panel Skin created for Tour de Flex.  
-
-@langversion 3.0
-@playerversion Flash 10
-@playerversion AIR 1.5
-@productversion Flex 4
--->
-<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"
-			 blendMode.disabled="layer">
-	
-	<fx:Metadata>
-		<![CDATA[ 
-		/** 
-		* @copy spark.skins.spark.ApplicationSkin#hostComponent
-		*/
-		[HostComponent("spark.components.Panel")]
-		]]>
-	</fx:Metadata> 
-	
-	<fx:Script>
-		/* Define the skin elements that should not be colorized. 
-		For panel, border and title backround are skinned, but the content area and title text are not. */
-		static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"];
-		
-		/** 
-		 * @copy spark.skins.SparkSkin#colorizeExclusions
-		 */     
-		override public function get colorizeExclusions():Array {return exclusions;}
-		
-		/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
-		static private const contentFill:Array = [];
-		
-		/**
-		 * @inheritDoc
-		 */
-		override public function get contentItems():Array {return contentFill};
-	</fx:Script>
-	
-	<s:states>
-		<s:State name="normal" />
-		<s:State name="disabled" />
-		<s:State name="normalWithControlBar" />
-		<s:State name="disabledWithControlBar" />
-	</s:states>
-	
-	<!-- drop shadow -->
-	<s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11" 
-							 angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
-	
-	<!-- layer 1: border -->
-	<s:Rect left="0" right="0" top="0" bottom="0">
-		<s:stroke>
-			<s:SolidColorStroke color="0" alpha="0.50" weight="1" />
-		</s:stroke>
-	</s:Rect>
-	
-	
-	<!-- layer 2: background fill -->
-	<s:Rect left="0" right="0" bottom="0" height="15">
-		<s:fill>
-			<s:LinearGradient rotation="90">
-				<s:GradientEntry color="0xE2E2E2" />
-				<s:GradientEntry color="0x000000" />
-			</s:LinearGradient>
-		</s:fill>
-	</s:Rect>
-	
-	<!-- layer 3: contents -->
-	<!--- contains the vertical stack of titlebar content and controlbar -->
-	<s:Group left="1" right="1" top="1" bottom="1" >
-		<s:layout>
-			<s:VerticalLayout gap="0" horizontalAlign="justify" />
-		</s:layout>
-		
-		<s:Group id="topGroup" >
-			<!-- layer 0: title bar fill -->
-			<!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex -->
-			<s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
-				<s:fill>
-					<s:SolidColor color="0x000000" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 1: title bar highlight -->
-			<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
-				<s:stroke>
-					<s:LinearGradientStroke rotation="90" weight="1">
-						<s:GradientEntry color="0xEAEAEA" />
-						<s:GradientEntry color="0xD9D9D9" />
-					</s:LinearGradientStroke>
-				</s:stroke>
-			</s:Rect>
-			
-			<!-- layer 2: title bar divider -->
-			<s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
-				<s:fill>
-					<s:SolidColor color="0xC0C0C0" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 3: text -->
-			<!--- Defines the appearance of the PanelSkin class's title bar. -->
-			<!-- Note: The title text display has been slightly modified for Tour de Flex. -->
-			<s:Label id="titleDisplay" lineBreak="explicit"
-						  left="9" top="1" bottom="0" minHeight="30"
-						  verticalAlign="middle" fontWeight="bold" color="#E2E2E2">
-			</s:Label>
-		</s:Group>
-		
-		<!--
-		Note: setting the minimum size to 0 here so that changes to the host component's
-		size will not be thwarted by this skin part's minimum size.   This is a compromise,
-		more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
-		-->
-		<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
-		</s:Group>
-		
-		<s:Group id="bottomGroup" minWidth="0" minHeight="0"
-				 includeIn="normalWithControlBar, disabledWithControlBar" >
-			
-			<!-- layer 0: control bar background -->
-			<!-- Note: We are skinning this to be the gradient in case we do specify control
-			bar content, but it will only display if there's a controlBarContent
-			property specified.-->
-			<s:Rect left="0" right="0" bottom="0" top="0" height="15">
-				<s:fill>
-					<s:LinearGradient rotation="90">
-						<s:GradientEntry color="0xE2E2E2" />
-						<s:GradientEntry color="0x000000" />
-					</s:LinearGradient>
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 1: control bar divider line -->
-			<s:Rect left="0" right="0" top="0" height="1" >
-				<s:fill>
-					<s:SolidColor color="0xCDCDCD" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 2: control bar -->
-			<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0">
-				<s:layout>
-					<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
-				</s:layout>
-			</s:Group>
-		</s:Group>
-	</s:Group>
-</s:SparkSkin>
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" 
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" 
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" 
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" 
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" 
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" 
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>
 		
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>
         
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>
 		
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>
 		
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="" />
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>
         
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>
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. 
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>
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>
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>
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>
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%">
 		
 			 
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>
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 @@
 					<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>
 	
 	
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/skins/TDFPanelSkin.mxml
deleted file mode 100644
index 4b06e54..0000000
--- a/TourDeFlex/TourDeFlex3/src/spark/fxg/skins/TDFPanelSkin.mxml
+++ /dev/null
@@ -1,170 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-
-  Licensed to the Apache Software Foundation (ASF) under one or more
-  contributor license agreements.  See the NOTICE file distributed with
-  this work for additional information regarding copyright ownership.
-  The ASF licenses this file to You under the Apache License, Version 2.0
-  (the "License"); you may not use this file except in compliance with
-  the License.  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-
--->
-
-
-<!--- Custom Spark Panel Skin created for Tour de Flex.  
-
-@langversion 3.0
-@playerversion Flash 10
-@playerversion AIR 1.5
-@productversion Flex 4
--->
-<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"
-			 blendMode.disabled="layer">
-	
-	<fx:Metadata>
-		<![CDATA[ 
-		/** 
-		* @copy spark.skins.spark.ApplicationSkin#hostComponent
-		*/
-		[HostComponent("spark.components.Panel")]
-		]]>
-	</fx:Metadata> 
-	
-	<fx:Script>
-		/* Define the skin elements that should not be colorized. 
-		For panel, border and title backround are skinned, but the content area and title text are not. */
-		static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"];
-		
-		/** 
-		 * @copy spark.skins.SparkSkin#colorizeExclusions
-		 */     
-		override public function get colorizeExclusions():Array {return exclusions;}
-		
-		/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
-		static private const contentFill:Array = [];
-		
-		/**
-		 * @inheritDoc
-		 */
-		override public function get contentItems():Array {return contentFill};
-	</fx:Script>
-	
-	<s:states>
-		<s:State name="normal" />
-		<s:State name="disabled" />
-		<s:State name="normalWithControlBar" />
-		<s:State name="disabledWithControlBar" />
-	</s:states>
-	
-	<!-- drop shadow -->
-	<s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11" 
-							 angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
-	
-	<!-- layer 1: border -->
-	<s:Rect left="0" right="0" top="0" bottom="0">
-		<s:stroke>
-			<s:SolidColorStroke color="0" alpha="0.50" weight="1" />
-		</s:stroke>
-	</s:Rect>
-	
-	
-	<!-- layer 2: background fill -->
-	<s:Rect left="0" right="0" bottom="0" height="15">
-		<s:fill>
-			<s:LinearGradient rotation="90">
-				<s:GradientEntry color="0xE2E2E2" />
-				<s:GradientEntry color="0x000000" />
-			</s:LinearGradient>
-		</s:fill>
-	</s:Rect>
-	
-	<!-- layer 3: contents -->
-	<!--- contains the vertical stack of titlebar content and controlbar -->
-	<s:Group left="1" right="1" top="1" bottom="1" >
-		<s:layout>
-			<s:VerticalLayout gap="0" horizontalAlign="justify" />
-		</s:layout>
-		
-		<s:Group id="topGroup" >
-			<!-- layer 0: title bar fill -->
-			<!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex -->
-			<s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
-				<s:fill>
-					<s:SolidColor color="0x000000" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 1: title bar highlight -->
-			<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
-				<s:stroke>
-					<s:LinearGradientStroke rotation="90" weight="1">
-						<s:GradientEntry color="0xEAEAEA" />
-						<s:GradientEntry color="0xD9D9D9" />
-					</s:LinearGradientStroke>
-				</s:stroke>
-			</s:Rect>
-			
-			<!-- layer 2: title bar divider -->
-			<s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
-				<s:fill>
-					<s:SolidColor color="0xC0C0C0" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 3: text -->
-			<!--- Defines the appearance of the PanelSkin class's title bar. -->
-			<!-- Note: The title text display has been slightly modified for Tour de Flex. -->
-			<s:Label id="titleDisplay" lineBreak="explicit"
-						  left="9" top="1" bottom="0" minHeight="30"
-						  verticalAlign="middle" fontWeight="bold" color="#E2E2E2">
-			</s:Label>
-		</s:Group>
-		
-		<!--
-		Note: setting the minimum size to 0 here so that changes to the host component's
-		size will not be thwarted by this skin part's minimum size.   This is a compromise,
-		more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
-		-->
-		<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
-		</s:Group>
-		
-		<s:Group id="bottomGroup" minWidth="0" minHeight="0"
-				 includeIn="normalWithControlBar, disabledWithControlBar" >
-			
-			<!-- layer 0: control bar background -->
-			<!-- Note: We are skinning this to be the gradient in case we do specify control
-			bar content, but it will only display if there's a controlBarContent
-			property specified.-->
-			<s:Rect left="0" right="0" bottom="0" top="0" height="15">
-				<s:fill>
-					<s:LinearGradient rotation="90">
-						<s:GradientEntry color="0xE2E2E2" />
-						<s:GradientEntry color="0x000000" />
-					</s:LinearGradient>
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 1: control bar divider line -->
-			<s:Rect left="0" right="0" top="0" height="1" >
-				<s:fill>
-					<s:SolidColor color="0xCDCDCD" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 2: control bar -->
-			<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0">
-				<s:layout>
-					<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
-				</s:layout>
-			</s:Group>
-		</s:Group>
-	</s:Group>
-</s:SparkSkin>
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>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml
index 96af06a..fd132c9 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml
@@ -21,28 +21,6 @@
 			   xmlns:s="library://ns.adobe.com/flex/spark"
 			   xmlns:mx="library://ns.adobe.com/flex/mx"
 			   width="100%" height="100%" creationComplete="matchRB_clickHandler()">
-	<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;
-		}
-		
-		s|List {
-			alternating-item-colors: #424242;
-		}
-	</fx:Style>
 	
 	<fx:Script>
 		<![CDATA[
@@ -114,52 +92,51 @@
 			}
 		]]>
 	</fx:Script>
+	
 	<fx:Declarations>
-		<!-- Place non-visual elements (e.g., services, value objects) here -->
 		<s:SortingCollator id="sortingCollator"/>
 		<s:MatchingCollator id="matchingCollator"/>
 	</fx:Declarations>
-	<s:layout>
-		<s:VerticalLayout/>
-	</s:layout>
 	
-	<s:Scroller id="scroller" width="100%" height="100%">
-		<s:Group id="myGroup">
-			<s:Form id="myForm">
-				<s:Label id="titleL" text="Spark Collator"/>
-				<s:Label text="Customize Collator options and find out the string sorting results: "/>
-				<s:Spacer height="15"/>
-				
-				<s:FormItem label="Collator Type:" toolTip="Please select a Collator type first!">
-					<s:HGroup>
-						<s:RadioButton id="sortRB" groupName="collatorType" label="SortingCollator" click="sortRB_clickHandler()"/>
-						<s:RadioButton id="matchRB" groupName="collatorType" label="MatchingCollator" selected="true" click="matchRB_clickHandler()"/>
-					</s:HGroup>
-				</s:FormItem>
-				<s:FormItem label="Locale:">
-					<s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0" 
-								change="_collatorInstance.setStyle('locale',localeCB.selectedItem); sortStr()"/>
-				</s:FormItem>
-				<s:FormItem label="Collator Options:" toolTip="Customize below options to see the sorting result.">
-					<s:CheckBox id="ignCaseCB" label="ignoreCase" selected="{_collatorInstance.ignoreCase}" 
-								change="_collatorInstance.ignoreCase = ignCaseCB.selected; sortStr()"/>
-					<s:CheckBox id="ignDiacriticsCB" label="ignoreDiacritics" selected="{_collatorInstance.ignoreDiacritics}" 
-								change="_collatorInstance.ignoreDiacritics = ignDiacriticsCB.selected; sortStr()"/>
-					<s:CheckBox id="ignSymbolsCB" label="ignoreSymbols" selected="{_collatorInstance.ignoreSymbols}" 
-								change="_collatorInstance.ignoreSymbols = ignSymbolsCB.selected; sortStr()"/>
-					<s:CheckBox id="ignKanaTypeCB" label="ignoreKanaType" selected="{_collatorInstance.ignoreKanaType}" 
-								change="_collatorInstance.ignoreKanaType = ignKanaTypeCB.selected; sortStr()"/>
-					<s:CheckBox id="ignCharacterWidthCB" label="ignoreCharacterWidth" selected="{_collatorInstance.ignoreCharacterWidth}" 
-								change="_collatorInstance.ignoreCharacterWidth = ignCharacterWidthCB.selected; sortStr()"/>
-				</s:FormItem>
-				<s:Label text="============================================================================"/>
+	<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 id="myForm" height="100%" width="100%">
+			<s:Label text="Customize Collator options and find out the string sorting results: "/>
+			<s:Spacer height="15"/>
+			
+			<s:FormItem label="Collator Type:" toolTip="Please select a Collator type first!">
 				<s:HGroup>
-					<s:FormItem label="Sorting Result:">
-						<s:List id="sCltResult" dataProvider="{_resultArrColl}" toolTip="Strings that are equal will show within one line."/>
-					</s:FormItem>
+					<s:RadioButton id="sortRB" groupName="collatorType" label="SortingCollator" click="sortRB_clickHandler()"/>
+					<s:RadioButton id="matchRB" groupName="collatorType" label="MatchingCollator" selected="true" click="matchRB_clickHandler()"/>
 				</s:HGroup>
-			</s:Form>
-		</s:Group>
-	</s:Scroller>
-	
+			</s:FormItem>
+			<s:FormItem label="Locale:">
+				<s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0" 
+							change="_collatorInstance.setStyle('locale',localeCB.selectedItem); sortStr()"/>
+			</s:FormItem>
+			<s:FormItem label="Collator Options:" toolTip="Customize below options to see the sorting result.">
+				<s:CheckBox id="ignCaseCB" label="ignoreCase" selected="{_collatorInstance.ignoreCase}" 
+							change="_collatorInstance.ignoreCase = ignCaseCB.selected; sortStr()"/>
+				<s:CheckBox id="ignDiacriticsCB" label="ignoreDiacritics" selected="{_collatorInstance.ignoreDiacritics}" 
+							change="_collatorInstance.ignoreDiacritics = ignDiacriticsCB.selected; sortStr()"/>
+				<s:CheckBox id="ignSymbolsCB" label="ignoreSymbols" selected="{_collatorInstance.ignoreSymbols}" 
+							change="_collatorInstance.ignoreSymbols = ignSymbolsCB.selected; sortStr()"/>
+				<s:CheckBox id="ignKanaTypeCB" label="ignoreKanaType" selected="{_collatorInstance.ignoreKanaType}" 
+							change="_collatorInstance.ignoreKanaType = ignKanaTypeCB.selected; sortStr()"/>
+				<s:CheckBox id="ignCharacterWidthCB" label="ignoreCharacterWidth" selected="{_collatorInstance.ignoreCharacterWidth}" 
+							change="_collatorInstance.ignoreCharacterWidth = ignCharacterWidthCB.selected; sortStr()"/>
+			</s:FormItem>
+			<s:Label text="============================================================================"/>
+			<s:HGroup>
+				<s:FormItem label="Sorting Result:">
+					<s:List id="sCltResult" dataProvider="{_resultArrColl}" toolTip="Strings that are equal will show within one line."/>
+				</s:FormItem>
+			</s:HGroup>
+		</s:Form>
+		
+	</s:Panel>	
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml
index 1c24727..58395c8 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.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%">
-	<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;
@@ -46,26 +28,30 @@
 			private var _locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','ar-SA','zh-CN','fr-FR']);
 		]]>
 	</fx:Script>
+
 	<fx:Declarations>
-		<!-- Place non-visual elements (e.g., services, value objects) here -->
 		<s:CurrencyFormatter id="cf"/>
 	</fx:Declarations>
-	<s:Scroller width="100%" height="100%">
-		<s:Group>
-			<s:Form>
-				<s:Label id="titleL" text="Spark CurrencyFormatter"/>
-				<s:Label text="Format a currency number by using spark CurrencyFormatter"/>
-				<s:Spacer height="15"/>
-				<s:FormItem label="Locales">
-					<s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0" updateComplete="cf.setStyle('locale',localeCB.selectedItem)"/>
-				</s:FormItem>
-				<s:FormItem label="Please enter a currency number: ">
-					<s:TextInput id="inputTI" text="12345"/>
-				</s:FormItem>
-				<s:FormItem label="Format result: ">
-					<s:Label id="resultL" text="{cf.format(inputTI.text)}"/>
-				</s:FormItem>
-			</s:Form>
-		</s:Group>
-	</s:Scroller>
+	
+	<s:Panel title="Spark CurrencyFormatter" 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="Format a currency number by using spark CurrencyFormatter"/>
+			<s:Spacer height="15"/>
+			<s:FormItem label="Locales">
+				<s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0" updateComplete="cf.setStyle('locale',localeCB.selectedItem)"/>
+			</s:FormItem>
+			<s:FormItem label="Please enter a currency number: ">
+				<s:TextInput id="inputTI" text="12345"/>
+			</s:FormItem>
+			<s:FormItem label="Format result: ">
+				<s:Label id="resultL" text="{cf.format(inputTI.text)}"/>
+			</s:FormItem>
+		</s:Form>
+
+	</s:Panel>
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml
index b198370..b46ba3b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.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%">
-	<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[
@@ -59,54 +41,54 @@
 			
 		]]>
 	</fx:Script>
+	
 	<fx:Declarations>
-		<!-- Place non-visual elements (e.g., services, value objects) here -->
 		<s:CurrencyFormatter id="cf" locale="{localeCB.selectedItem}"/>
 		<s:CurrencyFormatter id="cf_default" locale="{localeCB.selectedItem}"/>
 	</fx:Declarations>
-	<s:layout>
-		<s:VerticalLayout/>
-	</s:layout>
-	<s:Scroller id="scroller" width="100%" height="100%">
-		<s:Group>
-			<s:Form>
-				<s:Label id="titleL" text="Spark CurrencyFormatter"/>
-				<s:Label text="Select a locale to see the property value and formatted currency: "/>
-				<s:Spacer height="15"/>
-				<s:FormItem label="Locale:">
-					<s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0" updateComplete="formatCurr()"/>
-				</s:FormItem>
-				<s:FormItem label="Input a number to format:">
-					<s:TextInput id="inputTI" text="12345" change="formatCurr()"/>
-				</s:FormItem>
-				<s:FormItem label="Fraction Digits: (default: {cf_default.fractionalDigits})">
-					<s:NumericStepper id="fdNS" maximum="10" minimum="0" change="cf.fractionalDigits = fdNS.value;formatCurr()"/>
-				</s:FormItem>
-				<s:FormItem label="Decimal Separator: (default: {cf_default.decimalSeparator})">
-					<s:TextInput id="dsTI" change="cf.decimalSeparator = dsTI.text;formatCurr()"/>
-				</s:FormItem>
-				<s:FormItem label="Grouping Pattern: (default: {cf_default.groupingPattern})">
-					<s:ComboBox id="gpCB" dataProvider="{groupPatternArrColl}" change="cf.groupingPattern = gpCB.selectedItem;formatCurr()"/>
-				</s:FormItem>
-				<s:FormItem label="Grouping Separator: (default: {cf_default.groupingSeparator})">
-					<s:TextInput id="gsTI" change="cf.groupingSeparator = gsTI.text;formatCurr()"/>
-				</s:FormItem>
-				<s:FormItem label="Negative Currency Format: (default: {cf_default.negativeCurrencyFormat})">
-					<s:NumericStepper id="ncfNS" minimum="0" maximum="15" change="cf.negativeCurrencyFormat = ncfNS.value;formatCurr()"/>
-				</s:FormItem>
-				<s:FormItem label="Positive Currency Format: (default: {cf_default.positiveCurrencyFormat})">
-					<s:NumericStepper id="pcfNS" middleClick="0" maximum="3" change="cf.positiveCurrencyFormat = pcfNS.value;formatCurr()"/>
-				</s:FormItem>
-				<s:Label text="==================================================================="/>
-				<s:FormItem label="Formatted Currency with ISO code is:">
-					<s:Label id="resultL"/>
-				</s:FormItem>
-				<s:FormItem label="Formatted Currency with currency symbol is:">
-					<s:Label id="resultSymbolL"/>
-				</s:FormItem>
-			</s:Form>
-		</s:Group>
-	</s:Scroller>
-	
-	
+
+
+	<s:Panel title="Spark CurrencyFormatter" 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="Select a locale to see the property value and formatted currency: "/>
+			<s:Spacer height="15"/>
+			<s:FormItem label="Locale:">
+				<s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0" updateComplete="formatCurr()"/>
+			</s:FormItem>
+			<s:FormItem label="Input a number to format:">
+				<s:TextInput id="inputTI" text="12345" change="formatCurr()"/>
+			</s:FormItem>
+			<s:FormItem label="Fraction Digits: (default: {cf_default.fractionalDigits})">
+				<s:NumericStepper id="fdNS" maximum="10" minimum="0" change="cf.fractionalDigits = fdNS.value;formatCurr()"/>
+			</s:FormItem>
+			<s:FormItem label="Decimal Separator: (default: {cf_default.decimalSeparator})">
+				<s:TextInput id="dsTI" change="cf.decimalSeparator = dsTI.text;formatCurr()"/>
+			</s:FormItem>
+			<s:FormItem label="Grouping Pattern: (default: {cf_default.groupingPattern})">
+				<s:ComboBox id="gpCB" dataProvider="{groupPatternArrColl}" change="cf.groupingPattern = gpCB.selectedItem;formatCurr()"/>
+			</s:FormItem>
+			<s:FormItem label="Grouping Separator: (default: {cf_default.groupingSeparator})">
+				<s:TextInput id="gsTI" change="cf.groupingSeparator = gsTI.text;formatCurr()"/>
+			</s:FormItem>
+			<s:FormItem label="Negative Currency Format: (default: {cf_default.negativeCurrencyFormat})">
+				<s:NumericStepper id="ncfNS" minimum="0" maximum="15" change="cf.negativeCurrencyFormat = ncfNS.value;formatCurr()"/>
+			</s:FormItem>
+			<s:FormItem label="Positive Currency Format: (default: {cf_default.positiveCurrencyFormat})">
+				<s:NumericStepper id="pcfNS" middleClick="0" maximum="3" change="cf.positiveCurrencyFormat = pcfNS.value;formatCurr()"/>
+			</s:FormItem>
+			<s:Label text="==================================================================="/>
+			<s:FormItem label="Formatted Currency with ISO code is:">
+				<s:Label id="resultL"/>
+			</s:FormItem>
+			<s:FormItem label="Formatted Currency with currency symbol is:">
+				<s:Label id="resultSymbolL"/>
+			</s:FormItem>
+		</s:Form>
+
+	</s:Panel>
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml
index 05f17de..28a20a3 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml
@@ -21,23 +21,6 @@
 			   xmlns:s="library://ns.adobe.com/flex/spark"
 			   xmlns:mx="library://ns.adobe.com/flex/mx"
 			   width="100%" height="100%">
-	<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;
@@ -45,27 +28,31 @@
 			private var _locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','zh-CN','fr-FR']);
 		]]>
 	</fx:Script>
+
 	<fx:Declarations>
-		<!-- Place non-visual elements (e.g., services, value objects) here -->
 		<s:CurrencyValidator id="cv" source="{inputTI}" property="text" 
 							 maxValue="100" domain="int" locale="{localeCB.selectedItem}"/>
 	</fx:Declarations>
-	<s:Scroller width="100%" height="100%">
-		<s:Group>
-			<s:Form>
-				<s:Label id="titleL" text="Spark CurrencyValidator"/>
-				<s:Label text="Validate a currency number by using Spark CurrencyValidator"/>
-				<s:Spacer height="15"/>
-				<s:FormItem label="Locales:">
-					<s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"/>
-				</s:FormItem>
-				<s:FormItem label="Enter a currency number to validate: "
-							toolTip="The number should be an integer and less than 100">
-					<s:TextInput id="inputTI" text="{cv.currencySymbol}"
-								 toolTip="It shows the currency symbol of current locale already, please continue enter numbers to validate. 
-								 Make focus out of the text input to validate the number."/>
-				</s:FormItem>
-			</s:Form>
-		</s:Group>
-	</s:Scroller>
+
+	<s:Panel title="Spark CurrencyValidator" 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="Validate a currency number by using Spark CurrencyValidator"/>
+			<s:Spacer height="15"/>
+			<s:FormItem label="Locales:">
+				<s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"/>
+			</s:FormItem>
+			<s:FormItem label="Enter a currency number to validate: "
+						toolTip="The number should be an integer and less than 100">
+				<s:TextInput id="inputTI" text="{cv.currencySymbol}"
+							 toolTip="It shows the currency symbol of current locale already, please continue enter numbers to validate. 
+							 Make focus out of the text input to validate the number."/>
+			</s:FormItem>
+		</s:Form>
+
+	</s:Panel>
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml
index c988d93..734c8fa 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.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%">
-	<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[
@@ -64,9 +46,8 @@
 			
 		]]>
 	</fx:Script>
+	
 	<fx:Declarations>
-		<!-- Place non-visual elements (e.g., services, value objects) here -->
-		
 		<!--Click Tab key to validate the number-->
 		<s:CurrencyValidator id="cv1" source="{currTI1}" property="text"/>
 		<s:CurrencyValidator id="cv2" source="{currTI2}" property="text"/>
@@ -74,52 +55,51 @@
 		<s:CurrencyValidator id="cv4" source="{currTI4}" property="text" minValue="20" maxValue="200"/>
 		<s:CurrencyValidator id="cv5" source="{currTI5}" property="text" domain="int"/>
 	</fx:Declarations>
-	<s:layout>
-		<s:VerticalLayout/>
-	</s:layout>
-	<s:Scroller id="scroller" width="100%" height="100%">
-		<s:Group>
-			<s:Form>
-				<s:Label id="titleL" text="Spark CurrencyValidator"/>
-				<s:Label text="Create some criterions and validate the input number: "/>
-				<s:Spacer height="15"/>
-				<s:FormItem label="Locale:">
-					<s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0" updateComplete="localeCB_updateCompleteHandler(event)"/>
-				</s:FormItem>
-				<s:Label text="============================================================================"/>
-				<s:FormItem label="Currency symbol and ISO code based on current locale are:">
-					<s:HGroup>
-						<s:Label id="symbolL" text="Currency symbol:  {cv1.currencySymbol}"/>
-						<s:Label id="isoL" text="Currency ISO code:  {cv1.currencyISOCode}"/>
-					</s:HGroup>
-				</s:FormItem>
-				<s:FormItem label="Please enter an integer currency number with currency symbol:">
-					<s:TextInput id="currTI1" text="{cv1.currencySymbol}" 
-								 toolTip="Here is the correct currency symbol of current locale, please continue enter numbers to validate"/>
-				</s:FormItem>
-				<s:FormItem label="Please enter an integer currency number with currency ISO code:">
-					<s:TextInput id="currTI2" text="{cv1.currencyISOCode}" 
-								 toolTip="Here is the correct currency ISO code of current locale, please continue enter numbers to validate"/>
-				</s:FormItem>
-				<s:FormItem label="Please enter a currency number with at most two fractional digits:">
-					<s:TextInput id="currTI3" 
-								 toolTip="decimal separator of current locale is {cv3.decimalSeparator}"/>
-				</s:FormItem>
-				<s:FormItem label="Please enter a currency number between 20 and 200:">
-					<s:TextInput id="currTI4"/>
-				</s:FormItem>
-				<s:FormItem label="Please enter an integer currency number:">
-					<s:TextInput id="currTI5"/>
-				</s:FormItem>
-				<s:FormItem label="Click the button to validate all inputted currency number:">
-					<s:HGroup>
-						<s:Button label="Validate All" click="button1_clickHandler(event)"/>
-						<s:Label id="resultL"/>
-					</s:HGroup>
-				</s:FormItem>
-			</s:Form>
-		</s:Group>
-	</s:Scroller>
 	
-	
+	<s:Panel title="Spark CurrencyValidator" 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="Create some criterions and validate the input number: "/>
+			<s:Spacer height="15"/>
+			<s:FormItem label="Locale:">
+				<s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0" updateComplete="localeCB_updateCompleteHandler(event)"/>
+			</s:FormItem>
+			<s:Label text="============================================================================"/>
+			<s:FormItem label="Currency symbol and ISO code based on current locale are:">
+				<s:HGroup>
+					<s:Label id="symbolL" text="Currency symbol:  {cv1.currencySymbol}"/>
+					<s:Label id="isoL" text="Currency ISO code:  {cv1.currencyISOCode}"/>
+				</s:HGroup>
+			</s:FormItem>
+			<s:FormItem label="Please enter an integer currency number with currency symbol:">
+				<s:TextInput id="currTI1" text="{cv1.currencySymbol}" 
+							 toolTip="Here is the correct currency symbol of current locale, please continue enter numbers to validate"/>
+			</s:FormItem>
+			<s:FormItem label="Please enter an integer currency number with currency ISO code:">
+				<s:TextInput id="currTI2" text="{cv1.currencyISOCode}" 
+							 toolTip="Here is the correct currency ISO code of current locale, please continue enter numbers to validate"/>
+			</s:FormItem>
+			<s:FormItem label="Please enter a currency number with at most two fractional digits:">
+				<s:TextInput id="currTI3" 
+							 toolTip="decimal separator of current locale is {cv3.decimalSeparator}"/>
+			</s:FormItem>
+			<s:FormItem label="Please enter a currency number between 20 and 200:">
+				<s:TextInput id="currTI4"/>
+			</s:FormItem>
+			<s:FormItem label="Please enter an integer currency number:">
+				<s:TextInput id="currTI5"/>
+			</s:FormItem>
+			<s:FormItem label="Click the button to validate all inputted currency number:">
+				<s:HGroup>
+					<s:Button label="Validate All" click="button1_clickHandler(event)"/>
+					<s:Label id="resultL"/>
+				</s:HGroup>
+			</s:FormItem>
+		</s:Form>
+
+	</s:Panel>
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml
index 4761dd1..a00b586 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.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%">
-	<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;
@@ -47,27 +29,31 @@
 			private var locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','ar-SA','zh-CN']);
 		]]>
 	</fx:Script>
+
 	<fx:Declarations>
-		<!-- Place non-visual elements (e.g., services, value objects) here -->
 		<s:DateTimeFormatter id="dtf" locale="{localeCB.selectedItem}"/>
 	</fx:Declarations>
-	<s:Scroller width="100%" height="100%">
-		<s:Group>
-			<s:Form>
-				<s:Label id="titleL" text="Spark DateTimeFormatter"/>
-				<s:Label text="Format a date by using Spark DateTimeFormatter: "/>
-				<s:Spacer height="15"/>
-				
-				<s:FormItem label="Locales:">
-					<s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/>
-				</s:FormItem>
-				<s:FormItem label="Choose a date:">
-					<mx:DateChooser id="dateC" showToday="false"/>
-				</s:FormItem>
-				<s:FormItem label="Format result is:">
-					<s:Label id="resultL" text="{dtf.format(dateC.selectedDate)}"/>
-				</s:FormItem>
-			</s:Form>
-		</s:Group>
-	</s:Scroller>
+
+	<s:Panel title="Spark DateTimeFormatter" 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="Format a date by using Spark DateTimeFormatter: "/>
+			<s:Spacer height="15"/>
+			
+			<s:FormItem label="Locales:">
+				<s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/>
+			</s:FormItem>
+			<s:FormItem label="Choose a date:">
+				<mx:DateChooser id="dateC" showToday="false"/>
+			</s:FormItem>
+			<s:FormItem label="Format result is:">
+				<s:Label id="resultL" text="{dtf.format(dateC.selectedDate)}"/>
+			</s:FormItem>
+		</s:Form>
+		
+	</s:Panel>		
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml
index 15733c4..c205ce2 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml
@@ -21,25 +21,7 @@
 			   xmlns:s="library://ns.adobe.com/flex/spark"
 			   xmlns:mx="library://ns.adobe.com/flex/mx"
 			   width="100%" height="100%">
-	<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;
@@ -57,45 +39,48 @@
 			}
 		]]>
 	</fx:Script>
+	
 	<fx:Declarations>
-		<!-- Place non-visual elements (e.g., services, value objects) here -->
 		<s:DateTimeFormatter id="dtf"/>
 	</fx:Declarations>
+
 	<s:layout>
 		<s:VerticalLayout/>
 	</s:layout>
-	<s:Scroller id="scroller" width="100%" height="100%">
-		<s:Group>
-			<s:Form>
-				<s:Label id="titleL" text="Spark DateTimeFormatter"/>
-				<s:Label text="Select a locale to see the formatted date, weekday names and month names: "/>
-				<s:Spacer height="15"/>
-				
-				<s:FormItem label="Locale: ">
-					<s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0" updateComplete="dtf.setStyle('locale',localeCB.selectedItem)"/>
-				</s:FormItem>
-				<s:FormItem label="Please select the format of date:">
-					<s:ComboBox id="dtpCB" dataProvider="{dateTimePatternAryColl}" selectedIndex="0" updateComplete="dtf.dateTimePattern=dtpCB.selectedItem"/>
-				</s:FormItem>
-				<s:FormItem label="Please select a date to format:">
-					<mx:DateField id="dateField"/>
-				</s:FormItem>
-				<s:FormItem label="The Weekday Names are:">
-					<s:Label text="{dtf.getWeekdayNames()}"/>
-				</s:FormItem>
-				<s:FormItem label="The Month Names are:">
-					<s:Label text="{dtf.getMonthNames()}"/>
-				</s:FormItem>
-				<s:Label text="     ==========================================================================="/>
-				<s:FormItem label="The formatted result is:">
-					<s:Label id="resultL"/>
-				</s:FormItem>
-				<s:FormItem>
-					<s:Button id="bt" label="Format Date" click="formatDate()"/>
-				</s:FormItem>
-			</s:Form>
-		</s:Group>
-	</s:Scroller>
-	
-	
+
+	<s:Panel title="Spark DateTimeFormatter" 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="Select a locale to see the formatted date, weekday names and month names: "/>
+			<s:Spacer height="15"/>
+			
+			<s:FormItem label="Locale: ">
+				<s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0" updateComplete="dtf.setStyle('locale',localeCB.selectedItem)"/>
+			</s:FormItem>
+			<s:FormItem label="Please select the format of date:">
+				<s:ComboBox id="dtpCB" dataProvider="{dateTimePatternAryColl}" selectedIndex="0" updateComplete="dtf.dateTimePattern=dtpCB.selectedItem"/>
+			</s:FormItem>
+			<s:FormItem label="Please select a date to format:">
+				<mx:DateField id="dateField"/>
+			</s:FormItem>
+			<s:FormItem label="The Weekday Names are:">
+				<s:Label text="{dtf.getWeekdayNames()}"/>
+			</s:FormItem>
+			<s:FormItem label="The Month Names are:">
+				<s:Label text="{dtf.getMonthNames()}"/>
+			</s:FormItem>
+			<s:Label text="     ==========================================================================="/>
+			<s:FormItem label="The formatted result is:">
+				<s:Label id="resultL"/>
+			</s:FormItem>
+			<s:FormItem>
+				<s:Button id="bt" label="Format Date" click="formatDate()"/>
+			</s:FormItem>
+		</s:Form>
+
+	</s:Panel>
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml
index 7b92c15..6f40ffd 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml
@@ -20,39 +20,41 @@
 <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="haloSilver" fontSize="18" locale="{c.selectedItem}">
-	
-	<s:layout>
-		<s:VerticalLayout horizontalAlign="center" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" 
-						  gap="8"/>
-	</s:layout>
-	
+			   locale="{c.selectedItem}">
+
 	<fx:Declarations>
 		<s:CurrencyFormatter id="cf" useCurrencySymbol="true"/>
 		<s:DateTimeFormatter id="df"/>
 	</fx:Declarations>
 	
-	<s:Label text="Select a locale to see the formatted currency and date:"/>
-	<s:ComboBox id="c" selectedItem="en-US...">
-		<s:dataProvider>
-			<s:ArrayList>
-				<fx:String>de-DE</fx:String>
-				<fx:String>en-US</fx:String>
-				<fx:String>es-ES</fx:String>
-				<fx:String>fi-FI</fx:String>
-				<fx:String>fr-FR</fx:String>
-				<fx:String>it-IT</fx:String>
-				<fx:String>ja-JP</fx:String>
-				<fx:String>ko-KR</fx:String>
-				<fx:String>nb-NO</fx:String>
-				<fx:String>pt-PT</fx:String>
-				<fx:String>ru-RU</fx:String>
-				<fx:String>zh-CN</fx:String>
-			</s:ArrayList>
-		</s:dataProvider>
-	</s:ComboBox>
+	<s:Panel title="Spark Locale Formatter" width="100%" height="100%">
+
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+		
+		<s:Label text="Select a locale to see the formatted currency and date:"/>
+		<s:ComboBox id="c" selectedItem="en-US...">
+			<s:dataProvider>
+				<s:ArrayList>
+					<fx:String>de-DE</fx:String>
+					<fx:String>en-US</fx:String>
+					<fx:String>es-ES</fx:String>
+					<fx:String>fi-FI</fx:String>
+					<fx:String>fr-FR</fx:String>
+					<fx:String>it-IT</fx:String>
+					<fx:String>ja-JP</fx:String>
+					<fx:String>ko-KR</fx:String>
+					<fx:String>nb-NO</fx:String>
+					<fx:String>pt-PT</fx:String>
+					<fx:String>ru-RU</fx:String>
+					<fx:String>zh-CN</fx:String>
+				</s:ArrayList>
+			</s:dataProvider>
+		</s:ComboBox>
 	
-	<s:Label text="{cf.format(12.3)}"/>
-	<s:Label text="{df.format(new Date())}"/>
-	
+		<s:Label text="{cf.format(12.3)}"/>
+		<s:Label text="{df.format(new Date())}"/>
+
+	</s:Panel>
 </s:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatter2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatter2Example.mxml
index fcb52d1..ca6a7d3 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatter2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatter2Example.mxml
@@ -19,24 +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">
-	<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>
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	<fx:Script>
 		<![CDATA[
 			import mx.collections.ArrayCollection;
@@ -44,26 +27,30 @@
 			private var locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','ar-SA','zh-CN','fr-FR']);
 		]]>
 	</fx:Script>
+
 	<fx:Declarations>
-		<!-- Place non-visual elements (e.g., services, value objects) here -->
 		<s:NumberFormatter id="nf" locale="{localeCB.selectedItem}"/>
 	</fx:Declarations>
-	<s:Scroller width="100%" height="100%">
-		<s:Group>
-			<s:Form>
-				<s:Label id="titleL" text="Spark NumberFormatter"/>
-				<s:Label text="Format a number by using spark NumberFormatter"/>
-				<s:Spacer height="15"/>
-				<s:FormItem label="Locales:">
-					<s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/>
-				</s:FormItem>
-				<s:FormItem label="Please enter a number:">
-					<s:TextInput id="inputTI" text="12345"/>
-				</s:FormItem>
-				<s:FormItem label="Format result:">
-					<s:Label text="{nf.format(inputTI.text)}"/>
-				</s:FormItem>
-			</s:Form>
-		</s:Group>
-	</s:Scroller>
+
+	<s:Panel title="Spark NumberFormatter" 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="Format a number by using spark NumberFormatter"/>
+			<s:Spacer height="15"/>
+			<s:FormItem label="Locales:">
+				<s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/>
+			</s:FormItem>
+			<s:FormItem label="Please enter a number:">
+				<s:TextInput id="inputTI" text="12345"/>
+			</s:FormItem>
+			<s:FormItem label="Format result:">
+				<s:Label text="{nf.format(inputTI.text)}"/>
+			</s:FormItem>
+		</s:Form>
+		
+	</s:Panel>
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml
index ac05b0c..598a532 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml
@@ -21,23 +21,6 @@
 			   xmlns:s="library://ns.adobe.com/flex/spark"
 			   xmlns:mx="library://ns.adobe.com/flex/mx"
 			   width="100%" height="100%">
-	<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[
@@ -49,49 +32,48 @@
 			private var groupPatternArrColl:ArrayCollection = new ArrayCollection(['3;*', '1;*', '3;2;*', '3;2;1;*','2;1']);
 		]]>
 	</fx:Script>
+
 	<fx:Declarations>
-		<!-- Place non-visual elements (e.g., services, value objects) here -->
 		<s:NumberFormatter id="nf"  locale="{localeCB.selectedItem}"/>
 		<s:NumberFormatter id="nf_default" locale="{localeCB.selectedItem}"/>
 	</fx:Declarations>
-	<s:layout>
-		<s:VerticalLayout/>
-	</s:layout>
-	<s:Scroller id="scroller" width="100%" height="100%">
-		<s:Group>
-			<s:Form>
-				<s:Label id="titleL" text="Spark NumberFormatter"/>
-				<s:Label text="Select a locale to see the property value and formatted Number: "/>
-				<s:Spacer height="15"/>
-				
-				<s:FormItem label="Locale:">
-					<s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/>
-				</s:FormItem>
-				<s:FormItem label="Input a number to format:">
-					<s:TextInput id="inputTI" text="12345"/>
-				</s:FormItem>
-				<s:FormItem label="Fraction Digits: (default: {nf_default.fractionalDigits})">
-					<s:NumericStepper id="fdNS" maximum="10" minimum="0" change="nf.fractionalDigits = fdNS.value"/>
-				</s:FormItem>
-				<s:FormItem label="Decimal Separator: (default: {nf_default.decimalSeparator})">
-					<s:TextInput id="dsTI" change="nf.decimalSeparator = dsTI.text"/>
-				</s:FormItem>
-				<s:FormItem label="Grouping Pattern: (default: {nf_default.groupingPattern})">
-					<s:ComboBox id="gpCB" dataProvider="{groupPatternArrColl}" change="nf.groupingPattern = gpCB.selectedItem"/>
-				</s:FormItem>
-				<s:FormItem label="Grouping Separator: (default: {nf_default.groupingSeparator})">
-					<s:TextInput id="gsTI" change="nf.groupingSeparator = gsTI.text"/>
-				</s:FormItem>
-				<s:FormItem label="Negative Number Format: (default: {nf_default.negativeNumberFormat})">
-					<s:NumericStepper id="ncfNS" minimum="0" maximum="4" change="nf.negativeNumberFormat = ncfNS.value"/>
-				</s:FormItem>
-				<s:Label text="==================================================================="/>
-				<s:FormItem label="Formatted Number is:">
-					<s:Label id="resultL" text="{nf.format(inputTI.text)}"/>
-				</s:FormItem>
-			</s:Form>
-		</s:Group>
-	</s:Scroller>
-	
-	
+
+	<s:Panel title="Spark NumberFormatter" 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="Select a locale to see the property value and formatted Number: "/>
+			<s:Spacer height="15"/>
+			
+			<s:FormItem label="Locale:">
+				<s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/>
+			</s:FormItem>
+			<s:FormItem label="Input a number to format:">
+				<s:TextInput id="inputTI" text="12345"/>
+			</s:FormItem>
+			<s:FormItem label="Fraction Digits: (default: {nf_default.fractionalDigits})">
+				<s:NumericStepper id="fdNS" maximum="10" minimum="0" change="nf.fractionalDigits = fdNS.value"/>
+			</s:FormItem>
+			<s:FormItem label="Decimal Separator: (default: {nf_default.decimalSeparator})">
+				<s:TextInput id="dsTI" change="nf.decimalSeparator = dsTI.text"/>
+			</s:FormItem>
+			<s:FormItem label="Grouping Pattern: (default: {nf_default.groupingPattern})">
+				<s:ComboBox id="gpCB" dataProvider="{groupPatternArrColl}" change="nf.groupingPattern = gpCB.selectedItem"/>
+			</s:FormItem>
+			<s:FormItem label="Grouping Separator: (default: {nf_default.groupingSeparator})">
+				<s:TextInput id="gsTI" change="nf.groupingSeparator = gsTI.text"/>
+			</s:FormItem>
+			<s:FormItem label="Negative Number Format: (default: {nf_default.negativeNumberFormat})">
+				<s:NumericStepper id="ncfNS" minimum="0" maximum="4" change="nf.negativeNumberFormat = ncfNS.value"/>
+			</s:FormItem>
+			<s:Label text="==================================================================="/>
+			<s:FormItem label="Formatted Number is:">
+				<s:Label id="resultL" text="{nf.format(inputTI.text)}"/>
+			</s:FormItem>
+		</s:Form>
+		
+	</s:Panel>
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml
index f48f021..9457ebe 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.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%">
-	<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;
@@ -47,24 +29,28 @@
 			private var locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','ar-SA','zh-CN','fr-FR']);
 		]]>
 	</fx:Script>
+	
 	<fx:Declarations>
-		<!-- Place non-visual elements (e.g., services, value objects) here -->
 		<s:NumberValidator id="nv" source="{inputTI}" property="text" 
 						   minValue="100" domain="int" locale="{localeCB.selectedItem}"/>
 	</fx:Declarations>
-	<s:Scroller width="100%" height="100%">
-		<s:Group>
-			<s:Form>
-				<s:Label id="titleL" text="Spark NumberValidator"/>
-				<s:Label text="Validate a number by using Spark NumberValidator"/>
-				<s:Spacer height="15"/>
-				<s:FormItem label="Locale:">
-					<s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/>
-				</s:FormItem>
-				<s:FormItem label="Enter a number to validate:">
-					<s:TextInput id="inputTI" toolTip="The number should be an integer which greater than 100."/>
-				</s:FormItem>
-			</s:Form>
-		</s:Group>
-	</s:Scroller>
+
+	<s:Panel title="Spark NumberValidator" 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="Validate a number by using Spark NumberValidator"/>
+			<s:Spacer height="15"/>
+			<s:FormItem label="Locale:">
+				<s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/>
+			</s:FormItem>
+			<s:FormItem label="Enter a number to validate:">
+				<s:TextInput id="inputTI" toolTip="The number should be an integer which greater than 100."/>
+			</s:FormItem>
+		</s:Form>
+
+	</s:Panel>
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml
index 4372338..aa30ea6 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.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%">
-	<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[
@@ -51,54 +33,51 @@
 			
 		]]>
 	</fx:Script>
+	
 	<fx:Declarations>
-		<!-- Place non-visual elements (e.g., services, value objects) here -->
-		
-		<!--Click Tab key to validate the number-->
 		<s:NumberValidator id="nv" source="{inputTI}" property="text"/>
 	</fx:Declarations>
-	<s:layout>
-		<s:VerticalLayout/>
-	</s:layout>
-	<s:Scroller id="scroller" width="100%" height="100%">
-		<s:Group>
-			<s:Form>
-				<s:Label id="titleL" text="Spark NumberValidator"/>
-				<s:Label text="Create some criterions and validate the input number: "/>
-				<s:Spacer height="15"/>
-				
-				<s:FormItem label="Locale:">
-					<s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0" updateComplete="nv.setStyle('locale',localeCB.selectedItem);"/>
-				</s:FormItem>
-				<s:Label text="==================================================================="/>
-				<s:Label text="     Create some criterions to validate number:" color="#DEB887"/>
-				<s:FormItem label="Max Value:">
-					<s:TextInput id="maxTI" change="nv.maxValue = Number(maxTI.text)"/>
-				</s:FormItem>
-				<s:FormItem label="Min Value:">
-					<s:TextInput id="minTI" change="nv.minValue = Number(minTI.text)"/>
-				</s:FormItem>
-				<s:FormItem label="Fraction Digits:">
-					<s:NumericStepper id="fdNS" maximum="5" minimum="0" change="nv.fractionalDigits = fdNS.value"/>
-				</s:FormItem>
-				<s:FormItem label="Decimal Separator:">
-					<s:TextInput id="dsTI" change="nv.decimalSeparator = dsTI.text"/>
-				</s:FormItem>
-				<s:FormItem label="Grouping Separator:">
-					<s:TextInput id="gsTI" change="nv.groupingSeparator = gsTI.text"/>
-				</s:FormItem>
-				<s:Label text="     Customize error messages:" color="#DEB887"
-						 toolTip="Spark NumberValidator provide the ability to let user customize all the error messages."/>
-				<s:FormItem label="Greater Than Max Error:" toolTip="Error message when the value exceeds the max value.">
-					<s:TextInput id="gtmTI" change="nv.greaterThanMaxError = gtmTI.text"/>
-				</s:FormItem>
-				<s:Label text="==================================================================="/>
-				<s:FormItem label="Input a number and press TAB key to validate:">
-					<s:TextInput id="inputTI"/>
-				</s:FormItem>
-			</s:Form>
-		</s:Group>
-	</s:Scroller>
-	
-	
+
+	<s:Panel title="Spark NumberValidator" 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="Create some criterions and validate the input number: "/>
+			<s:Spacer height="15"/>
+			
+			<s:FormItem label="Locale:">
+				<s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0" updateComplete="nv.setStyle('locale',localeCB.selectedItem)"/>
+			</s:FormItem>
+			<s:Label text="==================================================================="/>
+			<s:Label text="     Create some criterions to validate number:" />
+			<s:FormItem label="Max Value:">
+				<s:TextInput id="maxTI" change="nv.maxValue = Number(maxTI.text)"/>
+			</s:FormItem>
+			<s:FormItem label="Min Value:">
+				<s:TextInput id="minTI" change="nv.minValue = Number(minTI.text)"/>
+			</s:FormItem>
+			<s:FormItem label="Fraction Digits:">
+				<s:NumericStepper id="fdNS" maximum="5" minimum="0" change="nv.fractionalDigits = fdNS.value"/>
+			</s:FormItem>
+			<s:FormItem label="Decimal Separator:">
+				<s:TextInput id="dsTI" change="nv.decimalSeparator = dsTI.text"/>
+			</s:FormItem>
+			<s:FormItem label="Grouping Separator:">
+				<s:TextInput id="gsTI" change="nv.groupingSeparator = gsTI.text"/>
+			</s:FormItem>
+			<s:Label text="     Customize error messages:"
+					 toolTip="Spark NumberValidator provide the ability to let user customize all the error messages."/>
+			<s:FormItem label="Greater Than Max Error:" toolTip="Error message when the value exceeds the max value.">
+				<s:TextInput id="gtmTI" change="nv.greaterThanMaxError = gtmTI.text"/>
+			</s:FormItem>
+			<s:Label text="==================================================================="/>
+			<s:FormItem label="Input a number and press TAB key to validate:">
+				<s:TextInput id="inputTI"/>
+			</s:FormItem>
+		</s:Form>
+
+	</s:Panel>
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml
index f35634e..c8d1044 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.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%">
-	<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, s|List {
-			alternating-item-colors: #424242;
-		}
-		
-		s|Form {
-			background-color: #424242;
-		}
-	</fx:Style>
 	<fx:Script>
 		<![CDATA[
 			import mx.collections.ArrayCollection;
@@ -56,27 +38,30 @@
 			
 		]]>
 	</fx:Script>
+
 	<fx:Declarations>
-		<!-- Place non-visual elements (e.g., services, value objects) here -->
 		<s:Sort id="mySort" locale="{localeCB.selectedItem}"/>
 		<s:SortField id="sortField" />
 	</fx:Declarations>
-	<s:Scroller width="100%" height="100%">
-		<s:Group>
-			<s:Form>
-				<s:Label id="titleL" text="Spark Sort and SortField"/>
-				<s:Label text="Sort strings in List by using Spark Sort and SortField"/>
-				<s:Spacer height="15"/>
-				<s:FormItem label="Locale: ">
-					<s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"/>
-				</s:FormItem>
-				<s:FormItem label="List: ">
-					<s:List dataProvider="{employeeArrColl}"/>
-				</s:FormItem>
-				<s:FormItem>
-					<s:Button label="Click to sort" click="button1_clickHandler(event)"/>
-				</s:FormItem>
-			</s:Form>
-		</s:Group>
-	</s:Scroller>
+
+	<s:Panel title="Spark Sort and SortField" 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="Sort strings in List by using Spark Sort and SortField"/>
+			<s:Spacer height="15"/>
+			<s:FormItem label="Locale: ">
+				<s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"/>
+			</s:FormItem>
+			<s:FormItem label="List: ">
+				<s:List dataProvider="{employeeArrColl}"/>
+			</s:FormItem>
+			<s:FormItem>
+				<s:Button label="Click to sort" click="button1_clickHandler(event)"/>
+			</s:FormItem>
+		</s:Form>
+	</s:Panel>
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml
index 3fcd65c..eddd88d 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.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%">
-	<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[
@@ -69,8 +51,8 @@
 			}
 		]]>
 	</fx:Script>
+	
 	<fx:Declarations>
-		<!-- Place non-visual elements (e.g., services, value objects) here -->
 		<s:Sort id="mySort" locale="{localeCB.selectedItem}"/>
 		
 		<s:SortField id="firstField" name="first"/>
@@ -87,36 +69,39 @@
 			<fx:Object first="Torolf" last="Aaron" age="40"/>
 		</s:ArrayCollection>
 	</fx:Declarations>
-	<s:Scroller id="scroller" width="100%" height="100%">
-		<s:Group>
-			<s:Form>
-				<s:Label id="titleL" text="Spark Sort and SortField"/>
-				<s:Label text="Select a locale to see the strings sorting result:"/>
-				<s:Spacer height="15"/>
-				
-				<s:FormItem label="Locale: ">
-					<s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"/>
-				</s:FormItem>
-				<s:Label text="     ==========================================================================="/>
-				<s:FormItem label="Sorting Priority:" toolTip="Click priority radio button to sort multiple columns">
-					<s:RadioButton id="flaRB" groupName="priority" label="first name > last name > age" click="sortInOrder(1)"/>
-					<s:RadioButton id="lfaRB" groupName="priority" label="last name > first name > age" click="sortInOrder(2)"/>
-					<s:RadioButton id="alfRB" groupName="priority" label="age > first name > last name" click="sortInOrder(3)"/>
-					<s:RadioButton id="falRB" groupName="priority" label="first name > age > last name" click="sortInOrder(4)"/>
-				</s:FormItem>
-				<s:FormItem label="Employee Table:" toolTip="Click data grid column header to sort single one column">
-					<s:DataGrid id="dg" dataProvider="{employeeArrColl}" width="100%">
-						<s:columns>
-							<s:ArrayList>
-								<s:GridColumn dataField="first" headerText="First Name"/>
-								<s:GridColumn dataField="last" headerText="Last Name"/>
-								<s:GridColumn dataField="age" headerText="Age"/>
-							</s:ArrayList>
-						</s:columns>
-					</s:DataGrid>
-				</s:FormItem>
-			</s:Form>
-		</s:Group>
-	</s:Scroller>
 	
+	<s:Panel title="Spark Sort and SortField" 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="Select a locale to see the strings sorting result:"/>
+			<s:Spacer height="15"/>
+			
+			<s:FormItem label="Locale: ">
+				<s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"/>
+			</s:FormItem>
+			<s:Label text="     ==========================================================================="/>
+			<s:FormItem label="Sorting Priority:" toolTip="Click priority radio button to sort multiple columns">
+				<s:RadioButton id="flaRB" groupName="priority" label="first name > last name > age" click="sortInOrder(1)"/>
+				<s:RadioButton id="lfaRB" groupName="priority" label="last name > first name > age" click="sortInOrder(2)"/>
+				<s:RadioButton id="alfRB" groupName="priority" label="age > first name > last name" click="sortInOrder(3)"/>
+				<s:RadioButton id="falRB" groupName="priority" label="first name > age > last name" click="sortInOrder(4)"/>
+			</s:FormItem>
+			<s:FormItem label="Employee Table:" toolTip="Click data grid column header to sort single one column">
+				<s:DataGrid id="dg" dataProvider="{employeeArrColl}" width="100%">
+					<s:columns>
+						<s:ArrayList>
+							<s:GridColumn dataField="first" headerText="First Name"/>
+							<s:GridColumn dataField="last" headerText="Last Name"/>
+							<s:GridColumn dataField="age" headerText="Age"/>
+						</s:ArrayList>
+					</s:columns>
+				</s:DataGrid>
+			</s:FormItem>
+		</s:Form>
+
+	</s:Panel>	
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml
index fad6eb8..e583183 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml
@@ -21,28 +21,6 @@
 			   xmlns:s="library://ns.adobe.com/flex/spark"
 			   xmlns:mx="library://ns.adobe.com/flex/mx"
 			   width="100%" height="100%">
-	<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;
-		}
-		
-		s|List {
-			alternating-item-colors: #424242;
-		}
-	</fx:Style>
 	<fx:Script>
 		<![CDATA[
 			import mx.collections.ArrayCollection;
@@ -92,33 +70,33 @@
 			}  
 		]]>
 	</fx:Script>
+	
 	<fx:Declarations>
-		<!-- Place non-visual elements (e.g., services, value objects) here -->
 		<s:StringTools id="st"/>
 	</fx:Declarations>
-	<s:layout>
-		<s:VerticalLayout/>
-	</s:layout>
-	<s:Scroller id="scroller" width="100%" height="100%">
-		<s:Group>
-			<s:Form>
-				<s:Label id="titleL" text="Spark StringTools"/>
-				<s:Label text="Enter strings and find the case conversion result"/>
-				<s:Spacer height="15"/>
-				<s:FormItem label="Locales:">
-					<s:ComboBox id="localesCB" dataProvider="{_locales}" selectedIndex="0" change="localesCB_changeHandler()"/>
-				</s:FormItem>
-				<s:FormItem label="Please enter a string:">
-					<s:TextInput id="inputTI" width="380" text="{_initStr}" change="converString()"/>
-				</s:FormItem>
-				<s:FormItem label="ToLowerCase:">
-					<s:Label id="lowerL"/>
-				</s:FormItem>
-				<s:FormItem label="ToUpperCase:">
-					<s:Label id="upperL"/>
-				</s:FormItem>
-			</s:Form>
-		</s:Group>
-	</s:Scroller>
+
+	<s:Panel title="Spark StringTools" 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="Enter strings and find the case conversion result"/>
+			<s:Spacer height="15"/>
+			<s:FormItem label="Locales:">
+				<s:ComboBox id="localesCB" dataProvider="{_locales}" selectedIndex="0" change="localesCB_changeHandler()"/>
+			</s:FormItem>
+			<s:FormItem label="Please enter a string:">
+				<s:TextInput id="inputTI" width="380" text="{_initStr}" change="converString()"/>
+			</s:FormItem>
+			<s:FormItem label="ToLowerCase:">
+				<s:Label id="lowerL"/>
+			</s:FormItem>
+			<s:FormItem label="ToUpperCase:">
+				<s:Label id="upperL"/>
+			</s:FormItem>
+		</s:Form>
+	</s:Panel>
 </s:Application>
 
diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer1Example.mxml
index 3c21155..eede007 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer1Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer1Example.mxml
@@ -27,8 +27,6 @@
 		<![CDATA[
 			import mx.collections.XMLListCollection;
 			
-			import skins.TDFPanelSkin;
-			
 			[Bindable]
 			private var employees:XMLListCollection;
 			
@@ -44,16 +42,16 @@
 		]]>
 	</fx:Script>
 
-	<s:Panel width="100%" height="100%" title="Custom Item Renderer with Animation" skinClass="skins.TDFPanelSkin">
+	<s:Panel title="Custom Item Renderer with Animation" width="100%" height="100%">
 		<s:layout>
-			<s:HorizontalLayout paddingLeft="100" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
 		</s:layout>
 		<s:DataGroup dataProvider="{employees}" width="300" itemRenderer="renderers.ImageRenderer1">
 			<s:layout>
 				<s:TileLayout horizontalGap="0" verticalGap="0"/>
 			</s:layout>
 		</s:DataGroup>
-		<s:Label color="0x323232" width="200" text="The item renderer on this DataGroup uses the Spark Animate to scale the image
+		<s:Label width="200" text="The item renderer on this DataGroup uses the Spark Animate to scale the image
 when hovered over each item. See the ImageRenderer1.mxml source for more information."/>
 	</s:Panel>
 	
diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer2Example.mxml
index 29ab4ca..96f565f 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer2Example.mxml
@@ -52,9 +52,9 @@
 		]]>
 	</fx:Script>
 	
-	<s:Panel width="100%" height="100%" title="Custom Item Renderer with Animation" skinClass="skins.TDFPanelSkin">
+	<s:Panel title="Custom Item Renderer with Animation" width="100%" height="100%">
 		<s:layout>
-			<s:HorizontalLayout paddingTop="2" paddingLeft="50" paddingRight="8"/>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
 		</s:layout>
 		
 		<s:DataGroup dataProvider="{employees}" width="440" itemRenderer="renderers.ImageRenderer2" horizontalCenter="0" verticalCenter="0">
@@ -62,7 +62,7 @@
 				<s:TileLayout />
 			</s:layout>
 		</s:DataGroup>
-		<s:Label color="0x323232" width="200" text="The item renderer on this DataGroup uses effects to provide a
+		<s:Label width="200" text="The item renderer on this DataGroup uses effects to provide a
 Spark 3D rotation effect when hovered over each item. See the ImageRenderer2.mxml source for more information. This sample also 
 shows the use of a special font for the text."/>
 	</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ListItemRendererExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ListItemRendererExample.mxml
index 8ac0f7a..04b9dbe 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ListItemRendererExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ListItemRendererExample.mxml
@@ -58,7 +58,7 @@
 		
 	<s:Panel title="List Sample" 
 			 width="100%" height="100%"  
-			 skinClass="skins.TDFPanelSkin">
+			 >
 		<s:VGroup id="vGrp" horizontalCenter="0" top="3" 
 				  width="80%" height="75%">
 			<s:HGroup verticalAlign="middle">
@@ -91,7 +91,7 @@
 				</s:VGroup>
 			</s:HGroup>
 		</s:VGroup>
-		<s:Label bottom="15" horizontalCenter="0" width="95%" verticalAlign="justify" color="#323232" 
+		<s:Label bottom="15" horizontalCenter="0" width="95%" verticalAlign="justify" 
 					  text="The Spark List control displays a list of data items. Its functionality is
 very similar to that of the SELECT form element in HTML. The user can select one or more items from the list. 
 The List control automatically displays horizontal and vertical scroll bar when the list items do not fit 
diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/skins/TDFPanelSkin.mxml
deleted file mode 100644
index 4b06e54..0000000
--- a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/skins/TDFPanelSkin.mxml
+++ /dev/null
@@ -1,170 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-
-  Licensed to the Apache Software Foundation (ASF) under one or more
-  contributor license agreements.  See the NOTICE file distributed with
-  this work for additional information regarding copyright ownership.
-  The ASF licenses this file to You under the Apache License, Version 2.0
-  (the "License"); you may not use this file except in compliance with
-  the License.  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-
--->
-
-
-<!--- Custom Spark Panel Skin created for Tour de Flex.  
-
-@langversion 3.0
-@playerversion Flash 10
-@playerversion AIR 1.5
-@productversion Flex 4
--->
-<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"
-			 blendMode.disabled="layer">
-	
-	<fx:Metadata>
-		<![CDATA[ 
-		/** 
-		* @copy spark.skins.spark.ApplicationSkin#hostComponent
-		*/
-		[HostComponent("spark.components.Panel")]
-		]]>
-	</fx:Metadata> 
-	
-	<fx:Script>
-		/* Define the skin elements that should not be colorized. 
-		For panel, border and title backround are skinned, but the content area and title text are not. */
-		static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"];
-		
-		/** 
-		 * @copy spark.skins.SparkSkin#colorizeExclusions
-		 */     
-		override public function get colorizeExclusions():Array {return exclusions;}
-		
-		/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
-		static private const contentFill:Array = [];
-		
-		/**
-		 * @inheritDoc
-		 */
-		override public function get contentItems():Array {return contentFill};
-	</fx:Script>
-	
-	<s:states>
-		<s:State name="normal" />
-		<s:State name="disabled" />
-		<s:State name="normalWithControlBar" />
-		<s:State name="disabledWithControlBar" />
-	</s:states>
-	
-	<!-- drop shadow -->
-	<s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11" 
-							 angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
-	
-	<!-- layer 1: border -->
-	<s:Rect left="0" right="0" top="0" bottom="0">
-		<s:stroke>
-			<s:SolidColorStroke color="0" alpha="0.50" weight="1" />
-		</s:stroke>
-	</s:Rect>
-	
-	
-	<!-- layer 2: background fill -->
-	<s:Rect left="0" right="0" bottom="0" height="15">
-		<s:fill>
-			<s:LinearGradient rotation="90">
-				<s:GradientEntry color="0xE2E2E2" />
-				<s:GradientEntry color="0x000000" />
-			</s:LinearGradient>
-		</s:fill>
-	</s:Rect>
-	
-	<!-- layer 3: contents -->
-	<!--- contains the vertical stack of titlebar content and controlbar -->
-	<s:Group left="1" right="1" top="1" bottom="1" >
-		<s:layout>
-			<s:VerticalLayout gap="0" horizontalAlign="justify" />
-		</s:layout>
-		
-		<s:Group id="topGroup" >
-			<!-- layer 0: title bar fill -->
-			<!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex -->
-			<s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
-				<s:fill>
-					<s:SolidColor color="0x000000" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 1: title bar highlight -->
-			<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
-				<s:stroke>
-					<s:LinearGradientStroke rotation="90" weight="1">
-						<s:GradientEntry color="0xEAEAEA" />
-						<s:GradientEntry color="0xD9D9D9" />
-					</s:LinearGradientStroke>
-				</s:stroke>
-			</s:Rect>
-			
-			<!-- layer 2: title bar divider -->
-			<s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
-				<s:fill>
-					<s:SolidColor color="0xC0C0C0" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 3: text -->
-			<!--- Defines the appearance of the PanelSkin class's title bar. -->
-			<!-- Note: The title text display has been slightly modified for Tour de Flex. -->
-			<s:Label id="titleDisplay" lineBreak="explicit"
-						  left="9" top="1" bottom="0" minHeight="30"
-						  verticalAlign="middle" fontWeight="bold" color="#E2E2E2">
-			</s:Label>
-		</s:Group>
-		
-		<!--
-		Note: setting the minimum size to 0 here so that changes to the host component's
-		size will not be thwarted by this skin part's minimum size.   This is a compromise,
-		more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
-		-->
-		<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
-		</s:Group>
-		
-		<s:Group id="bottomGroup" minWidth="0" minHeight="0"
-				 includeIn="normalWithControlBar, disabledWithControlBar" >
-			
-			<!-- layer 0: control bar background -->
-			<!-- Note: We are skinning this to be the gradient in case we do specify control
-			bar content, but it will only display if there's a controlBarContent
-			property specified.-->
-			<s:Rect left="0" right="0" bottom="0" top="0" height="15">
-				<s:fill>
-					<s:LinearGradient rotation="90">
-						<s:GradientEntry color="0xE2E2E2" />
-						<s:GradientEntry color="0x000000" />
-					</s:LinearGradient>
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 1: control bar divider line -->
-			<s:Rect left="0" right="0" top="0" height="1" >
-				<s:fill>
-					<s:SolidColor color="0xCDCDCD" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 2: control bar -->
-			<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0">
-				<s:layout>
-					<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
-				</s:layout>
-			</s:Group>
-		</s:Group>
-	</s:Group>
-</s:SparkSkin>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutAnimatedExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutAnimatedExample.mxml
index c8964a0..a09fc74 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutAnimatedExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutAnimatedExample.mxml
@@ -21,22 +21,8 @@
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
 			   xmlns:mx="library://ns.adobe.com/flex/mx" 
 			   xmlns:local="*" xmlns:layouts="layouts.*"
-			   backgroundColor="0x323232" color="0xFFFFFF"
 			   initialize="init()">
 	
-	<fx:Style>
-
-		@namespace s "library://ns.adobe.com/flex/spark";
-		@namespace mx "library://ns.adobe.com/flex/mx";
-		
-		
-		s|Application {
-			font-family: main;
-			font-size: 14;
-		}
-		
-	</fx:Style>
-	
 	<fx:Script>
 		<![CDATA[
 			import mx.collections.ArrayCollection;
@@ -94,19 +80,26 @@
 		]]>
 	</fx:Script>
 
-	<s:HGroup verticalAlign="middle" paddingLeft="8" left="50" top="5">
-		<s:Label text="Max Price:"/>
-		<s:HSlider id="priceSlider" minimum="0" maximum="1000" snapInterval="100" value="@{_maxPrice}" change="selectionChange()"/>
-		<mx:Spacer width="20"/>
-		<s:CheckBox label="Camera" selected="@{_camera}" change="selectionChange()"/>
-		<s:CheckBox label="Video" selected="@{_video}" change="selectionChange()"/>
-		<s:CheckBox label="Triband" selected="@{_triband}" change="selectionChange()"/>
-	</s:HGroup>
-	
-	<s:DataGroup dataProvider="{items}" itemRenderer="renderers.PhoneRenderer" top="50" left="0" right="0" horizontalCenter="0">
+	<s:Panel title="Custom Layout Sample" width="100%" height="100%">
+		
 		<s:layout>
-			<layouts:FilteredTileLayout id="filterLayout" filteredItems="{filteredItems}" />
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
 		</s:layout>
-	</s:DataGroup>
-	
+		
+		<s:HGroup>
+			<s:Label text="Max Price:"/>
+			<s:HSlider id="priceSlider" minimum="0" maximum="1000" snapInterval="100" value="@{_maxPrice}" change="selectionChange()"/>
+			<mx:Spacer width="20"/>
+			<s:CheckBox label="Camera" selected="@{_camera}" change="selectionChange()"/>
+			<s:CheckBox label="Video" selected="@{_video}" change="selectionChange()"/>
+			<s:CheckBox label="Triband" selected="@{_triband}" change="selectionChange()"/>
+		</s:HGroup>
+		
+		<s:DataGroup dataProvider="{items}" itemRenderer="renderers.PhoneRenderer" width="100%" height="100%">
+			<s:layout>
+				<layouts:FilteredTileLayout id="filterLayout" filteredItems="{filteredItems}" />
+			</s:layout>
+		</s:DataGroup>
+		
+	</s:Panel>
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml
index 5a0895e..9726467 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml
@@ -23,7 +23,7 @@
                 xmlns:my="*" minWidth="600" minHeight="350" 
 				applicationComplete="requestPhotos()" backgroundColor="0x323232">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
             import mx.collections.ArrayCollection;
             import mx.rpc.events.ResultEvent;
@@ -54,30 +54,31 @@
             result="photoHandler(event)" />
     </fx:Declarations>
     
-    <s:layout>
-        <s:VerticalLayout paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"/>
-    </s:layout>
-	
-	<s:HGroup verticalAlign="middle">
-		<s:Label text="Flickr tags or search terms:" color="0xFFFFFF"/>
-		<s:TextInput id="searchTerms"
-			enter="requestPhotos()" text="bugs" />
-		<s:Button label="Search" 
-			click="requestPhotos()" />
-		<!-- The slider to control the axis angle -->
-		<s:HSlider id="axisSlider" minimum="-90" maximum="90"
-				   value="10" liveDragging="true" width="300"/>
-	</s:HGroup>
-
-	<s:List width="700" height="225"
-		dataProvider="{photoFeed}"
-		itemRenderer="FlickrThumbnail"
-        id="theList">
+	<s:Panel title="Image Wheel Sample" width="100%" height="100%">
+	    <s:layout>
+	        <s:VerticalLayout paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"/>
+	    </s:layout>
 		
-		<s:layout>
-		    <my:WheelLayout gap="20" axisAngle="{axisSlider.value}"/>
-		</s:layout>
-	</s:List>
-
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Flickr tags or search terms:" color="0xFFFFFF"/>
+			<s:TextInput id="searchTerms"
+				enter="requestPhotos()" text="bugs" />
+			<s:Button label="Search" 
+				click="requestPhotos()" />
+			<!-- The slider to control the axis angle -->
+			<s:HSlider id="axisSlider" minimum="-90" maximum="90"
+					   value="10" liveDragging="true" width="300"/>
+		</s:HGroup>
+	
+		<s:List width="100%" height="100%"
+			dataProvider="{photoFeed}"
+			itemRenderer="FlickrThumbnail"
+	        id="theList">
+			
+			<s:layout>
+			    <my:WheelLayout gap="20" axisAngle="{axisSlider.value}"/>
+			</s:layout>
+		</s:List>
+	</s:Panel>
    
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlowExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlowExample.mxml
index a3a6dab..4f282aa 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlowExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlowExample.mxml
@@ -22,7 +22,7 @@
 				xmlns:mx="library://ns.adobe.com/flex/halo"
 				xmlns:my="*">
 	
-	<s:Panel width="100%" height="100%" title="Custom Layout - Flow Layout" skinClass="skins.TDFPanelSkin">
+	<s:Panel width="100%" height="100%" title="Custom Layout - Flow Layout" >
 		<s:layout>
 			<s:VerticalLayout horizontalAlign="center"
 							  paddingTop="10" gap="10"/>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutHBaselineExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutHBaselineExample.mxml
index 23ec216..19d74e8 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutHBaselineExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutHBaselineExample.mxml
@@ -26,8 +26,6 @@
 		<![CDATA[
 			import mx.events.FlexEvent;
 			
-			import skins.TDFPanelSkin;
-			
 			protected function update(event:Event):void
 			{
 				globalBaseline.top = theLayout.actualBaseline;
@@ -41,7 +39,7 @@
 		]]>
 	</fx:Script>
 	
-	<s:Panel width="100%" height="100%" skinClass="skins.TDFPanelSkin" title="CustomLayout with HBaselineLayout">
+	<s:Panel width="100%" height="100%" title="CustomLayout with HBaselineLayout">
 		
 		<!-- Controls -->
 		<s:HGroup left="14" top="5">
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/FlickrThumbnail.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/FlickrThumbnail.mxml
index 8667a8f..91c690d 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/layouts/FlickrThumbnail.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/FlickrThumbnail.mxml
@@ -21,7 +21,7 @@
                 xmlns:s="library://ns.adobe.com/flex/spark"
                 xmlns:mx="library://ns.adobe.com/flex/mx" click="itemrenderer1_clickHandler(event)">
 
-    <fx:Script>
+     <fx:Script>
         <![CDATA[
             import spark.components.supportClasses.GroupBase;
             import spark.effects.Animate;
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/skins/TDFPanelSkin.mxml
deleted file mode 100644
index f9151dc..0000000
--- a/TourDeFlex/TourDeFlex3/src/spark/layouts/skins/TDFPanelSkin.mxml
+++ /dev/null
@@ -1,171 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-
-  Licensed to the Apache Software Foundation (ASF) under one or more
-  contributor license agreements.  See the NOTICE file distributed with
-  this work for additional information regarding copyright ownership.
-  The ASF licenses this file to You under the Apache License, Version 2.0
-  (the "License"); you may not use this file except in compliance with
-  the License.  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-
--->
-
-
-<!--- Custom Spark Panel Skin created for Tour de Flex.  
-
-@langversion 3.0
-@playerversion Flash 10
-@playerversion AIR 1.5
-@productversion Flex 4
--->
-<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"
-			 blendMode.disabled="layer">
-	
-	<fx:Metadata>
-		<![CDATA[ 
-		/** 
-		* @copy spark.skins.spark.ApplicationSkin#hostComponent
-		*/
-		[HostComponent("spark.components.Panel")]
-		]]>
-	</fx:Metadata> 
-	
-	<fx:Script>
-		/* Define the skin elements that should not be colorized. 
-		For panel, border and title backround are skinned, but the content area and title text are not. */
-		static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"];
-		
-		/** 
-		 * @copy spark.skins.SparkSkin#colorizeExclusions
-		 */     
-		override public function get colorizeExclusions():Array {return exclusions;}
-		
-		/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
-		static private const contentFill:Array = [];
-		
-		/**
-		 * @inheritDoc
-		 */
-		override public function get contentItems():Array {return contentFill};
-	</fx:Script>
-	
-	<s:states>
-		<s:State name="normal" />
-		<s:State name="disabled" />
-		<s:State name="normalWithControlBar" />
-		<s:State name="disabledWithControlBar" />
-	</s:states>
-	
-	<!-- drop shadow -->
-	<s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11" 
-							 angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
-	
-	<!-- layer 1: border -->
-	<s:Rect left="0" right="0" top="0" bottom="0">
-		<s:stroke>
-			<s:SolidColorStroke color="0" alpha="0.50" weight="1" />
-		</s:stroke>
-	</s:Rect>
-	
-	
-	<!-- layer 2: background fill -->
-	<!-- This layer was modified for Tour de Flex samples to have a gradient border at the bottom. -->
-	<s:Rect left="0" right="0" bottom="0" height="15">
-		<s:fill>
-			<s:LinearGradient rotation="90">
-				<s:GradientEntry color="0xE2E2E2" />
-				<s:GradientEntry color="0x000000" />
-			</s:LinearGradient>
-		</s:fill>
-	</s:Rect>
-	
-	<!-- layer 3: contents -->
-	<!--- contains the vertical stack of titlebar content and controlbar -->
-	<s:Group left="1" right="1" top="1" bottom="1" >
-		<s:layout>
-			<s:VerticalLayout gap="0" horizontalAlign="justify" />
-		</s:layout>
-		
-		<s:Group id="topGroup" >
-			<!-- layer 0: title bar fill -->
-			<!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex -->
-			<s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
-				<s:fill>
-					<s:SolidColor color="0x000000" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 1: title bar highlight -->
-			<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
-				<s:stroke>
-					<s:LinearGradientStroke rotation="90" weight="1">
-						<s:GradientEntry color="0xEAEAEA" />
-						<s:GradientEntry color="0xD9D9D9" />
-					</s:LinearGradientStroke>
-				</s:stroke>
-			</s:Rect>
-			
-			<!-- layer 2: title bar divider -->
-			<s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
-				<s:fill>
-					<s:SolidColor color="0xC0C0C0" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 3: text -->
-			<!--- Defines the appearance of the PanelSkin class's title bar. -->
-			<!-- Note: The title text display has been slightly modified for Tour de Flex. -->
-			<s:Label id="titleDisplay" lineBreak="explicit"
-						  left="9" top="1" bottom="0" minHeight="30"
-						  verticalAlign="middle" fontWeight="bold" color="#E2E2E2">
-			</s:Label>
-		</s:Group>
-		
-		<!--
-		Note: setting the minimum size to 0 here so that changes to the host component's
-		size will not be thwarted by this skin part's minimum size.   This is a compromise,
-		more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
-		-->
-		<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
-		</s:Group>
-		
-		<s:Group id="bottomGroup" minWidth="0" minHeight="0"
-				 includeIn="normalWithControlBar, disabledWithControlBar" >
-			
-			<!-- layer 0: control bar background -->
-			<!-- Note: We are skinning this to be the gradient in case we do specify control
-			bar content, but it will only display if there's a controlBarContent
-			property specified.-->
-			<s:Rect left="0" right="0" bottom="0" top="0" height="15">
-				<s:fill>
-					<s:LinearGradient rotation="90">
-						<s:GradientEntry color="0xE2E2E2" />
-						<s:GradientEntry color="0x000000" />
-					</s:LinearGradient>
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 1: control bar divider line -->
-			<s:Rect left="0" right="0" top="0" height="1" >
-				<s:fill>
-					<s:SolidColor color="0xCDCDCD" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 2: control bar -->
-			<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0">
-				<s:layout>
-					<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
-				</s:layout>
-			</s:Group>
-		</s:Group>
-	</s:Group>
-</s:SparkSkin>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/modules/ModuleExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/modules/ModuleExample.mxml
index 95dd359..54722a1 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/modules/ModuleExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/modules/ModuleExample.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[
@@ -69,11 +68,16 @@
 		<s:VerticalLayout horizontalAlign="center"/>
 	</s:layout>
 	
-	<mx:ApplicationControlBar dock="true" fillColors="[0x000000,0x323232]" fillAlphas="[1,1]" horizontalAlign="center">
+	<s:Panel title="Module Sample" width="100%" height="100%">
+
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+		
 		<s:Button label="Load Module 1" click="loadModule('module 1', './spark/modules/Module1.swf')"/>
 		<s:Button label="Load Module 2" click="loadModule('module 2', './spark/modules/Module2.swf')"/>
-	</mx:ApplicationControlBar>
 	
-	<mx:HBox id="hBox" />
-	
+		<mx:HBox id="hBox" />
+		
+	</s:Panel> 
 </s:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding1Example.mxml
index a30b544..1080681 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding1Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding1Example.mxml
@@ -25,8 +25,8 @@
 	<s:Panel width="100%" height="100%"
 			 title="Bidirectional Binding 1"
 			 horizontalCenter="0"
-			 skinClass="skins.TDFPanelSkin">
-		<s:Label top="10" left="15" verticalAlign="justify" color="#323232" width="200"
+			 >
+		<s:Label top="10" left="15" verticalAlign="justify" width="200"
 					  text="Flex 4 interprets the @ binding syntax differently than Flex 3 in 
 that it will now represent a two-way binding. In this example, the text2 TextInput is bound to text1 bidirectionally, 
 so any change to the text2 value will also update the text1 value. "/>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding2Example.mxml
index 37b1b61..076f80c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding2Example.mxml
@@ -50,19 +50,16 @@
 		<local:Contact id="contact"/>
 	</fx:Declarations>
 	
-	<s:Panel width="100%" height="100%" skinClass="skins.TDFPanelSkin" title="TabBar Sample with Custom Skin and Bidirectional Binding" >
-		<s:TabBar id="tabs" left="8" y="2" dataProvider="{vs}" skinClass="skins.CustomTabBarSkin" cornerRadius="4"/>
+	<s:Panel width="100%" height="100%" title="TabBar Sample with Bidirectional Binding">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:TabBar id="tabs" dataProvider="{vs}" cornerRadius="4"/>
 		<mx:ViewStack id="vs" width="95%" height="85%" left="8" y="23">
 			<s:NavigatorContent label="Contact Info"  width="100%" height="100%">
-				<s:BorderContainer borderColor="0xCC0000" width="100%" height="100%" borderWeight="2" cornerRadius="3" 
-						  dropShadowVisible="true">
-					<!-- This background fill could also be specified in a custom skin to apply to other containers as well -->
-					<s:backgroundFill>
-						<s:LinearGradient rotation="90">
-							<s:GradientEntry color="0xE2E2E2"/>
-							<s:GradientEntry color="0xCC0000" alpha=".5" />
-						</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}"/>
@@ -86,14 +83,7 @@
 				</s:BorderContainer>
 			</s:NavigatorContent>
 			<s:NavigatorContent label="Contact List" width="100%" height="100%" >
-				<s:BorderContainer borderColor="0xCC0000" width="100%" height="100%" borderWeight="2" cornerRadius="3" 
-						  dropShadowVisible="true">
-					<s:backgroundFill>
-						<s:LinearGradient rotation="90">
-							<s:GradientEntry color="0xCC0000" />
-							<s:GradientEntry color="0xE2E2E2" />
-						</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>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/ControllingViewportExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/ControllingViewportExample.mxml
index 659174d..e53a5dc 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/ControllingViewportExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/ControllingViewportExample.mxml
@@ -25,7 +25,12 @@
 	     to be less than the size of the item you want to clip, and set  the following parameters, where the scroll
 		 positions specify which part of the viewport to show (from container location 0,0)-->
 	
-	<s:VGroup top="10" left="10">
+	<s:Panel title="Controlling Viewport Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+		
 		<s:Label text="This image is clipped with the viewport position set:"/>
 		<s:Group width="100" height="100"
 				 horizontalScrollPosition="20" verticalScrollPosition="30"
@@ -38,7 +43,7 @@
 						  width="100" height="100" horizontalScrollPosition="20" verticalScrollPosition="30">
 					<s:BitmapImage source="@Embed(source='assets/ApacheFlexLogo.png')"/>
 				</s:VGroup>	
-		</s:Scroller>	
-	</s:VGroup>
-	
+		</s:Scroller>
+		
+	</s:Panel>
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml
index 8a10492..92d945a 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.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,14 +34,7 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
-	<s:Panel title="Cursor Management Samples"
-			 width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="Cursor Management Samples" width="100%" height="100%">
 		
 		<s:layout>
 			<s:VerticalLayout horizontalAlign="center" 
@@ -50,7 +42,7 @@
 							  paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		
-		<s:CheckBox id="toggle" label="Toggle Cursor" selected="false" color="0x000000" click="switchCursor();"/>
+		<s:CheckBox id="toggle" label="Toggle Cursor" selected="false" color="0x000000" click="switchCursor()"/>
 		
 	</s:Panel>
 	
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml
index 88f0d1b..befeb36 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.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[
@@ -49,19 +48,10 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
-	<s:Panel title="Cursor Management Samples"
-			 width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="Cursor Management 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:Button label="Normal Cursor" color="0x000000" click="setCursor('normal')"/>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop1Example.mxml
index b4e0a23..3f4ff7f 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop1Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop1Example.mxml
@@ -19,12 +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">
-	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
 	<fx:Declarations>
 		<s:ArrayList id="arr1">
@@ -38,15 +33,10 @@
 		</s:ArrayList>
 	</fx:Declarations>
 	
-	<s:Panel title="Drag and Drop Samples" 
-			 width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="Drag and Drop 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:List allowMultipleSelection="true" dropEnabled="true" dragEnabled="true" dragMoveEnabled="true" 
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop2Example.mxml
index 6cea57e..abe2060 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop2Example.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,43 +36,47 @@
 		</s:ArrayList>
 	</fx:Declarations>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
-	<s:Panel title="Fruit" height="100%" color="0x000000" borderAlpha="0.15">
-		<s:List height="100%" dragEnabled="true" color="0x000000" dataProvider="{arr1}" />
-	</s:Panel>
-	
-	<s:Panel id="fruitDetails" title="drag fruit here" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
-		
+	<s:Panel title="Drag and Drop Samples" width="100%" height="100%">
+
 		<s:layout>
-			<s:VerticalLayout horizontalAlign="center" 
-								paddingLeft="10" paddingRight="10" 
-								paddingTop="10" paddingBottom="10"/>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
 		</s:layout>
-		
-		<s:dragEnter>
-			if (event.dragSource.hasFormat('itemsByIndex'))
-			{
-				var dropTarget:Panel = event.currentTarget as Panel;
-				DragManager.acceptDragDrop(dropTarget);
-			}
-		</s:dragEnter>
-		<s:dragOver>
+	
+		<s:Panel title="Fruit" width="100%" height="100%">
 			
-		</s:dragOver>
-		<s:dragDrop>
-			var data:Object = event.dragSource.dataForFormat('itemsByIndex');
-			var p:Panel = new Panel();
-			p.title = new String(data);
-			p.percentWidth = 100;
-			p.percentHeight = 25;
-			p.setStyle("color","black");
-			fruitDetails.addElement(p);
-		</s:dragDrop>
+			<s:layout>
+				<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+			</s:layout>
+			
+			<s:List height="100%" dragEnabled="true" color="0x000000" dataProvider="{arr1}" />
+			
+		</s:Panel>
+		
+		<s:Panel id="fruitDetails" title="drag fruit here" width="100%" height="100%">
+			
+			<s:layout>
+				<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+			</s:layout>
+			
+			<s:dragEnter>
+				if (event.dragSource.hasFormat('itemsByIndex'))
+				{
+					var dropTarget:Panel = event.currentTarget as Panel;
+					DragManager.acceptDragDrop(dropTarget);
+				}
+			</s:dragEnter>
+
+			<s:dragDrop>
+				var data:Object = event.dragSource.dataForFormat('itemsByIndex');
+				var p:Panel = new Panel();
+				p.title = new String(data);
+				p.percentWidth = 100;
+				p.percentHeight = 25;
+				p.setStyle("color","black");
+				fruitDetails.addElement(p);
+			</s:dragDrop>
+			
+		</s:Panel>
 	</s:Panel>
 	
 </s:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/FilterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/FilterExample.mxml
index b7887d1..87a1f3c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/FilterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/FilterExample.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"
 			   creationComplete="init()">
 	
 	<fx:Script>
@@ -54,11 +53,7 @@
 			}
 		]]>
 	</fx:Script>
-	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
+
 	<fx:Declarations>
 		<!--filters-->
 		<s:GlowFilter id="glow" blurX="12" blurY="12" color="#88AEF7" quality="2" strength="1"/>
@@ -68,9 +63,7 @@
 	</fx:Declarations>
 	
 	<s:Panel title="Filters Samples"
-			 width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+			 width="100%" height="100%">
 		
 		<s:layout>
 			<s:VerticalLayout horizontalAlign="center" 
@@ -81,15 +74,15 @@
 		<s:Label id="textSample" text="SAMPLE TEXT" color="0x000000" 
 				 fontWeight="bold" fontSize="40" filters="{[bevel]}" />
 		
-		<s:HGroup width="100%" color="#323232" horizontalAlign="center">
+		<s:HGroup width="100%" horizontalAlign="center">
 			<s:CheckBox id="blurBox" label="Blur" click="filterHandler(event)" />
 			<s:CheckBox id="glowBox" label="Glow" click="filterHandler(event)" />
 			<s:CheckBox id="shadowBox" label="Drop Shadow" click="filterHandler(event)" />
 			<s:CheckBox id="bevelBox" label="Bevel" selected="true" click="filterHandler(event)" />
 		</s:HGroup>
 		
-		<s:Label id="dynamicText" text="0" color="#323232" fontSize="18" filters="{[bevel]}" />
+		<s:Label id="dynamicText" text="0" fontSize="18" filters="{[bevel]}" />
 		
 	</s:Panel>
 	
-</s:Application>
\ No newline at end of file
+</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.mxml
index d5a7112..8e5cc19 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.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[
@@ -33,21 +32,13 @@
         ]]>
      </fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout horizontalAlign="center" />
-	</s:layout>
-        
-	<s:Panel title="Repeater Example" color="0x000000" 
-			 borderAlpha="0.15" 
-			 width="600">
+	<s:Panel title="Repeater Example" width="100%" height="100%">
 		
 		<s:layout>
-			<s:VerticalLayout horizontalAlign="center" 
-							  paddingLeft="10" paddingRight="10" 
-							  paddingTop="10" paddingBottom="10"/>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
 		</s:layout>
          
-         <s:Label width="100%" color="0x323232"  textAlign="center"
+         <s:Label width="100%"
             text="Use the Repeater class to create multi-Button controls in a Tile container."/>
 
         <mx:Tile direction="horizontal" borderStyle="inset" horizontalGap="10" verticalGap="10" color="0x323232"
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/ScrollBarsExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/ScrollBarsExample.mxml
index 0324d14..0248f4b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/ScrollBarsExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/ScrollBarsExample.mxml
@@ -26,8 +26,6 @@
 		<![CDATA[
 			import mx.events.ScrollEvent;
 			
-			import skins.TDFPanelSkin;
-			
 			private function vbarScroll():void {
 				log.text = "VScrollBar properties summary:" + '\n' +
 					"------------------------------------" + '\n' +
@@ -54,10 +52,13 @@
 			}
 		]]>
 	</fx:Script> 
-	<s:Panel width="100%" height="100%" title="VScrollBar and HScrollBar Sample" skinClass="skins.TDFPanelSkin">
+	
+	<s:Panel title="VScrollBar and HScrollBar Sample" width="100%" height="100%">
+		
 		<s:layout>
-			<s:HorizontalLayout paddingLeft="5" paddingRight="5" paddingTop="5"/>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
 		</s:layout>
+		
 		<s:VGroup>
 			<s:Label 
 				width="100%" 
@@ -77,7 +78,7 @@
 						<s:LinearGradient rotation="90">
 							<s:GradientEntry color="#6191c3"/>
 							<s:GradientEntry color="#6191c3"/>
-							<s:GradientEntry color="#323232" alpha=".3"/>
+							<s:GradientEntry alpha=".3"/>
 						</s:LinearGradient>
 					</s:fill>
 				</s:Rect>
@@ -88,7 +89,7 @@
 		<s:VGroup width="200">
 			<s:TextArea id="log" editable="false" height="88"/>	
 			
-			<s:Label color="0x323232" width="188" text="The ScrollBar controls (HScrollBar and VScrollBar) can be used stand-alone, but typically you would combine it as part of 
+			<s:Label text="The ScrollBar controls (HScrollBar and VScrollBar) can be used stand-alone, but typically you would combine it as part of 
 another group of components to provide scrolling functionality. "/>	
 		</s:VGroup>
 		
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/skins/TDFPanelSkin.mxml
deleted file mode 100644
index ff46524..0000000
--- a/TourDeFlex/TourDeFlex3/src/spark/other/skins/TDFPanelSkin.mxml
+++ /dev/null
@@ -1,130 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-
-  Licensed to the Apache Software Foundation (ASF) under one or more
-  contributor license agreements.  See the NOTICE file distributed with
-  this work for additional information regarding copyright ownership.
-  The ASF licenses this file to You under the Apache License, Version 2.0
-  (the "License"); you may not use this file except in compliance with
-  the License.  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-
--->
-
-
-<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
-		alpha.disabled="0.5" minWidth="131" minHeight="127">
-	
-	<fx:Metadata>
-		[HostComponent("spark.components.Panel")]
-	</fx:Metadata> 
-	
-	<s:states>
-		<s:State name="normal" />
-		<s:State name="disabled" />
-		<s:State name="normalWithControlBar" />
-		<s:State name="disabledWithControlBar" />
-	</s:states>
-	
-	<!-- drop shadow -->
-	<s:Rect left="0" top="0" right="0" bottom="0">
-		<s:filters>
-			<s:DropShadowFilter blurX="15" blurY="15" alpha="0.18" distance="11" angle="90" knockout="true" />
-		</s:filters>
-		<s:fill>
-			<s:SolidColor color="0" />
-		</s:fill>
-	</s:Rect>
-	
-	<!-- layer 1: border -->
-	<s:Rect left="0" right="0" top="0" bottom="0">
-		<s:stroke>
-			<s:SolidColorStroke color="0" alpha="0.50" weight="1" />
-		</s:stroke>
-	</s:Rect>
-	
-	<!-- layer 2: background fill -->
-	<s:Rect left="0" right="0" bottom="0" height="15">
-		<s:fill>
-			<s:LinearGradient rotation="90">
-				<s:GradientEntry color="0xE2E2E2" />
-				<s:GradientEntry color="0x000000" />
-			</s:LinearGradient>
-		</s:fill>
-	</s:Rect>
-	
-	<!-- layer 3: contents -->
-	<s:Group left="1" right="1" top="1" bottom="1" >
-		<s:layout>
-			<s:VerticalLayout gap="0" horizontalAlign="justify" />
-		</s:layout>
-		
-		<s:Group id="topGroup" >
-			<!-- layer 0: title bar fill -->
-			<!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex -->
-			<s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
-				<s:fill>
-					<s:SolidColor color="0x000000" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 1: title bar highlight -->
-			<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
-				<s:stroke>
-					<s:LinearGradientStroke rotation="90" weight="1">
-						<s:GradientEntry color="0xEAEAEA" />
-						<s:GradientEntry color="0xD9D9D9" />
-					</s:LinearGradientStroke>
-				</s:stroke>
-			</s:Rect>
-			
-			<!-- layer 2: title bar divider -->
-			<s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
-				<s:fill>
-					<s:SolidColor color="0xC0C0C0" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 3: text -->
-			<s:Label id="titleDisplay" maxDisplayedLines="1"
-					 left="9" right="3" top="1" minHeight="30"
-					 verticalAlign="middle" fontWeight="bold" color="#E2E2E2">
-			</s:Label>
-			
-		</s:Group>
-		
-		<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
-		</s:Group>
-		
-		<s:Group id="bottomGroup" minWidth="0" minHeight="0"
-				 includeIn="normalWithControlBar, disabledWithControlBar" >
-			<!-- layer 0: control bar background -->
-			<s:Rect left="0" right="0" bottom="0" top="1" >
-				<s:fill>
-					<s:SolidColor color="0xE2EdF7" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 1: control bar divider line -->
-			<s:Rect left="0" right="0" top="0" height="1" >
-				<s:fill>
-					<s:SolidColor color="0xD1E0F2" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 2: control bar -->
-			<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
-				<s:layout>
-					<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
-				</s:layout>
-			</s:Group>
-		</s:Group>
-	</s:Group>
-</s:Skin>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/ButtonWithIconExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/ButtonWithIconExample.mxml
index edecce5..652a24a 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/skinning/ButtonWithIconExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/ButtonWithIconExample.mxml
@@ -23,7 +23,7 @@
 	
 	<!-- Custom skins used for this example are shown in the source tabs for reference -->
 	<s:Panel width="100%" height="100%" title="Button Skinned With Icon" 
-			 skinClass="skins.TDFPanelSkin">
+			 >
 		<s:HGroup width="100%" left="35" top="15">
 			<s:VGroup width="50%">
 				<s:HGroup verticalAlign="middle">
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningContainerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningContainerExample.mxml
index 4f20a3f..ebe6cc6 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningContainerExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningContainerExample.mxml
@@ -22,7 +22,7 @@
 			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
 	<s:Panel id="myPanel" title="SkinnableContainer sample" 
-			 width="100%" height="100%" skinClass="skins.TDFPanelSkin">
+			 width="100%" height="100%" >
 		
 		<!-- Set a custom skin for the container to show a gradient background and border -->
 		<s:SkinnableContainer skinClass="skins.CustomSkinnableContainerSkin" 
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/TDFPanelSkin.mxml
deleted file mode 100644
index f9151dc..0000000
--- a/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/TDFPanelSkin.mxml
+++ /dev/null
@@ -1,171 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-
-  Licensed to the Apache Software Foundation (ASF) under one or more
-  contributor license agreements.  See the NOTICE file distributed with
-  this work for additional information regarding copyright ownership.
-  The ASF licenses this file to You under the Apache License, Version 2.0
-  (the "License"); you may not use this file except in compliance with
-  the License.  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-
--->
-
-
-<!--- Custom Spark Panel Skin created for Tour de Flex.  
-
-@langversion 3.0
-@playerversion Flash 10
-@playerversion AIR 1.5
-@productversion Flex 4
--->
-<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"
-			 blendMode.disabled="layer">
-	
-	<fx:Metadata>
-		<![CDATA[ 
-		/** 
-		* @copy spark.skins.spark.ApplicationSkin#hostComponent
-		*/
-		[HostComponent("spark.components.Panel")]
-		]]>
-	</fx:Metadata> 
-	
-	<fx:Script>
-		/* Define the skin elements that should not be colorized. 
-		For panel, border and title backround are skinned, but the content area and title text are not. */
-		static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"];
-		
-		/** 
-		 * @copy spark.skins.SparkSkin#colorizeExclusions
-		 */     
-		override public function get colorizeExclusions():Array {return exclusions;}
-		
-		/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
-		static private const contentFill:Array = [];
-		
-		/**
-		 * @inheritDoc
-		 */
-		override public function get contentItems():Array {return contentFill};
-	</fx:Script>
-	
-	<s:states>
-		<s:State name="normal" />
-		<s:State name="disabled" />
-		<s:State name="normalWithControlBar" />
-		<s:State name="disabledWithControlBar" />
-	</s:states>
-	
-	<!-- drop shadow -->
-	<s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11" 
-							 angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
-	
-	<!-- layer 1: border -->
-	<s:Rect left="0" right="0" top="0" bottom="0">
-		<s:stroke>
-			<s:SolidColorStroke color="0" alpha="0.50" weight="1" />
-		</s:stroke>
-	</s:Rect>
-	
-	
-	<!-- layer 2: background fill -->
-	<!-- This layer was modified for Tour de Flex samples to have a gradient border at the bottom. -->
-	<s:Rect left="0" right="0" bottom="0" height="15">
-		<s:fill>
-			<s:LinearGradient rotation="90">
-				<s:GradientEntry color="0xE2E2E2" />
-				<s:GradientEntry color="0x000000" />
-			</s:LinearGradient>
-		</s:fill>
-	</s:Rect>
-	
-	<!-- layer 3: contents -->
-	<!--- contains the vertical stack of titlebar content and controlbar -->
-	<s:Group left="1" right="1" top="1" bottom="1" >
-		<s:layout>
-			<s:VerticalLayout gap="0" horizontalAlign="justify" />
-		</s:layout>
-		
-		<s:Group id="topGroup" >
-			<!-- layer 0: title bar fill -->
-			<!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex -->
-			<s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
-				<s:fill>
-					<s:SolidColor color="0x000000" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 1: title bar highlight -->
-			<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
-				<s:stroke>
-					<s:LinearGradientStroke rotation="90" weight="1">
-						<s:GradientEntry color="0xEAEAEA" />
-						<s:GradientEntry color="0xD9D9D9" />
-					</s:LinearGradientStroke>
-				</s:stroke>
-			</s:Rect>
-			
-			<!-- layer 2: title bar divider -->
-			<s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
-				<s:fill>
-					<s:SolidColor color="0xC0C0C0" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 3: text -->
-			<!--- Defines the appearance of the PanelSkin class's title bar. -->
-			<!-- Note: The title text display has been slightly modified for Tour de Flex. -->
-			<s:Label id="titleDisplay" lineBreak="explicit"
-						  left="9" top="1" bottom="0" minHeight="30"
-						  verticalAlign="middle" fontWeight="bold" color="#E2E2E2">
-			</s:Label>
-		</s:Group>
-		
-		<!--
-		Note: setting the minimum size to 0 here so that changes to the host component's
-		size will not be thwarted by this skin part's minimum size.   This is a compromise,
-		more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
-		-->
-		<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
-		</s:Group>
-		
-		<s:Group id="bottomGroup" minWidth="0" minHeight="0"
-				 includeIn="normalWithControlBar, disabledWithControlBar" >
-			
-			<!-- layer 0: control bar background -->
-			<!-- Note: We are skinning this to be the gradient in case we do specify control
-			bar content, but it will only display if there's a controlBarContent
-			property specified.-->
-			<s:Rect left="0" right="0" bottom="0" top="0" height="15">
-				<s:fill>
-					<s:LinearGradient rotation="90">
-						<s:GradientEntry color="0xE2E2E2" />
-						<s:GradientEntry color="0x000000" />
-					</s:LinearGradient>
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 1: control bar divider line -->
-			<s:Rect left="0" right="0" top="0" height="1" >
-				<s:fill>
-					<s:SolidColor color="0xCDCDCD" />
-				</s:fill>
-			</s:Rect>
-			
-			<!-- layer 2: control bar -->
-			<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0">
-				<s:layout>
-					<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
-				</s:layout>
-			</s:Group>
-		</s:Group>
-	</s:Group>
-</s:SparkSkin>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/states/AnimateShaderTransitionEffect.mxml b/TourDeFlex/TourDeFlex3/src/spark/states/AnimateShaderTransitionEffect.mxml
index 6e5f3b8..bd06d64 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/states/AnimateShaderTransitionEffect.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/states/AnimateShaderTransitionEffect.mxml
@@ -47,12 +47,12 @@
 		</s:Group>
 	</s:HGroup>
 	<s:VGroup top="10" right="5" width="30%">
-		<s:Label text="AnimateShaderTransition Sample" fontSize="18" color="#B7B6B6"/>
+		<s:Label text="AnimateShaderTransition Sample" fontSize="18"/>
 		<s:Label color="#FFFFFF" width="200" verticalAlign="justify"
 				 text="AnimateShaderTransition animates a shader between two images. Click the button below to see the effect."/>
 		<s:Button id="playButton"
 				  label="Play Animation"
-				  click="currentState = (currentState == 'flipped') ? 'default' : 'flipped';" />
+				  click="currentState = (currentState == 'flipped') ? 'default' : 'flipped'" />
 	</s:VGroup>
 	
 </s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/FileServices.mxml b/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/FileServices.mxml
index 343cc94..58e740b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/FileServices.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/FileServices.mxml
@@ -89,8 +89,8 @@
 
    	<mx:Button label="Open..." click="openDialog()"/>
    		
-	<mx:Button id="textLayoutExportButton" label="Markup..." click="dispatchEvent(new Event('textLayoutExport'));"/>
-	<mx:Button id="htmlExportButton" label="HTML Markup..." click="dispatchEvent(new Event('htmlExport'));"/>
+	<mx:Button id="textLayoutExportButton" label="Markup..." click="dispatchEvent(new Event('textLayoutExport'))"/>
+	<mx:Button id="htmlExportButton" label="HTML Markup..." click="dispatchEvent(new Event('htmlExport'))"/>
 
 	<mx:Label id="buildLabel" text="{buildString}" fontWeight="bold" paddingTop="3" paddingBottom="1"/>
 </mx:HBox>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/GraphicBar.mxml b/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/GraphicBar.mxml
index 1aa5d14..9d5d2fb 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/GraphicBar.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/GraphicBar.mxml
@@ -149,5 +149,5 @@
 	<mx:Label text="Height:" fontWeight="bold"/>
 	<mx:TextInput id="imageHeight" width="60"/>			
 	<mx:Button id="imageButton" label="Insert Image" 
-		click="applyChange();" />
+		click="applyChange()" />
 </mx:HBox>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/LinkBar.mxml b/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/LinkBar.mxml
index 61b8b6f..bdcbcd8 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/LinkBar.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/LinkBar.mxml
@@ -154,5 +154,5 @@
 		selectedIndex="0" dataProvider = "{targetArray}"/>
 	<mx:CheckBox id = "linkExtendCheckBox" label="Extend"/>
 	<mx:Button label="Apply Link" 
-		click="changeLink(linkTextInput.text, linkTargetCombo.text, linkExtendCheckBox.selected);" />
+		click="changeLink(linkTextInput.text, linkTargetCombo.text, linkExtendCheckBox.selected)" />
 </mx:HBox>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/CreditCardValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/CreditCardValidatorExample.mxml
index 03bd534..7a01af0 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/CreditCardValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/CreditCardValidatorExample.mxml
@@ -19,17 +19,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" 
-			   skinClass="TDFGradientBackgroundSkin">
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
 	
 	<fx:Script>
 		import mx.controls.Alert;
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
 	<fx:Declarations>
 		
 		<!-- Define model for the credit card data. -->
@@ -46,7 +41,7 @@
 								trigger="{myButton}" triggerEvent="click"
 								cardTypeListener="{cardTypeCombo}"
 								cardNumberListener="{cardNumberInput}"
-								valid="Alert.show('Validation Succeeded!');"/>
+								valid="Alert.show('Validation Succeeded!')"/>
 		
 		<s:ArrayCollection id="dp">
 			<fx:Object label="American Express" data="American Express"/>
@@ -58,17 +53,14 @@
 		
 	</fx:Declarations>
 	
-	<s:Panel title="CreditCardValidator Example" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="CreditCardValidator Example" width="100%" height="100%">
 		
 		<s:layout>
-			<s:HorizontalLayout horizontalAlign="center" 
-								paddingLeft="10" paddingRight="10" 
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" 
 								paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		
-		<mx:Form id="creditCardForm" color="0x323232">
+		<mx:Form id="creditCardForm">
 			<mx:FormItem label="Card Type">    
 				<s:DropDownList id="cardTypeCombo" dataProvider="{dp}" width="160"
 								prompt="Card Type"/>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/CurrencyValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/CurrencyValidatorExample.mxml
index 12145af..bd4de98 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/CurrencyValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/CurrencyValidatorExample.mxml
@@ -19,34 +19,26 @@
 -->
 <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>
         import mx.controls.Alert;
     </fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-
 	<fx:Declarations>
 		<mx:CurrencyValidator source="{priceUS}" property="text" precision="2" 
         trigger="{myButton}" triggerEvent="click" 
-        valid="Alert.show('Validation Succeeded!');"/>
+        valid="Alert.show('Validation Succeeded!')"/>
 	</fx:Declarations>
         
-	<s:Panel title="CurrencyValidator Example" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="CurrencyValidator Example" width="100%" height="100%">
 		
 		<s:layout>
-			<s:HorizontalLayout horizontalAlign="center" 
-								paddingLeft="10" paddingRight="10" 
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" 
 								paddingTop="10" paddingBottom="10"/>
 		</s:layout>
          
-         <mx:Form color="0x323232">
+         <mx:Form>
             <mx:FormItem label="Enter a U.S. dollar amount: ">
                  <s:TextInput id="priceUS" width="100%"/>
             </mx:FormItem>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/DateValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/DateValidatorExample.mxml
index 93724c5..a2ed716 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/DateValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/DateValidatorExample.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,10 +27,6 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
 	<fx:Declarations>
 		<fx:Model id="CheckModel">
 			<dateInfo>
@@ -41,20 +36,17 @@
 		
 		<mx:DateValidator source="{dob}" property="text" allowedFormatChars="/" 
 						  trigger="{myButton}" triggerEvent="click" 
-						  valid="Alert.show('Validation Succeeded!');"/>
+						  valid="Alert.show('Validation Succeeded!')"/>
 	</fx:Declarations>
 	
-	<s:Panel title="DateValidator Example" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="DateValidator Example" width="100%" height="100%">
 		
 		<s:layout>
-			<s:HorizontalLayout horizontalAlign="center" 
-								paddingLeft="10" paddingRight="10" 
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" 
 								paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		
-		<mx:Form color="0x323232">
+		<mx:Form>
 			<mx:FormItem label="Enter date of birth (mm/dd/yyyy): ">
 				<s:TextInput id="dob" width="100%"/>
 			</mx:FormItem>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/EmailValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/EmailValidatorExample.mxml
index 4314b35..0769d09 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/EmailValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/EmailValidatorExample.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,28 +27,21 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
 	<fx:Declarations>
 		<mx:EmailValidator source="{email}" property="text" 
 					   trigger="{myButton}" triggerEvent="click"
-					   valid="Alert.show('Validation Succeeded!');"/>
+					   valid="Alert.show('Validation Succeeded!')"/>
 	</fx:Declarations>
 	
 	
-	<s:Panel title="EmailValidator Example" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="EmailValidator Example" width="100%" height="100%">
 		
 		<s:layout>
-			<s:HorizontalLayout horizontalAlign="center" 
-								paddingLeft="10" paddingRight="10" 
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" 
 								paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		
-		<mx:Form color="0x323232">
+		<mx:Form>
 			<mx:FormItem label="Enter an e-mail address: ">
 				<s:TextInput id="email" width="100%"/>
 			</mx:FormItem>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/FormValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/FormValidatorExample.mxml
index 8230ac4..f04ee1c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/FormValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/FormValidatorExample.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[
@@ -46,10 +45,6 @@
         ]]>
     </fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-
 	<fx:Declarations>
 		<!-- The Validator class defines the required property and the validator events
          used by all validator subclasses. -->
@@ -58,17 +53,14 @@
         valid="handleValid(event)" invalid="handleValid(event)"/>
 	</fx:Declarations>
         
-	<s:Panel title="Validator Example" width="620" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="Validator Example" width="100%" height="100%">
 		
 		<s:layout>
-			<s:VerticalLayout horizontalAlign="center" 
-							  paddingLeft="10" paddingRight="10" 
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" 
 							  paddingTop="10" paddingBottom="10"/>
 		</s:layout>
          
-         <mx:Form color="0x323232">
+         <mx:Form>
             <s:Label width="100%"
                 text="Enter a value in the Name field before you can submit. The E-mail field is optional."/>
 
@@ -82,7 +74,7 @@
             
             <mx:FormItem>
                 <s:Button id="submitButton" enabled="false" 
-                    label="Submit" click="submitForm();"/>
+                    label="Submit" click="submitForm()"/>
             </mx:FormItem>
         </mx:Form>
         
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/NumberValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/NumberValidatorExample.mxml
index 07ae1ab..fefed5f 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/NumberValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/NumberValidatorExample.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,20 @@
       ]]>      
     </fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
 	<fx:Declarations>
 		<mx:NumberFormatter id="numberFormatter" precision="4" useThousandsSeparator="true" useNegativeSign="true"/>
 		
 		<mx:NumberValidator id="numVal" source="{inputVal}" property="text" allowNegative="true" domain="real"/>
 	</fx:Declarations>
         
-	<s:Panel title="NumberValidator Example" width="600" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="NumberValidator Example" width="100%" height="100%">
 		
 		<s:layout>
-			<s:HorizontalLayout horizontalAlign="center" 
-								paddingLeft="10" paddingRight="10" 
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" 
 								paddingTop="10" paddingBottom="10"/>
 		</s:layout>
          
-         <mx:Form color="0x323232">
+         <mx:Form>
             <mx:FormItem label="Enter number:">
                 <s:TextInput id="inputVal" text="" width="50%"/>
             </mx:FormItem>
@@ -74,7 +66,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>
         
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/RegExpValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/RegExpValidatorExample.mxml
index 1ab3b13..c8b3a44 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/RegExpValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/RegExpValidatorExample.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[
@@ -49,10 +48,6 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
 	<fx:Declarations>
 		<mx:RegExpValidator id="regExpV" 
 							source="{regex_text}" property="text" 
@@ -61,13 +56,10 @@
 							trigger="{myButton}" triggerEvent="click"/>
 	</fx:Declarations>
 	
-	<s:Panel title="RegExpValidator Example" width="620" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="RegExpValidator Example" width="100%" height="100%">
 		
 		<s:layout>
-			<s:VerticalLayout horizontalAlign="center" 
-							  paddingLeft="10" paddingRight="10" 
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" 
 							  paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		
@@ -77,7 +69,7 @@
 		<s:Label width="100%" color="0x323232" text="3. Click the Button control to trigger the validation."/>
 		<s:Label width="100%" color="0x323232" text="4. The results show the index in the text where the matching pattern begins, and the matching pattern. "/>
 		
-		<mx:Form color="0x323232">
+		<mx:Form>
 			<mx:FormItem label="Enter text: ">
 				<s:TextInput id="regex_text" text="xxxxABC4xxx" width="100%"/>
 			</mx:FormItem>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/SocialSecurityValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/SocialSecurityValidatorExample.mxml
index 3d5488e..5c3a060 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/SocialSecurityValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/SocialSecurityValidatorExample.mxml
@@ -19,36 +19,28 @@
 -->
 <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>
-	
+
 	<fx:Declarations>
 		<mx:SocialSecurityValidator source="{ssn}" property="text" 
 									trigger="{myButton}" triggerEvent="click"
-									valid="Alert.show('Validation Succeeded!');"/>
+									valid="Alert.show('Validation Succeeded!')"/>
 	</fx:Declarations>
 	
-	<s:Panel title="SocialSecurityValidator Example" width="620" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="SocialSecurityValidator Example" width="100%" height="100%">
 		
 		<s:layout>
-			<s:VerticalLayout horizontalAlign="center" 
-							  paddingLeft="10" paddingRight="10" 
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" 
 							  paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		
-		<mx:Form color="0x323232">
+		<mx:Form>
 			<mx:FormItem label="Enter Social Security number: ">
 				<s:TextInput id="ssn" width="100%"/>
 			</mx:FormItem>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/StringValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/StringValidatorExample.mxml
index 41d478e..08d641b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/StringValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/StringValidatorExample.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,30 +27,23 @@
 		]]>
 	</fx:Script>
 	
-	<s:layout>
-		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
-	</s:layout>
-	
 	<fx:Declarations>
 		<mx:StringValidator source="{fname}" property="text" 
 							tooShortError="This string is shorter than the minimum allowed length of 4. " 
 							tooLongError="This string is longer than the maximum allowed length of 20." 
 							minLength="4" maxLength="20"
 							trigger="{myButton}" triggerEvent="click" 
-							valid="Alert.show('Validation Succeeded!');"/>
+							valid="Alert.show('Validation Succeeded!')"/>
 	</fx:Declarations>
 	
-	<s:Panel title="StringValidator Example" width="620" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="StringValidator Example" width="100%" height="100%">
 		
 		<s:layout>
-			<s:VerticalLayout horizontalAlign="center" 
-							  paddingLeft="10" paddingRight="10" 
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" 
 							  paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		
-		<mx:Form color="0x323232">               
+		<mx:Form>               
 			<mx:FormItem label="Enter a name between 4 and 20 characters: ">
 				<s:TextInput id="fname" width="100%"/>
 			</mx:FormItem>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/ZipCodeValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/ZipCodeValidatorExample.mxml
index b1ac856..ccccd1e 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/ZipCodeValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/ZipCodeValidatorExample.mxml
@@ -19,36 +19,28 @@
 -->
 <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>
-	
+
 	<fx:Declarations>
 		<mx:ZipCodeValidator source="{zip}" property="text" 
 							 trigger="{myButton}" triggerEvent="click"  
-							 valid="Alert.show('Validation Succeeded!');"/>
+							 valid="Alert.show('Validation Succeeded!')"/>
 	</fx:Declarations>
 	
-	<s:Panel title="ZipCodeValidator Example" width="620" height="100%"
-			 color="0x000000" 
-			 borderAlpha="0.15">
+	<s:Panel title="ZipCodeValidator Example" width="100%" height="100%">
 		
 		<s:layout>
-			<s:VerticalLayout horizontalAlign="center" 
-							  paddingLeft="10" paddingRight="10" 
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" 
 							  paddingTop="10" paddingBottom="10"/>
 		</s:layout>
 		
-		<mx:Form color="0x323232">
+		<mx:Form>
 			<mx:FormItem label="Enter a 5 or 9 digit U.S. Zip code: ">
 				<s:TextInput id="zip" width="100%"/>
 			</mx:FormItem>
diff --git a/TourDeFlex/TourDeFlex3/src/swfobject.js b/TourDeFlex/TourDeFlex3/src/swfobject.js
new file mode 100644
index 0000000..bf35c07
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/swfobject.js
@@ -0,0 +1,777 @@
+/*!	SWFObject v2.2 <http://code.google.com/p/swfobject/> 
+	is released under the MIT License <http://www.opensource.org/licenses/mit-license.php> 
+*/
+
+var swfobject = function() {
+	
+	var UNDEF = "undefined",
+		OBJECT = "object",
+		SHOCKWAVE_FLASH = "Shockwave Flash",
+		SHOCKWAVE_FLASH_AX = "ShockwaveFlash.ShockwaveFlash",
+		FLASH_MIME_TYPE = "application/x-shockwave-flash",
+		EXPRESS_INSTALL_ID = "SWFObjectExprInst",
+		ON_READY_STATE_CHANGE = "onreadystatechange",
+		
+		win = window,
+		doc = document,
+		nav = navigator,
+		
+		plugin = false,
+		domLoadFnArr = [main],
+		regObjArr = [],
+		objIdArr = [],
+		listenersArr = [],
+		storedAltContent,
+		storedAltContentId,
+		storedCallbackFn,
+		storedCallbackObj,
+		isDomLoaded = false,
+		isExpressInstallActive = false,
+		dynamicStylesheet,
+		dynamicStylesheetMedia,
+		autoHideShow = true,
+	
+	/* Centralized function for browser feature detection
+		- User agent string detection is only used when no good alternative is possible
+		- Is executed directly for optimal performance
+	*/	
+	ua = function() {
+		var w3cdom = typeof doc.getElementById != UNDEF && typeof doc.getElementsByTagName != UNDEF && typeof doc.createElement != UNDEF,
+			u = nav.userAgent.toLowerCase(),
+			p = nav.platform.toLowerCase(),
+			windows = p ? /win/.test(p) : /win/.test(u),
+			mac = p ? /mac/.test(p) : /mac/.test(u),
+			webkit = /webkit/.test(u) ? parseFloat(u.replace(/^.*webkit\/(\d+(\.\d+)?).*$/, "$1")) : false, // returns either the webkit version or false if not webkit
+			ie = !+"\v1", // feature detection based on Andrea Giammarchi's solution: http://webreflection.blogspot.com/2009/01/32-bytes-to-know-if-your-browser-is-ie.html
+			playerVersion = [0,0,0],
+			d = null;
+		if (typeof nav.plugins != UNDEF && typeof nav.plugins[SHOCKWAVE_FLASH] == OBJECT) {
+			d = nav.plugins[SHOCKWAVE_FLASH].description;
+			if (d && !(typeof nav.mimeTypes != UNDEF && nav.mimeTypes[FLASH_MIME_TYPE] && !nav.mimeTypes[FLASH_MIME_TYPE].enabledPlugin)) { // navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin indicates whether plug-ins are enabled or disabled in Safari 3+
+				plugin = true;
+				ie = false; // cascaded feature detection for Internet Explorer
+				d = d.replace(/^.*\s+(\S+\s+\S+$)/, "$1");
+				playerVersion[0] = parseInt(d.replace(/^(.*)\..*$/, "$1"), 10);
+				playerVersion[1] = parseInt(d.replace(/^.*\.(.*)\s.*$/, "$1"), 10);
+				playerVersion[2] = /[a-zA-Z]/.test(d) ? parseInt(d.replace(/^.*[a-zA-Z]+(.*)$/, "$1"), 10) : 0;
+			}
+		}
+		else if (typeof win.ActiveXObject != UNDEF) {
+			try {
+				var a = new ActiveXObject(SHOCKWAVE_FLASH_AX);
+				if (a) { // a will return null when ActiveX is disabled
+					d = a.GetVariable("$version");
+					if (d) {
+						ie = true; // cascaded feature detection for Internet Explorer
+						d = d.split(" ")[1].split(",");
+						playerVersion = [parseInt(d[0], 10), parseInt(d[1], 10), parseInt(d[2], 10)];
+					}
+				}
+			}
+			catch(e) {}
+		}
+		return { w3:w3cdom, pv:playerVersion, wk:webkit, ie:ie, win:windows, mac:mac };
+	}(),
+	
+	/* Cross-browser onDomLoad
+		- Will fire an event as soon as the DOM of a web page is loaded
+		- Internet Explorer workaround based on Diego Perini's solution: http://javascript.nwbox.com/IEContentLoaded/
+		- Regular onload serves as fallback
+	*/ 
+	onDomLoad = function() {
+		if (!ua.w3) { return; }
+		if ((typeof doc.readyState != UNDEF && doc.readyState == "complete") || (typeof doc.readyState == UNDEF && (doc.getElementsByTagName("body")[0] || doc.body))) { // function is fired after onload, e.g. when script is inserted dynamically 
+			callDomLoadFunctions();
+		}
+		if (!isDomLoaded) {
+			if (typeof doc.addEventListener != UNDEF) {
+				doc.addEventListener("DOMContentLoaded", callDomLoadFunctions, false);
+			}		
+			if (ua.ie && ua.win) {
+				doc.attachEvent(ON_READY_STATE_CHANGE, function() {
+					if (doc.readyState == "complete") {
+						doc.detachEvent(ON_READY_STATE_CHANGE, arguments.callee);
+						callDomLoadFunctions();
+					}
+				});
+				if (win == top) { // if not inside an iframe
+					(function(){
+						if (isDomLoaded) { return; }
+						try {
+							doc.documentElement.doScroll("left");
+						}
+						catch(e) {
+							setTimeout(arguments.callee, 0);
+							return;
+						}
+						callDomLoadFunctions();
+					})();
+				}
+			}
+			if (ua.wk) {
+				(function(){
+					if (isDomLoaded) { return; }
+					if (!/loaded|complete/.test(doc.readyState)) {
+						setTimeout(arguments.callee, 0);
+						return;
+					}
+					callDomLoadFunctions();
+				})();
+			}
+			addLoadEvent(callDomLoadFunctions);
+		}
+	}();
+	
+	function callDomLoadFunctions() {
+		if (isDomLoaded) { return; }
+		try { // test if we can really add/remove elements to/from the DOM; we don't want to fire it too early
+			var t = doc.getElementsByTagName("body")[0].appendChild(createElement("span"));
+			t.parentNode.removeChild(t);
+		}
+		catch (e) { return; }
+		isDomLoaded = true;
+		var dl = domLoadFnArr.length;
+		for (var i = 0; i < dl; i++) {
+			domLoadFnArr[i]();
+		}
+	}
+	
+	function addDomLoadEvent(fn) {
+		if (isDomLoaded) {
+			fn();
+		}
+		else { 
+			domLoadFnArr[domLoadFnArr.length] = fn; // Array.push() is only available in IE5.5+
+		}
+	}
+	
+	/* Cross-browser onload
+		- Based on James Edwards' solution: http://brothercake.com/site/resources/scripts/onload/
+		- Will fire an event as soon as a web page including all of its assets are loaded 
+	 */
+	function addLoadEvent(fn) {
+		if (typeof win.addEventListener != UNDEF) {
+			win.addEventListener("load", fn, false);
+		}
+		else if (typeof doc.addEventListener != UNDEF) {
+			doc.addEventListener("load", fn, false);
+		}
+		else if (typeof win.attachEvent != UNDEF) {
+			addListener(win, "onload", fn);
+		}
+		else if (typeof win.onload == "function") {
+			var fnOld = win.onload;
+			win.onload = function() {
+				fnOld();
+				fn();
+			};
+		}
+		else {
+			win.onload = fn;
+		}
+	}
+	
+	/* Main function
+		- Will preferably execute onDomLoad, otherwise onload (as a fallback)
+	*/
+	function main() { 
+		if (plugin) {
+			testPlayerVersion();
+		}
+		else {
+			matchVersions();
+		}
+	}
+	
+	/* Detect the Flash Player version for non-Internet Explorer browsers
+		- Detecting the plug-in version via the object element is more precise than using the plugins collection item's description:
+		  a. Both release and build numbers can be detected
+		  b. Avoid wrong descriptions by corrupt installers provided by Adobe
+		  c. Avoid wrong descriptions by multiple Flash Player entries in the plugin Array, caused by incorrect browser imports
+		- Disadvantage of this method is that it depends on the availability of the DOM, while the plugins collection is immediately available
+	*/
+	function testPlayerVersion() {
+		var b = doc.getElementsByTagName("body")[0];
+		var o = createElement(OBJECT);
+		o.setAttribute("type", FLASH_MIME_TYPE);
+		var t = b.appendChild(o);
+		if (t) {
+			var counter = 0;
+			(function(){
+				if (typeof t.GetVariable != UNDEF) {
+					var d = t.GetVariable("$version");
+					if (d) {
+						d = d.split(" ")[1].split(",");
+						ua.pv = [parseInt(d[0], 10), parseInt(d[1], 10), parseInt(d[2], 10)];
+					}
+				}
+				else if (counter < 10) {
+					counter++;
+					setTimeout(arguments.callee, 10);
+					return;
+				}
+				b.removeChild(o);
+				t = null;
+				matchVersions();
+			})();
+		}
+		else {
+			matchVersions();
+		}
+	}
+	
+	/* Perform Flash Player and SWF version matching; static publishing only
+	*/
+	function matchVersions() {
+		var rl = regObjArr.length;
+		if (rl > 0) {
+			for (var i = 0; i < rl; i++) { // for each registered object element
+				var id = regObjArr[i].id;
+				var cb = regObjArr[i].callbackFn;
+				var cbObj = {success:false, id:id};
+				if (ua.pv[0] > 0) {
+					var obj = getElementById(id);
+					if (obj) {
+						if (hasPlayerVersion(regObjArr[i].swfVersion) && !(ua.wk && ua.wk < 312)) { // Flash Player version >= published SWF version: Houston, we have a match!
+							setVisibility(id, true);
+							if (cb) {
+								cbObj.success = true;
+								cbObj.ref = getObjectById(id);
+								cb(cbObj);
+							}
+						}
+						else if (regObjArr[i].expressInstall && canExpressInstall()) { // show the Adobe Express Install dialog if set by the web page author and if supported
+							var att = {};
+							att.data = regObjArr[i].expressInstall;
+							att.width = obj.getAttribute("width") || "0";
+							att.height = obj.getAttribute("height") || "0";
+							if (obj.getAttribute("class")) { att.styleclass = obj.getAttribute("class"); }
+							if (obj.getAttribute("align")) { att.align = obj.getAttribute("align"); }
+							// parse HTML object param element's name-value pairs
+							var par = {};
+							var p = obj.getElementsByTagName("param");
+							var pl = p.length;
+							for (var j = 0; j < pl; j++) {
+								if (p[j].getAttribute("name").toLowerCase() != "movie") {
+									par[p[j].getAttribute("name")] = p[j].getAttribute("value");
+								}
+							}
+							showExpressInstall(att, par, id, cb);
+						}
+						else { // Flash Player and SWF version mismatch or an older Webkit engine that ignores the HTML object element's nested param elements: display alternative content instead of SWF
+							displayAltContent(obj);
+							if (cb) { cb(cbObj); }
+						}
+					}
+				}
+				else {	// if no Flash Player is installed or the fp version cannot be detected we let the HTML object element do its job (either show a SWF or alternative content)
+					setVisibility(id, true);
+					if (cb) {
+						var o = getObjectById(id); // test whether there is an HTML object element or not
+						if (o && typeof o.SetVariable != UNDEF) { 
+							cbObj.success = true;
+							cbObj.ref = o;
+						}
+						cb(cbObj);
+					}
+				}
+			}
+		}
+	}
+	
+	function getObjectById(objectIdStr) {
+		var r = null;
+		var o = getElementById(objectIdStr);
+		if (o && o.nodeName == "OBJECT") {
+			if (typeof o.SetVariable != UNDEF) {
+				r = o;
+			}
+			else {
+				var n = o.getElementsByTagName(OBJECT)[0];
+				if (n) {
+					r = n;
+				}
+			}
+		}
+		return r;
+	}
+	
+	/* Requirements for Adobe Express Install
+		- only one instance can be active at a time
+		- fp 6.0.65 or higher
+		- Win/Mac OS only
+		- no Webkit engines older than version 312
+	*/
+	function canExpressInstall() {
+		return !isExpressInstallActive && hasPlayerVersion("6.0.65") && (ua.win || ua.mac) && !(ua.wk && ua.wk < 312);
+	}
+	
+	/* Show the Adobe Express Install dialog
+		- Reference: http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75
+	*/
+	function showExpressInstall(att, par, replaceElemIdStr, callbackFn) {
+		isExpressInstallActive = true;
+		storedCallbackFn = callbackFn || null;
+		storedCallbackObj = {success:false, id:replaceElemIdStr};
+		var obj = getElementById(replaceElemIdStr);
+		if (obj) {
+			if (obj.nodeName == "OBJECT") { // static publishing
+				storedAltContent = abstractAltContent(obj);
+				storedAltContentId = null;
+			}
+			else { // dynamic publishing
+				storedAltContent = obj;
+				storedAltContentId = replaceElemIdStr;
+			}
+			att.id = EXPRESS_INSTALL_ID;
+			if (typeof att.width == UNDEF || (!/%$/.test(att.width) && parseInt(att.width, 10) < 310)) { att.width = "310"; }
+			if (typeof att.height == UNDEF || (!/%$/.test(att.height) && parseInt(att.height, 10) < 137)) { att.height = "137"; }
+			doc.title = doc.title.slice(0, 47) + " - Flash Player Installation";
+			var pt = ua.ie && ua.win ? "ActiveX" : "PlugIn",
+				fv = "MMredirectURL=" + encodeURI(window.location).toString().replace(/&/g,"%26") + "&MMplayerType=" + pt + "&MMdoctitle=" + doc.title;
+			if (typeof par.flashvars != UNDEF) {
+				par.flashvars += "&" + fv;
+			}
+			else {
+				par.flashvars = fv;
+			}
+			// IE only: when a SWF is loading (AND: not available in cache) wait for the readyState of the object element to become 4 before removing it,
+			// because you cannot properly cancel a loading SWF file without breaking browser load references, also obj.onreadystatechange doesn't work
+			if (ua.ie && ua.win && obj.readyState != 4) {
+				var newObj = createElement("div");
+				replaceElemIdStr += "SWFObjectNew";
+				newObj.setAttribute("id", replaceElemIdStr);
+				obj.parentNode.insertBefore(newObj, obj); // insert placeholder div that will be replaced by the object element that loads expressinstall.swf
+				obj.style.display = "none";
+				(function(){
+					if (obj.readyState == 4) {
+						obj.parentNode.removeChild(obj);
+					}
+					else {
+						setTimeout(arguments.callee, 10);
+					}
+				})();
+			}
+			createSWF(att, par, replaceElemIdStr);
+		}
+	}
+	
+	/* Functions to abstract and display alternative content
+	*/
+	function displayAltContent(obj) {
+		if (ua.ie && ua.win && obj.readyState != 4) {
+			// IE only: when a SWF is loading (AND: not available in cache) wait for the readyState of the object element to become 4 before removing it,
+			// because you cannot properly cancel a loading SWF file without breaking browser load references, also obj.onreadystatechange doesn't work
+			var el = createElement("div");
+			obj.parentNode.insertBefore(el, obj); // insert placeholder div that will be replaced by the alternative content
+			el.parentNode.replaceChild(abstractAltContent(obj), el);
+			obj.style.display = "none";
+			(function(){
+				if (obj.readyState == 4) {
+					obj.parentNode.removeChild(obj);
+				}
+				else {
+					setTimeout(arguments.callee, 10);
+				}
+			})();
+		}
+		else {
+			obj.parentNode.replaceChild(abstractAltContent(obj), obj);
+		}
+	} 
+
+	function abstractAltContent(obj) {
+		var ac = createElement("div");
+		if (ua.win && ua.ie) {
+			ac.innerHTML = obj.innerHTML;
+		}
+		else {
+			var nestedObj = obj.getElementsByTagName(OBJECT)[0];
+			if (nestedObj) {
+				var c = nestedObj.childNodes;
+				if (c) {
+					var cl = c.length;
+					for (var i = 0; i < cl; i++) {
+						if (!(c[i].nodeType == 1 && c[i].nodeName == "PARAM") && !(c[i].nodeType == 8)) {
+							ac.appendChild(c[i].cloneNode(true));
+						}
+					}
+				}
+			}
+		}
+		return ac;
+	}
+	
+	/* Cross-browser dynamic SWF creation
+	*/
+	function createSWF(attObj, parObj, id) {
+		var r, el = getElementById(id);
+		if (ua.wk && ua.wk < 312) { return r; }
+		if (el) {
+			if (typeof attObj.id == UNDEF) { // if no 'id' is defined for the object element, it will inherit the 'id' from the alternative content
+				attObj.id = id;
+			}
+			if (ua.ie && ua.win) { // Internet Explorer + the HTML object element + W3C DOM methods do not combine: fall back to outerHTML
+				var att = "";
+				for (var i in attObj) {
+					if (attObj[i] != Object.prototype[i]) { // filter out prototype additions from other potential libraries
+						if (i.toLowerCase() == "data") {
+							parObj.movie = attObj[i];
+						}
+						else if (i.toLowerCase() == "styleclass") { // 'class' is an ECMA4 reserved keyword
+							att += ' class="' + attObj[i] + '"';
+						}
+						else if (i.toLowerCase() != "classid") {
+							att += ' ' + i + '="' + attObj[i] + '"';
+						}
+					}
+				}
+				var par = "";
+				for (var j in parObj) {
+					if (parObj[j] != Object.prototype[j]) { // filter out prototype additions from other potential libraries
+						par += '<param name="' + j + '" value="' + parObj[j] + '" />';
+					}
+				}
+				el.outerHTML = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"' + att + '>' + par + '</object>';
+				objIdArr[objIdArr.length] = attObj.id; // stored to fix object 'leaks' on unload (dynamic publishing only)
+				r = getElementById(attObj.id);	
+			}
+			else { // well-behaving browsers
+				var o = createElement(OBJECT);
+				o.setAttribute("type", FLASH_MIME_TYPE);
+				for (var m in attObj) {
+					if (attObj[m] != Object.prototype[m]) { // filter out prototype additions from other potential libraries
+						if (m.toLowerCase() == "styleclass") { // 'class' is an ECMA4 reserved keyword
+							o.setAttribute("class", attObj[m]);
+						}
+						else if (m.toLowerCase() != "classid") { // filter out IE specific attribute
+							o.setAttribute(m, attObj[m]);
+						}
+					}
+				}
+				for (var n in parObj) {
+					if (parObj[n] != Object.prototype[n] && n.toLowerCase() != "movie") { // filter out prototype additions from other potential libraries and IE specific param element
+						createObjParam(o, n, parObj[n]);
+					}
+				}
+				el.parentNode.replaceChild(o, el);
+				r = o;
+			}
+		}
+		return r;
+	}
+	
+	function createObjParam(el, pName, pValue) {
+		var p = createElement("param");
+		p.setAttribute("name", pName);	
+		p.setAttribute("value", pValue);
+		el.appendChild(p);
+	}
+	
+	/* Cross-browser SWF removal
+		- Especially needed to safely and completely remove a SWF in Internet Explorer
+	*/
+	function removeSWF(id) {
+		var obj = getElementById(id);
+		if (obj && obj.nodeName == "OBJECT") {
+			if (ua.ie && ua.win) {
+				obj.style.display = "none";
+				(function(){
+					if (obj.readyState == 4) {
+						removeObjectInIE(id);
+					}
+					else {
+						setTimeout(arguments.callee, 10);
+					}
+				})();
+			}
+			else {
+				obj.parentNode.removeChild(obj);
+			}
+		}
+	}
+	
+	function removeObjectInIE(id) {
+		var obj = getElementById(id);
+		if (obj) {
+			for (var i in obj) {
+				if (typeof obj[i] == "function") {
+					obj[i] = null;
+				}
+			}
+			obj.parentNode.removeChild(obj);
+		}
+	}
+	
+	/* Functions to optimize JavaScript compression
+	*/
+	function getElementById(id) {
+		var el = null;
+		try {
+			el = doc.getElementById(id);
+		}
+		catch (e) {}
+		return el;
+	}
+	
+	function createElement(el) {
+		return doc.createElement(el);
+	}
+	
+	/* Updated attachEvent function for Internet Explorer
+		- Stores attachEvent information in an Array, so on unload the detachEvent functions can be called to avoid memory leaks
+	*/	
+	function addListener(target, eventType, fn) {
+		target.attachEvent(eventType, fn);
+		listenersArr[listenersArr.length] = [target, eventType, fn];
+	}
+	
+	/* Flash Player and SWF content version matching
+	*/
+	function hasPlayerVersion(rv) {
+		var pv = ua.pv, v = rv.split(".");
+		v[0] = parseInt(v[0], 10);
+		v[1] = parseInt(v[1], 10) || 0; // supports short notation, e.g. "9" instead of "9.0.0"
+		v[2] = parseInt(v[2], 10) || 0;
+		return (pv[0] > v[0] || (pv[0] == v[0] && pv[1] > v[1]) || (pv[0] == v[0] && pv[1] == v[1] && pv[2] >= v[2])) ? true : false;
+	}
+	
+	/* Cross-browser dynamic CSS creation
+		- Based on Bobby van der Sluis' solution: http://www.bobbyvandersluis.com/articles/dynamicCSS.php
+	*/	
+	function createCSS(sel, decl, media, newStyle) {
+		if (ua.ie && ua.mac) { return; }
+		var h = doc.getElementsByTagName("head")[0];
+		if (!h) { return; } // to also support badly authored HTML pages that lack a head element
+		var m = (media && typeof media == "string") ? media : "screen";
+		if (newStyle) {
+			dynamicStylesheet = null;
+			dynamicStylesheetMedia = null;
+		}
+		if (!dynamicStylesheet || dynamicStylesheetMedia != m) { 
+			// create dynamic stylesheet + get a global reference to it
+			var s = createElement("style");
+			s.setAttribute("type", "text/css");
+			s.setAttribute("media", m);
+			dynamicStylesheet = h.appendChild(s);
+			if (ua.ie && ua.win && typeof doc.styleSheets != UNDEF && doc.styleSheets.length > 0) {
+				dynamicStylesheet = doc.styleSheets[doc.styleSheets.length - 1];
+			}
+			dynamicStylesheetMedia = m;
+		}
+		// add style rule
+		if (ua.ie && ua.win) {
+			if (dynamicStylesheet && typeof dynamicStylesheet.addRule == OBJECT) {
+				dynamicStylesheet.addRule(sel, decl);
+			}
+		}
+		else {
+			if (dynamicStylesheet && typeof doc.createTextNode != UNDEF) {
+				dynamicStylesheet.appendChild(doc.createTextNode(sel + " {" + decl + "}"));
+			}
+		}
+	}
+	
+	function setVisibility(id, isVisible) {
+		if (!autoHideShow) { return; }
+		var v = isVisible ? "visible" : "hidden";
+		if (isDomLoaded && getElementById(id)) {
+			getElementById(id).style.visibility = v;
+		}
+		else {
+			createCSS("#" + id, "visibility:" + v);
+		}
+	}
+
+	/* Filter to avoid XSS attacks
+	*/
+	function urlEncodeIfNecessary(s) {
+		var regex = /[\\\"<>\.;]/;
+		var hasBadChars = regex.exec(s) != null;
+		return hasBadChars && typeof encodeURIComponent != UNDEF ? encodeURIComponent(s) : s;
+	}
+	
+	/* Release memory to avoid memory leaks caused by closures, fix hanging audio/video threads and force open sockets/NetConnections to disconnect (Internet Explorer only)
+	*/
+	var cleanup = function() {
+		if (ua.ie && ua.win) {
+			window.attachEvent("onunload", function() {
+				// remove listeners to avoid memory leaks
+				var ll = listenersArr.length;
+				for (var i = 0; i < ll; i++) {
+					listenersArr[i][0].detachEvent(listenersArr[i][1], listenersArr[i][2]);
+				}
+				// cleanup dynamically embedded objects to fix audio/video threads and force open sockets and NetConnections to disconnect
+				var il = objIdArr.length;
+				for (var j = 0; j < il; j++) {
+					removeSWF(objIdArr[j]);
+				}
+				// cleanup library's main closures to avoid memory leaks
+				for (var k in ua) {
+					ua[k] = null;
+				}
+				ua = null;
+				for (var l in swfobject) {
+					swfobject[l] = null;
+				}
+				swfobject = null;
+			});
+		}
+	}();
+	
+	return {
+		/* Public API
+			- Reference: http://code.google.com/p/swfobject/wiki/documentation
+		*/ 
+		registerObject: function(objectIdStr, swfVersionStr, xiSwfUrlStr, callbackFn) {
+			if (ua.w3 && objectIdStr && swfVersionStr) {
+				var regObj = {};
+				regObj.id = objectIdStr;
+				regObj.swfVersion = swfVersionStr;
+				regObj.expressInstall = xiSwfUrlStr;
+				regObj.callbackFn = callbackFn;
+				regObjArr[regObjArr.length] = regObj;
+				setVisibility(objectIdStr, false);
+			}
+			else if (callbackFn) {
+				callbackFn({success:false, id:objectIdStr});
+			}
+		},
+		
+		getObjectById: function(objectIdStr) {
+			if (ua.w3) {
+				return getObjectById(objectIdStr);
+			}
+		},
+		
+		embedSWF: function(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj, callbackFn) {
+			var callbackObj = {success:false, id:replaceElemIdStr};
+			if (ua.w3 && !(ua.wk && ua.wk < 312) && swfUrlStr && replaceElemIdStr && widthStr && heightStr && swfVersionStr) {
+				setVisibility(replaceElemIdStr, false);
+				addDomLoadEvent(function() {
+					widthStr += ""; // auto-convert to string
+					heightStr += "";
+					var att = {};
+					if (attObj && typeof attObj === OBJECT) {
+						for (var i in attObj) { // copy object to avoid the use of references, because web authors often reuse attObj for multiple SWFs
+							att[i] = attObj[i];
+						}
+					}
+					att.data = swfUrlStr;
+					att.width = widthStr;
+					att.height = heightStr;
+					var par = {}; 
+					if (parObj && typeof parObj === OBJECT) {
+						for (var j in parObj) { // copy object to avoid the use of references, because web authors often reuse parObj for multiple SWFs
+							par[j] = parObj[j];
+						}
+					}
+					if (flashvarsObj && typeof flashvarsObj === OBJECT) {
+						for (var k in flashvarsObj) { // copy object to avoid the use of references, because web authors often reuse flashvarsObj for multiple SWFs
+							if (typeof par.flashvars != UNDEF) {
+								par.flashvars += "&" + k + "=" + flashvarsObj[k];
+							}
+							else {
+								par.flashvars = k + "=" + flashvarsObj[k];
+							}
+						}
+					}
+					if (hasPlayerVersion(swfVersionStr)) { // create SWF
+						var obj = createSWF(att, par, replaceElemIdStr);
+						if (att.id == replaceElemIdStr) {
+							setVisibility(replaceElemIdStr, true);
+						}
+						callbackObj.success = true;
+						callbackObj.ref = obj;
+					}
+					else if (xiSwfUrlStr && canExpressInstall()) { // show Adobe Express Install
+						att.data = xiSwfUrlStr;
+						showExpressInstall(att, par, replaceElemIdStr, callbackFn);
+						return;
+					}
+					else { // show alternative content
+						setVisibility(replaceElemIdStr, true);
+					}
+					if (callbackFn) { callbackFn(callbackObj); }
+				});
+			}
+			else if (callbackFn) { callbackFn(callbackObj);	}
+		},
+		
+		switchOffAutoHideShow: function() {
+			autoHideShow = false;
+		},
+		
+		ua: ua,
+		
+		getFlashPlayerVersion: function() {
+			return { major:ua.pv[0], minor:ua.pv[1], release:ua.pv[2] };
+		},
+		
+		hasFlashPlayerVersion: hasPlayerVersion,
+		
+		createSWF: function(attObj, parObj, replaceElemIdStr) {
+			if (ua.w3) {
+				return createSWF(attObj, parObj, replaceElemIdStr);
+			}
+			else {
+				return undefined;
+			}
+		},
+		
+		showExpressInstall: function(att, par, replaceElemIdStr, callbackFn) {
+			if (ua.w3 && canExpressInstall()) {
+				showExpressInstall(att, par, replaceElemIdStr, callbackFn);
+			}
+		},
+		
+		removeSWF: function(objElemIdStr) {
+			if (ua.w3) {
+				removeSWF(objElemIdStr);
+			}
+		},
+		
+		createCSS: function(selStr, declStr, mediaStr, newStyleBoolean) {
+			if (ua.w3) {
+				createCSS(selStr, declStr, mediaStr, newStyleBoolean);
+			}
+		},
+		
+		addDomLoadEvent: addDomLoadEvent,
+		
+		addLoadEvent: addLoadEvent,
+		
+		getQueryParamValue: function(param) {
+			var q = doc.location.search || doc.location.hash;
+			if (q) {
+				if (/\?/.test(q)) { q = q.split("?")[1]; } // strip question mark
+				if (param == null) {
+					return urlEncodeIfNecessary(q);
+				}
+				var pairs = q.split("&");
+				for (var i = 0; i < pairs.length; i++) {
+					if (pairs[i].substring(0, pairs[i].indexOf("=")) == param) {
+						return urlEncodeIfNecessary(pairs[i].substring((pairs[i].indexOf("=") + 1)));
+					}
+				}
+			}
+			return "";
+		},
+		
+		// For internal usage only
+		expressInstallCallback: function() {
+			if (isExpressInstallActive) {
+				var obj = getElementById(EXPRESS_INSTALL_ID);
+				if (obj && storedAltContent) {
+					obj.parentNode.replaceChild(storedAltContent, obj);
+					if (storedAltContentId) {
+						setVisibility(storedAltContentId, true);
+						if (ua.ie && ua.win) { storedAltContent.style.display = "block"; }
+					}
+					if (storedCallbackFn) { storedCallbackFn(storedCallbackObj); }
+				}
+				isExpressInstallActive = false;
+			} 
+		}
+	};
+}();
diff --git a/TourDeFlex/TourDeFlex3/src/viewsource.mxml b/TourDeFlex/TourDeFlex3/src/viewsource.mxml
index d4d436a..f72c1c2 100755
--- a/TourDeFlex/TourDeFlex3/src/viewsource.mxml
+++ b/TourDeFlex/TourDeFlex3/src/viewsource.mxml
@@ -17,7 +17,7 @@
   -->

 

 <mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"

-		 backgroundColor="#CCCCCC" usePreloader="false" paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0">

+		 usePreloader="false" paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0">

 

 	<fx:Script>

 		<![CDATA[		

@@ -32,7 +32,12 @@
 				{

 					var files:Array = new Array();

 					// the first file shown will be the mxml source

-					files[0] = appUrl + ".mxml";

+					if (appUrl.indexOf(".mxml") >= 0 || appUrl.indexOf(".as") >= 0) {

+						files[0] = appUrl;

+					}

+					else if (appUrl.indexOf(".swf") == -1) {

+						files[0] = appUrl + ".mxml";

+					}

 					

 					if (srcUrl != null && srcUrl != "")

 					{

@@ -41,7 +46,7 @@
 						files = files.concat(otherSrc);

 					}

 

-	        		for (var i:int ; i < files.length ; i++)

+	        		for (var i:int = 0; i < files.length ; i++)

     	    		{

 						tabs[i] = new SourceTab();

 						tn.addChild(tabs[i]);

@@ -53,6 +58,6 @@
 		]]>

 	</fx:Script>

 

-	<mx:TabNavigator id="tn" width="100%" height="100%" paddingTop="0"/>

+	<mx:TabNavigator id="tn" width="100%" height="100%" paddingTop="0" borderStyle="none" />

 

 </mx:VBox>
\ No newline at end of file
diff --git a/ant_on_air/src/org/apache/flex/ant/tags/Get.as b/ant_on_air/src/org/apache/flex/ant/tags/Get.as
index 3a006cc..2042d32 100644
--- a/ant_on_air/src/org/apache/flex/ant/tags/Get.as
+++ b/ant_on_air/src/org/apache/flex/ant/tags/Get.as
@@ -47,6 +47,11 @@
             Ant.antTagProcessors["get"] = Get;
         }
         
+        private static const DOWNLOADS_SOURCEFORGE_NET:String = "http://downloads.sourceforge.net/";
+        private static const SOURCEFORGE_NET:String = "http://sourceforge.net/";
+        private static const DL_SOURCEFORGE_NET:String = ".dl.sourceforge.net/";
+        private static const USE_MIRROR:String = "use_mirror=";
+        
         public function Get()
         {
             super();
@@ -94,6 +99,7 @@
             var actualSrc:String = src;
             var urlRequest:URLRequest = new URLRequest(actualSrc);
             urlRequest.followRedirects = false;
+            urlRequest.manageCookies = false;
             urlRequest.userAgent = "Java";	// required to get sourceforge redirects to do the right thing
             urlLoader = new URLLoader();
             urlLoader.load(urlRequest);
@@ -132,10 +138,24 @@
                 }
                 if (newlocation)
                 {
+                    var srcIndex:int = src.indexOf(DOWNLOADS_SOURCEFORGE_NET);
+                    var sfIndex:int = newlocation.indexOf(SOURCEFORGE_NET);
+                    var mirrorIndex:int = newlocation.indexOf(USE_MIRROR);
+                    if (srcIndex == 0 && sfIndex == 0 && mirrorIndex != -1 && event.status == 307)
+                    {
+                        // SourceForge redirects AIR requests differently from Ant requests.
+                        // We can't control some of the additional headers that are sent
+                        // but that appears to make the difference.  Just pick out the
+                        // mirror and use it against dl.sourceforge.net
+                        var mirror:String = newlocation.substring(mirrorIndex + USE_MIRROR.length);
+                        newlocation = "http://" + mirror + DL_SOURCEFORGE_NET;
+                        newlocation += src.substring(DOWNLOADS_SOURCEFORGE_NET.length);
+                    }
                     ant.output(ant.formatOutput("get", "Redirected to: " + newlocation));
                     var urlRequest:URLRequest = new URLRequest(newlocation);
                     var refHeader:URLRequestHeader = new URLRequestHeader("Referer", src);
                     urlRequest.requestHeaders.push(refHeader);
+                    urlRequest.manageCookies = false;
                     urlRequest.followRedirects = false;
                     urlRequest.userAgent = "Java";	// required to get sourceforge redirects to do the right thing
                     urlLoader = new URLLoader();
diff --git a/installer/src/InstallApacheFlex.mxml b/installer/src/InstallApacheFlex.mxml
index 399913c..071bf18 100644
--- a/installer/src/InstallApacheFlex.mxml
+++ b/installer/src/InstallApacheFlex.mxml
@@ -33,25 +33,25 @@
 
 
 <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
-					   xmlns:s="library://ns.adobe.com/flex/spark"
-					   width="800" height="700" maxWidth="800" maxHeight="700" minWidth="800" minHeight="700"
-					   backgroundColor="0xDDDDDD"
-					   preinitialize="getInvoke()"
-					   applicationComplete="handleApplicationComplete(event)" showStatusBar="false"
-					   skinClass="ws.tink.spark.skins.controls.InstallApacheFlexSkin"
-					   xmlns:controls="ws.tink.spark.controls.*"
-					   xmlns:controls1="org.apache.flex.packageflexsdk.view.controls.*"
-					   xmlns:components="org.apache.flex.packageflexsdk.view.components.*"
-					   xmlns:controls2="org.apache.flex.utilities.common.controls.*">
-	
-	<fx:Style source="assets/styles/ApacheFlexToolsStyle.css"/>
-	<fx:Style source="assets/styles/InstallApacheFlexStyle.css"/> 
-	
+                       xmlns:s="library://ns.adobe.com/flex/spark"
+                       width="800" height="700" maxWidth="800" maxHeight="700" minWidth="800" minHeight="700"
+                       backgroundColor="0xDDDDDD"
+                       preinitialize="getInvoke()"
+                       applicationComplete="handleApplicationComplete(event)" showStatusBar="false"
+                       skinClass="ws.tink.spark.skins.controls.InstallApacheFlexSkin"
+                       xmlns:controls="ws.tink.spark.controls.*"
+                       xmlns:controls1="org.apache.flex.packageflexsdk.view.controls.*"
+                       xmlns:components="org.apache.flex.packageflexsdk.view.components.*"
+                       xmlns:controls2="org.apache.flex.utilities.common.controls.*">
+    
+    <fx:Style source="assets/styles/ApacheFlexToolsStyle.css"/>
+    <fx:Style source="assets/styles/InstallApacheFlexStyle.css"/> 
+    
     <fx:Declarations>
         <fx:Component className="CacheDialog" >
             <s:TitleWindow title="Download Cache Configuration" width="400" height="130" 
                            backgroundColor="0xDDDDDD" close="closeUp()">
-                <fx:Script>
+                 <fx:Script>
                     <![CDATA[
                         import mx.managers.PopUpManager;
                         
@@ -98,7 +98,7 @@
             </s:TitleWindow>
         </fx:Component>
     </fx:Declarations>
-	<fx:Script><![CDATA[
+     <fx:Script><![CDATA[
         import flash.globalization.LocaleID;
         import flash.globalization.StringTools;
         
@@ -107,7 +107,7 @@
         import mx.events.FlexEvent;
         import mx.events.PropertyChangeEvent;
         import mx.managers.CursorManager;
-        import mx.managers.PopUpManager;        
+        import mx.managers.PopUpManager;
         import mx.resources.ResourceBundle;
         import mx.rpc.events.FaultEvent;
         import mx.rpc.events.ResultEvent;
@@ -143,178 +143,181 @@
         
         import ws.tink.spark.controls.StepItem;
         import ws.tink.spark.skins.controls.InstallApacheFlexSkin;
-		
+        
         // embed us strings so we can always have them if we can't get to the locale files
-        [Embed(source="properties/en_US.properties",mimeType="application/octet-stream")]
+        [Embed(source="properties/en_US.properties", mimeType="application/octet-stream")]
         private var en_US_Properties:Class;
         
         private var cleanedUp:Boolean;
         
-		private var _mirrorURLCGI:String;
-		private var _useMirror:Boolean = true;
-		private var _latestVersion:String;
-		private var loggedVersion:Boolean;
+        private var _mirrorURLCGI:String;
+        private var _useMirror:Boolean = true;
+        private var _latestVersion:String;
+        private var loggedVersion:Boolean;
         private var logFile:String;
         private var debugMode:Boolean = false;
-		private var logProgressEvents:Boolean = false;
+        private var logProgressEvents:Boolean = false;
         private var showDevBuilds:Boolean = false;
         private var usingDownloadCache:Boolean;
         private var downloadCacheFolder:String;
+        private var userDefaultLanguage:String;
         private var firstTime:Boolean = true;
         private var legacy:Boolean = true;
         private var nocache:Boolean = true;
         private var wasAborted:Boolean;
         
-		public var installerAppPath:String;
-		public var installerAppFileName:String;
-		
+        public var installerAppPath:String;
+        public var installerAppFileName:String;
+        
         // loader needs to be in instance var otherwise it can get GC'd.
         // We only load one thing at a time, so we can all share this
         // var
         private var loader:URLLoader;
         
-		/**
-		 * Utility Singleton Instances
-		 */
-		private var _md5CompareUtil:MD5CompareUtil = MD5CompareUtil.instance;
-		private var _mirrorURLUtil:MirrorURLUtil = MirrorURLUtil.instance;
-		
-		/**
-		 * Apache Flex binary distribution
-		 *
-		 * Values stored in sdk-installer-config.xml edit file to change
-		 *
-		 */
-		private var APACHE_FLEX_BIN_DISTRO_PATH:String;
-		private var APACHE_FLEX_BIN_DISTRO_FILE:String;
+        /**
+         * Utility Singleton Instances
+         */
+        private var _md5CompareUtil:MD5CompareUtil = MD5CompareUtil.instance;
+        private var _mirrorURLUtil:MirrorURLUtil = MirrorURLUtil.instance;
+        
+        /**
+         * Apache Flex binary distribution
+         *
+         * Values stored in sdk-installer-config.xml edit file to change
+         *
+         */
+        private var APACHE_FLEX_BIN_DISTRO_PATH:String;
+        private var APACHE_FLEX_BIN_DISTRO_FILE:String;
         private var APACHE_FLEX_BIN_INSTALLER_FILE:String;
-		private var APACHE_FLEX_BIN_DISTRO_FILE_SHORT:String;
-		private var APACHE_FLEX_BIN_DISTRO_URL:String;
+        private var APACHE_FLEX_BIN_DISTRO_FILE_SHORT:String;
+        private var APACHE_FLEX_BIN_DISTRO_URL:String;
         private var APACHE_FLEX_BIN_INSTALLER_URL:String;
-		[Bindable] private var APACHE_FLEX_BIN_DISTRO_VERSION:String = "";
-		[Bindable] private var APACHE_FLEX_BIN_DISTRO_VERSION_DISPLAY:String = "";
-		
-		/**
-		 * Adobe AIR SDK
-		 *
-		 * Values stored in sdk-installer-config.xml edit file to change
-		 *
-		 */
-		[Bindable] private var AIR_VERSIONS:ArrayCollection = new ArrayCollection();
-		private var AIR_VERSION:String = "14.0";
-		private var ADOBE_AIR_SDK_WIN_FILE:String;
-		private var ADOBE_AIR_SDK_WIN_URL:String;
-		private var ADOBE_AIR_SDK_MAC_FILE:String;
-		private var ADOBE_AIR_SDK_MAC_URL:String;
-		private var ADOBE_AIR_SDK_LINUX_FILE:String;
-		private var ADOBE_AIR_SDK_LINUX_URL:String;
-		
-		/**
-		 * Adobe Flash Player
-		 *
-		 * Values stored in sdk-installer-config.xml edit file to change
-		 *
-		 */
-		[Bindable] private var FLASH_PLAYER_VERSIONS:ArrayCollection = new ArrayCollection();
-		private var FLASH_PLAYER_VERSION:String = "11.1";
-		private var FLASH_PLAYER_SWF_VERSION:String = "14";
-		private var ADOBE_FB_GLOBALPLAYER_SWC_FILE:String;
-		private var ADOBE_FB_GLOBALPLAYER_SWC_URL:String;
-		
-		/**
-		 * Apache Flex
-		 *
-		 * Values stored in sdk-installer-config.xml edit file to change
-		 *
-		 */
-		[Bindable] private var FLEX_VERSIONS:ArrayCollection = new ArrayCollection();
-		
-		/**
-		 *
-		 * SwfObject
-		 *
-		 */
-		private var SWF_OBJECT_FILE:String;
-		private var SWF_OBJECT_URL:String;
-		
-		/**
-		 * Optional installs
-		 *
-		 */
-		private var OSMF_SWC_FILE:String;
-		private var OSMF_SWC_URL:String;
-		private var OSMF_SWF_FILE:String = "osmf.swf";
-		
-		private var BLAZEDS_FILE:String;
-		private var BLAZEDS_URL:String;
-		
-		private var AFE_FILE:String;
-		private var AFE_URL:String;
-		private var AGLJ40_FILE:String;
-		private var AGLJ40_URL:String;
-		private var FLEX_FONTKIT_FILE:String;
-		private var FLEX_FONTKIT_URL:String;
-		private var RIDEAU_FILE:String;
-		private var RIDEAU_URL:String;
-		
-		[Bindable]
-		private var _flexHome:String;
-		private var _flexTemp:String;
-		private var _flexHomeDir:File;
-		private var _flexTempDir:File;
-		private var _apacheFlexSDKCompressedFile:File;
-		private var _adobeAIRSDKZipFile:File;
-		private var _fbGlobalPlayerDir:File;
-		private var _fbGlobalPlayerFile:File;
-		private var _blazeDSJarFile:File;
-		private var _afeJarFile:File;
-		private var _aglj40JarFile:File;
-		private var _flexFontKitJarFile:File;
-		private var _rideauJarFile:File;
-		private var _osmfSWCFile:File;
-		private var _osmfSWFFile:File;
-		
-		private var _os:OS = new OS();
-		private var _loader:URLLoader;
-		private var _process:NativeProcess;
-		private var _previousDisplayedPercent:int = 0;
-		private var _fileUnzipErrorFunction:Function;
-		private var _numOptionalComponents:int = 4;
-		private var _numOptionalComponentsPermissions:int = 0;
-		private var _useOSMF2:Boolean = true;
-		
-		private var languageOverride:String;
-		private var configOverride:String = "";
+        [Bindable] private var APACHE_FLEX_BIN_DISTRO_VERSION:String = "";
+        [Bindable] private var APACHE_FLEX_BIN_DISTRO_VERSION_DISPLAY:String = "";
+        
+        /**
+         * Adobe AIR SDK
+         *
+         * Values stored in sdk-installer-config.xml edit file to change
+         *
+         */
+        [Bindable] private var AIR_VERSIONS:ArrayCollection = new ArrayCollection();
+        private var AIR_VERSION:String = "14.0";
+        private var ADOBE_AIR_SDK_WIN_FILE:String;
+        private var ADOBE_AIR_SDK_WIN_URL:String;
+        private var ADOBE_AIR_SDK_MAC_FILE:String;
+        private var ADOBE_AIR_SDK_MAC_URL:String;
+        private var ADOBE_AIR_SDK_LINUX_FILE:String;
+        private var ADOBE_AIR_SDK_LINUX_URL:String;
+        
+        /**
+         * Adobe Flash Player
+         *
+         * Values stored in sdk-installer-config.xml edit file to change
+         *
+         */
+        [Bindable] private var FLASH_PLAYER_VERSIONS:ArrayCollection = new ArrayCollection();
+        private var FLASH_PLAYER_VERSION:String = "11.1";
+        private var FLASH_PLAYER_SWF_VERSION:String = "14";
+        private var ADOBE_FB_GLOBALPLAYER_SWC_FILE:String;
+        private var ADOBE_FB_GLOBALPLAYER_SWC_URL:String;
+        
+        /**
+         * Apache Flex
+         *
+         * Values stored in sdk-installer-config.xml edit file to change
+         *
+         */
+        [Bindable] private var FLEX_VERSIONS:ArrayCollection = new ArrayCollection();
+        
+        /**
+         *
+         * SwfObject
+         *
+         */
+        private var SWF_OBJECT_FILE:String;
+        private var SWF_OBJECT_URL:String;
+        
+        /**
+         * Optional installs
+         *
+         */
+        private var OSMF_SWC_FILE:String;
+        private var OSMF_SWC_URL:String;
+        private var OSMF_SWF_FILE:String = "osmf.swf";
+        
+        private var BLAZEDS_FILE:String;
+        private var BLAZEDS_URL:String;
+        
+        private var AFE_FILE:String;
+        private var AFE_URL:String;
+        private var AGLJ40_FILE:String;
+        private var AGLJ40_URL:String;
+        private var FLEX_FONTKIT_FILE:String;
+        private var FLEX_FONTKIT_URL:String;
+        private var RIDEAU_FILE:String;
+        private var RIDEAU_URL:String;
+        
+        [Bindable]
+        private var _flexHome:String;
+        private var _flexTemp:String;
+        private var _flexHomeDir:File;
+        private var _flexTempDir:File;
+        private var _apacheFlexSDKCompressedFile:File;
+        private var _adobeAIRSDKZipFile:File;
+        private var _fbGlobalPlayerDir:File;
+        private var _fbGlobalPlayerFile:File;
+        private var _blazeDSJarFile:File;
+        private var _afeJarFile:File;
+        private var _aglj40JarFile:File;
+        private var _flexFontKitJarFile:File;
+        private var _rideauJarFile:File;
+        private var _osmfSWCFile:File;
+        private var _osmfSWFFile:File;
+        
+        private var _os:OS = new OS();
+        private var _loader:URLLoader;
+        private var _process:NativeProcess;
+        private var _previousDisplayedPercent:int = 0;
+        private var _fileUnzipErrorFunction:Function;
+        private var _numOptionalComponents:int = 4;
+        private var _numOptionalComponentsPermissions:int = 0;
+        private var _useOSMF2:Boolean = true;
+        
+        private var languageOverride:String;
+        private var configOverride:String = "";
+        private var stepsOverride:String = "";
+        private var installOverride:String = "";
         
         private var overlaying:Boolean;
         private var usingXML:Object;
         private var additionalProps:Object = {};
-		private var licensePropertyMap:Object = {};
+        private var licensePropertyMap:Object = {};
         private var progressLabels:XML;
         private var installStepsData:XMLList;
         private var stepIDs:Vector.<String> = new Vector.<String>();
         private var stepLabels:Vector.<String> = new Vector.<String>();
         private var currentStep:int = 0;
         
-		private var customMenuItem1:ContextMenuItem = new ContextMenuItem("Show Dev Builds");
-		private var customMenuItem2:ContextMenuItem = new ContextMenuItem("Configure Download Cache...");
-		private var customMenuItem3:ContextMenuItem = new ContextMenuItem("Enable Verbose Logging");
-		private var customMenuItem4:ContextMenuItem = new ContextMenuItem("Enable Progress Logging");
-		
-		[Bindable]
-		private var _viewResourceConstants:ViewResourceConstants;
+        private var customMenuItem1:ContextMenuItem = new ContextMenuItem("Show Dev Builds");
+        private var customMenuItem2:ContextMenuItem = new ContextMenuItem("Configure Download Cache...");
+        private var customMenuItem3:ContextMenuItem = new ContextMenuItem("Enable Verbose Logging");
+        private var customMenuItem4:ContextMenuItem = new ContextMenuItem("Enable Progress Logging");
+        
+        [Bindable]
+        private var _viewResourceConstants:ViewResourceConstants;
         [Bindable]
         private var supportedLanguages:ArrayCollection = new ArrayCollection();
-		[Bindable]
-		private var _installationSteps:ArrayCollection = new ArrayCollection();
-		[Bindable]
-		private var _installerComponentsDataProvider:ArrayCollection = new ArrayCollection();
-		[Bindable]
-		private var _currentLicenseURL:String;
-		[Bindable]
-		private var _currentLicenseLabel:String;
-		[Bindable]
-		public var _messages:ArrayCollection = new ArrayCollection();
+        [Bindable]
+        private var _installationSteps:ArrayCollection = new ArrayCollection();
+        [Bindable]
+        private var _installerComponentsDataProvider:ArrayCollection = new ArrayCollection();
+        [Bindable]
+        private var _currentLicenseURL:String;
+        [Bindable]
+        private var _currentLicenseLabel:String;
+        [Bindable]
+        public var _messages:ArrayCollection = new ArrayCollection();
         
         private var _lastTag:String;
         private var _lastPublicMessage:String;
@@ -346,31 +349,40 @@
         {
             return _lastPublicMessage;
         }
-		
-		private function getInvoke():void {
-			var nativeApplication:NativeApplication = NativeApplication.nativeApplication;
-			nativeApplication.addEventListener(InvokeEvent.INVOKE, parseArgs);
-		}
-		
-		[Bindable] private var _standardButtonWidth:Number = 88;
-		
-		public function setButtonWidths():void {
-			var calc:CalcButtonWidth = new CalcButtonWidth(hiddenButton);
-			
-			calc.buttonWidth(installLogBtn);
-			calc.buttonWidth(openApacheFlexFolderBtn);
-			
-			_standardButtonWidth = calc.maxButtonWidth([installBtn, browseBtn, closeBtn, nextBtn]);
-		}
-		
-		private function parseArgs(event:InvokeEvent):void {
-			for each (var s:String in event.arguments) {
-				if (s.indexOf("-language=") == 0) {
-					languageOverride = s.substring(10);
-				}
-				if (s.indexOf("-config=") == 0) {
-					configOverride = s.substring(8);
-				}
+        
+        private function getInvoke():void
+        {
+            var nativeApplication:NativeApplication = NativeApplication.nativeApplication;
+            nativeApplication.addEventListener(InvokeEvent.INVOKE, parseArgs);
+        }
+        
+        [Bindable] private var _standardButtonWidth:Number = 88;
+        
+        public function setButtonWidths():void
+        {
+            var calc:CalcButtonWidth = new CalcButtonWidth(hiddenButton);
+            
+            calc.buttonWidth(installLogBtn);
+            calc.buttonWidth(openApacheFlexFolderBtn);
+            
+            _standardButtonWidth = calc.maxButtonWidth([installBtn, browseBtn, closeBtn, nextBtn, firstStepBackBtn, secondStepBackBtn]);
+        }
+        
+        private function parseArgs(event:InvokeEvent):void
+        {
+            for each (var s:String in event.arguments) {
+                if (s.indexOf("-language=") == 0) {
+                    languageOverride = s.substring(10);
+                }
+                if (s.indexOf("-config=") == 0) {
+                    configOverride = s.substring(8);
+                }
+                if (s.indexOf("-install=") == 0) {
+                    installOverride = s.substring(9);
+                }
+                if (s.indexOf("-steps=") == 0) {
+                    stepsOverride = s.substring(7);
+                }
                 if (s.indexOf("-debug") == 0) {
                     debugMode = true;
                 }
@@ -378,90 +390,96 @@
                     debugMode = true;
                     logFile = s.substring(5);
                 }
-			}
+            }
             var so:SharedObject = SharedObject.getLocal("InstallApacheFlex");
             usingDownloadCache = so.data.usingDownloadCache;
             downloadCacheFolder = so.data.downloadCacheFolder;
-		}
-		
-		protected function handleApplicationComplete(event:FlexEvent):void {
+            userDefaultLanguage = so.data.userDefaultLanguage;
+        }
+        
+        protected function handleApplicationComplete(event:FlexEvent):void
+        {
             CursorManager.setBusyCursor();
-			loaderInfo.uncaughtErrorEvents.addEventListener(UncaughtErrorEvent.UNCAUGHT_ERROR, uncaughtErrorHandler);
+            loaderInfo.uncaughtErrorEvents.addEventListener(UncaughtErrorEvent.UNCAUGHT_ERROR, uncaughtErrorHandler);
+            addEventListener(Event.CLOSING, closeApplication);
             updateWindow();
-			var hasInternet:Boolean = false;
-			var networkAdapters:Vector.<NetworkInterface> = NetworkInfo.networkInfo.findInterfaces();
-			for each (var networkAdapter:NetworkInterface in networkAdapters)
-			{
-				if (networkAdapter.active)
-				{
-					hasInternet = true;
-					break;
-				}
-			}
-			if (hasInternet)
-			{
-				loadXML();
-			}
+            var hasInternet:Boolean = false;
+            var networkAdapters:Vector.<NetworkInterface> = NetworkInfo.networkInfo.findInterfaces();
+            for each (var networkAdapter:NetworkInterface in networkAdapters)
+            {
+                if (networkAdapter.active)
+                {
+                    hasInternet = true;
+                    break;
+                }
+            }
+            if (hasInternet)
+            {
+                loadXML();
+            }
             logVersion();
-			if (!hasInternet)
-			{
-				log("Internet connection unavailable");
-				abortInstallation("Internet connection unavailable.");
-			}
-		}
-		
-		private function uncaughtErrorHandler(event:UncaughtErrorEvent):void
-		{
-			if (currentStep > 0)
-				updateActivityStep(stepLabels[currentStep - 1], StepItem.ERROR);
-			if (event.error is Error)
-			{
-				var error:Error = event.error as Error;
-				log(error.message);
-				log(error.getStackTrace(), -1, false);
-				abortInstallation(error.message + "\n" + error.getStackTrace());
-			}
-			else if (event.error is ErrorEvent)
-			{
-				var errorEvent:ErrorEvent = event.error as ErrorEvent;
-				log(errorEvent.text);
-				abortInstallation(errorEvent.text);
-			}
-			else
-			{
-				// a non-Error, non-ErrorEvent type was thrown and uncaught
-				log(event.toString());
-				abortInstallation(event.toString());
-			}
-		}
-
-		/**
-		 * Define on ResourceManager all keys for translation.
-		 * If some key is not present on any other language selected by user, the default value will be displayed
-		 * on the screen
-		 */
-		private function defineResourceManagerDefaultLanguage():void {
-			selectDefaultLanguage();
-		}
-		
-		private function getIndexOfEnUS():int
-		{
-			for (var i:int = 0; i < _langSelect.dataProvider.length; i++) 
-			{
-				if(_langSelect.dataProvider.getItemAt(i).data == "en_US")
-				{
-					return i;
-				}
-			}
-			return -1;
-		}
-		
-		private function updateWindowTitle():void {
+            if (!hasInternet)
+            {
+                log("Internet connection unavailable");
+                abortInstallation("Internet connection unavailable.");
+            }
+        }
+        
+        private function uncaughtErrorHandler(event:UncaughtErrorEvent):void
+        {
+            if (currentStep > 0)
+                updateActivityStep(stepLabels[currentStep - 1], StepItem.ERROR);
+            if (event.error is Error)
+            {
+                var error:Error = event.error as Error;
+                log(error.message);
+                log(error.getStackTrace(), -1, false);
+                abortInstallation(error.message + "\n" + error.getStackTrace());
+            }
+            else if (event.error is ErrorEvent)
+            {
+                var errorEvent:ErrorEvent = event.error as ErrorEvent;
+                log(errorEvent.text);
+                abortInstallation(errorEvent.text);
+            }
+            else
+            {
+                // a non-Error, non-ErrorEvent type was thrown and uncaught
+                log(event.toString());
+                abortInstallation(event.toString());
+            }
+        }
+        
+        /**
+         * Define on ResourceManager all keys for translation.
+         * If some key is not present on any other language selected by user, the default value will be displayed
+         * on the screen
+         */
+        private function defineResourceManagerDefaultLanguage():void
+        {
+            selectDefaultLanguage();
+        }
+        
+        private function getIndexOfEnUS():int
+        {
+            for (var i:int = 0; i < _langSelect.dataProvider.length; i++)
+            {
+                if (_langSelect.dataProvider.getItemAt(i).data == "en_US")
+                {
+                    return i;
+                }
+            }
+            return -1;
+        }
+        
+        private function updateWindowTitle():void
+        {
             if (_viewResourceConstants)
-    			this.nativeWindow.title = StringUtil.substitute(_viewResourceConstants.INFO_WINDOW_TITLE, [APACHE_FLEX_BIN_DISTRO_VERSION_DISPLAY]);
-		}
-		
-		protected function selectDefaultLanguageInEmergency():void {
+                this.nativeWindow.title = StringUtil.substitute(_viewResourceConstants.INFO_WINDOW_TITLE, [APACHE_FLEX_BIN_DISTRO_VERSION_DISPLAY]);
+        }
+        
+        protected function selectDefaultLanguageInEmergency():void
+        {
             loadLanguage("en_US", loadUSInEmergencyComplete);
         }
         
@@ -471,14 +489,26 @@
             _viewResourceConstants.update();
         }
         
-        protected function selectDefaultLanguage():void {
+        protected function selectDefaultLanguage():void
+        {
             loadLanguage("en_US", loadUSComplete);
         }
+
         private function loadUSComplete():void
         {
-            var userLocale:String = new StringTools(LocaleID.DEFAULT).actualLocaleIDName.replace("-", "_");
+            var userLocale:String;
             
-            if (languageOverride) {
+            if (userDefaultLanguage)
+            {
+                userLocale = userDefaultLanguage;
+            }
+            else
+            {
+                userLocale = new StringTools(LocaleID.DEFAULT).actualLocaleIDName.replace("-", "_");
+            }
+            
+            if (languageOverride)
+            {
                 userLocale = languageOverride;
             }
             
@@ -520,7 +550,7 @@
                         languageURL = null;
                         installLanguage(userLocale, loader.data);
                         completeFunction();
-                        });
+                    });
                     loader.load(url);
                     return;
                 }
@@ -552,108 +582,126 @@
                 }
             }
             
-            resourceManager.addResourceBundle(resource);                
+            resourceManager.addResourceBundle(resource);
         }
         
         private function languageLoadErrorHandler(event:Event):void
         {
             log("Unable to load language file " + languageURL);
             log(event.toString());
-            abortInstallation("Unable to load language file " + languageURL);            
+            abortInstallation("Unable to load language file " + languageURL);
         }
         
-        private function defaultLanguageLoaded():void {
+        private function defaultLanguageLoaded():void
+        {
             resourceManager.localeChain = [ ViewResourceConstants.DEFAULT_LANGUAGE ];
             
-            var userLocale:String = new StringTools(LocaleID.DEFAULT).actualLocaleIDName.replace("-", "_");
+            var userLocale:String;
             
-            if (languageOverride) {
+            if (userDefaultLanguage)
+            {
+                userLocale = userDefaultLanguage;
+            }
+            else
+            {
+                userLocale = new StringTools(LocaleID.DEFAULT).actualLocaleIDName.replace("-", "_");
+            }
+            
+            if (languageOverride)
+            {
                 userLocale = languageOverride;
             }
             log("Using Locale: " + userLocale);
             
-			var n:int = supportedLanguages.length;
-			for (var i:int = 0; i < n; i++) {
-				if (supportedLanguages[i].data == userLocale) {
-					_langSelect.selectedIndex = i;
-					
-					resourceManager.localeChain = [ userLocale, "en_US" ];
-					
-					break;
-				}
-			}
+            var n:int = supportedLanguages.length;
+            for (var i:int = 0; i < n; i++)
+            {
+                if (supportedLanguages[i].data == userLocale)
+                {
+                    _langSelect.selectedIndex = i;
+                    
+                    resourceManager.localeChain = [ userLocale, "en_US" ];
+                    
+                    break;
+                }
+            }
             _viewResourceConstants = ViewResourceConstants.instance;
             
-			resourceManager.addEventListener(Event.CHANGE, _viewResourceConstants.update);
-			
-			_viewResourceConstants.update();
-			setButtonWidths();
-			directoryBtn.enabled = true;
-			
+            resourceManager.addEventListener(Event.CHANGE, _viewResourceConstants.update);
+            
+            _viewResourceConstants.update();
+            setButtonWidths();
+            directoryBtn.enabled = true;
+            
             updateWindow();
             
             _mirrorURLUtil.logMessages = new LogMessagesVO(_viewResourceConstants.FETCH_MIRROR_CGI, _viewResourceConstants.FETCH_MIRROR_CGI_DONE,
-                _viewResourceConstants.FETCH_MIRROR_CGI_ERROR);
+                    _viewResourceConstants.FETCH_MIRROR_CGI_ERROR);
             
             _mirrorURLUtil.getMirrorURL(Constants.APACHE_FLEX_URL + _mirrorURLCGI, getMirrorURLResultHandler);
             CursorManager.removeBusyCursor();
             
-            checkValidOS();            
-		}
-		
-		protected function updateWindow():void {
-			updateWindowTitle();
-			
-			this.nativeWindow.x = Screen.mainScreen.bounds.width / 2 - this.nativeWindow.width / 2;
-			this.nativeWindow.y = Screen.mainScreen.bounds.height / 2 - this.nativeWindow.height / 2;
-		}
-		
-		protected function loadXML():void {
-			var request:URLRequest;
-			
-			if (configOverride != "") {
-				request = new URLRequest(configOverride);
-			} else {
-				request = new URLRequest(Constants.APACHE_FLEX_URL + Constants.CONFIG_XML_NAME);
-				//request = new URLRequest(Constants.CONFIG_XML_NAME);
-			}
-			
-			_loader = new URLLoader();
-			
-			try {
-				_loader.load(request);
-			} catch (error:Error) {
+            checkValidOS();
+        }
+        
+        protected function updateWindow():void
+        {
+            updateWindowTitle();
+            
+            this.nativeWindow.x = Screen.mainScreen.bounds.width / 2 - this.nativeWindow.width / 2;
+            this.nativeWindow.y = Screen.mainScreen.bounds.height / 2 - this.nativeWindow.height / 2;
+        }
+        
+        protected function loadXML():void
+        {
+            var request:URLRequest;
+            
+            if (configOverride != "") {
+                request = new URLRequest(configOverride);
+            } else {
+                request = new URLRequest(Constants.APACHE_FLEX_URL + Constants.CONFIG_XML_NAME);
+                //request = new URLRequest(Constants.CONFIG_XML_NAME);
+            }
+            
+            _loader = new URLLoader();
+            
+            try {
+                _loader.load(request);
+            } catch (error:Error) {
                 selectDefaultLanguageInEmergency();
                 log("Unable to load " + Constants.APACHE_FLEX_URL + Constants.CONFIG_XML_NAME);
-				log(_viewResourceConstants.ERROR_CONFIG_XML_LOAD + error.errorID + " " + error.message);
-				abortInstallation("Unable to load " + Constants.APACHE_FLEX_URL + Constants.CONFIG_XML_NAME);
-			}
-			
-			_loader.addEventListener(IOErrorEvent.IO_ERROR, xmlError, false, 0, true);
-			_loader.addEventListener(Event.COMPLETE, xmlLoaded, false, 0, true);
-		}
-		
-		protected function xmlError(event:IOErrorEvent):void {
+                log(_viewResourceConstants.ERROR_CONFIG_XML_LOAD + error.errorID + " " + error.message);
+                abortInstallation("Unable to load " + Constants.APACHE_FLEX_URL + Constants.CONFIG_XML_NAME);
+            }
+            
+            _loader.addEventListener(IOErrorEvent.IO_ERROR, xmlError, false, 0, true);
+            _loader.addEventListener(Event.COMPLETE, xmlLoaded, false, 0, true);
+        }
+        
+        protected function xmlError(event:IOErrorEvent):void
+        {
             selectDefaultLanguageInEmergency();
-			log("Unable to load " + Constants.APACHE_FLEX_URL + Constants.CONFIG_XML_NAME);            
-			log(_viewResourceConstants.ERROR_CONFIG_XML_LOAD + event.errorID);
-			abortInstallation("Unable to load " + Constants.APACHE_FLEX_URL + Constants.CONFIG_XML_NAME + " " + event.toString());
-		}
-		
-		protected function xmlLoaded(event:Event):void {
-			if (setXMLVariables()) {
+            log("Unable to load " + Constants.APACHE_FLEX_URL + Constants.CONFIG_XML_NAME);
+            log(_viewResourceConstants.ERROR_CONFIG_XML_LOAD + event.errorID);
+            abortInstallation("Unable to load " + Constants.APACHE_FLEX_URL + Constants.CONFIG_XML_NAME + " " + event.toString());
+        }
+        
+        protected function xmlLoaded(event:Event):void
+        {
+            if (setXMLVariables()) {
                 _langSelect.dataProvider = supportedLanguages;
                 _langSelect.selectedIndex = getIndexOfEnUS();
-				_langSelect.enabled = true;
-				defineResourceManagerDefaultLanguage();
-			}
-		}
-		
-		protected function checkValidOS():void {
-			if (_os.isOther())
-				log(_viewResourceConstants.ERROR_UNSUPPORTED_OPERATING_SYSTEM);
-		}
-		
+                _langSelect.enabled = true;
+                defineResourceManagerDefaultLanguage();
+            }
+        }
+        
+        protected function checkValidOS():void
+        {
+            if (_os.isOther())
+                log(_viewResourceConstants.ERROR_UNSUPPORTED_OPERATING_SYSTEM);
+        }
+        
         private function devBuildFilterFunction(o:Object):Boolean
         {
             return !o.devBuild;
@@ -662,24 +710,24 @@
         private function debugModeHandler(event:Event):void
         {
             debugMode = true;
-			customMenuItem3.caption = "Verbose Logging Enabled";
+            customMenuItem3.caption = "Verbose Logging Enabled";
         }
         
-		private function debugProgressHandler(event:Event):void
-		{
-			logProgressEvents = true;
-			customMenuItem4.caption = "Logging Progress Events";
-		}
-		
+        private function debugProgressHandler(event:Event):void
+        {
+            logProgressEvents = true;
+            customMenuItem4.caption = "Logging Progress Events";
+        }
+        
         private function devBuildShowHandler(event:Event):void
         {
             var item:Object = flexVersion.selectedItem;
             FLEX_VERSIONS.filterFunction = null;
-            FLEX_VERSIONS.refresh();   
+            FLEX_VERSIONS.refresh();
             flexVersion.selectedItem = item;
-			customMenuItem1.caption = "Showing Dev Builds";
+            customMenuItem1.caption = "Showing Dev Builds";
         }
-
+        
         private function downloadCacheHandler(event:Event):void
         {
             var dlg:CacheDialog = new CacheDialog();
@@ -700,7 +748,8 @@
             so.flush();
         }
         
-		protected function setXMLVariables():Boolean {
+        protected function setXMLVariables():Boolean
+        {
             try 
             {
                 var data:XML = XML(_loader.data);
@@ -715,25 +764,25 @@
             if (firstTime)
             {
                 firstTime = false;
-    			
-    			_latestVersion = data.version.latest.toString();
-    			
-    			installerAppPath = data.installer.(@name == 'SDKInstallerApp').@path.toString();
-    			installerAppFileName = data.installer.(@name == 'SDKInstallerApp').@file.toString();
-    			
-    			_mirrorURLCGI = data.mirror.(@name == 'MirrorURLCGI').@file.toString();
                 
-				customMenuItem1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, devBuildShowHandler);
-				customMenuItem2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, downloadCacheHandler);
-				customMenuItem3.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, debugModeHandler);
-				customMenuItem4.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, debugProgressHandler);
-				
+                _latestVersion = data.version.latest.toString();
+                
+                installerAppPath = data.installer.(@name == 'SDKInstallerApp').@path.toString();
+                installerAppFileName = data.installer.(@name == 'SDKInstallerApp').@file.toString();
+                
+                _mirrorURLCGI = data.mirror.(@name == 'MirrorURLCGI').@file.toString();
+                
+                customMenuItem1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, devBuildShowHandler);
+                customMenuItem2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, downloadCacheHandler);
+                customMenuItem3.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, debugModeHandler);
+                customMenuItem4.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, debugProgressHandler);
+                
                 var contextMenuCustomItems:Array = ContextMenu(contextMenu).customItems;
                 contextMenuCustomItems.push(customMenuItem1);
                 contextMenuCustomItems.push(customMenuItem2);
                 contextMenuCustomItems.push(customMenuItem3);
-				contextMenuCustomItems.push(customMenuItem4);
-                			
+                contextMenuCustomItems.push(customMenuItem4);
+                
                 var name:String;
                 var versionString:String;
                 var versionID:String;
@@ -747,9 +796,9 @@
                 
                 var airData:XMLList = data.airsdk[_os.os].versions;
                 var airVersionList:XMLList = airData[0].children();
-    			var airVersions:Array = [];
-    			var selected:String = airData[0]["@default"].toString();
-    			for each (var airVersion:XML in airVersionList) {
+                var airVersions:Array = [];
+                var selected:String = airData[0]["@default"].toString();
+                for each (var airVersion:XML in airVersionList) {
                     var displayVersion:String = airVersion.@displayVersion.toString();
                     versionString = airVersion.@version.toString();
                     versionID = null;
@@ -758,14 +807,14 @@
                     airVersions.push(versionString);
                     var airPath:String = airVersion.path.toString();
                     var airFile:String = airVersion.file.toString();
-    				AIR_VERSIONS.addItem({label:"AIR " + displayVersion, version: versionString, versionID: versionID, 
-                                            path: airPath, file: airFile});
-    			}
-    			
-    			if (this.airVersion.selectedIndex == -1) {
-    				this.airVersion.selectedIndex = airVersions.indexOf(selected);	
-    			}
-    			
+                    AIR_VERSIONS.addItem({label:"AIR " + displayVersion, version: versionString, versionID: versionID, 
+                        path: airPath, file: airFile});
+                }
+                
+                if (this.airVersion.selectedIndex == -1) {
+                    this.airVersion.selectedIndex = airVersions.indexOf(selected);
+                }
+                
                 var flexData:XMLList = data.products.children();
                 var selectedFlexVersion:int;
                 for each (var productData:XML in flexData)
@@ -794,174 +843,184 @@
                             needsAIR: needsAIR, needsFlash: needsFlash, devBuild: devBuild, icon: icon});
                     }
                 }
-    			
+                
                 FLEX_VERSIONS.filterFunction = devBuildFilterFunction;
                 FLEX_VERSIONS.refresh();
                 flexVersion.validateNow();
                 
-    			if (this.flexVersion.selectedIndex == -1) {
-    				this.flexVersion.selectedIndex = selectedFlexVersion;
-    			}
+                if (this.flexVersion.selectedIndex == -1) {
+                    this.flexVersion.selectedIndex = selectedFlexVersion;
+                }
                 
-    			var selectedFlexVersionObject:Object = this.flexVersion.selectedItem;
-    			updateFlexVersionStrings(selectedFlexVersionObject);
-    			
-    			if (!APACHE_FLEX_BIN_DISTRO_FILE || !APACHE_FLEX_BIN_DISTRO_PATH) {
-    				log(_viewResourceConstants.ERROR_INVALID_SDK_URL);
-    				keepGoing = false;
-    			}
-    			
+                var selectedFlexVersionObject:Object = this.flexVersion.selectedItem;
+                updateFlexVersionStrings(selectedFlexVersionObject);
+                
+                if (!APACHE_FLEX_BIN_DISTRO_FILE || !APACHE_FLEX_BIN_DISTRO_PATH) {
+                    log(_viewResourceConstants.ERROR_INVALID_SDK_URL);
+                    keepGoing = false;
+                }
+                
                 var flashData:XMLList = data.flashsdk.versions;
                 var flashVersionList:XMLList = flashData[0].children();
                 var flashPlayerVersions:Array = [];
                 selected = flashData[0]["@default"].toString();
-    			for each (var flashVersion:XML in flashVersionList) {
+                for each (var flashVersion:XML in flashVersionList) {
                     displayVersion = flashVersion.@displayVersion.toString();
                     versionString = flashVersion.@version.toString();
                     versionID = null;
                     if (flashVersion.@versionID.length() > 0)
                         versionID = flashVersion.@versionID.toString();
                     flashPlayerVersions.push(versionString);
-    				if (!_os.isLinux() || Number(versionString) <= 11.2) {
-    					var swfVersion:String = flashVersion.swfversion.toString();
+                    if (!_os.isLinux() || Number(versionString) <= 11.2) {
+                        var swfVersion:String = flashVersion.swfversion.toString();
                         var flashPath:String = flashVersion.path.toString();
                         var flashFile:String = flashVersion.file.toString();
-    					FLASH_PLAYER_VERSIONS.addItem({label:"Flash Player " + displayVersion, version:versionString, swfVersion:swfVersion,
+                        FLASH_PLAYER_VERSIONS.addItem({label:"Flash Player " + displayVersion, version:versionString, swfVersion:swfVersion,
                             versionID: versionID, path: flashPath, file: flashFile});
-    				}
-    			}
-    			
-    			if (this.flashPlayerVersion.selectedIndex == -1) {
-    				this.flashPlayerVersion.selectedIndex = flashPlayerVersions.indexOf(selected);	
-    			}
+                    }
+                }
+                
+                if (this.flashPlayerVersion.selectedIndex == -1) {
+                    this.flashPlayerVersion.selectedIndex = flashPlayerVersions.indexOf(selected);
+                }
             }
             
-			ADOBE_AIR_SDK_WIN_FILE = data.airsdk.windows.versions.children().(@version==AIR_VERSION).file.toString();
-			ADOBE_AIR_SDK_WIN_URL = data.airsdk.windows.versions.children().(@version==AIR_VERSION).path.toString();
-			if (_os.isWindows() && (!ADOBE_AIR_SDK_WIN_FILE || !ADOBE_AIR_SDK_WIN_URL)) {
-				log(_viewResourceConstants.ERROR_INVALID_AIR_SDK_URL_WINDOWS);
-				keepGoing = false;
-			}
-			ADOBE_AIR_SDK_WIN_URL += ADOBE_AIR_SDK_WIN_FILE;
-			
-			ADOBE_AIR_SDK_MAC_FILE = data.airsdk.mac.versions.children().(@version==AIR_VERSION).file.toString();
-			ADOBE_AIR_SDK_MAC_URL = data.airsdk.mac.versions.children().(@version==AIR_VERSION).path.toString();
-			if (_os.isMac() && (!ADOBE_AIR_SDK_MAC_FILE || !ADOBE_AIR_SDK_MAC_URL)) {
-				log(_viewResourceConstants.ERROR_INVALID_AIR_SDK_URL_MAC);
-				keepGoing = false;
-			}
-			ADOBE_AIR_SDK_MAC_URL += ADOBE_AIR_SDK_MAC_FILE;
-			
-			ADOBE_AIR_SDK_LINUX_FILE = data.airsdk.linux.versions.children().(@version==AIR_VERSION).file.toString();
-			ADOBE_AIR_SDK_LINUX_URL = data.airsdk.linux.versions.children().(@version==AIR_VERSION).path.toString();
-			if (_os.isLinux() && (!ADOBE_AIR_SDK_LINUX_FILE || !ADOBE_AIR_SDK_LINUX_URL)) {
-				log(_viewResourceConstants.ERROR_INVALID_AIR_SDK_URL_LINUX);
-				keepGoing = false;
-			}
-			ADOBE_AIR_SDK_LINUX_URL += ADOBE_AIR_SDK_LINUX_FILE;
-			
-			ADOBE_FB_GLOBALPLAYER_SWC_FILE = data.flashsdk.versions.children().(@version==FLASH_PLAYER_VERSION).file.toString();
-			ADOBE_FB_GLOBALPLAYER_SWC_URL = data.flashsdk.versions.children().(@version==FLASH_PLAYER_VERSION).path.toString();
-			FLASH_PLAYER_SWF_VERSION = data.flashsdk.versions.children().(@version==FLASH_PLAYER_VERSION).swfversion.toString();
-			if (!ADOBE_FB_GLOBALPLAYER_SWC_FILE || !ADOBE_FB_GLOBALPLAYER_SWC_URL) {
-				log(_viewResourceConstants.ERROR_INVALID_FLASH_PLAYER_SWC_URL);
-				keepGoing = false;
-			}
-			ADOBE_FB_GLOBALPLAYER_SWC_URL += ADOBE_FB_GLOBALPLAYER_SWC_FILE;
-			
-			SWF_OBJECT_FILE = data.swfobject.@file.toString();
-			SWF_OBJECT_URL = data.swfobject.@path.toString();
-			
-			//Supporting OSMF 2.0 from 4.11 onwards.  
-			if(APACHE_FLEX_BIN_DISTRO_VERSION == "4.9.1" || APACHE_FLEX_BIN_DISTRO_VERSION == "4.10.0" )
-			{
-				OSMF_SWC_FILE = data.OSMF_SWC.@file.toString();
-				OSMF_SWC_URL = data.OSMF_SWC.@path.toString();
-				_useOSMF2 = false;
-			}
-			else
-			{
-				OSMF_SWC_FILE = data["OSMF_SWC_2.0"].@file.toString();
-				OSMF_SWC_URL = data["OSMF_SWC_2.0"].@path.toString();
-				_useOSMF2 = true;
-			}
-			
-			BLAZEDS_FILE = data.BlazeDS.@file.toString();
-			BLAZEDS_URL = data.BlazeDS.@path.toString();
-			
-			AFE_FILE = data.fontswf.afe.@file.toString();
-			AFE_URL = data.fontswf.afe.@path.toString();
-			
-			AGLJ40_FILE = data.fontswf.aglj40.@file.toString();
-			AGLJ40_URL = data.fontswf.aglj40.@path.toString();
-			
-			FLEX_FONTKIT_FILE = data.fontswf["flex-fontkit"].@file.toString();
-			FLEX_FONTKIT_URL = data.fontswf["flex-fontkit"].@path.toString();
-			
-			RIDEAU_FILE = data.fontswf.rideau.@file.toString();
-			RIDEAU_URL = data.fontswf.rideau.@path.toString();
-			
-			
-			return keepGoing;
-		}
-		
-		protected function updateFlexVersionStrings(selectedFlexVersionObject:Object):void
-		{
-			APACHE_FLEX_BIN_DISTRO_FILE_SHORT = selectedFlexVersionObject.shortName;
-			APACHE_FLEX_BIN_DISTRO_VERSION = selectedFlexVersionObject.version;
-			APACHE_FLEX_BIN_DISTRO_VERSION_DISPLAY = selectedFlexVersionObject.label;
-			
-			APACHE_FLEX_BIN_DISTRO_FILE = selectedFlexVersionObject.fileName;
-			APACHE_FLEX_BIN_DISTRO_PATH = selectedFlexVersionObject.path;
-			legacy =  selectedFlexVersionObject.legacy;
+            ADOBE_AIR_SDK_WIN_FILE = data.airsdk.windows.versions.children().(@version==AIR_VERSION).file.toString();
+            ADOBE_AIR_SDK_WIN_URL = data.airsdk.windows.versions.children().(@version==AIR_VERSION).path.toString();
+            if (_os.isWindows() && (!ADOBE_AIR_SDK_WIN_FILE || !ADOBE_AIR_SDK_WIN_URL)) {
+                log(_viewResourceConstants.ERROR_INVALID_AIR_SDK_URL_WINDOWS);
+                keepGoing = false;
+            }
+            ADOBE_AIR_SDK_WIN_URL += ADOBE_AIR_SDK_WIN_FILE;
+            
+            ADOBE_AIR_SDK_MAC_FILE = data.airsdk.mac.versions.children().(@version==AIR_VERSION).file.toString();
+            ADOBE_AIR_SDK_MAC_URL = data.airsdk.mac.versions.children().(@version==AIR_VERSION).path.toString();
+            if (_os.isMac() && (!ADOBE_AIR_SDK_MAC_FILE || !ADOBE_AIR_SDK_MAC_URL)) {
+                log(_viewResourceConstants.ERROR_INVALID_AIR_SDK_URL_MAC);
+                keepGoing = false;
+            }
+            ADOBE_AIR_SDK_MAC_URL += ADOBE_AIR_SDK_MAC_FILE;
+            
+            ADOBE_AIR_SDK_LINUX_FILE = data.airsdk.linux.versions.children().(@version==AIR_VERSION).file.toString();
+            ADOBE_AIR_SDK_LINUX_URL = data.airsdk.linux.versions.children().(@version==AIR_VERSION).path.toString();
+            if (_os.isLinux() && (!ADOBE_AIR_SDK_LINUX_FILE || !ADOBE_AIR_SDK_LINUX_URL)) {
+                log(_viewResourceConstants.ERROR_INVALID_AIR_SDK_URL_LINUX);
+                keepGoing = false;
+            }
+            ADOBE_AIR_SDK_LINUX_URL += ADOBE_AIR_SDK_LINUX_FILE;
+            
+            ADOBE_FB_GLOBALPLAYER_SWC_FILE = data.flashsdk.versions.children().(@version==FLASH_PLAYER_VERSION).file.toString();
+            ADOBE_FB_GLOBALPLAYER_SWC_URL = data.flashsdk.versions.children().(@version==FLASH_PLAYER_VERSION).path.toString();
+            FLASH_PLAYER_SWF_VERSION = data.flashsdk.versions.children().(@version==FLASH_PLAYER_VERSION).swfversion.toString();
+            if (!ADOBE_FB_GLOBALPLAYER_SWC_FILE || !ADOBE_FB_GLOBALPLAYER_SWC_URL) {
+                log(_viewResourceConstants.ERROR_INVALID_FLASH_PLAYER_SWC_URL);
+                keepGoing = false;
+            }
+            ADOBE_FB_GLOBALPLAYER_SWC_URL += ADOBE_FB_GLOBALPLAYER_SWC_FILE;
+            
+            SWF_OBJECT_FILE = data.swfobject.@file.toString();
+            SWF_OBJECT_URL = data.swfobject.@path.toString();
+            
+            //Supporting OSMF 2.0 from 4.11 onwards.  
+            if(APACHE_FLEX_BIN_DISTRO_VERSION == "4.9.1" || APACHE_FLEX_BIN_DISTRO_VERSION == "4.10.0" )
+            {
+                OSMF_SWC_FILE = data.OSMF_SWC.@file.toString();
+                OSMF_SWC_URL = data.OSMF_SWC.@path.toString();
+                _useOSMF2 = false;
+            }
+            else
+            {
+                OSMF_SWC_FILE = data["OSMF_SWC_2.0"].@file.toString();
+                OSMF_SWC_URL = data["OSMF_SWC_2.0"].@path.toString();
+                _useOSMF2 = true;
+            }
+            
+            BLAZEDS_FILE = data.BlazeDS.@file.toString();
+            BLAZEDS_URL = data.BlazeDS.@path.toString();
+            
+            AFE_FILE = data.fontswf.afe.@file.toString();
+            AFE_URL = data.fontswf.afe.@path.toString();
+            
+            AGLJ40_FILE = data.fontswf.aglj40.@file.toString();
+            AGLJ40_URL = data.fontswf.aglj40.@path.toString();
+            
+            FLEX_FONTKIT_FILE = data.fontswf["flex-fontkit"].@file.toString();
+            FLEX_FONTKIT_URL = data.fontswf["flex-fontkit"].@path.toString();
+            
+            RIDEAU_FILE = data.fontswf.rideau.@file.toString();
+            RIDEAU_URL = data.fontswf.rideau.@path.toString();
+            
+            
+            return keepGoing;
+        }
+        
+        protected function updateFlexVersionStrings(selectedFlexVersionObject:Object):void
+        {
+            APACHE_FLEX_BIN_DISTRO_FILE_SHORT = selectedFlexVersionObject.shortName;
+            APACHE_FLEX_BIN_DISTRO_VERSION = selectedFlexVersionObject.version;
+            APACHE_FLEX_BIN_DISTRO_VERSION_DISPLAY = selectedFlexVersionObject.label;
+            
+            APACHE_FLEX_BIN_DISTRO_FILE = selectedFlexVersionObject.fileName;
+            APACHE_FLEX_BIN_DISTRO_PATH = selectedFlexVersionObject.path;
+            legacy =  selectedFlexVersionObject.legacy;
             nocache = selectedFlexVersionObject.nocache;
             APACHE_FLEX_BIN_INSTALLER_FILE = selectedFlexVersionObject.prefix + "installer-config.xml";
             
-			// ApacheFlex is full URL so download directly and dont use mirror useful for testing release candidates
-			if (APACHE_FLEX_BIN_DISTRO_PATH.indexOf("http") == 0) {
-				_useMirror = false;
-			}
-			else
-			{
-				_useMirror = true;
-			}
-		}
-		
-		private function useMirrorPath(path:String):String {
-			if (_useMirror) {
-				return path;
-			}
-			
-			return "";
-		}
-		
-		private function getMirrorURLResultHandler():void {
-			var logMessages:ArrayCollection = ILog(_mirrorURLUtil).log;
-			var i:int;
-			var n:int = logMessages.length;
-			for (i = 0; i < n; i++) {
-				log(String(logMessages.getItemAt(i)));
-			}
-			
-			if (_mirrorURLUtil.errorOccurred) {
-				abortInstallation("mirrorURLUtil.errorOccurred");
+            // ApacheFlex is full URL so download directly and dont use mirror useful for testing release candidates
+            if (APACHE_FLEX_BIN_DISTRO_PATH.indexOf("http") == 0) {
+                _useMirror = false;
+            }
+            else
+            {
+                _useMirror = true;
+            }
+        }
+        
+        private function useMirrorPath(path:String):String
+        {
+            if (_useMirror) {
+                return path;
+            }
+            
+            return "";
+        }
+        
+        private function getMirrorURLResultHandler():void
+        {
+            var logMessages:ArrayCollection = ILog(_mirrorURLUtil).log;
+            var i:int;
+            var n:int = logMessages.length;
+            for (i = 0; i < n; i++) {
+                log(String(logMessages.getItemAt(i)));
+            }
+            
+            if (_mirrorURLUtil.errorOccurred) {
+                abortInstallation("mirrorURLUtil.errorOccurred");
                 main();
-			} else {
+            } else {
                 updatePaths();
-			}
-			
-		}
-
+            }
+            
+        }
+        
         protected function updatePaths():void
         {
             if (APACHE_FLEX_BIN_DISTRO_PATH.substr(0, Constants.URL_PREFIX.length) == Constants.URL_PREFIX
                 || APACHE_FLEX_BIN_DISTRO_PATH.substr(0, Constants.FILE_PREFIX.length) == Constants.FILE_PREFIX
                 || APACHE_FLEX_BIN_DISTRO_PATH.substr(0, Constants.HTTPS_PREFIX.length) == Constants.HTTPS_PREFIX) {
                 APACHE_FLEX_BIN_DISTRO_URL = APACHE_FLEX_BIN_DISTRO_PATH + APACHE_FLEX_BIN_DISTRO_FILE;
-                APACHE_FLEX_BIN_INSTALLER_URL = APACHE_FLEX_BIN_DISTRO_PATH + APACHE_FLEX_BIN_INSTALLER_FILE;
+                if (stepsOverride != "") {
+                    APACHE_FLEX_BIN_INSTALLER_URL = stepsOverride;
+                } else {
+                    APACHE_FLEX_BIN_INSTALLER_URL = APACHE_FLEX_BIN_DISTRO_PATH + APACHE_FLEX_BIN_INSTALLER_FILE;
+                }
             } else {
                 APACHE_FLEX_BIN_DISTRO_URL = useMirrorPath(_mirrorURLUtil.mirrorURL) + APACHE_FLEX_BIN_DISTRO_PATH + APACHE_FLEX_BIN_DISTRO_FILE;
-                APACHE_FLEX_BIN_INSTALLER_URL = MD5CompareUtil.MD5_DOMAIN + APACHE_FLEX_BIN_DISTRO_PATH + APACHE_FLEX_BIN_INSTALLER_FILE;
+                if (stepsOverride != "") {
+                    APACHE_FLEX_BIN_INSTALLER_URL = stepsOverride;
+                } else {
+                    APACHE_FLEX_BIN_INSTALLER_URL = MD5CompareUtil.MD5_DOMAIN + APACHE_FLEX_BIN_DISTRO_PATH + APACHE_FLEX_BIN_INSTALLER_FILE;
+                }
             }
             
             if (installerAppPath.substr(0, Constants.URL_PREFIX.length) != Constants.URL_PREFIX) {
@@ -971,13 +1030,14 @@
             main();
         }
         
-		protected function main():void {
-			
-			if (shouldUpdate()) {
-				doUpdate();
-			}
-		}
-
+        protected function main():void
+        {
+            
+            if (shouldUpdate()) {
+                doUpdate();
+            }
+        }
+        
         private function logVersion():void
         {
             if (!loggedVersion)
@@ -986,84 +1046,100 @@
                 var applicationDescriptor:XML = NativeApplication.nativeApplication.applicationDescriptor;
                 var xmlns:Namespace = new Namespace(applicationDescriptor.namespace());
                 var currentVersion:String = applicationDescriptor.xmlns::versionNumber.toString();
-
+                
                 // Log the Installer version to help with any support issues that arise.
-                log("Version " + currentVersion + " (" + _os.os + ")", 0);
+                log("Installer version " + currentVersion + " (" + _os.os + ")", 0);
                 loggedVersion = true;
             }
         }
         
-		protected function shouldUpdate():Boolean {
-			var shouldUpdate:Boolean = false;
-			//Current version
-			var applicationDescriptor:XML = NativeApplication.nativeApplication.applicationDescriptor;
-			var xmlns:Namespace = new Namespace(applicationDescriptor.namespace());
-			var currentVersion:String = applicationDescriptor.xmlns::versionNumber.toString();
-			
+        protected function shouldUpdate():Boolean
+        {
+            var shouldUpdate:Boolean = false;
+            //Current version
+            var applicationDescriptor:XML = NativeApplication.nativeApplication.applicationDescriptor;
+            var xmlns:Namespace = new Namespace(applicationDescriptor.namespace());
+            var currentVersion:String = applicationDescriptor.xmlns::versionNumber.toString();
+            
             logVersion();
             
-			var availBuildNumbers:Array = _latestVersion.split(".");
-			var currentBuildNumbers:Array = currentVersion.split(".");
-			
-			if (parseInt(availBuildNumbers[0]) > parseInt(currentBuildNumbers[0])) {
-				return true;
-			} else if (parseInt(availBuildNumbers[0]) == parseInt(currentBuildNumbers[0])) {
-				if (parseInt(availBuildNumbers[1]) > parseInt(currentBuildNumbers[1])) {
-					return true;
-				} else if (parseInt(availBuildNumbers[1]) == parseInt(currentBuildNumbers[1])) {
-					if (parseInt(availBuildNumbers[2]) > parseInt(currentBuildNumbers[2])) {
-						return true;
-					}
-				}
-			}
-			return false;
-			
-		}
-		
-		protected function doUpdate():void {
-			var updaterDialog:UpdaterDialog = UpdaterDialog(PopUpManager.createPopUp(this, UpdaterDialog, true));
-			updaterDialog.addEventListener("close", handleUpdaterDialogClose);
-			updaterDialog.latestVersion = _latestVersion;
-			PopUpManager.centerPopUp(updaterDialog);
-		}
-		
-		protected function handleUpdaterDialogClose(event:Event):void {
-			PopUpManager.removePopUp(IFlexDisplayObject(event.target));
-		}
-		
-		protected function handleInstallBtnClick(event:MouseEvent):void {
-			if (flexSDKTxtInput.text == "") {
-				log(_viewResourceConstants.INFO_ENTER_VALID_FLEX_SDK_PATH);
-			} else {
-				_langSelect.enabled = false;
-				_flexHome = flexSDKTxtInput.text;
-				resetInstallStepsActivity();
-				addOptionalComponentsToInstallSteps();
-				this.currentState = "installState";
-    			install();
-			}
-		}
-		
-		protected function handleZeroStepNextBtnClick(event:MouseEvent):void {	
-			directoryBtn.enabled = false;
-			
-			AIR_VERSION = airVersion.selectedItem.version;
-			var airVersionID:String = airVersion.selectedItem.versionID;
-			FLASH_PLAYER_VERSION = flashPlayerVersion.selectedItem.version;
-			var flashVersionID:String = flashPlayerVersion.selectedItem.versionID;
-			
-			setXMLVariables(); // as AIR and Flash version may of changed
-			
-			if (airVersionID)
-				log("AIR version " + airVersionID);
-			else
-				log("AIR version " + AIR_VERSION);
-			
-			if (flashVersionID)
-				log("Flash Player version " + flashVersionID);
-			else
-				log("Flash Player version " + FLASH_PLAYER_VERSION);
-			
+            var availBuildNumbers:Array = _latestVersion.split(".");
+            var currentBuildNumbers:Array = currentVersion.split(".");
+            
+            if (parseInt(availBuildNumbers[0]) > parseInt(currentBuildNumbers[0])) {
+                return true;
+            } else if (parseInt(availBuildNumbers[0]) == parseInt(currentBuildNumbers[0])) {
+                if (parseInt(availBuildNumbers[1]) > parseInt(currentBuildNumbers[1])) {
+                    return true;
+                } else if (parseInt(availBuildNumbers[1]) == parseInt(currentBuildNumbers[1])) {
+                    if (parseInt(availBuildNumbers[2]) > parseInt(currentBuildNumbers[2])) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+            
+        }
+        
+        protected function doUpdate():void
+        {
+            var updaterDialog:UpdaterDialog = UpdaterDialog(PopUpManager.createPopUp(this, UpdaterDialog, true));
+            updaterDialog.addEventListener("close", handleUpdaterDialogClose);
+            updaterDialog.latestVersion = _latestVersion;
+            PopUpManager.centerPopUp(updaterDialog);
+        }
+        
+        protected function handleUpdaterDialogClose(event:Event):void
+        {
+            PopUpManager.removePopUp(IFlexDisplayObject(event.target));
+        }
+        
+        protected function handleInstallBtnClick(event:MouseEvent):void
+        {
+			 var airVersionID:String = airVersion.selectedItem.versionID;
+            var flashVersionID:String = flashPlayerVersion.selectedItem.versionID;
+            
+            log("SDK version " + APACHE_FLEX_BIN_DISTRO_VERSION_DISPLAY);
+            
+            if (flexVersion.selectedItem.needsAIR)
+            {
+                if (airVersionID)
+                    log("AIR version " + airVersionID);
+                else
+                    log("AIR version " + AIR_VERSION);
+            }
+            
+            if (flexVersion.selectedItem.needsFlash)
+            {
+                if (flashVersionID)
+                    log("Flash Player version " + flashVersionID);
+                else
+                    log("Flash Player version " + FLASH_PLAYER_VERSION);
+            }
+
+            if (flexSDKTxtInput.text == "") {
+                log(_viewResourceConstants.INFO_ENTER_VALID_FLEX_SDK_PATH);
+            } else {
+                _langSelect.enabled = false;
+                _flexHome = flexSDKTxtInput.text;
+                resetInstallStepsActivity();
+                addOptionalComponentsToInstallSteps();
+                this.currentState = "installState";
+                install();
+            }
+        }
+        
+        protected function handleZeroStepNextBtnClick(event:MouseEvent):void
+        {
+            directoryBtn.enabled = false;
+            
+            AIR_VERSION = airVersion.selectedItem.version;
+            var airVersionID:String = airVersion.selectedItem.versionID;
+            FLASH_PLAYER_VERSION = flashPlayerVersion.selectedItem.version;
+            var flashVersionID:String = flashPlayerVersion.selectedItem.versionID;
+            
+            setXMLVariables(); // as AIR and Flash version may of changed
+            
             if (!legacy)
             {
                 var req:URLRequest = new URLRequest(APACHE_FLEX_BIN_INSTALLER_URL);
@@ -1073,18 +1149,42 @@
                 loader.addEventListener(ErrorEvent.ERROR, handleInstallerXMLError);
                 loader.addEventListener(IOErrorEvent.IO_ERROR, handleInstallerXMLError);
                 
-                loader.load(req);          
+                loader.load(req);
             }
             else {
                 showDirectoryState();
-			}
-		}
-		
-		protected function handleFirstStepNextBtnClick(event:MouseEvent):void {
+            }
+        }
+        
+		protected function handleFirstStepBackBtnClick(event:MouseEvent):void
+        {
+            showDefaultState();
+        }
+        
+        protected function handleSecondStepBackBtnClick(event:MouseEvent):void
+        {
+            showDirectoryState();
+        }
+		 
+		protected function handleFirstStepNextBtnClick(event:MouseEvent):void
+        {
+            // Quick check to see if the selected directory is writable
+            try {
+                var f:File = new File(_flexHome + File.separator + "flex.txt");
+                checkDirWritable(f);
+            } catch (e:Error) {
+                log(_viewResourceConstants.ERROR_UNABLE_TO_CREATE_TEMP_DIRECTORY);
+                flexSDKTxtInput.errorString = _viewResourceConstants.ERROR_DIR_REQUIRE_ADMIN_RIGHTS;
+                flexSDKTxtInput.prompt = _viewResourceConstants.ERROR_DIR_REQUIRE_ADMIN_RIGHTS;
+                updateActivityStep(_viewResourceConstants.STEP_CREATE_DIRECTORIES, StepItem.ERROR);
+                return;
+            }
+            
             showOptionsState();
         }
         
-        protected function handleInstallerXMLLoaded(event:Event):void {
+        protected function handleInstallerXMLLoaded(event:Event):void
+        {
             var data:XML = XML(event.target.data);
             var localeList:Array = resourceManager.localeChain;
             _installerComponentsDataProvider = new ArrayCollection();
@@ -1148,54 +1248,69 @@
             return "";
         }
         
-        protected function handleInstallerXMLError(event:Event):void {
+        protected function handleInstallerXMLError(event:Event):void
+        {
             log("Unable to load " + APACHE_FLEX_BIN_INSTALLER_URL);
             abortInstallation("Unable to load " + APACHE_FLEX_BIN_INSTALLER_URL);
         }
         
+        protected function showDefaultState():void
+        {
+            zeroStepGroup.visible = true;
+            directoryBtn.enabled = true;
+            currentState = "default";
+        }
+        
         protected function showDirectoryState():void
         {
             initiateInstallStepsActivity();
+            if (currentState != "optionsState")
+            {
             initializeInstallerComponentsDataProvider();
-            
+            }
             currentState = "directoryState";
         }
         
-        protected function showOptionsState():void {
-			currentState = "optionsState";
-		}
-		
-		protected function initiateInstallStepsActivity():void {
-			_installationSteps = new ArrayCollection();
-			
-			_installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_CREATE_DIRECTORIES));
-			_installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_REQUIRED_INSTALL_APACHE_FLEX_SDK));
-			_installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_VERIFY_FLEX_SDK));
-			_installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_UNZIP_FLEX_SDK));
-			_installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK));
-			_installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_UNZIP_AIR_RUNTIME_KIT));
-			_installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_REQUIRED_INSTALL_FLASH_PLAYER_GLOBAL_SWC));
-			_installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_INSTALL_CONFIG_FILES));
-			_installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_REQUIRED_INSTALL_SWFOBJECT));
-			_installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF));
-		}
-		
-		protected function resetInstallStepsActivity():void {
-			for each(var step:StepItem in _installationSteps) {
-				step.status = StepItem.NORMAL;
-			}
-		}
-		
-		protected function addOptionalComponentsToInstallSteps():void {
+        protected function showOptionsState():void
+        {
+            currentState = "optionsState";
+            checkIfAllRequiredComponentsPromptsAnswered();
+        }
+        
+        protected function initiateInstallStepsActivity():void
+        {
+            _installationSteps = new ArrayCollection();
+            
+            _installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_CREATE_DIRECTORIES));
+            _installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_REQUIRED_INSTALL_APACHE_FLEX_SDK));
+            _installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_VERIFY_FLEX_SDK));
+            _installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_UNZIP_FLEX_SDK));
+            _installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK));
+            _installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_UNZIP_AIR_RUNTIME_KIT));
+            _installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_REQUIRED_INSTALL_FLASH_PLAYER_GLOBAL_SWC));
+            _installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_INSTALL_CONFIG_FILES));
+            _installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_REQUIRED_INSTALL_SWFOBJECT));
+            _installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF));
+        }
+        
+        protected function resetInstallStepsActivity():void
+        {
+            for each(var step:StepItem in _installationSteps) {
+                step.status = StepItem.NORMAL;
+            }
+        }
+        
+        protected function addOptionalComponentsToInstallSteps():void
+        {
             if (usingXML)
             {
                 _installationSteps = new ArrayCollection();
-
+                
                 _installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_CREATE_DIRECTORIES));
                 _installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_REQUIRED_INSTALL_APACHE_FLEX_SDK));
                 _installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_VERIFY_FLEX_SDK));
                 _installationSteps.addItem(new StepItem(_viewResourceConstants.STEP_UNZIP_FLEX_SDK));
-
+                
                 for each (var stepData:XML in installStepsData) {
                     var propName:String = stepData.@property.toString();
                     if (!propName || InstallerComponentVO(licensePropertyMap[propName]).selected)
@@ -1208,107 +1323,138 @@
                 }
                 return;
             }
-			for each (var obj:InstallerComponentVO in _installerComponentsDataProvider) {
-				if (!obj.required && obj.selected) {
-					_installationSteps.addItem(new StepItem(obj.label));
-				}
-			}
-		}
-		
-		protected function initializeInstallerComponentsDataProvider():void {
-			_installerComponentsDataProvider = new ArrayCollection();
-			_installerComponentsDataProvider.addItem(new InstallerComponentVO(_viewResourceConstants.STEP_REQUIRED_INSTALL_APACHE_FLEX_SDK,
-				_viewResourceConstants.ASK_APACHE_FLEX, _viewResourceConstants.LICENSE_APACHE_V2,
-				_viewResourceConstants.LICENSE_URL_APACHE_V2,
-				"STEP_REQUIRED_INSTALL_APACHE_FLEX_SDK", true));
-			_installerComponentsDataProvider.addItem(new InstallerComponentVO(_viewResourceConstants.STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK,
-				_viewResourceConstants.ASK_ADOBE_AIR_SDK,
-				_viewResourceConstants.LICENSE_ADOBE_AIR_SDK,
-				_viewResourceConstants.LICENSE_URL_ADOBE_AIR_SDK,
-				"STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK", true));
-			_installerComponentsDataProvider.addItem(new InstallerComponentVO(_viewResourceConstants.STEP_REQUIRED_INSTALL_FLASH_PLAYER_GLOBAL_SWC,
-				_viewResourceConstants.ASK_ADOBE_FLASH_PLAYER_GLOBAL_SWC,
-				_viewResourceConstants.LICENSE_ADOBE_SDK,
-				_viewResourceConstants.LICENSE_URL_ADOBE_SDK,
-				"STEP_REQUIRED_INSTALL_FLASH_PLAYER_GLOBAL_SWC", true));
-			_installerComponentsDataProvider.addItem(new InstallerComponentVO(_viewResourceConstants.STEP_REQUIRED_INSTALL_SWFOBJECT,
-				_viewResourceConstants.ASK_SWFOBJECT, _viewResourceConstants.LICENSE_SWFOBJECT,
-				_viewResourceConstants.LICENSE_URL_SWFOBJECT, "STEP_REQUIRED_INSTALL_SWFOBJECT",
-				true));
-			_installerComponentsDataProvider.addItem(new InstallerComponentVO(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF,
-				_viewResourceConstants.ASK_OSMF, _viewResourceConstants.LICENSE_OSMF,
-				_viewResourceConstants.LICENSE_URL_OSMF, "STEP_REQUIRED_INSTALL_OSMF", true));
-			_installerComponentsDataProvider.addItem(new InstallerComponentVO(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF,
-				_viewResourceConstants.ASK_FONTSWF, _viewResourceConstants.LICENSE_FONTSWF,
-				_viewResourceConstants.LICENSE_URL_FONTSWF, "STEP_OPTIONAL_INSTALL_FONTSWF",
-				false));
-			_installerComponentsDataProvider.addItem(new InstallerComponentVO(_viewResourceConstants.STEP_OPTIONAL_INSTALL_BLAZEDS,
-				_viewResourceConstants.ASK_BLAZEDS, _viewResourceConstants.LICENSE_BLAZEDS,
-				_viewResourceConstants.LICENSE_URL_BLAZEDS, "STEP_OPTIONAL_INSTALL_BLAZEDS",
-				false));
-		}
-		
-		protected function install():void {
-			createDirectories();
-		}
-		
-		protected function handleAirVersionChange(event:Event):void {
-			AIR_VERSION = airVersion.selectedItem.version;
-			
-			// Match AIR and Flash versions
-			if (flashPlayerVersion.selectedIndex != airVersion.selectedIndex) {
-				flashPlayerVersion.selectedIndex = airVersion.selectedIndex;
-				FLASH_PLAYER_VERSION = FLASH_PLAYER_VERSIONS[airVersion.selectedIndex].version;
-			}
-		}
-		
-		protected function handleFlashPlayerVersionChange(event:Event):void {
-			FLASH_PLAYER_VERSION = flashPlayerVersion.selectedItem.version;
-			
-			// Match AIR and Flash versions
-			if (airVersion.selectedIndex != flashPlayerVersion.selectedIndex) {
-				airVersion.selectedIndex = flashPlayerVersion.selectedIndex;
-				AIR_VERSION = AIR_VERSIONS[flashPlayerVersion.selectedIndex].version;
-			}
-		}
-		
-		protected function handleFlexVersionChange(event:Event):void {
-			/*APACHE_FLEX_BIN_DISTRO_VERSION =  flexVersion.selectedItem.version;
-			APACHE_FLEX_BIN_DISTRO_VERSION_DISPLAY = flexVersion.selectedItem.label;*/
+            for each (var obj:InstallerComponentVO in _installerComponentsDataProvider) {
+                if (!obj.required && obj.selected) {
+                    _installationSteps.addItem(new StepItem(obj.label));
+                }
+            }
+        }
+        
+        protected function initializeInstallerComponentsDataProvider():void
+        {
+            _installerComponentsDataProvider = new ArrayCollection();
+            _installerComponentsDataProvider.addItem(new InstallerComponentVO(_viewResourceConstants.STEP_REQUIRED_INSTALL_APACHE_FLEX_SDK,
+                _viewResourceConstants.ASK_APACHE_FLEX, _viewResourceConstants.LICENSE_APACHE_V2,
+                _viewResourceConstants.LICENSE_URL_APACHE_V2,
+                "STEP_REQUIRED_INSTALL_APACHE_FLEX_SDK", true));
+            _installerComponentsDataProvider.addItem(new InstallerComponentVO(_viewResourceConstants.STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK,
+                _viewResourceConstants.ASK_ADOBE_AIR_SDK,
+                _viewResourceConstants.LICENSE_ADOBE_AIR_SDK,
+                _viewResourceConstants.LICENSE_URL_ADOBE_AIR_SDK,
+                "STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK", true));
+            _installerComponentsDataProvider.addItem(new InstallerComponentVO(_viewResourceConstants.STEP_REQUIRED_INSTALL_FLASH_PLAYER_GLOBAL_SWC,
+                _viewResourceConstants.ASK_ADOBE_FLASH_PLAYER_GLOBAL_SWC,
+                _viewResourceConstants.LICENSE_ADOBE_SDK,
+                _viewResourceConstants.LICENSE_URL_ADOBE_SDK,
+                "STEP_REQUIRED_INSTALL_FLASH_PLAYER_GLOBAL_SWC", true));
+            _installerComponentsDataProvider.addItem(new InstallerComponentVO(_viewResourceConstants.STEP_REQUIRED_INSTALL_SWFOBJECT,
+                _viewResourceConstants.ASK_SWFOBJECT, _viewResourceConstants.LICENSE_SWFOBJECT,
+                _viewResourceConstants.LICENSE_URL_SWFOBJECT, "STEP_REQUIRED_INSTALL_SWFOBJECT",
+                true));
+            _installerComponentsDataProvider.addItem(new InstallerComponentVO(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF,
+                _viewResourceConstants.ASK_OSMF, _viewResourceConstants.LICENSE_OSMF,
+                _viewResourceConstants.LICENSE_URL_OSMF, "STEP_REQUIRED_INSTALL_OSMF", true));
+            _installerComponentsDataProvider.addItem(new InstallerComponentVO(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF,
+                _viewResourceConstants.ASK_FONTSWF, _viewResourceConstants.LICENSE_FONTSWF,
+                _viewResourceConstants.LICENSE_URL_FONTSWF, "STEP_OPTIONAL_INSTALL_FONTSWF",
+                false));
+            _installerComponentsDataProvider.addItem(new InstallerComponentVO(_viewResourceConstants.STEP_OPTIONAL_INSTALL_BLAZEDS,
+                _viewResourceConstants.ASK_BLAZEDS, _viewResourceConstants.LICENSE_BLAZEDS,
+                _viewResourceConstants.LICENSE_URL_BLAZEDS, "STEP_OPTIONAL_INSTALL_BLAZEDS",
+                false));
+        }
+        
+        protected function install():void
+        {
+            createDirectories();
+        }
+        
+        protected function handleAirVersionChange(event:Event):void
+        {
+            AIR_VERSION = airVersion.selectedItem.version;
+            
+            // Match AIR and Flash versions
+            if (flashPlayerVersion.selectedIndex != airVersion.selectedIndex) {
+                flashPlayerVersion.selectedIndex = airVersion.selectedIndex;
+                FLASH_PLAYER_VERSION = FLASH_PLAYER_VERSIONS[airVersion.selectedIndex].version;
+            }
+        }
+        
+        protected function handleFlashPlayerVersionChange(event:Event):void
+        {
+            FLASH_PLAYER_VERSION = flashPlayerVersion.selectedItem.version;
+            
+            // Match AIR and Flash versions
+            if (airVersion.selectedIndex != flashPlayerVersion.selectedIndex) {
+                airVersion.selectedIndex = flashPlayerVersion.selectedIndex;
+                AIR_VERSION = AIR_VERSIONS[flashPlayerVersion.selectedIndex].version;
+            }
+        }
+        
+        protected function handleFlexVersionChange(event:Event):void
+        {
+            /*APACHE_FLEX_BIN_DISTRO_VERSION =  flexVersion.selectedItem.version;
+            APACHE_FLEX_BIN_DISTRO_VERSION_DISPLAY = flexVersion.selectedItem.label;*/
             var item:Object = flexVersion.selectedItem;
             airVersion.enabled = item.needsAIR;
             flashPlayerVersion.enabled = item.needsFlash;
-			updateFlexVersionStrings(item);
-			updatePaths();
-			updateWindowTitle();
+            updateFlexVersionStrings(item);
+            updatePaths();
+            updateWindowTitle();
             InstallApacheFlexSkin(skin).textIcon.source = item.icon;
-		}
-		
-		protected function browseForSDK(event:MouseEvent):void {
-			var file:File = new File();
-			
-			file.addEventListener(Event.SELECT, flexSDKDirSelected, false, 0, true);
-			file.browseForDirectory(_viewResourceConstants.INFO_SELECT_DIRECTORY);
-		}
-		
-		protected function flexSDKDirSelected(event:Event):void {
-			var selectedDir:File = File(event.target);
-			var overlay:Boolean = flexVersion.selectedItem.overlay;
+        }
+        
+        protected function browseForSDK(event:MouseEvent):void
+        {
+            var file:File = new File();
+            
+            file.addEventListener(Event.SELECT, flexSDKDirSelected, false, 0, true);
+            file.browseForDirectory(_viewResourceConstants.INFO_SELECT_DIRECTORY);
+        }
+        
+        protected function checkDirWritable(file:File):void
+        {
+            var ba:ByteArray = new ByteArray();
+            ba.writeUTFBytes("1");
+            writeFileToDirectory(file, ba);
+            file.deleteFile();
+        }
+        
+        protected function flexSDKDirSelected(event:Event):void
+        {
+            var selectedDir:File = File(event.target);
+            var overlay:Boolean = flexVersion.selectedItem.overlay;
+            
+            // Quick check to see if the selected directory is writable
+            try {
+                var f:File = new File(selectedDir.nativePath + File.separator + "flex.txt");
+                checkDirWritable(f);
+            } catch (e:Error) {
+                log(_viewResourceConstants.ERROR_UNABLE_TO_CREATE_TEMP_DIRECTORY);
+                log(_viewResourceConstants.ERROR_DIR_REQUIRE_ADMIN_RIGHTS);
+                flexSDKTxtInput.text = selectedDir.nativePath;
+                flexSDKTxtInput.errorString = _viewResourceConstants.ERROR_DIR_REQUIRE_ADMIN_RIGHTS + " : " + selectedDir.nativePath; // tooltip
+                flexSDKTxtInput.prompt = _viewResourceConstants.ERROR_DIR_REQUIRE_ADMIN_RIGHTS; // field
+                updateActivityStep(_viewResourceConstants.STEP_CREATE_DIRECTORIES, StepItem.ERROR);
+                return;
+            }
+           
             overlaying = overlay;
-			if (!overlay)
+            if (!overlay)
             {
                 if (isDirectoryEmpty(selectedDir)) {
-    				_flexHome = selectedDir.nativePath;
-    				flexSDKTxtInput.text = _flexHome;
-    				nextBtn.enabled = true;
-    				_langSelect.enabled = true;
-    				flexSDKTxtInput.errorString = "";
-    				flexSDKTxtInput.prompt = _viewResourceConstants.SELECT_PATH_PROMPT;
-    			} else {
-    				nextBtn.enabled = false;
-    				flexSDKTxtInput.errorString = _viewResourceConstants.ERROR_DIR_NOT_EMPTY;
-    				flexSDKTxtInput.prompt = _viewResourceConstants.ERROR_DIR_NOT_EMPTY;
-    			}
+                    _flexHome = selectedDir.nativePath;
+                    flexSDKTxtInput.text = _flexHome;
+                    nextBtn.enabled = true;
+                    _langSelect.enabled = true;
+                    flexSDKTxtInput.errorString = "";
+                    flexSDKTxtInput.prompt = _viewResourceConstants.SELECT_PATH_PROMPT;
+                } else {
+                    nextBtn.enabled = false;
+                    flexSDKTxtInput.text = selectedDir.nativePath;
+                    flexSDKTxtInput.errorString = _viewResourceConstants.ERROR_DIR_NOT_EMPTY + " : " + selectedDir.nativePath;
+                    flexSDKTxtInput.prompt = _viewResourceConstants.ERROR_DIR_NOT_EMPTY;
+                }
             }
             else
             {
@@ -1317,191 +1463,205 @@
                 nextBtn.enabled = true;
                 _langSelect.enabled = true;
                 flexSDKTxtInput.errorString = "";
-                flexSDKTxtInput.prompt = _viewResourceConstants.SELECT_PATH_PROMPT;                
+                flexSDKTxtInput.prompt = _viewResourceConstants.SELECT_PATH_PROMPT;
             }
-		}
-		
-		protected function handleFlexSDXTxtInputChange(event:TextOperationEvent):void {
-			var tempDir:File;
-			var path:String = flexSDKTxtInput.text;
-			
-			try {
-				tempDir = new File(path);
-				
-				if (isDirectoryEmpty(tempDir)) {
-					flexSDKTxtInput.errorString = "";
-					_flexHome = path;
-					nextBtn.enabled = true;
-					_langSelect.enabled = true;
-				} else {
-					flexSDKTxtInput.errorString = _viewResourceConstants.ERROR_INVALID_FLEX_SDK_DIRECTORY;
-					nextBtn.enabled = false;
-				}
-			} catch (e:Error) {
-				flexSDKTxtInput.errorString = _viewResourceConstants.ERROR_INVALID_FLEX_SDK_DIRECTORY;
-				nextBtn.enabled = false;
-			}
-		}
-		
-		protected function createDirectories():void {
-			updateActivityStep(_viewResourceConstants.STEP_CREATE_DIRECTORIES, StepItem.ACTIVE);
-			
-			try {
+        }
+        
+        protected function handleFlexSDXTxtInputChange(event:TextOperationEvent):void
+        {
+            var tempDir:File;
+            var path:String = flexSDKTxtInput.text;
+            
+            try {
+                tempDir = new File(path);
+                
+                if (isDirectoryEmpty(tempDir)) {
+                    flexSDKTxtInput.errorString = "";
+                    _flexHome = path;
+                    nextBtn.enabled = true;
+                    _langSelect.enabled = true;
+                } else {
+                    flexSDKTxtInput.errorString = _viewResourceConstants.ERROR_INVALID_FLEX_SDK_DIRECTORY;
+                    nextBtn.enabled = false;
+                }
+            } catch (e:Error) {
+                flexSDKTxtInput.errorString = _viewResourceConstants.ERROR_INVALID_FLEX_SDK_DIRECTORY;
+                nextBtn.enabled = false;
+            }
+        }
+        
+        protected function createDirectories():void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_CREATE_DIRECTORIES, StepItem.ACTIVE);
+            
+            try {
                 if (!overlaying)
-    				log(_viewResourceConstants.INFO_CREATING_FLEX_HOME);
+                    log(_viewResourceConstants.INFO_CREATING_FLEX_HOME);
                 _flexHomeDir = createFolder(_flexHome);
-				log(_viewResourceConstants.INFO_CREATING_TEMP_DIR);
-				_flexTemp = _flexHome + File.separator + "temp";
-				_flexTempDir = createFolder(_flexTemp);
-				updateActivityStep(_viewResourceConstants.STEP_CREATE_DIRECTORIES, StepItem.COMPLETE);
-				downloadApacheFlexSDK();
-			} catch (e:Error) {
-				updateActivityStep(_viewResourceConstants.STEP_CREATE_DIRECTORIES, StepItem.ERROR);
-				log(_viewResourceConstants.ERROR_UNABLE_TO_CREATE_TEMP_DIRECTORY);
-				abortInstallation(_viewResourceConstants.ERROR_UNABLE_TO_CREATE_TEMP_DIRECTORY);
-			}
-		}
-		
-		protected function downloadApacheFlexSDK():void {
-			updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_APACHE_FLEX_SDK, StepItem.ACTIVE);
-			
-			try {
-				log(_viewResourceConstants.INFO_DOWNLOADING_FLEX_SDK + APACHE_FLEX_BIN_DISTRO_URL);
-				_apacheFlexSDKCompressedFile = File.userDirectory.resolvePath(_flexTemp + File.separator + APACHE_FLEX_BIN_DISTRO_FILE);
-				copyOrDownload(APACHE_FLEX_BIN_DISTRO_URL, handleApacheFlexSDKDownload, _apacheFlexSDKCompressedFile, handleApacheFlexSDKDownloadError, nocache);
-			} catch (e:Error) {
-				updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_APACHE_FLEX_SDK, StepItem.ERROR);
-				log(_viewResourceConstants.ERROR_UNABLE_TO_CREATE_TEMP_DIRECTORY + "(error: " + e.message);
-				abortInstallation(_viewResourceConstants.ERROR_UNABLE_TO_CREATE_TEMP_DIRECTORY + "(error: " + e.message);
-			}
-			
-		}
-		
-		protected function handleApacheFlexSDKDownload(event:Event):void {
-			try {
-				writeFileToDirectory(_apacheFlexSDKCompressedFile, event.target.data);
-			} catch (e:Error) {
-				updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_APACHE_FLEX_SDK, StepItem.ERROR);
-				abortInstallation("handleApacheFlexSDKDownload " + e.message);
-			}
-			
-			updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_APACHE_FLEX_SDK, StepItem.COMPLETE);
-			
-			updateActivityStep(_viewResourceConstants.STEP_VERIFY_FLEX_SDK, StepItem.ACTIVE);
-			
-			log(_viewResourceConstants.STEP_VERIFY_FLEX_SDK);
-			
-			_md5CompareUtil.addEventListener(ProgressEvent.PROGRESS, md5VerificationProgressHandler);
-			_md5CompareUtil.verifyMD5(_apacheFlexSDKCompressedFile, APACHE_FLEX_BIN_DISTRO_PATH + APACHE_FLEX_BIN_DISTRO_FILE, uncompressApacheFlexSDK);
-		}
-		
-		protected function md5VerificationProgressHandler(event:ProgressEvent):void {
+                log(_viewResourceConstants.INFO_CREATING_TEMP_DIR);
+                _flexTemp = _flexHome + File.separator + "temp";
+                _flexTempDir = createFolder(_flexTemp);
+                updateActivityStep(_viewResourceConstants.STEP_CREATE_DIRECTORIES, StepItem.COMPLETE);
+                downloadApacheFlexSDK();
+            } catch (e:Error) {
+                updateActivityStep(_viewResourceConstants.STEP_CREATE_DIRECTORIES, StepItem.ERROR);
+                log(_viewResourceConstants.ERROR_UNABLE_TO_CREATE_TEMP_DIRECTORY);
+                abortInstallation(_viewResourceConstants.ERROR_UNABLE_TO_CREATE_TEMP_DIRECTORY);
+            }
+        }
+        
+        protected function downloadApacheFlexSDK():void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_APACHE_FLEX_SDK, StepItem.ACTIVE);
+            
+            try {
+                log(_viewResourceConstants.INFO_DOWNLOADING_FLEX_SDK + APACHE_FLEX_BIN_DISTRO_URL);
+                _apacheFlexSDKCompressedFile = File.userDirectory.resolvePath(_flexTemp + File.separator + APACHE_FLEX_BIN_DISTRO_FILE);
+                copyOrDownload(APACHE_FLEX_BIN_DISTRO_URL, handleApacheFlexSDKDownload, _apacheFlexSDKCompressedFile, handleApacheFlexSDKDownloadError, nocache);
+            } catch (e:Error) {
+                updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_APACHE_FLEX_SDK, StepItem.ERROR);
+                log(_viewResourceConstants.ERROR_UNABLE_TO_CREATE_TEMP_DIRECTORY + "(error: " + e.message);
+                abortInstallation(_viewResourceConstants.ERROR_UNABLE_TO_CREATE_TEMP_DIRECTORY + "(error: " + e.message);
+            }
+            
+        }
+        
+        protected function handleApacheFlexSDKDownload(event:Event):void
+        {
+            try {
+                writeFileToDirectory(_apacheFlexSDKCompressedFile, event.target.data);
+            } catch (e:Error) {
+                updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_APACHE_FLEX_SDK, StepItem.ERROR);
+                abortInstallation("handleApacheFlexSDKDownload " + e.message);
+            }
+            
+            updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_APACHE_FLEX_SDK, StepItem.COMPLETE);
+            
+            updateActivityStep(_viewResourceConstants.STEP_VERIFY_FLEX_SDK, StepItem.ACTIVE);
+            
+            log(_viewResourceConstants.STEP_VERIFY_FLEX_SDK);
+            
+            _md5CompareUtil.addEventListener(ProgressEvent.PROGRESS, md5VerificationProgressHandler);
+            _md5CompareUtil.verifyMD5(_apacheFlexSDKCompressedFile, APACHE_FLEX_BIN_DISTRO_PATH + APACHE_FLEX_BIN_DISTRO_FILE, uncompressApacheFlexSDK);
+        }
+        
+        protected function md5VerificationProgressHandler(event:ProgressEvent):void
+        {
             if (logProgressEvents)
                 log("md5 progress " + event.bytesLoaded + "  " + event.bytesTotal, -1, false);
             if (event.bytesTotal > 0)
-    			progressBar.percent = Math.round((event.bytesLoaded / event.bytesTotal) * 100);
-		}
-		
-		protected function handleApacheFlexSDKDownloadError(event:* = null):void {
-			updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_APACHE_FLEX_SDK, StepItem.ERROR);
-			log(_viewResourceConstants.ERROR_UNABLE_TO_DOWNLOAD_FLEX_SDK);
-			abortInstallation(_viewResourceConstants.ERROR_UNABLE_TO_DOWNLOAD_FLEX_SDK);
-		}
-		
-		protected function uncompressApacheFlexSDK():void {
-			if (!_md5CompareUtil.fileIsVerified) {
-				updateActivityStep(_viewResourceConstants.STEP_VERIFY_FLEX_SDK, StepItem.ERROR);
-				
-				log(_viewResourceConstants.ERROR_VERIFY_FLEX_SDK);
-				
-				abortInstallation(_viewResourceConstants.ERROR_VERIFY_FLEX_SDK);
-				return;
-			} else {
-				updateActivityStep(_viewResourceConstants.STEP_VERIFY_FLEX_SDK, StepItem.COMPLETE);
-				
-				log(_viewResourceConstants.INFO_VERIFY_FLEX_SDK_DONE);
-			}
-			
-			updateActivityStep(_viewResourceConstants.STEP_UNZIP_FLEX_SDK, StepItem.ACTIVE);
-			
-			try {
-				log(_viewResourceConstants.INFO_UNZIPPING + _apacheFlexSDKCompressedFile.nativePath);
-				
-				if (_os.isWindows()) {
-					unzip(_apacheFlexSDKCompressedFile, handleApacheFlexSDKZipFileUnzipComplete, handleApacheFlexSDKZipFileUnzipError);
-				} else {
-					untar(_apacheFlexSDKCompressedFile, _flexTempDir, handleApacheFlexSDKZipFileUnzipComplete, handleApacheFlexSDKZipFileUnzipError);
-				}
-			} catch (e:Error) {
-				updateActivityStep(_viewResourceConstants.STEP_UNZIP_FLEX_SDK, StepItem.ERROR);
-				abortInstallation(_viewResourceConstants.STEP_UNZIP_FLEX_SDK + " " + e.message);
-			}
-		}
-		
-		protected function handleApacheFlexSDKZipFileUnzipComplete(event:Event):void {
-			log(_viewResourceConstants.INFO_FINISHED_UNZIPPING + _apacheFlexSDKCompressedFile.nativePath);
-			updateActivityStep(_viewResourceConstants.STEP_UNZIP_FLEX_SDK, StepItem.COMPLETE);
-			
-			if (_os.isWindows()) {
+                progressBar.percent = Math.round((event.bytesLoaded / event.bytesTotal) * 100);
+        }
+        
+        protected function handleApacheFlexSDKDownloadError(event:* = null):void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_APACHE_FLEX_SDK, StepItem.ERROR);
+            log(_viewResourceConstants.ERROR_UNABLE_TO_DOWNLOAD_FLEX_SDK);
+            abortInstallation(_viewResourceConstants.ERROR_UNABLE_TO_DOWNLOAD_FLEX_SDK);
+        }
+        
+        protected function uncompressApacheFlexSDK():void
+        {
+            if (!_md5CompareUtil.fileIsVerified) {
+                updateActivityStep(_viewResourceConstants.STEP_VERIFY_FLEX_SDK, StepItem.ERROR);
+                
+                log(_viewResourceConstants.ERROR_VERIFY_FLEX_SDK);
+                
+                abortInstallation(_viewResourceConstants.ERROR_VERIFY_FLEX_SDK);
+                return;
+            } else {
+                updateActivityStep(_viewResourceConstants.STEP_VERIFY_FLEX_SDK, StepItem.COMPLETE);
+                
+                log(_viewResourceConstants.INFO_VERIFY_FLEX_SDK_DONE);
+            }
+            
+            updateActivityStep(_viewResourceConstants.STEP_UNZIP_FLEX_SDK, StepItem.ACTIVE);
+            
+            try {
+                log(_viewResourceConstants.INFO_UNZIPPING + _apacheFlexSDKCompressedFile.nativePath);
+                
+                if (_os.isWindows()) {
+                    unzip(_apacheFlexSDKCompressedFile, handleApacheFlexSDKZipFileUnzipComplete, handleApacheFlexSDKZipFileUnzipError);
+                } else {
+                    untar(_apacheFlexSDKCompressedFile, _flexTempDir, handleApacheFlexSDKZipFileUnzipComplete, handleApacheFlexSDKZipFileUnzipError);
+                }
+            } catch (e:Error) {
+                updateActivityStep(_viewResourceConstants.STEP_UNZIP_FLEX_SDK, StepItem.ERROR);
+                abortInstallation(_viewResourceConstants.STEP_UNZIP_FLEX_SDK + " " + e.message);
+            }
+        }
+        
+        protected function handleApacheFlexSDKZipFileUnzipComplete(event:Event):void
+        {
+            log(_viewResourceConstants.INFO_FINISHED_UNZIPPING + _apacheFlexSDKCompressedFile.nativePath);
+            updateActivityStep(_viewResourceConstants.STEP_UNZIP_FLEX_SDK, StepItem.COMPLETE);
+            
+            if (_os.isWindows()) {
                 if (usingXML)
                     runInstallerScript();
                 else
-    				downloadAIRRuntimeKitForWindows();
-			} else {
+                    downloadAIRRuntimeKitForWindows();
+            } else {
                 if (!overlaying)
                 {
-    				/* Copy all files from the unarchived directory to the root */
-    				var directory:File = _flexTempDir.resolvePath(APACHE_FLEX_BIN_DISTRO_FILE_SHORT);
-    				var files:Array = directory.getDirectoryListing();
-    				for each(var file:File in files) {
-    					file.copyTo(_flexHomeDir.resolvePath(file.name));
+                    /* Copy all files from the unarchived directory to the root */
+                    var directory:File = _flexTempDir.resolvePath(APACHE_FLEX_BIN_DISTRO_FILE_SHORT);
+                    var files:Array = directory.getDirectoryListing();
+                    for each(var file:File in files) {
+                        file.copyTo(_flexHomeDir.resolvePath(file.name));
                     }
-				}
-				if (usingXML)
+                }
+                if (usingXML)
                 {
                     runInstallerScript();
                 }
                 else
                 {
-    				if (_os.isMac()) {
-    					downloadAIRRuntimeKitForMac();
-    				}
-    				else {
-    					downloadAIRRuntimeKitForLinux();
-    				}
+                    if (_os.isMac()) {
+                        downloadAIRRuntimeKitForMac();
+                    }
+                    else {
+                        downloadAIRRuntimeKitForLinux();
+                    }
                 }
-			}
-		}
-		
-		protected function handleApacheFlexSDKZipFileUnzipError(error:ErrorEvent = null):void {
-			updateActivityStep(_viewResourceConstants.STEP_UNZIP_FLEX_SDK, StepItem.ERROR);
-			abortInstallation(_viewResourceConstants.STEP_UNZIP_FLEX_SDK + " " + error.toString());
-		}
-		
+            }
+        }
+        
+        protected function handleApacheFlexSDKZipFileUnzipError(error:ErrorEvent = null):void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_UNZIP_FLEX_SDK, StepItem.ERROR);
+            abortInstallation(_viewResourceConstants.STEP_UNZIP_FLEX_SDK + " " + error.toString());
+        }
+        
         protected function runInstallerScript():void
         {
             ant = new Ant();
             ant.output = output;
-			
+            
             var file:File;
-            if (overlaying)
+            if (installOverride != "") {
+                file = new File(installOverride);
+            }
+            else if (overlaying)
             {
-                if (_os.isWindows())
+                var directory:File = _flexTempDir.resolvePath(APACHE_FLEX_BIN_DISTRO_FILE_SHORT);
+                if (_os.isWindows()) {
                     file = _flexTempDir.resolvePath("installer.xml");
+                }
                 else {
-                    var directory:File = _flexTempDir.resolvePath(APACHE_FLEX_BIN_DISTRO_FILE_SHORT);
                     file = directory.resolvePath("installer.xml");
                 }
             }
-            else
+            else {
                 file = _flexHomeDir.resolvePath("installer.xml");
+            }
             addEventListener(Event.ENTER_FRAME, enterFrameHandler);
             var context:Object = { installer: true };
-			if (usingDownloadCache)
-			{
-				context["usingDownloadCache"] = usingDownloadCache;
-				context["downloadCacheFolder"] = downloadCacheFolder;
-			}
+            if (usingDownloadCache)
+            {
+                context["usingDownloadCache"] = usingDownloadCache;
+                context["downloadCacheFolder"] = downloadCacheFolder;
+            }
             if (configOverride != "") {
                 context["xml.properties"] = configOverride;
             }
@@ -1509,10 +1669,10 @@
             {
                 context["bundle"] = resourceManager.localeChain[0];
             }
-            for (var p:String in licensePropertyMap)            
+            for (var p:String in licensePropertyMap)
             {
                 if (InstallerComponentVO(licensePropertyMap[p]).selected)
-                    context[p] = true;                    
+                    context[p] = true;
             }
             for (p in additionalProps)
                 context[p] = additionalProps[p];
@@ -1532,8 +1692,8 @@
                 context["flash.sdk.url.path"] = flashPlayerVersion.selectedItem.path;
                 context["flash.sdk.url.file"] = flashPlayerVersion.selectedItem.file;
             }
-			
-            if (!ant.processXMLFile(file, context, true))
+            
+            if (file.exists && !ant.processXMLFile(file, context, true))
             {
                 ant.addEventListener(Event.COMPLETE, completeHandler);
                 ant.addEventListener(ProgressEvent.PROGRESS, progressEventHandler);
@@ -1551,36 +1711,42 @@
             /*
             if (ant.progressClass is Copy)
             {
-                progressBar.label = getLocalizedString(progressLabels, "Copy");
+            progressBar.label = getLocalizedString(progressLabels, "Copy");
             }
             else if (ant.progressClass is Get)
             {
-                progressBar.label = getLocalizedString(progressLabels, "Get");                    
+            progressBar.label = getLocalizedString(progressLabels, "Get");
             }
             else if (ant.progressClass is Checksum)
             {
-                progressBar.label = getLocalizedString(progressLabels, "Checksum");                    
+            progressBar.label = getLocalizedString(progressLabels, "Checksum");
             }
             */
         }
         
         private function completeHandler(event:Event):void
         {
-            if (!Ant.currentAnt.project.status)
-			{
+            if (Ant.currentAnt && !Ant.currentAnt.project.status)
+            {
                 var msg:String = Ant.currentAnt.project.failureMessage;
-				log(msg ? msg : "no failure message provided");
-				if (currentStep > 0)
-	                updateActivityStep(stepLabels[currentStep - 1], StepItem.ERROR);
-			}
+                log(msg ? msg : "no failure message provided");
+                if (currentStep > 0)
+                    updateActivityStep(stepLabels[currentStep - 1], StepItem.ERROR);
+            }
             else if (currentStep == stepLabels.length && currentStep > 0)
                 updateActivityStep(stepLabels[currentStep - 1], StepItem.COMPLETE);
-            if (Ant.currentAnt.project.status)
-                tracker.trackInstallerSuccess(APACHE_FLEX_BIN_DISTRO_VERSION_DISPLAY, APACHE_FLEX_BIN_DISTRO_VERSION, _os.os);
-			if (Ant.currentAnt.project.failureMessage)
- 	            cleanup(!Ant.currentAnt.project.status, "&info=" + escape(Ant.currentAnt.project.failureMessage));
-			else
-			    cleanup(!Ant.currentAnt.project.status);
+            
+            if (Ant.currentAnt) {
+                if (Ant.currentAnt.project.status)
+                    tracker.trackInstallerSuccess(APACHE_FLEX_BIN_DISTRO_VERSION_DISPLAY, APACHE_FLEX_BIN_DISTRO_VERSION, _os.os);
+                if (Ant.currentAnt.project.failureMessage)
+                    cleanup(!Ant.currentAnt.project.status, "&info=" + escape(Ant.currentAnt.project.failureMessage));
+                else
+                    cleanup(!Ant.currentAnt.project.status);
+            }
+            else {
+                cleanup();
+            }
         }
         
         private var ant:Ant;
@@ -1607,439 +1773,475 @@
                 isPublic = true;
                 skipLog = false;
             }
-			else if (s.indexOf("[fail] ") != -1)
-			{
-				s = s.substr(s.indexOf("[fail] ") + 7);
-				isPublic = true;
-				skipLog = false;
-			}
+            else if (s.indexOf("[fail] ") != -1)
+            {
+                s = s.substr(s.indexOf("[fail] ") + 7);
+                isPublic = true;
+                skipLog = false;
+            }
             log(s, -1, isPublic, skipLog);
         }
-                
+        
         private function enterFrameHandler(event:Event):void
         {
             ant.doCallback();
         }
+        
+        protected function downloadAIRRuntimeKitForWindows():void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK, StepItem.ACTIVE);
+            
+            try {
+                log(_viewResourceConstants.INFO_DOWNLOADING_AIR_RUNTIME_KIT_WINDOWS + ADOBE_AIR_SDK_WIN_URL);
+                _adobeAIRSDKZipFile = File.userDirectory.resolvePath(_flexTemp + File.separator + ADOBE_AIR_SDK_WIN_FILE);
+                copyOrDownload(ADOBE_AIR_SDK_WIN_URL, handleAIRSDKDownload, _adobeAIRSDKZipFile, handleAIRSDKDownloadError);
+            } catch (e:Error) {
+                updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK, StepItem.ERROR);
+                abortInstallation();
+            }
+        }
+        
+        protected function downloadAIRRuntimeKitForMac():void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK, StepItem.ACTIVE);
+            
+            try {
+                log(_viewResourceConstants.INFO_DOWNLOADING_AIR_RUNTIME_KIT_MAC + ADOBE_AIR_SDK_MAC_URL);
+                _adobeAIRSDKZipFile = File.userDirectory.resolvePath(_flexTemp + File.separator + ADOBE_AIR_SDK_MAC_FILE);
+                copyOrDownload(ADOBE_AIR_SDK_MAC_URL, handleAIRSDKDownload, _adobeAIRSDKZipFile, handleAIRSDKDownloadError);
+            } catch (e:Error) {
+                updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK, StepItem.ERROR);
+                abortInstallation();
+            }
+        }
+        
+        protected function downloadAIRRuntimeKitForLinux():void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK, StepItem.ACTIVE);
+            
+            try {
+                log(_viewResourceConstants.INFO_DOWNLOADING_AIR_RUNTIME_KIT_MAC + ADOBE_AIR_SDK_LINUX_URL);
+                _adobeAIRSDKZipFile = File.userDirectory.resolvePath(_flexTemp + File.separator + ADOBE_AIR_SDK_LINUX_FILE);
+                copyOrDownload(ADOBE_AIR_SDK_LINUX_URL, handleAIRSDKDownload, _adobeAIRSDKZipFile, handleAIRSDKDownloadError);
+            } catch (e:Error) {
+                updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK, StepItem.ERROR);
+                abortInstallation();
+            }
+        }
+        
+        protected function handleAIRSDKDownload(event:Event):void
+        {
+            try {
+                writeFileToDirectory(_adobeAIRSDKZipFile, event.target.data);
+            } catch (e:Error) {
+                updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK, StepItem.ERROR);
+                abortInstallation();
+            }
+            
+            updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK, StepItem.COMPLETE);
+            
+            unzipAdobeAIRSDK();
+        }
+        
+        protected function handleAIRSDKDownloadError(error:* = null):void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK, StepItem.ERROR);
+            log(_viewResourceConstants.ERROR_UNABLE_TO_DOWNLOAD_AIR_SDK);
+            abortInstallation();
+        }
+        
+        protected function unzipAdobeAIRSDK():void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_UNZIP_AIR_RUNTIME_KIT, StepItem.ACTIVE);
+            
+            try {
+                if (_os.isWindows()) {
+                    unzipAdobeAIRSDKWindows()
+                } else {
+                    unzipAdobeAIRSDKMac();
+                }
+            } catch (e:Error) {
+                updateActivityStep(_viewResourceConstants.STEP_UNZIP_AIR_RUNTIME_KIT, StepItem.ERROR);
+                abortInstallation();
+            }
+        }
+        
+        protected function unzipAdobeAIRSDKWindows():void
+        {
+            log(_viewResourceConstants.INFO_UNZIPPING + _adobeAIRSDKZipFile.nativePath);
+            unzip(_adobeAIRSDKZipFile, handleAdobeAIRSDKWinZipFileUnzipComplete, handleAdobeAIRSDKWinZipFileUnzipError);
+        }
+        
+        protected function unzipAdobeAIRSDKMac():void
+        {
+            if (NativeProcess.isSupported) {
+                untar(_adobeAIRSDKZipFile, _flexHomeDir, handleAdobeAIRSDKMacUntarComplete, handleAdobeAIRSDKMacUntarError);
+            } else {
+                log(_viewResourceConstants.ERROR_NATIVE_PROCESS_NOT_SUPPORTED);
+                updateActivityStep(_viewResourceConstants.STEP_UNZIP_AIR_RUNTIME_KIT, StepItem.ERROR);
+            }
+        }
+        
+        protected function handleAdobeAIRSDKMacUntarError(error:ProgressEvent = null):void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_UNZIP_AIR_RUNTIME_KIT, StepItem.ERROR);
+            abortInstallation();
+        }
+        
+        protected function handleAdobeAIRSDKMacUntarComplete(event:Event):void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_UNZIP_AIR_RUNTIME_KIT, StepItem.COMPLETE);
+            log(_viewResourceConstants.INFO_FINISHED_UNTARING + _adobeAIRSDKZipFile.nativePath);
+            downloadPlayerGlobalSWC();
+        }
+        
+        protected function handleAdobeAIRSDKWinZipFileUnzipComplete(event:Event):void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_UNZIP_AIR_RUNTIME_KIT, StepItem.COMPLETE);
+            log(_viewResourceConstants.INFO_FINISHED_UNZIPPING + _adobeAIRSDKZipFile.nativePath);
+            downloadPlayerGlobalSWC();
+        }
+        
+        protected function handleAdobeAIRSDKWinZipFileUnzipError(error:ErrorEvent = null):void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_UNZIP_AIR_RUNTIME_KIT, StepItem.ERROR);
+        }
+        
+        protected function downloadPlayerGlobalSWC():void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_FLASH_PLAYER_GLOBAL_SWC, StepItem.ACTIVE);
+            
+            try {
+                log(_viewResourceConstants.INFO_INSTALLING_PLAYERGLOBAL_SWC + ADOBE_FB_GLOBALPLAYER_SWC_URL);
+                _fbGlobalPlayerDir = createFolder(_flexHome + File.separator + "frameworks" + File.separator + "libs" + File.separator + "player"
+                    + File.separator + FLASH_PLAYER_VERSION);
+                _fbGlobalPlayerFile = File.userDirectory.resolvePath(_fbGlobalPlayerDir.nativePath + File.separator + "playerglobal.swc");
+                copyOrDownload(ADOBE_FB_GLOBALPLAYER_SWC_URL, handlePlayerGlobalDownload, _fbGlobalPlayerFile, handlePlayerGlobalDownloadError);
+            } catch (e:Error) {
+                updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_FLASH_PLAYER_GLOBAL_SWC, StepItem.ERROR);
+                abortInstallation();
+            }
+        }
+        
+        protected function handlePlayerGlobalDownload(event:Event):void
+        {
+            try {
+                var playerGlobalFile:File = File.userDirectory.resolvePath(_fbGlobalPlayerDir.nativePath + File.separator + "playerglobal.swc");
+                writeFileToDirectory(playerGlobalFile, event.target.data);
+            } catch (e:Error) {
+                updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_FLASH_PLAYER_GLOBAL_SWC, StepItem.ERROR);
+                abortInstallation();
+            }
+            updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_FLASH_PLAYER_GLOBAL_SWC, StepItem.COMPLETE);
+            copyConfigFiles();
+        }
+        
+        protected function handlePlayerGlobalDownloadError(event:ErrorEvent = null):void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_FLASH_PLAYER_GLOBAL_SWC, StepItem.ERROR);
+            log(_viewResourceConstants.ERROR_UNABLE_TO_DOWNLOAD_FLASH_PLAYER_SWC);
+            abortInstallation();
+        }
+        
+        protected function changeConfig(frameworksDir:File, file:File, flashPlayerVersion:String, swfVersion:String):void
+        {
+            if (isValidConfigFile(file)) {
+                var configFile:FileStream = new FileStream();
+                configFile.open(file, FileMode.READ);
+                var contents:String = configFile.readMultiByte(configFile.bytesAvailable, "utf-8");
+                var playerVersion:RegExp = /<target-player>\d\d\.\d<\/target-player>/;
+                contents = contents.replace(playerVersion, "<target-player>" + flashPlayerVersion + "<\/target-player>");
+                var playerSwfVersion:RegExp = /<swf-version>\d\d<\/swf-version>/;
+                contents = contents.replace(playerSwfVersion, "<swf-version>" + swfVersion + "<\/swf-version>" );
+                configFile.close();
+                configFile.open(file,FileMode.WRITE);
+                configFile.writeMultiByte(contents, "utf-8");
+                var copyToFile:File = frameworksDir.resolvePath(file.name);
+                configFile.close();
+                file.copyTo(copyToFile, true);
+            }
+        }
+        
+        protected function copyConfigFiles():void
+        {
+            var aborted:Boolean = false;
+            
+            updateActivityStep(_viewResourceConstants.STEP_INSTALL_CONFIG_FILES, StepItem.ACTIVE);
+            
+            try {
+                //Config files
+                var configFilesDir:File = File.userDirectory.resolvePath(_flexHome + File.separator + "ide" + File.separator + "flashbuilder" + File.separator
+                    + "config");
+                var configFiles:Array = configFilesDir.getDirectoryListing();
+                var flexHomeFrameworksDir:File = File.userDirectory.resolvePath(_flexHome + File.separator + "frameworks");
+                log(_viewResourceConstants.INFO_INSTALLING_CONFIG_FILES);
                 
-		protected function downloadAIRRuntimeKitForWindows():void {
-			updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK, StepItem.ACTIVE);
-			
-			try {
-				log(_viewResourceConstants.INFO_DOWNLOADING_AIR_RUNTIME_KIT_WINDOWS + ADOBE_AIR_SDK_WIN_URL);
-				_adobeAIRSDKZipFile = File.userDirectory.resolvePath(_flexTemp + File.separator + ADOBE_AIR_SDK_WIN_FILE);
-				copyOrDownload(ADOBE_AIR_SDK_WIN_URL, handleAIRSDKDownload, _adobeAIRSDKZipFile, handleAIRSDKDownloadError);
-			} catch (e:Error) {
-				updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK, StepItem.ERROR);
-				abortInstallation();
-			}
-		}
-		
-		protected function downloadAIRRuntimeKitForMac():void {
-			updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK, StepItem.ACTIVE);
-			
-			try {
-				log(_viewResourceConstants.INFO_DOWNLOADING_AIR_RUNTIME_KIT_MAC + ADOBE_AIR_SDK_MAC_URL);
-				_adobeAIRSDKZipFile = File.userDirectory.resolvePath(_flexTemp + File.separator + ADOBE_AIR_SDK_MAC_FILE);
-				copyOrDownload(ADOBE_AIR_SDK_MAC_URL, handleAIRSDKDownload, _adobeAIRSDKZipFile, handleAIRSDKDownloadError);
-			} catch (e:Error) {
-				updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK, StepItem.ERROR);
-				abortInstallation();
-			}
-		}
-		
-		protected function downloadAIRRuntimeKitForLinux():void {
-			updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK, StepItem.ACTIVE);
-			
-			try {
-				log(_viewResourceConstants.INFO_DOWNLOADING_AIR_RUNTIME_KIT_MAC + ADOBE_AIR_SDK_LINUX_URL);
-				_adobeAIRSDKZipFile = File.userDirectory.resolvePath(_flexTemp + File.separator + ADOBE_AIR_SDK_LINUX_FILE);
-				copyOrDownload(ADOBE_AIR_SDK_LINUX_URL, handleAIRSDKDownload, _adobeAIRSDKZipFile, handleAIRSDKDownloadError);
-			} catch (e:Error) {
-				updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK, StepItem.ERROR);
-				abortInstallation();
-			}
-		}
-		
-		protected function handleAIRSDKDownload(event:Event):void {
-			try {
-				writeFileToDirectory(_adobeAIRSDKZipFile, event.target.data);
-			} catch (e:Error) {
-				updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK, StepItem.ERROR);
-				abortInstallation();
-			}
-			
-			updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK, StepItem.COMPLETE);
-			
-			unzipAdobeAIRSDK();
-		}
-		
-		protected function handleAIRSDKDownloadError(error:* = null):void {
-			updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_ADOBE_AIR_SDK, StepItem.ERROR);
-			log(_viewResourceConstants.ERROR_UNABLE_TO_DOWNLOAD_AIR_SDK);
-			abortInstallation();
-		}
-		
-		protected function unzipAdobeAIRSDK():void {
-			updateActivityStep(_viewResourceConstants.STEP_UNZIP_AIR_RUNTIME_KIT, StepItem.ACTIVE);
-			
-			try {
-				if (_os.isWindows()) {
-					unzipAdobeAIRSDKWindows()
-				} else {
-					unzipAdobeAIRSDKMac();
-				}
-			} catch (e:Error) {
-				updateActivityStep(_viewResourceConstants.STEP_UNZIP_AIR_RUNTIME_KIT, StepItem.ERROR);
-				abortInstallation();
-			}
-		}
-		
-		protected function unzipAdobeAIRSDKWindows():void {
-			log(_viewResourceConstants.INFO_UNZIPPING + _adobeAIRSDKZipFile.nativePath);
-			unzip(_adobeAIRSDKZipFile, handleAdobeAIRSDKWinZipFileUnzipComplete, handleAdobeAIRSDKWinZipFileUnzipError);
-		}
-		
-		protected function unzipAdobeAIRSDKMac():void {
-			if (NativeProcess.isSupported) {
-				untar(_adobeAIRSDKZipFile, _flexHomeDir, handleAdobeAIRSDKMacUntarComplete, handleAdobeAIRSDKMacUntarError);
-			} else {
-				log(_viewResourceConstants.ERROR_NATIVE_PROCESS_NOT_SUPPORTED);
-				updateActivityStep(_viewResourceConstants.STEP_UNZIP_AIR_RUNTIME_KIT, StepItem.ERROR);
-			}
-		}
-		
-		protected function handleAdobeAIRSDKMacUntarError(error:ProgressEvent = null):void {
-			updateActivityStep(_viewResourceConstants.STEP_UNZIP_AIR_RUNTIME_KIT, StepItem.ERROR);
-			abortInstallation();
-		}
-		
-		protected function handleAdobeAIRSDKMacUntarComplete(event:Event):void {
-			updateActivityStep(_viewResourceConstants.STEP_UNZIP_AIR_RUNTIME_KIT, StepItem.COMPLETE);
-			log(_viewResourceConstants.INFO_FINISHED_UNTARING + _adobeAIRSDKZipFile.nativePath);
-			downloadPlayerGlobalSWC();
-		}
-		
-		protected function handleAdobeAIRSDKWinZipFileUnzipComplete(event:Event):void {
-			updateActivityStep(_viewResourceConstants.STEP_UNZIP_AIR_RUNTIME_KIT, StepItem.COMPLETE);
-			log(_viewResourceConstants.INFO_FINISHED_UNZIPPING + _adobeAIRSDKZipFile.nativePath);
-			downloadPlayerGlobalSWC();
-		}
-		
-		protected function handleAdobeAIRSDKWinZipFileUnzipError(error:ErrorEvent = null):void {
-			updateActivityStep(_viewResourceConstants.STEP_UNZIP_AIR_RUNTIME_KIT, StepItem.ERROR);
-		}
-		
-		protected function downloadPlayerGlobalSWC():void {
-			updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_FLASH_PLAYER_GLOBAL_SWC, StepItem.ACTIVE);
-			
-			try {
-				log(_viewResourceConstants.INFO_INSTALLING_PLAYERGLOBAL_SWC + ADOBE_FB_GLOBALPLAYER_SWC_URL);
-				_fbGlobalPlayerDir = createFolder(_flexHome + File.separator + "frameworks" + File.separator + "libs" + File.separator + "player"
-					+ File.separator + FLASH_PLAYER_VERSION);
-				_fbGlobalPlayerFile = File.userDirectory.resolvePath(_fbGlobalPlayerDir.nativePath + File.separator + "playerglobal.swc");
-				copyOrDownload(ADOBE_FB_GLOBALPLAYER_SWC_URL, handlePlayerGlobalDownload, _fbGlobalPlayerFile, handlePlayerGlobalDownloadError);
-			} catch (e:Error) {
-				updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_FLASH_PLAYER_GLOBAL_SWC, StepItem.ERROR);
-				abortInstallation();
-			}
-		}
-		
-		protected function handlePlayerGlobalDownload(event:Event):void {
-			try {
-				var playerGlobalFile:File = File.userDirectory.resolvePath(_fbGlobalPlayerDir.nativePath + File.separator + "playerglobal.swc");
-				writeFileToDirectory(playerGlobalFile, event.target.data);
-			} catch (e:Error) {
-				updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_FLASH_PLAYER_GLOBAL_SWC, StepItem.ERROR);
-				abortInstallation();
-			}
-			updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_FLASH_PLAYER_GLOBAL_SWC, StepItem.COMPLETE);
-			copyConfigFiles();
-		}
-		
-		protected function handlePlayerGlobalDownloadError(event:ErrorEvent = null):void {
-			updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_FLASH_PLAYER_GLOBAL_SWC, StepItem.ERROR);
-			log(_viewResourceConstants.ERROR_UNABLE_TO_DOWNLOAD_FLASH_PLAYER_SWC);
-			abortInstallation();
-		}
-		
-		protected function changeConfig(frameworksDir:File, file:File, flashPlayerVersion:String, swfVersion:String):void {
-			if (isValidConfigFile(file)) {
-				var configFile:FileStream = new FileStream();
-				configFile.open(file, FileMode.READ);
-				var contents:String = configFile.readMultiByte(configFile.bytesAvailable, "utf-8");
-				var playerVersion:RegExp = /<target-player>\d\d\.\d<\/target-player>/;
-				contents = contents.replace(playerVersion, "<target-player>" + flashPlayerVersion + "<\/target-player>");
-				var playerSwfVersion:RegExp = /<swf-version>\d\d<\/swf-version>/;
-				contents = contents.replace(playerSwfVersion, "<swf-version>" + swfVersion + "<\/swf-version>" );
-				configFile.close();
-				configFile.open(file,FileMode.WRITE);
-				configFile.writeMultiByte(contents, "utf-8");					
-				var copyToFile:File = frameworksDir.resolvePath(file.name);
-				configFile.close();
-				file.copyTo(copyToFile, true);
-			}
-		}
-		
-		protected function copyConfigFiles():void {
-			var aborted:Boolean = false;
-			
-			updateActivityStep(_viewResourceConstants.STEP_INSTALL_CONFIG_FILES, StepItem.ACTIVE);
-			
-			try {
-				//Config files
-				var configFilesDir:File = File.userDirectory.resolvePath(_flexHome + File.separator + "ide" + File.separator + "flashbuilder" + File.separator
-					+ "config");
-				var configFiles:Array = configFilesDir.getDirectoryListing();
-				var flexHomeFrameworksDir:File = File.userDirectory.resolvePath(_flexHome + File.separator + "frameworks");
-				log(_viewResourceConstants.INFO_INSTALLING_CONFIG_FILES);
-				
-				for each (var file:File in configFiles) {
-					changeConfig(flexHomeFrameworksDir, file, FLASH_PLAYER_VERSION, FLASH_PLAYER_SWF_VERSION);
-				}
-				
-				file = File.userDirectory.resolvePath(_flexHome + File.separator + "flex-sdk-description.xml");
-				var descriptionFile:FileStream = new FileStream();
-				descriptionFile.open(file, FileMode.READ);
-				var contents:String = descriptionFile.readMultiByte(descriptionFile.bytesAvailable, "utf-8");
-				var description:RegExp = /<name>[^<]*<\/name>/;
-				contents = contents.replace(description, "<name>Apache Flex " + APACHE_FLEX_BIN_DISTRO_VERSION + " FP " + FLASH_PLAYER_VERSION + " AIR " + AIR_VERSION + " en_US</name>");
-				descriptionFile.close();
-				descriptionFile.open(file,FileMode.WRITE);
-				descriptionFile.writeMultiByte(contents, "utf-8");
-				descriptionFile.close();
-			} catch (e:Error) {
-				updateActivityStep(_viewResourceConstants.STEP_INSTALL_CONFIG_FILES, StepItem.ERROR);
-				log(_viewResourceConstants.ERROR_UNABLE_TO_INSTALL_CONFIG_FILES);
-				abortInstallation();
-				aborted = true;
-			}
-			
-			if (!aborted) {
-				updateActivityStep(_viewResourceConstants.STEP_INSTALL_CONFIG_FILES, StepItem.COMPLETE);
-				downloadSwfObject();
-			}
-		}
-		
-		protected function downloadSwfObject():void {
-			updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_SWFOBJECT, StepItem.ACTIVE);
-			
-			try {
-				log(StringUtil.substitute(_viewResourceConstants.INFO_DOWNLOADING_FILE_FROM, [SWF_OBJECT_FILE, SWF_OBJECT_URL]));
-				copyOrDownload(SWF_OBJECT_URL + SWF_OBJECT_FILE, handlSWFObjectDownload, null, handleSWFObjectDownloadError);
-			} catch (e:Error) {
-				updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_SWFOBJECT, StepItem.ERROR);
-				abortInstallation();
-			}
-		}
-		
-		protected function handlSWFObjectDownload(event:Event):void {
-			log(_viewResourceConstants.INFO_DOWNLOADED);
-			var swfObjectZipFile:File = File.userDirectory.resolvePath(_flexTemp + File.separator + SWF_OBJECT_FILE);
-			writeFileToDirectory(swfObjectZipFile, event.target.data);
-			unzip(swfObjectZipFile, handleSWFObjectUnzipComplete, handleSWFObjectZipFileUnzipError);
-		}
-		
-		protected function handleSWFObjectDownloadError(event:ErrorEvent = null):void {
-			updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_SWFOBJECT, StepItem.ERROR);
-			log(_viewResourceConstants.ERROR_UNABLE_TO_DOWNLOAD_SWF_OBJECT);
-			abortInstallation();
-		}
-		
-		protected function handleSWFObjectUnzipComplete(event:Event):void {
-			try {
-				var expressInstallFile:File = File.userDirectory.resolvePath(_flexHome + File.separator + "swfobject" + File.separator + "expressInstall.swf");
-				expressInstallFile.copyTo(_flexHomeDir.resolvePath("templates" + File.separator + "swfobject" + File.separator + "expressInstall.swf"));
-				
-				var swfObjectJSFile:File = File.userDirectory.resolvePath(_flexHome + File.separator + "swfobject" + File.separator + "swfobject.js");
-				swfObjectJSFile.copyTo(_flexHomeDir.resolvePath("templates" + File.separator + "swfobject" + File.separator + "swfobject.js"));
-				
-				swfObjectJSFile.copyTo(_flexHomeDir.resolvePath("javascript" + File.separator + "FABridge" + File.separator + "samples" + File.separator
-					+ "fabridge" + File.separator + "swfobject" + File.separator + "swfobject.js"));
-				
-				var swfObjectDir:File = _flexHomeDir.resolvePath("swfobject");
-				swfObjectDir.deleteDirectory(true);
-				
-				updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_SWFOBJECT, StepItem.COMPLETE);
-				installOSMF();
-				
-			} catch (e:Error) {
-				updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_SWFOBJECT, StepItem.ERROR);
-				log(_viewResourceConstants.ERROR_UNABLE_TO_DOWNLOAD_SWF_OBJECT);
-				abortInstallation();
-			}
-			
-		}
-		
-		protected function handleSWFObjectZipFileUnzipError(event:Event):void {
-			updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_SWFOBJECT, StepItem.ERROR);
-			log(_viewResourceConstants.ERROR_UNABLE_TO_DOWNLOAD_SWF_OBJECT);
-			abortInstallation();
-		}
-		
-		protected function installNextOptionalComponent():void {
-			for each (var obj:InstallerComponentVO in _installerComponentsDataProvider) {
-				if (obj.selected && !obj.installed && !obj.aborted) {
-					switch (obj.label) {
-						case _viewResourceConstants.STEP_OPTIONAL_INSTALL_BLAZEDS:
-						{
-							installBlazeDS();
-							return;
-							break;
-						}
-						case _viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF:
-						{
-							installFontSwf();
-							return;
-							break;
-						}
-						default:
-						{
-							break;
-						}
-					}
-				}
-			}
-			checkAndHandleAllOptionalComponentsInstalled();
-		}
-		
-		protected function installBlazeDS():void {
-			updateActivityStep(_viewResourceConstants.STEP_OPTIONAL_INSTALL_BLAZEDS, StepItem.ACTIVE);
-			log(StringUtil.substitute(_viewResourceConstants.INFO_DOWNLOADING_FILE_FROM, [BLAZEDS_FILE, BLAZEDS_URL]));
-			_blazeDSJarFile = File.userDirectory.resolvePath(_flexTemp + File.separator + BLAZEDS_FILE);
-			copyOrDownload(BLAZEDS_URL + BLAZEDS_FILE, handleBlazeDSDownloadComplete, null, handleBlazeDSInstallError);
-		}
-		
-		protected function handleBlazeDSDownloadComplete(event:Event):void {
-			try {
-				writeFileToDirectory(_blazeDSJarFile, event.target.data);
-				copyFileToOptionalLibDir(_blazeDSJarFile);
-				updateOptionalComponentInstallStatus(_viewResourceConstants.STEP_OPTIONAL_INSTALL_BLAZEDS, true);
-				updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_OPTIONAL_INSTALL_BLAZEDS, false);
-				updateActivityStep(_viewResourceConstants.STEP_OPTIONAL_INSTALL_BLAZEDS, StepItem.COMPLETE);
-				clearData(URLLoader(event.target));
-				installNextOptionalComponent();
-			} catch (e:Error) {
-				updateActivityStep(_viewResourceConstants.STEP_OPTIONAL_INSTALL_BLAZEDS, StepItem.ERROR);
-				updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_OPTIONAL_INSTALL_BLAZEDS, true);
-				installNextOptionalComponent();
-			}
-		}
-		
-		protected function installFontSwf():void {
-			updateActivityStep(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, StepItem.ACTIVE);
-			downloadFontSwfAFEFile();
-		}
-		
-		protected function downloadFontSwfAFEFile():void {
-			log(StringUtil.substitute(_viewResourceConstants.INFO_DOWNLOADING_FILE_FROM, [AFE_FILE, AFE_URL]));
-			_afeJarFile = File.userDirectory.resolvePath(_flexTemp + File.separator + AFE_FILE);
-			copyOrDownload(AFE_URL + AFE_FILE, handleFontSWFAFEFileDownloaded, null, handleFontSWFInstallError);
-		}
-		
-		protected function handleFontSWFAFEFileDownloaded(event:Event):void {
-			try {
-				writeFileToDirectory(_afeJarFile, event.target.data);
-				copyFileToOptionalLibDir(_afeJarFile);
-				clearData(URLLoader(event.target));
-				
-				downloadFontSwfAGLFile();
-				
-			} catch (e:Error) {
-				updateActivityStep(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, StepItem.ERROR);
-				updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, true);
-				installNextOptionalComponent();
-			}
-		}
-		
-		protected function downloadFontSwfAGLFile():void {
-			log(StringUtil.substitute(_viewResourceConstants.INFO_DOWNLOADING_FILE_FROM, [AGLJ40_FILE, AGLJ40_URL]));
-			_aglj40JarFile = File.userDirectory.resolvePath(_flexTemp + File.separator + AGLJ40_FILE);
-			copyOrDownload(AGLJ40_URL + AGLJ40_FILE, handleFontSWFAGLFileDownloaded, null, handleFontSWFInstallError);
-		}
-		
-		protected function handleFontSWFAGLFileDownloaded(event:Event):void {
-			try {
-				writeFileToDirectory(_aglj40JarFile, event.target.data);
-				copyFileToOptionalLibDir(_aglj40JarFile);
-				clearData(URLLoader(event.target));
-				
-				downloadFontSwfFlexFontKitFile();
-			} catch (e:Error) {
-				updateActivityStep(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, StepItem.ERROR);
-				updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, true);
-				installNextOptionalComponent();
-			}
-		}
-		
-		protected function downloadFontSwfFlexFontKitFile():void {
-			log(StringUtil.substitute(_viewResourceConstants.INFO_DOWNLOADING_FILE_FROM, [FLEX_FONTKIT_FILE, FLEX_FONTKIT_URL]));
-			_flexFontKitJarFile = File.userDirectory.resolvePath(_flexTemp + File.separator + FLEX_FONTKIT_FILE);
-			copyOrDownload(FLEX_FONTKIT_URL + FLEX_FONTKIT_FILE, handleFontSWFFlexFontKitFileDownloaded, null, handleFontSWFInstallError);
-		}
-		
-		protected function handleFontSWFFlexFontKitFileDownloaded(event:Event):void {
-			try {
-				writeFileToDirectory(_flexFontKitJarFile, event.target.data);
-				copyFileToOptionalLibDir(_flexFontKitJarFile);
-				clearData(URLLoader(event.target));
-				
-				downloadFontSwfRideauKitFile();
-			} catch (e:Error) {
-				updateActivityStep(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, StepItem.ERROR);
-				updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, true);
-				installNextOptionalComponent();
-			}
-		}
-		
-		protected function downloadFontSwfRideauKitFile():void {
-			log(StringUtil.substitute(_viewResourceConstants.INFO_DOWNLOADING_FILE_FROM, [RIDEAU_FILE, RIDEAU_URL]));
-			_rideauJarFile = File.userDirectory.resolvePath(_flexTemp + File.separator + RIDEAU_FILE);
-			copyOrDownload(RIDEAU_URL + RIDEAU_FILE, handleFontSWFRideauFileDownloaded, null, handleFontSWFInstallError);
-		}
-		
-		protected function handleFontSWFRideauFileDownloaded(event:Event):void {
-			try {
-				writeFileToDirectory(_rideauJarFile, event.target.data);
-				copyFileToOptionalLibDir(_rideauJarFile);
-				clearData(URLLoader(event.target));
-				
-				updateOptionalComponentInstallStatus(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, true);
-				updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, false);
-				updateActivityStep(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, StepItem.COMPLETE);
-				installNextOptionalComponent();
-			} catch (e:Error) {
-				updateActivityStep(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, StepItem.ERROR);
-				updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, true);
-				installNextOptionalComponent();
-			}
-		}
-		
-		protected function installOSMF():void {
-			updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, StepItem.ACTIVE);
-			downloadOSMFFile();
-		}
-		
-		protected function downloadOSMFFile():void {
-			_osmfSWFFile = File.userDirectory.resolvePath(_flexTemp + File.separator + OSMF_SWF_FILE.toLowerCase());
-			
-			log(StringUtil.substitute(_viewResourceConstants.INFO_DOWNLOADING_FILE_FROM, [OSMF_SWC_FILE, OSMF_SWC_URL]));
-			_osmfSWCFile = File.userDirectory.resolvePath(_flexTemp + File.separator + OSMF_SWC_FILE.toLowerCase());
-			if(_useOSMF2)
-			{
-				downloadOSMF2SWC();
-			}
-			else
-			{
-				copyOrDownload(OSMF_SWC_URL + OSMF_SWC_FILE,handleOSMFSWCFileDownloaded,null,handleOSMFSWCInstallError);
-			}
-		}
-		
-		protected function downloadOSMF2SWC():void
-		{
+                for each (var file:File in configFiles) {
+                    changeConfig(flexHomeFrameworksDir, file, FLASH_PLAYER_VERSION, FLASH_PLAYER_SWF_VERSION);
+                }
+                
+                file = File.userDirectory.resolvePath(_flexHome + File.separator + "flex-sdk-description.xml");
+                var descriptionFile:FileStream = new FileStream();
+                descriptionFile.open(file, FileMode.READ);
+                var contents:String = descriptionFile.readMultiByte(descriptionFile.bytesAvailable, "utf-8");
+                var description:RegExp = /<name>[^<]*<\/name>/;
+                contents = contents.replace(description, "<name>Apache Flex " + APACHE_FLEX_BIN_DISTRO_VERSION + " FP " + FLASH_PLAYER_VERSION + " AIR " + AIR_VERSION + " en_US</name>");
+                descriptionFile.close();
+                descriptionFile.open(file,FileMode.WRITE);
+                descriptionFile.writeMultiByte(contents, "utf-8");
+                descriptionFile.close();
+            } catch (e:Error) {
+                updateActivityStep(_viewResourceConstants.STEP_INSTALL_CONFIG_FILES, StepItem.ERROR);
+                log(_viewResourceConstants.ERROR_UNABLE_TO_INSTALL_CONFIG_FILES);
+                abortInstallation();
+                aborted = true;
+            }
+            
+            if (!aborted) {
+                updateActivityStep(_viewResourceConstants.STEP_INSTALL_CONFIG_FILES, StepItem.COMPLETE);
+                downloadSwfObject();
+            }
+        }
+        
+        protected function downloadSwfObject():void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_SWFOBJECT, StepItem.ACTIVE);
+            
+            try {
+                log(StringUtil.substitute(_viewResourceConstants.INFO_DOWNLOADING_FILE_FROM, [SWF_OBJECT_FILE, SWF_OBJECT_URL]));
+                copyOrDownload(SWF_OBJECT_URL + SWF_OBJECT_FILE, handlSWFObjectDownload, null, handleSWFObjectDownloadError);
+            } catch (e:Error) {
+                updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_SWFOBJECT, StepItem.ERROR);
+                abortInstallation();
+            }
+        }
+        
+        protected function handlSWFObjectDownload(event:Event):void
+        {
+            log(_viewResourceConstants.INFO_DOWNLOADED);
+            var swfObjectZipFile:File = File.userDirectory.resolvePath(_flexTemp + File.separator + SWF_OBJECT_FILE);
+            writeFileToDirectory(swfObjectZipFile, event.target.data);
+            unzip(swfObjectZipFile, handleSWFObjectUnzipComplete, handleSWFObjectZipFileUnzipError);
+        }
+        
+        protected function handleSWFObjectDownloadError(event:ErrorEvent = null):void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_SWFOBJECT, StepItem.ERROR);
+            log(_viewResourceConstants.ERROR_UNABLE_TO_DOWNLOAD_SWF_OBJECT);
+            abortInstallation();
+        }
+        
+        protected function handleSWFObjectUnzipComplete(event:Event):void
+        {
+            try {
+                var expressInstallFile:File = File.userDirectory.resolvePath(_flexHome + File.separator + "swfobject" + File.separator + "expressInstall.swf");
+                expressInstallFile.copyTo(_flexHomeDir.resolvePath("templates" + File.separator + "swfobject" + File.separator + "expressInstall.swf"));
+                
+                var swfObjectJSFile:File = File.userDirectory.resolvePath(_flexHome + File.separator + "swfobject" + File.separator + "swfobject.js");
+                swfObjectJSFile.copyTo(_flexHomeDir.resolvePath("templates" + File.separator + "swfobject" + File.separator + "swfobject.js"));
+                
+                swfObjectJSFile.copyTo(_flexHomeDir.resolvePath("javascript" + File.separator + "FABridge" + File.separator + "samples" + File.separator
+                    + "fabridge" + File.separator + "swfobject" + File.separator + "swfobject.js"));
+                
+                var swfObjectDir:File = _flexHomeDir.resolvePath("swfobject");
+                swfObjectDir.deleteDirectory(true);
+                
+                updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_SWFOBJECT, StepItem.COMPLETE);
+                installOSMF();
+                
+            } catch (e:Error) {
+                updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_SWFOBJECT, StepItem.ERROR);
+                log(_viewResourceConstants.ERROR_UNABLE_TO_DOWNLOAD_SWF_OBJECT);
+                abortInstallation();
+            }
+            
+        }
+        
+        protected function handleSWFObjectZipFileUnzipError(event:Event):void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_SWFOBJECT, StepItem.ERROR);
+            log(_viewResourceConstants.ERROR_UNABLE_TO_DOWNLOAD_SWF_OBJECT);
+            abortInstallation();
+        }
+        
+        protected function installNextOptionalComponent():void
+        {
+            for each (var obj:InstallerComponentVO in _installerComponentsDataProvider) {
+                if (obj.selected && !obj.installed && !obj.aborted) {
+                    switch (obj.label) {
+                        case _viewResourceConstants.STEP_OPTIONAL_INSTALL_BLAZEDS:
+                        {
+                            installBlazeDS();
+                            return;
+                            break;
+                        }
+                        case _viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF:
+                        {
+                            installFontSwf();
+                            return;
+                            break;
+                        }
+                        default:
+                        {
+                            break;
+                        }
+                    }
+                }
+            }
+            checkAndHandleAllOptionalComponentsInstalled();
+        }
+        
+        protected function installBlazeDS():void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_OPTIONAL_INSTALL_BLAZEDS, StepItem.ACTIVE);
+            log(StringUtil.substitute(_viewResourceConstants.INFO_DOWNLOADING_FILE_FROM, [BLAZEDS_FILE, BLAZEDS_URL]));
+            _blazeDSJarFile = File.userDirectory.resolvePath(_flexTemp + File.separator + BLAZEDS_FILE);
+            copyOrDownload(BLAZEDS_URL + BLAZEDS_FILE, handleBlazeDSDownloadComplete, null, handleBlazeDSInstallError);
+        }
+        
+        protected function handleBlazeDSDownloadComplete(event:Event):void
+        {
+            try {
+                writeFileToDirectory(_blazeDSJarFile, event.target.data);
+                copyFileToOptionalLibDir(_blazeDSJarFile);
+                updateOptionalComponentInstallStatus(_viewResourceConstants.STEP_OPTIONAL_INSTALL_BLAZEDS, true);
+                updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_OPTIONAL_INSTALL_BLAZEDS, false);
+                updateActivityStep(_viewResourceConstants.STEP_OPTIONAL_INSTALL_BLAZEDS, StepItem.COMPLETE);
+                clearData(URLLoader(event.target));
+                installNextOptionalComponent();
+            } catch (e:Error) {
+                updateActivityStep(_viewResourceConstants.STEP_OPTIONAL_INSTALL_BLAZEDS, StepItem.ERROR);
+                updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_OPTIONAL_INSTALL_BLAZEDS, true);
+                installNextOptionalComponent();
+            }
+        }
+        
+        protected function installFontSwf():void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, StepItem.ACTIVE);
+            downloadFontSwfAFEFile();
+        }
+        
+        protected function downloadFontSwfAFEFile():void
+        {
+            log(StringUtil.substitute(_viewResourceConstants.INFO_DOWNLOADING_FILE_FROM, [AFE_FILE, AFE_URL]));
+            _afeJarFile = File.userDirectory.resolvePath(_flexTemp + File.separator + AFE_FILE);
+            copyOrDownload(AFE_URL + AFE_FILE, handleFontSWFAFEFileDownloaded, null, handleFontSWFInstallError);
+        }
+        
+        protected function handleFontSWFAFEFileDownloaded(event:Event):void
+        {
+            try {
+                writeFileToDirectory(_afeJarFile, event.target.data);
+                copyFileToOptionalLibDir(_afeJarFile);
+                clearData(URLLoader(event.target));
+                
+                downloadFontSwfAGLFile();
+                
+            } catch (e:Error) {
+                updateActivityStep(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, StepItem.ERROR);
+                updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, true);
+                installNextOptionalComponent();
+            }
+        }
+        
+        protected function downloadFontSwfAGLFile():void
+        {
+            log(StringUtil.substitute(_viewResourceConstants.INFO_DOWNLOADING_FILE_FROM, [AGLJ40_FILE, AGLJ40_URL]));
+            _aglj40JarFile = File.userDirectory.resolvePath(_flexTemp + File.separator + AGLJ40_FILE);
+            copyOrDownload(AGLJ40_URL + AGLJ40_FILE, handleFontSWFAGLFileDownloaded, null, handleFontSWFInstallError);
+        }
+        
+        protected function handleFontSWFAGLFileDownloaded(event:Event):void
+        {
+            try {
+                writeFileToDirectory(_aglj40JarFile, event.target.data);
+                copyFileToOptionalLibDir(_aglj40JarFile);
+                clearData(URLLoader(event.target));
+                
+                downloadFontSwfFlexFontKitFile();
+            } catch (e:Error) {
+                updateActivityStep(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, StepItem.ERROR);
+                updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, true);
+                installNextOptionalComponent();
+            }
+        }
+        
+        protected function downloadFontSwfFlexFontKitFile():void
+        {
+            log(StringUtil.substitute(_viewResourceConstants.INFO_DOWNLOADING_FILE_FROM, [FLEX_FONTKIT_FILE, FLEX_FONTKIT_URL]));
+            _flexFontKitJarFile = File.userDirectory.resolvePath(_flexTemp + File.separator + FLEX_FONTKIT_FILE);
+            copyOrDownload(FLEX_FONTKIT_URL + FLEX_FONTKIT_FILE, handleFontSWFFlexFontKitFileDownloaded, null, handleFontSWFInstallError);
+        }
+        
+        protected function handleFontSWFFlexFontKitFileDownloaded(event:Event):void
+        {
+            try {
+                writeFileToDirectory(_flexFontKitJarFile, event.target.data);
+                copyFileToOptionalLibDir(_flexFontKitJarFile);
+                clearData(URLLoader(event.target));
+                
+                downloadFontSwfRideauKitFile();
+            } catch (e:Error) {
+                updateActivityStep(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, StepItem.ERROR);
+                updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, true);
+                installNextOptionalComponent();
+            }
+        }
+        
+        protected function downloadFontSwfRideauKitFile():void
+        {
+            log(StringUtil.substitute(_viewResourceConstants.INFO_DOWNLOADING_FILE_FROM, [RIDEAU_FILE, RIDEAU_URL]));
+            _rideauJarFile = File.userDirectory.resolvePath(_flexTemp + File.separator + RIDEAU_FILE);
+            copyOrDownload(RIDEAU_URL + RIDEAU_FILE, handleFontSWFRideauFileDownloaded, null, handleFontSWFInstallError);
+        }
+        
+        protected function handleFontSWFRideauFileDownloaded(event:Event):void
+        {
+            try {
+                writeFileToDirectory(_rideauJarFile, event.target.data);
+                copyFileToOptionalLibDir(_rideauJarFile);
+                clearData(URLLoader(event.target));
+                
+                updateOptionalComponentInstallStatus(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, true);
+                updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, false);
+                updateActivityStep(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, StepItem.COMPLETE);
+                installNextOptionalComponent();
+            } catch (e:Error) {
+                updateActivityStep(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, StepItem.ERROR);
+                updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, true);
+                installNextOptionalComponent();
+            }
+        }
+        
+        protected function installOSMF():void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, StepItem.ACTIVE);
+            downloadOSMFFile();
+        }
+        
+        protected function downloadOSMFFile():void
+        {
+            _osmfSWFFile = File.userDirectory.resolvePath(_flexTemp + File.separator + OSMF_SWF_FILE.toLowerCase());
+            
+            log(StringUtil.substitute(_viewResourceConstants.INFO_DOWNLOADING_FILE_FROM, [OSMF_SWC_FILE, OSMF_SWC_URL]));
+            _osmfSWCFile = File.userDirectory.resolvePath(_flexTemp + File.separator + OSMF_SWC_FILE.toLowerCase());
+            if(_useOSMF2)
+            {
+                downloadOSMF2SWC();
+            }
+            else
+            {
+                copyOrDownload(OSMF_SWC_URL + OSMF_SWC_FILE,handleOSMFSWCFileDownloaded,null,handleOSMFSWCInstallError);
+            }
+        }
+        
+        protected function downloadOSMF2SWC():void
+        {
             var url:String;
-			var httpService:HTTPService = new HTTPService();
-			httpService.resultFormat = HTTPService.RESULT_FORMAT_TEXT;
-			url = httpService.url = Constants.SOURCEFORGE_DOWNLOAD_URL + OSMF_SWC_URL + OSMF_SWC_FILE;
+            var httpService:HTTPService = new HTTPService();
+            httpService.resultFormat = HTTPService.RESULT_FORMAT_TEXT;
+            url = httpService.url = Constants.SOURCEFORGE_DOWNLOAD_URL + OSMF_SWC_URL + OSMF_SWC_FILE;
             if (usingDownloadCache)
             {
                 var cacheURL:String;
@@ -2051,55 +2253,56 @@
                     // that should find the slash after the server.
                     cacheURL = url.substr(c + 1);
                     if (debugMode)
-                        log("http caching.  url = " + cacheURL);                        
+                        log("http caching.  url = " + cacheURL);
                 }
                 var cacheFile:File = File.applicationStorageDirectory.resolvePath(downloadCacheFolder);
                 cacheFile = cacheFile.resolvePath(escape(cacheURL));
                 if (debugMode)
-                    log("searching cache for " + cacheFile.url);                        
+                    log("searching cache for " + cacheFile.url);
                 if (cacheFile.exists)
                 {
                     if (debugMode)
-                        log("found file in cache");                        
+                        log("found file in cache");
                     url = cacheFile.url;
                     actuallyDownloadOSMF2SWC(new URLRequest(url));
                     return;
                 }
             }
-			httpService.addEventListener(ResultEvent.RESULT, getMirrorInfo);
-			httpService.addEventListener(FaultEvent.FAULT, handleOSMFSWCUnzipError);
-			httpService.send();
-		}
-		
-		protected function getMirrorInfo(event:ResultEvent):void
-		{
-			var mirror:String = String(event.result);
-			mirror = mirror.substr(mirror.indexOf('use_mirror=') + 'use_mirror='.length, mirror.length);
-			mirror = mirror.substring(0, mirror.indexOf('">'));
-			
-			var mirrorURL:String = 'http://' + mirror + Constants.SOURCEFORGE_DL_URL + OSMF_SWC_URL + OSMF_SWC_FILE;
-			var refererURL:String = Constants.SOURCEFORGE_DOWNLOAD_URL + OSMF_SWC_URL + '/download?use_mirror=' + mirror;
-			
-			var req:URLRequest = new URLRequest(mirrorURL);
-			req.requestHeaders = [ new URLRequestHeader('Referer', refererURL) ];
-			
+            httpService.addEventListener(ResultEvent.RESULT, getMirrorInfo);
+            httpService.addEventListener(FaultEvent.FAULT, handleOSMFSWCUnzipError);
+            httpService.send();
+        }
+        
+        protected function getMirrorInfo(event:ResultEvent):void
+        {
+            var mirror:String = String(event.result);
+            mirror = mirror.substr(mirror.indexOf('use_mirror=') + 'use_mirror='.length, mirror.length);
+            mirror = mirror.substring(0, mirror.indexOf('">'));
+            
+            var mirrorURL:String = 'http://' + mirror + Constants.SOURCEFORGE_DL_URL + OSMF_SWC_URL + OSMF_SWC_FILE;
+            var refererURL:String = Constants.SOURCEFORGE_DOWNLOAD_URL + OSMF_SWC_URL + '/download?use_mirror=' + mirror;
+            
+            var req:URLRequest = new URLRequest(mirrorURL);
+            req.requestHeaders = [ new URLRequestHeader('Referer', refererURL) ];
+            
             actuallyDownloadOSMF2SWC(req);
         }
         
         protected function actuallyDownloadOSMF2SWC(req:URLRequest):void
         {
-			loader = new URLLoader();
-			loader.dataFormat = URLLoaderDataFormat.BINARY;
+            loader = new URLLoader();
+            loader.dataFormat = URLLoaderDataFormat.BINARY;
             if (usingDownloadCache)
                 loader.addEventListener(Event.COMPLETE, cacheOSMF2SWC);
-			loader.addEventListener(Event.COMPLETE, handleOSMFSWCFileDownloaded);
-			loader.addEventListener(ErrorEvent.ERROR, handleOSMFSWCInstallError);
-			loader.addEventListener(IOErrorEvent.IO_ERROR, handleOSMFSWCInstallError);
-			
-			loader.load(req);
-		}
-		
-        protected function cacheOSMF2SWC(event:Event):void {
+            loader.addEventListener(Event.COMPLETE, handleOSMFSWCFileDownloaded);
+            loader.addEventListener(ErrorEvent.ERROR, handleOSMFSWCInstallError);
+            loader.addEventListener(IOErrorEvent.IO_ERROR, handleOSMFSWCInstallError);
+            
+            loader.load(req);
+        }
+        
+        protected function cacheOSMF2SWC(event:Event):void
+        {
             var url:String;
             url  = Constants.SOURCEFORGE_DOWNLOAD_URL + OSMF_SWC_URL + OSMF_SWC_FILE;
             var cacheURL:String;
@@ -2111,14 +2314,14 @@
                 // that should find the slash after the server.
                 cacheURL = url.substr(c + 1);
                 if (debugMode)
-                    log("http caching.  url = " + cacheURL);                        
+                    log("http caching.  url = " + cacheURL);
             }
             if (cacheURL)
             {
                 var cacheFile:File = File.applicationStorageDirectory.resolvePath(downloadCacheFolder);
                 cacheFile = cacheFile.resolvePath(escape(cacheURL));
                 if (debugMode)
-                    log("caching " + cacheFile.url);                        
+                    log("caching " + cacheFile.url);
                 if (!cacheFile.exists)
                 {
                     var fs:FileStream = new FileStream();
@@ -2134,341 +2337,377 @@
                 else
                 {
                     if (debugMode)
-                        log("file was already in cache");                        
+                        log("file was already in cache");
                 }
             }
         }
         
-		protected function handleOSMFSWCFileDownloaded(event:Event):void {
-			try {
-				writeFileToDirectory(_osmfSWCFile, event.target.data);
-				copyFileToLibDir(_osmfSWCFile);
-				unzip(_osmfSWCFile,handleOSMFSWCUnzipped,handleOSMFSWCUnzipError);
-				clearData(URLLoader(event.target));
-				
-				updateOptionalComponentInstallStatus(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, true);
-				updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, false);
-				updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, StepItem.COMPLETE);
-				installNextOptionalComponent();
-			} catch (e:Error) {
-				updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, StepItem.ERROR);
-				updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, true);
-				abortInstallation();
-			}
-		}
-		
-		/**
-		 * Unzip osmf.swc, extract library.swf from it and copy it into frameworks/rsls/osmf_<flexversion>.<buildnumber>
-		 * Delete other files extracted from osmf.swc
-		 */
-		protected function handleOSMFSWCUnzipped(event:Event):void
-		{
-			try {
-				var osmfFileName:String =  "osmf_" + getFlexVersionBuildString() + ".swf";
-				var copyToFile:File = _flexHomeDir.resolvePath("frameworks" + File.separator + "rsls" + File.separator + osmfFileName);
-				var osmfLibrarySwfFile:File = _flexHomeDir.resolvePath("library.swf");
-				osmfLibrarySwfFile.moveTo(copyToFile);
-				var catalogXMLFile:File = _flexHomeDir.resolvePath("catalog.xml");
-				if(catalogXMLFile.exists)
-				{
-					catalogXMLFile.deleteFile();
-				}
-				var manifestXMLFile:File = _flexHomeDir.resolvePath("manifest.xml");
-				if(manifestXMLFile.exists)
-				{
-					manifestXMLFile.deleteFile();
-				}
-			}
-			catch (e:Error) {
-				updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, StepItem.ERROR);
-				updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, true);
-				abortInstallation();
-			}
-		}
-		
-		protected function handleOSMFSWCUnzipError(event:Event):void
-		{
-			updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, StepItem.ERROR);
-			updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, true);
-			abortInstallation();
-		}
-		
-		protected function copyFileToOptionalLibDir(file:File):void {
-			//Copy to "${FLEX_HOME}/lib/external/optional"
-			var copyToFile:File = _flexHomeDir.resolvePath("lib" + File.separator + "external" + File.separator + "optional" + File.separator + file.name);
-			file.copyTo(copyToFile, true);
-		}
-		
-		protected function copyFileToLibDir(file:File):void {
-			//Copy to "${FLEX_HOME}/frameworks/libs/"
-			var copyToFile:File = _flexHomeDir.resolvePath("frameworks" + File.separator + "libs" + File.separator + file.name);
-			file.copyTo(copyToFile, true);
-		}
-		
-		protected function handleBlazeDSInstallError(event:* = null):void {
-			updateActivityStep(_viewResourceConstants.STEP_OPTIONAL_INSTALL_BLAZEDS, StepItem.ERROR);
-			updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_OPTIONAL_INSTALL_BLAZEDS, true);
-			log(StringUtil.substitute(_viewResourceConstants.ERROR_UNABLE_TO_DOWNLOAD_FILE, ["BlazeDS"]));
-			installNextOptionalComponent();
-		}
-		
-		protected function handleFontSWFInstallError(event:* = null):void {
-			updateActivityStep(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, StepItem.ERROR);
-			updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, true);
-			log(StringUtil.substitute(_viewResourceConstants.ERROR_UNABLE_TO_DOWNLOAD_FILE, ["FontSwf Utility"]));
-			installNextOptionalComponent();
-		}
-		
-		protected function handleOSMFSWFInstallError(event:* = null):void {
-			updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, StepItem.ERROR);
-			updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, true);
-			log(StringUtil.substitute(_viewResourceConstants.ERROR_UNABLE_TO_DOWNLOAD_FILE, ["OSMF_SWF"]));
-			installNextOptionalComponent();
-		}
-		
-		protected function handleOSMFSWCInstallError(event:* = null):void {
-			updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, StepItem.ERROR);
-			updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, true);
-			log(StringUtil.substitute(_viewResourceConstants.ERROR_UNABLE_TO_DOWNLOAD_FILE, ["OSMF_SWC"]));
-			installNextOptionalComponent();
-		}
-		
-		protected function updateOptionalComponentInstallStatus(label:String, isInstalled:Boolean):void {
-			for each (var obj:InstallerComponentVO in _installerComponentsDataProvider) {
-				if (obj.label == label) {
-					obj.installed = isInstalled;
-				}
-			}
-		}
-		
-		protected function updateOptionalComponentInstallStatusAborted(label:String, isAborted:Boolean):void {
-			for each (var obj:InstallerComponentVO in _installerComponentsDataProvider) {
-				if (obj.label == label) {
-					obj.aborted = isAborted;
-				}
-			}
-		}
-		
-		protected function checkAndHandleAllOptionalComponentsInstalled():void {
-			var allComponentsInstalled:Boolean = true;
-			for each (var obj:InstallerComponentVO in _installerComponentsDataProvider) {
-				if (!obj.required && obj.selected && !(obj.installed || obj.aborted)) {
-					allComponentsInstalled = false;
-				}
-			}
-			if (allComponentsInstalled) {
-				tracker.trackInstallerSuccess(APACHE_FLEX_BIN_DISTRO_VERSION_DISPLAY, APACHE_FLEX_BIN_DISTRO_VERSION, _os.os);
-				cleanup(false);
-			}
-		}
-		
-		protected function cleanup(isAbort:Boolean = false, abortInfo:String = ""):void {
-			if (cleanedUp)
-				return;
-				
-			cleanedUp = true;
-			
+        protected function handleOSMFSWCFileDownloaded(event:Event):void
+        {
+            try {
+                writeFileToDirectory(_osmfSWCFile, event.target.data);
+                copyFileToLibDir(_osmfSWCFile);
+                unzip(_osmfSWCFile,handleOSMFSWCUnzipped,handleOSMFSWCUnzipError);
+                clearData(URLLoader(event.target));
+                
+                updateOptionalComponentInstallStatus(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, true);
+                updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, false);
+                updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, StepItem.COMPLETE);
+                installNextOptionalComponent();
+            } catch (e:Error) {
+                updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, StepItem.ERROR);
+                updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, true);
+                abortInstallation();
+            }
+        }
+        
+        /**
+         * Unzip osmf.swc, extract library.swf from it and copy it into frameworks/rsls/osmf_<flexversion>.<buildnumber>
+         * Delete other files extracted from osmf.swc
+         */
+        protected function handleOSMFSWCUnzipped(event:Event):void
+        {
+            try {
+                var osmfFileName:String =  "osmf_" + getFlexVersionBuildString() + ".swf";
+                var copyToFile:File = _flexHomeDir.resolvePath("frameworks" + File.separator + "rsls" + File.separator + osmfFileName);
+                var osmfLibrarySwfFile:File = _flexHomeDir.resolvePath("library.swf");
+                osmfLibrarySwfFile.moveTo(copyToFile);
+                var catalogXMLFile:File = _flexHomeDir.resolvePath("catalog.xml");
+                if(catalogXMLFile.exists)
+                {
+                    catalogXMLFile.deleteFile();
+                }
+                var manifestXMLFile:File = _flexHomeDir.resolvePath("manifest.xml");
+                if(manifestXMLFile.exists)
+                {
+                    manifestXMLFile.deleteFile();
+                }
+            }
+            catch (e:Error) {
+                updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, StepItem.ERROR);
+                updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, true);
+                abortInstallation();
+            }
+        }
+        
+        protected function handleOSMFSWCUnzipError(event:Event):void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, StepItem.ERROR);
+            updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, true);
+            abortInstallation();
+        }
+        
+        protected function copyFileToOptionalLibDir(file:File):void
+        {
+            //Copy to "${FLEX_HOME}/lib/external/optional"
+            var copyToFile:File = _flexHomeDir.resolvePath("lib" + File.separator + "external" + File.separator + "optional" + File.separator + file.name);
+            file.copyTo(copyToFile, true);
+        }
+        
+        protected function copyFileToLibDir(file:File):void
+        {
+            //Copy to "${FLEX_HOME}/frameworks/libs/"
+            var copyToFile:File = _flexHomeDir.resolvePath("frameworks" + File.separator + "libs" + File.separator + file.name);
+            file.copyTo(copyToFile, true);
+        }
+        
+        protected function handleBlazeDSInstallError(event:* = null):void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_OPTIONAL_INSTALL_BLAZEDS, StepItem.ERROR);
+            updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_OPTIONAL_INSTALL_BLAZEDS, true);
+            log(StringUtil.substitute(_viewResourceConstants.ERROR_UNABLE_TO_DOWNLOAD_FILE, ["BlazeDS"]));
+            installNextOptionalComponent();
+        }
+        
+        protected function handleFontSWFInstallError(event:* = null):void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, StepItem.ERROR);
+            updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_OPTIONAL_INSTALL_FONTSWF, true);
+            log(StringUtil.substitute(_viewResourceConstants.ERROR_UNABLE_TO_DOWNLOAD_FILE, ["FontSwf Utility"]));
+            installNextOptionalComponent();
+        }
+        
+        protected function handleOSMFSWFInstallError(event:* = null):void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, StepItem.ERROR);
+            updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, true);
+            log(StringUtil.substitute(_viewResourceConstants.ERROR_UNABLE_TO_DOWNLOAD_FILE, ["OSMF_SWF"]));
+            installNextOptionalComponent();
+        }
+        
+        protected function handleOSMFSWCInstallError(event:* = null):void
+        {
+            updateActivityStep(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, StepItem.ERROR);
+            updateOptionalComponentInstallStatusAborted(_viewResourceConstants.STEP_REQUIRED_INSTALL_OSMF, true);
+            log(StringUtil.substitute(_viewResourceConstants.ERROR_UNABLE_TO_DOWNLOAD_FILE, ["OSMF_SWC"]));
+            installNextOptionalComponent();
+        }
+        
+        protected function updateOptionalComponentInstallStatus(label:String, isInstalled:Boolean):void
+        {
+            for each (var obj:InstallerComponentVO in _installerComponentsDataProvider) {
+                if (obj.label == label) {
+                    obj.installed = isInstalled;
+                }
+            }
+        }
+        
+        protected function updateOptionalComponentInstallStatusAborted(label:String, isAborted:Boolean):void
+        {
+            for each (var obj:InstallerComponentVO in _installerComponentsDataProvider) {
+                if (obj.label == label) {
+                    obj.aborted = isAborted;
+                }
+            }
+        }
+        
+        protected function checkAndHandleAllOptionalComponentsInstalled():void
+        {
+            var allComponentsInstalled:Boolean = true;
+            for each (var obj:InstallerComponentVO in _installerComponentsDataProvider) {
+                if (!obj.required && obj.selected && !(obj.installed || obj.aborted)) {
+                    allComponentsInstalled = false;
+                }
+            }
+            if (allComponentsInstalled) {
+                tracker.trackInstallerSuccess(APACHE_FLEX_BIN_DISTRO_VERSION_DISPLAY, APACHE_FLEX_BIN_DISTRO_VERSION, _os.os);
+                cleanup(false);
+            }
+        }
+        
+        protected function cleanup(isAbort:Boolean = false, abortInfo:String = ""):void
+        {
+            if (cleanedUp)
+                return;
+            
+            cleanedUp = true;
+            
             CursorManager.removeBusyCursor();
             if (!_viewResourceConstants) {
                 selectDefaultLanguageInEmergency();
-			}
+            }
             try {
-				if (_flexTempDir) {
-					_flexTempDir.deleteDirectory(true);
-				}
-			} catch (e:Error) {
-    			log(_viewResourceConstants.ERROR_UNABLE_TO_DELETE_TEMP_DIRECTORY);
-			}
-			
-			if (isAbort) {
-				tracker.trackInstallerFailure(APACHE_FLEX_BIN_DISTRO_VERSION_DISPLAY, APACHE_FLEX_BIN_DISTRO_VERSION, 
-					_os.os + abortInfo);
-			}
-			else if (!wasAborted)
-			{
-				log(_viewResourceConstants.INFO_INSTALLATION_COMPLETE);
-				updateUIHandleInstallationComplete();
-			}
-			
-			saveLogToDisk();
-		}
-		
-		protected function saveLogToDisk():void {
-			if (!_flexHomeDir) {
-				return;	
-			}
-			
-			var file:File = file = _flexHomeDir.resolvePath("installer.log");
-			var fs:FileStream = new FileStream();
+                if (_flexTempDir) {
+                    _flexTempDir.deleteDirectory(true);
+                }
+            } catch (e:Error) {
+                log(_viewResourceConstants.ERROR_UNABLE_TO_DELETE_TEMP_DIRECTORY);
+            }
             
-			try {
-				fs.open(file, FileMode.WRITE);
-				for each (var message:String in _messages) {
-	            	fs.writeUTFBytes(message);
-					fs.writeUTFBytes("\n");
-				}
-	            fs.close();
-			}
-			catch (e:Error) {
-    			// TODO log error?
-			}
-		}
-		
-		protected function updateUIHandleInstallationComplete():void {
-			browseBtn.enabled = true;
-			openApacheFlexFolderBtn.visible = true;
-			openApacheFlexFolderBtn.includeInLayout = true;
-			progressBar.visible = false;
-			progressBar.includeInLayout = false;
-			thirdStepGroup.title = _viewResourceConstants.INFO_INSTALLATION_COMPLETE;
-		}
-		
-		protected function abortInstallation(reason:String = ""):void {
+            if (isAbort) {
+                tracker.trackInstallerFailure(APACHE_FLEX_BIN_DISTRO_VERSION_DISPLAY, APACHE_FLEX_BIN_DISTRO_VERSION, 
+                    _os.os + "&info=" + abortInfo);
+            }
+            else if (!wasAborted)
+            {
+                log(_viewResourceConstants.INFO_INSTALLATION_COMPLETE);
+                updateUIHandleInstallationComplete();
+            }
+            
+            saveLogToDisk();
+        }
+        
+        protected function saveLogToDisk():void
+        {
+            if (!_flexHomeDir) {
+                return;
+            }
+            
+            var file:File = _flexHomeDir.resolvePath("installer.log");
+            var fs:FileStream = new FileStream();
+            
+            try {
+                fs.open(file, FileMode.WRITE);
+                for each (var message:String in _messages) {
+                    fs.writeUTFBytes(message);
+                    fs.writeUTFBytes("\n");
+                }
+                fs.close();
+            }
+            catch (e:Error) {
+                // TODO log error?
+            }
+        }
+        
+        protected function updateUIHandleInstallationComplete():void
+        {
+            browseBtn.enabled = true;
+            openApacheFlexFolderBtn.visible = true;
+            openApacheFlexFolderBtn.includeInLayout = true;
+            progressBar.visible = false;
+            progressBar.includeInLayout = false;
+            thirdStepGroup.title = _viewResourceConstants.INFO_INSTALLATION_COMPLETE;
+        }
+        
+        protected function abortInstallation(reason:String = ""):void
+        {
             if (currentState != "installState")
                 showConsole(null);
             
             directoryBtn.enabled = false;
-			browseBtn.enabled = false;
-			installBtn.enabled = false;
+            browseBtn.enabled = false;
+            installBtn.enabled = false;
             wasAborted = true;
-			log(_viewResourceConstants.INFO_ABORT_INSTALLATION);
-			cleanup(true, reason);
-            firstStepGroup.title = secondStepGroup.title = thirdStepGroup.title = _viewResourceConstants.INFO_ABORT_INSTALLATION;
-		}
-		
-		protected function _langSelect_changeHandler(event:IndexChangeEvent):void {
-			var defaultLanguage:String = ViewResourceConstants.DEFAULT_LANGUAGE;
-			
-			if (_langSelect.selectedItem["data"] == defaultLanguage) {
-				resourceManager.localeChain = [ defaultLanguage ];
+            if (_viewResourceConstants)
+                log(_viewResourceConstants.INFO_ABORT_INSTALLATION);
+            cleanup(true, reason);
+            if (_viewResourceConstants)
+                firstStepGroup.title = secondStepGroup.title = thirdStepGroup.title = _viewResourceConstants.INFO_ABORT_INSTALLATION;
+        }
+        
+        protected function _langSelect_changeHandler(event:IndexChangeEvent):void
+        {
+            var defaultLanguage:String = ViewResourceConstants.DEFAULT_LANGUAGE;
+            
+            var so:SharedObject = SharedObject.getLocal("InstallApacheFlex");
+            so.data.userDefaultLanguage = _langSelect.selectedItem["data"];
+            so.flush();
+            
+            if (_langSelect.selectedItem["data"] == defaultLanguage)
+            {
+                resourceManager.localeChain = [ defaultLanguage ];
                 resourceManager.update();
                 setButtonWidths();
-			} else {
+            }
+            else
+            {
                 loadLanguage(_langSelect.selectedItem["data"], _langSelect_changeCompleteHandler);
             }
         }
         
-        private function _langSelect_changeCompleteHandler():void {
+        private function _langSelect_changeCompleteHandler():void
+        {
             var defaultLanguage:String = ViewResourceConstants.DEFAULT_LANGUAGE;
-			resourceManager.localeChain = [ languageID, defaultLanguage ];
+            resourceManager.localeChain = [ languageID, defaultLanguage ];
             resourceManager.update();
             log("Using Locale: " + languageID);
-            setButtonWidths();			
-		}
-		
-		override protected function resourcesChanged():void {
-			super.resourcesChanged();
-			
-			if (_viewResourceConstants) {
-				rememberInstallerComponents();
-				updateWindowTitle();
-				initiateInstallStepsActivity();
-				initializeInstallerComponentsDataProvider();
-				recallInstallerComponents();
-			}
-		}
-		
-		private var _selectedInstallerComponents:Vector.<InstallerComponentVO>;
-		
-		protected function rememberInstallerComponents():void {
-			_selectedInstallerComponents = new Vector.<InstallerComponentVO>;
-			for each(var item:InstallerComponentVO in _installerComponentsDataProvider) {
-				if (item.selected) {
-					_selectedInstallerComponents.push(item);
-				}
-			}
-		}
-		
-		protected function recallInstallerComponents():void {
-			for each(var item:InstallerComponentVO in _selectedInstallerComponents) {
-				getInstallerComponentFromLabel(item.key).selected = true;
-			}
-		}
-		
-		protected function placeGroup(panel:Panel):void {
-			panel.x = this.width / 2 - panel.width / 2;
-		}
-		
-		protected function handleOptionalInstallsChange(event:IndexChangeEvent):void {
-			var selectedItem:InstallerComponentVO = InstallerComponentVO(event.target.selectedItem);
-			optionalInstallsTxtArea.text = selectedItem.message;
-			/*			installChkBx.label = _viewResourceConstants.INSTALL_AGREE;
-			if (selectedItem.answered) {
-			if (selectedItem.selected) {
-			installChkBx.selected = true;
-			} else {
-			installChkBx.selected = false;
-			}
-			} else {
-			installChkBx.selected = false;
-			}*/
-			
-			licenseLinkBtn.includeInLayout = true;
-			_currentLicenseLabel = selectedItem.licenseName;
-			_currentLicenseURL = selectedItem.licenseURL;
-			checkIfAllRequiredComponentsPromptsAnswered();
-			
-		}
-		
-		protected function handleLicenceBtnClick(event:Event):void {
-			navigateToURL(new URLRequest(_currentLicenseURL), "_blank");
-		}
-		
-		protected function handleInstallPermissionChange(event:InstallItemSelectionEvent):void {
-			if (installComponentsList.selectedItem != null) {
-				installComponentsList.selectedItem.selected = (event.item.selected);
-				installComponentsList.selectedItem.answered = true;
-			} else {
-				for (var i:int = 0; i < _installerComponentsDataProvider.length; i++) {
-					_installerComponentsDataProvider.getItemAt(i).selected = event.item.selected;
-					_installerComponentsDataProvider.getItemAt(i).answered = true;
-				}
-			}
-			checkIfAllRequiredComponentsPromptsAnswered();
-		}
-		
-		protected function checkIfAllRequiredComponentsPromptsAnswered():void {
-			var success:Boolean = true;
-			for each (var obj:InstallerComponentVO in _installerComponentsDataProvider) {
-				if (obj.required && !obj.selected) {
-					success = false;
-				}
-			}
-			installBtn.enabled = success;
-		}
-		
-		/************************ Utility methods *****************/
-		
-		private function createFolder(path:String):File {
-			var dir:File = new File(path);
-			
+            setButtonWidths();
+        }
+        
+        override protected function resourcesChanged():void
+        {
+            super.resourcesChanged();
+            
+            if (_viewResourceConstants) {
+                rememberInstallerComponents();
+                updateWindowTitle();
+                initiateInstallStepsActivity();
+                initializeInstallerComponentsDataProvider();
+                recallInstallerComponents();
+            }
+        }
+        
+        private var _selectedInstallerComponents:Vector.<InstallerComponentVO>;
+        
+        protected function rememberInstallerComponents():void
+        {
+            _selectedInstallerComponents = new Vector.<InstallerComponentVO>;
+            for each(var item:InstallerComponentVO in _installerComponentsDataProvider) {
+                if (item.selected) {
+                    _selectedInstallerComponents.push(item);
+                }
+            }
+        }
+        
+        protected function recallInstallerComponents():void
+        {
+            for each(var item:InstallerComponentVO in _selectedInstallerComponents) {
+                getInstallerComponentFromLabel(item.key).selected = true;
+            }
+        }
+        
+        protected function placeGroup(panel:Panel):void
+        {
+            panel.x = this.width / 2 - panel.width / 2;
+        }
+        
+        protected function handleOptionalInstallsChange(event:IndexChangeEvent):void
+        {
+            var selectedItem:InstallerComponentVO = InstallerComponentVO(event.target.selectedItem);
+            optionalInstallsTxtArea.text = selectedItem.message;
+            /*installChkBx.label = _viewResourceConstants.INSTALL_AGREE;
+            if (selectedItem.answered) {
+            if (selectedItem.selected) {
+            installChkBx.selected = true;
+            } else {
+            installChkBx.selected = false;
+            }
+            } else {
+            installChkBx.selected = false;
+            }*/
+            
+            licenseLinkBtn.includeInLayout = true;
+            _currentLicenseLabel = selectedItem.licenseName;
+            _currentLicenseURL = selectedItem.licenseURL;
+            checkIfAllRequiredComponentsPromptsAnswered();
+            
+        }
+        
+        protected function handleLicenceBtnClick(event:Event):void
+        {
+            navigateToURL(new URLRequest(_currentLicenseURL), "_blank");
+        }
+        
+        protected function handleInstallPermissionChange(event:InstallItemSelectionEvent):void
+        {
+            if (installComponentsList.selectedItem != null) {
+                installComponentsList.selectedItem.selected = (event.item.selected);
+                installComponentsList.selectedItem.answered = true;
+            } else {
+                for (var i:int = 0; i < _installerComponentsDataProvider.length; i++) {
+                    _installerComponentsDataProvider.getItemAt(i).selected = event.item.selected;
+                    _installerComponentsDataProvider.getItemAt(i).answered = true;
+                }
+            }
+            checkIfAllRequiredComponentsPromptsAnswered();
+        }
+        
+        protected function checkIfAllRequiredComponentsPromptsAnswered():void
+        {
+            var success:Boolean = true;
+            for each (var obj:InstallerComponentVO in _installerComponentsDataProvider) {
+                if (obj.required && !obj.selected) {
+                    success = false;
+                }
+            }
+            installBtn.enabled = success;
+        }
+        
+        /************************ Utility methods *****************/
+        
+        private function createFolder(path:String):File
+        {
+            var dir:File = new File(path);
+            
             if (!dir.exists)
-    			dir.createDirectory();
-			
-			return dir;
-		}
-		
-		private function copyOrDownload(url:String, handlerFunction:Function, dest:File = null, errorFunction:Function = null, nocache:Boolean = false):void {
-			if (url.search("http") == 0) {
-				download(url, handlerFunction, errorFunction, nocache);
-			} else if (url.search("file://") == 0) {
-				download(url, handlerFunction, errorFunction, nocache);
-			} else {
-				var source:File = new File(url);
-				
-				try {
-					source.copyTo(dest, true);
-				} catch (error:Error) {
-					if (errorFunction != null) {
-						errorFunction.call(null);
-					}
-					log(_viewResourceConstants.ERROR_UNABLE_TO_COPY_FILE + error.errorID + " " + error.message);
-				}
-			}
-		}
-		
-		private function download(url:String, handlerFunction:Function, errorFunction:Function = null, nocache:Boolean = false):void {
-			loader = new URLLoader();
+                dir.createDirectory();
+            
+            return dir;
+        }
+        
+        private function copyOrDownload(url:String, handlerFunction:Function, dest:File = null, errorFunction:Function = null, nocache:Boolean = false):void
+        {
+            if (url.search("http") == 0) {
+                download(url, handlerFunction, errorFunction, nocache);
+            } else if (url.search("file://") == 0) {
+                download(url, handlerFunction, errorFunction, nocache);
+            } else {
+                var source:File = new File(url);
+                
+                try {
+                    source.copyTo(dest, true);
+                } catch (error:Error) {
+                    if (errorFunction != null) {
+                        errorFunction.call(null);
+                    }
+                    log(_viewResourceConstants.ERROR_UNABLE_TO_COPY_FILE + error.errorID + " " + error.message);
+                }
+            }
+        }
+        
+        private function download(url:String, handlerFunction:Function, errorFunction:Function = null, nocache:Boolean = false):void
+        {
+            loader = new URLLoader();
             if (debugMode)
             {
                 log("downloading " + url);
@@ -2479,12 +2718,12 @@
             }                
             if (usingDownloadCache && !nocache)
             {
-                var cacheURL:String
+                var cacheURL:String;
                 if (_useMirror && url.indexOf(useMirrorPath(_mirrorURLUtil.mirrorURL)) != -1)
                 {
                     cacheURL = url.substr(useMirrorPath(_mirrorURLUtil.mirrorURL).length);
                     if (debugMode)
-                        log("mirror caching.  url = " + cacheURL);                        
+                        log("mirror caching.  url = " + cacheURL);
                 }
                 else
                 {
@@ -2496,38 +2735,38 @@
                         // that should find the slash after the server.
                         cacheURL = url.substr(c + 1);
                         if (debugMode)
-                            log("http caching.  url = " + cacheURL);                        
+                            log("http caching.  url = " + cacheURL);
                     }
                 }
                 if (cacheURL)
                 {
-                   var cacheFile:File = File.applicationStorageDirectory.resolvePath(downloadCacheFolder);
-                   cacheFile = cacheFile.resolvePath(escape(cacheURL));
-                   if (debugMode)
-                       log("searching cache for " + cacheFile.url);                        
-                   if (cacheFile.exists)
-                   {
-                       log(_viewResourceConstants.INFO_USING_CACHED_FILE + " " + cacheFile.url);                        
-                       url = cacheFile.url;
-                   }
+                    var cacheFile:File = File.applicationStorageDirectory.resolvePath(downloadCacheFolder);
+                    cacheFile = cacheFile.resolvePath(escape(cacheURL));
+                    if (debugMode)
+                        log("searching cache for " + cacheFile.url);
+                    if (cacheFile.exists)
+                    {
+                        log(_viewResourceConstants.INFO_USING_CACHED_FILE + " " + cacheFile.url);
+                        url = cacheFile.url;
+                    }
                 }
             }
-			var req:URLRequest = new URLRequest(url);
-			//Wait for 5 minutes before aborting download attempt.  Adobe download sites as well as some Apache mirrors are extremely slow.
-			req.idleTimeout = 300000;
-			
-			loader.dataFormat = URLLoaderDataFormat.BINARY;
+            var req:URLRequest = new URLRequest(url);
+            //Wait for 5 minutes before aborting download attempt.  Adobe download sites as well as some Apache mirrors are extremely slow.
+            req.idleTimeout = 300000;
+            
+            loader.dataFormat = URLLoaderDataFormat.BINARY;
             if (usingDownloadCache)
                 loader.addEventListener(Event.COMPLETE, function (event:Event):void
                 {
                     if (debugMode)
-                        log("download complete preparing to cache");                        
-                    var cacheURL:String
+                        log("download complete preparing to cache");
+                    var cacheURL:String;
                     if (_useMirror && url.indexOf(useMirrorPath(_mirrorURLUtil.mirrorURL)) != -1)
                     {
                         cacheURL = url.substr(useMirrorPath(_mirrorURLUtil.mirrorURL).length);
                         if (debugMode)
-                            log("mirror caching.  url = " + cacheURL);                        
+                            log("mirror caching.  url = " + cacheURL);
                     }
                     else
                     {
@@ -2539,7 +2778,7 @@
                             // that should find the slash after the server.
                             cacheURL = url.substr(c + 1);
                             if (debugMode)
-                                log("http caching.  url = " + cacheURL);                        
+                                log("http caching.  url = " + cacheURL);
                         }
                     }
                     if (cacheURL && !nocache)
@@ -2547,7 +2786,7 @@
                         var cacheFile:File = File.applicationStorageDirectory.resolvePath(downloadCacheFolder);
                         cacheFile = cacheFile.resolvePath(escape(cacheURL));
                         if (debugMode)
-                            log("caching " + cacheFile.url);                        
+                            log("caching " + cacheFile.url);
                         if (!cacheFile.exists)
                         {
                             var fs:FileStream = new FileStream();
@@ -2563,190 +2802,205 @@
                         else
                         {
                             if (debugMode)
-                                log("file was already in cache");                        
+                                log("file was already in cache");
                         }
                     }
                     
                 });
             loader.addEventListener(Event.COMPLETE, handlerFunction, false, 0, true);
             loader.addEventListener(Event.COMPLETE, handleDownloadComplete, false, 0, true);
-             
-			progressBar.percent = 0;
-			
-			if (errorFunction != null) {
-				loader.addEventListener(ErrorEvent.ERROR, errorFunction, false, 0, true);
-				loader.addEventListener(IOErrorEvent.IO_ERROR, errorFunction, false, 0, true);
-			}
-			loader.addEventListener(ProgressEvent.PROGRESS, handleDownloadProgress, false, 0, true);
-			
-			loader.load(req);
-		}
-		
-		private function handleDownloadProgress(event:ProgressEvent):void {
-			var bytesTotal:int = event.bytesTotal;
-			var bytesLoaded:int = event.bytesLoaded;
+            
+            progressBar.percent = 0;
+            
+            if (errorFunction != null) {
+                loader.addEventListener(ErrorEvent.ERROR, errorFunction, false, 0, true);
+                loader.addEventListener(IOErrorEvent.IO_ERROR, errorFunction, false, 0, true);
+            }
+            loader.addEventListener(ProgressEvent.PROGRESS, handleDownloadProgress, false, 0, true);
+            
+            loader.load(req);
+        }
+        
+        private function handleDownloadProgress(event:ProgressEvent):void
+        {
+            var bytesTotal:int = event.bytesTotal;
+            var bytesLoaded:int = event.bytesLoaded;
             if (event.bytesTotal > 0)
             {
-    			var percentLoaded:int = Math.round(bytesLoaded * 100 / bytesTotal);
+                var percentLoaded:int = Math.round(bytesLoaded * 100 / bytesTotal);
                 if (logProgressEvents)
                     log("download progress " + event.bytesLoaded + "  " + event.bytesTotal, -1, false);
-    			
-    			progressBar.percent = percentLoaded;
+                
+                progressBar.percent = percentLoaded;
             }
-		}
-		
-		private function handleDownloadComplete(event:Event):void {
-			_previousDisplayedPercent = 0;
-			clearData(URLLoader(event.target));
-		}
-		
-		private function clearData(v:URLLoader):void {
-			ByteArray(v.data).clear();
-			System.gc();
-		}
-		
-		private function unzip(fileToUnzip:File, unzipCompleteFunction:Function, unzipErrorFunction:Function = null):void {
-			var zipFileBytes:ByteArray = new ByteArray();
-			var fs:FileStream = new FileStream();
-			var fzip:Zip = new Zip();
-			
-			fs.open(fileToUnzip, FileMode.READ);
-			fs.readBytes(zipFileBytes);
-			fs.close();
-			
-			fzip.addEventListener(ZipEvent.FILE_LOADED, onFileLoaded, false, 0, true);
-			fzip.addEventListener(Event.COMPLETE, unzipCompleteFunction, false, 0, true);
-			fzip.addEventListener(Event.COMPLETE, onUnzipComplete, false, 0, true);
-			if (unzipErrorFunction != null) {
-				fzip.addEventListener(ErrorEvent.ERROR, unzipErrorFunction, false, 0, true);
-				_fileUnzipErrorFunction = unzipErrorFunction
-			}
-			fzip.loadBytes(zipFileBytes);
-		}
-		
-		private function onFileLoaded(e:ZipEvent):void {
-			try {
-				var fzf:ZipFile = e.file;
-				var f:File;
+        }
+        
+        private function handleDownloadComplete(event:Event):void
+        {
+            _previousDisplayedPercent = 0;
+            clearData(URLLoader(event.target));
+        }
+        
+        private function clearData(v:URLLoader):void
+        {
+            ByteArray(v.data).clear();
+            System.gc();
+        }
+        
+        private function unzip(fileToUnzip:File, unzipCompleteFunction:Function, unzipErrorFunction:Function = null):void
+        {
+            var zipFileBytes:ByteArray = new ByteArray();
+            var fs:FileStream = new FileStream();
+            var fzip:Zip = new Zip();
+            
+            fs.open(fileToUnzip, FileMode.READ);
+            fs.readBytes(zipFileBytes);
+            fs.close();
+            
+            fzip.addEventListener(ZipEvent.FILE_LOADED, onFileLoaded, false, 0, true);
+            fzip.addEventListener(Event.COMPLETE, unzipCompleteFunction, false, 0, true);
+            fzip.addEventListener(Event.COMPLETE, onUnzipComplete, false, 0, true);
+            if (unzipErrorFunction != null) {
+                fzip.addEventListener(ErrorEvent.ERROR, unzipErrorFunction, false, 0, true);
+                _fileUnzipErrorFunction = unzipErrorFunction
+            }
+            fzip.loadBytes(zipFileBytes);
+        }
+        
+        private function onFileLoaded(e:ZipEvent):void
+        {
+            try {
+                var fzf:ZipFile = e.file;
+                var f:File;
                 if (overlaying)
                     f = _flexTempDir.resolvePath(fzf.filename);
                 else
                     f = _flexHomeDir.resolvePath(fzf.filename);
-				var fs:FileStream = new FileStream();
-				
-				if (isDirectory(fzf)) {
-					// Is a directory, not a file. Dont try to write anything into it.
-					return;
-				}
-				
-				fs.open(f, FileMode.WRITE);
-				fs.writeBytes(fzf.content);
-				fs.close();
-				
-			} catch (error:Error) {
-				_fileUnzipErrorFunction.call();
-			}
-		}
-		
-		private function isDirectory(f:ZipFile):Boolean {
-			if (f.filename.substr(f.filename.length - 1) == "/" || f.filename.substr(f.filename.length - 1) == "\\") {
-				return true;
-			}
-			return false;
-		}
-		
-		private function onUnzipComplete(event:Event):void {
-			var fzip:Zip = event.target as Zip;
-			fzip.close();
-			fzip.removeEventListener(ZipEvent.FILE_LOADED, onFileLoaded);
-			fzip.removeEventListener(Event.COMPLETE, onUnzipComplete);
-		}
-		
-		private function untar(source:File, destination:File, unTarCompleteFunction:Function, unTarErrorFunction:Function):void {
-			var tar:File;
-			var startupInfo:NativeProcessStartupInfo = new NativeProcessStartupInfo();
-			var arguments:Vector.<String> = new Vector.<String>();
-			
-			if (_os.isLinux()) {
-				tar = new File("/bin/tar");
-			}
-			else {
-				tar = new File("/usr/bin/tar");	
-			}
-			
-			arguments.push("xf");
-			arguments.push(source.nativePath);
-			arguments.push("-C");
-			arguments.push(destination.nativePath);
-			
-			startupInfo.executable = tar;
-			startupInfo.arguments = arguments;
-			
-			_process = new NativeProcess();
-			_process.addEventListener(ProgressEvent.STANDARD_OUTPUT_DATA, unTarFileProgress, false, 0, true);
-			_process.addEventListener(ProgressEvent.STANDARD_ERROR_DATA, unTarErrorFunction, false, 0, true);
-			_process.addEventListener(ProgressEvent.STANDARD_ERROR_DATA, unTarError, false, 0, true);
-			_process.addEventListener(NativeProcessExitEvent.EXIT, unTarCompleteFunction, false, 0, true);
-			_process.addEventListener(NativeProcessExitEvent.EXIT, unTarComplete, false, 0, true);
-			_process.start(startupInfo);
-		}
-		
-		private function unTarError(event:Event):void {
-			var output:String = _process.standardError.readUTFBytes(_process.standardError.bytesAvailable);
-			
-			log(_viewResourceConstants.ERROR_NATIVE_PROCESS_ERROR);
-			log(output);
-		}
-		
-		private function unTarFileProgress(event:Event):void {
-			var output:String = _process.standardOutput.readUTFBytes(_process.standardOutput.bytesAvailable);
-			
-			log(output);
-		}
-		
-		private function unTarComplete(event:NativeProcessExitEvent):void {
-			_process.closeInput();
-			_process.exit(true);
-		}
-		
-		private function writeFileToDirectory(file:File, data:ByteArray):void {
-			var fs:FileStream = new FileStream();
-			fs.open(file, FileMode.WRITE);
-			fs.writeBytes(data);
-			fs.close();
-		}
-		
-		private function isValidConfigFile(file:File):Boolean {
-			var name:String = file.name;
-			
-			if (name.search("-config.xml") == -1) {
-				return false;
-			} else {
-				return true;
-			}
-		}
-		
-		private function isAirConfigFile(file:File):Boolean {
-			var name:String = file.name;
-			
-			if (name.search("air") == 0) {
-				return true;
-			} else {
-				return false;
-			}
-		}
-		
-		private function log(text:String, position:int = -1, isPublic:Boolean = true, skipLog:Boolean = false):void {
+                var fs:FileStream = new FileStream();
+                
+                if (isDirectory(fzf)) {
+                    // Is a directory, not a file. Dont try to write anything into it.
+                    return;
+                }
+                
+                fs.open(f, FileMode.WRITE);
+                fs.writeBytes(fzf.content);
+                fs.close();
+                
+            } catch (error:Error) {
+                _fileUnzipErrorFunction.call();
+            }
+        }
+        
+        private function isDirectory(f:ZipFile):Boolean
+        {
+            if (f.filename.substr(f.filename.length - 1) == "/" || f.filename.substr(f.filename.length - 1) == "\\") {
+                return true;
+            }
+            return false;
+        }
+        
+        private function onUnzipComplete(event:Event):void
+        {
+            var fzip:Zip = event.target as Zip;
+            fzip.close();
+            fzip.removeEventListener(ZipEvent.FILE_LOADED, onFileLoaded);
+            fzip.removeEventListener(Event.COMPLETE, onUnzipComplete);
+        }
+        
+        private function untar(source:File, destination:File, unTarCompleteFunction:Function, unTarErrorFunction:Function):void
+        {
+            var tar:File;
+            var startupInfo:NativeProcessStartupInfo = new NativeProcessStartupInfo();
+            var arguments:Vector.<String> = new Vector.<String>();
+            
+            if (_os.isLinux()) {
+                tar = new File("/bin/tar");
+            }
+            else {
+                tar = new File("/usr/bin/tar");
+            }
+            
+            arguments.push("xf");
+            arguments.push(source.nativePath);
+            arguments.push("-C");
+            arguments.push(destination.nativePath);
+            
+            startupInfo.executable = tar;
+            startupInfo.arguments = arguments;
+            
+            _process = new NativeProcess();
+            _process.addEventListener(ProgressEvent.STANDARD_OUTPUT_DATA, unTarFileProgress, false, 0, true);
+            _process.addEventListener(ProgressEvent.STANDARD_ERROR_DATA, unTarErrorFunction, false, 0, true);
+            _process.addEventListener(ProgressEvent.STANDARD_ERROR_DATA, unTarError, false, 0, true);
+            _process.addEventListener(NativeProcessExitEvent.EXIT, unTarCompleteFunction, false, 0, true);
+            _process.addEventListener(NativeProcessExitEvent.EXIT, unTarComplete, false, 0, true);
+            _process.start(startupInfo);
+        }
+        
+        private function unTarError(event:Event):void
+        {
+            var output:String = _process.standardError.readUTFBytes(_process.standardError.bytesAvailable);
+            
+            log(_viewResourceConstants.ERROR_NATIVE_PROCESS_ERROR);
+            log(output);
+        }
+        
+        private function unTarFileProgress(event:Event):void
+        {
+            var output:String = _process.standardOutput.readUTFBytes(_process.standardOutput.bytesAvailable);
+            
+            log(output);
+        }
+        
+        private function unTarComplete(event:NativeProcessExitEvent):void
+        {
+            _process.closeInput();
+            _process.exit(true);
+        }
+        
+        private function writeFileToDirectory(file:File, data:ByteArray):void
+        {
+            var fs:FileStream = new FileStream();
+            fs.open(file, FileMode.WRITE);
+            fs.writeBytes(data);
+            fs.close();
+        }
+        
+        private function isValidConfigFile(file:File):Boolean
+        {
+            var name:String = file.name;
+            
+            if (name.search("-config.xml") == -1) {
+                return false;
+            } else {
+                return true;
+            }
+        }
+        
+        private function isAirConfigFile(file:File):Boolean
+        {
+            var name:String = file.name;
+            
+            if (name.search("air") == 0) {
+                return true;
+            } else {
+                return false;
+            }
+        }
+        
+        private function log(text:String, position:int = -1, isPublic:Boolean = true, skipLog:Boolean = false):void
+        {
             if (text == null)
                 text = "";
             if (position == -1) {
                 if (!skipLog)
-    				_messages.addItem(text);
+                    _messages.addItem(text);
                 if (isPublic)
                     lastPublicMessage = text;
-			} else {
-				_messages.addItemAt(text, position);
-			}
+            } else {
+                _messages.addItemAt(text, position);
+            }
             if (debugMode)
                 trace(text);
             if (logFile)
@@ -2757,472 +3011,543 @@
                 fs.writeUTFBytes(text + "\n");
                 fs.close();
             }
-		}
-		
-		private var console:ConsoleWindow;
-		private function showConsole(event:Event):void {
-			if (!console || console.closed)
-				console = new ConsoleWindow();
-			else if (console)
-				console.orderToFront();
-				
-			console.messages = _messages;
-			console.open();
-			console.nativeWindow.x = this.nativeWindow.x + this.nativeWindow.width / 2 - console.nativeWindow.width / 2;
-			console.nativeWindow.y = this.nativeWindow.y + this.nativeWindow.height / 2 - console.nativeWindow.height / 2;
-		}
-		
-		private function showMPLLicense(event:Event):void {
-			var licenseWindow:MPLLicense = new MPLLicense();
-			licenseWindow.open();
-			licenseWindow.nativeWindow.x = this.nativeWindow.x + this.nativeWindow.width / 2 - licenseWindow.nativeWindow.width / 2;
-			licenseWindow.nativeWindow.y = this.nativeWindow.y + this.nativeWindow.height / 2 - licenseWindow.nativeWindow.height / 2;
-		}
-		
-		private function showAdobeLicense(event:Event):void {
-			var licenseWindow:AdobeLicense = new AdobeLicense();
-			licenseWindow.open();
-			licenseWindow.nativeWindow.x = this.nativeWindow.x + this.nativeWindow.width / 2 - licenseWindow.nativeWindow.width / 2;
-			licenseWindow.nativeWindow.y = this.nativeWindow.y + this.nativeWindow.height / 2 - licenseWindow.nativeWindow.height / 2;
-		}
-		
-		private function openApacheFlexFolder(event:Event):void {
-			_flexHomeDir.openWithDefaultApplication();
-		}
-		
-		private function closeApplication(event:Event):void {
-			// TODO only enable close button when finished or when an error occurs
-			// TODO anything we need to clean up?
-			if (console && !console.closed)
-				console.closeWindow(null);
-			cleanup();
-			close();
-		}
-		
-		protected function clickLogo(event:MouseEvent):void {
-			navigateToURL(new URLRequest(Constants.APACHE_FLEX_URL));
-		}
-		
-		protected function getStepItemFromStepLabel(stepLabel:String):StepItem {
-			for each (var s:StepItem in _installationSteps) {
-				if (s.label == stepLabel) {
-					return s;
-				}
-			}
-			
-			return null;
-		}
-		
-		protected function getInstallerComponentFromLabel(key:String):InstallerComponentVO {
-			for each (var s:InstallerComponentVO in _installerComponentsDataProvider) {
-				if (s.key == key) {
-					return s;
-				}
-			}
-			
-			return null;
-		}
-		
-		protected function updateActivityStep(stepLabel:String, status:String):void {
-			var step:StepItem = getStepItemFromStepLabel(stepLabel);
-			
-			if (step) {
-				step.status = status;
-			}
-		}
-		
-		private function isDirectoryEmpty(dir:File):Boolean {
-			var result:Boolean;
-			
-			var filesArray:Array = dir.getDirectoryListing();
-			
-			var length:int = filesArray.length;
-			result = length == 0;
-			if (length == 1) {
-				var explodedPath:Array = File(filesArray[0]).url.split("/");
-				
-				// the .DS_Store file doesn't bother anybody, so we can safely ignore it.
-                // also ignore local.properties so you an override install settings
-				result = explodedPath[explodedPath.length - 1] == ".DS_Store" ||
-                    explodedPath[explodedPath.length - 1] == "local.properties";
-			}
-			
-			return result;
-		}
-		
-		protected function showDisclaimer():void {
-			var request:URLRequest = new URLRequest(Constants.APACHE_FLEX_URL + Constants.DISCLAIMER_PATH);
-			
-			navigateToURL(request, "_blank");
-		}
-		
-		protected function installComponentsList_creationCompleteHandler(event:FlexEvent):void {
-			installComponentsList.addEventListener(InstallItemSelectionEvent.INSTALL_ITEM_SELECTION_CHANGED, handleInstallPermissionChange);
-		}
-		
-		private function onMouseRoll(event:MouseEvent):void {
-			if (event.type == MouseEvent.MOUSE_OVER) {
-				event.target.styleName = "linkTextHover";
-			} else {
-				event.target.styleName = "linkText";
-			}
-		}
-		
-		private function getFlexVersionBuildString():String
-		{
-			var flexPropertiesFile:File = _flexHomeDir.resolvePath("flex-sdk-description.xml");
-			var fs:FileStream = new FileStream();
-			fs.open(flexPropertiesFile, FileMode.READ);
-			var contents:XML = new XML(fs.readMultiByte(fs.bytesAvailable, "utf-8"));
-			fs.close();
-			return contents.version + "." + contents.build;
-		}
+        }
         
-	]]></fx:Script>
-	
-	<fx:Declarations>
-		<s:Sine id="ease"/>
-		<s:BlurFilter id="blur"/>
-	</fx:Declarations>
-	
-	<s:states>
-		<s:State name="default"/>
-		<s:State name="directoryState"/>
-		<s:State name="optionsState"/>
-		<s:State name="installState"/>
-	</s:states>
-	
-	<s:transitions>
-		<s:Transition id="showDefault" fromState="*" toState="default">
-			<s:Sequence id="t0" targets="{[zeroStepGroup]}" effectEnd="placeGroup(zeroStepGroup)">
-				<s:SetAction target="{zeroStepGroup}" property="visible" value="true"/>
-				<s:SetAction target="{firstStepGroup}" property="visible" value="false"/>
-				<s:SetAction target="{secondStepGroup}" property="visible" value="false"/>
-				<s:SetAction target="{thirdStepGroup}" property="visible" value="false"/>
-				<s:Move target="{zeroStepGroup}" xFrom="800" xTo="{this.width/2 - zeroStepGroup.width/2}" duration="500" easer="{ease}"/>
-			</s:Sequence>
-		</s:Transition>
-		<s:Transition id="showDirectory" fromState="*" toState="directoryState">
-			<s:Sequence id="t1" targets="{[firstStepGroup]}" effectEnd="placeGroup(firstStepGroup)">
-				<s:SetAction target="{zeroStepGroup}" property="visible" value="false"/>
-				<s:SetAction target="{firstStepGroup}" property="visible" value="true"/>
-				<s:SetAction target="{secondStepGroup}" property="visible" value="false"/>
-				<s:SetAction target="{thirdStepGroup}" property="visible" value="false"/>
-				<s:Move target="{firstStepGroup}" xFrom="800" xTo="{this.width/2 - firstStepGroup.width/2}" duration="500" easer="{ease}"/>
-			</s:Sequence>
-		</s:Transition>
-		<s:Transition id="showOptions" fromState="*" toState="optionsState">
-			<s:Sequence id="t2" targets="{[secondStepGroup]}" effectEnd="placeGroup(secondStepGroup)">
-				<s:SetAction target="{zeroStepGroup}" property="visible" value="false"/>
-				<s:SetAction target="{firstStepGroup}" property="visible" value="false"/>
-				<s:SetAction target="{secondStepGroup}" property="visible" value="true"/>
-				<s:SetAction target="{thirdStepGroup}" property="visible" value="false"/>
-				<s:Move target="{secondStepGroup}" xFrom="800" xTo="{this.width/2 - secondStepGroup.width/2}" duration="500" easer="{ease}"/>
-			</s:Sequence>
-		</s:Transition>
-		<s:Transition id="showInstall" fromState="*" toState="installState">
-			<s:Sequence id="t3" targets="{[thirdStepGroup]}" effectEnd="placeGroup(thirdStepGroup)">
-				<s:SetAction target="{zeroStepGroup}" property="visible" value="false"/>
-				<s:SetAction target="{firstStepGroup}" property="visible" value="false"/>
-				<s:SetAction target="{secondStepGroup}" property="visible" value="false"/>
-				<s:SetAction target="{thirdStepGroup}" property="visible" value="true"/>
-				<s:Move target="{thirdStepGroup}" xFrom="800" xTo="{this.width/2 - thirdStepGroup.width/2}" duration="500" easer="{ease}"/>
-			</s:Sequence>
-		</s:Transition>
-	</s:transitions>
-	<s:layout>
-		<s:BasicLayout/>
-	</s:layout>
-	<s:HGroup
-		left="0"
-		right="0"
-		paddingLeft="20"
-		paddingRight="20"
-		paddingTop="5"
-		horizontalAlign="right">
-		<controls2:LinkButton
-			text="{_viewResourceConstants.BTN_DISCLAIMER}"
-			fontFamily="openSansSemibold"
-			click="{showDisclaimer()}"
-			/>
-		<s:Spacer width="100%"/>
-		<s:Label id="langLabel"
-				 horizontalCenter="0"
-				 height="100%"
-				 textAlign="right"
-				 text="{_viewResourceConstants.INFO_CURRENT_LANGUAGE}"
-				 fontFamily="openSansSemibold"
-				 verticalAlign="middle"/>
-		<s:DropDownList id="_langSelect"
-						enabled="false"
-						fontFamily="openSansSemibold"
-						change="_langSelect_changeHandler(event)">
-			<s:layout>
-				<s:VerticalLayout requestedRowCount="-1"/>
-			</s:layout>
-		</s:DropDownList>
-	</s:HGroup>
-	<!--	<s:Group width="100%" top="275">-->
-	<!--		<s:HGroup gap="0" horizontalCenter="0" top="30">
-	<s:Label text="apache" fontFamily="openSansBold" color="0x677084" fontSize="24" />
-	<s:Label text="Flex" right="0"
-	fontFamily="openSansBold"
-	color="0x172647" fontSize="70"
-	/>
-	</s:HGroup>-->
-	
-	<s:HGroup verticalAlign="middle" gap="5" horizontalCenter="0" top="300">
-		<s:Label text="{_viewResourceConstants.INFO_VERSION}" fontFamily="openSansBold" color="0x677084" fontSize="24" />
-		<s:Label text="{APACHE_FLEX_BIN_DISTRO_VERSION}" right="0"
-				 fontFamily="openSansBold"
-				 color="0x172647" fontSize="70"
-				 />
-	</s:HGroup>
-	<!--	</s:Group>-->
-	<s:Panel id="zeroStepGroup"
-			 title="{_viewResourceConstants.INFO_SELECT_AIR_FLASH_PLAYER}"
-			 width="640"
-			 height="200"
-			 top="380"
-			 x="{zeroStepGroup.x = this.width/2 - zeroStepGroup.width/2}"
-			 backgroundAlpha="0">
-		<s:layout>
-			<s:VerticalLayout
-				verticalAlign="middle"
-				horizontalAlign="center"
-				paddingRight="10"
-				paddingLeft="10"/>
-		</s:layout>
-		<s:HGroup verticalAlign="middle">
-			<s:Label text="{_viewResourceConstants.INFO_SELECT_FLEX}" width="200" fontFamily="openSansBold" />
-			<s:DropDownList id="flexVersion"
-							dataProvider="{FLEX_VERSIONS}"
-							labelField="label"
-							width="200"
-							fontFamily="openSansSemibold"
-							change="handleFlexVersionChange(event)">
-				<s:layout>
-					<s:VerticalLayout requestedRowCount="-1"/>
-				</s:layout>
-			</s:DropDownList>
-		</s:HGroup>
-		<s:HGroup verticalAlign="middle">
-			<s:Label text="{_viewResourceConstants.INFO_SELECT_AIR}" width="200" fontFamily="openSansBold" />
-			<s:DropDownList id="airVersion"
-							dataProvider="{AIR_VERSIONS}"
-							width="200"
-							fontFamily="openSansSemibold"
-							change="handleAirVersionChange(event)">
-				<s:layout>
-					<s:VerticalLayout requestedRowCount="-1"/>
-				</s:layout>
-			</s:DropDownList>
-		</s:HGroup>
-		<s:HGroup verticalAlign="middle">
-			<s:Label text="{_viewResourceConstants.INFO_SELECT_FLASH}" width="200" fontFamily="openSansBold" />
-			<s:DropDownList id="flashPlayerVersion"
-							width="200"
-							dataProvider="{FLASH_PLAYER_VERSIONS}"
-							fontFamily="openSansSemibold"
-							change="handleFlashPlayerVersionChange(event)">
-				<s:layout>
-					<s:VerticalLayout requestedRowCount="-1"/>
-				</s:layout>
-			</s:DropDownList>
-		</s:HGroup>
-		<s:controlBarContent>
-			<s:Spacer
-				width="100%"/>
-			<s:Button id="directoryBtn"
-					  styleName="mainBtnStyle"
-					  width="{_standardButtonWidth}"
-					  height="32"
-					  right="10"
-					  label="{_viewResourceConstants.BTN_LABEL_NEXT}"
-					  enabled="false"
-					  click="handleZeroStepNextBtnClick(event)"/>
-		</s:controlBarContent>
-	</s:Panel>
-	
-	<s:Panel id="firstStepGroup"
-			 title="{_viewResourceConstants.INFO_SELECT_DIRECTORY_INSTALL}"
-			 width="640"
-			 height="200"
-			 top="380"
-			 x="{firstStepGroup.x = this.width/2 - firstStepGroup.width/2}"
-			 visible="false"
-			 visible.directoryState="true"
-			 backgroundAlpha="0">
-		<s:layout>
-			<s:HorizontalLayout
-				verticalAlign="middle"
-				paddingRight="10"
-				paddingLeft="10"/>
-		</s:layout>
-		<s:TextInput id="flexSDKTxtInput"
-					 width="100%"
-					 prompt="{_viewResourceConstants.SELECT_PATH_PROMPT}"
-					 change="handleFlexSDXTxtInputChange(event)"/>
-		<s:Button id="browseBtn"
-				  styleName="browseBtnStyle"
-				  width="{_standardButtonWidth}"
-				  height="32"
-				  label="{_viewResourceConstants.BTN_LABEL_BROWSE}"
-				  click="browseForSDK(event)"
-				  toolTip="{_viewResourceConstants.INFO_SELECT_DIRECTORY}"/>
-		<s:controlBarContent>
-			<s:Spacer
-				width="100%"/>
-			<s:Button id="nextBtn"
-					  styleName="mainBtnStyle"
-					  width="{_standardButtonWidth}"
-					  height="32"
-					  right="10"
-					  label="{_viewResourceConstants.BTN_LABEL_NEXT}"
-					  enabled="false"
-					  click="handleFirstStepNextBtnClick(event)"/>
-		</s:controlBarContent>
-	</s:Panel>
-	<s:Panel id="secondStepGroup"
-			 title="{_viewResourceConstants.INFO_LICENSE_AGREEMENTS}"
-			 width="720"
-			 height="250"
-			 top="370"
-			 visible="false"
-			 visible.optionsState="true"
-			 backgroundAlpha="0"> 
-		<s:controlBarContent>
-			<s:Spacer
-				width="100%"/>
-			<s:Button id="installBtn"
-					  styleName="mainBtnStyle"
-					  width="{_standardButtonWidth}"
-					  height="32"
-					  right="10"
-					  label="{_viewResourceConstants.BTN_LABEL_INSTALL}"
-					  enabled="false"
-					  click="handleInstallBtnClick(event)"/>
-		</s:controlBarContent>
-		<s:layout>
-			<s:VerticalLayout
-				verticalAlign="middle"
-				paddingRight="10"
-				paddingLeft="10"/>
-		</s:layout>
-		<s:HGroup
-			width="100%"
-			height="100%"
-			horizontalAlign="center">
-			<s:List id="installComponentsList"
-					width="50%"
-					height="100%"
-					itemRenderer="org.apache.flex.packageflexsdk.view.itemrenderers.OptionalInstallItemRenderer"
-					dataProvider="{_installerComponentsDataProvider}"
-					change="handleOptionalInstallsChange(event)" creationComplete="installComponentsList_creationCompleteHandler(event)">
-				<s:layout>
-					<s:VerticalLayout/>
-				</s:layout>
-			</s:List>
-			<s:VGroup width="50%"
-					  height="100%"
-					  horizontalAlign="center"
-					  gap="5">
-				<controls2:LinkButton id="licenseLinkBtn"
-									  text="{_currentLicenseLabel}"
-									  fontWeight="bold"
-									  click="{handleLicenceBtnClick(event)}"
-									  paddingTop="5"
-									  includeInLayout="false"
-									  />
-				<s:TextArea id="optionalInstallsTxtArea" text="{_viewResourceConstants.INFO_NEED_TO_READ_AND_AGREE_TO_LICENSE}"
-							fontFamily="openSansSemiBold"
-							fontSize="12"
-							width="100%"
-							height="100%"
-							verticalScrollPolicy="off"
-							editable="false"/>
-			</s:VGroup>
-		</s:HGroup>
-		<!--		<s:HGroup
-		width="100%"
-		height="20"
-		horizontalAlign="center"
-		verticalAlign="middle">
-		<s:CheckBox id="installChkBx"
-		label="{_viewResourceConstants.INSTALL_AGREE_ALL}"
-		selected="false" 
-		visible="true"/>
-		</s:HGroup>-->
-	</s:Panel>
-	<s:Panel id="thirdStepGroup"
-			 title="{_viewResourceConstants.INFO_INSTALLING}"
-			 width="640"
-			 height="200"
-			 top="380"
-			 visible="false"
-			 visible.installState="true"
-			 backgroundAlpha="0">
-		<s:layout>
-			<s:VerticalLayout
-				horizontalAlign="center"
-				verticalAlign="middle"
-				paddingTop="10"
-				paddingRight="10"
-				paddingLeft="10"
-				gap="15"/>
-		</s:layout>
-		<controls1:MultiStepProgressIndicator
-			steps="{_installationSteps}"/>
-		<s:Label id="lastMessage"
-				 text="{lastFilteredPublicMessage}"
-				 fontFamily="openSansLightItalic"
-				 textAlign="center"
-				 width="80%" height="100%"
-				 horizontalCenter="0"/>
-		<controls:ProgressBar id="progressBar"
-							  width="60%"
-							  height="21"/>
-		<s:Button id="openApacheFlexFolderBtn"
-				  styleName="mainBtnStyle"
-				  width="225"
-				  height="32"
-				  visible="false"
-				  includeInLayout="false"
-				  label="{_viewResourceConstants.BTN_LABEL_OPEN_APACHE_FLEX_FOLDER}"
-				  toolTip="{_flexHome}"
-				  click="openApacheFlexFolder(event)"/>
-		<components:Tracker id="tracker" width="1" height="1" visible="false"/>
-	</s:Panel>
-	<s:HGroup
-		left="0"
-		right="0"
-		bottom="20"
-		paddingLeft="20"
-		paddingRight="20"
-		paddingTop="0"
-		verticalAlign="middle">
-		<s:Button id="installLogBtn"
-				  styleName="genericBtnStyle"
-				  width="110"
-				  height="32"
-				  label="{_viewResourceConstants.BTN_LABEL_INSTALL_LOG}"
-				  click="showConsole(event)"/>
-		<s:Spacer width="100%"/>
-		<s:Label fontFamily="openSansLightItalic" text="{_viewResourceConstants.INFO_TRACKING}"
-				 styleName="linkText" maxDisplayedLines="2"
-				 mouseOver="onMouseRoll(event)" mouseOut="onMouseRoll(event)"
-				 click="navigateToURL(new URLRequest('http://flex.apache.org/about-privacy.html'))"
-				 buttonMode="true"
-				 useHandCursor="true"
-				 mouseChildren="false"/>
-		<s:Spacer width="100%"/>
-		<s:Button id="closeBtn"
-				  styleName="genericBtnStyle"
-				  width="{_standardButtonWidth}"
-				  height="32"
-				  label="{_viewResourceConstants.BTN_LABEL_CLOSE}"
-				  click="closeApplication(event)"/>
-	</s:HGroup>
-	<!-- used to measure text -->
-	<s:Button id="hiddenButton" visible="false" includeInLayout="false"/>
+        private var console:ConsoleWindow;
+        private function showConsole(event:Event):void
+        {
+            if (!console || console.closed)
+                console = new ConsoleWindow();
+            else if (console)
+                console.orderToFront();
+            
+            console.messages = _messages;
+            console.open();
+            console.nativeWindow.x = this.nativeWindow.x + this.nativeWindow.width / 2 - console.nativeWindow.width / 2;
+            console.nativeWindow.y = this.nativeWindow.y + this.nativeWindow.height / 2 - console.nativeWindow.height / 2;
+        }
+        
+        private function showMPLLicense(event:Event):void
+        {
+            var licenseWindow:MPLLicense = new MPLLicense();
+            licenseWindow.open();
+            licenseWindow.nativeWindow.x = this.nativeWindow.x + this.nativeWindow.width / 2 - licenseWindow.nativeWindow.width / 2;
+            licenseWindow.nativeWindow.y = this.nativeWindow.y + this.nativeWindow.height / 2 - licenseWindow.nativeWindow.height / 2;
+        }
+        
+        private function showAdobeLicense(event:Event):void
+        {
+            var licenseWindow:AdobeLicense = new AdobeLicense();
+            licenseWindow.open();
+            licenseWindow.nativeWindow.x = this.nativeWindow.x + this.nativeWindow.width / 2 - licenseWindow.nativeWindow.width / 2;
+            licenseWindow.nativeWindow.y = this.nativeWindow.y + this.nativeWindow.height / 2 - licenseWindow.nativeWindow.height / 2;
+        }
+        
+        private function openApacheFlexFolder(event:Event):void
+        {
+            _flexHomeDir.openWithDefaultApplication();
+        }
+        
+        private function closeApplication(event:Event):void
+        {
+            removeEventListener(Event.CLOSING, closeApplication);
+            
+            if (currentState == "installState")
+            {
+                if (currentStep < stepLabels.length)
+                {
+                    // User aborted the installation by closing the installer
+                    var activeStep:StepItem = getActiveStepItem();
+                    if (_viewResourceConstants)
+                        abortInstallation(_viewResourceConstants.INFO_USER_ABORT_INSTALLATION + activeStep.label);
+                }
+            }
+            
+            // TODO only enable close button when finished or when an error occurs
+            // TODO anything we need to clean up?
+            if (console && !console.closed)
+                console.closeWindow(null);
+            cleanup();
+            close();
+        }
+        
+        protected function getActiveStepItem():StepItem
+        {
+            for each (var s:StepItem in _installationSteps) {
+                if (s.status == StepItem.ACTIVE) {
+                    return s;
+                }
+            }
+            return null;
+        }
+        
+        protected function clickLogo(event:MouseEvent):void
+        {
+            navigateToURL(new URLRequest(Constants.APACHE_FLEX_URL));
+        }
+        
+        protected function getStepItemFromStepLabel(stepLabel:String):StepItem
+        {
+            for each (var s:StepItem in _installationSteps) {
+                if (s.label == stepLabel) {
+                    return s;
+                }
+            }
+            
+            return null;
+        }
+        
+        protected function getInstallerComponentFromLabel(key:String):InstallerComponentVO
+        {
+            for each (var s:InstallerComponentVO in _installerComponentsDataProvider) {
+                if (s.key == key) {
+                    return s;
+                }
+            }
+            
+            return null;
+        }
+        
+        protected function updateActivityStep(stepLabel:String, status:String):void
+        {
+            var step:StepItem = getStepItemFromStepLabel(stepLabel);
+            
+            if (step) {
+                step.status = status;
+            }
+        }
+        
+        private function isDirectoryEmpty(dir:File):Boolean
+        {
+            var result:Boolean;
+            
+            var filesArray:Array = dir.getDirectoryListing();
+            
+            var length:int = filesArray.length;
+            result = length == 0;
+            if (length == 1) {
+                var explodedPath:Array = File(filesArray[0]).url.split("/");
+                
+                // the .DS_Store file doesn't bother anybody, so we can safely ignore it.
+                // also ignore local.properties so you an override install settings
+                result = explodedPath[explodedPath.length - 1] == ".DS_Store" ||
+                    explodedPath[explodedPath.length - 1] == "local.properties";
+            }
+            
+            return result;
+        }
+        
+        protected function showDisclaimer():void
+        {
+            var request:URLRequest = new URLRequest(Constants.APACHE_FLEX_URL + Constants.DISCLAIMER_PATH);
+            
+            navigateToURL(request, "_blank");
+        }
+        
+        protected function installComponentsList_creationCompleteHandler(event:FlexEvent):void
+        {
+            installComponentsList.addEventListener(InstallItemSelectionEvent.INSTALL_ITEM_SELECTION_CHANGED, handleInstallPermissionChange);
+        }
+        
+        private function onMouseRoll(event:MouseEvent):void
+        {
+            if (event.type == MouseEvent.MOUSE_OVER) {
+                event.target.styleName = "linkTextHover";
+            } else {
+                event.target.styleName = "linkText";
+            }
+        }
+        
+        private function getFlexVersionBuildString():String
+        {
+            var flexPropertiesFile:File = _flexHomeDir.resolvePath("flex-sdk-description.xml");
+            var fs:FileStream = new FileStream();
+            fs.open(flexPropertiesFile, FileMode.READ);
+            var contents:XML = new XML(fs.readMultiByte(fs.bytesAvailable, "utf-8"));
+            fs.close();
+            return contents.version + "." + contents.build;
+        }
+        
+    ]]></fx:Script>
+    
+    <fx:Declarations>
+        <s:Sine id="ease"/>
+        <s:BlurFilter id="blur"/>
+    </fx:Declarations>
+    
+    <s:states>
+        <s:State name="default"/>
+        <s:State name="directoryState"/>
+        <s:State name="optionsState"/>
+        <s:State name="installState"/>
+    </s:states>
+    
+    <s:transitions>
+        <s:Transition id="showDefault" fromState="*" toState="default">
+            <s:Sequence id="t0" targets="{[zeroStepGroup]}" effectEnd="placeGroup(zeroStepGroup)">
+                <s:SetAction target="{zeroStepGroup}" property="visible" value="true"/>
+                <s:SetAction target="{firstStepGroup}" property="visible" value="false"/>
+                <s:SetAction target="{secondStepGroup}" property="visible" value="false"/>
+                <s:SetAction target="{thirdStepGroup}" property="visible" value="false"/>
+                <s:Move target="{zeroStepGroup}" xFrom="800" xTo="{this.width/2 - zeroStepGroup.width/2}" duration="500" easer="{ease}"/>
+            </s:Sequence>
+        </s:Transition>
+        <s:Transition id="showDirectory" fromState="*" toState="directoryState">
+            <s:Sequence id="t1" targets="{[firstStepGroup]}" effectEnd="placeGroup(firstStepGroup)">
+                <s:SetAction target="{zeroStepGroup}" property="visible" value="false"/>
+                <s:SetAction target="{firstStepGroup}" property="visible" value="true"/>
+                <s:SetAction target="{secondStepGroup}" property="visible" value="false"/>
+                <s:SetAction target="{thirdStepGroup}" property="visible" value="false"/>
+                <s:Move target="{firstStepGroup}" xFrom="800" xTo="{this.width/2 - firstStepGroup.width/2}" duration="500" easer="{ease}"/>
+            </s:Sequence>
+        </s:Transition>
+        <s:Transition id="showOptions" fromState="*" toState="optionsState">
+            <s:Sequence id="t2" targets="{[secondStepGroup]}" effectEnd="placeGroup(secondStepGroup)">
+                <s:SetAction target="{zeroStepGroup}" property="visible" value="false"/>
+                <s:SetAction target="{firstStepGroup}" property="visible" value="false"/>
+                <s:SetAction target="{secondStepGroup}" property="visible" value="true"/>
+                <s:SetAction target="{thirdStepGroup}" property="visible" value="false"/>
+                <s:Move target="{secondStepGroup}" xFrom="800" xTo="{this.width/2 - secondStepGroup.width/2}" duration="500" easer="{ease}"/>
+            </s:Sequence>
+        </s:Transition>
+        <s:Transition id="showInstall" fromState="*" toState="installState">
+            <s:Sequence id="t3" targets="{[thirdStepGroup]}" effectEnd="placeGroup(thirdStepGroup)">
+                <s:SetAction target="{zeroStepGroup}" property="visible" value="false"/>
+                <s:SetAction target="{firstStepGroup}" property="visible" value="false"/>
+                <s:SetAction target="{secondStepGroup}" property="visible" value="false"/>
+                <s:SetAction target="{thirdStepGroup}" property="visible" value="true"/>
+                <s:Move target="{thirdStepGroup}" xFrom="800" xTo="{this.width/2 - thirdStepGroup.width/2}" duration="500" easer="{ease}"/>
+            </s:Sequence>
+        </s:Transition>
+        <s:Transition id="backToDefault" fromState="directoryState" toState="default">
+            <s:Sequence id="t4" targets="{[zeroStepGroup]}" effectEnd="placeGroup(zeroStepGroup)">
+                <s:SetAction target="{zeroStepGroup}" property="visible" value="true"/>
+                <s:SetAction target="{firstStepGroup}" property="visible" value="false"/>
+                <s:SetAction target="{secondStepGroup}" property="visible" value="false"/>
+                <s:SetAction target="{thirdStepGroup}" property="visible" value="false"/>
+                <s:Move target="{zeroStepGroup}" xFrom="-800" xTo="{this.width/2 - zeroStepGroup.width/2}" duration="500" easer="{ease}"/>
+            </s:Sequence>
+        </s:Transition>
+        <s:Transition id="backToDirectory" fromState="optionsState" toState="directoryState">
+            <s:Sequence id="t5" targets="{[firstStepGroup]}" effectEnd="placeGroup(firstStepGroup)">
+                <s:SetAction target="{zeroStepGroup}" property="visible" value="false"/>
+                <s:SetAction target="{firstStepGroup}" property="visible" value="true"/>
+                <s:SetAction target="{secondStepGroup}" property="visible" value="false"/>
+                <s:SetAction target="{thirdStepGroup}" property="visible" value="false"/>
+                <s:Move target="{firstStepGroup}" xFrom="-800" xTo="{this.width/2 - firstStepGroup.width/2}" duration="500" easer="{ease}"/>
+            </s:Sequence>
+        </s:Transition>
+    </s:transitions>
+    <s:layout>
+        <s:BasicLayout/>
+    </s:layout>
+    <s:HGroup
+        left="0"
+        right="0"
+        paddingLeft="20"
+        paddingRight="20"
+        paddingTop="5"
+        horizontalAlign="right">
+        <controls2:LinkButton
+            text="{_viewResourceConstants.BTN_DISCLAIMER}"
+            fontFamily="openSansSemibold"
+            click="{showDisclaimer()}"
+            />
+        <s:Spacer width="100%"/>
+        <s:Label id="langLabel"
+                 horizontalCenter="0"
+                 height="100%"
+                 textAlign="right"
+                 text="{_viewResourceConstants.INFO_CURRENT_LANGUAGE}"
+                 fontFamily="openSansSemibold"
+                 verticalAlign="middle"/>
+        <s:DropDownList id="_langSelect"
+                        enabled="false"
+                        fontFamily="openSansSemibold"
+                        change="_langSelect_changeHandler(event)">
+            <s:layout>
+                <s:VerticalLayout requestedRowCount="-1"/>
+            </s:layout>
+        </s:DropDownList>
+    </s:HGroup>
+    <!--    <s:Group width="100%" top="275">-->
+    <!--        <s:HGroup gap="0" horizontalCenter="0" top="30">
+    <s:Label text="apache" fontFamily="openSansBold" color="0x677084" fontSize="24" />
+    <s:Label text="Flex" right="0"
+    fontFamily="openSansBold"
+    color="0x172647" fontSize="70"
+    />
+    </s:HGroup>-->
+    
+    <s:HGroup verticalAlign="middle" gap="5" horizontalCenter="0" top="300">
+        <s:Label text="{_viewResourceConstants.INFO_VERSION}" fontFamily="openSansBold" color="0x677084" fontSize="24" />
+        <s:Label text="{APACHE_FLEX_BIN_DISTRO_VERSION}" right="0"
+                 fontFamily="openSansBold"
+                 color="0x172647" fontSize="70"
+                 />
+    </s:HGroup>
+    <!--    </s:Group>-->
+    <s:Panel id="zeroStepGroup"
+             title="{_viewResourceConstants.INFO_SELECT_AIR_FLASH_PLAYER}"
+             width="640"
+             height="200"
+             top="380"
+             x="{zeroStepGroup.x = this.width/2 - zeroStepGroup.width/2}"
+             backgroundAlpha="0">
+        <s:layout>
+            <s:VerticalLayout
+                verticalAlign="middle"
+                horizontalAlign="center"
+                paddingRight="10"
+                paddingLeft="10"/>
+        </s:layout>
+        <s:HGroup verticalAlign="middle">
+            <s:Label text="{_viewResourceConstants.INFO_SELECT_FLEX}" width="200" fontFamily="openSansBold" />
+            <s:DropDownList id="flexVersion"
+                            dataProvider="{FLEX_VERSIONS}"
+                            labelField="label"
+                            width="200"
+                            fontFamily="openSansSemibold"
+                            change="handleFlexVersionChange(event)">
+                <s:layout>
+                    <s:VerticalLayout requestedRowCount="-1"/>
+                </s:layout>
+            </s:DropDownList>
+        </s:HGroup>
+        <s:HGroup verticalAlign="middle">
+            <s:Label text="{_viewResourceConstants.INFO_SELECT_AIR}" width="200" fontFamily="openSansBold" />
+            <s:DropDownList id="airVersion"
+                            dataProvider="{AIR_VERSIONS}"
+                            width="200"
+                            fontFamily="openSansSemibold"
+                            change="handleAirVersionChange(event)">
+                <s:layout>
+                    <s:VerticalLayout requestedRowCount="-1"/>
+                </s:layout>
+            </s:DropDownList>
+        </s:HGroup>
+        <s:HGroup verticalAlign="middle">
+            <s:Label text="{_viewResourceConstants.INFO_SELECT_FLASH}" width="200" fontFamily="openSansBold" />
+            <s:DropDownList id="flashPlayerVersion"
+                            width="200"
+                            dataProvider="{FLASH_PLAYER_VERSIONS}"
+                            fontFamily="openSansSemibold"
+                            change="handleFlashPlayerVersionChange(event)">
+                <s:layout>
+                    <s:VerticalLayout requestedRowCount="-1"/>
+                </s:layout>
+            </s:DropDownList>
+        </s:HGroup>
+        <s:controlBarContent>
+            <s:Spacer
+                width="100%"/>
+            <s:Button id="directoryBtn"
+                      styleName="mainBtnStyle"
+                      width="{_standardButtonWidth}"
+                      height="32"
+                      right="10"
+                      label="{_viewResourceConstants.BTN_LABEL_NEXT}"
+                      enabled="false"
+                      click="handleZeroStepNextBtnClick(event)"/>
+        </s:controlBarContent>
+    </s:Panel>
+    
+    <s:Panel id="firstStepGroup"
+             title="{_viewResourceConstants.INFO_SELECT_DIRECTORY_INSTALL}"
+             width="640"
+             height="200"
+             top="380"
+             x="{firstStepGroup.x = this.width/2 - firstStepGroup.width/2}"
+             visible="false"
+             visible.directoryState="true"
+             backgroundAlpha="0">
+        <s:layout>
+            <s:HorizontalLayout
+                verticalAlign="middle"
+                paddingRight="10"
+                paddingLeft="10"/>
+        </s:layout>
+        <s:TextInput id="flexSDKTxtInput"
+                     width="100%"
+                     prompt="{_viewResourceConstants.SELECT_PATH_PROMPT}"
+                     change="handleFlexSDXTxtInputChange(event)"/>
+        <s:Button id="browseBtn"
+                  styleName="browseBtnStyle"
+                  width="{_standardButtonWidth}"
+                  height="32"
+                  label="{_viewResourceConstants.BTN_LABEL_BROWSE}"
+                  click="browseForSDK(event)"
+                  toolTip="{_viewResourceConstants.INFO_SELECT_DIRECTORY}"/>
+        <s:controlBarContent>
+            <s:Button id="firstStepBackBtn"
+                      styleName="mainBtnStyle"
+                      width="{_standardButtonWidth}"
+                      height="32"
+                      left="10"
+                      label="{_viewResourceConstants.BTN_LABEL_BACK}"
+                      enabled="true"
+                      click="handleFirstStepBackBtnClick(event)"/>
+            <s:Spacer
+                width="100%"/>
+            <s:Button id="nextBtn"
+                      styleName="mainBtnStyle"
+                      width="{_standardButtonWidth}"
+                      height="32"
+                      right="10"
+                      label="{_viewResourceConstants.BTN_LABEL_NEXT}"
+                      enabled="false"
+                      click="handleFirstStepNextBtnClick(event)"/>
+        </s:controlBarContent>
+    </s:Panel>
+    <s:Panel id="secondStepGroup"
+             title="{_viewResourceConstants.INFO_LICENSE_AGREEMENTS}"
+             width="720"
+             height="250"
+             top="370"
+             visible="false"
+             visible.optionsState="true"
+             backgroundAlpha="0"> 
+        <s:controlBarContent>
+            <s:Button id="secondStepBackBtn"
+                      styleName="mainBtnStyle"
+                      width="{_standardButtonWidth}"
+                      height="32"
+                      left="10"
+                      label="{_viewResourceConstants.BTN_LABEL_BACK}"
+                      enabled="true"
+                      click="handleSecondStepBackBtnClick(event)"/>
+            <s:Spacer
+                width="100%"/>
+            <s:Button id="installBtn"
+                      styleName="mainBtnStyle"
+                      width="{_standardButtonWidth}"
+                      height="32"
+                      right="10"
+                      label="{_viewResourceConstants.BTN_LABEL_INSTALL}"
+                      enabled="false"
+                      click="handleInstallBtnClick(event)"/>
+        </s:controlBarContent>
+        <s:layout>
+            <s:VerticalLayout
+                verticalAlign="middle"
+                paddingRight="10"
+                paddingLeft="10"/>
+        </s:layout>
+        <s:HGroup
+            width="100%"
+            height="100%"
+            horizontalAlign="center">
+            <s:List id="installComponentsList"
+                    width="50%"
+                    height="100%"
+                    horizontalScrollPolicy="off"
+                    itemRenderer="org.apache.flex.packageflexsdk.view.itemrenderers.OptionalInstallItemRenderer"
+                    dataProvider="{_installerComponentsDataProvider}"
+                    change="handleOptionalInstallsChange(event)" creationComplete="installComponentsList_creationCompleteHandler(event)">
+                <s:layout>
+                    <s:VerticalLayout/>
+                </s:layout>
+            </s:List>
+            <s:VGroup width="50%"
+                      height="100%"
+                      horizontalAlign="center"
+                      gap="5">
+                <controls2:LinkButton id="licenseLinkBtn"
+                                      text="{_currentLicenseLabel}"
+                                      fontWeight="bold"
+                                      click="{handleLicenceBtnClick(event)}"
+                                      paddingTop="5"
+                                      includeInLayout="false"
+                                      />
+                <s:TextArea id="optionalInstallsTxtArea" text="{_viewResourceConstants.INFO_NEED_TO_READ_AND_AGREE_TO_LICENSE}"
+                            fontFamily="openSansSemiBold"
+                            fontSize="12"
+                            width="100%"
+                            height="100%"
+                            verticalScrollPolicy="off"
+                            editable="false"/>
+            </s:VGroup>
+        </s:HGroup>
+        <!--        <s:HGroup
+        width="100%"
+        height="20"
+        horizontalAlign="center"
+        verticalAlign="middle">
+        <s:CheckBox id="installChkBx"
+        label="{_viewResourceConstants.INSTALL_AGREE_ALL}"
+        selected="false" 
+        visible="true"/>
+        </s:HGroup>-->
+    </s:Panel>
+    <s:Panel id="thirdStepGroup"
+             title="{_viewResourceConstants.INFO_INSTALLING}"
+             width="640"
+             height="200"
+             top="380"
+             visible="false"
+             visible.installState="true"
+             backgroundAlpha="0">
+        <s:layout>
+            <s:VerticalLayout
+                horizontalAlign="center"
+                verticalAlign="middle"
+                paddingTop="10"
+                paddingRight="10"
+                paddingLeft="10"
+                gap="15"/>
+        </s:layout>
+        <controls1:MultiStepProgressIndicator
+            steps="{_installationSteps}"/>
+        <s:Label id="lastMessage"
+                 text="{lastFilteredPublicMessage}"
+                 fontFamily="openSansLightItalic"
+                 textAlign="center"
+                 width="80%" height="100%"
+                 horizontalCenter="0"/>
+        <controls:ProgressBar id="progressBar"
+                              width="60%"
+                              height="21"/>
+        <s:Button id="openApacheFlexFolderBtn"
+                  styleName="mainBtnStyle"
+                  width="225"
+                  height="32"
+                  visible="false"
+                  includeInLayout="false"
+                  label="{_viewResourceConstants.BTN_LABEL_OPEN_APACHE_FLEX_FOLDER}"
+                  toolTip="{_flexHome}"
+                  click="openApacheFlexFolder(event)"/>
+        <components:Tracker id="tracker" width="1" height="1" visible="false"/>
+    </s:Panel>
+    <s:HGroup
+        left="0"
+        right="0"
+        bottom="20"
+        paddingLeft="20"
+        paddingRight="20"
+        paddingTop="0"
+        verticalAlign="middle">
+        <s:Button id="installLogBtn"
+                  styleName="genericBtnStyle"
+                  width="110"
+                  height="32"
+                  label="{_viewResourceConstants.BTN_LABEL_INSTALL_LOG}"
+                  click="showConsole(event)"/>
+        <s:Spacer width="100%"/>
+        <s:Label fontFamily="openSansLightItalic" text="{_viewResourceConstants.INFO_TRACKING}"
+                 styleName="linkText" maxDisplayedLines="2"
+                 mouseOver="onMouseRoll(event)" mouseOut="onMouseRoll(event)"
+                 click="navigateToURL(new URLRequest('http://flex.apache.org/about-privacy.html'))"
+                 buttonMode="true"
+                 useHandCursor="true"
+                 mouseChildren="false"/>
+        <s:Spacer width="100%"/>
+        <s:Button id="closeBtn"
+                  styleName="genericBtnStyle"
+                  width="{_standardButtonWidth}"
+                  height="32"
+                  label="{_viewResourceConstants.BTN_LABEL_CLOSE}"
+                  click="closeApplication(event)"/>
+    </s:HGroup>
+    <!-- used to measure text -->
+    <s:Button id="hiddenButton" visible="false" includeInLayout="false"/>
 </s:WindowedApplication>
diff --git a/installer/src/properties/de_DE.properties b/installer/src/properties/de_DE.properties
index 66f3bac..3a7d24e 100644
--- a/installer/src/properties/de_DE.properties
+++ b/installer/src/properties/de_DE.properties
@@ -31,6 +31,7 @@
 BTN_LABEL_INSTALL_LOG=PROTOKOLL ANZEIGEN
 BTN_LABEL_MPL_LICENSE=MPL LIZENZ ANZEIGEN
 BTN_LABEL_NEXT=WEITER
+BTN_LABEL_NEXT=ZURÜCK
 BTN_DISCLAIMER=Haftungsausschluss
 BTN_LABEL_OPEN_APACHE_FLEX_FOLDER=APACHE FLEX ORDNER ÖFFNEN
 ERROR_CONFIG_XML_LOAD=Fehler beim Laden der XML Konfigurationsdatei: 
diff --git a/installer/src/properties/el_GR.properties b/installer/src/properties/el_GR.properties
index e3c2cd9..189d7f2 100644
--- a/installer/src/properties/el_GR.properties
+++ b/installer/src/properties/el_GR.properties
@@ -21,6 +21,7 @@
 BTN_LABEL_INSTALL=ΕΓΚΑΤΑΣΤΑΣΗ
 BTN_LABEL_INSTALL_LOG=ΑΡΧΕΙΟ ΚΑΤΑΓΡΑΦΗΣ ΕΓΚΑΤΑΣΤΑΣΗΣ
 BTN_LABEL_NEXT=ΕΠΟΜΕΝΟ
+BTN_LABEL_BACK=πίσω
 BTN_LABEL_OPEN_APACHE_FLEX_FOLDER=ΑΝΟΙΓΜΑ ΦΑΚΕΛΟΥ APACHE FLEX
 ERROR_CONFIG_XML_LOAD=Πρόεκυψε σφάλμα κατά την προσπάθεια φόρτωσης του αρχείου ρυθμίσεων XML:
 ERROR_DIR_NOT_EMPTY=Ο κατάλογος που επιλέξατε δεν είναι άδειος
diff --git a/installer/src/properties/en_US.properties b/installer/src/properties/en_US.properties
index 6ea6616..cd01459 100644
--- a/installer/src/properties/en_US.properties
+++ b/installer/src/properties/en_US.properties
@@ -32,10 +32,12 @@
 BTN_LABEL_INSTALL_LOG=INSTALL LOG
 BTN_LABEL_MPL_LICENSE=SHOW MPL LICENSE
 BTN_LABEL_NEXT=NEXT
+BTN_LABEL_BACK=BACK
 BTN_DISCLAIMER=Disclaimer
 BTN_LABEL_OPEN_APACHE_FLEX_FOLDER=OPEN APACHE FLEX FOLDER
 ERROR_CONFIG_XML_LOAD=Error while trying to load XML configuration file: 
 ERROR_DIR_NOT_EMPTY=The selected directory is not empty
+ERROR_DIR_REQUIRE_ADMIN_RIGHTS=The selected directory requires Administrator rights to write files
 ERROR_INVALID_AIR_SDK_URL_MAC=Adobe AIR SDK URL for Mac invalid in configuration file
 ERROR_INVALID_AIR_SDK_URL_WINDOWS=Adobe AIR SDK URL for Windows invalid in configuration file
 ERROR_INVALID_FLASH_PLAYER_SWC_URL=Flash Player swc URL invalid in configuration file
@@ -66,6 +68,7 @@
 FETCH_MIRROR_LIST_DONE=Fetched the mirror list from Apache.org.
 FETCH_MIRROR_LIST_PARSED=Parsed the mirror list using the country code and got this domain: 
 INFO_ABORT_INSTALLATION=Installation aborted
+INFO_USER_ABORT_INSTALLATION=User closed the installer before installation was completed. Current step: 
 INFO_APP_INVOKED=Invoked in command line mode with the following arguments: 
 INFO_CREATING_FLEX_HOME=Creating Apache Flex home
 INFO_CREATING_TEMP_DIR=Creating temporary directory
diff --git a/installer/src/properties/es_ES.properties b/installer/src/properties/es_ES.properties
index 9a9170c..691db36 100644
--- a/installer/src/properties/es_ES.properties
+++ b/installer/src/properties/es_ES.properties
@@ -31,6 +31,7 @@
 BTN_LABEL_INSTALL_LOG=DETALLES DE INSTALACIÓN
 BTN_LABEL_MPL_LICENSE=VER LICENCIA MPL
 BTN_LABEL_NEXT=SIGUIENTE
+BTN_LABEL_BACK=ANTERIOR
 BTN_DISCLAIMER=Aviso legal
 BTN_LABEL_OPEN_APACHE_FLEX_FOLDER=MOSTRAR UBICACIÓN DE APACHE FLEX
 ERROR_CONFIG_XML_LOAD=Se produjo un error al intentar leer el archivo de configuración: 
diff --git a/installer/src/properties/fr_FR.properties b/installer/src/properties/fr_FR.properties
index e3f0cb8..f3f8372 100644
--- a/installer/src/properties/fr_FR.properties
+++ b/installer/src/properties/fr_FR.properties
@@ -31,6 +31,7 @@
 BTN_LABEL_INSTALL_LOG=JOURNAL D'INSTALLATION
 BTN_LABEL_MPL_LICENSE=AFFICHER LA LICENCE MPL
 BTN_LABEL_NEXT=SUIVANT
+BTN_LABEL_BACK=RETOUR
 BTN_DISCLAIMER=Notes légales
 BTN_LABEL_OPEN_APACHE_FLEX_FOLDER=OUVRIR LE DOSSIER APACHE FLEX
 ERROR_CONFIG_XML_LOAD=Erreur lors du chargement du fichier de configuration XML: 
diff --git a/installer/src/properties/ko_KR.properties b/installer/src/properties/ko_KR.properties
index 789f6cc..20c219a 100644
--- a/installer/src/properties/ko_KR.properties
+++ b/installer/src/properties/ko_KR.properties
@@ -31,6 +31,7 @@
 BTN_LABEL_INSTALL_LOG=설치 로그
 BTN_LABEL_MPL_LICENSE=MPL 라이센스 보기
 BTN_LABEL_NEXT=다음
+BTN_LABEL_BACK=다시
 BTN_DISCLAIMER=거부
 BTN_LABEL_OPEN_APACHE_FLEX_FOLDER=아파치 플렉스 폴더 열기
 ERROR_CONFIG_XML_LOAD=XML 설정파일 로딩시 에러 : XML 설정 파일을 읽는 중 에러발생 : 
diff --git a/installer/src/properties/nl_NL.properties b/installer/src/properties/nl_NL.properties
index 3f2c61b..d317611 100644
--- a/installer/src/properties/nl_NL.properties
+++ b/installer/src/properties/nl_NL.properties
@@ -31,6 +31,7 @@
 BTN_LABEL_INSTALL_LOG=TOON LOG
 BTN_LABEL_MPL_LICENSE=TOON MPL LICENSE
 BTN_LABEL_NEXT=VERDER
+BTN_LABEL_BACK=TERUG
 BTN_DISCLAIMER=Disclaimer
 BTN_LABEL_OPEN_APACHE_FLEX_FOLDER=OPEN APACHE FLEX MAP
 ERROR_CONFIG_XML_LOAD=Fout tijdens het laden van het XML configuratie bestand: 
diff --git a/installer/src/properties/pl_PL.properties b/installer/src/properties/pl_PL.properties
index fba4bc4..1039b7e 100644
--- a/installer/src/properties/pl_PL.properties
+++ b/installer/src/properties/pl_PL.properties
@@ -32,6 +32,7 @@
 BTN_LABEL_INSTALL_LOG=LOGI INSTALACJI
 BTN_LABEL_MPL_LICENSE=POKAŻ LICENCJĘ MPL
 BTN_LABEL_NEXT=NASTĘPNY
+BTN_LABEL_BACK=WSTECZ
 BTN_DISCLAIMER=Wyłączenie odpowiedzialności
 BTN_LABEL_OPEN_APACHE_FLEX_FOLDER=OTWÓRZ FOLDER APACHE FLEX
 ERROR_CONFIG_XML_LOAD=Błąd podczas ładowania pliku konfiguracyjnego XML: 
diff --git a/installer/src/properties/pt_BR.properties b/installer/src/properties/pt_BR.properties
index 422ee2a..fd49a7e 100644
--- a/installer/src/properties/pt_BR.properties
+++ b/installer/src/properties/pt_BR.properties
@@ -32,6 +32,7 @@
 BTN_LABEL_INSTALL_LOG=LOG
 BTN_LABEL_MPL_LICENSE=LICENÇA MPL
 BTN_LABEL_NEXT=PROX.
+BTN_LABEL_BACK=RETROCEDER
 BTN_DISCLAIMER=Disclaimer
 BTN_LABEL_OPEN_APACHE_FLEX_FOLDER=ABRIR DIRETÓRIO APACHE FLEX
 ERROR_CONFIG_XML_LOAD=Erro ao tentar carregar o arquivo XML de configuração: 
diff --git a/installer/src/properties/zh_CN.properties b/installer/src/properties/zh_CN.properties
index 3d7392c..dba9c41 100755
--- a/installer/src/properties/zh_CN.properties
+++ b/installer/src/properties/zh_CN.properties
@@ -33,6 +33,7 @@
 BTN_LABEL_INSTALL_LOG=安装日志
 BTN_LABEL_MPL_LICENSE=显示 MPL 许可协议
 BTN_LABEL_NEXT=下一步
+BTN_LABEL_BACK=后面
 BTN_DISCLAIMER=免责声明
 BTN_LABEL_OPEN_APACHE_FLEX_FOLDER=打开 Apache Flex 目录
 ERROR_CONFIG_XML_LOAD=尝试加载 XML 配置文件时遇到错误: 
diff --git a/installer/src/properties/zh_TW.properties b/installer/src/properties/zh_TW.properties
index e78f457..e91d00a 100755
--- a/installer/src/properties/zh_TW.properties
+++ b/installer/src/properties/zh_TW.properties
@@ -33,6 +33,7 @@
 BTN_LABEL_INSTALL_LOG=安裝日誌
 BTN_LABEL_MPL_LICENSE=顯示 MPL 授權合約
 BTN_LABEL_NEXT=下一步
+BTN_LABEL_BACK=后面
 BTN_DISCLAIMER=免責聲明
 BTN_LABEL_OPEN_APACHE_FLEX_FOLDER=打開 Apache Flex 目錄
 ERROR_CONFIG_XML_LOAD=嘗試載入 XML 設定檔案時遇到錯誤: 
diff --git a/mavenizer/converters/flash/src/main/java/org/apache/flex/utilities/converter/flash/FlashConverter.java b/mavenizer/converters/flash/src/main/java/org/apache/flex/utilities/converter/flash/FlashConverter.java
index b24e446..5ce72f6 100644
--- a/mavenizer/converters/flash/src/main/java/org/apache/flex/utilities/converter/flash/FlashConverter.java
+++ b/mavenizer/converters/flash/src/main/java/org/apache/flex/utilities/converter/flash/FlashConverter.java
@@ -241,13 +241,6 @@
                 playerglobal.setPackaging("swc");
                 playerglobal.addDefaultBinaryArtifact(playerglobalSwc);
                 writeArtifact(playerglobal);
-
-                // Generate dummy pom-artifact which we are allowed to deploy.
-                final MavenArtifact playerglobalDummy = new MavenArtifact();
-                playerglobalDummy.setGroupId("org.apache.flex.runtime");
-                playerglobalDummy.setArtifactId("flashplayer");
-                playerglobalDummy.setVersion(version);
-                writeArtifact(playerglobalDummy);
             }
         }
     }
diff --git a/mavenizer/core/src/main/java/org/apache/flex/utilities/converter/core/AirDownloader.java b/mavenizer/core/src/main/java/org/apache/flex/utilities/converter/core/AirDownloader.java
index db1e7f4..6e2b9ce 100644
--- a/mavenizer/core/src/main/java/org/apache/flex/utilities/converter/core/AirDownloader.java
+++ b/mavenizer/core/src/main/java/org/apache/flex/utilities/converter/core/AirDownloader.java
@@ -28,6 +28,14 @@
  */
 public class AirDownloader {
 
+    public void downloadAndConvert(File targetDirectory, String version, PlatformType platformType) throws Exception {
+        final DownloadRetriever downloadRetriever = new DownloadRetriever();
+        final File airSDKSourceDirectory = downloadRetriever.retrieve(SdkType.AIR, version, platformType);
+
+        final AirConverter airConverter = new AirConverter(airSDKSourceDirectory, targetDirectory);
+        airConverter.convert();
+    }
+
     public static void main(String[] args) throws Exception {
         if(args.length != 3) {
             System.out.println("Usage: AirDownloader {air-version} {target-directory} {platform-type}");
@@ -41,11 +49,7 @@
             throw new Exception("Unknown platform type: " + args[2]);
         }
 
-        final DownloadRetriever downloadRetriever = new DownloadRetriever();
-        final File airSDKSourceDirectory = downloadRetriever.retrieve(SdkType.AIR, version, platformType);
-
-        final AirConverter airConverter = new AirConverter(airSDKSourceDirectory, targetDirectory);
-        airConverter.convert();
+        new AirDownloader().downloadAndConvert(targetDirectory, version, platformType);
     }
 
 }
diff --git a/mavenizer/core/src/main/java/org/apache/flex/utilities/converter/core/FlashDownloader.java b/mavenizer/core/src/main/java/org/apache/flex/utilities/converter/core/FlashDownloader.java
index a0e7976..b90a223 100644
--- a/mavenizer/core/src/main/java/org/apache/flex/utilities/converter/core/FlashDownloader.java
+++ b/mavenizer/core/src/main/java/org/apache/flex/utilities/converter/core/FlashDownloader.java
@@ -27,15 +27,7 @@
  */
 public class FlashDownloader {
 
-    public static void main(String[] args) throws Exception {
-        if(args.length != 2) {
-            System.out.println("Usage: FlashDownloader {player-version} {target-directory}");
-            return;
-        }
-
-        final String version = args[0];
-        final File targetDirectory = new File(args[1]);
-
+    public void downloadAndConvert(File targetDirectory, String version) throws Exception {
         final DownloadRetriever downloadRetriever = new DownloadRetriever();
         final File playerglobalSourceFile = downloadRetriever.retrieve(SdkType.FLASH, version);
 
@@ -58,4 +50,16 @@
         flashConverter.convert();
     }
 
+    public static void main(String[] args) throws Exception {
+        if(args.length != 2) {
+            System.out.println("Usage: FlashDownloader {player-version} {target-directory}");
+            return;
+        }
+
+        final String version = args[0];
+        final File targetDirectory = new File(args[1]);
+
+        new FlashDownloader().downloadAndConvert(targetDirectory, version);
+    }
+
 }
diff --git a/mavenizer/retrievers/download/src/main/java/org/apache/flex/utilities/converter/retrievers/download/DownloadRetriever.java b/mavenizer/retrievers/download/src/main/java/org/apache/flex/utilities/converter/retrievers/download/DownloadRetriever.java
index e9c6c07..ff0a05e 100644
--- a/mavenizer/retrievers/download/src/main/java/org/apache/flex/utilities/converter/retrievers/download/DownloadRetriever.java
+++ b/mavenizer/retrievers/download/src/main/java/org/apache/flex/utilities/converter/retrievers/download/DownloadRetriever.java
@@ -54,7 +54,6 @@
         return retrieve(type, version, null);
     }
 
-    @Override
     public File retrieve(SdkType type, String version, PlatformType platformType) throws RetrieverException {
         try {
             if (type.equals(SdkType.FLASH) || type.equals(SdkType.AIR)) {