diff --git a/.gitignore b/.gitignore
index 4ee07d5..1177a2c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -136,5 +136,4 @@
 air-sdk-description.xml
 samples/descriptor-sample.xml
 include/FlashRuntimeExtensions.h
-
 visualcomps
diff --git a/frameworks/projects/framework/src/FrameworkClasses.as b/frameworks/projects/framework/src/FrameworkClasses.as
index cb2a093..51e1c64 100644
--- a/frameworks/projects/framework/src/FrameworkClasses.as
+++ b/frameworks/projects/framework/src/FrameworkClasses.as
@@ -164,6 +164,7 @@
 	import mx.utils.DisplayUtil; DisplayUtil;
     import mx.utils.GetTimerUtil; GetTimerUtil;
     import mx.utils.HSBColor; HSBColor;
+	import mx.utils.IOSPlatformVersionOverride; IOSPlatformVersionOverride;
     import mx.utils.LinkedList; LinkedList;
 	import mx.utils.LinkedListNode; LinkedListNode;
 	import mx.utils.OnDemandEventDispatcher; OnDemandEventDispatcher;
diff --git a/frameworks/projects/framework/src/mx/utils/IOSPlatformVersionOverride.as b/frameworks/projects/framework/src/mx/utils/IOSPlatformVersionOverride.as
new file mode 100644
index 0000000..b1cf61e
--- /dev/null
+++ b/frameworks/projects/framework/src/mx/utils/IOSPlatformVersionOverride.as
@@ -0,0 +1,42 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 mx.utils
+{
+	import flash.display.DisplayObject;
+	import flash.system.Capabilities;
+	
+	import mx.core.mx_internal;
+
+	[Mixin]
+	public class IOSPlatformVersionOverride
+	{
+		public static function init(root:DisplayObject):void
+		{
+			var c:Class = Capabilities;
+			//Set this override value on if we are 
+			// a. on the AIR Simulator
+			// b. simulating iOS
+			if(c.version.indexOf("IOS") > -1 && c.manufacturer != "Adobe iOS")
+			{
+				Platform.mx_internal::iosVersionOverride =  "7.0";
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/framework/src/mx/utils/Platform.as b/frameworks/projects/framework/src/mx/utils/Platform.as
index 51e077c..6a19b2e 100644
--- a/frameworks/projects/framework/src/mx/utils/Platform.as
+++ b/frameworks/projects/framework/src/mx/utils/Platform.as
@@ -51,11 +51,18 @@
 	protected static var _isBrowser:Boolean;
 	protected static var _isAir:Boolean;
     private static var _osVersion: String = null;
+
 	/**
-	 * This value is set from AndroidVersionMediaQueryParserOverride
+	 * This value is set from AndroidPlatformVersionOverride
 	 * 
 	 */
 	mx_internal static var androidVersionOverride:String;
+
+	/**
+	 * This value is set from IOSPlatformVersionOverride
+	 * 
+	 */
+	mx_internal static var iosVersionOverride:String;
 	
 	/**
 	 *  Returns true if the application is running on IOS.
@@ -235,14 +242,18 @@
     {
         //We needed to compute _osVersion later than getPlatforms, because it relies on resources that  ready later
         if (_osVersion == null){
-			if(mx_internal::androidVersionOverride == null)
+			if(mx_internal::androidVersionOverride == null && mx_internal::iosVersionOverride == null)
 			{
 				_osVersion = computeOSVersionString();	
 			}
-			else
+			else if(mx_internal::androidVersionOverride != null)
 			{
 				_osVersion = mx_internal::androidVersionOverride; 
 			}
+			else if(mx_internal::iosVersionOverride != null)
+			{
+				_osVersion = mx_internal::iosVersionOverride; 
+			}
         }
         return _osVersion;
     }
diff --git a/frameworks/projects/mobilecomponents/manifest.xml b/frameworks/projects/mobilecomponents/manifest.xml
index 4e85f42..810bfea 100644
--- a/frameworks/projects/mobilecomponents/manifest.xml
+++ b/frameworks/projects/mobilecomponents/manifest.xml
@@ -25,7 +25,6 @@
 -->
 <componentPackage>
     <component id="ActionBar" class="spark.components.ActionBar"/>
-	<component id="MobileBusyIndicator" class="spark.components.MobileBusyIndicator" />
     <component id="CrossFadeViewTransition" class="spark.transitions.CrossFadeViewTransition"/>
     <component id="DateSpinner" class="spark.components.DateSpinner"/>
     <component id="DateSpinnerItemRenderer" class="spark.components.calendarClasses.DateSpinnerItemRenderer"/>
diff --git a/frameworks/projects/mobilecomponents/src/spark/components/MobileBusyIndicator.as b/frameworks/projects/mobilecomponents/src/spark/components/MobileBusyIndicator.as
deleted file mode 100644
index c9f22d1..0000000
--- a/frameworks/projects/mobilecomponents/src/spark/components/MobileBusyIndicator.as
+++ /dev/null
@@ -1,181 +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 spark.components
-{
-	import flash.events.Event;
-	import mx.core.IUIComponent;
-	import mx.core.IVisualElement;
-	import mx.events.FlexEvent;
-	import mx.states.State;
-	import spark.components.supportClasses.SkinnableComponent;
-	
-	[SkinState("rotatingState")]
-	[SkinState("notRotatingState")]
-	
-	public class MobileBusyIndicator extends SkinnableComponent
-	{
-		private var effectiveVisibility:Boolean = false;
-		private var effectiveVisibilityChanged:Boolean = true;
-		
-		public function MobileBusyIndicator()
-		{
-			super();
-			// Listen to added to stage and removed from stage.
-			// Start rotating when we are on the stage and stop
-			// when we are removed from the stage.
-			addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
-			addEventListener(Event.REMOVED_FROM_STAGE, removedFromStageHandler);
-			states = 	[
-							new State({name:"notRotatingState"}),
-							new State({name:"rotatingState"})
-						];
-		}
-		
-		override protected function getCurrentSkinState():String
-		{
-			return currentState;
-		} 
-		
-		private function addedToStageHandler(event:Event):void
-		{
-			// Check our visibility here since we haven't added
-			// visibility listeners yet.
-			computeEffectiveVisibility();
-			
-			if (canRotate())
-				currentState = "rotatingState";
-			
-			addVisibilityListeners();
-			invalidateSkinState();
-		}
-		
-		private function removedFromStageHandler(event:Event):void
-		{
-			currentState = "notRotatingState";
-			
-			removeVisibilityListeners();
-			invalidateSkinState();
-		}
-		
-		private function computeEffectiveVisibility():void
-		{
-			
-			// Check our design layer first.
-			if (designLayer && !designLayer.effectiveVisibility)
-			{
-				effectiveVisibility = false;
-				return;
-			}
-			
-			// Start out with true visibility and enablement
-			// then loop up parent-chain to see if any of them are false.
-			effectiveVisibility = true;
-			var current:IVisualElement = this;
-			
-			while (current)
-			{
-				if (!current.visible)
-				{
-					if (!(current is IUIComponent) || !IUIComponent(current).isPopUp)
-					{
-						// Treat all pop ups as if they were visible. This is to 
-						// fix a bug where the BusyIndicator does not spin when it 
-						// is inside modal popup. The problem is in we do not get 
-						// an event when the modal window is made visible in 
-						// PopUpManagerImpl.fadeInEffectEndHandler(). When the modal
-						// window is made visible, setVisible() is passed "true" so 
-						// as to not send an event. When do get events when the 
-						// non-modal windows are popped up. Only modal windows are
-						// a problem.
-						// The downside of this fix is BusyIndicator components that are
-						// inside of hidden, non-modal, popup windows will paint themselves
-						// on a timer.
-						effectiveVisibility = false;
-						break;                  
-					}
-				}
-				
-				current = current.parent as IVisualElement;
-			}
-		}
-		
-		/**
-		 *  The BusyIndicator can be rotated if it is both on the display list and 
-		 *  visible.
-		 * 
-		 *  @returns true if the BusyIndicator can be rotated, false otherwise.
-		 */ 
-		private function canRotate():Boolean
-		{
-			if (effectiveVisibility && stage != null)
-				return true;
-			
-			return false;
-		}
-		
-		
-		/**
-		 *  @private
-		 *  Add event listeners for SHOW and HIDE on all the ancestors up the parent chain.
-		 *  Adding weak event listeners just to be safe.
-		 */
-		private function addVisibilityListeners():void
-		{
-			var current:IVisualElement = this.parent as IVisualElement;
-			while (current)
-			{
-				// add visibility listeners to the parent
-				current.addEventListener(FlexEvent.HIDE, visibilityChangedHandler, false, 0, true);
-				current.addEventListener(FlexEvent.SHOW, visibilityChangedHandler, false, 0, true);
-				
-				current = current.parent as IVisualElement;
-			}
-		}
-		
-		/**
-		 *  @private
-		 *  Remove event listeners for SHOW and HIDE on all the ancestors up the parent chain.
-		 */
-		private function removeVisibilityListeners():void
-		{
-			var current:IVisualElement = this;
-			while (current)
-			{
-				current.removeEventListener(FlexEvent.HIDE, visibilityChangedHandler, false);
-				current.removeEventListener(FlexEvent.SHOW, visibilityChangedHandler, false);
-				
-				current = current.parent as IVisualElement;
-			}
-		}
-		
-		/**
-		 *  @private
-		 *  Event call back whenever the visibility of us or one of our ancestors 
-		 *  changes
-		 */
-		private function visibilityChangedHandler(event:FlexEvent):void
-		{
-			effectiveVisibilityChanged = true;
-			invalidateProperties();
-		}
-
-		
-	}
-}
\ No newline at end of file
diff --git a/frameworks/projects/mobilecomponents/src/spark/components/SpinnerList.as b/frameworks/projects/mobilecomponents/src/spark/components/SpinnerList.as
index f674806..cffc008 100644
--- a/frameworks/projects/mobilecomponents/src/spark/components/SpinnerList.as
+++ b/frameworks/projects/mobilecomponents/src/spark/components/SpinnerList.as
@@ -396,6 +396,18 @@
             }
         }
     }
+	
+	override protected function itemSelected(index:int, selected:Boolean):void
+	{
+		super.itemSelected(index, selected);
+		
+		var renderer:Object = dataGroup ? dataGroup.getElementAt(index) : null;
+		
+		if (renderer is IItemRenderer)
+		{
+			IItemRenderer(renderer).selected = selected;
+		}
+	}
     
     /**
      *  @private
diff --git a/frameworks/projects/mobilecomponents/src/spark/components/SpinnerListItemRenderer.as b/frameworks/projects/mobilecomponents/src/spark/components/SpinnerListItemRenderer.as
index 1a5f26a..6a5c643 100644
--- a/frameworks/projects/mobilecomponents/src/spark/components/SpinnerListItemRenderer.as
+++ b/frameworks/projects/mobilecomponents/src/spark/components/SpinnerListItemRenderer.as
@@ -21,6 +21,8 @@
 
 import mx.core.DPIClassification;
 import mx.core.mx_internal;
+
+import spark.components.supportClasses.ListBase;
     
 use namespace mx_internal;
 
@@ -83,12 +85,45 @@
         }
     }
     
+	//--------------------------------------------------------------------------
+	//
+	//  Variables
+	//
+	//--------------------------------------------------------------------------
+	
+	private var _colorName:String = "color";
+	
     //--------------------------------------------------------------------------
     //
     //  Overridden Methods
     //
     //--------------------------------------------------------------------------
     
+	override public function set selected(value:Boolean):void
+	{
+		var oldValue:Boolean = selected;
+		super.selected = value;
+		if(oldValue != selected)
+		{
+			if(selected)
+			{
+				_colorName = "accentColor"; // highlighted item
+			}else{
+				_colorName = "color"; // reset to use standard color
+			}
+			setTextProperties();
+		}
+	}
+	
+	private function setTextProperties():void
+	{
+		if (labelDisplay)
+		{
+			labelDisplay.colorName = _colorName;
+			labelDisplay.alpha = enabled ? 1 : .5;
+		}        
+	}
+	
     /**
      *  @private
      *
diff --git a/frameworks/projects/mobiletheme/defaults.css b/frameworks/projects/mobiletheme/defaults.css
index 7de40e3..c4bed86 100644
--- a/frameworks/projects/mobiletheme/defaults.css
+++ b/frameworks/projects/mobiletheme/defaults.css
@@ -137,6 +137,11 @@
 	borderColor: 0;
 }
 
+CalloutButton
+{
+	rollOverOpenDelay: NaN;
+}
+
 Callout ViewNavigator
 {
 	skinClass: ClassReference("spark.skins.mobile.CalloutViewNavigatorSkin");
@@ -931,26 +936,355 @@
 	}
 }
 
-/* ios 7 status bar
-requires new os-version selector (cf FLEX-FLEX-33949)
-*/
 
-@media (application-dpi: 120) AND (os-platform:"IOS") AND (min-os-version: 7)
+
+/* ios 7+ new theme */
+
+@media (os-platform:"IOS") AND (min-os-version: 7)
 {
+
+	global
+	{
+		fontFamily: RobotoRegular;
+		fontWeight: "normal";
+		fontSize: 24;
+		color: #000000;
+		highlightTextColor: #FFFFFF;
+		textShadowColor: #FFFFFF;
+		textShadowAlpha: 0;
+	}
+	
+	ActionBar
+	{
+		defaultButtonAppearance: normal;
+		skinClass: ClassReference("spark.skins.ios7.ActionBarSkin");
+		textShadowAlpha: 0;
+		textShadowColor: #000000;
+		paddingBottom: 1;
+		paddingLeft: 0;
+		paddingRight: 0;
+		paddingTop: 1;
+	}
+	
+	ActionBar #titleDisplay
+	{
+		color: #007AFF;
+		fontSize: 24;
+		fontFamily: RobotoRegular;
+		fontWeight: normal;
+	}
+	
+	ActionBar ButtonBase
+	{
+		color: #007AFF;
+		fontFamily: RobotoRegular;
+		fontWeight: normal;
+	}
+	
+	ActionBar Group#actionGroup Button
+	{
+		skinClass: ClassReference("spark.skins.ios7.ButtonSkin");
+	}
+	
+	BusyIndicator
+	{
+		skinClass: ClassReference("spark.skins.ios7.BusyIndicatorSkin");
+		rotationInterval: 30;  /* Must be multiples of 30 */
+	}	
+	
+	Button
+	{
+		skinClass: ClassReference("spark.skins.ios7.ButtonSkin");
+		fontFamily: RobotoRegular;
+		fontWeight: normal;
+	}
+	
+	Button.emphasized
+	{
+		skinClass: ClassReference("spark.skins.mobile.DefaultButtonSkin");
+	}
+	
+	ButtonBar
+	{
+		skinClass: ClassReference("spark.skins.ios7.ButtonBarSkin");
+		color: #007AFF;
+		fontFamily: RobotoRegular;
+		fontWeight: normal;
+	}
+	
+	Callout
+	{
+		skinClass: ClassReference("spark.skins.ios7.CalloutSkin");
+		backgroundColor: #F6F6F6;
+		contentBackgroundColor: #F6F6F6;
+		gap: 12;
+		borderThickness: 0;
+		frameThickness: 0;
+		contentBackgroundAppearance: flat;
+	}
+	
+	Callout ViewNavigator
+	{
+		skinClass: ClassReference("spark.skins.ios7.CalloutViewNavigatorSkin");
+		contentBackgroundColor: #FFFFFF;
+	}
+	
+	Callout ViewNavigator ActionBar
+	{
+		skinClass: ClassReference("spark.skins.ios7.CalloutActionBarSkin");
+		defaultButtonAppearance: normal;
+		textShadowAlpha: 0;
+		textShadowColor: #000000;
+		paddingBottom: 0;
+		paddingLeft: 0;
+		paddingRight: 0;
+		paddingTop: 0;
+		contentBackgroundAppearance: flat;
+	}
+	
+	Callout ViewNavigator ActionBar.beveled
+	{
+		paddingLeft: 0;
+		paddingRight: 0;
+	}
+	
+	Callout ViewNavigator ActionBar.beveled Group#navigationGroup Button
+	{
+		skinClass: ClassReference("spark.skins.ios7.ButtonSkin");
+	}
+	
+	Callout ViewNavigator ActionBar.beveled Group#navigationGroup Button.emphasized
+	{
+		skinClass: ClassReference("spark.skins.ios7.ButtonSkin");
+	}
+	
+	Callout ViewNavigator ActionBar Group#navigationGroup Button
+	{
+		skinClass: ClassReference("spark.skins.ios7.ButtonSkin");
+	}
+	
+	Callout ViewNavigator ActionBar Group#navigationGroup Button.emphasized
+	{
+		skinClass: ClassReference("spark.skins.ios7.ButtonSkin");
+	}
+	
+	Callout#viewNavigatorPopUp
+	{
+		contentBackgroundAppearance: flat;
+	}
+
+	CheckBox
+	{
+		chromeColor: #FFFFFF;
+		skinClass: ClassReference("spark.skins.ios7.CheckBoxSkin");
+	}
+	
+	HScrollBar
+	{
+		skinClass: ClassReference("spark.skins.ios7.HScrollBarSkin");
+		color: #E6E6E6;
+	}
+	
+	HSlider
+	{
+		skinClass: ClassReference("spark.skins.ios7.HSliderSkin");
+		fontFamily: RobotoBold;
+	}
+	
+	RadioButton
+	{
+		skinClass: ClassReference("spark.skins.ios7.RadioButtonSkin");
+		chromeColor: #FFFFFF;
+	}
+	
+	SpinnerList
+	{
+		skinClass: ClassReference("spark.skins.ios7.SpinnerListSkin");
+		color: #999999;
+		accentColor: #333333;
+	}
+	
+	SpinnerListContainer
+	{
+		skinClass: ClassReference("spark.skins.ios7.SpinnerListContainerSkin");
+	}
+	
+	SpinnerListItemRenderer
+	{
+		paddingTop : 9;
+		paddingBottom : 9;
+		paddingLeft : 6;
+		paddingRight : 6;
+	}
+	
+	SplitViewNavigator
+	{
+		backgroundColor: #FFFFFF;
+	}
+	
+	TabbedViewNavigator #tabBar
+	{
+		fontFamily: RobotoRegular;
+		chromeColor: #FFFFFF;
+		color: #007AFF;
+		highlightTextColor: #FFFFFF;
+		fontSize: 20;
+		fontWeight: normal;
+		iconPlacement: top;
+		interactionMode: mouse;
+		skinClass: ClassReference("spark.skins.ios7.TabbedViewNavigatorTabBarSkin");
+		textShadowAlpha: 0;
+		textShadowColor: #000000;
+	}
+	
+	TextInput
+	{
+		skinClass: ClassReference("spark.skins.ios7.StageTextInputSkin");
+		contentBackgroundAlpha: 0;
+		focusColor: #cccccc;
+		borderColor: #cccccc;
+		contentBackgroundColor: #DEDEDD;
+		contentBackgroundBorder: "roundedrect";
+		fontFamily: RobotoRegular;
+		fontWeight: normal;
+		selectionHighlighting: "never";
+		focusEnabled:"false";
+		focusThickness: 0;
+		focusAlpha: 0;
+	}
+	
+	TextArea
+	{
+		skinClass: ClassReference("spark.skins.ios7.StageTextAreaSkin");
+		contentBackgroundAlpha: 1;
+		contentBackgroundBorder: "rectangle";
+		contentBackgroundColor: #DEDEDD;
+		focusColor: #cccccc;
+		borderColor: #cccccc;
+		selectionHighlighting: "never";
+		focusEnabled:"false";
+		focusThickness: 0;
+		focusAlpha: 0;
+	} 
+	
+	ToggleSwitch
+	{
+		accentColor: #3F7FBA;
+		color: #FFFFFF;
+		skinClass: ClassReference("spark.skins.ios7.ToggleSwitchSkin");
+		slideDuration: 125;
+		textShadowAlpha: .65;
+		textShadowColor: #000000;
+	}
+	
+	VScrollBar
+	{
+		skinClass: ClassReference("spark.skins.ios7.VScrollBarSkin");
+		color: #E6E6E6;
+	}
+	
+	ViewMenu
+	{
+		skinClass: ClassReference("spark.skins.ios7.ViewMenuSkin");
+	}
+	
+	ViewMenuItem
+	{ 
+		iconPlacement : "left";
+		chromeColor : #FFFFFF;
+		focusColor: #DEDEDD;
+		paddingBottom: 8;
+		paddingLeft: 8;
+		paddingRight: 8;
+		paddingTop: 8;
+		skinClass : ClassReference("spark.skins.ios7.ViewMenuItemSkin");
+	}
+	
+	ViewNavigator
+	{
+		skinClass: ClassReference("spark.skins.mobile.ViewNavigatorSkin");
+	}
+	
+}
+
+@media (os-platform:"IOS") AND (min-os-version: 7) AND (application-dpi: 120)
+{
+	global
+	{
+		fontSize: 12;
+		focusThickness: 2;
+	}
+	
+	ActionBar.beveled
+	{
+		paddingLeft: 4;
+		paddingRight: 4;
+	}
+	
+	ActionBar #titleDisplay
+	{
+		fontSize: 14;
+	}
+	
 	Application
 	{
 		osStatusBarHeight: 15;
 	}
-}
 
-@media (application-dpi: 160) AND (os-platform:"IOS") AND (min-os-version: 7)
-{
-	Application {
-		osStatusBarHeight: 20;
+	SpinnerListItemRenderer
+	{
+		paddingTop : 9;
+		paddingBottom : 9;
+		paddingLeft : 3;
+		paddingRight : 3;
+	}
+	
+	TabbedViewNavigator #tabBar
+	{
+		fontSize: 11;
 	}
 }
 
-@media (application-dpi: 240) AND (os-platform:"IOS") AND (min-os-version: 7)
+@media (os-platform:"IOS") AND (min-os-version: 7) AND (application-dpi: 160)
+{
+	global
+	{
+		fontSize: 16;
+		focusThickness: 2;
+	}
+	
+	ActionBar
+	{
+		paddingBottom: 1;
+		paddingLeft: 0;
+		paddingRight: 0;
+		paddingTop: 1;
+	}
+	
+	ActionBar #titleDisplay
+	{
+		fontSize: 18;
+	}
+	
+	Application {
+		osStatusBarHeight: 20;
+	}
+
+	SpinnerListItemRenderer
+	{
+		paddingTop : 12;
+		paddingBottom : 12;
+		paddingLeft : 4;
+		paddingRight : 4;
+	}
+	
+	TabbedViewNavigator #tabBar
+	{
+		fontSize: 14;
+	}
+}
+
+@media (os-platform:"IOS") AND (min-os-version: 7) AND (application-dpi: 240)
 {
 	Application
 	{
@@ -958,22 +1292,120 @@
 	}
 }
 
-@media (application-dpi: 320) AND (os-platform:"IOS") AND (min-os-version: 7)
+@media (os-platform:"IOS") AND (min-os-version: 7) AND (application-dpi: 320)
 {
+	global
+	{
+		fontSize: 32;
+	}
+	
+	ActionBar
+	{
+		paddingBottom: 2;
+		paddingLeft: 0;
+		paddingRight: 0;
+		paddingTop: 2;
+	}
+	
+	ActionBar #titleDisplay
+	{
+		fontSize: 36;
+	}
+	
 	Application
 	{
 		osStatusBarHeight: 40;
 	}
+
+	SpinnerListItemRenderer
+	{
+		paddingTop : 24;
+		paddingBottom : 24;
+		paddingLeft : 8;
+		paddingRight : 8;
+	}
+	
+	TabbedViewNavigator #tabBar
+	{
+		fontSize: 28;
+	}
 }
 
-@media (application-dpi: 480) AND (os-platform:"IOS") AND (min-os-version: 7)
+@media (os-platform:"IOS") AND (min-os-version: 7) AND (application-dpi: 480)
 {
+	global
+	{
+		fontSize: 48;
+		focusThickness: 6;
+	}
+	
+	ActionBar
+	{
+		paddingBottom: 4;
+		paddingLeft: 0;
+		paddingRight: 0;
+		paddingTop: 4;
+	}
+	
+	ActionBar #titleDisplay
+	{
+		fontSize: 54;
+	}
+	
 	Application
 	{
 		osStatusBarHeight: 60;
 	}
+	
+	SpinnerListItemRenderer
+	{
+		paddingTop : 36;
+		paddingBottom : 36;
+		paddingLeft : 12;
+		paddingRight : 12;
+	}
+	
+	TabbedViewNavigator #tabBar
+	{
+		fontSize: 42;
+	}	
 }
 
+@media (os-platform:"IOS") AND (min-os-version: 7) AND (application-dpi: 640)
+{
+	global
+	{
+		fontSize: 64;
+	}
+	
+	ActionBar
+	{
+		paddingBottom: 4;
+		paddingLeft: 0;
+		paddingRight: 0;
+		paddingTop: 4;
+	}
+	
+	ActionBar #titleDisplay
+	{
+		fontSize: 72;
+	}
+	
+	SpinnerListItemRenderer
+	{
+		paddingTop : 48;
+		paddingBottom : 48;
+		paddingLeft : 16;
+		paddingRight : 16;
+	}
+	
+	TabbedViewNavigator #tabBar
+	{
+		fontSize: 56;
+	}	
+}
+
+
 
 /*
 Android 4.x specific Mobile Flex skins and styles. Defaults sizes are based on
@@ -1039,7 +1471,7 @@
 		skinClass: ClassReference("spark.skins.android4.TransparentActionButtonSkin");
 	}
 	
-	MobileBusyIndicator
+	BusyIndicator
 	{
 		skinClass: ClassReference("spark.skins.android4.BusyIndicatorSkin");
 	}
@@ -1071,6 +1503,7 @@
 		skinClass: ClassReference("spark.skins.android4.CalloutSkin");
 		borderThickness: 0;
 		borderColor: 0;
+		contentBackgroundAppearance: flat;
 	}
 	
 	Callout ViewNavigator ActionBar
@@ -1111,7 +1544,7 @@
 	HScrollBar
 	{
 		skinClass: ClassReference("spark.skins.android4.HScrollBarSkin");
-		thumbColor: #333333;
+		color: #333333;
 	}
 	
 	HSlider
@@ -1197,7 +1630,7 @@
 	VScrollBar
 	{
 		skinClass: ClassReference("spark.skins.android4.VScrollBarSkin");
-		thumbColor: #333333;
+		color: #333333;
 	}
 	
 	ViewMenu
diff --git a/frameworks/projects/mobiletheme/src/MobileThemeClasses.as b/frameworks/projects/mobiletheme/src/MobileThemeClasses.as
index 1dff34d..32c2239 100644
--- a/frameworks/projects/mobiletheme/src/MobileThemeClasses.as
+++ b/frameworks/projects/mobiletheme/src/MobileThemeClasses.as
@@ -107,5 +107,39 @@
 		import spark.skins.android4.VScrollBarThumbSkin; spark.skins.android4.VScrollBarThumbSkin;
 		import spark.skins.android4.supportClasses.CalloutArrow; spark.skins.android4.supportClasses.CalloutArrow;
 		
+		//iOS7+ skins
+		import spark.skins.ios7.ActionBarSkin; spark.skins.ios7.ActionBarSkin;
+		import spark.skins.ios7.BusyIndicatorSkin; spark.skins.ios7.BusyIndicatorSkin;
+		import spark.skins.ios7.ButtonBarFirstButtonSkin; spark.skins.ios7.ButtonBarFirstButtonSkin;
+		import spark.skins.ios7.ButtonBarMiddleButtonSkin; spark.skins.ios7.ButtonBarMiddleButtonSkin;
+		import spark.skins.ios7.ButtonBarSkin; spark.skins.ios7.ButtonBarSkin;
+		import spark.skins.ios7.ButtonSkin; spark.skins.ios7.ButtonSkin;
+		import spark.skins.ios7.CalloutSkin; spark.skins.ios7.CalloutSkin;
+		import spark.skins.ios7.CalloutActionBarSkin; spark.skins.ios7.CalloutActionBarSkin;
+		import spark.skins.ios7.CalloutViewNavigatorSkin; spark.skins.ios7.CalloutViewNavigatorSkin;
+		import spark.skins.ios7.CheckBoxSkin; spark.skins.ios7.CheckBoxSkin;
+		import spark.skins.ios7.HScrollBarSkin; spark.skins.ios7.HScrollBarSkin;
+		import spark.skins.ios7.HScrollBarThumbSkin; spark.skins.ios7.HScrollBarThumbSkin;
+		import spark.skins.ios7.HSliderSkin; spark.skins.ios7.HSliderSkin;
+		import spark.skins.ios7.HSliderThumbSkin; spark.skins.ios7.HSliderThumbSkin;
+		import spark.skins.ios7.HSliderTrackSkin; spark.skins.ios7.HSliderTrackSkin;
+		import spark.skins.ios7.RadioButtonSkin; spark.skins.ios7.RadioButtonSkin;
+		import spark.skins.ios7.SpinnerListContainerSkin; spark.skins.ios7.SpinnerListContainerSkin;
+		import spark.skins.ios7.SpinnerListScrollerSkin; spark.skins.ios7.SpinnerListScrollerSkin;
+		import spark.skins.ios7.SpinnerListSkin; spark.skins.ios7.SpinnerListSkin;
+		import spark.skins.ios7.StageTextAreaSkin; spark.skins.ios7.StageTextAreaSkin;
+		import spark.skins.ios7.StageTextInputSkin; spark.skins.ios7.StageTextInputSkin;
+		import spark.skins.ios7.TabbedViewNavigatorTabBarSkin; spark.skins.ios7.TabbedViewNavigatorTabBarSkin;
+		import spark.skins.ios7.TextAreaSkin; spark.skins.ios7.TextAreaSkin;
+		import spark.skins.ios7.TextInputSkin; spark.skins.ios7.TextInputSkin;
+		import spark.skins.ios7.ToggleSwitchSkin; spark.skins.ios7.ToggleSwitchSkin;
+		import spark.skins.ios7.TransparentActionButtonSkin; spark.skins.ios7.TransparentActionButtonSkin;
+		import spark.skins.ios7.TransparentNavigationButtonSkin; spark.skins.ios7.TransparentNavigationButtonSkin;
+		import spark.skins.ios7.ViewMenuItemSkin; spark.skins.ios7.ViewMenuItemSkin;
+		import spark.skins.ios7.ViewMenuSkin; spark.skins.ios7.ViewMenuSkin;
+		import spark.skins.ios7.VScrollBarSkin; spark.skins.ios7.VScrollBarSkin;
+		import spark.skins.ios7.VScrollBarThumbSkin; spark.skins.ios7.VScrollBarThumbSkin;
+		import spark.skins.ios7.supportClasses.CalloutArrow; spark.skins.ios7.supportClasses.CalloutArrow;
+		
 	}
 }
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/android4/BusyIndicatorSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/android4/BusyIndicatorSkin.as
index dd3aa44..964b8cf 100644
--- a/frameworks/projects/mobiletheme/src/spark/skins/android4/BusyIndicatorSkin.as
+++ b/frameworks/projects/mobiletheme/src/spark/skins/android4/BusyIndicatorSkin.as
@@ -27,7 +27,7 @@
 	import spark.skins.android4.assets.BusyIndicator;
 	import spark.skins.mobile.supportClasses.MobileSkin;
 	
-	import spark.components.MobileBusyIndicator;
+	import spark.components.BusyIndicator;
 	
 	public class BusyIndicatorSkin extends MobileSkin
 	{
@@ -43,6 +43,8 @@
 		 *  Current rotation of this component in degrees.
 		 */   
 		private var currentRotation:Number = 0;
+		private var symbolColor:uint;
+		private var symbolColorChanged:Boolean = false;		
 		
 		public function BusyIndicatorSkin()
 		{
@@ -90,14 +92,14 @@
 			}
 		}
 		
-		private var _hostComponent:spark.components.MobileBusyIndicator;
+		private var _hostComponent:spark.components.BusyIndicator;
 		
-		public function get hostComponent():spark.components.MobileBusyIndicator
+		public function get hostComponent():spark.components.BusyIndicator
 		{
 			return _hostComponent;
 		}
 		
-		public function set hostComponent(value:spark.components.MobileBusyIndicator):void 
+		public function set hostComponent(value:spark.components.BusyIndicator):void 
 		{
 			_hostComponent = value;
 		}
@@ -131,6 +133,34 @@
 			}
 		}
 		
+		override public function styleChanged(styleProp:String):void
+		{
+			var allStyles:Boolean = !styleProp || styleProp == "styleName";
+			
+			if (allStyles || styleProp == "symbolColor")
+			{
+				symbolColor = getStyle("symbolColor");
+				symbolColorChanged = true;
+				invalidateDisplayList();
+			}
+			super.styleChanged(styleProp);
+		}
+		
+		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			super.updateDisplayList(unscaledWidth,unscaledHeight);
+			if(symbolColorChanged)
+			{
+				colorizeSymbol();	
+				symbolColorChanged = false;
+			}
+		}
+		
+		private function colorizeSymbol():void
+		{
+			super.applyColorTransform(this.busyIndicator, 0x000000, symbolColor);
+		}		
+		
 		private function startRotation():void
 		{
 			rotationTimer = new Timer(rotationInterval);
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/android4/HScrollBarThumbSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/android4/HScrollBarThumbSkin.as
index ed3a6b9..a96e4e4 100644
--- a/frameworks/projects/mobiletheme/src/spark/skins/android4/HScrollBarThumbSkin.as
+++ b/frameworks/projects/mobiletheme/src/spark/skins/android4/HScrollBarThumbSkin.as
@@ -20,10 +20,6 @@
 package spark.skins.android4
 {
 
-import flash.display.CapsStyle;
-import flash.display.JointStyle;
-import flash.display.LineScaleMode;
-
 import mx.core.DPIClassification;
 import mx.core.mx_internal;
 
@@ -82,6 +78,12 @@
         // Depending on density set padding
         switch (applicationDPI)
         {
+			case DPIClassification.DPI_640:
+			{
+				paddingBottom = PADDING_BOTTOM_640DPI;
+				paddingHorizontal = PADDING_HORIZONTAL_640DPI;
+				break;
+			}
 			case DPIClassification.DPI_480:
 			{
 				paddingBottom = PADDING_BOTTOM_480DPI;
@@ -100,6 +102,12 @@
                 paddingHorizontal = PADDING_HORIZONTAL_240DPI;
                 break;
             }
+            case DPIClassification.DPI_120:
+            {
+                paddingBottom = PADDING_BOTTOM_120DPI;
+                paddingHorizontal = PADDING_HORIZONTAL_120DPI;
+                break;
+            }
             default:
             {
                 paddingBottom = PADDING_BOTTOM_DEFAULTDPI;
@@ -160,7 +168,7 @@
 
         var thumbHeight:Number = unscaledHeight - paddingBottom;
         
-        graphics.beginFill(getStyle("thumbColor"), 1);
+        graphics.beginFill(getStyle("color"), 1);
         graphics.drawRect(paddingHorizontal + .5, 0.5, unscaledWidth - 2 * paddingHorizontal, thumbHeight);
         
         graphics.endFill();
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/android4/HSliderSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/android4/HSliderSkin.as
index 6f970f8..c9f696b 100644
--- a/frameworks/projects/mobiletheme/src/spark/skins/android4/HSliderSkin.as
+++ b/frameworks/projects/mobiletheme/src/spark/skins/android4/HSliderSkin.as
@@ -25,6 +25,7 @@
 	
 	import mx.core.ClassFactory;
 	import mx.core.IFactory;
+	import mx.events.FlexEvent;
 	
 	import spark.components.Button;
 	import spark.components.HSlider;
@@ -100,10 +101,16 @@
 		public function set hostComponent(value:HSlider):void 
 		{
 			if (_hostComponent)
+			{
 				_hostComponent.removeEventListener(Event.CHANGE, thumbPositionChanged_handler);
+				_hostComponent.removeEventListener(FlexEvent.VALUE_COMMIT, thumbPositionChanged_handler);
+			}
 			_hostComponent = value;
 			if (_hostComponent)
+			{
 				_hostComponent.addEventListener(Event.CHANGE, thumbPositionChanged_handler);
+				_hostComponent.addEventListener(FlexEvent.VALUE_COMMIT, thumbPositionChanged_handler);
+			}
 		}
 		
 		//--------------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/android4/VScrollBarThumbSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/android4/VScrollBarThumbSkin.as
index 9d17a97..07fb0d1 100644
--- a/frameworks/projects/mobiletheme/src/spark/skins/android4/VScrollBarThumbSkin.as
+++ b/frameworks/projects/mobiletheme/src/spark/skins/android4/VScrollBarThumbSkin.as
@@ -20,10 +20,6 @@
 package spark.skins.android4
 {
 
-import flash.display.CapsStyle;
-import flash.display.JointStyle;
-import flash.display.LineScaleMode;
-
 import mx.core.DPIClassification;
 import mx.core.mx_internal;
 use namespace mx_internal;
@@ -108,6 +104,12 @@
                 paddingVertical = PADDING_VERTICAL_240DPI;
                 break;
             }
+            case DPIClassification.DPI_120:
+            {
+                paddingRight = PADDING_RIGHT_120DPI;
+                paddingVertical = PADDING_VERTICAL_120DPI;
+                break;
+            }
             default:
             {
                 paddingRight = PADDING_RIGHT_DEFAULTDPI;
@@ -168,7 +170,7 @@
 
         var thumbWidth:Number = unscaledWidth - paddingRight;
         
-        graphics.beginFill(getStyle("thumbColor"), 1);
+        graphics.beginFill(getStyle("color"), 1);
         graphics.drawRect(0.5, paddingVertical + 0.5,thumbWidth, unscaledHeight - 2 * paddingVertical);
         
         graphics.endFill();
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/ActionBarSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/ActionBarSkin.as
new file mode 100644
index 0000000..1e46d38
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/ActionBarSkin.as
@@ -0,0 +1,727 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+import flash.display.GradientType;
+import flash.events.Event;
+import flash.text.TextFormatAlign;
+
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+import mx.utils.ColorUtil;
+
+import spark.components.ActionBar;
+import spark.components.Group;
+import spark.components.supportClasses.StyleableTextField;
+import spark.core.SpriteVisualElement;
+import spark.layouts.HorizontalAlign;
+import spark.layouts.HorizontalLayout;
+import spark.layouts.VerticalAlign;
+import spark.skins.ios7.assets.ActionBarBackground;
+import spark.skins.mobile.supportClasses.MobileSkin;
+
+use namespace mx_internal;
+
+/**
+ *  The default skin class for the Spark ActionBar component in mobile
+ *  applications.
+ *  
+ *  @see spark.components.ActionBar
+ *  @see spark.skins.mobile.TransparentNavigationButtonSkin
+ *  @see spark.skins.mobile.BeveledBackButtonSkin
+ *  @see spark.skins.mobile.TransparentActionButtonSkin
+ *  @see spark.skins.mobile.BeveledActionButtonSkin
+ *  
+ *  @langversion 3.0
+ *  @playerversion AIR 2.5
+ *  @productversion Flex 4.5
+ */
+public class ActionBarSkin extends MobileSkin
+{
+    //--------------------------------------------------------------------------
+    //
+    //  Class constants
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @private
+     */
+    mx_internal static const ACTIONBAR_CHROME_COLOR_RATIOS:Array = [0, 80];
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  Constructor.
+     *  
+     *  @langversion 3.0
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    public function ActionBarSkin()
+    {
+        super();
+		
+		borderClass = spark.skins.ios7.assets.ActionBarBackground;
+        
+        switch (applicationDPI)
+        {
+			
+			case DPIClassification.DPI_640:
+			{
+				borderSize = 2;
+				layoutContentGroupHeight = 172;
+				layoutTitleGroupHorizontalPadding = 52;
+				
+				break;
+			}
+			case DPIClassification.DPI_480:
+			{
+				borderSize = 2;
+				layoutContentGroupHeight = 130;
+				layoutTitleGroupHorizontalPadding = 40;
+				
+				
+				break;
+			}
+            case DPIClassification.DPI_320:
+            {
+                borderSize = 2;
+                layoutContentGroupHeight = 86;
+                layoutTitleGroupHorizontalPadding = 26;
+                
+                break;
+            }
+            case DPIClassification.DPI_240:
+            {
+                borderSize = 1;
+                layoutContentGroupHeight = 65;
+                layoutTitleGroupHorizontalPadding = 20;
+                
+                break;
+            }
+			case DPIClassification.DPI_120:
+			{
+				borderSize = 1;
+				layoutContentGroupHeight = 32;
+				layoutTitleGroupHorizontalPadding = 10;
+				
+				break;
+			}	
+            default:
+            {
+                // default DPI_160
+                borderSize = 1;
+                layoutContentGroupHeight = 43;
+                layoutTitleGroupHorizontalPadding = 13;
+                
+                break;
+            }
+        }
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Graphics variables
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  FXG Class reference for the ActionBar background border graphic.
+     *
+     *  @langversion 3.0
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    protected var borderClass:Class;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Layout variables
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @private
+     */
+    private var borderSize:uint;
+    
+    /**
+     *  Default height for navigationGroup, titleGroup and actionGroup.
+     *
+     *  @langversion 3.0
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    protected var layoutContentGroupHeight:uint;
+    
+    /**
+     *  Default horizontal padding for the titleGroup and titleDisplay.
+     *
+     *  @langversion 3.0
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    protected var layoutTitleGroupHorizontalPadding:uint;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Variables
+    //
+    //--------------------------------------------------------------------------
+    
+    /** 
+     *  @copy spark.skins.spark.ApplicationSkin#hostComponent
+     */
+    public var hostComponent:ActionBar;
+    
+    /**
+     *  @private
+     */
+    private var _navigationVisible:Boolean = false;
+    
+    /**
+     *  @private
+     */
+    private var _titleContentVisible:Boolean = false;
+    
+    /**
+     *  @private
+     */
+    private var _actionVisible:Boolean = false;
+    
+    /**
+     *  @private
+     */
+    private var border:SpriteVisualElement;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Skin parts
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @copy spark.components.ActionBar#navigationGroup
+     */
+    public var navigationGroup:Group;
+    
+    /**
+     *  @copy spark.components.ActionBar#titleGroup
+     */
+    public var titleGroup:Group;
+    
+    /**
+     *  @copy spark.components.ActionBar#actionGroup
+     */
+    public var actionGroup:Group;
+    
+    /**
+     *  @copy spark.components.ActionBar#titleDisplay
+     * 
+     *  @private
+     *  Wraps a StyleableTextField in a UIComponent to be compatible with
+     *  ViewTransition effects.
+     */
+    public var titleDisplay:TitleDisplayComponent;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @private
+     */
+    override protected function createChildren():void
+    {
+        if (borderClass)
+        {
+            border = new borderClass();
+            addChild(border);
+        }
+        
+        navigationGroup = new Group();
+        var hLayout:HorizontalLayout = new HorizontalLayout();
+        hLayout.horizontalAlign = HorizontalAlign.LEFT;
+        hLayout.verticalAlign = VerticalAlign.MIDDLE;
+        hLayout.gap = 0;
+        hLayout.paddingLeft = hLayout.paddingTop = hLayout.paddingRight = 
+            hLayout.paddingBottom = 0;
+        navigationGroup.layout = hLayout;
+        navigationGroup.id = "navigationGroup";
+        
+        titleGroup = new Group();
+        hLayout = new HorizontalLayout();
+        hLayout.horizontalAlign = HorizontalAlign.LEFT;
+        hLayout.verticalAlign = VerticalAlign.MIDDLE;
+        hLayout.gap = 0;
+        hLayout.paddingLeft = hLayout.paddingRight = layoutTitleGroupHorizontalPadding; 
+        hLayout.paddingTop = hLayout.paddingBottom = 0;
+        titleGroup.layout = hLayout;
+        titleGroup.id = "titleGroup";
+        
+        actionGroup = new Group();
+        hLayout = new HorizontalLayout();
+        hLayout.horizontalAlign = HorizontalAlign.RIGHT;
+        hLayout.verticalAlign = VerticalAlign.MIDDLE;
+        hLayout.gap = 0;
+        hLayout.paddingLeft = hLayout.paddingTop = hLayout.paddingRight = 
+            hLayout.paddingBottom = 0;
+        actionGroup.layout = hLayout;
+        actionGroup.id = "actionGroup";
+        
+        titleDisplay = new TitleDisplayComponent();
+        titleDisplay.id = "titleDisplay";
+        
+        // initialize titleAlign style (center is managed explicitly in layoutContents)
+        var titleAlign:String = getStyle("titleAlign");
+        titleAlign = (titleAlign == "center") ? TextFormatAlign.LEFT : titleAlign;
+        titleDisplay.setStyle("textAlign", titleAlign);
+        
+        addChild(navigationGroup);
+        addChild(titleGroup);
+        addChild(actionGroup);
+        addChild(titleDisplay);
+    }
+
+    /**
+     *  @private
+     */
+    override protected function measure():void
+    {
+        var titleWidth:Number = 0;
+        var titleHeight:Number = 0;
+        
+        if (_titleContentVisible)
+        {
+            titleWidth = titleGroup.getPreferredBoundsWidth();
+            titleHeight = titleGroup.getPreferredBoundsHeight();
+        }
+        else
+        {
+            // use titleLayout for paddingLeft and paddingRight
+            var layoutObject:Object = hostComponent.titleLayout;
+            titleWidth = ((layoutObject.paddingLeft) ? Number(layoutObject.paddingLeft) : 0)
+                + ((layoutObject.paddingRight) ? Number(layoutObject.paddingRight) : 0)
+                + titleDisplay.getPreferredBoundsWidth();
+            
+            titleHeight = titleDisplay.getPreferredBoundsHeight();
+        }
+        
+        measuredWidth =
+            getStyle("paddingLeft")
+            + navigationGroup.getPreferredBoundsWidth()
+            + titleWidth
+            + actionGroup.getPreferredBoundsWidth()
+            + getStyle("paddingRight");
+        
+        // measuredHeight is contentGroupHeight, 2x border on top and bottom
+        measuredHeight =
+            getStyle("paddingTop")
+            + Math.max(layoutContentGroupHeight,
+                navigationGroup.getPreferredBoundsHeight(), 
+                actionGroup.getPreferredBoundsHeight(),
+                titleHeight)
+            + getStyle("paddingBottom");
+    }
+    
+    /**
+     *  @private
+     */
+    override protected function commitCurrentState():void
+    {
+        super.commitCurrentState();
+        
+        _titleContentVisible = currentState.indexOf("titleContent") >= 0;
+        _navigationVisible = currentState.indexOf("Navigation") >= 0;
+        _actionVisible = currentState.indexOf("Action") >= 0;
+        
+        invalidateSize();
+        invalidateDisplayList();
+    }
+    
+    /**
+     *  @private
+     */
+    override public function styleChanged(styleProp:String):void
+    {
+        if (titleDisplay)
+        {
+            var allStyles:Boolean = !styleProp || styleProp == "styleName";
+            
+            if (allStyles || (styleProp == "titleAlign"))
+            {
+                var titleAlign:String = getStyle("titleAlign");
+                
+                if (titleAlign == "center")
+                { 
+                    // If the title align is set to center, the alignment is set to LEFT
+                    // so that the skin can manually center the component in layoutContents
+                    titleDisplay.setStyle("textAlign", TextFormatAlign.LEFT);
+                }
+                else
+                {
+                    titleDisplay.setStyle("textAlign", titleAlign);
+                }
+            }
+        }
+        
+        super.styleChanged(styleProp);
+    }
+    
+    /**
+     *  @private
+     */
+    override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.layoutContents(unscaledWidth, unscaledHeight);
+        
+        var navigationGroupWidth:Number = 0;
+        
+        var paddingLeft:Number   = getStyle("paddingLeft"); 
+        var paddingRight:Number  = getStyle("paddingRight");
+        var paddingTop:Number    = getStyle("paddingTop");
+        var paddingBottom:Number = getStyle("paddingBottom");
+        
+        var titleCompX:Number = paddingLeft;
+        var titleCompWidth:Number = 0;
+        
+        var actionGroupX:Number = unscaledWidth;
+        var actionGroupWidth:Number = 0;
+        
+        // remove top and bottom padding from content group height
+        var contentGroupsHeight:Number = Math.max(0, unscaledHeight - paddingTop - paddingBottom);
+        
+        if (border)
+        {
+            // FXG uses scale-9, drop shadow is drawn outside the bounds
+            setElementSize(border, unscaledWidth, unscaledHeight);
+        }
+        
+        // position groups, overlap of navigation and action groups is allowed
+        // when overlap occurs, titleDisplay/titleGroup is not visible
+        if (_navigationVisible)
+        {
+            navigationGroupWidth = navigationGroup.getPreferredBoundsWidth();
+            titleCompX += navigationGroupWidth;
+            
+            setElementSize(navigationGroup, navigationGroupWidth, contentGroupsHeight);
+            setElementPosition(navigationGroup, paddingLeft, paddingTop);
+        }
+        
+        if (_actionVisible)
+        {
+            // actionGroup x position can be negative
+            actionGroupWidth = actionGroup.getPreferredBoundsWidth();
+            actionGroupX = unscaledWidth - actionGroupWidth - paddingRight;
+            
+            setElementSize(actionGroup, actionGroupWidth, contentGroupsHeight);
+            setElementPosition(actionGroup, actionGroupX, paddingTop);
+        }
+        
+        // titleGroup or titleDisplay is given remaining width after navigation
+        // and action groups preferred widths
+        titleCompWidth = unscaledWidth - navigationGroupWidth - actionGroupWidth
+            - paddingLeft - paddingRight;
+        
+        if (titleCompWidth <= 0)
+        {
+            titleDisplay.visible = false;
+            titleGroup.visible = false;
+        }
+        else if (_titleContentVisible)
+        {
+            titleDisplay.visible = false;
+            titleGroup.visible = true;
+            
+            // use titleGroup for titleContent
+            setElementSize(titleGroup, titleCompWidth, contentGroupsHeight);
+            setElementPosition(titleGroup, titleCompX, paddingTop);
+        }
+        else
+        {
+            // use titleDisplay for title text label
+            titleGroup.visible = false;
+            
+            // use titleLayout for paddingLeft and paddingRight
+            var layoutObject:Object = hostComponent.titleLayout;
+            var titlePaddingLeft:Number = (layoutObject.paddingLeft) ? Number(layoutObject.paddingLeft) : 0;
+            var titlePaddingRight:Number = (layoutObject.paddingRight) ? Number(layoutObject.paddingRight) : 0;
+            
+            // align titleDisplay to the absolute center
+            var titleAlign:String = getStyle("titleAlign");
+            
+            // check for available width after padding
+            if ((titleCompWidth - titlePaddingLeft - titlePaddingRight) <= 0)
+            {
+                titleCompX = 0;
+                titleCompWidth = 0;
+            }
+            else if (titleAlign == "center")
+            { 
+                // use LEFT instead of CENTER
+                titleCompWidth = titleDisplay.getExplicitOrMeasuredWidth();
+                
+                // use x position of titleDisplay to implement CENTER
+                titleCompX = Math.round((unscaledWidth - titleCompWidth) / 2); 
+                
+                var navigationOverlap:Number = navigationGroupWidth + titlePaddingLeft - titleCompX;
+                var actionOverlap:Number = (titleCompX + titleCompWidth + titlePaddingRight) - actionGroupX;
+                
+                // shrink and/or move titleDisplay width if there is any
+                // overlap after centering
+                if ((navigationOverlap > 0) && (actionOverlap > 0))
+                {
+                    // remaining width
+                    titleCompX = navigationGroupWidth + titlePaddingLeft;
+                    titleCompWidth = unscaledWidth - navigationGroupWidth - actionGroupWidth - titlePaddingLeft - titlePaddingRight;
+                }
+                else if ((navigationOverlap > 0) || (actionOverlap > 0))
+                {
+                    if (navigationOverlap > 0)
+                    {
+                        // nudge to the right
+                        titleCompX += navigationOverlap;
+                    }
+                    else if (actionOverlap > 0)
+                    {
+                        // nudge to the left
+                        titleCompX -= actionOverlap;
+                        
+                        // force left padding
+                        if (titleCompX < (navigationGroupWidth + titlePaddingLeft))
+                            titleCompX = navigationGroupWidth + titlePaddingLeft;
+                    }
+                    
+                    // recompute action overlap and force right padding
+                    actionOverlap = (titleCompX + titleCompWidth + titlePaddingRight) - actionGroupX;
+                    
+                    if (actionOverlap > 0)
+                        titleCompWidth -= actionOverlap;
+                }
+            }
+            else
+            {
+                // implement padding by adjusting width and position
+                titleCompX += titlePaddingLeft;
+                titleCompWidth = titleCompWidth - titlePaddingLeft - titlePaddingRight;
+            }
+            
+            // check for negative width
+            titleCompWidth = (titleCompWidth < 0) ? 0 : titleCompWidth;
+            
+            setElementSize(titleDisplay, titleCompWidth, contentGroupsHeight);
+            setElementPosition(titleDisplay, titleCompX, paddingTop);
+            
+            titleDisplay.visible = true;
+        }
+    }
+    
+    /**
+     *  @private
+     */
+    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.drawBackground(unscaledWidth, unscaledHeight);
+
+        var chromeColor:uint = getStyle("chromeColor");
+        var backgroundAlphaValue:Number = getStyle("backgroundAlpha");
+        var colors:Array = [];
+        
+        // apply alpha to chromeColor fill only
+        var backgroundAlphas:Array = [backgroundAlphaValue, backgroundAlphaValue];
+        
+        // exclude top and bottom 1px borders
+        colorMatrix.createGradientBox(unscaledWidth, unscaledHeight - (borderSize * 2), Math.PI / 2, 0, 0);
+        
+        colors[0] = ColorUtil.adjustBrightness2(chromeColor, 20);
+        colors[1] = chromeColor;
+        
+        graphics.beginGradientFill(GradientType.LINEAR, colors, backgroundAlphas, ACTIONBAR_CHROME_COLOR_RATIOS, colorMatrix);
+        graphics.drawRect(0, borderSize, unscaledWidth, unscaledHeight - (borderSize * 2));
+        graphics.endFill();
+    }
+    
+}
+}
+import flash.events.Event;
+
+import mx.core.UIComponent;
+import mx.core.mx_internal;
+import mx.events.FlexEvent;
+
+import spark.components.supportClasses.StyleableTextField;
+import spark.core.IDisplayText;
+
+use namespace mx_internal;
+
+/**
+ *  @private
+ *  Component that holds StyleableTextFields to produce a drop shadow effect.
+ *  Combines label and shadow into a single component to allow transitions to
+ *  target them both.
+ */
+class TitleDisplayComponent extends UIComponent implements IDisplayText
+{
+    private var titleDisplay:StyleableTextField;
+    private var titleDisplayShadow:StyleableTextField;
+    private var title:String;
+    private var titleChanged:Boolean;
+    
+    public function TitleDisplayComponent()
+    {
+        super();
+        title = "";
+    }
+    
+    override public function get baselinePosition():Number
+    {
+        return titleDisplay.baselinePosition;
+    }
+    
+    /**
+     *  @private
+     */
+    override protected function createChildren():void
+    {
+        super.createChildren();
+        
+        titleDisplay = StyleableTextField(createInFontContext(StyleableTextField));
+        titleDisplay.styleName = this;
+        titleDisplay.editable = false;
+        titleDisplay.selectable = false;
+        titleDisplay.multiline = false;
+        titleDisplay.wordWrap = false;
+        titleDisplay.addEventListener(FlexEvent.VALUE_COMMIT,
+            titleDisplay_valueCommitHandler);
+        
+        titleDisplayShadow =
+            StyleableTextField(createInFontContext(StyleableTextField));
+        titleDisplayShadow.styleName = this;
+        titleDisplayShadow.colorName = "textShadowColor";
+        titleDisplayShadow.editable = false;
+        titleDisplayShadow.selectable = false;
+        titleDisplayShadow.multiline = false;
+        titleDisplayShadow.wordWrap = false;
+        
+        addChild(titleDisplayShadow);
+        addChild(titleDisplay);
+    }
+    
+    /**
+     *  @private
+     */
+    override protected function commitProperties():void
+    {
+        super.commitProperties();
+        
+        if (titleChanged)
+        {
+            titleDisplay.text = title;
+            
+            invalidateSize();
+            invalidateDisplayList();
+            
+            titleChanged = false;
+        }
+    }
+    
+    /**
+     *  @private
+     */
+    override protected function measure():void
+    {
+        // reset text if it was truncated before.
+        if (titleDisplay.isTruncated)
+            titleDisplay.text = title;
+        
+        measuredWidth = titleDisplay.getPreferredBoundsWidth();
+        
+        // tightTextHeight
+        measuredHeight = titleDisplay.getPreferredBoundsHeight();
+    }
+    
+    /**
+     *  @private
+     */
+    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.updateDisplayList(unscaledWidth, unscaledHeight);
+        
+        // reset text if it was truncated before.
+        if (titleDisplay.isTruncated)
+            titleDisplay.text = title;
+        titleDisplay.commitStyles();
+        
+        // use preferred height, setLayoutBoundsSize will accommodate for tight
+        // text adjustment
+        var tightHeight:Number = titleDisplay.getPreferredBoundsHeight();
+        var tightY:Number = (unscaledHeight - tightHeight) / 2;
+        
+        titleDisplay.setLayoutBoundsSize(unscaledWidth, tightHeight);
+        titleDisplay.setLayoutBoundsPosition(0, (unscaledHeight - tightHeight) / 2);
+        
+        // now truncate the text
+        titleDisplay.truncateToFit();
+        
+        titleDisplayShadow.commitStyles();
+        titleDisplayShadow.setLayoutBoundsSize(unscaledWidth, tightHeight);
+        titleDisplayShadow.setLayoutBoundsPosition(0, tightY + 1);
+        
+        titleDisplayShadow.alpha = getStyle("textShadowAlpha");
+        
+        // if labelDisplay is truncated, then push it down here as well.
+        // otherwise, it would have gotten pushed in the labelDisplay_valueCommitHandler()
+        if (titleDisplay.isTruncated)
+            titleDisplayShadow.text = titleDisplay.text;
+    }
+    
+    /**
+     *  @private 
+     */ 
+    private function titleDisplay_valueCommitHandler(event:Event):void 
+    {
+        titleDisplayShadow.text = titleDisplay.text;
+    }
+    
+    public function get text():String
+    {
+        return title;
+    }
+    
+    public function set text(value:String):void
+    {
+        title = value;
+        titleChanged = true;
+        
+        invalidateProperties();
+    }
+    
+    public function get isTruncated():Boolean
+    {
+        return titleDisplay.isTruncated;
+    }
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/BusyIndicatorSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/BusyIndicatorSkin.as
new file mode 100644
index 0000000..16620d4
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/BusyIndicatorSkin.as
@@ -0,0 +1,220 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+	import flash.display.DisplayObject;
+	import flash.events.TimerEvent;
+	import flash.geom.Matrix;
+	import flash.utils.Timer;
+	
+	import mx.core.DPIClassification;
+	
+	import spark.components.BusyIndicator;
+	import spark.skins.ios7.assets.BusyIndicator;
+	import spark.skins.mobile.supportClasses.MobileSkin;
+	
+	public class BusyIndicatorSkin extends MobileSkin
+	{
+		static private const DEFAULT_ROTATION_INTERVAL:Number = 30;
+		private var busyIndicatorClass:Class;
+		private var busyIndicator:DisplayObject;
+		private var busyIndicatorBackground:DisplayObject;
+		private var busyIndicatorDiameter:Number;
+		private var rotationTimer:Timer;
+		private var rotationInterval:Number;
+		private var rotationSpeed:Number;
+		/**
+		 *  @private
+		 * 
+		 *  Current rotation of this component in degrees.
+		 */   
+		private var currentRotation:Number = 0;
+		private var symbolColor:uint;
+		private var symbolColorChanged:Boolean = false;
+		
+		public function BusyIndicatorSkin()
+		{
+			super();
+			
+			busyIndicatorClass = spark.skins.ios7.assets.BusyIndicator;
+			rotationInterval = getStyle("rotationInterval");
+			if (isNaN(rotationInterval))
+				rotationInterval = DEFAULT_ROTATION_INTERVAL;
+			if (rotationInterval < 30) //Spokes are at 30 degree angle to each other. 
+				rotationInterval = 30;
+			rotationSpeed = 60;
+			
+			switch(applicationDPI) 
+			{	
+				case DPIClassification.DPI_640:
+				{
+					busyIndicatorDiameter = 144;
+					break;
+				}
+				case DPIClassification.DPI_480:
+				{
+					busyIndicatorDiameter = 108;
+					break;
+				}		
+				case DPIClassification.DPI_320:
+				{
+					busyIndicatorDiameter = 72;
+					break;
+				}
+				case DPIClassification.DPI_240:
+				{
+					busyIndicatorDiameter = 54;
+					break;
+				}
+				case DPIClassification.DPI_120:
+				{
+					busyIndicatorDiameter = 27;
+					break;
+				}
+				default://160 DPI
+				{
+					busyIndicatorDiameter = 36;
+					break;
+				}
+			}
+		}
+		
+		private var _hostComponent:spark.components.BusyIndicator;
+		
+		public function get hostComponent():spark.components.BusyIndicator
+		{
+			return _hostComponent;
+		}
+		
+		public function set hostComponent(value:spark.components.BusyIndicator):void 
+		{
+			_hostComponent = value;
+		}
+		
+		override protected function createChildren():void
+		{
+			//This layer stays still in the background
+			busyIndicatorBackground = new busyIndicatorClass();
+			busyIndicatorBackground.width = busyIndicatorBackground.height = busyIndicatorDiameter;
+			addChild(busyIndicatorBackground);
+			//This layer rotates in the foreground to give the required effect
+			busyIndicator = new busyIndicatorClass();
+			busyIndicator.alpha = 0.3;
+			busyIndicator.width = busyIndicator.height = busyIndicatorDiameter;
+			addChild(busyIndicator);
+		}
+		
+		override protected function measure():void
+		{
+			measuredWidth = busyIndicatorDiameter;
+			measuredHeight = busyIndicatorDiameter;
+			
+			measuredMinHeight = busyIndicatorDiameter;
+			measuredMinWidth = busyIndicatorDiameter
+		}
+		
+		override protected function commitCurrentState():void
+		{
+			super.commitCurrentState();
+			if(currentState == "rotatingState")
+			{
+				startRotation();
+			}
+			else
+			{
+				stopRotation();
+			}
+		}
+		
+		override public function styleChanged(styleProp:String):void
+		{
+			var allStyles:Boolean = !styleProp || styleProp == "styleName";
+			
+			if (allStyles || styleProp == "symbolColor")
+			{
+				symbolColor = getStyle("symbolColor");
+				symbolColorChanged = true;
+				invalidateDisplayList();
+			}
+			super.styleChanged(styleProp);
+		}
+		
+		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			super.updateDisplayList(unscaledWidth,unscaledHeight);
+			if(symbolColorChanged)
+			{
+				colorizeSymbol();	
+				symbolColorChanged = false;
+			}
+		}
+		
+		private function colorizeSymbol():void
+		{
+			super.applyColorTransform(this.busyIndicator, 0x000000, symbolColor);
+		}
+		
+		private function startRotation():void
+		{
+			rotationTimer = new Timer(rotationSpeed);
+			if (!rotationTimer.hasEventListener(TimerEvent.TIMER))
+			{
+				rotationTimer.addEventListener(TimerEvent.TIMER, timerHandler);
+				rotationTimer.start();
+			}
+		}
+		
+		private function stopRotation():void
+		{
+			if (rotationTimer)
+			{
+				rotationTimer.removeEventListener(TimerEvent.TIMER, timerHandler);
+				rotationTimer.stop();
+				rotationTimer = null;
+			}
+		}
+		
+		/**
+		 *  @private
+		 * 
+		 *  Rotate the spinner once for each timer event.
+		 */
+		private function timerHandler(event:TimerEvent):void
+		{
+			currentRotation += rotationInterval;
+			if (currentRotation >= 360)
+				currentRotation = 0;
+			
+			rotate(busyIndicator,currentRotation,measuredWidth/2,measuredHeight/2);
+			event.updateAfterEvent();
+		}
+		
+		private var rotationMatrix:Matrix; 
+		private function rotate(obj:DisplayObject, angle:Number, aroundX:Number, aroundY:Number):void
+		{
+			rotationMatrix = new Matrix();
+			rotationMatrix.translate(-aroundX,-aroundY);
+			rotationMatrix.rotate(Math.PI*angle/180);
+			rotationMatrix.translate(aroundX,aroundY);
+			obj.transform.matrix = rotationMatrix;
+		}
+		
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/ButtonBarFirstButtonSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/ButtonBarFirstButtonSkin.as
new file mode 100644
index 0000000..ab4a73a
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/ButtonBarFirstButtonSkin.as
@@ -0,0 +1,56 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+	import spark.skins.ios7.assets.ButtonBarFirstButton_up;
+	
+	/**
+	 *  iOS7+ specific Button skin for the first Button in a ButtonBar.
+	 * 
+	 *  @see spark.components.ButtonBar#firstButton
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10
+	 *  @playerversion AIR 2.5 
+	 *  @productversion Flex 4.5
+	 */
+	public class ButtonBarFirstButtonSkin extends IOS7ButtonBarButtonSkinBase
+	{
+		/**
+		 *  Constructor.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 */
+		public function ButtonBarFirstButtonSkin()
+		{
+			super();
+			
+			upBorderSkin = spark.skins.ios7.assets.ButtonBarFirstButton_up;
+			downBorderSkin = spark.skins.ios7.assets.ButtonBarFirstButton_down;
+			selectedBorderSkin = spark.skins.ios7.assets.ButtonBarFirstButton_down;
+			selectedDownBorderSkin = spark.skins.ios7.assets.ButtonBarFirstButton_up;
+		}
+		
+		
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/ButtonBarLastButtonSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/ButtonBarLastButtonSkin.as
new file mode 100644
index 0000000..8abe433
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/ButtonBarLastButtonSkin.as
@@ -0,0 +1,56 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+	import spark.skins.ios7.assets.ButtonBarLastButton_up;
+	
+	/**
+	 *  iOS7+ specific Button skin for the last Button in a ButtonBar.
+	 * 
+	 *  @see spark.components.ButtonBar#lastButton
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10
+	 *  @playerversion AIR 2.5 
+	 *  @productversion Flex 4.5
+	 */
+	public class ButtonBarLastButtonSkin extends IOS7ButtonBarButtonSkinBase
+	{
+		
+		/**
+		 *  Constructor.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 */
+		public function ButtonBarLastButtonSkin()
+		{
+			super();
+			
+			upBorderSkin = spark.skins.ios7.assets.ButtonBarLastButton_up
+			downBorderSkin = spark.skins.ios7.assets.ButtonBarLastButton_down;
+			selectedBorderSkin = spark.skins.ios7.assets.ButtonBarLastButton_down;
+			selectedDownBorderSkin = spark.skins.ios7.assets.ButtonBarLastButton_up;
+		}
+		
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/ButtonBarMiddleButtonSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/ButtonBarMiddleButtonSkin.as
new file mode 100644
index 0000000..9f69ab8
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/ButtonBarMiddleButtonSkin.as
@@ -0,0 +1,57 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+	
+	import spark.skins.ios7.assets.ButtonBarMiddleButton_up;
+	
+	/**
+	 *  Android 4.x specific Button skin for middle Buttons in a ButtonBar.
+	 * 
+	 *  @see spark.components.ButtonBar#middleButton
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10
+	 *  @playerversion AIR 2.5 
+	 *  @productversion Flex 4.5
+	 */
+	public class ButtonBarMiddleButtonSkin extends IOS7ButtonBarButtonSkinBase
+	{
+		
+		/**
+		 *  Constructor.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 */
+		public function ButtonBarMiddleButtonSkin()
+		{
+			super();
+			
+			upBorderSkin = spark.skins.ios7.assets.ButtonBarMiddleButton_up
+			downBorderSkin = spark.skins.ios7.assets.ButtonBarMiddleButton_down;
+			selectedBorderSkin = spark.skins.ios7.assets.ButtonBarMiddleButton_down;
+			selectedDownBorderSkin = spark.skins.ios7.assets.ButtonBarMiddleButton_up;
+		}
+		
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/ButtonBarSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/ButtonBarSkin.as
new file mode 100644
index 0000000..a1649b6
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/ButtonBarSkin.as
@@ -0,0 +1,165 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+import spark.components.ButtonBar;
+import spark.components.ButtonBarButton;
+import spark.components.DataGroup;
+import spark.components.supportClasses.ButtonBarHorizontalLayout;
+import spark.skins.mobile.supportClasses.ButtonBarButtonClassFactory;
+import spark.skins.mobile.supportClasses.MobileSkin;
+
+/**
+ *  iOS7+ specific skin class for the Spark ButtonBar component.
+ *
+ *  @see spark.components.ButtonBar
+ *
+ *  @langversion 3.0
+ *  @playerversion Flash 10
+ *  @playerversion AIR 2.5
+ *  @productversion Flex 4.5
+ */
+public class ButtonBarSkin extends MobileSkin
+{
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     * Constructor.
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     *
+     */
+    public function ButtonBarSkin()
+    {
+        super();
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Skin parts
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @copy spark.skins.spark.ApplicationSkin#hostComponent
+     */
+    public var hostComponent:ButtonBar;
+    
+    /**
+     *  @copy spark.components.ButtonBar#firstButton
+     */
+    public var firstButton:ButtonBarButtonClassFactory;
+    
+    /**
+     *  @copy spark.components.ButtonBar#lastButton
+     */
+    public var lastButton:ButtonBarButtonClassFactory;
+    
+    /**
+     *  @copy spark.components.ButtonBar#middleButton
+     */
+    public var middleButton:ButtonBarButtonClassFactory;
+    
+    /**
+     *  @copy spark.components.SkinnableDataContainer#dataGroup
+     */
+    public var dataGroup:DataGroup;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @private
+     */
+    override protected function createChildren():void
+    {
+        // Set up the class factories for the buttons
+        if (!firstButton)
+        {
+            firstButton = new ButtonBarButtonClassFactory(ButtonBarButton);
+            firstButton.skinClass = spark.skins.ios7.ButtonBarFirstButtonSkin;
+        }
+        
+        if (!lastButton)
+        {
+            lastButton = new ButtonBarButtonClassFactory(ButtonBarButton);
+            lastButton.skinClass = spark.skins.ios7.ButtonBarLastButtonSkin;
+        }
+        
+        if (!middleButton)
+        {
+            middleButton = new ButtonBarButtonClassFactory(ButtonBarButton);
+            middleButton.skinClass = spark.skins.ios7.ButtonBarMiddleButtonSkin;
+        }
+        
+        // create the data group to house the buttons
+        if (!dataGroup)
+        {
+            dataGroup = new DataGroup();
+            var hLayout:ButtonBarHorizontalLayout = new ButtonBarHorizontalLayout();
+			//TODO: Gap should vary depending on current DPI
+            hLayout.gap = -1;
+            dataGroup.layout = hLayout;
+            addChild(dataGroup);
+        }
+    }
+    
+    /**
+     *  @private
+     */
+    override protected function commitCurrentState():void
+    {
+        alpha = (currentState == "disabled") ? 0.5 : 1;
+    }
+    
+    /**
+     *  @private
+     */
+    override protected function measure():void
+    {
+        measuredWidth = dataGroup.measuredWidth;
+        measuredHeight = dataGroup.measuredHeight;
+        
+        measuredMinWidth = dataGroup.measuredMinWidth;
+        measuredMinHeight = dataGroup.measuredMinHeight;
+    }
+    
+    /**
+     *  @private
+     */
+    override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.layoutContents(unscaledWidth, unscaledHeight);
+        
+        setElementPosition(dataGroup, 0, 0);
+        setElementSize(dataGroup, unscaledWidth, unscaledHeight);
+    }
+}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/ButtonSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/ButtonSkin.as
new file mode 100644
index 0000000..114b365
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/ButtonSkin.as
@@ -0,0 +1,387 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+
+import flash.display.DisplayObject;
+
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+import mx.events.FlexEvent;
+
+import spark.components.supportClasses.StyleableTextField;
+import spark.skins.ios7.assets.Button_up;
+import spark.skins.mobile.supportClasses.ButtonSkinBase;
+
+
+use namespace mx_internal;
+
+/**
+ *  ActionScript-based skin for Button controls in mobile applications. The skin supports 
+ *  iconClass and labelPlacement. It uses FXG classes to 
+ *  implement the vector drawing.  
+ * 
+ *  @langversion 3.0
+ *  @playerversion Flash 10
+ *  @playerversion AIR 2.5 
+ *  @productversion Flex 4.5
+ */
+public class ButtonSkin extends ButtonSkinBase
+{
+    //--------------------------------------------------------------------------
+    //
+    //  Class constants
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     * An array of color distribution ratios.
+     * This is used in the chrome color fill.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    mx_internal static const CHROME_COLOR_RATIOS:Array = [0, 127.5];
+    
+    /**
+     * An array of alpha values for the corresponding colors in the colors array. 
+     * This is used in the chrome color fill.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    mx_internal static const CHROME_COLOR_ALPHAS:Array = [1, 1];
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------
+    /**
+     *  Constructor.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    public function ButtonSkin()
+    {
+        super();
+		//In iOS7, buttons look like simple links, without any shape containing the text
+		//We still need to assign an asset to determine the size of the button
+		//Button_up is a simple transparent graphic object
+		upBorderSkin = spark.skins.ios7.assets.Button_up;
+		downBorderSkin = spark.skins.ios7.assets.Button_up;
+		layoutCornerEllipseSize = 0;
+        
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_640:
+			{
+				
+				layoutGap = 20;
+				layoutPaddingLeft = 40;
+				layoutPaddingRight = 40;
+				layoutPaddingTop = 40;
+				layoutPaddingBottom = 40;
+				layoutBorderSize = 2;
+				measuredDefaultWidth = 128;
+				measuredDefaultHeight = 172;
+				
+				break;
+			}
+			case DPIClassification.DPI_480:
+			{
+				
+				layoutGap = 14;
+				layoutPaddingLeft = 30;
+				layoutPaddingRight = 30;
+				layoutPaddingTop = 30;
+				layoutPaddingBottom = 30;
+				layoutBorderSize = 2;
+				measuredDefaultWidth = 96;
+				measuredDefaultHeight = 130;
+				
+				break;
+			}
+            case DPIClassification.DPI_320:
+            {
+                
+                layoutGap = 10;
+                layoutPaddingLeft = 20;
+                layoutPaddingRight = 20;
+                layoutPaddingTop = 20;
+                layoutPaddingBottom = 20;
+                layoutBorderSize = 2;
+                measuredDefaultWidth = 64;
+                measuredDefaultHeight = 86;
+                
+                break;
+            }
+			case DPIClassification.DPI_240:
+			{
+				
+				layoutGap = 7;
+				layoutPaddingLeft = 15;
+				layoutPaddingRight = 15;
+				layoutPaddingTop = 15;
+				layoutPaddingBottom = 15;
+				layoutBorderSize = 1;
+				measuredDefaultWidth = 48;
+				measuredDefaultHeight = 65;
+				
+				break;
+			}
+			case DPIClassification.DPI_120:
+			{
+				
+				layoutGap = 4;
+				layoutPaddingLeft = 8;
+				layoutPaddingRight = 8;
+				layoutPaddingTop = 8;
+				layoutPaddingBottom = 8;
+				layoutBorderSize = 1;
+				measuredDefaultWidth = 24;
+				measuredDefaultHeight = 33;
+				
+				break;
+			}
+            default:
+            {
+                
+                layoutGap = 5;
+                layoutPaddingLeft = 10;
+                layoutPaddingRight = 10;
+                layoutPaddingTop = 10;
+                layoutPaddingBottom = 10;
+                layoutBorderSize = 1;
+                measuredDefaultWidth = 32;
+                measuredDefaultHeight = 43;
+                
+                break;
+            }
+        }
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Layout variables
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  Defines the corner radius.
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     */  
+    protected var layoutCornerEllipseSize:uint;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Variables
+    //
+    //--------------------------------------------------------------------------
+    private var _border:DisplayObject;
+    
+    private var changeFXGSkin:Boolean = false;
+    
+    private var borderClass:Class;
+    
+    mx_internal var fillColorStyleName:String = "chromeColor";
+    
+    /**
+     *  Defines the shadow for the Button control's label.
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     */  
+    public var labelDisplayShadow:StyleableTextField;
+    
+    /**
+     *  Read-only button border graphic. Use getBorderClassForCurrentState()
+     *  to specify a graphic per-state.
+     * 
+     *  @see #getBorderClassForCurrentState()
+     */
+    protected function get border():DisplayObject
+    {
+        return _border;
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  Class to use for the border in the up state.
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     * 
+     *  @default Button_up
+     */  
+    protected var upBorderSkin:Class;
+    
+    /**
+     *  Class to use for the border in the down state.
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     *       
+     *  @default Button_down
+     */ 
+    protected var downBorderSkin:Class;
+    
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @private
+     */
+    override protected function createChildren():void
+    {
+        super.createChildren();
+        setStyle("textAlign", "center");
+    }
+	
+	override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+	{
+		super.updateDisplayList(unscaledWidth,unscaledHeight);
+		if(currentState == "down")
+		{
+			this.alpha = 0.5;	
+		}
+		else
+		{
+			this.alpha = 1.0;
+		}
+	}
+    
+    /**
+     *  @private 
+     */
+    override protected function commitCurrentState():void
+    {   
+        super.commitCurrentState();
+        
+        borderClass = getBorderClassForCurrentState();
+        
+        if (!(_border is borderClass))
+            changeFXGSkin = true;
+        
+        // update borderClass and background
+        invalidateDisplayList();
+    }
+    
+    /**
+     *  @private
+     */
+    override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.layoutContents(unscaledWidth, unscaledHeight);
+        
+        // size the FXG background
+        if (changeFXGSkin)
+        {
+            changeFXGSkin = false;
+            
+            if (_border)
+            {
+                removeChild(_border);
+                _border = null;
+            }
+            
+            if (borderClass)
+            {
+                _border = new borderClass();
+                addChildAt(_border, 0);
+            }
+        }
+        
+        layoutBorder(unscaledWidth, unscaledHeight);
+        
+    }
+    
+    /**
+     *  Position the background of the skin. Override this function to re-position the background. 
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     */ 
+    mx_internal function layoutBorder(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        setElementSize(border, unscaledWidth, unscaledHeight);
+        setElementPosition(border, 0, 0);
+    }
+    
+    /**
+     *  Returns the borderClass to use based on the currentState.
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     */
+    protected function getBorderClassForCurrentState():Class
+    {
+        if (currentState == "down") 
+            return downBorderSkin;
+        else
+            return upBorderSkin;
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Event Handlers
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @private 
+     */
+    override protected function labelDisplay_valueCommitHandler(event:FlexEvent):void 
+    {
+        super.labelDisplay_valueCommitHandler(event);
+    }
+    
+}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutActionBarSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutActionBarSkin.as
new file mode 100644
index 0000000..8f22ff6
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutActionBarSkin.as
@@ -0,0 +1,102 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+import mx.core.DPIClassification;
+
+/**
+ *  Additional skin class for the Spark ActionBar component for use with a
+ *  ViewNavigator inside a Callout component.
+ * 
+ *  Uses a transparent background instead of a gradient fill.
+ *  
+ *  @see spark.skins.mobile.ActionBarSkin
+ *  
+ *  @langversion 3.0
+ *  @playerversion AIR 3
+ *  @productversion Flex 4.6
+ */
+public class CalloutActionBarSkin extends ActionBarSkin
+{
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------
+    
+    public function CalloutActionBarSkin()
+    {
+        super();
+        
+        // remove default background
+        //borderClass = null;
+        
+        // shorten ActionBar height visual paddingTop comes from CalloutSkin
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_640:
+			{
+				layoutContentGroupHeight = 108;
+				break;
+			}
+			case DPIClassification.DPI_480:
+			{
+				layoutContentGroupHeight = 84;
+				break;
+			}
+            case DPIClassification.DPI_320:
+            {
+                layoutContentGroupHeight = 54;
+                break;
+            }
+			case DPIClassification.DPI_240:
+			{
+				layoutContentGroupHeight = 42;
+				break;
+			}
+			case DPIClassification.DPI_120:
+			{
+				layoutContentGroupHeight = 21;
+				break;
+			}
+            default:
+            {
+                // default DPI_160
+                layoutContentGroupHeight = 28;
+                break;
+            }
+        }
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @private
+     */
+    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        // do not draw chromeColor
+    }
+}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutSkin.as
new file mode 100644
index 0000000..b578406
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutSkin.as
@@ -0,0 +1,779 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+import flash.display.BlendMode;
+import flash.display.GradientType;
+import flash.display.Graphics;
+import flash.display.Sprite;
+import flash.events.Event;
+
+import mx.core.DPIClassification;
+import mx.core.UIComponent;
+import mx.core.mx_internal;
+import mx.events.EffectEvent;
+import mx.events.FlexEvent;
+import mx.utils.ColorUtil;
+
+import spark.components.ArrowDirection;
+import spark.components.Callout;
+import spark.components.ContentBackgroundAppearance;
+import spark.components.Group;
+import spark.core.SpriteVisualElement;
+import spark.effects.Fade;
+import spark.primitives.RectangularDropShadow;
+import spark.skins.ios7.supportClasses.CalloutArrow;
+import spark.skins.mobile.supportClasses.MobileSkin;
+
+use namespace mx_internal;
+
+/**
+ *  The default skin class for the Spark Callout component in mobile
+ *  applications.
+ * 
+ *  <p>The <code>contentGroup</code> lies above a <code>backgroundColor</code> fill
+ *  which frames the <code>contentGroup</code>. The position and size of the frame 
+ *  adjust based on the host component <code>arrowDirection</code>, leaving
+ *  space for the <code>arrow</code> to appear on the outside edge of the
+ *  frame.</p>
+ * 
+ *  <p>The <code>arrow</code> skin part is not positioned by the skin. Instead,
+ *  the Callout component positions the arrow relative to the owner in
+ *  <code>updateSkinDisplayList()</code>. This method assumes that Callout skin
+ *  and the <code>arrow</code> use the same coordinate space.</p>
+ *  
+ *  @see spark.components.Callout
+ *  
+ *  @langversion 3.0
+ *  @playerversion AIR 3
+ *  @productversion Flex 4.6
+ */ 
+public class CalloutSkin extends MobileSkin
+{
+    mx_internal static const BACKGROUND_GRADIENT_BRIGHTNESS_TOP:int = 15;
+    
+    mx_internal static const BACKGROUND_GRADIENT_BRIGHTNESS_BOTTOM:int = -15;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  Constructor. 
+     * 
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    public function CalloutSkin()
+    {
+        super();
+        
+        dropShadowAlpha = 0;
+		contentBackgroundInsetClass = null;
+		frameThickness = 0;
+		backgroundCornerRadius = 0;
+		backgroundGradientHeight = 0;
+        
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_640:
+			{
+				
+				arrowWidth = 160;
+				arrowHeight = 80;
+				contentCornerRadius = 40;
+				dropShadowBlurX = 64;
+				dropShadowBlurY = 64;
+				dropShadowDistance = 12;
+				highlightWeight = 4;
+				
+				break;
+			}
+			case DPIClassification.DPI_480:
+			{
+				arrowWidth = 120;
+				arrowHeight = 60;
+				contentCornerRadius = 30;
+				dropShadowBlurX = 48;
+				dropShadowBlurY = 48;
+				dropShadowDistance = 8;
+				highlightWeight = 2;
+				
+				break;
+			}
+            case DPIClassification.DPI_320:
+            {
+				
+				arrowWidth = 80;
+				arrowHeight = 40;
+				contentCornerRadius = 20;
+				dropShadowBlurX = 32;
+				dropShadowBlurY = 32;
+				dropShadowDistance = 6;
+				highlightWeight = 2;
+                
+                break;
+            }
+            case DPIClassification.DPI_240:
+            {
+                arrowWidth = 60;
+                arrowHeight = 30;
+                contentCornerRadius = 15;
+                dropShadowBlurX = 24;
+                dropShadowBlurY = 24;
+                dropShadowDistance = 4;
+                highlightWeight = 1;
+                
+                break;
+            }
+			case DPIClassification.DPI_120:
+			{
+				arrowWidth = 30;
+				arrowHeight = 15;
+				contentCornerRadius = 7.5;
+				dropShadowBlurX = 12;
+				dropShadowBlurY = 12;
+				dropShadowDistance = 2;
+				highlightWeight = 0.5;
+				
+				break;
+			}
+            default:
+            {
+                // default DPI_160
+                arrowWidth = 40;
+                arrowHeight = 20;
+                contentCornerRadius = 10;
+                dropShadowBlurX = 16;
+                dropShadowBlurY = 16;
+                dropShadowDistance = 3;
+                highlightWeight = 1;
+                
+                break;
+            }
+        }
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Variables
+    //
+    //--------------------------------------------------------------------------
+    
+    /** 
+     *  @copy spark.skins.spark.ApplicationSkin#hostComponent
+     */
+    public var hostComponent:Callout;
+    
+    /**
+     *  Enables a RectangularDropShadow behind the <code>backgroundColor</code> frame.
+     *  
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    protected var dropShadowVisible:Boolean = false;
+    
+    /**
+     *  Enables a vertical linear gradient in the <code>backgroundColor</code> frame. This
+     *  gradient fill is drawn across both the arrow and the frame. By default,
+     *  the gradient brightens the background color by 15% and darkens it by 60%.
+     * 
+     *  @default true
+     *  
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    protected var useBackgroundGradient:Boolean = true;
+    
+    /**
+     *  Corner radius used for the <code>contentBackgroundColor</code> fill.
+     *  
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    protected var contentCornerRadius:uint;
+    
+    /**
+     *  A class reference to an FXG class that is layered underneath the
+     *  <code>contentGroup</code>. The instance of this class is sized to match the
+     *  <code>contentGroup</code>.
+     *  
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    protected var contentBackgroundInsetClass:Class;
+    
+    /**
+     *  Corner radius of the <code>backgroundColor</code> "frame".
+     *  
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    protected var backgroundCornerRadius:Number;
+    
+    /**
+     *  The thickness of the <code>backgroundColor</code> "frame" that surrounds the
+     *  <code>contentGroup</code>.
+     *  
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    protected var frameThickness:Number;
+    
+    /**
+     *  Color of the border stroke around the <code>backgroundColor</code> "frame".
+     *  
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    protected var borderColor:Number = -1; // not set
+    
+    /**
+     *  Thickness of the border stroke around the <code>backgroundColor</code>
+     *  "frame".
+     *  
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    protected var borderThickness:Number = -1 ;      // marker that borderThickness was not set  directly
+    
+    /**
+     *  Width of the arrow in vertical directions. This property also controls
+     *  the height of the arrow in horizontal directions.
+     *  
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    protected var arrowWidth:Number;
+    
+    /**
+     *  Height of the arrow in vertical directions. This property also controls
+     *  the width of the arrow in horizontal directions.
+     *  
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    protected var arrowHeight:Number;
+    
+    /**
+     *  @private
+     *  Instance of the contentBackgroundClass
+     */
+    mx_internal var contentBackgroundGraphic:SpriteVisualElement;
+    
+    /**
+     *  @private
+     *  Tracks changes to the skin state to support the fade out tranisition 
+     *  when closed;
+     */
+    mx_internal var isOpen:Boolean;
+    
+    private var backgroundGradientHeight:Number;
+    
+    private var contentMask:Sprite;
+    
+    private var backgroundFill:SpriteVisualElement;
+    
+    private var dropShadow:RectangularDropShadow;
+    
+    private var dropShadowBlurX:Number;
+    
+    private var dropShadowBlurY:Number;
+    
+    private var dropShadowDistance:Number;
+    
+    private var dropShadowAlpha:Number;
+    
+    private var fade:Fade;
+    
+    private var highlightWeight:Number;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Skin parts
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @copy spark.components.SkinnableContainer#contentGroup
+     */
+    public var contentGroup:Group;
+    
+    /**
+     * @copy spark.components.Callout#arrow
+     */
+    public var arrow:UIComponent;
+
+    /* helper private accessors */
+
+    /* returns borderThickness from style if member is -1, or borderThickness.  Returns 0 if NaN */
+    mx_internal function get actualBorderThickness():Number
+    {
+        var border: Number =  borderThickness != -1 ? borderThickness : getStyle('borderThickness');
+        return isNaN(border)? 0: border;
+    }
+
+    mx_internal function get actualBorderColor():uint
+    {
+        return borderColor != -1 ? borderColor: getStyle('borderColor');
+    }
+
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     * @private
+     */
+    override protected function createChildren():void
+    {
+        super.createChildren();
+        
+        if (dropShadowVisible)
+        {
+            dropShadow = new RectangularDropShadow();
+            dropShadow.angle = 90;
+            dropShadow.distance = dropShadowDistance;
+            dropShadow.blurX = dropShadowBlurX;
+            dropShadow.blurY = dropShadowBlurY;
+            dropShadow.tlRadius = dropShadow.trRadius = dropShadow.blRadius = 
+                dropShadow.brRadius = backgroundCornerRadius ;
+            dropShadow.mouseEnabled = false;
+            dropShadow.alpha = dropShadowAlpha;
+            addChild(dropShadow);
+        }
+        
+        // background fill placed above the drop shadow
+        backgroundFill = new SpriteVisualElement();
+        addChild(backgroundFill);
+        
+        // arrow
+        if (!arrow)
+        {
+            arrow = new CalloutArrow();
+            arrow.id = "arrow";
+            arrow.styleName = this;
+            addChild(arrow);
+        }
+        
+        // contentGroup
+        if (!contentGroup)
+        {
+            contentGroup = new Group();
+            contentGroup.id = "contentGroup";
+            addChild(contentGroup);
+        }
+
+
+    }
+    
+    /**
+     * @private
+     */
+    override protected function commitProperties():void
+    {
+        super.commitProperties();
+        
+        // add or remove the contentBackgroundGraphic
+        var contentBackgroundAppearance:String = getStyle("contentBackgroundAppearance");
+        
+        if (contentBackgroundAppearance == ContentBackgroundAppearance.INSET)
+        {
+            // create the contentBackgroundGraphic
+            if (!contentBackgroundGraphic && contentBackgroundInsetClass)
+            {
+                contentBackgroundGraphic = new contentBackgroundInsetClass() as SpriteVisualElement;
+                
+                // with the current skin structure, contentBackgroundGraphic is
+                // always the last child
+                addChild(contentBackgroundGraphic);
+            }
+        }
+        else if (contentBackgroundGraphic)
+        {
+            // if already created, remove the graphic for "flat" and "none"
+            removeChild(contentBackgroundGraphic);
+            contentBackgroundGraphic = null;
+        }
+        
+        // always invalidate to accomodate arrow direction changes
+        invalidateSize();
+        invalidateDisplayList();
+    }
+
+
+    /**
+     * @private
+     */
+    override protected function measure():void
+    {
+        super.measure();
+        
+        var borderWeight:Number =actualBorderThickness;
+        var frameAdjustment:Number = (frameThickness + borderWeight) * 2;
+        
+        var arrowMeasuredWidth:Number;
+        var arrowMeasuredHeight:Number;
+        
+        // pad the arrow so that the edges are within the background corner radius
+        if (isArrowHorizontal)
+        {
+            arrowMeasuredWidth = arrowHeight;
+            arrowMeasuredHeight = arrowWidth + (backgroundCornerRadius * 2);
+        }
+        else if (isArrowVertical)
+        {
+            arrowMeasuredWidth = arrowWidth + (backgroundCornerRadius * 2);
+            arrowMeasuredHeight = arrowHeight;
+        }
+        
+        // count the contentGroup size and frame size
+        measuredMinWidth = contentGroup.measuredMinWidth + frameAdjustment;
+        measuredMinHeight = contentGroup.measuredMinHeight + frameAdjustment;
+        
+        measuredWidth = contentGroup.getPreferredBoundsWidth() + frameAdjustment;
+        measuredHeight = contentGroup.getPreferredBoundsHeight() + frameAdjustment;
+        
+        // add the arrow size based on the arrowDirection
+        if (isArrowHorizontal)
+        {
+            measuredMinWidth += arrowMeasuredWidth;
+            measuredMinHeight = Math.max(measuredMinHeight, arrowMeasuredHeight);
+            
+            measuredWidth += arrowMeasuredWidth;
+            measuredHeight = Math.max(measuredHeight, arrowMeasuredHeight);
+        }
+        else if (isArrowVertical)
+        {
+            measuredMinWidth += Math.max(measuredMinWidth, arrowMeasuredWidth);
+            measuredMinHeight += arrowMeasuredHeight;
+            
+            measuredWidth = Math.max(measuredWidth, arrowMeasuredWidth);
+            measuredHeight += arrowMeasuredHeight;
+        }
+    }
+    
+    /**
+     *  @private
+     *  SkinnaablePopUpContainer skins must dispatch a 
+     *  FlexEvent.STATE_CHANGE_COMPLETE event for the component to properly
+     *  update the skin state.
+     */
+    override protected function commitCurrentState():void
+    {
+        super.commitCurrentState();
+        
+        var isNormal:Boolean = (currentState == "normal");
+        var isDisabled:Boolean = (currentState == "disabled")
+        
+        // play a fade out if the callout was previously open
+        if (!(isNormal || isDisabled) && isOpen)
+        {
+            if (!fade)
+            {
+                fade = new Fade();
+                fade.target = this;
+                fade.duration = 200;
+                fade.alphaTo = 0;
+            }
+            
+            // BlendMode.LAYER while fading out
+            blendMode = BlendMode.LAYER;
+            
+            // play a short fade effect
+            fade.addEventListener(EffectEvent.EFFECT_END, stateChangeComplete);
+            fade.play();
+            
+            isOpen = false;
+        }
+        else
+        {
+            isOpen = isNormal || isDisabled;
+            
+            // handle re-opening the Callout while fading out
+            if (fade && fade.isPlaying)
+            {
+                // Do not dispatch a state change complete.
+                // SkinnablePopUpContainer handles state interruptions.
+                fade.removeEventListener(EffectEvent.EFFECT_END, stateChangeComplete);
+                fade.stop();
+            }
+            
+            if (isDisabled)
+            {
+                // BlendMode.LAYER to allow CalloutArrow BlendMode.ERASE
+                blendMode = BlendMode.LAYER;
+                
+                alpha = 0.5;
+            }
+            else
+            {
+                // BlendMode.NORMAL for non-animated state transitions
+                blendMode = BlendMode.NORMAL;
+                
+                if (isNormal)
+                    alpha = 1;
+                else
+                    alpha = 0;
+            }
+            
+            stateChangeComplete();
+        }
+    }
+    
+    /**
+     * @private
+     */
+    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.drawBackground(unscaledWidth, unscaledHeight);
+        
+        var frameEllipseSize:Number = backgroundCornerRadius * 2;
+        
+        // account for borderThickness center stroke alignment
+        var borderWeight:Number =actualBorderThickness;
+        var showBorder:Boolean = borderWeight > 0 ;
+
+        
+        // contentBackgroundGraphic already accounts for the arrow position
+        // use it's positioning instead of recalculating based on unscaledWidth
+        // and unscaledHeight
+        var frameX:Number = Math.floor(contentGroup.getLayoutBoundsX() - frameThickness) - (borderWeight / 2);
+        var frameY:Number = Math.floor(contentGroup.getLayoutBoundsY() - frameThickness) - (borderWeight / 2);
+        var frameWidth:Number = contentGroup.getLayoutBoundsWidth() + (frameThickness * 2) + borderWeight;
+        var frameHeight:Number = contentGroup.getLayoutBoundsHeight() + (frameThickness * 2) + borderWeight;
+        
+        var backgroundColor:Number = getStyle("contentBackgroundColor");
+        var backgroundAlpha:Number = getStyle("backgroundAlpha");
+        
+        var bgFill:Graphics = backgroundFill.graphics;
+        bgFill.clear();
+		
+        // draw content background styles
+        var contentBackgroundAppearance:String = getStyle("contentBackgroundAppearance");
+        
+        if (contentBackgroundAppearance != ContentBackgroundAppearance.NONE)
+        {
+            var contentEllipseSize:Number = contentCornerRadius * 2;
+            var contentBackgroundAlpha:Number = getStyle("contentBackgroundAlpha");
+            var contentWidth:Number = contentGroup.getLayoutBoundsWidth();
+            var contentHeight:Number = contentGroup.getLayoutBoundsHeight();
+            
+            // all appearance values except for "none" use a mask
+            if (!contentMask)
+                contentMask = new SpriteVisualElement();
+            
+            contentGroup.mask = contentMask;
+            
+            // draw contentMask in contentGroup coordinate space
+            var maskGraphics:Graphics = contentMask.graphics;
+            maskGraphics.clear();
+            maskGraphics.beginFill(0, 1);
+            maskGraphics.drawRoundRect(0, 0, contentWidth, contentHeight,
+                contentEllipseSize, contentEllipseSize);
+            maskGraphics.endFill();
+            
+            // reset line style to none
+            if (showBorder)
+                bgFill.lineStyle(NaN);
+            
+            // draw the contentBackgroundColor
+            bgFill.beginFill(getStyle("contentBackgroundColor"),
+                contentBackgroundAlpha);
+            bgFill.drawRoundRect(contentGroup.getLayoutBoundsX(),
+                contentGroup.getLayoutBoundsY(),
+                contentWidth, contentHeight, contentEllipseSize, contentEllipseSize);
+            bgFill.endFill();
+            
+            if (contentBackgroundGraphic)
+                contentBackgroundGraphic.alpha = contentBackgroundAlpha;
+        }
+        else // if (contentBackgroundAppearance == CalloutContentBackgroundAppearance.NONE))
+        {
+            // remove the mask
+            if (contentMask)
+            {
+                contentGroup.mask = null;
+                contentMask = null;
+            }
+        }
+        
+        // draw highlight in the callout when the arrow is hidden
+        if (useBackgroundGradient && !isArrowHorizontal && !isArrowVertical)
+        {
+            // highlight width spans the callout width minus the corner radius
+            var highlightWidth:Number = frameWidth - frameEllipseSize;
+            var highlightX:Number = frameX + backgroundCornerRadius;
+            var highlightOffset:Number = (highlightWeight * 1.5);
+            
+            // straight line across the top
+            bgFill.lineStyle(highlightWeight, 0xFFFFFF, 0.2 * backgroundAlpha);
+            bgFill.moveTo(highlightX, highlightOffset);
+            bgFill.lineTo(highlightX + highlightWidth, highlightOffset);
+        }
+    }
+    
+    /**
+     * @private
+     */
+    override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.layoutContents(unscaledWidth, unscaledHeight);
+        
+        // pad the arrow so that the edges are within the background corner radius
+        if (isArrowHorizontal)
+        {
+            arrow.width = arrowHeight;
+            arrow.height = arrowWidth + (backgroundCornerRadius * 2);
+        }
+        else if (isArrowVertical)
+        {
+            arrow.width = arrowWidth + (backgroundCornerRadius * 2);
+            arrow.height = arrowHeight;
+        }
+        
+        setElementSize(backgroundFill, unscaledWidth, unscaledHeight);
+        setElementPosition(backgroundFill, 0, 0);
+        
+        var frameX:Number = 0;
+        var frameY:Number = 0;
+        var frameWidth:Number = unscaledWidth;
+        var frameHeight:Number = unscaledHeight;
+        
+        switch (hostComponent.arrowDirection)
+        {
+            case ArrowDirection.UP:
+                frameY = arrow.height;
+                frameHeight -= arrow.height;
+                break;
+            case ArrowDirection.DOWN:
+                frameHeight -= arrow.height;
+                break;
+            case ArrowDirection.LEFT:
+                frameX = arrow.width;
+                frameWidth -= arrow.width;
+                break;
+            case ArrowDirection.RIGHT:
+                frameWidth -= arrow.width;
+                break;
+            default:
+                // no arrow, content takes all available space
+                break;
+        }
+        
+        if (dropShadow)
+        {
+            setElementSize(dropShadow, frameWidth, frameHeight);
+            setElementPosition(dropShadow, frameX, frameY);
+        }
+        
+        // Show frameThickness by inset of contentGroup
+        var borderWeight:Number = actualBorderThickness;
+        var contentBackgroundAdjustment:Number = frameThickness + borderWeight;
+        
+        var contentBackgroundX:Number = frameX + contentBackgroundAdjustment;
+        var contentBackgroundY:Number = frameY + contentBackgroundAdjustment;
+        
+        contentBackgroundAdjustment = contentBackgroundAdjustment * 2;
+        var contentBackgroundWidth:Number = frameWidth - contentBackgroundAdjustment;
+        var contentBackgroundHeight:Number = frameHeight - contentBackgroundAdjustment;
+        
+        if (contentBackgroundGraphic)
+        {
+            setElementSize(contentBackgroundGraphic, contentBackgroundWidth, contentBackgroundHeight);
+            setElementPosition(contentBackgroundGraphic, contentBackgroundX, contentBackgroundY);
+        }
+        
+        setElementSize(contentGroup, contentBackgroundWidth, contentBackgroundHeight);
+        setElementPosition(contentGroup, contentBackgroundX, contentBackgroundY);
+        
+        // mask position is in the contentGroup coordinate space
+        if (contentMask)
+            setElementSize(contentMask, contentBackgroundWidth, contentBackgroundHeight);
+    }
+    
+    override public function styleChanged(styleProp:String):void
+    {
+        super.styleChanged(styleProp);
+        
+        var allStyles:Boolean = !styleProp || styleProp == "styleName";
+        
+        if (allStyles || (styleProp == "contentBackgroundAppearance"))
+            invalidateProperties();
+        
+        if (allStyles || (styleProp == "backgroundAlpha"))
+        {
+            var backgroundAlpha:Number = getStyle("backgroundAlpha");
+            
+            // Use BlendMode.LAYER to allow CalloutArrow to erase the dropShadow
+            // when the Callout background is transparent
+            blendMode = (backgroundAlpha < 1) ? BlendMode.LAYER : BlendMode.NORMAL;
+        }
+    }
+    
+    /**
+     * @private
+     */
+    mx_internal function get isArrowHorizontal():Boolean
+    {
+        return (hostComponent.arrowDirection == ArrowDirection.LEFT
+            || hostComponent.arrowDirection == ArrowDirection.RIGHT);
+    }
+    
+    /**
+     * @private
+     */
+    mx_internal function get isArrowVertical():Boolean
+    {
+        return (hostComponent.arrowDirection == ArrowDirection.UP
+            || hostComponent.arrowDirection == ArrowDirection.DOWN);
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Event handlers
+    //
+    //--------------------------------------------------------------------------
+    
+    private function stateChangeComplete(event:Event=null):void
+    {
+        if (fade && event)
+            fade.removeEventListener(EffectEvent.EFFECT_END, stateChangeComplete);
+        
+        // SkinnablePopUpContainer relies on state changes for open and close
+        dispatchEvent(new FlexEvent(FlexEvent.STATE_CHANGE_COMPLETE));
+    }
+}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutViewNavigatorSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutViewNavigatorSkin.as
new file mode 100644
index 0000000..a8b972d
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutViewNavigatorSkin.as
@@ -0,0 +1,236 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+
+import flash.display.Graphics;
+
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+
+import spark.core.SpriteVisualElement;
+import spark.skins.mobile.ViewNavigatorSkin;
+
+use namespace mx_internal;
+
+/**
+ *  The ActionScript-based skin for view navigators inside a callout.
+ *  This skin lays out the action bar and content
+ *  group in a vertical fashion, where the action bar is on top.
+ *  Unlike the default skin, overlay modes are not supported. 
+ * 
+ *  @langversion 3.0
+ *  @playerversion AIR 3 
+ *  @productversion Flex 4.6
+ */
+public class CalloutViewNavigatorSkin extends ViewNavigatorSkin
+{
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------  
+    
+    /**
+     *  Constructor.
+     *  
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    public function CalloutViewNavigatorSkin()
+    {
+        super();
+        
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_640:
+			{
+				contentCornerRadius = 28;
+				gap = 48;
+				break;
+			}	
+			case DPIClassification.DPI_480:
+			{
+				contentCornerRadius = 14;
+				gap = 24;
+				break;
+			}	
+            case DPIClassification.DPI_320:
+            {
+                contentCornerRadius = 10;
+                gap = 16;
+                break;
+            }
+			case DPIClassification.DPI_240:
+			{
+				contentCornerRadius = 7;
+				gap = 12;
+				break;
+			}
+			case DPIClassification.DPI_240:
+			{
+				contentCornerRadius = 4;
+				gap = 6;
+				break;
+			}
+            default:
+            {
+                // default DPI_160
+                contentCornerRadius = 5;
+                gap = 8;
+                break;
+            }
+        }
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Layout variables
+    //
+    //--------------------------------------------------------------------------
+    
+    mx_internal var gap:Number;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Variables
+    //
+    //--------------------------------------------------------------------------
+    
+    mx_internal var contentCornerRadius:Number;
+    
+    private var contentMask:SpriteVisualElement;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @private 
+     */ 
+    override protected function createChildren():void
+    {
+        super.createChildren();
+        
+        // mask the ViewNavigator contentGroup
+        contentMask = new SpriteVisualElement();
+        contentGroup.mask = contentMask;
+        
+    }
+    
+    /**
+     *  @private 
+     */ 
+    override protected function measure():void
+    {
+        super.measure();
+        
+        measuredWidth = Math.max(actionBar.getPreferredBoundsWidth(), 
+            contentGroup.getPreferredBoundsWidth());
+        measuredHeight = actionBar.getPreferredBoundsHeight()
+            + contentGroup.getPreferredBoundsHeight()
+            + gap;
+    }
+    
+    /**
+     *  @private
+     */ 
+    override protected function commitCurrentState():void
+    {
+        super.commitCurrentState();
+        
+        // Force a layout pass on the components
+        invalidateProperties();
+        invalidateSize();
+        invalidateDisplayList();
+    }
+    
+    /**
+     *  @private
+     */
+    override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        // omit super call
+        
+        var actionBarHeight:Number = 0;
+        
+        // The action bar is always placed at 0,0 and stretches the entire
+        // width of the navigator
+        if (actionBar.includeInLayout)
+        {
+            actionBarHeight = Math.min(actionBar.getPreferredBoundsHeight(), unscaledHeight);
+            setElementSize(actionBar, unscaledWidth, actionBarHeight);
+            setElementPosition(actionBar, 0, 0);
+            actionBarHeight = actionBar.getLayoutBoundsHeight();
+        }
+        
+        // If the hostComponent is in overlay mode, the contentGroup extends
+        // the entire bounds of the navigator and the alpha for the action 
+        // bar changes
+        // If this changes, also update validateEstimatedSizesOfChild
+        var contentGroupHeight:Number = 0;
+        
+        if (contentGroup.includeInLayout)
+        {
+            contentGroupHeight = Math.max(unscaledHeight - actionBarHeight - gap, 0);
+            
+            setElementSize(contentGroup, unscaledWidth, contentGroupHeight);
+            setElementPosition(contentGroup, 0, actionBarHeight + gap);
+            
+        }
+        
+        setElementSize(contentMask, unscaledWidth, contentGroupHeight);
+    }
+    
+    /**
+     *  @private
+     */
+    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.drawBackground(unscaledWidth, unscaledHeight);
+        
+        // draw the contentBackgroundColor
+        // the shading and highlight are drawn in FXG
+        var contentEllipseSize:Number = contentCornerRadius * 2;
+        var contentBackgroundAlpha:Number = getStyle("contentBackgroundAlpha");
+        var contentWidth:Number = contentGroup.getLayoutBoundsWidth();
+        var contentHeight:Number = contentGroup.getLayoutBoundsHeight();
+        
+        graphics.beginFill(getStyle("contentBackgroundColor"),
+            contentBackgroundAlpha);
+        graphics.endFill();
+        
+        if (contentMask)
+        {
+            // content mask in contentGroup coordinate space
+            var maskGraphics:Graphics = contentMask.graphics;
+            maskGraphics.clear();
+            maskGraphics.beginFill(0, 1);
+            maskGraphics.drawRoundRect(0, 0, contentWidth, contentHeight,
+                contentEllipseSize, contentEllipseSize);
+            maskGraphics.endFill();
+        }
+        
+    }
+}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/CheckBoxSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/CheckBoxSkin.as
new file mode 100644
index 0000000..1e77c87
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/CheckBoxSkin.as
@@ -0,0 +1,266 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+	import flash.display.DisplayObject;
+	
+	import mx.core.DPIClassification;
+	
+	import spark.skins.ios7.assets.CheckBox_up;
+	import spark.skins.mobile.supportClasses.SelectableButtonSkinBase;
+	
+	/**
+	 *  ActionScript-based skin for CheckBox components in mobile applications. 
+	 * 
+	 *  @see spark.components.CheckBox
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10
+	 *  @playerversion AIR 2.5 
+	 *  @productversion Flex 4.5
+	 */
+	public class CheckBoxSkin extends SelectableButtonSkinBase
+	{
+		//--------------------------------------------------------------------------
+		//
+		//  Class constants
+		//
+		//--------------------------------------------------------------------------
+		
+		private static const exclusions:Array = ["labelDisplay", "labelDisplayShadow"];
+
+		//--------------------------------------------------------------------------
+		//
+		//  Member variables
+		//
+		//--------------------------------------------------------------------------
+
+		protected var symbolOffsetX:Number;
+		protected var symbolOffsetY:Number;
+		protected var iconWidth:Number;
+		protected var iconHeight:Number;
+		protected var symbolWidth:Number;
+		protected var symbolHeight:Number;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Constructor
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  Constructor.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5
+		 *  @productversion Flex 4.5
+		 */
+		public function CheckBoxSkin()
+		{
+			super();
+			
+			layoutPaddingLeft = 0;
+			layoutPaddingRight = 0;
+			layoutPaddingTop = 0;
+			layoutPaddingBottom = 0;
+			
+			upIconClass = spark.skins.ios7.assets.CheckBox_up;
+			upSymbolIconClass = null;
+			upSelectedIconClass = spark.skins.ios7.assets.CheckBox_upSelected;
+			upSymbolIconSelectedClass = spark.skins.ios7.assets.CheckBox_upSymbolSelected;
+
+			downIconClass = spark.skins.ios7.assets.CheckBox_up;
+			downSymbolIconClass = null
+			downSelectedIconClass = spark.skins.ios7.assets.CheckBox_up;
+			downSymbolIconSelectedClass = null;
+			
+			switch (applicationDPI)
+			{
+				case DPIClassification.DPI_640:
+				{
+					
+					layoutGap = 16;
+					minWidth = 128;
+					minHeight = 128;
+					layoutBorderSize = 6;
+					iconWidth = 128;
+					iconHeight = 128;
+					symbolWidth = 80;
+					symbolHeight = 80;
+					symbolOffsetX = 2;
+					symbolOffsetY = 0;
+					
+					break;
+				}
+				case DPIClassification.DPI_480:
+				{
+					
+					layoutGap = 12;
+					minWidth = 96;
+					minHeight = 96;
+					layoutBorderSize = 4;
+					iconWidth = 96;
+					iconHeight = 96;
+					symbolWidth = 60;
+					symbolHeight = 60;
+					symbolOffsetX = 2;
+					symbolOffsetY = 0;
+					
+					break;
+				}
+				case DPIClassification.DPI_320:
+				{
+					
+					layoutGap = 8;
+					minWidth = 64;
+					minHeight = 64;
+					layoutBorderSize = 3;
+					iconWidth = 64;
+					iconHeight = 64;
+					symbolWidth = 40;
+					symbolHeight = 40;
+					symbolOffsetX = 1;
+					symbolOffsetY = 0;
+
+					break;
+				}
+				case DPIClassification.DPI_240:
+				{
+					
+					layoutGap = 6;
+					minWidth = 48;
+					minHeight = 48;
+					layoutBorderSize = 2;
+					iconWidth = 48;
+					iconHeight = 48;
+					symbolWidth = 30;
+					symbolHeight = 30;
+					symbolOffsetX = 0;
+					symbolOffsetY = 0;
+					
+					break;
+				}
+				case DPIClassification.DPI_120:
+				{
+					
+					layoutGap = 3;
+					minWidth = 24;
+					minHeight = 24;
+					layoutBorderSize = 1;
+					iconWidth = 24;
+					iconHeight = 24;
+					symbolWidth = 16;
+					symbolHeight = 16;
+					symbolOffsetX = 0;
+					symbolOffsetY = -1;
+					
+					break;
+				}
+				default:
+				{
+					layoutGap = 4;
+					minWidth = 32;
+					minHeight = 32;
+					layoutBorderSize = 2;
+					iconWidth = 32;
+					iconHeight = 32;
+					symbolWidth = 20;
+					symbolHeight = 20;
+					symbolOffsetX = 0.5;
+					symbolOffsetY = 0;
+					
+					break;
+				}
+			}
+		}
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Overridden methods
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  @private
+		 *  CheckBox <code>chromeColor</code> is drawn to match the FXG rectangle
+		 *  shape and position.
+		 */
+		override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			// super draws a transparent hit zone
+			super.drawBackground(unscaledWidth, unscaledHeight);
+			
+			// get the size and position of iconDisplay
+			var currentIcon:DisplayObject = getIconDisplay();
+			var widthAdjustment:Number = layoutBorderSize * 2;
+			
+			graphics.beginFill(getStyle("chromeColor"));
+			graphics.drawRoundRect(currentIcon.x + layoutBorderSize,
+				currentIcon.y + layoutBorderSize,
+				currentIcon.width - widthAdjustment,
+				currentIcon.height - widthAdjustment, layoutBorderSize, layoutBorderSize);
+			graphics.endFill();
+		}
+		
+		/**
+		 *  List of IDs of items that should be excluded when rendering the focus ring.
+		 *  Only items of type DisplayObject or GraphicElement should be excluded. Items
+		 *  of other types are ignored.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5
+		 *  @productversion Flex 4.5
+		 */
+		override protected function get focusSkinExclusions():Array 
+		{
+			return exclusions;
+		}
+		
+		override protected function commitCurrentState():void
+		{
+			super.commitCurrentState();
+			if(symbolIcon != null)
+			{
+				symbolIcon.width = symbolWidth;
+				symbolIcon.height = symbolHeight;
+			}
+			var iconDisplay:DisplayObject = getIconDisplay(); 
+			if(iconDisplay != null)
+			{
+				iconDisplay.width = iconWidth;
+				iconDisplay.height = iconHeight;
+			}
+		}
+		
+		override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			super.layoutContents(unscaledWidth, unscaledHeight);
+			// position the symbols to align with the background "icon"
+			if (symbolIcon)
+			{
+				var currentIcon:DisplayObject = getIconDisplay();
+				setElementPosition(symbolIcon, symbolOffsetX, symbolOffsetY);
+			}
+		}
+		
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/HScrollBarSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/HScrollBarSkin.as
new file mode 100644
index 0000000..1a99e1b
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/HScrollBarSkin.as
@@ -0,0 +1,205 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+
+import spark.components.Button;
+import spark.components.HScrollBar;
+import spark.skins.mobile.supportClasses.MobileSkin;
+
+use namespace mx_internal;
+
+/**
+ *  ActionScript-based skin for HScrollBar components in mobile applications. 
+ * 
+ *  @langversion 3.0
+ *  @playerversion Flash 10
+ *  @playerversion AIR 2.5 
+ *  @productversion Flex 4.5
+ */
+public class HScrollBarSkin extends MobileSkin 
+{   
+    //--------------------------------------------------------------------------
+    //
+    //  Variables
+    //
+    //--------------------------------------------------------------------------
+    /**
+     *  Constructor.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    public function HScrollBarSkin()
+    {
+        super();
+        
+        minWidth = 20;
+        thumbSkinClass = HScrollBarThumbSkin;
+        var paddingBottom:int;
+        var paddingHorizontal:int;
+        
+        // Depending on density set our measured height
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_640:
+			{
+				minHeight = 24;   
+				paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_640DPI;
+				paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_640DPI;
+				break;
+			}
+			case DPIClassification.DPI_480:
+			{
+				minHeight = 18;   
+				paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_480DPI;
+				paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_480DPI;
+				break;
+			}
+            case DPIClassification.DPI_320:
+            {
+                minHeight = 12;   
+                paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_320DPI;
+                paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_320DPI;
+                break;
+            }
+			case DPIClassification.DPI_240:
+			{
+				minHeight = 9;   
+				paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_240DPI;
+				paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_240DPI;
+				break;
+			}
+			case DPIClassification.DPI_120:
+			{
+				minHeight = 5;   
+				paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_120DPI;
+				paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_120DPI;
+				break;
+			}
+            default:
+            {
+                // default DPI_160
+                minHeight = 6;              
+                paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_DEFAULTDPI;
+                paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_DEFAULTDPI;
+                break;
+            }
+        }
+        
+        // The minimum width is set such that, at it's smallest size, the thumb appears
+        // as wide as it is high.
+        minThumbWidth = (minHeight - paddingBottom) + (paddingHorizontal * 2);   
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Variables
+    //
+    //--------------------------------------------------------------------------
+    /** 
+     *  @copy spark.skins.spark.ApplicationSkin#hostComponent
+     */
+    public var hostComponent:HScrollBar;
+    
+    /**
+     *  Minimum width for the thumb 
+     */
+    protected var minThumbWidth:Number;
+    
+    /**
+     *  Skin to use for the thumb Button skin part
+     */
+    protected var thumbSkinClass:Class;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Skin parts 
+    //
+    //--------------------------------------------------------------------------
+    /**
+     *  HScrollbar track skin part.
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     */  
+    public var track:Button;
+    
+    /**
+     *  HScrollbar thumb skin part.
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     */  
+    public var thumb:Button;
+    
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods
+    //
+    //--------------------------------------------------------------------------
+    /**
+     *  @private 
+     */ 
+    override protected function createChildren():void
+    {
+        // Create our skin parts if necessary: track and thumb.
+        if (!track)
+        {
+            // We don't want a visible track so we set the skin to MobileSkin
+            track = new Button();
+            track.setStyle("skinClass", spark.skins.mobile.supportClasses.MobileSkin);
+            track.width = minWidth;
+            track.height = minHeight;
+            addChild(track);
+        }
+        
+        if (!thumb)
+        {
+            thumb = new Button();
+            thumb.minWidth = minThumbWidth;
+            thumb.setStyle("skinClass", thumbSkinClass);
+            thumb.width = minHeight;
+            thumb.height = minHeight;
+            addChild(thumb);
+        }
+    }
+    
+    /**
+     *  @private 
+     */
+    override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.layoutContents(unscaledWidth, unscaledHeight);
+        
+        setElementSize(track, unscaledWidth, unscaledHeight);
+    }
+}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/HScrollBarThumbSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/HScrollBarThumbSkin.as
new file mode 100644
index 0000000..90d758f
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/HScrollBarThumbSkin.as
@@ -0,0 +1,181 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+
+import flash.display.CapsStyle;
+import flash.display.JointStyle;
+import flash.display.LineScaleMode;
+
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+
+import spark.components.Button;
+import spark.skins.mobile.supportClasses.MobileSkin;
+
+use namespace mx_internal;
+
+/**
+ *  ActionScript-based skin for the HScrollBar thumb skin part in mobile applications. 
+ * 
+ *  @langversion 3.0
+ *  @playerversion Flash 10
+ *  @playerversion AIR 2.5 
+ *  @productversion Flex 4.5
+ */
+public class HScrollBarThumbSkin extends MobileSkin 
+{
+    //--------------------------------------------------------------------------
+    //
+    //  Class constants
+    //
+    //--------------------------------------------------------------------------
+    
+    // These constants are also accessed from HScrollBarSkin
+	mx_internal static const PADDING_BOTTOM_640DPI:int = 10;
+	mx_internal static const PADDING_HORIZONTAL_640DPI:int = 8;
+	mx_internal static const PADDING_BOTTOM_480DPI:int = 8;
+	mx_internal static const PADDING_HORIZONTAL_480DPI:int = 6;
+    mx_internal static const PADDING_BOTTOM_320DPI:int = 5;
+    mx_internal static const PADDING_HORIZONTAL_320DPI:int = 4;
+	mx_internal static const PADDING_BOTTOM_240DPI:int = 4;
+	mx_internal static const PADDING_HORIZONTAL_240DPI:int = 3;
+	mx_internal static const PADDING_BOTTOM_120DPI:int = 2;
+	mx_internal static const PADDING_HORIZONTAL_120DPI:int = 2;
+    mx_internal static const PADDING_BOTTOM_DEFAULTDPI:int = 3;
+    mx_internal static const PADDING_HORIZONTAL_DEFAULTDPI:int = 2;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------
+    /**
+     *  Constructor.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    public function HScrollBarThumbSkin()
+    {
+        super();
+        
+        // Depending on density set padding
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_640:
+			{
+				paddingBottom = PADDING_BOTTOM_640DPI;
+				paddingHorizontal = PADDING_HORIZONTAL_640DPI;
+				break;
+			}
+			case DPIClassification.DPI_480:
+			{
+				paddingBottom = PADDING_BOTTOM_480DPI;
+				paddingHorizontal = PADDING_HORIZONTAL_480DPI;
+				break;
+			}
+            case DPIClassification.DPI_320:
+            {
+                paddingBottom = PADDING_BOTTOM_320DPI;
+                paddingHorizontal = PADDING_HORIZONTAL_320DPI;
+                break;
+            }
+            case DPIClassification.DPI_240:
+            {
+                paddingBottom = PADDING_BOTTOM_240DPI;
+                paddingHorizontal = PADDING_HORIZONTAL_240DPI;
+                break;
+            }
+            case DPIClassification.DPI_120:
+            {
+                paddingBottom = PADDING_BOTTOM_120DPI;
+                paddingHorizontal = PADDING_HORIZONTAL_120DPI;
+                break;
+            }
+            default:
+            {
+                paddingBottom = PADDING_BOTTOM_DEFAULTDPI;
+                paddingHorizontal = PADDING_HORIZONTAL_DEFAULTDPI;
+                break;
+            }
+        }
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** 
+     * @copy spark.skins.spark.ApplicationSkin#hostComponent
+     */
+    public var hostComponent:Button;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Variables
+    //
+    //--------------------------------------------------------------------------    
+    /**
+     *  Padding from bottom.
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */ 
+    protected var paddingBottom:int;
+    
+    /**
+     *  Horizontal padding from left and right.
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */ 
+    protected var paddingHorizontal:int;
+    
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @private
+     */
+    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.drawBackground(unscaledWidth, unscaledHeight);
+
+        var thumbHeight:Number = unscaledHeight - paddingBottom;
+        
+        graphics.beginFill(getStyle("thumbColor"), 1);
+        graphics.drawRect(paddingHorizontal + .5, 0.5, unscaledWidth - 2 * paddingHorizontal, thumbHeight);
+        
+        graphics.endFill();
+    }    
+}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/HSliderSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/HSliderSkin.as
new file mode 100644
index 0000000..db59b7f
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/HSliderSkin.as
@@ -0,0 +1,300 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+	import flash.display.BlendMode;
+	import flash.display.DisplayObject;
+	import flash.events.Event;
+	
+	import mx.core.ClassFactory;
+	import mx.core.IFactory;
+	import mx.events.FlexEvent;
+	
+	import spark.components.Button;
+	import spark.components.HSlider;
+	import spark.skins.ios7.assets.HSliderTrack_filled;
+	import spark.skins.mobile.supportClasses.HSliderDataTip;
+	import spark.skins.mobile.supportClasses.MobileSkin;
+	
+	/**
+	 *  Android 4.x specific ActionScript-based skin for HSlider controls in mobile applications.
+	 * 
+	 *  <p>The base Flex implementation creates an HSlider with fixed height
+	 *  and variable width with a fixed-size thumb. As the height of the
+	 *  HSlider component increases, the vertical dimensions of the visible HSlider remain
+	 *  the same, and the HSlider stays vertically centered.</p>
+	 * 
+	 *  <p>The thumb and track implementations can be customized by subclassing
+	 *  this skin class and overriding the thumbSkinClass, trackSkinClass,
+	 *  and/or dataTipClass variables as necessary.</p>
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10
+	 *  @playerversion AIR 2.5 
+	 *  @productversion Flex 4.5
+	 */
+	public class HSliderSkin extends MobileSkin
+	{    
+		//--------------------------------------------------------------------------
+		//
+		//  Constructor
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  Constructor.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 * 
+		 */    
+		public function HSliderSkin()
+		{
+			super();
+			
+			thumbSkinClass = spark.skins.ios7.HSliderThumbSkin;
+			trackSkinClass = spark.skins.ios7.HSliderTrackSkin;
+			filledTrackSkinClass = spark.skins.ios7.assets.HSliderTrack_filled;
+			dataTipClass = spark.skins.mobile.supportClasses.HSliderDataTip;
+			
+			blendMode = BlendMode.LAYER;
+		}
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Properties
+		//
+		//--------------------------------------------------------------------------
+		
+		/** 
+		 *  @copy spark.skins.spark.ApplicationSkin#hostComponent
+		 */
+		private var _hostComponent:HSlider;
+		
+		/**
+		 * @copy spark.skins.spark.ApplicationSkin#hostComponent
+		 */
+		public function get hostComponent():HSlider
+		{
+			return _hostComponent;
+		}
+		
+		public function set hostComponent(value:HSlider):void 
+		{
+			if (_hostComponent)
+			{
+				_hostComponent.removeEventListener(Event.CHANGE, thumbPositionChanged_handler);
+				_hostComponent.removeEventListener(FlexEvent.VALUE_COMMIT, thumbPositionChanged_handler);
+			}
+			_hostComponent = value;
+			if (_hostComponent)
+			{
+				_hostComponent.addEventListener(Event.CHANGE, thumbPositionChanged_handler);
+				_hostComponent.addEventListener(FlexEvent.VALUE_COMMIT, thumbPositionChanged_handler);
+			}
+		}
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Skin parts 
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  HSlider track skin part
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 */    
+		public var track:Button;
+		
+		/**
+		 *  HSlider track skin part that
+		 *  depicts area that is filled
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 */    
+		public var filledTrack:DisplayObject;
+		
+		/**
+		 *  HSlider thumb skin part
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 */    
+		public var thumb:Button;
+		
+		/**
+		 *  HSlider dataTip class factory
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 */    
+		public var dataTip:IFactory;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Variables
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  Specifies the skin class that will be used for the HSlider thumb.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5 
+		 */    
+		protected var thumbSkinClass:Class;
+		
+		/**
+		 *  Specifies the skin class that will be used for the HSlider track.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5 
+		 */    
+		protected var trackSkinClass:Class;
+		/**
+		 *  Specifies the skin class that will be used for the HSlider track's
+		 *  filled area.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5 
+		 */    
+		protected var filledTrackSkinClass:Class;
+		
+		/**
+		 *  Specifies the class that will be used for the HSlider datatip.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5 
+		 */    
+		protected var dataTipClass:Class;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Overridden methods
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  @private 
+		 */ 
+		override protected function commitCurrentState():void
+		{
+			if (currentState == "disabled")
+				alpha = 0.5;
+			else if (currentState == "normal")
+				alpha = 1;
+		}    
+		
+		/**
+		 *  @private 
+		 */ 
+		override protected function createChildren():void
+		{
+			// Create our skin parts: track and thumb
+			track = new Button();
+			track.setStyle("skinClass", trackSkinClass);
+			addChild(track);
+			
+			filledTrack = new filledTrackSkinClass();
+			addChild(filledTrack);
+			
+			thumb = new Button();
+			thumb.setStyle("skinClass", thumbSkinClass);
+			addChild(thumb);
+			
+			// Set up the class factory for the dataTip
+			dataTip = new ClassFactory();
+			ClassFactory(dataTip).generator = dataTipClass;
+		}
+		
+		/**
+		 *  @private 
+		 *  The HSliderSkin width will be no less than the width of the thumb skin.
+		 *  The HSliderSkin height will be no less than the greater of the heights of
+		 *  the thumb and track skins.
+		 */ 
+		override protected function measure():void
+		{
+			measuredWidth = track.getPreferredBoundsWidth();
+			measuredHeight = Math.max(track.getPreferredBoundsHeight(), thumb.getPreferredBoundsHeight());
+			
+			measuredMinHeight = Math.max(track.getPreferredBoundsHeight(), thumb.getPreferredBoundsHeight());
+			measuredMinWidth = thumb.getPreferredBoundsWidth();
+		}
+		
+		/**
+		 *  @private
+		 */ 
+		override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			super.layoutContents(unscaledWidth, unscaledHeight);
+			
+			// minimum height is no smaller than the larger of the thumb or track
+			var calculatedSkinHeight:int = Math.max(Math.max(thumb.getPreferredBoundsHeight(), track.getPreferredBoundsHeight()),
+				unscaledHeight);
+			
+			// minimum width is no smaller than the thumb
+			var calculatedSkinWidth:int = Math.max(thumb.getPreferredBoundsWidth(),
+				unscaledWidth);
+			
+			// once we know the skin height, center the thumb and track
+			thumb.y = Math.max(Math.round((calculatedSkinHeight - thumb.getPreferredBoundsHeight()) / 2), 0);
+			var calculatedTrackY:int = Math.max(Math.round((calculatedSkinHeight - track.getPreferredBoundsHeight()) / 2), 0);
+			
+			// size and position
+			setElementSize(thumb, thumb.getPreferredBoundsWidth(), thumb.getPreferredBoundsHeight()); // thumb does NOT scale
+			setElementSize(track, calculatedSkinWidth, track.getPreferredBoundsHeight()); // note track is NOT scaled vertically
+			setElementPosition(track, 0, calculatedTrackY);
+			
+			//Set size and position of filled area based on thumb's current location
+			var filledTrackWidth:Number = thumb.getLayoutBoundsX();
+			setElementSize(filledTrack, filledTrackWidth, track.getPreferredBoundsHeight()); // note track is NOT scaled vertically
+			setElementPosition(filledTrack, track.x + HSliderTrackSkin(track.skin).visibleTrackOffset  , calculatedTrackY);
+		}
+		
+		private function thumbPositionChanged_handler(event:Event):void
+		{
+			//Just trigger a redraw so that the filled area of the track updates itself
+			invalidateDisplayList();
+		}
+		
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/HSliderThumbSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/HSliderThumbSkin.as
new file mode 100644
index 0000000..9f77030
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/HSliderThumbSkin.as
@@ -0,0 +1,333 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+import flash.display.DisplayObject;
+
+import mx.core.DPIClassification;
+
+import spark.components.Button;
+import spark.skins.ios7.assets.HSliderThumb_normal;
+import spark.skins.mobile.supportClasses.MobileSkin;
+
+/**
+ *  Android 4.x specific ActionScript-based skin for the HSlider thumb skin part in mobile applications.
+ *
+ *  <p>Note that this particular implementation defines a hit zone which is larger than
+ *  the visible thumb for better usability on mobile screens.</p>
+ *  
+ *  @langversion 3.0
+ *  @playerversion Flash 10
+ *  @playerversion AIR 2.5 
+ *  @productversion Flex 4.5
+ */
+public class HSliderThumbSkin extends MobileSkin
+{
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  Constructor.
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     * 
+     */
+    public function HSliderThumbSkin()
+    {
+        super();
+        
+		thumbNormalClass = spark.skins.ios7.assets.HSliderThumb_normal;
+		thumbPressedClass = spark.skins.ios7.assets.HSliderThumb_pressed;
+		
+        // set the dimensions to use based on the screen density
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_640:
+			{
+				thumbImageWidth = 116;
+				thumbImageHeight = 116;
+				
+				hitZoneOffset = 20;
+				hitZoneSideLength = 160;
+				
+				break;              
+			}
+			case DPIClassification.DPI_480:
+			{
+				// Note provisional may need changes
+				thumbImageWidth = 88;
+				thumbImageHeight = 88;
+				
+				hitZoneOffset = 20;
+				hitZoneSideLength = 130;
+				
+				break;
+			}
+            case DPIClassification.DPI_320:
+            {
+                thumbImageWidth = 58;
+                thumbImageHeight = 58;
+                
+                hitZoneOffset = 10;
+                hitZoneSideLength = 80;
+                
+                break;              
+            }
+			case DPIClassification.DPI_240:
+			{
+				thumbImageWidth = 44;
+				thumbImageHeight = 44;
+				
+				hitZoneOffset = 10;
+				hitZoneSideLength = 65;
+				
+				break;
+			}
+			case DPIClassification.DPI_120:
+			{
+				thumbImageWidth = 22;
+				thumbImageHeight = 22;
+				
+				hitZoneOffset = 5;
+				hitZoneSideLength = 33;
+				
+				break;
+			}
+            default:
+            {
+                // default DPI_160
+                thumbImageWidth = 29;
+                thumbImageHeight = 29;
+                
+                hitZoneOffset = 5;
+                hitZoneSideLength = 40;
+                
+                break;
+            }
+                
+        }
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    
+    /** 
+     * @copy spark.skins.spark.ApplicationSkin#hostComponent
+     */
+    public var hostComponent:Button;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Variables
+    //
+    //--------------------------------------------------------------------------
+    
+    // FXG thumb classes
+    /**
+     *  Specifies the FXG class to use when the thumb is in the normal state
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */    
+    protected var thumbNormalClass:Class;
+    
+    /**
+     *  Specifies the FXG class to use when the thumb is in the pressed state
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */    
+    protected var thumbPressedClass:Class;
+    
+    /**
+     *  Specifies the DisplayObject to use when the thumb is in the normal state
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */    
+    protected var thumbSkin_normal:DisplayObject;
+    
+    /**
+     *  Specifies the DisplayObject to use when the thumb is in the pressed state
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */    
+    protected var thumbSkin_pressed:DisplayObject;
+    
+    /**
+     *  Specifies the current DisplayObject that should be shown
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */    
+    protected var currentThumbSkin:DisplayObject;
+    
+    /**
+     *  Width of the overall thumb image
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */    
+    protected var thumbImageWidth:int;
+    
+    /**
+     *  Height of the overall thumb image
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */    
+    protected var thumbImageHeight:int;
+    
+    /**
+     *  Length of the sizes of the hitzone (assumed to be square)
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    protected var hitZoneSideLength:int;
+    
+    /**
+     *  Distance between the left edge of the hitzone and the left edge
+     *  of the thumb
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    protected var hitZoneOffset:int;
+    
+    /**
+     *  @private
+     *  Remember which state is currently being displayed 
+     */    
+    private var displayedState:String;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @private 
+     */ 
+    override protected function commitCurrentState():void
+    {
+        if (currentState == "up")
+        {
+            // show the normal button
+            if (!thumbSkin_normal)
+            {
+                thumbSkin_normal = new thumbNormalClass();
+                addChild(thumbSkin_normal);
+            }
+            else
+            {
+                thumbSkin_normal.visible = true;                
+            }
+            currentThumbSkin = thumbSkin_normal;
+            
+            // hide the pressed button
+            if (thumbSkin_pressed)
+                thumbSkin_pressed.visible = false;
+        }
+        else if (currentState == "down")
+        {
+            // show the pressed button
+            if (!thumbSkin_pressed)
+            {
+                thumbSkin_pressed = new thumbPressedClass();
+                addChild(thumbSkin_pressed);
+            }
+            else
+            {
+                thumbSkin_pressed.visible = true;
+            }
+            currentThumbSkin = thumbSkin_pressed;
+            
+            // hide the normal button
+            if (thumbSkin_normal)
+                thumbSkin_normal.visible = false;
+        }
+        
+        displayedState = currentState;
+        
+        invalidateDisplayList();
+    }
+    
+    /**
+     *  @private 
+     */ 
+    override protected function measure():void
+    {
+        measuredWidth = thumbImageWidth;
+        measuredHeight = thumbImageHeight;
+    }
+    
+    /**
+     *  @private 
+     */ 
+    override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.layoutContents(unscaledWidth, unscaledHeight);
+        
+        setElementSize(currentThumbSkin, unscaledWidth, unscaledHeight);
+        setElementPosition(currentThumbSkin, 0, 0)
+    }
+    
+    /**
+     *  @private 
+     */ 
+    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        // put in a larger hit zone than the thumb
+        graphics.beginFill(0xffffff, 0);
+        graphics.drawRect(-hitZoneOffset, -hitZoneOffset, hitZoneSideLength, hitZoneSideLength);
+        graphics.endFill();
+    }
+}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/HSliderTrackSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/HSliderTrackSkin.as
new file mode 100644
index 0000000..3b2aec9
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/HSliderTrackSkin.as
@@ -0,0 +1,227 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+	import flash.display.DisplayObject;
+	
+	import mx.core.DPIClassification;
+	
+	import spark.components.Button;
+	import spark.skins.ios7.assets.HSliderTrack;
+	import spark.skins.mobile.supportClasses.MobileSkin;
+	
+	/**
+	 *  ActionScript-based skin for the HSlider track skin part in mobile applications. 
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10
+	 *  @playerversion AIR 2.5 
+	 *  @productversion Flex 4.5
+	 */
+	public class HSliderTrackSkin extends MobileSkin
+	{
+		//--------------------------------------------------------------------------
+		//
+		//  Constructor
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  Constructor.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 * 
+		 */
+		public function HSliderTrackSkin()
+		{
+			super();
+			
+			trackClass = spark.skins.ios7.assets.HSliderTrack;
+			
+			// set the right dimensions to use based on the screen density
+			switch (applicationDPI)
+			{
+				case DPIClassification.DPI_640:
+				{
+					trackWidth = 1200;
+					trackHeight = 8;
+					
+					visibleTrackOffset = 48;
+					
+					break;
+				}
+				case DPIClassification.DPI_480:
+				{
+					trackWidth = 900;
+					trackHeight = 6;
+					
+					visibleTrackOffset = 38;
+					
+					break;
+				}
+				case DPIClassification.DPI_320:
+				{
+					trackWidth = 600;
+					trackHeight = 4;
+					
+					visibleTrackOffset = 24;
+					
+					break;
+				}
+				case DPIClassification.DPI_240:
+				{
+					trackWidth = 450;
+					trackHeight = 3;
+					
+					visibleTrackOffset = 18;
+					
+					break;
+				}
+				case DPIClassification.DPI_120:
+				{
+					trackWidth = 225;
+					trackHeight = 2;
+					
+					visibleTrackOffset = 9;
+					
+					break;
+				}
+				default:
+				{
+					// default DPI_160
+					trackWidth = 300;
+					trackHeight = 2;
+					
+					visibleTrackOffset = 12;
+					
+					break;
+				}
+			}
+		}
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Properties
+		//
+		//--------------------------------------------------------------------------
+		
+		/** 
+		 * @copy spark.skins.spark.ApplicationSkin#hostComponent
+		 */
+		public var hostComponent:Button;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Variables
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  Specifies the FXG class to use for the track image
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5
+		 *  @productversion Flex 4.5
+		 */
+		protected var trackClass:Class;
+		
+		/**
+		 *  Specifies the DisplayObject for the track image
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5
+		 *  @productversion Flex 4.5
+		 */
+		protected var trackSkin:DisplayObject;
+		
+		/**
+		 *  Specifies the track image width
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5
+		 *  @productversion Flex 4.5
+		 */    
+		protected var trackWidth:int;
+		
+		/**
+		 *  Specifies the track image height
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5
+		 *  @productversion Flex 4.5
+		 */
+		protected var trackHeight:int;
+		
+		/**
+		 *  Specifies the offset from the left and right edge to where
+		 *  the visible track begins. This should match the offset in the FXG assets.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5
+		 *  @productversion Flex 4.5
+		 */
+		public var visibleTrackOffset:int;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Overridden methods
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  @private 
+		 */ 
+		override protected function createChildren():void
+		{
+			trackSkin = new trackClass();
+			addChild(trackSkin);
+		}
+		
+		/**
+		 *  @private 
+		 */ 
+		override protected function measure():void
+		{
+			measuredWidth = trackWidth;
+			measuredHeight = trackHeight;
+		}
+		
+		/**
+		 *  @private 
+		 */ 
+		override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			super.layoutContents(unscaledWidth, unscaledHeight);
+			
+			var unscaledTrackWidth:int = unscaledWidth - (2 * visibleTrackOffset);
+			setElementSize(trackSkin, unscaledTrackWidth, unscaledHeight);
+			setElementPosition(trackSkin, visibleTrackOffset, 0);
+		}
+		
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/IOS7ButtonBarButtonSkinBase.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/IOS7ButtonBarButtonSkinBase.as
new file mode 100644
index 0000000..9ef5d38
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/IOS7ButtonBarButtonSkinBase.as
@@ -0,0 +1,161 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+	import mx.core.DPIClassification;
+	
+	import spark.skins.ios7.assets.ButtonBarMiddleButton_down;
+	import spark.skins.ios7.assets.ButtonBarMiddleButton_up;
+	import spark.skins.mobile.supportClasses.ButtonBarButtonSkinBase;
+	
+	/**
+	 *  iOS7+ specific Button skin base for the Buttons in a ButtonBar.
+	 * 
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10
+	 *  @playerversion AIR 2.5 
+	 *  @productversion Flex 4.5
+	 */
+	public class IOS7ButtonBarButtonSkinBase extends ButtonBarButtonSkinBase
+	{
+		
+		/**
+		 *  Class to use for the border in the selected and down state.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 */  
+		protected var selectedDownBorderSkin:Class;
+		
+		/**
+		 *  Constructor.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 */
+		public function IOS7ButtonBarButtonSkinBase()
+		{
+			super();
+			
+			// set the dimensions to use based on the screen density
+			switch (applicationDPI)
+			{
+				case DPIClassification.DPI_640:
+				{
+					measuredDefaultHeight = 116;
+					measuredDefaultWidth = 400;
+					
+					break;              
+				}
+				case DPIClassification.DPI_480:
+				{
+					measuredDefaultHeight = 88;
+					measuredDefaultWidth = 300;
+					
+					break;
+				}
+				case DPIClassification.DPI_320:
+				{
+					measuredDefaultHeight = 58;
+					measuredDefaultWidth = 200;
+					
+					break;              
+				}
+				case DPIClassification.DPI_240:
+				{
+					measuredDefaultHeight = 44;
+					measuredDefaultWidth = 150;
+					
+					break;
+				}
+				case DPIClassification.DPI_120:
+				{
+					measuredDefaultHeight = 22;
+					measuredDefaultWidth = 75;
+					
+					break;
+				}
+				default:
+				{
+					// default DPI_160
+					measuredDefaultHeight = 29;
+					measuredDefaultWidth = 100;
+					
+					break;
+				}
+			}
+		}	
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Overridden methods
+		//
+		//--------------------------------------------------------------------------
+		
+		override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			//Dont draw background
+		}
+		
+		override protected function getBorderClassForCurrentState():Class
+		{
+			var isSelected:Boolean = currentState.indexOf("Selected") >= 0;
+			var isDown:Boolean = currentState.indexOf("down") >= 0;
+			
+			if (isSelected && !isDown )
+				return selectedBorderSkin;
+			else if (isSelected && isDown)
+				return selectedDownBorderSkin;
+			else if (!isSelected && !isDown)
+				return upBorderSkin;
+			else 
+				return downBorderSkin;
+		}
+		
+		override protected function commitCurrentState():void
+		{
+			super.commitCurrentState();
+			var isSelected:Boolean = currentState.indexOf("Selected") >= 0;
+			var isDown:Boolean = currentState.indexOf("down") >= 0;
+			
+			if(xor(isSelected,isDown))
+			{
+				var highlightColor:uint = getStyle("highlightTextColor");
+				labelDisplay.setStyle("color",highlightColor);
+			}
+			else
+			{
+				var color:uint = getStyle("color");
+				labelDisplay.setStyle("color",color);
+			}
+			
+		}
+		
+		private function xor(lhs:Boolean, rhs:Boolean):Boolean {
+			return !( lhs && rhs ) && ( lhs || rhs );
+		}
+		
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/RadioButtonSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/RadioButtonSkin.as
new file mode 100644
index 0000000..4eaf823
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/RadioButtonSkin.as
@@ -0,0 +1,253 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+
+import flash.display.DisplayObject;
+
+import mx.core.DPIClassification;
+
+import spark.skins.ios7.assets.RadioButton_up;
+import spark.skins.mobile.supportClasses.SelectableButtonSkinBase;
+
+/**
+ *  ActionScript-based skin for RadioButton controls in mobile applications. 
+ * 
+ * @see spark.components.RadioButton
+ * 
+ *  @langversion 3.0
+ *  @playerversion Flash 10
+ *  @playerversion AIR 2.5 
+ *  @productversion Flex 4.5
+ */
+public class RadioButtonSkin extends SelectableButtonSkinBase
+{
+    //--------------------------------------------------------------------------
+    //
+    //  Class constants
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @private
+     */
+    static private const exclusions:Array = ["labelDisplay", "labelDisplayShadow"];
+	
+	//--------------------------------------------------------------------------
+	//
+	//  Member variables
+	//
+	//--------------------------------------------------------------------------
+	
+	protected var symbolOffsetX:Number;
+	protected var symbolOffsetY:Number;
+	protected var iconWidth:Number;
+	protected var iconHeight:Number;
+	protected var symbolWidth:Number;
+	protected var symbolHeight:Number;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  Constructor.
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     * 
+     */
+    public function RadioButtonSkin()
+    {
+        super();
+        
+        layoutPaddingLeft = 0;
+        layoutPaddingRight = 0;
+        layoutPaddingTop = 0;
+        layoutPaddingBottom = 0;
+
+		upIconClass = spark.skins.ios7.assets.RadioButton_up;
+		upSelectedIconClass = spark.skins.ios7.assets.RadioButton_up;
+		downIconClass = spark.skins.ios7.assets.RadioButton_down;
+		downSelectedIconClass = spark.skins.ios7.assets.RadioButton_down;
+		upSymbolIconClass =  null;
+		downSymbolIconClass =  null;
+		upSymbolIconSelectedClass = spark.skins.ios7.assets.RadioButton_upSymbolSelected;
+		downSymbolIconSelectedClass = spark.skins.ios7.assets.RadioButton_downSymbolSelected;
+		
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_640:
+			{
+				
+				layoutGap = 16;
+				minWidth = 128;
+				minHeight = 128;
+				iconWidth = 128;
+				iconHeight = 128;
+				symbolWidth = 44;
+				symbolHeight = 44;
+				symbolOffsetX = 44;
+				symbolOffsetY = 44;
+				
+				break;
+			}
+            case DPIClassification.DPI_480:
+            {
+                
+				layoutGap = 12;
+				minWidth = 96;
+				minHeight = 96;
+				iconWidth = 96;
+				iconHeight = 96;
+				symbolWidth = 33;
+				symbolHeight = 33;
+				symbolOffsetX = 33;
+				symbolOffsetY = 33;
+                
+                break;
+            }
+            case DPIClassification.DPI_320:
+            {
+                
+				layoutGap = 8;
+				minWidth = 64;
+				minHeight = 64;
+				iconWidth = 64;
+				iconHeight = 64;
+				symbolWidth = 22;
+				symbolHeight = 22;
+				symbolOffsetX = 22;
+				symbolOffsetY = 22;
+                
+                break;
+            }
+            case DPIClassification.DPI_240:
+            {
+                
+				layoutGap = 6;
+				minWidth = 48;
+				minHeight = 48;
+				iconWidth = 48;
+				iconHeight = 48;
+				symbolWidth = 16.5;
+				symbolHeight = 16.5;
+				symbolOffsetX = 16.5;
+				symbolOffsetY = 16.5;
+                
+                break;
+            }
+			case DPIClassification.DPI_120:
+			{
+				
+				layoutGap = 3;
+				minWidth = 24;
+				minHeight = 24;
+				iconWidth = 24;
+				iconHeight = 24;
+				symbolWidth = 8.25;
+				symbolHeight = 8.25;
+				symbolOffsetX = 8.25;
+				symbolOffsetY = 8.25;
+				
+				break;
+			}
+            default:
+            {
+				
+                layoutGap = 4;
+                minWidth = 32;
+                minHeight = 32;
+				iconWidth = 32;
+				iconHeight = 32;
+				symbolWidth = 11;
+				symbolHeight = 11;
+				symbolOffsetX = 11;
+				symbolOffsetY = 11;
+                
+                break;
+            }
+        }
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @private
+     *  RadioButton <code>chromeColor</code> is drawn to match the FXG ellipse
+     *  shape and position.
+     */
+    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        // super draws a transparent hit zone
+        super.drawBackground(unscaledWidth, unscaledHeight);
+
+        // get the size and position of iconDisplay
+        var currentIcon:DisplayObject = getIconDisplay();
+        
+        graphics.beginFill(getStyle("chromeColor"));
+        graphics.drawEllipse(currentIcon.x + 1, currentIcon.y + 1, currentIcon.width - 2, currentIcon.height - 2);
+        graphics.endFill();
+    }
+    
+    /**
+     *  @private
+     */
+    override protected function get focusSkinExclusions():Array 
+    {
+        return exclusions;
+    }
+	
+	override protected function commitCurrentState():void
+	{
+		super.commitCurrentState();
+		if(symbolIcon != null)
+		{
+			symbolIcon.width = symbolWidth;
+			symbolIcon.height = symbolHeight;
+		}
+		var iconDisplay:DisplayObject = getIconDisplay(); 
+		if(iconDisplay != null)
+		{
+			iconDisplay.width = iconWidth;
+			iconDisplay.height = iconHeight;
+		}
+	}
+	
+	override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+	{
+		super.layoutContents(unscaledWidth, unscaledHeight);
+		// position the symbols to align with the background "icon"
+		if (symbolIcon)
+		{
+			var currentIcon:DisplayObject = getIconDisplay();
+			setElementPosition(symbolIcon, symbolOffsetX, symbolOffsetY);
+		}
+	}
+}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/SpinnerListContainerSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/SpinnerListContainerSkin.as
new file mode 100644
index 0000000..aa2b05b
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/SpinnerListContainerSkin.as
@@ -0,0 +1,261 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+	import flash.display.Graphics;
+	import flash.display.InteractiveObject;
+	import flash.display.Sprite;
+	
+	import mx.core.DPIClassification;
+	import mx.core.mx_internal;
+	
+	import spark.components.Group;
+	import spark.components.SpinnerListContainer;
+	import spark.layouts.HorizontalLayout;
+	import spark.skins.ios7.assets.SpinnerListContainerBackground;
+	import spark.skins.ios7.assets.SpinnerListContainerSelectionIndicator;
+	import spark.skins.ios7.assets.SpinnerListContainerShadow;
+	import spark.skins.mobile.supportClasses.MobileSkin;
+
+	use namespace mx_internal;
+	/**
+	 *  ActionScript-based skin for the SpinnerListContainer in mobile applications. 
+	 * 
+	 *  @see spark.components.SpinnerListContainer
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion AIR 3
+	 *  @productversion Flex 4.6
+	 */
+	public class SpinnerListContainerSkin extends MobileSkin
+	{
+		//--------------------------------------------------------------------------
+		//
+		//  Constructor
+		//
+		//--------------------------------------------------------------------------
+		/**
+		 *  Constructor.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 * 
+		 */
+		public function SpinnerListContainerSkin()
+		{
+			super();
+			
+			borderClass = spark.skins.ios7.assets.SpinnerListContainerBackground;
+			selectionIndicatorClass = spark.skins.ios7.assets.SpinnerListContainerSelectionIndicator;
+			cornerRadius = 0;
+			borderThickness = 0;
+
+			
+			minWidth = 30;
+		}
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Variables
+		//
+		//--------------------------------------------------------------------------
+		/**
+		 *  Pixel thickness of the border. 
+		 *       
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected var borderThickness:Number;
+		
+		/**
+		 *  Radius of the border corners.
+		 *       
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected var cornerRadius:Number;
+		
+		/**
+		 *  Height of the selection indicator.  
+		 *       
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		
+		/**
+		 *  Class for the border part. 
+		 *       
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected var borderClass:Class;
+		
+		/**
+		 *  Class for the selection indicator skin part. 
+		 *       
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected var selectionIndicatorClass:Class;
+		
+		/**
+		 *  Border skin part which includes the background. 
+		 *       
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected var border:InteractiveObject;
+		
+		/**
+		 *  Selection indicator skin part. 
+		 *       
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected var selectionIndicator:InteractiveObject;
+		
+		/**
+		 *  Mask for the content group. 
+		 *       
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected var contentGroupMask:Sprite;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Skin parts 
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  An optional skin part that defines the Group where the content 
+		 *  children are pushed into and laid out.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		public var contentGroup:Group;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Properties 
+		//
+		//--------------------------------------------------------------------------
+		/** 
+		 *  @copy spark.skins.spark.ApplicationSkin#hostComponent
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		public var hostComponent:SpinnerListContainer;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Overridden Methods 
+		//
+		//--------------------------------------------------------------------------
+		/**
+		 *  @private
+		 */
+		override protected function createChildren():void
+		{
+			super.createChildren();
+			
+			if (!border)
+			{
+				// Border and background
+				border = new borderClass();
+				border.mouseEnabled = false;
+				addChild(border);
+			}
+			
+			if (!contentGroup)
+			{
+				// Contains the child elements
+				contentGroup = new Group();
+				var hLayout:HorizontalLayout = new HorizontalLayout();
+				hLayout.gap = 0;
+				hLayout.verticalAlign = "middle";
+				contentGroup.layout = hLayout;
+				contentGroup.id = "contentGroup";
+				addChild(contentGroup);
+			}
+			
+			if (!contentGroupMask)
+			{
+				// Create a mask for the content
+				contentGroupMask = new Sprite();
+				addChild(contentGroupMask);
+			}
+		}   
+		
+		/**
+		 *  @private
+		 */
+		override protected function measure():void
+		{
+			super.measure();
+			
+			var contentW:Number = contentGroup.getPreferredBoundsWidth();
+			var contentH:Number = contentGroup.getPreferredBoundsHeight();
+			
+			measuredWidth = measuredMinWidth = contentW + borderThickness * 2;
+			measuredHeight = contentH + borderThickness * 2;
+
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			super.layoutContents(unscaledWidth, unscaledHeight);
+	
+			setElementSize(contentGroup, unscaledWidth - borderThickness * 2, unscaledHeight - borderThickness * 2);
+			setElementPosition(contentGroup, borderThickness, borderThickness);
+			
+			// Inset by the borderThickness horizontally because the selectionIndicator starts at 0
+			setElementSize(border, unscaledWidth - borderThickness * 2, unscaledHeight);
+			setElementPosition(border, borderThickness, 0);			
+			
+			// The SpinnerLists contain a left and right border. We don't want to show the leftmost 
+			// SpinnerLists's left border nor the rightmost one's right border. 
+			// We inset the mask on the left and right sides to accomplish this. 
+			var g:Graphics = contentGroupMask.graphics;
+			g.clear();
+			g.beginFill(0x00FF00);
+			g.drawRoundRect(borderThickness * 2, borderThickness, unscaledWidth - borderThickness * 4, unscaledHeight - borderThickness * 2, cornerRadius, cornerRadius);
+			g.endFill();
+			
+			contentGroup.mask = contentGroupMask;       
+		}
+	}
+}
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/SpinnerListScrollerSkin.mxml b/frameworks/projects/mobiletheme/src/spark/skins/ios7/SpinnerListScrollerSkin.mxml
new file mode 100644
index 0000000..270818e
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/SpinnerListScrollerSkin.mxml
@@ -0,0 +1,94 @@
+<?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.
+
+-->
+
+
+<!--
+
+Scroller unconditionally sets its skin's layout to private layout
+implementation that handles the scroll policies.  Scroller skins can
+only provide replacement scrollbars.  The skin's layout and
+constraints or dimensions set on skin parts will not be honored.  To
+gain more control over the layout of a viewport and its scrollbars,
+instead of using Scroller, add them to a Group and use the ScrollBar component's
+viewport property to link them together.
+
+-->
+
+<!--- The default skin class for the Spark Scroller that is used by the SpinnerList component. 
+
+@see spark.components.SpinnerList
+@see spark.components.Scroller
+
+@langversion 3.0
+@playerversion AIR 3
+@productversion Flex 4.6
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		* 
+		*  @langversion 3.0
+		*  @playerversion AIR 3
+		*  @productversion Flex 4.6
+		*/
+		[HostComponent("spark.components.Scroller")]
+		]]>
+	</fx:Metadata> 
+	
+	<fx:Script>
+		<![CDATA[    
+			/**
+			 *  @private
+			 */
+			override public function beginHighlightBitmapCapture() : Boolean
+			{
+				var needUpdate:Boolean = super.beginHighlightBitmapCapture();
+				
+				// Draw an opaque rect that fill our entire skin. Our background
+				// is transparent, but we don't want focus/error skins to
+				// poke through.  This is safe to do since we don't have any 
+				// graphic elements as direct children.
+				graphics.beginFill(0);
+				graphics.drawRect(0, 0, width, height);
+				graphics.endFill();
+				
+				return needUpdate;
+			}
+			
+			/**
+			 *  @private
+			 */
+			override public function endHighlightBitmapCapture() : Boolean
+			{
+				var needUpdate:Boolean = super.endHighlightBitmapCapture();
+				
+				// Clear the rect we drew in beginBitmapCapture();
+				graphics.clear();
+				
+				return needUpdate;
+			}
+		]]>
+	</fx:Script>
+	
+</s:SparkSkin>
+
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/SpinnerListSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/SpinnerListSkin.as
new file mode 100644
index 0000000..57a90b8
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/SpinnerListSkin.as
@@ -0,0 +1,328 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+	import flash.display.InteractiveObject;
+	
+	import mx.core.ClassFactory;
+	import mx.core.DPIClassification;
+	import mx.core.mx_internal;
+	
+	import spark.components.DataGroup;
+	import spark.components.Scroller;
+	import spark.components.SpinnerList;
+	import spark.components.SpinnerListItemRenderer;
+	import spark.layouts.VerticalSpinnerLayout;
+	import spark.skins.ios7.assets.SpinnerListContainerSelectionIndicator;
+	import spark.skins.ios7.assets.SpinnerListContainerShadow;
+	import spark.skins.mobile.supportClasses.MobileSkin;
+
+	
+	use namespace mx_internal;
+	/**
+	 *  ActionScript-based skin for the SpinnerList in mobile applications. 
+	 * 
+	 *  @see spark.components.SpinnerList
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion AIR 3
+	 *  @productversion Flex 4.6
+	 */
+	public class SpinnerListSkin extends MobileSkin
+	{
+		/**
+		 *  Constructor.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		public function SpinnerListSkin()
+		{
+			super();
+			
+			selectionIndicatorClass = spark.skins.ios7.assets.SpinnerListContainerSelectionIndicator;
+			shadowClass = spark.skins.ios7.assets.SpinnerListContainerShadow;
+			borderThickness = 1;
+			switch (applicationDPI)
+			{
+				case DPIClassification.DPI_640:
+				{
+					selectionIndicatorHeight = 144;
+					minWidth = 64;
+					borderThickness = 3;
+					break;
+				}
+				case DPIClassification.DPI_480:
+				{
+					selectionIndicatorHeight = 96;
+					minWidth = 48;
+					borderThickness = 2;
+					break;
+				}
+				case DPIClassification.DPI_320:
+				{
+					selectionIndicatorHeight = 72;
+					minWidth = 32;
+					borderThickness = 2;
+					break;
+				}
+				case DPIClassification.DPI_240:
+				{
+					selectionIndicatorHeight = 48;
+					minWidth = 24;
+					borderThickness = 1;
+					break;
+				}
+				case DPIClassification.DPI_120:
+				{
+					selectionIndicatorHeight = 24;
+					minWidth = 12;
+					borderThickness = 0;
+					break;
+				}
+				default:
+				{
+					selectionIndicatorHeight = 36;
+					minWidth = 16;
+					borderThickness = 1;
+				}   
+			}
+			
+		}
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Skin parts 
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  Scroller skin part.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */ 
+		public var scroller:Scroller;
+		
+		/**
+		 *  DataGroup skin part.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */ 
+		public var dataGroup:DataGroup;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Properties 
+		//
+		//--------------------------------------------------------------------------
+		/** 
+		 *  @copy spark.skins.spark.ApplicationSkin#hostComponent
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		public var hostComponent:SpinnerList;
+		
+		/**
+		 *  Pixel size of the border.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */ 
+		protected var borderThickness:int;
+		
+		/**
+		 *  Class for the selection indicator skin part. 
+		 *       
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected var selectionIndicatorClass:Class;
+		
+		/**
+		 *  Selection indicator skin part. 
+		 *       
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected var selectionIndicator:InteractiveObject;
+		
+		/**
+		 *  Height of the selection indicator.  
+		 *       
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected var selectionIndicatorHeight:Number;
+		
+		/**
+		 *  Class for the shadow skin part.  
+		 *       
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected var shadowClass:Class;
+		
+		/**
+		 *  Shadow skin part. 
+		 *       
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected var shadow:InteractiveObject;
+
+		//--------------------------------------------------------------------------
+		//
+		//  Overridden Methods 
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  @private
+		 */
+		override protected function commitCurrentState():void
+		{
+			super.commitCurrentState();
+			
+			alpha = currentState.indexOf("disabled") == -1 ? 1 : 0.5;
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function createChildren():void
+		{           
+			super.createChildren();
+			
+			if (!dataGroup)
+			{
+				// Create data group layout
+				var layout:VerticalSpinnerLayout = new VerticalSpinnerLayout();
+				layout.requestedRowCount = 9;
+				layout.rowHeight = selectionIndicatorHeight/1.5;
+				layout.gap = 0;
+
+				// Create data group
+				dataGroup = new DataGroup();
+				dataGroup.id = "dataGroup";
+				dataGroup.layout = layout;
+
+				dataGroup.itemRenderer = new ClassFactory(spark.components.SpinnerListItemRenderer);
+			}
+
+			if (!scroller)
+			{
+				// Create scroller
+				scroller = new Scroller();
+				scroller.id = "scroller";
+				scroller.hasFocusableChildren = false;
+				scroller.ensureElementIsVisibleForSoftKeyboard = false;
+				
+				// Only support vertical scrolling
+				scroller.setStyle("verticalScrollPolicy","on");
+				scroller.setStyle("horizontalScrollPolicy", "off");
+				scroller.setStyle("skinClass", spark.skins.ios7.SpinnerListScrollerSkin);
+				
+				addChild(scroller);
+			}
+
+			if (!shadow)
+			{
+				// Shadowing sits on top of the content
+				shadow = new shadowClass();
+				shadow.mouseEnabled = false;
+				addChild(shadow);
+			}
+			
+			if (!selectionIndicator)
+			{
+				// Selection indicator is on top
+				selectionIndicator = new selectionIndicatorClass();
+				selectionIndicator.mouseEnabled = false;
+				addChild(selectionIndicator);
+			}
+			
+			// Associate scroller with data group
+			if (!scroller.viewport)
+				scroller.viewport = dataGroup;
+			
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function measure():void
+		{
+			measuredWidth = scroller.getPreferredBoundsWidth() + borderThickness * 2;
+			measuredHeight = scroller.getPreferredBoundsHeight();
+			//add in for selection indicator
+			measuredMinHeight = selectionIndicatorHeight + borderThickness * 4;
+			minHeight = measuredMinHeight;			
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+		{   
+			super.layoutContents(unscaledWidth, unscaledHeight);			
+			
+			// Scroller
+			setElementSize(scroller, unscaledWidth - borderThickness * 2, unscaledHeight);
+			setElementPosition(scroller, borderThickness, 0);
+			//selection indicator
+			unscaledHeight = Math.max(unscaledHeight, selectionIndicatorHeight + borderThickness * 4);
+			
+			setElementSize(selectionIndicator, unscaledWidth, selectionIndicatorHeight);
+			setElementPosition(selectionIndicator, 0, Math.floor((unscaledHeight - selectionIndicatorHeight) / 2));
+			
+			setElementSize(shadow, unscaledWidth - borderThickness * 2, unscaledHeight);
+			setElementPosition(shadow, borderThickness, 0);
+		}
+		
+		/**
+		 *  @private
+		 */
+		override public function styleChanged(styleProp:String):void
+		{
+			// Reinitialize the typical element so it picks up the latest styles
+			// Font styles might impact the size of the SpinnerList
+			if (styleProp != "color" && styleProp != "accentColor")
+			{
+				if (dataGroup)
+					dataGroup.invalidateTypicalItemRenderer();
+			}
+			
+			super.styleChanged(styleProp);
+		}
+		
+	}
+}
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/StageTextAreaSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/StageTextAreaSkin.as
new file mode 100644
index 0000000..aca6934
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/StageTextAreaSkin.as
@@ -0,0 +1,190 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+	
+	import mx.core.DPIClassification;
+	import mx.core.mx_internal;
+	
+	import spark.components.TextArea;
+	import spark.components.supportClasses.IStyleableEditableText;
+	import spark.components.supportClasses.ScrollableStageText;
+	import spark.components.supportClasses.StyleableTextField;
+	import spark.skins.ios7.supportClasses.StageTextSkinBase;
+	
+	use namespace mx_internal;
+	
+	/**
+	 *  ActionScript-based skin for TextArea controls in mobile applications that uses a
+	 *  StyleableStageText class for the text display. 
+	 * 
+	 *  @see spark.components.TextArea
+	 *  @see spark.components.supportClasses.StyleableStageText
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion AIR 3.0 
+	 *  @productversion Flex 4.6
+	 */
+	public class StageTextAreaSkin extends StageTextSkinBase
+	{
+		//--------------------------------------------------------------------------
+		//
+		//  Class variables
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  The underlying native text control on iOS has internal margins of its
+		 *  own. In order to remain faithful to the paddingTop and paddingBottom
+		 *  style values that developers may specify, those internal margins need to
+		 *  be compensated for. This variable contains size of that compensation in
+		 *  pixels.
+		 */
+		mx_internal static var iOSVerticalPaddingAdjustment:Number = 5;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Constructor
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  Constructor.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3.0
+		 *  @productversion Flex 4.6
+		 */
+		public function StageTextAreaSkin()
+		{
+			super();
+			multiline = true;
+			
+			switch (applicationDPI)
+			{
+				case DPIClassification.DPI_640:
+				{
+					measuredDefaultHeight = 212;
+					break;
+				}
+				case DPIClassification.DPI_480:
+				{
+					measuredDefaultHeight = 140;
+					break;
+				}
+				case DPIClassification.DPI_320:
+				{
+					measuredDefaultHeight = 106;
+					break;
+				}
+				case DPIClassification.DPI_240:
+				{
+					measuredDefaultHeight = 70;
+					break;
+				}
+				case DPIClassification.DPI_120:
+				{
+					measuredDefaultHeight = 35;
+					break;
+				}
+				default:
+				{
+					measuredDefaultHeight = 48;
+					break;
+				}
+			}
+		}
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Variables
+		//
+		//--------------------------------------------------------------------------
+		
+		/** 
+		 *  @copy spark.skins.spark.ApplicationSkin#hostComponent
+		 */
+		public var hostComponent:TextArea;  // SkinnableComponent will populate
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Overridden methods
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  @private
+		 */
+		override protected function measure():void
+		{
+			super.measure();
+			measureTextComponent(hostComponent);
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function layoutContents(unscaledWidth:Number, 
+												   unscaledHeight:Number):void
+		{
+			// base class handles border position & size
+			super.layoutContents(unscaledWidth, unscaledHeight);
+			
+			// position & size the text
+			var paddingLeft:Number = getStyle("paddingLeft");
+			var paddingRight:Number = getStyle("paddingRight");
+			var paddingTop:Number = getStyle("paddingTop");
+			var paddingBottom:Number = getStyle("paddingBottom");
+			
+			var unscaledTextWidth:Number = Math.max(0, unscaledWidth - paddingLeft - paddingRight);
+			var unscaledTextHeight:Number = Math.max(0, unscaledHeight - paddingTop - paddingBottom);
+			
+			if (textDisplay)
+			{
+				var verticalPosAdjustment:Number = 0;
+				var heightAdjustment:Number = 0;
+				
+				/*   if (Platform.isIOS)
+				{
+				verticalPosAdjustment = Math.min(iOSVerticalPaddingAdjustment, paddingTop);
+				heightAdjustment = verticalPosAdjustment + Math.min(iOSVerticalPaddingAdjustment, paddingBottom);
+				}*/
+				
+				textDisplay.commitStyles();
+				setElementSize(textDisplay, unscaledTextWidth, unscaledTextHeight + heightAdjustment);
+				setElementPosition(textDisplay, paddingLeft, paddingTop - verticalPosAdjustment);
+			}
+			
+			if (promptDisplay)
+			{
+				if (promptDisplay is StyleableTextField)
+					StyleableTextField(promptDisplay).commitStyles();
+				
+				setElementSize(promptDisplay, unscaledTextWidth, unscaledTextHeight);
+				setElementPosition(promptDisplay, paddingLeft, paddingTop);
+			}
+		}
+		
+		override protected function createTextDisplay():IStyleableEditableText
+		{
+			return new ScrollableStageText(multiline);
+		}
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/StageTextInputSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/StageTextInputSkin.as
new file mode 100644
index 0000000..6d6c811
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/StageTextInputSkin.as
@@ -0,0 +1,133 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+	import spark.components.TextInput;
+	import spark.components.supportClasses.IStyleableEditableText;
+	import spark.components.supportClasses.ScrollableStageText;
+	import spark.components.supportClasses.StyleableTextField;
+	import spark.skins.ios7.supportClasses.StageTextSkinBase;
+	
+	/**
+	 *  ActionScript-based skin for TextInput controls in mobile applications that uses a
+	 *  StyleableStageText class for the text input. 
+	 * 
+	 *  @see spark.components.TextInput
+	 *  @see spark.components.supportClasses.StyleableStageText
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion AIR 3.0 
+	 *  @productversion Flex 4.6
+	 */
+	public class StageTextInputSkin extends StageTextSkinBase
+	{
+		//--------------------------------------------------------------------------
+		//
+		//  Constructor
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  Constructor.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3.0
+		 *  @productversion Flex 4.6
+		 */
+		public function StageTextInputSkin()
+		{
+			super();
+			multiline = false;
+		}    
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Variables
+		//
+		//--------------------------------------------------------------------------
+		
+		/** 
+		 *  @copy spark.skins.spark.ApplicationSkin#hostComponent
+		 */
+		public var hostComponent:TextInput;  // SkinnableComponent will populate
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Overridden methods
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  @private
+		 */	
+		override protected function measure():void
+		{
+			super.measure();
+			measureTextComponent(hostComponent);
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function layoutContents(unscaledWidth:Number, 
+												   unscaledHeight:Number):void
+		{
+			// base class handles border position & size
+			super.layoutContents(unscaledWidth, unscaledHeight);
+			
+			// position & size the text
+			var paddingLeft:Number = getStyle("paddingLeft");
+			var paddingRight:Number = getStyle("paddingRight");
+			var paddingTop:Number = getStyle("paddingTop");
+			var paddingBottom:Number = getStyle("paddingBottom");
+			
+			var unscaledTextWidth:Number = Math.max(0, unscaledWidth - paddingLeft - paddingRight);
+			var unscaledTextHeight:Number = Math.max(0, unscaledHeight - paddingTop - paddingBottom);
+			
+			// default vertical positioning is centered
+			var textHeight:Number = getElementPreferredHeight(textDisplay);
+			var textY:Number = Math.round(0.5 * (unscaledTextHeight - textHeight)) + paddingTop;
+			
+			if (textDisplay)
+			{
+				textDisplay.commitStyles();
+				setElementSize(textDisplay, unscaledTextWidth, unscaledTextHeight);
+				setElementPosition(textDisplay, paddingLeft, textY);
+			}
+			
+			if (promptDisplay)
+			{
+				if (promptDisplay is StyleableTextField)
+					StyleableTextField(promptDisplay).commitStyles();
+				
+				var promptHeight:Number = getElementPreferredHeight(promptDisplay);
+				var promptY:Number = Math.round(0.5 * (unscaledTextHeight - promptHeight)) + paddingTop;
+				
+				setElementSize(promptDisplay, unscaledTextWidth, promptHeight);
+				setElementPosition(promptDisplay, paddingLeft, promptY);
+			}
+		}
+		
+		override protected function createTextDisplay():IStyleableEditableText
+		{
+			return new ScrollableStageText(multiline);
+		}
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/TabbedViewNavigatorTabBarSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/TabbedViewNavigatorTabBarSkin.as
new file mode 100644
index 0000000..fe7a7ac
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/TabbedViewNavigatorTabBarSkin.as
@@ -0,0 +1,120 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+import spark.components.ButtonBarButton;
+import spark.components.DataGroup;
+import spark.skins.mobile.supportClasses.ButtonBarButtonClassFactory;
+import spark.skins.mobile.supportClasses.TabbedViewNavigatorTabBarHorizontalLayout;
+
+/**
+ *  The iOS7+ specific skin class for the Spark TabbedViewNavigator tabBar skin part.
+ *  
+ *  @see spark.components.TabbedViewNavigator#tabBar
+ *  
+ *  @langversion 3.0
+ *  @playerversion Flash 10
+ *  @playerversion AIR 2.5
+ *  @productversion Flex 4.5
+ */
+public class TabbedViewNavigatorTabBarSkin extends ButtonBarSkin
+{
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  Constructor.
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     * 
+     */
+    public function TabbedViewNavigatorTabBarSkin()
+    {
+        super();
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @private
+     */
+    override protected function createChildren():void
+    {
+        if (!firstButton)
+        {
+            firstButton = new ButtonBarButtonClassFactory(ButtonBarButton);
+            firstButton.skinClass = spark.skins.ios7.ButtonBarFirstButtonSkin;
+        }
+        
+        if (!lastButton)
+        {
+            lastButton = new ButtonBarButtonClassFactory(ButtonBarButton);
+            lastButton.skinClass = spark.skins.ios7.ButtonBarLastButtonSkin;
+        }
+        
+        if (!middleButton)
+        {
+            middleButton = new ButtonBarButtonClassFactory(ButtonBarButton);
+            middleButton.skinClass = spark.skins.ios7.ButtonBarMiddleButtonSkin;
+        }
+        
+        if (!dataGroup)
+        {
+            // TabbedViewNavigatorButtonBarHorizontalLayout for even percent layout
+            var tabLayout:TabbedViewNavigatorTabBarHorizontalLayout = 
+                new TabbedViewNavigatorTabBarHorizontalLayout();
+            tabLayout.useVirtualLayout = false;
+            
+            dataGroup = new DataGroup();
+            dataGroup.layout = tabLayout;
+            addChild(dataGroup);
+        }
+    }
+    
+    /**
+     *  @private
+     */
+    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.drawBackground(unscaledWidth, unscaledHeight);
+
+        // backgroundAlpha style is not supported by ButtonBar
+        // TabbedViewNavigatorSkin sets a hard-coded value to support
+        // overlayControls
+        var backgroundAlphaValue:* = getStyle("backgroundAlpha");
+        var backgroundAlpha:Number = (backgroundAlphaValue === undefined)
+            ? 1 : getStyle("backgroundAlpha");
+        
+        graphics.beginFill(getStyle("chromeColor"), backgroundAlpha);
+        graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
+        graphics.endFill();
+    }
+}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/TextAreaSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/TextAreaSkin.as
new file mode 100644
index 0000000..5133ae8
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/TextAreaSkin.as
@@ -0,0 +1,889 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+
+import flash.events.Event;
+import flash.events.FocusEvent;
+import flash.events.KeyboardEvent;
+import flash.events.MouseEvent;
+import flash.events.SoftKeyboardEvent;
+import flash.geom.Point;
+import flash.geom.Rectangle;
+import flash.system.Capabilities;
+import flash.text.TextLineMetrics;
+import flash.ui.Keyboard;
+
+import mx.core.DPIClassification;
+import mx.core.EventPriority;
+import mx.core.FlexGlobals;
+import mx.core.mx_internal;
+import mx.events.FlexEvent;
+import mx.utils.Platform;
+
+import spark.components.Group;
+import spark.components.Scroller;
+import spark.components.TextArea;
+import spark.components.supportClasses.StyleableTextField;
+import spark.events.CaretBoundsChangeEvent;
+import spark.skins.ios7.supportClasses.TextSkinBase;
+
+use namespace mx_internal;
+
+/**
+ *  ActionScript-based skin for TextArea components in mobile applications.
+ * 
+ * @see spark.components.TextArea
+ * 
+ *  @langversion 3.0
+ *  @playerversion Flash 10
+ *  @playerversion AIR 2.5 
+ *  @productversion Flex 4.5
+ */
+public class TextAreaSkin extends TextSkinBase 
+{
+    /**
+     *  @private
+     *  Right-margin of iOS native text control when editing on a retina display
+     *  based on fontSize 32.
+     */
+    mx_internal static var IOS_RIGHT_MARGIN_320:Number = 19;
+    
+    /**
+     *  @private
+     *  Right-margin of iOS native text control when editing on a retina display
+     *  based on fontSize 16 scaling from applicationDPI 160.
+     */
+    mx_internal static var IOS_RIGHT_MARGIN_160_SCALED_TO_320:Number = 9.4;
+    
+    /**
+     *  @private
+     *  Right-margin of iOS native text control when editing on a standard display
+     *  based on fontSize 16 and runtimeDPI 160.
+     */
+    mx_internal static var IOS_RIGHT_MARGIN_160:Number = 20.6;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  Constructor.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    public function TextAreaSkin()
+    {
+        super();
+        
+        addEventListener(Event.RESIZE, resizeHandler);
+        
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_640:
+			{
+				measuredDefaultWidth = 1024;
+				measuredDefaultHeight = 212;
+				layoutBorderSize = 3;
+				roundheight = 24;
+				break;
+			}
+			case DPIClassification.DPI_480:
+			{
+				measuredDefaultWidth = 880;
+				measuredDefaultHeight = 140;
+				layoutBorderSize = 2;
+				roundheight = 18;	
+				break;
+			}
+            case DPIClassification.DPI_320:
+            {
+                measuredDefaultWidth = 612;
+                measuredDefaultHeight = 106;
+				layoutBorderSize = 1.5;
+				roundheight = 14;	
+                break;
+            }
+			case DPIClassification.DPI_240:
+			{
+				measuredDefaultWidth = 440;
+				measuredDefaultHeight = 70;
+				layoutBorderSize = 1;
+				roundheight = 10;
+				break;
+			}
+			case DPIClassification.DPI_120:
+			{
+				measuredDefaultWidth = 220;
+				measuredDefaultHeight = 35;
+				layoutBorderSize = .5;
+				roundheight = 5;
+				break;
+			}
+            default:
+            {
+                measuredDefaultWidth = 306;
+                measuredDefaultHeight = 53;
+				layoutBorderSize = .5;
+				roundheight = 7; 
+                break;
+            }
+        }
+		addEventListener(FocusEvent.FOCUS_IN, focusChangeHandler);
+		addEventListener(FocusEvent.FOCUS_OUT, focusChangeHandler);
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Skin parts
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  Scroller skin part.
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     */ 
+    public var scroller:Scroller;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    
+    /** 
+     *  @copy spark.skins.spark.ApplicationSkin#hostComponent
+     */
+    public var hostComponent:TextArea;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Variables
+    //
+    //--------------------------------------------------------------------------
+	
+	protected var isFocused:Boolean = false;
+	
+	protected var roundheight:uint;
+	
+    /**
+     *  @private
+     *  The width of the component on the previous layout manager 
+     *  pass.  This gets set in updateDisplayList() and used in measure() on 
+     *  the next layout pass.  This is so our "guessed width" in measure() 
+     *  will be as accurate as possible since textDisplay is multiline and 
+     *  the textDisplay height is dependent on the width.
+     * 
+     *  In the constructor this is actually set based on the DPI.
+     */
+    mx_internal var oldUnscaledWidth:Number;
+    
+    private var textDisplayGroup:Group;
+    private var _isIOS:Boolean;
+    private var invalidateCaretPosition:Boolean = true;
+    private var oldCaretBounds:Rectangle = new Rectangle(-1, -1, -1, -1);
+    private var lastTextHeight:Number;
+    private var lastTextWidth:Number;
+    
+    private var isTextDisplayTall:Boolean = true;
+    private var growTextDisplay:Boolean = false;
+    private var shrinkTextDisplay:Boolean = false;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @private
+     */
+    override protected function createChildren():void
+    {
+        if (!textDisplay)
+        {
+            // wrap StyleableTextField in UIComponent
+            textDisplay = StyleableTextField(createInFontContext(StyleableTextField));
+            textDisplay.styleName = this;
+            textDisplay.multiline = true;
+            textDisplay.editable = true;
+            textDisplay.lineBreak = getStyle("lineBreak");
+            textDisplay.useTightTextBounds = false;
+            textDisplay.scrollToRangeDelegate = scrollToRange;
+            
+            // on iOS, resize the TextField and let the native control handle scrolling
+            _isIOS = Platform.isIOS;
+            
+            if (_isIOS)
+            {
+                // hard-coded rightMargin for iOS native text control
+                // this value is independent of the paddingRight style
+                var rightMargin:Number = 0;
+                var isRetina:Boolean = false;
+                var isScaling160to320:Boolean = false;
+                
+                // check for scaling
+                if ("runtimeDPI" in FlexGlobals.topLevelApplication)
+                {
+                    var runtimeDPI:Number = FlexGlobals.topLevelApplication.runtimeDPI as Number;
+                    isRetina = (runtimeDPI == DPIClassification.DPI_320);
+                    isScaling160to320 = isRetina
+                        && (applicationDPI == DPIClassification.DPI_160);
+                }
+                
+                if (isRetina && !isScaling160to320)
+                    rightMargin = IOS_RIGHT_MARGIN_320;
+                else if (isRetina && isScaling160to320)
+                    rightMargin = IOS_RIGHT_MARGIN_160_SCALED_TO_320;
+                else
+                    rightMargin = IOS_RIGHT_MARGIN_160;
+                
+                textDisplay.rightMargin = rightMargin;
+            }
+            else
+            {
+                textDisplay.addEventListener(KeyboardEvent.KEY_DOWN, textDisplay_keyHandler);
+            }
+            
+            textDisplay.addEventListener(Event.CHANGE, textDisplay_changeHandler);
+            textDisplay.addEventListener(FlexEvent.VALUE_COMMIT, textDisplay_changeHandler);
+            textDisplay.addEventListener(Event.SCROLL, textDisplay_scrollHandler);
+            // Use a lower priority so that the StyleableTextField event handler is called first. 
+            // That handler cancels the event and we need to check for that case
+            textDisplay.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATING, textDisplay_softKeyboardActivatingHandler, false, EventPriority.DEFAULT_HANDLER);
+            textDisplay.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATE, textDisplay_softKeyboardActivateHandler);
+            textDisplay.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE, textDisplay_softKeyboardDeactivateHandler);
+            
+            textDisplay.left = getStyle("paddingLeft");
+            textDisplay.top = getStyle("paddingTop");
+            textDisplay.right = getStyle("paddingRight");
+            textDisplay.bottom = getStyle("paddingBottom");
+            
+            // wrap StyleableTextComponent in Group for viewport
+            textDisplayGroup = new Group();
+            textDisplayGroup.clipAndEnableScrolling = true;
+            textDisplayGroup.addElement(textDisplay);
+        }
+        
+        if (!scroller)
+        {
+            scroller = new Scroller();
+            scroller.minViewportInset = 0;
+            scroller.measuredSizeIncludesScrollBars = false;
+            scroller.ensureElementIsVisibleForSoftKeyboard = false;
+            
+            addChild(scroller);
+        }
+        
+        if (!scroller.viewport)
+            scroller.viewport = textDisplayGroup;
+        
+        super.createChildren();
+    }
+    
+    /**
+     *  @private
+     *  TextArea prompt supports wrapping and multiline
+     */
+    override protected function createPromptDisplay():StyleableTextField
+    {
+        var prompt:StyleableTextField = super.createPromptDisplay();
+        prompt.editable = true;
+        prompt.wordWrap = true;
+        
+        return prompt;
+    }
+    
+    /**
+     *  @private
+     */
+    override protected function measure():void
+    {
+        super.measure();
+        
+        var paddingTop:Number = getStyle("paddingTop");
+        var paddingBottom:Number = getStyle("paddingBottom");
+        var paddingLeft:Number = getStyle("paddingLeft");
+        var paddingRight:Number = getStyle("paddingRight");
+        
+        // TextDisplay always defaults to 440 pixels wide (the value is DPI dependent), 
+        // and tall enough to show all text.
+        // 
+        // You can set an explicit width and the height will adjust accordingly. The opposite
+        // is not true: setting an explicit height will not adjust the width accordingly.
+        
+        measuredWidth = measuredDefaultWidth;
+        
+        // now we need to measure textDisplay's height.  Unfortunately, this is tricky and 
+        // is dependent on textDisplay's width.  Let's use the heuristic that our width 
+        // is the same as our last width.
+        // We don't use layoutMeasuredWidth, because that value is just a constant and doesn't
+        // take into account the fact that the TextArea could have an explicitWidth or could 
+        // be constrained by some value.  However, we still default oldTextDisplayWidth to 
+        // be layoutMeasuredWidth the first time through.
+        var textDisplayEstimatedWidth:Number = oldUnscaledWidth - paddingLeft - paddingRight;
+        
+        // now we need to measure textDisplay's height.  Unfortunately, this is tricky and 
+        // is dependent on textDisplay's width.  
+        // Use the old textDisplay width as an estimte for the new one.  
+        // If we are wrong, we'll find out in updateDisplayList()
+        textDisplay.commitStyles();
+        
+        // Clear min sizes first.
+        textDisplay.minWidth = textDisplay.minHeight = NaN;
+        
+        // If lineBreak == explicit, always use NaN for estimated width
+        if (getStyle("lineBreak") == "explicit")
+            textDisplayEstimatedWidth = NaN;
+        
+        setElementSize(textDisplay, textDisplayEstimatedWidth, NaN);
+        
+        measuredHeight = getElementPreferredHeight(textDisplay) + paddingTop + paddingBottom;
+    }
+    
+    /**
+     *  @private
+     */
+    override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.layoutContents(unscaledWidth, unscaledHeight);
+        
+        // position & size border
+        if (border)
+        {
+            setElementSize(border, unscaledWidth, unscaledHeight);
+            setElementPosition(border, 0, 0);
+        }
+        
+        setElementSize(scroller, unscaledWidth, unscaledHeight);
+        setElementPosition(scroller, 0, 0);
+        
+        // position & size the text
+        var explicitLineBreak:Boolean = getStyle("lineBreak") == "explicit";
+        var paddingLeft:Number = getStyle("paddingLeft");
+        var paddingRight:Number = getStyle("paddingRight");
+        var paddingTop:Number = getStyle("paddingTop");
+        var paddingBottom:Number = getStyle("paddingBottom");
+        
+        var unscaledTextWidth:Number = unscaledWidth - paddingLeft - paddingRight;
+        var unscaledTextHeight:Number = unscaledHeight - paddingTop - paddingBottom;
+        var textHeight:Number;
+        var textWidth:Number = explicitLineBreak ? textDisplay.measuredTextSize.x : unscaledTextWidth;
+        
+        var lineIndex:int;
+        var topCharIndex:int;
+        var charBounds:Rectangle;
+        
+        // grab old measured textDisplay height before resizing it
+        var oldPreferredTextHeight:Number = getElementPreferredHeight(textDisplay);
+        
+        // set width first to measure height correctly
+        textDisplay.commitStyles();
+        textDisplay.setLayoutBoundsSize(textWidth, NaN);
+        
+        // In iOS, when we go into editing mode, the runtime overlays a native 
+        // text control over the textDisplay. In order to prevent the text 
+        // from overflowing the component and to get scrolling support, the 
+        // native text control must be the same size as the TextArea
+        if (_isIOS)
+        {
+            if (shrinkTextDisplay)
+            {
+                // Switching to edit mode. Convert from viewport scrolling to 
+                // TextField scrolling
+                var vsp:Number = textDisplayGroup.verticalScrollPosition;
+                            
+                var lineMetrics:TextLineMetrics = textDisplay.getLineMetrics(0);
+                var lineHeight:Number = lineMetrics.ascent + lineMetrics.descent;
+                
+                // TODO Figure out how to get the x offset. Right now is hard coded to 2
+                // At least half the line should be showing before we scroll to that line
+                // This makes the conversion from pixel to line based scrolling a little less jumpy
+                lineIndex = textDisplay.getLineIndexAtPoint(2, vsp + lineHeight / 2) + 1;
+                textDisplayGroup.verticalScrollPosition = 0;
+                isTextDisplayTall = false;
+                //trace("TAS.layoutContents shrinkText vsp",vsp,"lineIndex",lineIndex);
+            }
+            
+            else if (growTextDisplay)
+            {
+                // Leaving edit mode. Convert from TextField scrolling to 
+                // viewport scrolling
+                var scrollV:Number = textDisplay.scrollV;
+                
+                // TODO (jszeto) investigate using lineMetrics.lineHeight * scrollV instead of getCharBoundaries
+                topCharIndex = textDisplay.getLineOffset(scrollV - 1);
+                charBounds = textDisplay.getCharBoundaries(topCharIndex);
+                // If the charBounds is null, just set vsp to 0
+                if (charBounds == null)
+                    charBounds = new Rectangle(0, 0, 0, 0);
+                textDisplay.scrollV = 1;
+                isTextDisplayTall = true;
+                //trace("TAS.layoutContents growText scrollV",scrollV,"topCharIndex",topCharIndex,"charBounds",charBounds);
+            }
+        }
+        
+        // TextField height should match its content or the TextArea bounds at minimum
+        // iOS special case to prevent Flex Scroller scrolling when editable
+        if (isTextDisplayTall)
+            textHeight = Math.max(textDisplay.measuredTextSize.y, unscaledTextHeight);
+        else
+            textHeight = unscaledTextHeight;
+        
+        // FIXME (jasonsj): iOS native scroll bar appears even when explictHeight
+        //                  is not specified. Focus-in is jumpy.
+        
+        if (promptDisplay)
+        {
+            promptDisplay.commitStyles();
+            setElementSize(promptDisplay, unscaledTextWidth, textHeight);
+            setElementPosition(promptDisplay, paddingLeft, paddingTop);
+            
+            // no need to update textDisplay if promptDisplay is present
+            return;
+        }
+        
+        // keep track of oldUnscaledWidth so we have a good guess as to the width 
+        // of the textDisplay on the next measure() pass
+        oldUnscaledWidth = unscaledWidth;
+        
+        // set the width of textDisplay to textWidth.
+        // set the height to oldTextHeight.  If the height's actually wrong, 
+        // we'll invalidateSize() and go through this layout pass again anyways
+        setElementSize(textDisplay, textWidth, textHeight);
+        
+        // Set minWidth/Height on the text so the textDisplayGroup sizes accordingly
+        textDisplay.minWidth = textWidth;
+        textDisplay.minHeight = textHeight;
+        textDisplayGroup.invalidateDisplayList();
+        
+        // grab new measured textDisplay height after the textDisplay has taken its final width
+        var newPreferredTextHeight:Number = getElementPreferredHeight(textDisplay);
+        
+        // if the resize caused the textDisplay's height to change (because of 
+        // text reflow), then we need to remeasure ourselves with our new width
+        if (oldPreferredTextHeight != newPreferredTextHeight)
+            invalidateSize();
+        
+        if (_isIOS)
+        {
+            if (shrinkTextDisplay)
+            {
+                scroller.validateNow();
+                textDisplay.scrollV = lineIndex;
+            }
+            else if (growTextDisplay)
+            {
+                scroller.validateNow();
+                textDisplayGroup.verticalScrollPosition = charBounds.y;
+            }               
+            
+            shrinkTextDisplay = false;
+            growTextDisplay = false;
+        }
+        
+        //trace("TAS.layoutContents tH",textHeight,"tW",textWidth,"invalidateCaret",invalidateCaretPosition);
+        
+        // checking if text fits in TextArea
+        // does not apply to iOS due to native text editing and scrolling
+        // invalidateCaretPosition will never be true for iOS
+        if (invalidateCaretPosition && isTextDisplayTall)
+        {
+            // if the caret is outside the viewport, update the Group verticalScrollPosition
+            var charIndex:int = textDisplay.selectionBeginIndex;
+            var caretBounds:Rectangle = textDisplay.getCharBoundaries(charIndex);
+            lineIndex = textDisplay.getLineIndexOfChar(charIndex);
+            
+            // getCharBoundaries() returns null for new lines
+            if (!caretBounds)
+            {
+                // temporarily insert a character at the caretIndex
+                textDisplay.replaceText(charIndex, charIndex, "W");
+                caretBounds = textDisplay.getCharBoundaries(charIndex);
+                lineIndex = textDisplay.getLineIndexOfChar(charIndex);
+                textDisplay.replaceText(charIndex, charIndex + 1, "");   
+            }
+           
+            if (caretBounds)
+            {
+                // Scroll the internal Scroller to ensure the caret is visible
+                if (textHeight > unscaledTextHeight)
+                {
+                    
+                    if (charIndex == textDisplay.text.length)
+                    {
+                        // Make sure textDisplayGroup is validated, otherwise the 
+                        // verticalScrollPosition may be out of bounds, which will
+                        // cause a bounce effect.
+                        textDisplayGroup.validateNow();
+                        textDisplayGroup.verticalScrollPosition = textHeight;
+                    }
+                    else
+                    {
+                        // caretTopPositon and caretBottomPosition are TextField-relative positions
+                        // the TextField is inset by padding styles of the TextArea (via the VGroup)
+                        
+                        // adjust top position to 0 when on the first line
+                        // caretTopPosition will be negative when off stage
+                        var caretTopPosition:Number = ((caretBounds.y) < 0 || (lineIndex == 0))
+                            ? 0 : caretBounds.y;
+                        
+                        // caretBottomPosition is the y coordinate of the bottom bounds of the caret
+                        var caretBottomPosition:Number = caretBounds.y + caretBounds.height;
+                        
+                        // note that verticalScrollPosition min/max do not account for padding
+                        var vspTop:Number = textDisplayGroup.verticalScrollPosition;
+                        
+                        // vspBottom should be the max visible Y in the TextField
+                        // coordinate space.
+                        // remove paddingBottom for some clearance between caret and border
+                        var vspBottom:Number = vspTop + unscaledHeight - paddingTop - paddingBottom;
+                        
+                        // is the caret in or below the padding and viewport?
+                        if (caretBottomPosition > vspBottom)
+                        {
+                            // adjust caretBottomPosition to max scroll position when on the last line
+                            if (lineIndex + 1 == textDisplay.numLines)
+                            {
+                                // use textHeight+paddings instead of textDisplayGroup.contentHeight
+                                // Group has not been resized by this point
+                                textDisplayGroup.verticalScrollPosition = (textHeight + paddingTop + paddingBottom) - textDisplayGroup.height;
+                            }
+                            else
+                            {
+                                // bottom edge of the caret moves just inside the bottom edge of the scroller
+                                // add delta between caret and vspBottom
+                                textDisplayGroup.verticalScrollPosition = vspTop + (caretBottomPosition - vspBottom);
+                            }
+                        }
+                            // is the caret above the viewport?
+                        else if (caretTopPosition < vspTop)
+                        {
+                            // top edge of the caret moves inside the top edge of the scroller
+                            textDisplayGroup.verticalScrollPosition = caretTopPosition;
+                        }
+                    }
+                    
+                    scroller.validateNow();
+                }
+                
+                // Convert to local coordinates
+                // Dispatch an event for an ancestor Scroller
+                // It will scroll the TextArea so the caret is in view
+                convertBoundsToLocal(caretBounds);
+                if (oldCaretBounds == null || caretBounds.bottom != oldCaretBounds.bottom || caretBounds.top != oldCaretBounds.top)
+                {
+                    //trace("TAS.layoutContents send caret CHANGE");
+                    dispatchEvent(new CaretBoundsChangeEvent(CaretBoundsChangeEvent.CARET_BOUNDS_CHANGE,true,true,oldCaretBounds,caretBounds));
+                }
+                
+                oldCaretBounds = caretBounds;   
+            }
+
+            invalidateCaretPosition = false;
+        }
+        
+        // Make sure final scroll position is valid
+        if (isTextDisplayTall)
+            snapTextScrollPosition();
+    }
+    
+	override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+	{
+		super.drawBackground(unscaledWidth, unscaledHeight);
+		
+		var contentBackgroundColor:uint = getStyle("contentBackgroundColor");
+		var contentBackgroundAlpha:Number = getStyle("contentBackgroundAlpha");	
+		//change border color and thickness when in focus
+		var borderColor:uint = isFocused ? getStyle("focusColor") : getStyle("borderColor");
+		var borderWidth:uint = layoutBorderSize * 2;
+		if (isNaN(contentBackgroundAlpha))
+		{
+			contentBackgroundAlpha = 1;
+		}        
+		if (getStyle("contentBackgroundBorder") == "roundedrect")
+		{		
+			graphics.lineStyle(layoutBorderSize, borderColor, 1, true);
+			graphics.beginFill(contentBackgroundColor, contentBackgroundAlpha);
+			graphics.drawRoundRectComplex(layoutBorderSize, layoutBorderSize, unscaledWidth - borderWidth, unscaledHeight - borderWidth, roundheight, roundheight, roundheight, roundheight);
+			graphics.endFill();
+		}
+		if (getStyle("contentBackgroundBorder") == "rectangle")
+		{
+			
+			//rectangle border and background
+			graphics.lineStyle(layoutBorderSize, borderColor, 1);
+			graphics.beginFill(contentBackgroundColor, contentBackgroundAlpha);
+			graphics.drawRect(layoutBorderSize, layoutBorderSize, unscaledWidth - borderWidth, unscaledHeight - borderWidth);
+			graphics.endFill();
+		}
+		else if (getStyle("contentBackgroundBorder") == "none")
+		{
+			
+			//rectangle border and background
+			graphics.beginFill(contentBackgroundColor, contentBackgroundAlpha);
+			graphics.drawRect(0, 0, unscaledWidth - borderWidth, unscaledHeight - borderWidth);
+			graphics.endFill();
+		}
+	}
+	
+    /**
+     *  @private
+     *  Make sure the scroll positions are valid, and adjust if needed.
+     */
+    private function snapTextScrollPosition():void
+    {
+        var maxHsp:Number = textDisplayGroup.contentWidth > textDisplayGroup.width ? 
+            textDisplayGroup.contentWidth-textDisplayGroup.width : 0; 
+        textDisplayGroup.horizontalScrollPosition =  Math.min(Math.max(0,textDisplayGroup.horizontalScrollPosition),maxHsp);
+        
+        var maxVsp:Number = textDisplayGroup.contentHeight > textDisplayGroup.height ? 
+            textDisplayGroup.contentHeight-textDisplayGroup.height : 0; 
+        
+        textDisplayGroup.verticalScrollPosition = 
+            Math.min(Math.max(0,textDisplayGroup.verticalScrollPosition),maxVsp);
+    }
+    
+    /**
+     *  @private
+     *  Get the bounds of the caret
+     */    
+    private function getCaretBounds():Rectangle
+    {
+        var charIndex:int = textDisplay.selectionBeginIndex;
+        var caretBounds:Rectangle = textDisplay.getCharBoundaries(charIndex);
+        
+        if (!caretBounds)
+        {
+            textDisplay.replaceText(charIndex, charIndex, "W");
+            caretBounds = textDisplay.getCharBoundaries(charIndex);
+            textDisplay.replaceText(charIndex, charIndex + 1, "");
+        }
+        
+        return caretBounds;
+    }
+    
+    /**
+     *  @private
+     *  Convert bounds from textDisplay to local coordinates
+     */
+    private function convertBoundsToLocal(bounds:Rectangle):void
+    {
+        if (bounds)
+        {
+            var position:Point = new Point(bounds.x, bounds.y);
+            position = textDisplay.localToGlobal(position);
+            position = globalToLocal(position);
+            bounds.x = position.x;
+            bounds.y = position.y;
+        }
+    }
+    
+    /**
+     *  @private
+     */
+    private function scrollToRange(anchorPosition:int, activePosition:int):void
+    {
+        var pos:int = Math.min(anchorPosition, activePosition);
+        var bounds:Rectangle = textDisplay.getCharBoundaries(pos);
+        var vsp:int = textDisplayGroup.verticalScrollPosition;
+        var paddingTop:Number = getStyle("paddingTop");
+        var paddingBottom:Number = getStyle("paddingBottom");
+        
+        if (bounds && (bounds.top < vsp - paddingTop || 
+             bounds.bottom > vsp + unscaledHeight - paddingTop - paddingBottom))
+        {
+            textDisplayGroup.verticalScrollPosition = bounds.top + paddingTop;
+            snapTextScrollPosition();
+        }
+    }
+    
+    /**
+     *  @private
+     *  Handle size and caret position changes that occur when text content
+     *  changes.
+     */
+    private function textDisplay_changeHandler(event:Event):void
+    {
+        var tH:Number = textDisplay.textHeight;
+        var tW:Number = textDisplay.textWidth;
+        var explicitLineBreak:Boolean = getStyle("lineBreak") == "explicit";
+        
+        // Size and caret position have changed if the text height is different or
+        // the text width is different and we aren't word wrapping
+        if (tH != lastTextHeight || ( explicitLineBreak && tW != lastTextWidth))
+        {
+            invalidateSize();
+            invalidateDisplayList();
+            invalidateCaretPosition = true;   
+        }
+        
+        lastTextHeight = tH;
+        lastTextWidth = tW;
+    }
+    
+    /**
+     *  @private
+     *  Cancels any native scroll that the Flash Player attempts to do
+     */
+    private function textDisplay_scrollHandler(event:Event):void
+    {
+        // if iOS, let the OS handle scrolling
+        if (_isIOS)
+            return;
+        
+        // If not IOS, we will handle scrolling, so don't let the native
+        // flash textfield scroll at all.
+        if (textDisplay.scrollV > 1)
+            textDisplay.scrollV = 1;
+        if (textDisplay.scrollH > 0)
+            textDisplay.scrollH = 0;
+    }
+    
+    /**
+     *  @private
+     *  Adjust viewport when using key navigation
+     */
+    private function textDisplay_keyHandler(event:KeyboardEvent):void
+    {
+        // update scroll position when caret changes
+        if ((event.keyCode == Keyboard.UP
+                || event.keyCode == Keyboard.DOWN
+                || event.keyCode == Keyboard.LEFT
+                || event.keyCode == Keyboard.RIGHT))
+        {
+            invalidateDisplayList();
+            invalidateCaretPosition = true;
+        }
+        
+        // Change event is not always sent when delete key is pressed, so
+        // invalidate the size here
+        if (event.keyCode == Keyboard.BACKSPACE)
+        {
+            invalidateSize();
+        }
+    }
+    
+    /**
+     *  @private
+     *  When entering edit mode on iOS, we need to shrink the textDisplay to 
+     *  the size of the TextArea  
+     */ 
+    private function textDisplay_softKeyboardActivatingHandler(event:SoftKeyboardEvent):void
+    {
+        if (event.isDefaultPrevented())
+            return;
+        
+        if (_isIOS && isTextDisplayTall)
+        {
+            //trace("TAS.SK ACTIVATING targ",event.target);
+            shrinkTextDisplay = true;
+            invalidateDisplayList();
+            validateNow();
+        }
+    }  
+    
+    /**
+     *  @private
+     *  Send a caret change event to an ancestor Scroller
+     */
+    private function textDisplay_softKeyboardActivateHandler(event:SoftKeyboardEvent):void
+    {
+        var keyboardRect:Rectangle = stage.softKeyboardRect;
+        
+        if (keyboardRect.width > 0 && keyboardRect.height > 0)
+        {
+            var newCaretBounds:Rectangle = getCaretBounds();
+            convertBoundsToLocal(newCaretBounds);
+            
+            if (oldCaretBounds != newCaretBounds)
+            {
+                //trace("TAS.SK ACTIVATE",keyboardRect,"dispatch caret CHANGE","newCaretBounds",newCaretBounds);
+                dispatchEvent(new CaretBoundsChangeEvent(CaretBoundsChangeEvent.CARET_BOUNDS_CHANGE,true,true,oldCaretBounds,newCaretBounds));
+                oldCaretBounds = newCaretBounds;
+            }
+        }
+    }
+    
+    /**
+     *  @private
+     *  On iOS, when leaving edit mode, we need to restore the textDisplay to the
+     *  height of the text.
+     */  
+    private function textDisplay_softKeyboardDeactivateHandler(event:SoftKeyboardEvent):void
+    {
+        if (_isIOS && !isTextDisplayTall)
+        {
+            growTextDisplay = true;
+            invalidateDisplayList();
+        }
+    }
+    
+    /**
+     *  @private
+     */
+    private function resizeHandler(event:Event):void
+    {
+        // Resizing needs to tickle the TextArea's internal auto-scroll logic
+        invalidateCaretPosition = true;
+        invalidateDisplayList();
+    }
+    
+    /**
+     *  @private
+     */
+    override public function styleChanged(styleProp:String):void
+    {
+        super.styleChanged(styleProp);
+        
+        // propogate styleChanged explicitly to textDisplay
+        if (textDisplay)
+            textDisplay.styleChanged(styleProp);
+        
+        // Check for padding style changes
+        if (!styleProp || styleProp == "styleName" || styleProp.indexOf("padding") >= 0)
+        {
+            if (textDisplay)
+            {
+                textDisplay.left = getStyle("paddingLeft");
+                textDisplay.top = getStyle("paddingTop");
+                textDisplay.right = getStyle("paddingRight");
+                textDisplay.bottom = getStyle("paddingBottom");
+            }
+        }
+    }
+	
+	private function focusChangeHandler(event:FocusEvent):void
+	{
+		isFocused = event.type == FocusEvent.FOCUS_IN;
+		invalidateDisplayList();		
+	}
+	
+}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/TextInputSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/TextInputSkin.as
new file mode 100644
index 0000000..f2b243e
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/TextInputSkin.as
@@ -0,0 +1,374 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+	import flash.events.Event;
+	import flash.events.FocusEvent;
+	import flash.events.SoftKeyboardEvent;
+	import flash.system.Capabilities;
+	
+	import mx.core.DPIClassification;
+	import mx.core.EventPriority;
+	import mx.core.mx_internal;
+	import mx.events.FlexEvent;
+	import mx.utils.Platform;
+	
+	import spark.components.TextInput;
+	import spark.components.supportClasses.StyleableTextField;
+	import spark.skins.ios7.supportClasses.TextSkinBase;
+	
+	use namespace mx_internal;
+	
+	/**
+	 *  ActionScript-based skin for TextInput controls in mobile applications. 
+	 * 
+	 * @see spark.components.TextInput
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10
+	 *  @playerversion AIR 2.5 
+	 *  @productversion Flex 4.5
+	 */
+	public class TextInputSkin extends TextSkinBase 
+	{
+		//--------------------------------------------------------------------------
+		//
+		//  Constructor
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  Constructor.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5
+		 *  @productversion Flex 4.5
+		 */
+		public function TextInputSkin()
+		{
+			super();
+			
+			// on iOS, make adjustments for native text rendering
+			_isIOS = Platform.isIOS;
+			
+			switch (applicationDPI)
+			{
+				case DPIClassification.DPI_640:
+				{
+					measuredDefaultWidth = 1200;
+					measuredDefaultHeight = 132;
+					layoutBorderSize = 3;
+					roundheight = 24;
+					break;
+				}
+				case DPIClassification.DPI_480:
+				{
+
+					measuredDefaultWidth = 880;
+					measuredDefaultHeight = 100;
+					layoutBorderSize = 2;
+					roundheight = 18;			
+					break;
+				}
+				case DPIClassification.DPI_320:
+				{
+					measuredDefaultWidth = 600;
+					measuredDefaultHeight = 66;
+					layoutBorderSize = 1.5;
+					roundheight = 14;			
+					break;
+				}
+				case DPIClassification.DPI_240:
+				{
+					measuredDefaultWidth = 440;
+					measuredDefaultHeight = 50;
+					layoutBorderSize = 1;
+					roundheight = 10;
+					break;
+				}
+				case DPIClassification.DPI_120:
+				{
+					measuredDefaultWidth = 220;
+					measuredDefaultHeight = 25;
+					layoutBorderSize = .5;
+					roundheight = 5;				
+					break;
+				}
+				default:
+				{
+					measuredDefaultWidth = 300;
+					measuredDefaultHeight = 33;
+					layoutBorderSize = .5;
+					roundheight = 7; 
+					break;
+				}
+			}
+			addEventListener(FocusEvent.FOCUS_IN, focusChangeHandler);
+			addEventListener(FocusEvent.FOCUS_OUT, focusChangeHandler);
+		}
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Variables
+		//
+		//--------------------------------------------------------------------------
+		
+		protected var isFocused:Boolean = false;
+		
+		protected var roundheight:uint;
+		
+		/** 
+		 *  @copy spark.skins.spark.ApplicationSkin#hostComponent
+		 */
+		public var hostComponent:TextInput;  // SkinnableComponent will populate
+			
+		/**
+		 *  @private
+		 */
+		private var _isIOS:Boolean;
+		
+		/**
+		 *  @private
+		 */
+		private var _isEditing:Boolean;
+		
+		/**
+		 *  @private
+		 */
+		override protected function createChildren():void
+		{
+			super.createChildren();
+			
+			textDisplay.addEventListener("editableChanged", editableChangedHandler);
+			textDisplay.addEventListener(FlexEvent.VALUE_COMMIT, valueCommitHandler);
+			
+			// remove hit area improvements on iOS when editing
+			if (_isIOS)
+			{
+				textDisplay.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATING, textDisplay_softKeyboardActivatingHandler, false, EventPriority.DEFAULT_HANDLER);
+				textDisplay.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE, textDisplay_softKeyboardDeactivateHandler);
+			}
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function measure():void
+		{
+			super.measure();
+			
+			var paddingLeft:Number = getStyle("paddingLeft");
+			var paddingRight:Number = getStyle("paddingRight");
+			var paddingTop:Number = getStyle("paddingTop");
+			var paddingBottom:Number = getStyle("paddingBottom");
+			var textHeight:Number = getStyle("fontSize") as Number;
+			
+			if (textDisplay)
+			{
+				// temporarily change text for measurement
+				var oldText:String = textDisplay.text;
+				
+				// commit styles so we can get a valid textHeight
+				textDisplay.text = "Wj";
+				textDisplay.commitStyles();
+				
+				textHeight = textDisplay.measuredTextSize.y;
+				textDisplay.text = oldText;
+			}
+			
+			// width is based on maxChars (if set)
+			if (hostComponent && hostComponent.maxChars)
+			{
+				// Grab the fontSize and subtract 2 as the pixel value for each character.
+				// This is just an approximation, but it appears to be a reasonable one
+				// for most input and most font.
+				var characterWidth:int = Math.max(1, (getStyle("fontSize") - 2));
+				measuredWidth =  (characterWidth * hostComponent.maxChars) + 
+					paddingLeft + paddingRight + StyleableTextField.TEXT_WIDTH_PADDING;
+			}
+			
+			measuredHeight = paddingTop + textHeight + paddingBottom;
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			super.layoutContents(unscaledWidth, unscaledHeight);
+			
+			// position & size border
+			if (border)
+			{
+				setElementSize(border, unscaledWidth, unscaledHeight);
+				setElementPosition(border, 0, 0);
+			}
+			
+			// position & size the text
+			var paddingLeft:Number = getStyle("paddingLeft");
+			var paddingRight:Number = getStyle("paddingRight");
+			var paddingTop:Number = getStyle("paddingTop");
+			var paddingBottom:Number = getStyle("paddingBottom");
+			
+			var unscaledTextWidth:Number = unscaledWidth - paddingLeft - paddingRight;
+			var unscaledTextHeight:Number = unscaledHeight - paddingTop - paddingBottom;
+			
+			// default vertical positioning is centered
+			var textHeight:Number = getElementPreferredHeight(textDisplay);
+			var textY:Number = Math.round(0.5 * (unscaledTextHeight - textHeight)) + paddingTop;
+			
+			// On iOS the TextField top and bottom edges are bounded by the padding.
+			// On all other platforms, the height of the textDisplay is
+			// textHeight + paddingBottom to increase hitArea on bottom.
+			// Note: We don't move the Y position upwards because TextField
+			// has way to set vertical positioning.
+			// Note: iOS is a special case due to the clear button provided by the
+			// native text control used while editing.
+			var adjustedTextHeight:Number = (_isIOS && _isEditing) ? textHeight : textHeight + paddingBottom;
+			
+			if (textDisplay)
+			{
+				// We're going to do a few tricks to try to increase the size of our hitArea to make it 
+				// easier for users to select text or put the caret in a certain spot.  To do that, 
+				// rather than set textDisplay.x=paddingLeft,  we are going to set 
+				// textDisplay.leftMargin = paddingLeft.  In addition, we're going to size the height 
+				// of the textDisplay larger than just the size of the text inside to increase the hitArea
+				// on the bottom.  We'll also assign textDisplay.rightMargin = paddingRight to increase the 
+				// the hitArea on the right.  Unfortunately, there's no way to increase the hitArea on the top
+				// just yet, but these three tricks definitely help out with regards to user experience.  
+				// See http://bugs.adobe.com/jira/browse/SDK-29406 and http://bugs.adobe.com/jira/browse/SDK-29405
+				
+				// set leftMargin, rightMargin to increase the hitArea.  Need to set it before calling commitStyles().
+				var marginChanged:Boolean = ((textDisplay.leftMargin != paddingLeft) || 
+					(textDisplay.rightMargin != paddingRight));
+				
+				textDisplay.leftMargin = paddingLeft;
+				textDisplay.rightMargin = paddingRight;
+				
+				// need to force a styleChanged() after setting leftMargin, rightMargin if they 
+				// changed values.  Then we can validate the styles through commitStyles()
+				if (marginChanged)
+					textDisplay.styleChanged(null);
+				textDisplay.commitStyles();
+				
+				setElementSize(textDisplay, unscaledWidth, adjustedTextHeight);
+				
+				// set x=0 since we're using textDisplay.leftMargin = paddingLeft
+				setElementPosition(textDisplay, 0, textY);
+			}
+			
+			if (promptDisplay)
+			{
+				promptDisplay.commitStyles();
+				setElementSize(promptDisplay, unscaledTextWidth, adjustedTextHeight);
+				setElementPosition(promptDisplay, paddingLeft, textY);
+			}
+		}
+		
+		override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			super.drawBackground(unscaledWidth, unscaledHeight);
+			
+			var contentBackgroundColor:uint = getStyle("contentBackgroundColor");
+			var contentBackgroundAlpha:Number = getStyle("contentBackgroundAlpha");	
+			//change border color and thickness when in focus
+			var borderColor:uint = isFocused ? getStyle("focusColor") : getStyle("borderColor");
+			var borderWidth:uint = layoutBorderSize * 2;
+			if (isNaN(contentBackgroundAlpha))
+			{
+				contentBackgroundAlpha = 1;
+			}        
+			if (getStyle("contentBackgroundBorder") == "roundedrect")
+			{		
+				graphics.lineStyle(layoutBorderSize, borderColor, 1, true);
+				graphics.beginFill(contentBackgroundColor, contentBackgroundAlpha);
+				graphics.drawRoundRectComplex(layoutBorderSize, layoutBorderSize, unscaledWidth - borderWidth, unscaledHeight - borderWidth, roundheight, roundheight, roundheight, roundheight);
+				graphics.endFill();
+			}
+			if (getStyle("contentBackgroundBorder") == "rectangle")
+			{
+				
+				//rectangle border and background
+				graphics.lineStyle(layoutBorderSize, borderColor, 1);
+				graphics.beginFill(contentBackgroundColor, contentBackgroundAlpha);
+				graphics.drawRect(layoutBorderSize, layoutBorderSize, unscaledWidth - borderWidth, unscaledHeight - borderWidth);
+				graphics.endFill();
+			}
+			else if (getStyle("contentBackgroundBorder") == "none")
+			{
+				
+				//rectangle border and background
+				graphics.beginFill(contentBackgroundColor, contentBackgroundAlpha);
+				graphics.drawRect(0, 0, unscaledWidth - borderWidth, unscaledHeight - borderWidth);
+				graphics.endFill();
+			}
+		}
+		
+		/**
+		 *  @private
+		 */
+		private function editableChangedHandler(event:Event):void
+		{
+			invalidateDisplayList();
+		}
+		
+		/**
+		 *  @private
+		 *  The text changed in some way.
+		 * 
+		 *  Dynamic fields (ie !editable) with no text measure with width=0 and height=0.
+		 *  If the text changed, need to remeasure the text to get the correct height so it
+		 *  will be laid out correctly.
+		 */
+		private function valueCommitHandler(event:Event):void
+		{
+			if (textDisplay && !textDisplay.editable)
+				invalidateDisplayList();
+		}
+		
+		/**
+		 *  @private
+		 */
+		private function textDisplay_softKeyboardActivatingHandler(event:SoftKeyboardEvent):void
+		{
+			if (event.isDefaultPrevented())
+				return;
+			
+			_isEditing = true;
+			invalidateDisplayList();
+		}
+		
+		/**
+		 *  @private
+		 */
+		private function textDisplay_softKeyboardDeactivateHandler(event:SoftKeyboardEvent):void
+		{
+			_isEditing = false;
+			invalidateDisplayList();
+		}
+		
+		private function focusChangeHandler(event:FocusEvent):void
+		{
+			isFocused = event.type == FocusEvent.FOCUS_IN;
+			invalidateDisplayList();		
+		}
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/ToggleSwitchSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/ToggleSwitchSkin.as
new file mode 100644
index 0000000..4d543a7
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/ToggleSwitchSkin.as
@@ -0,0 +1,451 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+	
+	import flash.display.BlendMode;
+	import flash.events.Event;
+	
+	import mx.core.DPIClassification;
+	import mx.core.IVisualElement;
+	import mx.core.UIComponent;
+	
+	import spark.components.ToggleSwitch;
+	import spark.components.supportClasses.StyleableTextField;
+	import spark.core.SpriteVisualElement;
+	import spark.skins.ios7.assets.ToggleSwitchBackground_off;
+	import spark.skins.ios7.assets.ToggleSwitchBackground_on;
+	import spark.skins.mobile.supportClasses.MobileSkin;
+	
+	
+	/**
+	 *  ActionScript-based iOS7+ specific skin for the ToggleSwitch control. 
+	 *  This class is responsible for most of the 
+	 *  graphics drawing, with additional fxg assets.
+	 *  
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion AIR 3
+	 *  @productversion Flex 4.6
+	 *
+	 *  @see spark.components.ToggleSwitch 
+	 */
+	public class ToggleSwitchSkin extends MobileSkin
+	{
+		//----------------------------------------------------------------------------------------------
+		//
+		//  Skin parts
+		//
+		//----------------------------------------------------------------------------------------------
+		
+		/**
+		 *  The thumb skin part.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */		
+		public var thumb:IVisualElement;
+		/**
+		 *  The track skin part.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		public var track:IVisualElement;
+		
+		//----------------------------------
+		//  hostComponent
+		//----------------------------------
+		
+		private var _hostComponent:ToggleSwitch;
+		//The label is called selectedLabelDisplay because the hostComponent expects it
+		public var selectedLabelDisplay:LabelDisplayComponent;
+		
+		/**
+		 * @copy spark.skins.spark.ApplicationSkin#hostComponent
+		 */
+		public function get hostComponent():ToggleSwitch
+		{
+			return _hostComponent;
+		}
+		
+		public function set hostComponent(value:ToggleSwitch):void 
+		{
+			if (_hostComponent)
+				_hostComponent.removeEventListener("thumbPositionChanged", thumbPositionChanged_handler);
+			_hostComponent = value;
+			if (_hostComponent)
+				_hostComponent.addEventListener("thumbPositionChanged", thumbPositionChanged_handler);
+		}
+		
+		/**
+		 *  The contents inside the skin, not including the outline
+		 *  stroke
+		 */
+		private var contents:UIComponent;
+		private var switchTrackOn:Class;
+		private var switchTrackOff:Class;
+		private var switchOff:Class;
+		private var switchOn:Class;
+		protected var trackWidth:Number;
+		protected var trackHeight:Number;
+		protected var layoutThumbWidth:Number;
+		protected var layoutThumbHeight:Number;
+		private var thumbOn:IVisualElement;
+		private var thumbOff:IVisualElement;
+		private var trackOn:IVisualElement;
+		private var trackOff:IVisualElement;
+		
+		public function ToggleSwitchSkin()
+		{
+			super();
+			
+			switchTrackOn = spark.skins.ios7.assets.ToggleSwitchBackground_on;
+			switchTrackOff = spark.skins.ios7.assets.ToggleSwitchBackground_off;
+			switchOn = spark.skins.ios7.assets.ToggleSwitchThumb_on;
+			switchOff = spark.skins.ios7.assets.ToggleSwitchThumb_off;
+			
+			switch(applicationDPI) 
+			{	
+				case DPIClassification.DPI_640:
+				{
+					layoutThumbWidth = 108;
+					layoutThumbHeight = 108;
+					trackWidth = 224;
+					trackHeight = 124;
+					break;
+				}
+				case DPIClassification.DPI_480:
+				{
+					layoutThumbWidth = 80;
+					layoutThumbHeight = 80;
+					trackWidth = 168;
+					trackHeight = 92;
+					break;
+				}		
+				case DPIClassification.DPI_320:
+				{
+					layoutThumbWidth = 54;
+					layoutThumbHeight = 54;
+					trackWidth = 112;
+					trackHeight = 62;
+					break;
+				}
+				case DPIClassification.DPI_240:
+				{
+					layoutThumbWidth = 40;
+					layoutThumbHeight = 40;
+					trackWidth = 84;
+					trackHeight = 46;
+					break;
+				}
+				case DPIClassification.DPI_120:
+				{
+					layoutThumbWidth = 20;
+					layoutThumbHeight = 20;
+					trackWidth = 42;
+					trackHeight = 23;
+					break;
+				}
+				default:
+				{
+					layoutThumbWidth = 27;
+					layoutThumbHeight = 27;
+					trackWidth = 56;
+					trackHeight = 31;
+					break;
+				}
+			}
+			
+		}
+		
+		override protected function createChildren():void
+		{
+			super.createChildren();
+			contents = new UIComponent();
+			addChild(contents);
+			drawTracks();
+			drawThumbs();
+		}
+		
+		override protected function measure():void 
+		{
+			// The skin must be at least as large as the thumb
+			measuredMinWidth = trackWidth;
+			measuredMinHeight = trackHeight;
+			
+			measuredWidth = trackWidth;
+			measuredHeight = trackHeight;
+		}
+		
+		override protected function commitCurrentState():void
+		{
+			toggleSelectionState();
+			layoutThumbs();
+		}
+		
+		//Draw both thumbs.  Set skinpart track to be switchTrackOff because default 
+		//state of the switch is OFF
+		protected function drawTracks():void
+		{
+			drawTrackOff();
+			drawTrackOn();
+			if(track == null)
+			{
+				track = trackOff;
+			}
+		}
+		
+		//Draw the track behind everything else
+		protected function drawTrackOn():void
+		{
+			trackOn = new switchTrackOn();
+			trackOn.width = trackWidth;
+			trackOn.height = trackHeight;
+			contents.addChildAt(SpriteVisualElement(trackOn),0);
+		}
+		
+		protected function drawTrackOff():void
+		{
+			trackOff = new switchTrackOff();
+			trackOff.width = trackWidth;
+			trackOff.height = trackHeight;
+			contents.addChildAt(SpriteVisualElement(trackOff),0);
+		}
+		
+		//Draw both thumbs.  Set skinpart thumb to be thumbOff because default state of the switch is OFF
+		protected function drawThumbs():void
+		{
+			drawThumbOff();
+			drawThumbOn();
+			if(thumb == null)
+			{
+				thumb = thumbOff;
+			}
+		}
+		
+		//Thumb ON the right side; Thumb OFF is on the left side
+		protected function layoutThumbs():void
+		{
+			setElementPosition(thumbOn,trackWidth/2,trackHeight/2 - thumbOn.height/2);
+			setElementPosition(thumbOff,0,trackHeight/2 - thumbOff.height/2);
+		}
+		
+		//Depending on current state, set skinpart thumb accordingly
+		protected function toggleSelectionState():void
+		{
+			if(currentState.indexOf("AndSelected") != -1)
+			{
+				thumbOn.visible = true;
+				thumbOff.visible = false;
+				thumb = thumbOn;
+				trackOn.visible = true;
+				trackOff.visible = false;
+				track = trackOn;
+			}
+			else
+			{
+				thumbOff.visible = true;
+				thumbOn.visible = false;
+				thumb = thumbOff;
+				trackOff.visible = true;
+				trackOn.visible = false;
+				track = trackOff;
+			}
+		}
+		
+		protected function drawThumbOn():void
+		{
+			thumbOn = new switchOn();
+			thumbOn.width = layoutThumbWidth;
+			thumbOn.height = layoutThumbHeight;
+			contents.addChildAt(SpriteVisualElement(thumbOn),2);
+		}
+		
+		protected function drawThumbOff():void
+		{
+			thumbOff = new switchOff();
+			thumbOff.width = layoutThumbWidth;
+			thumbOff.height = layoutThumbHeight;
+			contents.addChildAt(SpriteVisualElement(thumbOff),2);
+		}
+		
+		//Hostcomponent dispatches this event whenever the thumb position changes	
+		protected function thumbPositionChanged_handler(event:Event):void
+		{
+			moveSlidingContent();
+		}
+		
+		//Move the current thumb and label along with the animating content 
+		protected function moveSlidingContent():void 
+		{
+			if (!hostComponent)
+				return;
+			var x:Number = (track.getLayoutBoundsWidth() - thumb.getLayoutBoundsWidth()) * 
+				hostComponent.thumbPosition + track.getLayoutBoundsX();
+			var y:Number = thumb.getLayoutBoundsY();
+			setElementPosition(thumb, x, y);
+		}
+	}
+}
+
+
+import flash.events.Event;
+
+import mx.core.UIComponent;
+import mx.core.mx_internal;
+import mx.events.FlexEvent;
+
+import spark.components.supportClasses.StyleableTextField;
+import spark.core.IDisplayText;
+
+use namespace mx_internal;
+
+/**
+ *  @private
+ *  Component combining two labels to create the effect of text and its drop
+ *  shadow. The component can be used with advanced style selectors and the
+ *  styles "color", "textShadowColor", and "textShadowAlpha". Based off of
+ *  ActionBar.TitleDisplayComponent. These two should eventually be factored.
+ */
+class LabelDisplayComponent extends UIComponent implements IDisplayText
+{
+	public var shadowYOffset:Number = 0;
+	private var labelChanged:Boolean = false;
+	private var labelDisplay:StyleableTextField;
+	private var labelDisplayShadow:StyleableTextField;
+	private var _text:String;
+	
+	public function LabelDisplayComponent() 
+	{
+		super();
+		_text = "";
+	}
+	
+	override public function get baselinePosition():Number 
+	{
+		return labelDisplay.baselinePosition;
+	}
+	
+	override protected function createChildren():void 
+	{
+		super.createChildren();
+		
+		labelDisplay = StyleableTextField(createInFontContext(StyleableTextField));
+		labelDisplay.styleName = this;
+		labelDisplay.editable = false;
+		labelDisplay.selectable = false;
+		labelDisplay.multiline = false;
+		labelDisplay.wordWrap = false;
+		labelDisplay.addEventListener(FlexEvent.VALUE_COMMIT,
+			labelDisplay_valueCommitHandler);
+		
+		labelDisplayShadow = StyleableTextField(createInFontContext(StyleableTextField));
+		labelDisplayShadow.styleName = this;
+		labelDisplayShadow.colorName = "textShadowColor";
+		labelDisplayShadow.editable = false;
+		labelDisplayShadow.selectable = false;
+		labelDisplayShadow.multiline = false;
+		labelDisplayShadow.wordWrap = false;
+		
+		addChild(labelDisplayShadow);
+		addChild(labelDisplay);
+	}
+	
+	override protected function commitProperties():void 
+	{
+		super.commitProperties();
+		
+		if (labelChanged)
+		{
+			labelDisplay.text = text;
+			invalidateSize();
+			invalidateDisplayList();
+			labelChanged = false;
+		}
+	}
+	
+	override protected function measure():void 
+	{
+		if (labelDisplay.isTruncated)
+			labelDisplay.text = text;
+		labelDisplay.commitStyles();
+		measuredWidth = labelDisplay.getPreferredBoundsWidth();
+		measuredHeight = labelDisplay.getPreferredBoundsHeight();
+	}
+	
+	override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
+	{
+		if (labelDisplay.isTruncated)
+			labelDisplay.text = text;
+		labelDisplay.commitStyles();
+		
+		var labelHeight:Number = labelDisplay.getPreferredBoundsHeight();
+		var labelY:Number = (unscaledHeight - labelHeight) / 2;
+		
+		var labelWidth:Number = Math.min(unscaledWidth, labelDisplay.getPreferredBoundsWidth());
+		var labelX:Number = (unscaledWidth - labelWidth) / 2;
+		
+		labelDisplay.setLayoutBoundsSize(labelWidth, labelHeight);
+		labelDisplay.setLayoutBoundsPosition(labelX, labelY);
+		
+		labelDisplay.truncateToFit();
+		
+		labelDisplayShadow.commitStyles();
+		labelDisplayShadow.setLayoutBoundsSize(labelWidth, labelHeight);
+		labelDisplayShadow.setLayoutBoundsPosition(labelX, labelY + shadowYOffset);
+		
+		labelDisplayShadow.alpha = getStyle("textShadowAlpha");
+		
+		// unless the label was truncated, labelDisplayShadow.text was set in
+		// the value commit handler
+		if (labelDisplay.isTruncated)
+			labelDisplayShadow.text = labelDisplay.text;
+	}
+	
+	private function labelDisplay_valueCommitHandler(event:Event):void 
+	{
+		labelDisplayShadow.text = labelDisplay.text;
+	}
+	
+	public function get text():String 
+	{
+		return _text;
+	}
+	
+	public function set text(value:String):void 
+	{
+		_text = value;
+		labelChanged = true;
+		invalidateProperties();
+	}
+	
+	public function get isTruncated():Boolean 
+	{
+		return labelDisplay.isTruncated;
+	}
+	
+	public function showShadow(value:Boolean):void 
+	{
+		labelDisplayShadow.visible = value;
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/TransparentActionButtonSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/TransparentActionButtonSkin.as
new file mode 100644
index 0000000..b88042a
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/TransparentActionButtonSkin.as
@@ -0,0 +1,108 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+import flash.display.DisplayObject;
+import flash.display.Graphics;
+
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+
+import spark.skins.mobile.assets.TransparentActionButton_down;
+import spark.skins.mobile.assets.TransparentActionButton_up;
+import spark.skins.mobile.supportClasses.ActionBarButtonSkinBase;
+import spark.skins.mobile.supportClasses.MobileSkin;
+import spark.skins.mobile320.assets.TransparentActionButton_down;
+import spark.skins.mobile320.assets.TransparentActionButton_up;
+import spark.skins.mobile480.assets.TransparentActionButton_down;
+import spark.skins.mobile480.assets.TransparentActionButton_up;
+import spark.skins.mobile640.assets.TransparentActionButton_down;
+import spark.skins.mobile640.assets.TransparentActionButton_up;
+
+use namespace mx_internal;
+
+/**
+ *  The default skin class for buttons in the action area of the Spark ActionBar component 
+ *  in mobile applications.  
+ *  
+ *  @langversion 3.0
+ *  @playerversion AIR 2.5
+ *  @productversion Flex 4.5
+ */
+public class TransparentActionButtonSkin extends ActionBarButtonSkinBase
+{
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------
+    /**
+     *  Constructor.
+     *  
+     *  @langversion 3.0
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    public function TransparentActionButtonSkin()
+    {
+        super();
+        
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_640:
+			{
+				upBorderSkin = spark.skins.mobile640.assets.TransparentActionButton_up;
+				downBorderSkin = spark.skins.mobile640.assets.TransparentActionButton_down;
+				
+				break;
+			}
+			case DPIClassification.DPI_480:
+			{
+				upBorderSkin = spark.skins.mobile480.assets.TransparentActionButton_up;
+				downBorderSkin = spark.skins.mobile480.assets.TransparentActionButton_down;
+				
+				break;
+			}
+            case DPIClassification.DPI_320:
+            {
+                upBorderSkin = spark.skins.mobile320.assets.TransparentActionButton_up;
+                downBorderSkin = spark.skins.mobile320.assets.TransparentActionButton_down;
+                
+                break;
+            }
+            default:
+            {
+                upBorderSkin = spark.skins.mobile.assets.TransparentActionButton_up;
+                downBorderSkin = spark.skins.mobile.assets.TransparentActionButton_down;
+                
+                break;
+            }
+        }
+    }
+    
+    override mx_internal function layoutBorder(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        // don't call super, don't layout twice
+        // leading vertical separator is outside the left bounds of the button
+        setElementSize(border, unscaledWidth + layoutBorderSize, unscaledHeight);
+        setElementPosition(border, -layoutBorderSize, 0);
+    }
+}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/TransparentNavigationButtonSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/TransparentNavigationButtonSkin.as
new file mode 100644
index 0000000..6eccad4
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/TransparentNavigationButtonSkin.as
@@ -0,0 +1,109 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+import flash.display.DisplayObject;
+import flash.display.Graphics;
+
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+
+import spark.skins.mobile.assets.TransparentNavigationButton_down;
+import spark.skins.mobile.assets.TransparentNavigationButton_up;
+import spark.skins.mobile.supportClasses.ActionBarButtonSkinBase;
+import spark.skins.mobile.supportClasses.MobileSkin;
+import spark.skins.mobile320.assets.TransparentNavigationButton_down;
+import spark.skins.mobile320.assets.TransparentNavigationButton_up;
+import spark.skins.mobile480.assets.TransparentNavigationButton_down;
+import spark.skins.mobile480.assets.TransparentNavigationButton_up;
+import spark.skins.mobile640.assets.TransparentNavigationButton_down;
+import spark.skins.mobile640.assets.TransparentNavigationButton_up;
+
+use namespace mx_internal;
+
+/**
+ *  The default skin class for buttons in the navigation area of the Spark ActionBar component 
+ *  in mobile applications.  
+ * 
+ *  @langversion 3.0
+ *  @playerversion AIR 2.5 
+ *  @productversion Flex 4.5
+ */
+public class TransparentNavigationButtonSkin extends ActionBarButtonSkinBase
+{   
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------
+    /**
+     *  Constructor.
+     * 
+     *  @langversion 3.0
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     * 
+     */
+    public function TransparentNavigationButtonSkin()
+    {
+        super();
+        
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_640:
+			{
+				upBorderSkin = spark.skins.mobile640.assets.TransparentActionButton_up;
+				downBorderSkin = spark.skins.mobile640.assets.TransparentActionButton_down;
+				
+				break;
+			}
+			case DPIClassification.DPI_480:
+			{
+				upBorderSkin = spark.skins.mobile480.assets.TransparentActionButton_up;
+				downBorderSkin = spark.skins.mobile480.assets.TransparentActionButton_down;
+				
+				break;
+			}
+            case DPIClassification.DPI_320:
+            {
+                upBorderSkin = spark.skins.mobile320.assets.TransparentNavigationButton_up;
+                downBorderSkin = spark.skins.mobile320.assets.TransparentNavigationButton_down;
+                
+                break;
+            }
+            default:
+            {
+                upBorderSkin = spark.skins.mobile.assets.TransparentNavigationButton_up;
+                downBorderSkin = spark.skins.mobile.assets.TransparentNavigationButton_down;
+                
+                break;
+            }
+        }
+    }
+    
+    override mx_internal function layoutBorder(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        // trailing vertical separator is outside the right bounds of the button
+        setElementSize(border, unscaledWidth + layoutBorderSize, unscaledHeight);
+        setElementPosition(border, 0, 0);
+    }
+}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/VScrollBarSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/VScrollBarSkin.as
new file mode 100644
index 0000000..8b86965
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/VScrollBarSkin.as
@@ -0,0 +1,207 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+
+import spark.components.Button;
+import spark.components.VScrollBar;
+import spark.skins.mobile.supportClasses.MobileSkin;
+
+use namespace mx_internal;
+
+/**
+ *  ActionScript-based skin for VScrollBar components in mobile applications. 
+ * 
+ *  @langversion 3.0
+ *  @playerversion Flash 10
+ *  @playerversion AIR 2.5 
+ *  @productversion Flex 4.5
+ */
+public class VScrollBarSkin extends MobileSkin
+{
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------
+    /**
+     *  Constructor.
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     * 
+     */
+    public function VScrollBarSkin()
+    {
+        super();
+        
+        minHeight = 20;
+        thumbSkinClass = VScrollBarThumbSkin;
+        var paddingRight:int;
+        var paddingVertical:int;
+        
+        // Depending on density set our measured width
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_640:
+			{
+				minWidth = 24;
+				paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_640DPI;
+				paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_640DPI;
+				break;
+			}
+			case DPIClassification.DPI_480:
+			{
+				minWidth = 16;
+				paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_480DPI;
+				paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_480DPI;
+				break;
+			}
+            case DPIClassification.DPI_320:
+            {
+                minWidth = 12;
+                paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_320DPI;
+                paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_320DPI;
+                break;
+            }
+			case DPIClassification.DPI_240:
+			{
+				minWidth = 8;
+				paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_240DPI;
+				paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_240DPI;
+				break;
+			}
+			case DPIClassification.DPI_120:
+			{
+				minWidth = 4;
+				paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_120DPI;
+				paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_120DPI;
+				break;
+			}
+            default:
+            {
+                // default DPI_160
+                minWidth = 6;
+                paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_DEFAULTDPI;
+                paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_DEFAULTDPI;
+                break;
+            }
+        }
+        
+        // The minimum height is set such that, at it's smallest size, the thumb appears
+        // as high as it is wide.
+        minThumbHeight = (minWidth - paddingRight) + (paddingVertical * 2);   
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Variables
+    //
+    //--------------------------------------------------------------------------
+    
+    /** 
+     *  @copy spark.skins.spark.ApplicationSkin#hostComponent
+     */
+    public var hostComponent:VScrollBar;
+    
+    /**
+     *  Minimum height for the thumb
+     */
+    protected var minThumbHeight:Number;
+    
+    /**
+     *  Skin to use for the thumb Button skin part
+     */
+    protected var thumbSkinClass:Class;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Skin parts 
+    //
+    //--------------------------------------------------------------------------
+    /**
+     *  VScrollbar track skin part
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     */   
+    public var track:Button;
+    
+    /**
+     *  VScrollbar thumb skin part
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     */  
+    public var thumb:Button;
+    
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods
+    //
+    //--------------------------------------------------------------------------
+    /**
+     *  @private 
+     */
+    override protected function createChildren():void
+    {
+        // Create our skin parts if necessary: track and thumb.
+        if (!track)
+        {
+            // We don't want a visible track so we set the skin to MobileSkin
+            track = new Button();
+            track.setStyle("skinClass", spark.skins.mobile.supportClasses.MobileSkin);
+            track.width = minWidth;
+            track.height = minHeight;
+            addChild(track);
+        }
+        if (!thumb)
+        {
+            thumb = new Button();
+            thumb.minHeight = minThumbHeight; 
+            thumb.setStyle("skinClass", thumbSkinClass);
+            thumb.width = minWidth;
+            thumb.height = minWidth;
+            addChild(thumb);
+        }
+    }
+    
+    /**
+     *  @private 
+     */
+    override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.layoutContents(unscaledWidth, unscaledHeight);
+        
+        setElementSize(track, unscaledWidth, unscaledHeight);
+    }
+}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/VScrollBarThumbSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/VScrollBarThumbSkin.as
new file mode 100644
index 0000000..96b74e3
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/VScrollBarThumbSkin.as
@@ -0,0 +1,186 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+
+import flash.display.CapsStyle;
+import flash.display.JointStyle;
+import flash.display.LineScaleMode;
+
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+use namespace mx_internal;
+
+import spark.components.Button;
+import spark.skins.mobile.supportClasses.MobileSkin;
+
+/**
+ *  ActionScript-based skin for the VScrollBar thumb skin part in mobile applications. 
+ * 
+ *  @langversion 3.0
+ *  @playerversion Flash 10
+ *  @playerversion AIR 2.5 
+ *  @productversion Flex 4.5
+ */
+public class VScrollBarThumbSkin extends MobileSkin 
+{
+    //--------------------------------------------------------------------------
+    //
+    //  Class constants
+    //
+    //--------------------------------------------------------------------------
+    
+    // These constants are also accessed from VScrollBarSkin
+	mx_internal static const PADDING_RIGHT_640DPI:int = 10;
+	mx_internal static const PADDING_VERTICAL_640DPI:int = 8;
+	mx_internal static const PADDING_RIGHT_480DPI:int = 8;
+	mx_internal static const PADDING_VERTICAL_480DPI:int = 6;
+    mx_internal static const PADDING_RIGHT_320DPI:int = 5;
+    mx_internal static const PADDING_VERTICAL_320DPI:int = 4;
+	mx_internal static const PADDING_RIGHT_240DPI:int = 4;
+	mx_internal static const PADDING_VERTICAL_240DPI:int = 3;
+	mx_internal static const PADDING_RIGHT_120DPI:int = 2;
+	mx_internal static const PADDING_VERTICAL_120DPI:int = 1;
+    mx_internal static const PADDING_RIGHT_DEFAULTDPI:int = 3;
+    mx_internal static const PADDING_VERTICAL_DEFAULTDPI:int = 2;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //-------------------------------------------------------------------------- 
+    /**
+     *  Constructor.
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     * 
+     */
+    public function VScrollBarThumbSkin()
+    {
+        super();
+        
+        // Depending on density set padding
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_640:
+			{
+				minWidth = 19;
+				paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_640DPI;
+				paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_640DPI;
+				break;
+			}
+			case DPIClassification.DPI_480:
+			{
+				minWidth = 19;
+				paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_480DPI;
+				paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_480DPI;
+				break;
+			}
+            case DPIClassification.DPI_320:
+            {
+                paddingRight = PADDING_RIGHT_320DPI;
+                paddingVertical = PADDING_VERTICAL_320DPI;
+                break;
+            }
+            case DPIClassification.DPI_240:
+            {
+                paddingRight = PADDING_RIGHT_240DPI;
+                paddingVertical = PADDING_VERTICAL_240DPI;
+                break;
+            }
+            case DPIClassification.DPI_120:
+            {
+                paddingRight = PADDING_RIGHT_120DPI;
+                paddingVertical = PADDING_VERTICAL_120DPI;
+                break;
+            }
+            default:
+            {
+                paddingRight = PADDING_RIGHT_DEFAULTDPI;
+                paddingVertical = PADDING_VERTICAL_DEFAULTDPI;
+                break;
+            }
+        }
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** 
+     * @copy spark.skins.spark.ApplicationSkin#hostComponent
+     */
+    public var hostComponent:Button;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Variables
+    //
+    //--------------------------------------------------------------------------	
+    /**
+     *  Padding from the right
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */ 
+    protected var paddingRight:int;
+    
+    /**
+     *  Vertical padding from top and bottom
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */ 
+    protected var paddingVertical:int;
+    
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods
+    //
+    //--------------------------------------------------------------------------	
+    
+    /**
+     *  @protected
+     */ 
+    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.drawBackground(unscaledWidth, unscaledHeight);
+
+        var thumbWidth:Number = unscaledWidth - paddingRight;
+        
+		var thumbColor:uint = getStyle("color"); 
+		
+        graphics.beginFill(thumbColor, 1);
+        graphics.drawRect(0.5, paddingVertical + 0.5,thumbWidth, unscaledHeight - 2 * paddingVertical);
+        
+        graphics.endFill();
+    }
+    
+}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/ViewMenuItemSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/ViewMenuItemSkin.as
new file mode 100644
index 0000000..77e5865
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/ViewMenuItemSkin.as
@@ -0,0 +1,238 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7
+{
+import flash.display.GradientType;
+import flash.display.Graphics;
+
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+
+import spark.components.IconPlacement;
+import spark.skins.mobile.assets.ViewMenuItem_down;
+import spark.skins.mobile.assets.ViewMenuItem_showsCaret;
+import spark.skins.mobile.assets.ViewMenuItem_up;
+import spark.skins.mobile.supportClasses.ButtonSkinBase;
+import spark.skins.mobile120.assets.ViewMenuItem_down;
+import spark.skins.mobile120.assets.ViewMenuItem_showsCaret;
+import spark.skins.mobile120.assets.ViewMenuItem_up;
+import spark.skins.mobile320.assets.ViewMenuItem_down;
+import spark.skins.mobile320.assets.ViewMenuItem_showsCaret;
+import spark.skins.mobile320.assets.ViewMenuItem_up;
+import spark.skins.mobile480.assets.ViewMenuItem_down;
+import spark.skins.mobile480.assets.ViewMenuItem_showsCaret;
+import spark.skins.mobile480.assets.ViewMenuItem_up;
+import spark.skins.mobile640.assets.ViewMenuItem_down;
+import spark.skins.mobile640.assets.ViewMenuItem_showsCaret;
+import spark.skins.mobile640.assets.ViewMenuItem_up;
+
+
+use namespace mx_internal;
+
+/**
+ *  Default skin for ViewMenuItem. Supports a label, icon and iconPlacement and draws a background.   
+ * 
+ *  @langversion 3.0
+ *  @playerversion Flash 10
+ *  @playerversion AIR 2.5 
+ *  @productversion Flex 4.5
+ */ 
+public class ViewMenuItemSkin extends ButtonSkin
+{
+    /**
+     *  Constructor.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    public function ViewMenuItemSkin()
+    {
+        super();
+        
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_640:
+			{
+				
+				upBorderSkin = spark.skins.mobile640.assets.ViewMenuItem_up;
+				downBorderSkin = spark.skins.mobile640.assets.ViewMenuItem_down;
+				showsCaretBorderSkin = spark.skins.mobile640.assets.ViewMenuItem_showsCaret;
+				
+				layoutGap = 24;
+				layoutPaddingLeft = 24;
+				layoutPaddingRight = 24;
+				layoutPaddingTop = 24;
+				layoutPaddingBottom = 24;
+				layoutBorderSize = 3;   
+				
+				break;
+			}
+			case DPIClassification.DPI_480:
+			{   
+				// Note provisional may need changes
+				upBorderSkin = spark.skins.mobile.assets.ViewMenuItem_up;
+				downBorderSkin = spark.skins.mobile.assets.ViewMenuItem_down;
+				showsCaretBorderSkin = spark.skins.mobile.assets.ViewMenuItem_showsCaret;
+				
+				layoutGap = 16;
+				layoutPaddingLeft = 16;
+				layoutPaddingRight = 16;
+				layoutPaddingTop = 16;
+				layoutPaddingBottom = 16;
+				layoutBorderSize = 2;
+				
+				break;
+				
+			}
+            case DPIClassification.DPI_320:
+            {
+                
+                upBorderSkin = spark.skins.mobile320.assets.ViewMenuItem_up;
+                downBorderSkin = spark.skins.mobile320.assets.ViewMenuItem_down;
+                showsCaretBorderSkin = spark.skins.mobile320.assets.ViewMenuItem_showsCaret;
+                
+                layoutGap = 12;
+                layoutPaddingLeft = 12;
+                layoutPaddingRight = 12;
+                layoutPaddingTop = 12;
+                layoutPaddingBottom = 12;
+                layoutBorderSize = 2;   
+                
+                
+                break;
+            }
+			case DPIClassification.DPI_240:
+			{   
+				upBorderSkin = spark.skins.mobile.assets.ViewMenuItem_up;
+				downBorderSkin = spark.skins.mobile.assets.ViewMenuItem_down;
+				showsCaretBorderSkin = spark.skins.mobile.assets.ViewMenuItem_showsCaret;
+				
+				layoutGap = 8;
+				layoutPaddingLeft = 8;
+				layoutPaddingRight = 8;
+				layoutPaddingTop = 8;
+				layoutPaddingBottom = 8;
+				layoutBorderSize = 1;
+				
+				break;
+				
+			}
+			case DPIClassification.DPI_120:
+			{   
+				upBorderSkin = spark.skins.mobile120.assets.ViewMenuItem_up;
+				downBorderSkin = spark.skins.mobile120.assets.ViewMenuItem_down;
+				showsCaretBorderSkin = spark.skins.mobile120.assets.ViewMenuItem_showsCaret;
+				
+				layoutGap = 4;
+				layoutPaddingLeft = 4;
+				layoutPaddingRight = 4;
+				layoutPaddingTop = 4;
+				layoutPaddingBottom = 4;
+				layoutBorderSize = 1;
+				
+				break;
+				
+			}
+            default:
+            {
+                upBorderSkin = spark.skins.mobile.assets.ViewMenuItem_up;
+                downBorderSkin = spark.skins.mobile.assets.ViewMenuItem_down;
+                showsCaretBorderSkin = spark.skins.mobile.assets.ViewMenuItem_showsCaret; 
+                
+                layoutGap = 6;
+                layoutPaddingLeft = 6;
+                layoutPaddingRight = 6;
+                layoutPaddingTop = 6;
+                layoutPaddingBottom = 6;
+                layoutBorderSize = 1;
+            }
+        }
+        
+    }
+    
+    /**
+     *  Class to use for the border in the showsCaret state.
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     *       
+     *  @default Button_down
+     */ 
+    protected var showsCaretBorderSkin:Class;
+    
+    /**
+     *  @private
+     */
+    override protected function getBorderClassForCurrentState():Class
+    {
+        var borderClass:Class = super.getBorderClassForCurrentState();
+        
+        if (currentState == "showsCaret")
+            borderClass = showsCaretBorderSkin;  
+        
+        return borderClass;
+    }
+    
+    /**
+     *  @private
+     */
+    override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        var iconPlacement:String = getStyle("iconPlacement");
+        useCenterAlignment = (iconPlacement == IconPlacement.LEFT)
+            || (iconPlacement == IconPlacement.RIGHT);
+        
+        super.layoutContents(unscaledWidth, unscaledHeight);
+    }
+    
+    /**
+     *  @private
+     */
+    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        // omit call to super.drawBackground(), drawRect instead
+        
+        if (currentState == "showsCaret" || currentState == "down")
+        {
+            graphics.beginFill(getStyle("focusColor"));
+        }
+        else
+        {
+            colorMatrix.createGradientBox(unscaledWidth, 
+                unscaledHeight, 
+                Math.PI / 2, 0, 0);
+            var chromeColor:uint = getStyle("chromeColor");
+            
+            graphics.beginGradientFill(GradientType.LINEAR,
+                [chromeColor, chromeColor],
+                [1.0, 1.0],
+                [0, 255],
+                colorMatrix);
+        }
+        graphics.drawRect(0,0,unscaledWidth,unscaledHeight);
+        graphics.lineStyle(0.5,0,0.2);
+		graphics.drawRect(0,unscaledHeight,unscaledWidth,0.5);
+        graphics.endFill();
+    }
+}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/ViewMenuSkin.mxml b/frameworks/projects/mobiletheme/src/spark/skins/ios7/ViewMenuSkin.mxml
new file mode 100644
index 0000000..67fd754
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/ViewMenuSkin.mxml
@@ -0,0 +1,183 @@
+<?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.
+
+-->
+
+
+<!--- The default skin class for a Spark ViewMenu in a mobile application.  
+
+@see spark.components.ViewMenu
+
+@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" 
+			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
+	
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.ViewMenu")]
+		]]>
+	</fx:Metadata> 
+	
+	<fx:Script fb:purpose="styling">
+		<![CDATA[
+			import mx.core.DPIClassification;
+			import mx.core.FlexGlobals;
+			import spark.effects.easing.Power;
+			
+			
+			/**
+			 * @private
+			 */
+			override protected function initializationComplete():void
+			{
+				useChromeColor = false;
+				super.initializationComplete();
+			}
+			
+			/**
+			 *  @copy spark.skins.mobile.supportClasses.MobileSkin#applicationDPI
+			 */
+			public function get applicationDPI():int
+			{
+				return FlexGlobals.topLevelApplication.applicationDPI;
+			}
+			
+			/**
+			 *  @private
+			 */
+			override protected function measure():void
+			{
+				super.measure();
+				
+				// not actually used in normal situations, but 
+				// is here to prevent bug 28950 if ViewMenu is misused
+				measuredHeight = 200;
+			}
+			
+			/**
+			 *  @private
+			 */
+			override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+			{
+				super.updateDisplayList(unscaledWidth, unscaledHeight);
+				
+				var strokeWeight:Number = (applicationDPI == DPIClassification.DPI_640 || applicationDPI == DPIClassification.DPI_480 || applicationDPI == DPIClassification.DPI_320) ? 2 : 1;
+				var separatorWeight:Number = 1;
+				
+				if (applicationDPI == DPIClassification.DPI_640)
+					separatorWeight = 6;
+				else if (applicationDPI == DPIClassification.DPI_480)
+					separatorWeight = 4;
+				else if (applicationDPI == DPIClassification.DPI_320)
+					separatorWeight = 3;
+				else if (applicationDPI == DPIClassification.DPI_240)
+					separatorWeight = 2;  
+				else if (applicationDPI == DPIClassification.DPI_120)
+					separatorWeight = 1;  
+				
+				contentGroup.top = strokeWeight + separatorWeight;
+				contentGroup.bottom = separatorWeight;
+				contentGroupLayout.gap = separatorWeight;
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="normal"                          stateGroups="openedGroup"/>
+		<s:State name="closed"                          stateGroups="closedGroup"/>
+		<s:State name="disabled"                        stateGroups="openedGroup"/>
+		<s:State name="normalAndLandscape"              stateGroups="openedGroup, landscapeGroup"/>
+		<s:State name="closedAndLandscape"              stateGroups="closedGroup, landscapeGroup"/>
+		<s:State name="disabledAndLandscape"            stateGroups="openedGroup, landscapeGroup" />
+	</s:states>
+	
+	<s:transitions>
+		<s:Transition fromState="closed" toState="normal" autoReverse="true">
+			<s:Parallel>
+				<s:Fade target="{chromeGroup}" duration="150" easer="{new Power(0.5, 3)}" /> 
+				<s:Move target="{chromeGroup}" duration="150" disableLayout="true"  easer="{new Power(0, 5)}"/>
+			</s:Parallel>
+		</s:Transition>
+		
+		<s:Transition fromState="closedAndLandscape" toState="normalAndLandscape" autoReverse="true">
+			<s:Parallel>
+				<s:Fade target="{chromeGroup}" duration="150" easer="{new Power(0.5, 3)}" /> 
+				<s:Move target="{chromeGroup}" duration="150" disableLayout="true"  easer="{new Power(0, 5)}"/>
+			</s:Parallel>
+		</s:Transition>
+		
+		<s:Transition fromState="normal" toState="closed" autoReverse="true">
+			<s:Parallel>
+				<s:Fade target="{chromeGroup}" duration="100"/> 
+				<s:Move target="{chromeGroup}" duration="100" disableLayout="true"/>
+			</s:Parallel>
+		</s:Transition>
+		
+		<s:Transition fromState="normalAndLandscape" toState="closedAndLandscape" autoReverse="true">
+			<s:Parallel>
+				<s:Fade target="{chromeGroup}" duration="100"/> 
+				<s:Move target="{chromeGroup}" duration="100" disableLayout="true"/>
+			</s:Parallel>
+		</s:Transition>
+	</s:transitions>
+	
+	<!-- The ViewMenu and its skin are sized to the application.
+	The menu chrome is a separate group that is anchored to the bottom of the skin. -->
+	
+	
+	<s:Group id="chromeGroup"
+			 left="0"
+			 right="0"
+			 top.closedGroup="{hostComponent.height - chromeGroup.height / 2}"
+			 bottom.openedGroup="0" 
+			 visible.closedGroup="false">
+		
+		<s:Rect id="backgroundRect" left="18" right="18" top="1" bottom="0">
+			<s:fill>
+				<s:SolidColor color="#FFFFFF" />
+			</s:fill>
+			<s:stroke>
+				<s:SolidColorStroke weight="0.5" alpha="0.2" />
+			</s:stroke>
+			<s:filters>
+				<s:DropShadowFilter alpha="0.5" />
+			</s:filters>
+		</s:Rect>
+		
+		<!--
+		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
+		-->
+		<!--- @copy spark.components.SkinnableContainer#contentGroup -->
+		<s:Group id="contentGroup" left="20" right="20" top="3" bottom="2" minWidth="0" minHeight="0">
+			<s:layout>
+				<s:VerticalLayout gap="-1" id="contentGroupLayout"  horizontalAlign="contentJustify" >
+				</s:VerticalLayout>
+			</s:layout>
+		</s:Group>    
+	</s:Group>
+</s:SparkSkin>
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ActionBarBackground.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ActionBarBackground.fxg
new file mode 100644
index 0000000..0322648
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ActionBarBackground.fxg
@@ -0,0 +1,61 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group>
+    <Path winding="nonZero" data="M640 129 0 129 0 0 640 0 640 129Z">
+      <fill>
+        <SolidColor color="#FFFFFF"/>
+      </fill>
+    </Path>
+    <Group>
+      <mask>
+        <Group>
+          <Path winding="nonZero" data="M640 128 0 128 0 0 640 0 640 128Z">
+            <fill>
+              <SolidColor color="#FFFFFF"/>
+            </fill>
+          </Path>
+        </Group>
+      </mask>
+      <Path winding="nonZero" data="M640 128 0 128 0 0 640 0 640 128Z">
+        <fill>
+          <SolidColor color="#F6F6F6"/>
+        </fill>
+      </Path>
+    </Group>
+    <Group y="128">
+      <mask>
+        <Group>
+          <Path winding="nonZero" data="M640 1 0 1 0 0 640 0 640 1Z">
+            <fill>
+              <SolidColor color="#FFFFFF"/>
+            </fill>
+          </Path>
+        </Group>
+      </mask>
+      <Path winding="nonZero" data="M640 1 0 1 0 0 640 0 640 1Z">
+        <fill>
+          <SolidColor color="#B2B2B2"/>
+        </fill>
+      </Path>
+    </Group>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/BusyIndicator.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/BusyIndicator.fxg
new file mode 100644
index 0000000..f6930b9
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/BusyIndicator.fxg
@@ -0,0 +1,217 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group>
+    <Group x="26">
+      <mask>
+        <Group>
+          <Path winding="nonZero" data="M4 14 0 14 0 0 4 0 4 14Z">
+            <fill>
+              <SolidColor color="#FFFFFF"/>
+            </fill>
+          </Path>
+        </Group>
+      </mask>
+      <Path winding="nonZero" data="M4 12C4 13.1006 3.09961 14 2 14 0.900391 14 0 13.1006 0 12L0 2C0 0.899414 0.900391 0 2 0 3.09961 0 4 0.899414 4 2L4 12Z">
+        <fill>
+          <SolidColor color="#EEEEEE"/>
+        </fill>
+      </Path>
+    </Group>
+    <Group x="12.4971" y="2.60596">
+      <mask>
+        <Group>
+          <Path winding="nonZero" data="M10.4639 12.1245 7 14.1245 0 2 3.46387 0 10.4639 12.1245Z">
+            <fill>
+              <SolidColor color="#FFFFFF"/>
+            </fill>
+          </Path>
+        </Group>
+      </mask>
+      <Path x="0.733521" y="0.733643" winding="nonZero" data="M8.73035 9.65894C9.28064 10.6121 8.95056 11.8411 7.99841 12.3909 7.04626 12.9407 5.81677 12.6121 5.26648 11.6589L0.266479 2.99878C-0.283813 2.04565 0.0462646 0.816162 0.998413 0.266357 1.95056 -0.283447 3.18005 0.0456543 3.73035 0.998779L8.73035&#xD;&#xA; 9.65894Z">
+        <fill>
+          <SolidColor color="#333333"/>
+        </fill>
+      </Path>
+    </Group>
+    <Group x="3.10596" y="11.8823">
+      <mask>
+        <Group>
+          <Path winding="nonZero" data="M14.1245 7.00049 12.1245 10.4644 0 3.46436 2 0 14.1245 7.00049Z">
+            <fill>
+              <SolidColor color="#FFFFFF"/>
+            </fill>
+          </Path>
+        </Group>
+      </mask>
+      <Path x="0.733643" y="0.733887" winding="nonZero" data="M11.6589 5.2666C12.6121 5.81689 12.9407 7.04639 12.3909 7.99854 11.8411 8.95068 10.6121 9.28076 9.65894 8.73047L0.998779 3.73047C0.0456543 3.18018 -0.283447 1.95068 0.266357 0.998047 0.816162 0.0458984 2.04517 -0.283691 2.99829 0.266602L11.6589&#xD;&#xA; 5.2666Z">
+        <fill>
+          <SolidColor color="#444444"/>
+        </fill>
+      </Path>
+    </Group>
+    <Group x="0.343262" y="25.3438">
+      <mask>
+        <Group>
+          <Path winding="nonZero" data="M14.0005 0 14.0005 4 0 4 0 0 14.0005 0Z">
+            <fill>
+              <SolidColor color="#FFFFFF"/>
+            </fill>
+          </Path>
+        </Group>
+      </mask>
+      <Path winding="nonZero" data="M12.0005 0C13.1011 0 14.0005 0.900391 14.0005 2 14.0005 3.09961 13.1011 4 12.0005 4L2.00049 4C0.899902 4 0 3.09961 0 1.99951 0 0.900391 0.899902 0.000488281 2 0.000488281L12.0005 0Z">
+        <fill>
+          <SolidColor color="#555555"/>
+        </fill>
+      </Path>
+    </Group>
+    <Group x="2.94922" y="32.3828">
+      <mask>
+        <Group>
+          <Path winding="nonZero" data="M12.125 0 14.125 3.46387 2 10.4639 0 7 12.125 0Z">
+            <fill>
+              <SolidColor color="#FFFFFF"/>
+            </fill>
+          </Path>
+        </Group>
+      </mask>
+      <Path x="0.733765" y="0.733215" winding="nonZero" data="M9.6593 0.266785C10.6124 -0.283997 11.8414 0.0460815 12.3912 0.99823 12.941 1.95135 12.6124 3.17987 11.6593 3.73065L2.99915 8.73065C2.04602 9.28046 0.81604 8.95135 0.266235 7.99823 -0.283569 7.04608 0.0460205 5.81757 0.998657 5.26678L9.6593 0.266785Z">
+        <fill>
+          <SolidColor color="#666666"/>
+        </fill>
+      </Path>
+    </Group>
+    <Group x="12.2256" y="38.1133">
+      <mask>
+        <Group>
+          <Path winding="nonZero" data="M7.00098 0 10.4648 2 3.46436 14.125 0 12.125 7.00098 0Z">
+            <fill>
+              <SolidColor color="#FFFFFF"/>
+            </fill>
+          </Path>
+        </Group>
+      </mask>
+      <Path x="0.734314" y="0.733459" winding="nonZero" data="M5.26666 0.998962C5.81647 0.0448608 7.04596 -0.283264 7.99811 0.266541 8.95074 0.816345 9.28082 2.04486 8.73053 2.99799L3.73053 11.6581C3.18024 12.6113 1.95026 12.9413 0.99762 12.3906 0.0454712 11.8408 -0.283142 10.6122 0.266174 9.65912L5.26666&#xD;&#xA; 0.998962Z">
+        <fill>
+          <SolidColor color="#777777"/>
+        </fill>
+      </Path>
+    </Group>
+    <Group x="25.6875" y="41">
+      <mask>
+        <Group>
+          <Path winding="nonZero" data="M0 0 4 0 4 14.001 0 14.001 0 0Z">
+            <fill>
+              <SolidColor color="#FFFFFF"/>
+            </fill>
+          </Path>
+        </Group>
+      </mask>
+      <Path winding="nonZero" data="M0 2C-0.000976563 0.899414 0.900391 0 2 0 3.09961 0 4 0.898438 4 1.99902L4 11.999C4 13.0996 3.09961 14.001 1.99902 14 0.899414 14 0.000976563 13.1006 0 12L0 2Z">
+        <fill>
+          <SolidColor color="#888888"/>
+        </fill>
+      </Path>
+    </Group>
+    <Group x="32.7266" y="38.2695">
+      <mask>
+        <Group>
+          <Path winding="nonZero" data="M0 2 3.46387 0 10.4648 12.125 7 14.125 0 2Z">
+            <fill>
+              <SolidColor color="#FFFFFF"/>
+            </fill>
+          </Path>
+        </Group>
+      </mask>
+      <Path x="0.732788" y="0.733398" winding="nonZero" data="M0.267212 2.99805C-0.284546 2.0459 0.0465088 0.816406 0.998657 0.266602 1.95178 -0.283203 3.1803 0.0449219 3.73108 0.998047L8.73108 9.6582C9.28088 10.6113 8.95178 11.8418 7.99866 12.3916 7.04553 12.9414 5.81799 12.6113 5.26721 11.6592L0.267212&#xD;&#xA; 2.99805Z">
+        <fill>
+          <SolidColor color="#999999"/>
+        </fill>
+      </Path>
+    </Group>
+    <Group x="38.457" y="32.6533">
+      <mask>
+        <Group>
+          <Path winding="nonZero" data="M0 3.46387 2 0 14.125 7 12.125 10.4648 0 3.46387Z">
+            <fill>
+              <SolidColor color="#FFFFFF"/>
+            </fill>
+          </Path>
+        </Group>
+      </mask>
+      <Path x="0.733398" y="0.73291" winding="nonZero" data="M0.998047 3.73096C0.0449219 3.18213 -0.283203 1.95166 0.266602 0.999512 0.816406 0.0463867 2.04492 -0.283691 2.99805 0.266113L11.6582 5.26611C12.6113 5.81689 12.9414 7.04736 12.3906 7.99951 11.8398 8.95264 10.6123 9.28076 9.65918 8.73096L0.998047&#xD;&#xA; 3.73096Z">
+        <fill>
+          <SolidColor color="#AAAAAA"/>
+        </fill>
+      </Path>
+    </Group>
+    <Group x="41.3438" y="25.6558">
+      <mask>
+        <Group>
+          <Path winding="nonZero" data="M0 4.00049 0 0.000488281 14.001 0 14.001 4.00049 0 4.00049Z">
+            <fill>
+              <SolidColor color="#FFFFFF"/>
+            </fill>
+          </Path>
+        </Group>
+      </mask>
+      <Path winding="nonZero" data="M1.99902 4.00049C0.899414 4.00146 0 3.1001 0 2.00098 0 0.900391 0.898438 0.000488281 1.99902 0L11.999 0C13.0996 0.000488281 14.001 0.900879 14 2.00098 13.999 3.10156 13.1006 3.99951 12 4.00049L1.99902 4.00049Z">
+        <fill>
+          <SolidColor color="#BBBBBB"/>
+        </fill>
+      </Path>
+    </Group>
+    <Group x="38.6133" y="12.1523">
+      <mask>
+        <Group>
+          <Path winding="nonZero" data="M2 10.4648 0 7.00098 12.125 0 14.125 3.46436 2 10.4648Z">
+            <fill>
+              <SolidColor color="#FFFFFF"/>
+            </fill>
+          </Path>
+        </Group>
+      </mask>
+      <Path x="0.733398" y="0.734619" winding="nonZero" data="M2.99805 8.73071C2.0459 9.28149 0.816406 8.95044 0.266602 7.99878 -0.283203 7.04565 0.0449219 5.81714 0.99707 5.26636L9.65723 0.266357C10.6113 -0.283447 11.8418 0.0456543 12.3906 0.998779 12.9404 1.95239 12.6113 3.17944 11.6592 3.73022L2.99805&#xD;&#xA; 8.73071Z">
+        <fill>
+          <SolidColor color="#CCCCCC"/>
+        </fill>
+      </Path>
+    </Group>
+    <Group x="32.9971" y="2.76123">
+      <mask>
+        <Group>
+          <Path winding="nonZero" data="M3.46387 14.1255 0 12.1255 7 0 10.4639 2 3.46387 14.1255Z">
+            <fill>
+              <SolidColor color="#FFFFFF"/>
+            </fill>
+          </Path>
+        </Group>
+      </mask>
+      <Path x="0.73291" y="0.73468" winding="nonZero" data="M3.73096 11.6594C3.18115 12.6125 1.95166 12.9406 0.999512 12.3913 0.0463867 11.8405 -0.283691 10.6125 0.266113 9.65936L5.26514 0.999207C5.81689 0.0460815 7.04736 -0.283997 7.99854 0.266785 8.95166 0.818054 9.28076 2.0451 8.73096 2.99823L3.73096&#xD;&#xA; 11.6594Z">
+        <fill>
+          <SolidColor color="#DDDDDD"/>
+        </fill>
+      </Path>
+    </Group>
+    <Path visible="false" winding="nonZero" data="M0 0 53 0 53 53 0 53 0 0Z"/>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarFirstButton_down.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarFirstButton_down.fxg
new file mode 100644
index 0000000..d7fc8a8
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarFirstButton_down.fxg
@@ -0,0 +1,29 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group scaleGridLeft="50" scaleGridRight="150" scaleGridTop="43.5" scaleGridBottom="14.5">
+    <Path data="M200 58 9 58C4.02881 58 0 53.9717 0 49L0 9C0 4.0293 4.02881 0 9 0L200 0 200 58Z">
+      <fill>
+        <SolidColor color="#007AFF"/>
+      </fill>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarFirstButton_selectedDown.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarFirstButton_selectedDown.fxg
new file mode 100644
index 0000000..110f940
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarFirstButton_selectedDown.fxg
@@ -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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group scaleGridLeft="29.75" scaleGridRight="89.25" scaleGridTop="36" scaleGridBottom="12">
+	<Path winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+	  <fill>
+		<SolidColor color="#DEDEDD"/>
+	  </fill>
+	</Path>
+    <Path alpha="0.5" winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+      <fill>
+        <SolidColor color="#33B5E5"/>
+      </fill>
+    </Path>
+    <Path y="42" winding="nonZero" data="M119 6 0 6 0 0 119 0 119 6Z">
+      <fill>
+        <SolidColor color="#33B5E5"/>
+      </fill>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarFirstButton_selectedUp.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarFirstButton_selectedUp.fxg
new file mode 100644
index 0000000..52b1a90
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarFirstButton_selectedUp.fxg
@@ -0,0 +1,34 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group scaleGridLeft="29.75" scaleGridRight="89.25" scaleGridTop="36" scaleGridBottom="12">
+    <Path winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+	  <fill>
+		<SolidColor color="#DEDEDD"/>
+	  </fill>
+	</Path>
+    <Path y="42" winding="nonZero" data="M119 6 0 6 0 0 119 0 119 6Z">
+      <fill>
+        <SolidColor color="#33B5E5"/>
+      </fill>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarFirstButton_up.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarFirstButton_up.fxg
new file mode 100644
index 0000000..bacd138
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarFirstButton_up.fxg
@@ -0,0 +1,29 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group scaleGridLeft="50" scaleGridRight="150" scaleGridTop="43.5" scaleGridBottom="14.5">
+    <Path winding="nonZero" data="M198 2 198 56 9 56C5.13965 56 2 52.8594 2 49L2 9C2 5.14063 5.13965 2 9 2L198 2M200 0 9 0C4.02881 0 0 4.0293 0 9L0 49C0 53.9717 4.02881 58 9 58L200 58 200 0Z">
+      <fill>
+        <SolidColor color="#007AFF"/>
+      </fill>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarLastButton_down.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarLastButton_down.fxg
new file mode 100644
index 0000000..656cce3
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarLastButton_down.fxg
@@ -0,0 +1,35 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group scaleGridLeft="50.5" scaleGridRight="151.5" scaleGridTop="43.5" scaleGridBottom="14.5">
+    <Path x="1" y="1" data="M0 56 0 0 192 0C196.411 0 200 3.58984 200 8L200 48C200 52.4111 196.411 56 192 56L0 56Z">
+      <fill>
+        <SolidColor color="#007AFF"/>
+      </fill>
+    </Path>
+    <Path winding="nonZero" data="M193 2C196.86 2 200 5.1416 200 9L200 49C200 52.8594 196.86 56 193 56L2 56 2 2 193 2M193 0 0 0 0 58 193 58C197.97 58 202 53.9717 202 49L202 9C202 4.0293 197.97 0 193 0">
+      <fill>
+        <SolidColor color="#007AFF"/>
+      </fill>
+    </Path>
+    <Path visible="false" winding="nonZero" data="M0 0 202 0 202 58 0 58 0 0Z"/>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarLastButton_up.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarLastButton_up.fxg
new file mode 100644
index 0000000..5dfab90
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarLastButton_up.fxg
@@ -0,0 +1,30 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group scaleGridLeft="59" scaleGridRight="177" scaleGridTop="43.5" scaleGridBottom="14.5">
+    <Path winding="nonZero" data="M227 2C230.86 2 234 5.1416 234 9L234 49C234 52.8594 230.86 56 227 56L2 56 2 2 227 2M227 0 0 0 0 58 227 58C231.97 58 236 53.9717 236 49L236 9C236 4.0293 231.97 0 227 0">
+      <fill>
+        <SolidColor color="#007AFF"/>
+      </fill>
+    </Path>
+    <Path visible="false" winding="nonZero" data="M0 0 236 0 236 58 0 58 0 0Z"/>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarMiddleButton_down.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarMiddleButton_down.fxg
new file mode 100644
index 0000000..b0ae67a
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarMiddleButton_down.fxg
@@ -0,0 +1,30 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group scaleGridLeft="50.5" scaleGridRight="151.5" scaleGridTop="43.5" scaleGridBottom="14.5">
+    <Path data="M202 58 0 58 0 0 202 0 202 58Z">
+      <fill>
+        <SolidColor color="#007AFF"/>
+      </fill>
+    </Path>
+    <Path visible="false" winding="nonZero" data="M0 0 202 0 202 58 0 58 0 0Z"/>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarMiddleButton_selectedDown.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarMiddleButton_selectedDown.fxg
new file mode 100644
index 0000000..ec37077
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarMiddleButton_selectedDown.fxg
@@ -0,0 +1,75 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group>
+    <Path winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+      <fill>
+        <SolidColor color="#DEDEDD"/>
+      </fill>
+    </Path>
+    <Group y="12" alpha="0.100006">
+      <Group>
+        <mask>
+          <Group>
+            <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+              <fill>
+                <SolidColor color="#FFFFFF"/>
+              </fill>
+            </Path>
+          </Group>
+        </mask>
+        <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+          <fill>
+            <SolidColor color="#333333"/>
+          </fill>
+        </Path>
+      </Group>
+    </Group>
+    <Group x="118" y="12" alpha="0.100006">
+      <Group>
+        <mask>
+          <Group>
+            <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+              <fill>
+                <SolidColor color="#FFFFFF"/>
+              </fill>
+            </Path>
+          </Group>
+        </mask>
+        <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+          <fill>
+            <SolidColor color="#333333"/>
+          </fill>
+        </Path>
+      </Group>
+    </Group>
+    <Path y="42" winding="nonZero" data="M119 6 0 6 0 0 119 0 119 6Z">
+      <fill>
+        <SolidColor color="#33B5E5"/>
+      </fill>
+    </Path>
+    <Path alpha="0.5" winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+      <fill>
+        <SolidColor color="#33B5E5"/>
+      </fill>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarMiddleButton_selectedUp.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarMiddleButton_selectedUp.fxg
new file mode 100644
index 0000000..88a4643
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarMiddleButton_selectedUp.fxg
@@ -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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group>
+    <Path winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+      <fill>
+        <SolidColor color="#DEDEDD"/>
+      </fill>
+    </Path>
+    <Group y="12" alpha="0.100006">
+      <Group>
+        <mask>
+          <Group>
+            <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+              <fill>
+                <SolidColor color="#FFFFFF"/>
+              </fill>
+            </Path>
+          </Group>
+        </mask>
+        <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+          <fill>
+            <SolidColor color="#333333"/>
+          </fill>
+        </Path>
+      </Group>
+    </Group>
+    <Group x="118" y="12" alpha="0.100006">
+      <Group>
+        <mask>
+          <Group>
+            <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+              <fill>
+                <SolidColor color="#FFFFFF"/>
+              </fill>
+            </Path>
+          </Group>
+        </mask>
+        <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+          <fill>
+            <SolidColor color="#333333"/>
+          </fill>
+        </Path>
+      </Group>
+    </Group>
+    <Path y="42" winding="nonZero" data="M119 6 0 6 0 0 119 0 119 6Z">
+      <fill>
+        <SolidColor color="#33B5E5"/>
+      </fill>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarMiddleButton_up.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarMiddleButton_up.fxg
new file mode 100644
index 0000000..0b95878
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ButtonBarMiddleButton_up.fxg
@@ -0,0 +1,30 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group scaleGridLeft="50.5" scaleGridRight="151.5" scaleGridTop="43.5" scaleGridBottom="14.5">
+    <Path winding="nonZero" data="M200 56 2 56 2 2 200 2 200 56ZM202 0 0 0 0 58 202 58 202 0Z">
+      <fill>
+        <SolidColor color="#007AFF"/>
+      </fill>
+    </Path>
+    <Path visible="false" winding="nonZero" data="M0 0 202 0 202 58 0 58 0 0Z"/>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/Button_down.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/Button_down.fxg
new file mode 100644
index 0000000..79a535c
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/Button_down.fxg
@@ -0,0 +1,73 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group>
+    <Path x="2.5" y="2.5" winding="nonZero" data="M184 39 0 39 0 0 184 0 184 39Z">
+      <stroke>
+        <SolidColorStroke weight="5" caps="none" miterLimit="10" color="#CDCCCC"/>
+      </stroke>
+    </Path>
+    <Group x="3" y="2">
+      <Path winding="nonZero" data="M184 39 0 39 0 0 184 0 184 39Z">
+        <fill>
+          <SolidColor color="#B3B3B3"/>
+        </fill>
+      </Path>
+    </Group>
+    <Group x="3" y="2" alpha="0.5">
+      <Group>
+        <mask>
+          <Group>
+            <Path winding="nonZero" data="M0 1 184 1 184 0 0 0 0 1Z">
+              <fill>
+                <SolidColor color="#FFFFFF"/>
+              </fill>
+            </Path>
+          </Group>
+        </mask>
+        <Path winding="nonZero" data="M184 1 0 1 0 0 184 0 184 1Z">
+          <fill>
+            <SolidColor color="#FFFFFF"/>
+          </fill>
+        </Path>
+      </Group>
+    </Group>
+    <Group x="3" y="2" alpha="0.199997">
+      <Group>
+        <mask>
+          <Group>
+            <Path winding="nonZero" data="M0 39 184 39 184 0 0 0 0 39Z">
+              <fill>
+                <SolidColor color="#FFFFFF"/>
+              </fill>
+            </Path>
+          </Group>
+        </mask>
+        <Path winding="nonZero" data="M183 0 183 38 0 38 0 39 184 39 184 0 183 0Z">
+          <fill>
+            <SolidColor color="#484849"/>
+          </fill>
+        </Path>
+      </Group>
+    </Group>
+    <Path visible="false" winding="nonZero" data="M0 0 189 0 189 44 0 44 0 0Z"/>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/Button_up.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/Button_up.fxg
new file mode 100644
index 0000000..59854b1
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/Button_up.fxg
@@ -0,0 +1,29 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+	<Group alpha="0">
+		<Path winding="nonZero" data="M183 0 183 38 0 38 0 39 184 39 184 0 183 0Z">
+		  <fill>
+			<SolidColor color="#484849"/>
+		  </fill>
+		</Path>
+	</Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/CalloutContentBackground.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/CalloutContentBackground.fxg
new file mode 100644
index 0000000..8442b96
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/CalloutContentBackground.fxg
@@ -0,0 +1,51 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008"
+	scaleGridLeft="12" scaleGridRight="588" scaleGridTop="30" scaleGridBottom="388">
+
+	<!-- invisible fix for scaling -->
+	<Rect x="0" y="399" width="600" height="1">
+		<fill>
+			<SolidColor color="#ffffff" alpha="0"/>
+		</fill>
+	</Rect>
+    
+	<!-- Content Shading Top -->
+	<Rect x="0" y="0" width="600" height="20"
+			topLeftRadiusX="10" topLeftRadiusY="10"
+			topRightRadiusX="10" topRightRadiusY="10">
+		<fill>
+			<LinearGradient  rotation="90">
+				<GradientEntry ratio="0" color="#000000" alpha="0.6"/>
+				<GradientEntry ratio="0.5" color="#000000" alpha="0"/>
+			</LinearGradient>
+		</fill>
+	</Rect>
+		
+	<!-- Content Highlight -->
+	<Rect x="1" y="1" width="598" height="398"
+			radiusX="10" radiusY="10">
+		<stroke>
+			<SolidColorStroke color="#FFFFFF" alpha="0.8"
+								weight="2"/>
+		</stroke>
+	</Rect>
+</Graphic>
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/CheckBox_up.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/CheckBox_up.fxg
new file mode 100644
index 0000000..89165c9
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/CheckBox_up.fxg
@@ -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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" viewHeight="32" viewWidth="32">
+  <Ellipse width="16" height="16" x="8" y="8">
+    <stroke>
+      <SolidColorStroke color="#CCCCCC" alpha="1" weight="1"/>
+    </stroke>
+  </Ellipse>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/CheckBox_upSelected.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/CheckBox_upSelected.fxg
new file mode 100644
index 0000000..6cb00f8
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/CheckBox_upSelected.fxg
@@ -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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" xmlns:fxg="http://ns.adobe.com/fxg/2008" xmlns:d="http://ns.adobe.com/fxg/2008/dt" viewHeight="32" viewWidth="32">
+  <Ellipse width="16" height="16" x="8" y="8">
+    <fill>
+      <SolidColor color="#167EFB" alpha="1"/>
+    </fill>
+  </Ellipse>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/CheckBox_upSymbolSelected.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/CheckBox_upSymbolSelected.fxg
new file mode 100644
index 0000000..3738ae5
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/CheckBox_upSymbolSelected.fxg
@@ -0,0 +1,36 @@
+<?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.
+
+-->
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group>
+    <Path x="8" y="8" 
+      data="
+        M 4 7.5 
+        L 3 8.5
+        L 6 11.25
+        L 12.25 5.25
+        L 11.25 4.25
+        L 6 9.5"
+      winding="nonZero">
+      <fill>
+        <SolidColor color="#FFFFFF" alpha="1"/>
+      </fill>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/HSliderThumb_normal.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/HSliderThumb_normal.fxg
new file mode 100644
index 0000000..0527454
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/HSliderThumb_normal.fxg
@@ -0,0 +1,42 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group scaleGridLeft="6.75" scaleGridRight="20.25" scaleGridTop="20.25" scaleGridBottom="6.75">
+    <Path alpha="1" winding="nonZero" data="M27 13.5C27 20.9556 20.9561 27 13.5 27 6.04395 27 0 20.9556 0 13.5 0 6.04395 6.04395 0 13.5 0 20.9561 0 27 6.04395 27 13.5Z">
+   	  <!--dropshadow-->
+      <filters>
+          <DropShadowFilter distance="5" alpha=".4" strength=".33" angle="90" blurX="5" blurY="5"/>
+      </filters>
+      <!--outer border-->  
+      <stroke>
+    	<LinearGradientStroke rotation ="90" weight=".2">
+           <GradientEntry color="#b6b6b6" ratio="0" alpha=".2"/>
+           <GradientEntry color="#b6b6b6" ratio=".50" alpha=".6"/>
+           <GradientEntry color="#b6b6b6" ratio="1" alpha=".8"/>
+         </LinearGradientStroke>
+	  </stroke> 
+	  <!--solid fill-->
+      <fill>
+        <SolidColor color="#ffffff"/>
+      </fill>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/HSliderThumb_pressed.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/HSliderThumb_pressed.fxg
new file mode 100644
index 0000000..0527454
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/HSliderThumb_pressed.fxg
@@ -0,0 +1,42 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group scaleGridLeft="6.75" scaleGridRight="20.25" scaleGridTop="20.25" scaleGridBottom="6.75">
+    <Path alpha="1" winding="nonZero" data="M27 13.5C27 20.9556 20.9561 27 13.5 27 6.04395 27 0 20.9556 0 13.5 0 6.04395 6.04395 0 13.5 0 20.9561 0 27 6.04395 27 13.5Z">
+   	  <!--dropshadow-->
+      <filters>
+          <DropShadowFilter distance="5" alpha=".4" strength=".33" angle="90" blurX="5" blurY="5"/>
+      </filters>
+      <!--outer border-->  
+      <stroke>
+    	<LinearGradientStroke rotation ="90" weight=".2">
+           <GradientEntry color="#b6b6b6" ratio="0" alpha=".2"/>
+           <GradientEntry color="#b6b6b6" ratio=".50" alpha=".6"/>
+           <GradientEntry color="#b6b6b6" ratio="1" alpha=".8"/>
+         </LinearGradientStroke>
+	  </stroke> 
+	  <!--solid fill-->
+      <fill>
+        <SolidColor color="#ffffff"/>
+      </fill>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/HSliderTrack.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/HSliderTrack.fxg
new file mode 100644
index 0000000..f4a2c69
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/HSliderTrack.fxg
@@ -0,0 +1,29 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group scaleGridLeft="82" scaleGridRight="246" scaleGridTop="1.5" scaleGridBottom="0.5">
+    <Path winding="nonZero" data="M328 2 0 2 0 0 328 0 328 2Z">
+      <fill>
+        <SolidColor color="#b6b6b6"/>
+      </fill>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/HSliderTrack_filled.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/HSliderTrack_filled.fxg
new file mode 100644
index 0000000..07efd90
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/HSliderTrack_filled.fxg
@@ -0,0 +1,29 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group scaleGridLeft="82" scaleGridRight="246" scaleGridTop="1.5" scaleGridBottom="0.5">
+    <Path winding="nonZero" data="M328 2 0 2 0 0 328 0 328 2Z">
+      <fill>
+        <SolidColor color="#047aff"/>
+      </fill>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/RadioButton_down.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/RadioButton_down.fxg
new file mode 100644
index 0000000..4d39346
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/RadioButton_down.fxg
@@ -0,0 +1,34 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group scaleGridLeft="8" scaleGridRight="24" scaleGridTop="24" scaleGridBottom="8">
+    <Path winding="nonZero" data="M32 16C32 24.8364 24.8369 32 16 32 7.16309 32 0 24.8364 0 16 0 7.16357 7.16309 0 16 0 24.8369 0 32 7.16357 32 16Z">
+      <fill>
+        <SolidColor color="#DEDEDD"/>
+      </fill>
+    </Path>
+    <Path x="8" y="8" winding="nonZero" data="M16 8C16 12.4185 12.418 16 8 16 3.58203 16 0 12.4185 0 8 0 3.58154 3.58203 0 8 0 12.418 0 16 3.58154 16 8Z">
+      <stroke>
+        <SolidColorStroke caps="none" joints="miter" miterLimit="10" color="#007AFF"/>
+      </stroke>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/RadioButton_downSymbolSelected.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/RadioButton_downSymbolSelected.fxg
new file mode 100644
index 0000000..bcbacca
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/RadioButton_downSymbolSelected.fxg
@@ -0,0 +1,29 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group x="-1" y="-1" scaleGridLeft="2.5" scaleGridRight="7.5" scaleGridTop="7.5" scaleGridBottom="2.5">
+    <Path winding="nonZero" data="M10 5C10 7.76123 7.76172 10 5 10 2.23828 10 0 7.76123 0 5 0 2.23877 2.23828 0 5 0 7.76172 0 10 2.23877 10 5Z">
+      <fill>
+        <SolidColor color="#007AFF"/>
+      </fill>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/RadioButton_up.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/RadioButton_up.fxg
new file mode 100644
index 0000000..05ed5a0
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/RadioButton_up.fxg
@@ -0,0 +1,29 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" viewHeight="32" viewWidth="32">
+  <Group x="8" y="8" scaleGridLeft="4.25" scaleGridRight="12.75" scaleGridTop="12.75" scaleGridBottom="4.25">
+    <Path x="0.5" y="0.5" winding="nonZero" data="M16 8C16 12.4185 12.418 16 8 16 3.58203 16 0 12.4185 0 8 0 3.58154 3.58203 0 8 0 12.418 0 16 3.58154 16 8Z">
+      <stroke>
+        <SolidColorStroke caps="none" joints="miter" miterLimit="10" color="#007AFF"/>
+      </stroke>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/RadioButton_upSymbolSelected.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/RadioButton_upSymbolSelected.fxg
new file mode 100644
index 0000000..2be649c
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/RadioButton_upSymbolSelected.fxg
@@ -0,0 +1,36 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group>
+    <Group x="0.5" y="0.5">
+      <Path winding="nonZero" data="M10 5C10 7.76123 7.76172 10 5 10 2.23828 10 0 7.76123 0 5 0 2.23877 2.23828 0 5 0 7.76172 0 10 2.23877 10 5Z">
+        <fill>
+          <SolidColor color="#33B5E5"/>
+        </fill>
+      </Path>
+    </Group>
+    <Path x="0.5" y="0.5" winding="nonZero" data="M10 5C10 7.76123 7.76172 10 5 10 2.23828 10 0 7.76123 0 5 0 2.23877 2.23828 0 5 0 7.76172 0 10 2.23877 10 5Z">
+      <stroke>
+        <SolidColorStroke caps="none" joints="miter" miterLimit="10" color="#007AFF"/>
+      </stroke>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/SpinnerListContainerBackground.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/SpinnerListContainerBackground.fxg
new file mode 100644
index 0000000..78d8c59
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/SpinnerListContainerBackground.fxg
@@ -0,0 +1,47 @@
+<?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.
+
+
+-->
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" viewHeight="100" viewWidth="100"
+	scaleGridLeft="7" scaleGridTop="7" scaleGridRight="93" scaleGridBottom="93">
+	   <!-- drop shadow-->
+    <Rect x="0" y="97" width="100" height="2">
+        <fill>
+            <SolidColor color="#FFFFFF" alpha=".35"/>
+        </fill>
+    </Rect>
+	    <Rect x="0" y="98" width="65" height="1">
+        <fill>
+            <SolidColor color="#FFFFFF" alpha=".2"/>
+        </fill>
+    </Rect>
+    <Rect x="0" y="99" width="65" height="1">
+        <fill>
+            <SolidColor color="#FFFFFF" alpha="0.1"/>
+        </fill>
+    </Rect>
+	<Rect width="100" height="100" radiusX="1" radiusY="1">
+		<fill>
+			<SolidColor color="#FFFFFF"/>
+		</fill>
+	</Rect>
+</Graphic>
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/SpinnerListContainerSelectionIndicator.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/SpinnerListContainerSelectionIndicator.fxg
new file mode 100644
index 0000000..50ee56a
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/SpinnerListContainerSelectionIndicator.fxg
@@ -0,0 +1,44 @@
+<?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.
+
+
+-->
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" viewHeight="24" viewWidth="100"
+	scaleGridLeft="3" scaleGridTop="3" scaleGridRight="97" scaleGridBottom="21">
+	<!-- Transparent rect used to center the bar -->
+	<Rect x="0" y="0" width="100" height="4">
+		<fill>
+			<SolidColor color="#000000" alpha="0"/>
+		</fill>
+	</Rect>
+	<!-- Top highlight -->
+	<Rect x="0" y="5" width="100" height="0.5">
+    	<fill>
+        	<SolidColor color="#999999"/>
+        </fill>
+	</Rect>
+	<!-- Bottom highlight -->
+	<Rect x="0" y="19" width="100" height="0.5">
+    	<fill>
+        	<SolidColor color="#999999"/>
+        </fill>
+	</Rect>
+</Graphic>
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/SpinnerListContainerShadow.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/SpinnerListContainerShadow.fxg
new file mode 100644
index 0000000..41c1955
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/SpinnerListContainerShadow.fxg
@@ -0,0 +1,41 @@
+<?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.
+
+
+-->
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" viewHeight= "100" viewWidth= "100"
+	scaleGridLeft="1" scaleGridTop="1" scaleGridRight="99" scaleGridBottom="99">
+	<Rect width="100" height="100">
+		<fill>
+	      <LinearGradient rotation="90">
+	        <GradientEntry ratio="0" color="#FFFFFF" alpha="1.0"/>
+	        <GradientEntry ratio="0.10" color="#FFFFFF" alpha=".7"/>
+	        <GradientEntry ratio="0.30" color="#FFFFFF" alpha=".3"/>
+	        <GradientEntry ratio="0.40" color="#FFFFFF" alpha=".05"/>
+	        <GradientEntry ratio="0.60" color="#FFFFFF" alpha=".05"/>
+	        <GradientEntry ratio="0.70" color="#FFFFFF" alpha=".3"/>
+	        <GradientEntry ratio="0.90" color="#FFFFFF" alpha=".7"/>
+	        <GradientEntry ratio="1" color="#FFFFFF" alpha="1.0"/>
+	      </LinearGradient>
+	    </fill>
+	</Rect>
+</Graphic>
+
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchBackground_off.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchBackground_off.fxg
new file mode 100644
index 0000000..43342d9
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchBackground_off.fxg
@@ -0,0 +1,34 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group scaleGridLeft="25.5" scaleGridRight="76.5" scaleGridTop="46.5" scaleGridBottom="15.5">
+    <Path x="1.5" y="2" winding="nonZero" data="M29.5 59C13.2324 59 0 45.7666 0 29.5 0 13.2344 13.2324 0 29.5 0L69.5 0C85.7666 0 99 13.2344 99 29.5 99 45.7666 85.7666 59 69.5 59L29.5 59Z">
+      <fill>
+        <SolidColor color="#FFFFFF"/>
+      </fill>
+    </Path>
+    <Path winding="nonZero" data="M71 3C86.4385 3 99 15.5615 99 31 99 46.4395 86.4385 59 71 59L31 59C15.5615 59 3 46.4395 3 31 3 15.5615 15.5615 3 31 3L71 3ZM71 0 31 0C13.8799 0 0 13.8799 0 31L0 23.3916 0 31C0 48.1211 13.8799 62 31 62L71 62C88.1201 62 102 48.1211 102 31 102 13.8799&#xD;&#xA; 88.1201 0 71 0Z">
+      <fill>
+        <SolidColor color="#E5E5E5"/>
+      </fill>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchBackground_on.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchBackground_on.fxg
new file mode 100644
index 0000000..de3761d
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchBackground_on.fxg
@@ -0,0 +1,29 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group scaleGridLeft="25.5" scaleGridRight="76.5" scaleGridTop="46.5" scaleGridBottom="15.5">
+    <Path winding="nonZero" data="M0 31C0 48.1211 13.8799 62 31 62L71 62C88.1201 62 102 48.1211 102 31 102 13.8799 88.1201 0 71 0L31 0C13.8799 0 0 13.8799 0 31 0 31 0 13.8799 0 31Z">
+      <fill>
+        <SolidColor color="#4CD964"/>
+      </fill>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchThumb_off.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchThumb_off.fxg
new file mode 100644
index 0000000..432d1e8
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchThumb_off.fxg
@@ -0,0 +1,35 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group x="3" scaleGridLeft="14" scaleGridRight="42" scaleGridTop="42" scaleGridBottom="14">
+    <Path winding="nonZero" data="M56 28C56 43.4619 43.4609 56 28 56 12.5381 56 0 43.4619 0 28 0 12.5391 12.5381 0 28 0 43.4609 0 56 12.5391 56 28Z">
+      <fill>
+        <SolidColor color="#FFFFFF"/>
+      </fill>
+      <stroke>
+      	<SolidColorStroke color="#E5E5E5" alpha="0.5" />
+      </stroke>
+      <filters>
+          <DropShadowFilter distance="5" alpha=".4" strength=".33" angle="90" blurX="5" blurY="5"/>
+      </filters>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchThumb_on.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchThumb_on.fxg
new file mode 100644
index 0000000..e4c75d1
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchThumb_on.fxg
@@ -0,0 +1,32 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group scaleGridLeft="14" scaleGridRight="42" scaleGridTop="42" scaleGridBottom="14">
+    <Path winding="nonZero" data="M56 28C56 43.4619 43.4609 56 28 56 12.5381 56 0 43.4619 0 28 0 12.5391 12.5381 0 28 0 43.4609 0 56 12.5391 56 28Z">
+      <fill>
+        <SolidColor color="#FFFFFF"/>
+      </fill>
+      <filters>
+          <DropShadowFilter distance="5" alpha=".4" strength=".33" angle="90" blurX="5" blurY="5"/>
+      </filters>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/fonts/Roboto-Bold.ttf b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/fonts/Roboto-Bold.ttf
new file mode 100644
index 0000000..aaf374d
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/fonts/Roboto-Bold.ttf
Binary files differ
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/fonts/Roboto-Regular.ttf b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/fonts/Roboto-Regular.ttf
new file mode 100644
index 0000000..3e6e2e7
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/fonts/Roboto-Regular.ttf
Binary files differ
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/supportClasses/CalloutArrow.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/supportClasses/CalloutArrow.as
new file mode 100644
index 0000000..7b2fe53
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/supportClasses/CalloutArrow.as
@@ -0,0 +1,498 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7.supportClasses
+{
+import flash.display.BlendMode;
+import flash.display.GradientType;
+import flash.display.Graphics;
+import flash.display.GraphicsPathCommand;
+import flash.display.Sprite;
+
+import mx.core.DPIClassification;
+import mx.core.FlexGlobals;
+import mx.core.IVisualElement;
+import mx.core.UIComponent;
+import mx.core.mx_internal;
+import mx.utils.ColorUtil;
+
+import spark.components.Application;
+import spark.components.ArrowDirection;
+import spark.components.Callout;
+import spark.skins.ios7.CalloutSkin;
+import spark.skins.mobile.supportClasses.MobileSkin;
+
+use namespace mx_internal;
+
+/**
+ *  The arrow skin part for CalloutSkin. 
+ *  
+ *  @see spark.skin.mobile.CalloutSkin
+ *  
+ *  @langversion 3.0
+ *  @playerversion AIR 3
+ *  @productversion Flex 4.6
+ */ 
+public class CalloutArrow extends UIComponent
+{
+    public function CalloutArrow()
+    {
+        super();
+        
+        useBackgroundGradient = false;
+        
+		var applicationDPI:Number = DPIClassification.DPI_160;
+		if (FlexGlobals.topLevelApplication is Application)
+		{
+			applicationDPI = Application(FlexGlobals.topLevelApplication).applicationDPI;
+		}
+        
+        // Copy DPI-specific values from CalloutSkin
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_640:
+			{
+				// Note provisional may need changes
+				gap = 32;
+				backgroundGradientHeight = 440;
+				highlightWeight = 4;
+				arrowTipCurveAnchorDistance = 12;
+				
+				break;
+			}
+			case DPIClassification.DPI_480:
+			{
+				// Note provisional may need changes
+				gap = 24;
+				backgroundGradientHeight = 330;
+				highlightWeight = 3;
+				arrowTipCurveAnchorDistance = 8;
+				
+				break;
+			}
+            case DPIClassification.DPI_320:
+            {
+                gap = 16;
+                backgroundGradientHeight = 220;
+                highlightWeight = 2;
+				arrowTipCurveAnchorDistance = 6;
+                
+                break;
+            }
+			case DPIClassification.DPI_240:
+			{
+				gap = 12;
+				backgroundGradientHeight = 165;
+				highlightWeight = 1;
+				arrowTipCurveAnchorDistance = 4;
+				
+				break;
+			}
+			case DPIClassification.DPI_120:
+			{
+				// Note provisional may need changes
+				gap = 6;
+				backgroundGradientHeight = 83;
+				highlightWeight = 1;
+				arrowTipCurveAnchorDistance = 2;
+				
+				break;
+			}
+            default:
+            {
+                // default DPI_160
+                gap = 8;
+                backgroundGradientHeight = 110;
+                highlightWeight = 1;
+				arrowTipCurveAnchorDistance = 3;
+                
+                break;
+            }
+        }
+    }
+    
+    /**
+     *  A gap on the frame-adjacent side of the arrow graphic to avoid
+     *  drawing past the CalloutSkin backgroundCornerRadius.
+     * 
+     *  <p>The default implementation matches the gap value with the
+     *  <code>backgroundCornerRadius</code> value in <code>CalloutSkin</code>.</p>
+     * 
+     *  @see spark.skins.mobile.CalloutSkin#backgroundCornerRadius
+     *  
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    protected var gap:Number;
+    
+    /**
+     *  @copy spark.skins.mobile.CalloutSkin#backgroundGradientHeight
+     */
+    protected var backgroundGradientHeight:Number;
+    
+    /**
+     *  @copy spark.skins.mobile.CalloutSkin#highlightWeight
+     */
+    private var highlightWeight:Number;
+    
+    /**
+     *  @copy spark.skins.mobile.CalloutSkin#useBackgroundGradient
+     */
+    protected var useBackgroundGradient:Boolean;
+    
+    /**
+     *  @copy spark.skins.mobile.CalloutSkin#borderColor
+     */
+    protected var borderColor:Number = -1; // if not set
+
+    /**
+     *  @copy spark.skins.mobile.CalloutSkin#borderThickness
+     */
+    protected var borderThickness:Number = -1 ;      // marker that borderThickness was not set  directly
+
+    /**
+     *  @private
+     *  A sibling of the arrow used to erase the drop shadow in CalloutSkin
+     */
+    private var eraseFill:Sprite;
+	
+	/**
+	 * The distance of the arrow tip's curve's anchor point from arrow tip   
+	 */
+	private var arrowTipCurveAnchorDistance:Number;
+
+    /* helper private accessors */
+
+    /* returns borderThickness from style if member is -1, or borderThickness.  Returns 0 if NaN */
+    private function get actualBorderThickness():Number
+    {
+        return calloutSkin.actualBorderThickness;
+    }
+
+    private function get actualBorderColor():uint
+    {
+        return calloutSkin.actualBorderColor;
+    }
+
+    protected function get calloutSkin():CalloutSkin
+    {
+        return parent as CalloutSkin ;
+    }
+
+    protected function get calloutHostComponent():Callout {
+        return  calloutSkin.hostComponent;
+    }
+    
+    /**
+     * @private
+     */
+
+    override protected function createChildren():void
+    {
+        super.createChildren();
+        
+        // eraseFill has the same position and arrow shape in order to erase
+        // the drop shadow under the arrow when backgroundAlpha < 1
+        eraseFill = new Sprite();
+        eraseFill.blendMode = BlendMode.ERASE;
+        
+        // layer eraseFill below the arrow 
+        parent.addChildAt(eraseFill, parent.getChildIndex(this));
+    }
+    
+    /**
+     * @private
+     */
+    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.updateDisplayList(unscaledWidth, unscaledHeight);
+        
+        graphics.clear();
+        eraseFill.graphics.clear();
+        var hostComponent: Callout = calloutHostComponent;
+        var arrowDirection:String = hostComponent.arrowDirection;
+        
+        if (arrowDirection == ArrowDirection.NONE)
+            return;
+        
+        // when drawing the arrow, compensate for cornerRadius via padding
+        var arrowGraphics:Graphics = this.graphics;
+        var eraseGraphics:Graphics = eraseFill.graphics;
+        var arrowWidth:Number = unscaledWidth;
+        var arrowHeight:Number = unscaledHeight;
+        var arrowX:Number = 0;
+        var arrowY:Number = 0;
+        var arrowTipX:Number = 0;
+        var arrowTipY:Number = 0;
+        var arrowEndX:Number = 0;
+        var arrowEndY:Number = 0;
+
+        var borderWeight:Number = actualBorderThickness;
+        var showBorder:Boolean = borderWeight > 0;
+
+        var borderHalf:Number = borderWeight / 2;
+        var isHorizontal:Boolean = false;
+		var commands:Vector.<int> = new Vector.<int>(4, true);
+		var coords:Vector.<Number> = new Vector.<Number>(10, true);
+		commands[0] = GraphicsPathCommand.MOVE_TO;
+		commands[1] = GraphicsPathCommand.LINE_TO;
+		commands[2] = GraphicsPathCommand.CURVE_TO;
+		commands[3] = GraphicsPathCommand.LINE_TO;
+        
+        if ((arrowDirection == ArrowDirection.LEFT) ||
+            (arrowDirection == ArrowDirection.RIGHT))
+        {
+            isHorizontal = true;
+            
+            arrowX = -borderHalf;
+            arrowY = gap;
+            arrowHeight = arrowHeight - (gap * 2);
+            
+            arrowTipX = arrowWidth - borderHalf;
+            arrowTipY = arrowY + (arrowHeight / 2);
+            
+            arrowEndX = arrowX;
+            arrowEndY = arrowY + arrowHeight;
+            
+            // flip coordinates to point left
+            if (arrowDirection == ArrowDirection.LEFT)
+            {
+                arrowX = arrowWidth - arrowX;
+                arrowTipX = arrowWidth - arrowTipX;
+                arrowEndX = arrowWidth - arrowEndX;
+            }
+			
+			coords[0] = arrowX;
+			coords[1] = arrowY;
+			coords[2] = arrowTipX + arrowTipCurveAnchorDistance;
+			coords[3] = arrowTipY - arrowTipCurveAnchorDistance;
+            if (arrowDirection == ArrowDirection.LEFT)
+            {
+				coords[4] = arrowTipX - arrowTipCurveAnchorDistance * 2;
+            }
+			else
+			{
+				coords[4] = arrowTipX + arrowTipCurveAnchorDistance * 2;
+			}
+			coords[5] = arrowTipY;
+			coords[6] = arrowTipX + arrowTipCurveAnchorDistance;
+			coords[7] = arrowTipY + arrowTipCurveAnchorDistance;
+			coords[8] = arrowEndX
+			coords[9] = arrowEndY;
+        }
+        else
+        {
+            arrowX = gap;
+            arrowY = -borderHalf;
+            arrowWidth = arrowWidth - (gap * 2);
+            
+            arrowTipX = arrowX + (arrowWidth / 2);
+            arrowTipY = arrowHeight - borderHalf;
+            
+            arrowEndX = arrowX + arrowWidth;
+            arrowEndY = arrowY;
+            
+            // flip coordinates to point up
+            if (hostComponent.arrowDirection == ArrowDirection.UP)
+            {
+                arrowY = arrowHeight - arrowY;
+                arrowTipY = arrowHeight - arrowTipY;
+                arrowEndY = arrowHeight - arrowEndY;
+            }
+			
+			coords[0] = arrowX;
+			coords[1] = arrowY;
+			coords[2] = arrowTipX - arrowTipCurveAnchorDistance;
+			coords[3] = arrowTipY - arrowTipCurveAnchorDistance;
+			coords[4] = arrowTipX;
+            if (hostComponent.arrowDirection == ArrowDirection.UP)
+            {
+				coords[5] = arrowTipY - arrowTipCurveAnchorDistance * 2;
+			}
+			else
+			{
+				coords[5] = arrowTipY + arrowTipCurveAnchorDistance * 2;
+			}
+			coords[6] = arrowTipX + arrowTipCurveAnchorDistance;
+			coords[7] = arrowTipY - arrowTipCurveAnchorDistance;
+			coords[8] = arrowEndX
+			coords[9] = arrowEndY;
+        }
+        
+        
+        var backgroundColor:Number = getStyle("backgroundColor");
+        var backgroundAlpha:Number = getStyle("backgroundAlpha");
+        
+        if (useBackgroundGradient)
+        {
+            var backgroundColorTop:Number = ColorUtil.adjustBrightness2(backgroundColor, 
+                CalloutSkin.BACKGROUND_GRADIENT_BRIGHTNESS_TOP);
+            var backgroundColorBottom:Number = ColorUtil.adjustBrightness2(backgroundColor, 
+                CalloutSkin.BACKGROUND_GRADIENT_BRIGHTNESS_BOTTOM);
+            
+            // translate the gradient based on the arrow position
+            MobileSkin.colorMatrix.createGradientBox(unscaledWidth, 
+                backgroundGradientHeight, Math.PI / 2, 0, -getLayoutBoundsY());
+            
+            arrowGraphics.beginGradientFill(GradientType.LINEAR,
+                [backgroundColorTop, backgroundColorBottom],
+                [backgroundAlpha, backgroundAlpha],
+                [0, 255],
+                MobileSkin.colorMatrix);
+        }
+        else
+        {
+            arrowGraphics.beginFill(backgroundColor, backgroundAlpha);
+        }
+        
+        // cover the adjacent border from the callout frame
+        if (showBorder)
+        {
+            var coverX:Number = 0;
+            var coverY:Number = 0;
+            var coverWidth:Number = 0;
+            var coverHeight:Number = 0;
+            
+            switch (arrowDirection)
+            {
+                case ArrowDirection.UP:
+                {
+                    coverX = arrowX;
+                    coverY = arrowY;
+                    coverWidth = arrowWidth;
+                    coverHeight = borderWeight;
+                    break;
+                }
+                case ArrowDirection.DOWN:
+                {
+                    coverX = arrowX;
+                    coverY = -borderWeight;
+                    coverWidth = arrowWidth;
+                    coverHeight = borderWeight;
+                    break;
+                }
+                case ArrowDirection.LEFT:
+                {
+                    coverX = arrowX;
+                    coverY = arrowY;
+                    coverWidth = borderWeight;
+                    coverHeight = arrowHeight;
+                    break;
+                }
+                case ArrowDirection.RIGHT:
+                {
+                    coverX = -borderWeight;
+                    coverY = arrowY;
+                    coverWidth = borderWeight;
+                    coverHeight = arrowHeight;
+                    break;
+                }
+            }
+            
+            arrowGraphics.drawRect(coverX, coverY, coverWidth, coverHeight);
+        }
+        
+        // erase the drop shadow from the CalloutSkin
+        if (backgroundAlpha < 1)
+        {
+            // move eraseFill to the same position as the arrow
+            eraseFill.x = getLayoutBoundsX()
+            eraseFill.y = getLayoutBoundsY();
+            
+            // draw the arrow shape
+            eraseGraphics.beginFill(0, 1);
+            eraseGraphics.drawPath(commands, coords);
+            eraseGraphics.endFill();
+        }
+        
+        // draw arrow path
+        if (showBorder)
+            arrowGraphics.lineStyle(borderWeight, actualBorderColor, 1, true);
+        
+        arrowGraphics.drawPath(commands, coords);
+        arrowGraphics.endFill();
+        
+        // adjust the highlight position to the origin of the callout
+        var isArrowUp:Boolean = (arrowDirection == ArrowDirection.UP);
+        var offsetY:Number = (isArrowUp) ? unscaledHeight : -getLayoutBoundsY();
+        
+        // highlight starts after the backgroundCornerRadius
+        var highlightX:Number = gap - getLayoutBoundsX();
+        
+        // highlight Y position is based on the stroke weight 
+        var highlightOffset:Number = (highlightWeight * 1.5);
+        var highlightY:Number = highlightOffset + offsetY;
+        
+        // highlight width spans the callout width minus the corner radius
+        var highlightWidth:Number = IVisualElement(calloutSkin).getLayoutBoundsWidth() - (gap * 2);
+        
+        if (isHorizontal)
+        {
+            highlightWidth -= arrowWidth;
+            
+            if (arrowDirection == ArrowDirection.LEFT)
+                highlightX += arrowWidth;
+        }
+        
+        // highlight on the top edge is drawn in the arrow only in the UP direction
+        if (useBackgroundGradient)
+        {
+            if (isArrowUp)
+            {
+                // highlight follows the top edge, including the arrow
+                var rightWidth:Number = highlightWidth - arrowWidth;
+                
+                // highlight style
+                arrowGraphics.lineStyle(highlightWeight, 0xFFFFFF, 0.2 * backgroundAlpha);
+                
+                // in the arrow coordinate space, the highlightX must be less than 0
+                if (highlightX < 0)
+                {
+                    arrowGraphics.moveTo(highlightX, highlightY);
+                    arrowGraphics.lineTo(arrowX, highlightY);
+                    
+                    // compute the remaining highlight
+                    rightWidth -= (arrowX - highlightX);
+                }
+                
+                // arrow highlight (adjust Y downward)
+                coords[1] = arrowY + highlightOffset;
+                coords[3] = arrowTipY + highlightOffset;
+                coords[5] = arrowEndY + highlightOffset;
+                arrowGraphics.drawPath(commands, coords);
+                
+                // right side
+                if (rightWidth > 0)
+                {
+                    arrowGraphics.moveTo(arrowEndX, highlightY);
+                    arrowGraphics.lineTo(arrowEndX + rightWidth, highlightY);
+                }
+            }
+            else
+            {
+                // straight line across the top
+                arrowGraphics.lineStyle(highlightWeight, 0xFFFFFF, 0.2 * backgroundAlpha);
+                arrowGraphics.moveTo(highlightX, highlightY);
+                arrowGraphics.lineTo(highlightX + highlightWidth, highlightY);
+            }
+        }
+    }
+}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/supportClasses/StageTextSkinBase.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/supportClasses/StageTextSkinBase.as
new file mode 100644
index 0000000..89b8b13
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/supportClasses/StageTextSkinBase.as
@@ -0,0 +1,400 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7.supportClasses
+{
+import flash.display.DisplayObject;
+import flash.events.FocusEvent;
+
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+
+import spark.components.supportClasses.IStyleableEditableText;
+import spark.components.supportClasses.SkinnableTextBase;
+import spark.components.supportClasses.StyleableStageText;
+import spark.components.supportClasses.StyleableTextField;
+import spark.core.IDisplayText;
+import spark.skins.mobile.supportClasses.MobileSkin;
+
+use namespace mx_internal;
+
+/**
+ *  ActionScript-based skin for text input controls in mobile applications. 
+ * 
+ *  @langversion 3.0
+ *  @playerversion AIR 3.0
+ *  @productversion Flex 4.6
+ */
+public class StageTextSkinBase extends MobileSkin
+{
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  Constructor.
+     * 
+     *  @langversion 3.0
+     *  @playerversion AIR 3.0 
+     *  @productversion Flex 4.6
+     * 
+     */
+    public function StageTextSkinBase()
+    {
+        super();
+		
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_640:
+			{	
+				measuredDefaultWidth = 1200;
+				measuredDefaultHeight = 132;
+				layoutBorderSize = 3;
+				roundheight = 24;
+				break;
+			}
+			case DPIClassification.DPI_480:
+			{				
+				measuredDefaultWidth = 880;
+				measuredDefaultHeight = 100;	
+				layoutBorderSize = 2;
+				roundheight = 18;
+				break;
+			}
+            case DPIClassification.DPI_320:
+            {               
+                measuredDefaultWidth = 600;
+                measuredDefaultHeight = 66;   
+				layoutBorderSize = 1.5;
+				roundheight = 14;
+                break;
+            }
+			case DPIClassification.DPI_240:
+			{				
+				measuredDefaultWidth = 440;
+				measuredDefaultHeight = 50;			
+				layoutBorderSize = 1;
+				roundheight = 10;
+				break;
+			}
+			case DPIClassification.DPI_120:
+			{				
+				measuredDefaultWidth = 220;
+				measuredDefaultHeight = 25;		
+				layoutBorderSize = .5;
+				roundheight = 5;
+				break;
+			}
+            default:
+			{
+                measuredDefaultWidth = 300;
+                measuredDefaultHeight = 33;
+				layoutBorderSize = .5;
+				roundheight = 7; 
+                break;
+            }
+				
+        }
+		addEventListener(FocusEvent.FOCUS_IN, focusChangeHandler);
+		addEventListener(FocusEvent.FOCUS_OUT, focusChangeHandler);
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Graphics variables
+    //
+    //--------------------------------------------------------------------------
+
+
+    //--------------------------------------------------------------------------
+    //
+    //  Layout variables
+    //
+    //-------------------------------------------------------------------------- 
+    
+    /**
+     *  Defines the border's thickness.
+     * 
+     *  @langversion 3.0
+     *  @playerversion AIR 3.0
+     *  @productversion Flex 4.6
+     */
+    protected var layoutBorderSize:uint;
+	
+	protected var roundheight:uint;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Variables
+    //
+    //--------------------------------------------------------------------------
+	
+	protected var isFocused:Boolean = false;
+	
+    /**
+     *  @private
+     * 
+     *  Instance of the border graphics.
+     */
+    protected var border:DisplayObject;
+    
+    private var borderVisibleChanged:Boolean = false;
+
+    /**
+     *  @private
+     * 
+     *  Multiline flag.
+     */
+    protected var multiline:Boolean = false;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Skin parts
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  textDisplay skin part.
+     * 
+     *  @langversion 3.0
+     *  @playerversion AIR 3.0
+     *  @productversion Flex 4.6
+     */
+    public var textDisplay:IStyleableEditableText; 
+	
+    [Bindable]
+    /**
+     *  Bindable promptDisplay skin part. Bindings fire when promptDisplay is
+     *  removed and added for proper updating by the SkinnableTextBase.
+     * 
+     *  @langversion 3.0
+     *  @playerversion AIR 3.0
+     *  @productversion Flex 4.6
+     */
+    public var promptDisplay:IDisplayText;
+
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @private
+     */
+    override protected function createChildren():void
+    {
+        super.createChildren();
+        
+        if (!textDisplay)
+        {
+            textDisplay = createTextDisplay();
+            textDisplay.editable = true;
+            textDisplay.styleName = this;
+            this.addChild(DisplayObject(textDisplay));
+        }
+    }
+
+    /**  Could be overridden by subclasses
+     *
+     * @return   instance of  IStyleableEditableText
+     */
+    protected function createTextDisplay():IStyleableEditableText 
+	{
+        return   new StyleableStageText(multiline);
+    }
+
+    /**
+     *  @private
+     */
+    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.drawBackground(unscaledWidth, unscaledHeight);
+        
+        var contentBackgroundColor:uint = getStyle("contentBackgroundColor");
+        var contentBackgroundAlpha:Number = getStyle("contentBackgroundAlpha");	
+		//change border color and thickness when in focus
+		var borderColor:uint = isFocused ? getStyle("focusColor") : getStyle("borderColor");
+		var borderWidth:uint = layoutBorderSize * 2;
+        if (isNaN(contentBackgroundAlpha))
+		{
+            contentBackgroundAlpha = 1;
+		}        
+		// change the border type
+		if (getStyle("contentBackgroundBorder") == "roundedrect")
+		{		
+			graphics.lineStyle(layoutBorderSize, borderColor, 1, true);
+			graphics.beginFill(contentBackgroundColor, contentBackgroundAlpha);
+			graphics.drawRoundRectComplex(layoutBorderSize, layoutBorderSize, unscaledWidth - borderWidth, unscaledHeight - borderWidth, roundheight, roundheight, roundheight, roundheight);
+			graphics.endFill();
+		}
+		if (getStyle("contentBackgroundBorder") == "rectangle")
+		{
+			
+			//rectangle border and background
+			graphics.lineStyle(layoutBorderSize, borderColor, 1);
+			graphics.beginFill(contentBackgroundColor, contentBackgroundAlpha);
+			graphics.drawRect(layoutBorderSize, layoutBorderSize, unscaledWidth - borderWidth, unscaledHeight - borderWidth);
+			graphics.endFill();
+		}
+		else if (getStyle("contentBackgroundBorder") == "none")
+		{
+			
+			//rectangle border and background
+			graphics.beginFill(contentBackgroundColor, contentBackgroundAlpha);
+			graphics.drawRect(0, 0, unscaledWidth - borderWidth, unscaledHeight - borderWidth);
+			graphics.endFill();
+		}
+    }
+    
+    /**
+     *  @private
+     */
+    override public function styleChanged(styleProp:String):void
+    {
+        var allStyles:Boolean = !styleProp || styleProp == "styleName";
+        
+        if (allStyles || styleProp == "borderVisible")
+        {
+            borderVisibleChanged = true;
+            invalidateProperties();
+        }
+        
+        if (allStyles || styleProp.indexOf("padding") == 0)
+        {
+            invalidateDisplayList();
+        }       
+        super.styleChanged(styleProp);
+    }
+	
+    /**
+     *  @private
+     */
+    override protected function commitCurrentState():void
+    {
+        super.commitCurrentState();
+        
+        alpha = currentState.indexOf("disabled") == -1 ? 1 : 0.5;
+        
+        var showPrompt:Boolean = currentState.indexOf("WithPrompt") != -1;
+
+        if (showPrompt && !promptDisplay)
+        {
+            promptDisplay = createPromptDisplay();
+            promptDisplay.addEventListener(FocusEvent.FOCUS_IN, promptDisplay_focusInHandler);
+        }
+        else if (!showPrompt && promptDisplay)
+        {
+            promptDisplay.removeEventListener(FocusEvent.FOCUS_IN, promptDisplay_focusInHandler);
+            removeChild(promptDisplay as DisplayObject);
+            promptDisplay = null;
+        }
+		super.commitCurrentState();
+		
+        invalidateDisplayList();
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Methods
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @private
+     *  Create a control appropriate for displaying the prompt text in a mobile
+     *  input field.
+     */
+    protected function createPromptDisplay():IDisplayText
+    {
+        var prompt:StyleableTextField = StyleableTextField(createInFontContext(StyleableTextField));
+        prompt.styleName = this;
+        prompt.editable = false;
+        prompt.mouseEnabled = false;
+        prompt.useTightTextBounds = false;   
+        // StageText objects appear in their own layer on top of the display
+        // list. So, even though this prompt may be created after the StageText
+        // for textDisplay, textDisplay will still be on top.
+        addChild(prompt);
+        
+        return prompt;
+    }
+    
+    /**
+     *  @private
+     *  Utility function used by subclasses' measure functions to measure their
+     *  text host components.
+     */
+    protected function measureTextComponent(hostComponent:SkinnableTextBase):void
+    {
+        var paddingLeft:Number = getStyle("paddingLeft");
+        var paddingRight:Number = getStyle("paddingRight");
+        var paddingTop:Number = getStyle("paddingTop");
+        var paddingBottom:Number = getStyle("paddingBottom");
+        var textHeight:Number = getStyle("fontSize");
+        
+        if (textDisplay)
+		{
+            textHeight = getElementPreferredHeight(textDisplay);
+		}
+        // width is based on maxChars (if set)
+        if (hostComponent && hostComponent.maxChars)
+        {
+            // Grab the fontSize and subtract 2 as the pixel value for each character.
+            // This is just an approximation, but it appears to be a reasonable one
+            // for most input and most font.
+            var characterWidth:int = Math.max(1, (textHeight - 2));
+            measuredWidth =  (characterWidth * hostComponent.maxChars) + paddingLeft + paddingRight;
+        }
+        
+        measuredHeight = paddingTop + textHeight + paddingBottom;
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Event handlers
+    //
+    //--------------------------------------------------------------------------
+	
+	/**
+	 *  Listen to see if the component gains focus then change the style to selected
+	 */	
+	private function focusChangeHandler(event:FocusEvent):void
+	{
+		isFocused = event.type == FocusEvent.FOCUS_IN;
+		invalidateDisplayList();		
+	}
+	
+    /**
+     *  If the prompt is focused, we need to move focus to the textDisplay
+     *  StageText. This needs to happen outside of the process of setting focus
+     *  to the prompt, so we use callLater to do that.
+     */
+    private function focusTextDisplay():void
+    {
+        textDisplay.setFocus();
+    }
+    
+    private function promptDisplay_focusInHandler(event:FocusEvent):void
+    {
+        callLater(focusTextDisplay);
+    }
+}
+}
\ No newline at end of file
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/supportClasses/TextSkinBase.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/supportClasses/TextSkinBase.as
new file mode 100644
index 0000000..319d4a0
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/supportClasses/TextSkinBase.as
@@ -0,0 +1,213 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.ios7.supportClasses
+{
+	
+	import flash.display.DisplayObject;
+	
+	import mx.core.mx_internal;
+	
+	import spark.components.supportClasses.StyleableTextField;
+	import spark.skins.mobile.supportClasses.MobileSkin;
+	
+	use namespace mx_internal;
+	
+	/**
+	 *  ActionScript-based skin for text input controls in mobile applications that
+	 *  uses a StyleableTextField class for the text display. 
+	 * 
+	 *  @see spark.components.supportClasses.StyleableTextField
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10
+	 *  @playerversion AIR 2.5 
+	 *  @productversion Flex 4.5
+	 */
+	public class TextSkinBase extends MobileSkin 
+	{
+		//--------------------------------------------------------------------------
+		//
+		//  Constructor
+		//
+		//--------------------------------------------------------------------------
+		/**
+		 *  Constructor.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 * 
+		 */
+		public function TextSkinBase()
+		{
+			super();
+		}
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Graphics variables
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  Defines the border.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 */  
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Layout variables
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  Defines the corner radius.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 */  
+		
+		protected var layoutBorderSize:uint;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Variables
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  @private
+		 * 
+		 *  Instance of the border graphics.
+		 */
+		protected var border:DisplayObject;
+		
+		private var borderVisibleChanged:Boolean = false;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Skin parts
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  textDisplay skin part.
+		 */
+		public var textDisplay:StyleableTextField;
+		
+		[Bindable]
+		/**
+		 *  Bindable promptDisplay skin part. Bindings fire when promptDisplay is
+		 *  removed and added for proper updating by the SkinnableTextBase.
+		 */
+		public var promptDisplay:StyleableTextField;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Overridden methods
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  @private
+		 */
+		override protected function createChildren():void
+		{
+			super.createChildren();
+			
+			if (!textDisplay)
+			{
+				textDisplay = StyleableTextField(createInFontContext(StyleableTextField));
+				textDisplay.styleName = this;
+				textDisplay.editable = true;
+				textDisplay.useTightTextBounds = false;
+				addChild(textDisplay);
+			}
+		}
+		
+		/**
+		 *  @private 
+		 */ 
+		protected function createPromptDisplay():StyleableTextField
+		{
+			var prompt:StyleableTextField = StyleableTextField(createInFontContext(StyleableTextField));
+			prompt.styleName = this;
+			prompt.editable = false;
+			prompt.mouseEnabled = false;
+			prompt.useTightTextBounds = false;
+			prompt.focusEnabled = false;
+			return prompt;
+		}
+	
+		/**
+		 *  @private
+		 */
+
+		override public function styleChanged(styleProp:String):void
+		{
+			var allStyles:Boolean = !styleProp || styleProp == "styleName";
+			
+			if (allStyles || styleProp == "borderVisible")
+			{
+				borderVisibleChanged = true;
+				invalidateProperties();
+			}
+			
+			if (allStyles || styleProp.indexOf("padding") == 0)
+			{
+				invalidateDisplayList();
+			}
+			
+			super.styleChanged(styleProp);
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function commitCurrentState():void
+		{
+			super.commitCurrentState();
+			
+			alpha = currentState.indexOf("disabled") == -1 ? 1 : 0.5;
+			
+			var showPrompt:Boolean = currentState.indexOf("WithPrompt") >= 0;
+			
+			if (showPrompt && !promptDisplay)
+			{
+				promptDisplay = createPromptDisplay();
+				addChild(promptDisplay);
+			}
+			else if (!showPrompt && promptDisplay)
+			{
+				removeChild(promptDisplay);
+				promptDisplay = null;
+			}
+			
+			invalidateDisplayList();
+		}   
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/spark/src/spark/components/BusyIndicator.as b/frameworks/projects/spark/src/spark/components/BusyIndicator.as
index c47c9cf..8230525 100644
--- a/frameworks/projects/spark/src/spark/components/BusyIndicator.as
+++ b/frameworks/projects/spark/src/spark/components/BusyIndicator.as
@@ -19,33 +19,17 @@
 
 package spark.components
 {
-
-import flash.display.CapsStyle;
-import flash.display.Graphics;
-import flash.display.LineScaleMode;
-import flash.display.Shape;
-import flash.display.Sprite;
-import flash.events.Event;
-import flash.events.TimerEvent;
-import flash.geom.Matrix;
-import flash.geom.Matrix3D;
-import flash.geom.Point;
-import flash.geom.Transform;
-import flash.geom.Vector3D;
-import flash.utils.Timer;
-
-import mx.core.DesignLayer;
-import mx.core.DPIClassification;
-import mx.core.FlexGlobals;
-import mx.core.IUIComponent;
-import mx.core.IVisualElement;
-import mx.core.UIComponent;
-import mx.core.mx_internal;
-import mx.events.FlexEvent;
-import mx.events.PropertyChangeEvent;
-import mx.geom.TransformOffsets;
-
-use namespace mx_internal;
+	import flash.events.Event;
+	
+	import mx.core.IUIComponent;
+	import mx.core.IVisualElement;
+	import mx.events.FlexEvent;
+	import mx.states.State;
+	
+	import spark.components.supportClasses.SkinnableComponent;
+	
+	[SkinState("rotatingState")]
+	[SkinState("notRotatingState")]
 
 //--------------------------------------
 //  Styles
@@ -138,683 +122,155 @@
  *  @langversion 3.0
  *  @playerversion AIR 2.5
  *  @productversion Flex 4.5
- */
-public class BusyIndicator extends UIComponent
-{
-
-    //--------------------------------------------------------------------------
-    //
-    //  Class constants
-    //
-    //--------------------------------------------------------------------------
-    
-    /**
-     *  @private
-     */ 
-    static private const DEFAULT_ROTATION_INTERVAL:Number = 50;
-
-    /**
-     *  @private
-     */ 
-    static private const DEFAULT_MINIMUM_SIZE:Number = 20;
-
-    /**
-     *  @private
-     */ 
-    static private const RADIANS_PER_DEGREE:Number = Math.PI / 180;
-    
-    //--------------------------------------------------------------------------
-    //
-    //  Constructor
-    //
-    //--------------------------------------------------------------------------
-    
-    /**
-     *  Constructor.
-     *  
-     *  @langversion 3.0
-     *  @playerversion AIR 2.5
-     *  @productversion Flex 4.5
-     */
-    public function BusyIndicator()
-    {
-        super();
-        
-        alpha = 0.60;       // default alpha
-        
-        // Listen to added to stage and removed from stage.
-        // Start rotating when we are on the stage and stop
-        // when we are removed from the stage.
-        addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
-        addEventListener(Event.REMOVED_FROM_STAGE, removedFromStageHandler);
-    }
-    
-    //--------------------------------------------------------------------------
-    //
-    //  Variables
-    //
-    //--------------------------------------------------------------------------
-    
-    /**
-     *  @private
-     */
-    private var effectiveVisibility:Boolean = false;
-    
-    /**
-     *  @private
-     */
-    private var effectiveVisibilityChanged:Boolean = true;
-    
-    /**
-     *  @private
-     */   
-    private var oldUnscaledHeight:Number;
-
-    /**
-     *  @private
-     */   
-    private var oldUnscaledWidth:Number;
-    
-    /**
-     *  @private
-     */   
-    private var rotationTimer:Timer;
-
-    /**
-     *  @private
-     * 
-     *  Current rotation of this component in degrees.
-     */   
-    private var currentRotation:Number = 0;
-    
-    /**
-     *  @private
-     * 
-     *  Diameter of the spinner for this component.
-     */ 
-    private var spinnerDiameter:int;
-
-    /**
-     *  @private
-     * 
-     *  Cached value of the spoke color.
-     */ 
-    private var spokeColor:uint;
-
-    //--------------------------------------------------------------------------
-    //
-    //  Private Properties 
-    //
-    //--------------------------------------------------------------------------
-
-    /**
-     *  @private
-     *  Cache the last value of applicationDPI.
-     */ 
-    private var _applicationDPI:Number;
-    
-    /**
-     *  @private
-     * 
-     *  Get the applicationDPI in use.
-     */ 
-    private function get applicationDPI():Number
-    {
-        if (_applicationDPI)
-            return _applicationDPI;
-        
-        var application:Object = FlexGlobals.topLevelApplication;
-        
-        if ("applicationDPI" in application)
-            _applicationDPI = application["applicationDPI"];
-
-        return _applicationDPI; 
-    }
-    
-    //--------------------------------------------------------------------------
-    //
-    //  Overridden properties: UIComponent
-    //
-    //--------------------------------------------------------------------------
-    
-    /**
-     *  @private
-     */
-    override public function set designLayer(value:DesignLayer):void
-    {
-        super.designLayer = value;
-
-        effectiveVisibilityChanged = true;
-        invalidateProperties();
-    }
-    
-    //--------------------------------------------------------------------------
-    //
-    //  Overridden methods: UIComponent
-    //
-    //--------------------------------------------------------------------------
-    
-    /**
-     *  @private
-     */
-    override protected function commitProperties():void
-    {
-        super.commitProperties();
-        
-        if (effectiveVisibilityChanged)
-        {
-            // if visibility changed, re-compute them here
-            computeEffectiveVisibility();
-            
-            if (canRotate())
-                startRotation();
-            else
-                stopRotation();
-            
-            effectiveVisibilityChanged = false;
-        }
-    }
-
-    /**
-     *  @private
-     */
-    override protected function measure():void
-    {
-        super.measure();
-        
-        // Set the default measured size depending on the
-        // applicationDPI
-		if (applicationDPI == DPIClassification.DPI_640)
+ */	
+	public class BusyIndicator extends SkinnableComponent
+	{
+		private var effectiveVisibility:Boolean = false;
+		private var effectiveVisibilityChanged:Boolean = true;
+		
+		public function BusyIndicator()
 		{
-			measuredWidth = 104;
-			measuredHeight = 104;
+			super();
+			// Listen to added to stage and removed from stage.
+			// Start rotating when we are on the stage and stop
+			// when we are removed from the stage.
+			addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
+			addEventListener(Event.REMOVED_FROM_STAGE, removedFromStageHandler);
+			states = 	[
+				new State({name:"notRotatingState"}),
+				new State({name:"rotatingState"})
+			];
 		}
-		else if (applicationDPI == DPIClassification.DPI_480)
+		
+		override protected function getCurrentSkinState():String
 		{
-			measuredWidth = 80;
-			measuredHeight = 80;
-		}
-		else if (applicationDPI == DPIClassification.DPI_320)
-        {
-            measuredWidth = 52;
-            measuredHeight = 52;
-        }
-        else if (applicationDPI == DPIClassification.DPI_240)
-        {
-            measuredWidth = 40;
-            measuredHeight = 40;
-        }
-		else if (applicationDPI == DPIClassification.DPI_160)
+			return currentState;
+		} 
+		
+		private function addedToStageHandler(event:Event):void
 		{
-			measuredWidth = 26;
-			measuredHeight = 26;
+			// Check our visibility here since we haven't added
+			// visibility listeners yet.
+			computeEffectiveVisibility();
+			
+			if (canRotate())
+				currentState = "rotatingState";
+			
+			addVisibilityListeners();
+			invalidateSkinState();
 		}
-		else if (applicationDPI == DPIClassification.DPI_120)
+		
+		private function removedFromStageHandler(event:Event):void
 		{
-			measuredWidth = 20;
-			measuredHeight = 20;
+			currentState = "notRotatingState";
+			
+			removeVisibilityListeners();
+			invalidateSkinState();
 		}
-        else
-        {
-            measuredWidth = DEFAULT_MINIMUM_SIZE;
-            measuredHeight = DEFAULT_MINIMUM_SIZE;
-        }
-
-        measuredMinWidth = DEFAULT_MINIMUM_SIZE;
-        measuredMinHeight = DEFAULT_MINIMUM_SIZE;
-    }
-    
-    /**
-     *  @private
-     *  Override so we know when visibility is set. The initialized
-     *  property calls setVisible() with noEvent == true
-     *  so we wouldn't get a visibility event if we just listened
-     *  for events.
-     */
-    override public function setVisible(value:Boolean,
-                               noEvent:Boolean = false):void
-    {
-        super.setVisible(value, noEvent);
-        
-        effectiveVisibilityChanged = true;
-        invalidateProperties();
-    }
-    
-    /**
-     *  @private
-     */
-    override public function styleChanged(styleProp:String):void
-    {
-        super.styleChanged(styleProp);
-        
-        var allStyles:Boolean = !styleName || styleName == "styleName";
-
-        // Check for skin/icon changes here.
-        // We could only throw out any skins that change,
-        // but since dynamic re-skinning is uncommon, we'll take
-        // the simpler approach of throwing out all skins.
-        if (allStyles || styleName == "rotationInterval")
-        {
-            // Update the timer if the rotation interval has changed.
-            if (isRotating())
-            {
-                stopRotation();
-                startRotation();
-            }
-        }
-        
-        if (allStyles || styleName == "symbolColor")
-        {
-            updateSpinner(spinnerDiameter);
-        }
-    }
-
-    /**
-     *  @private
-     */
-    override protected function updateDisplayList(unscaledWidth:Number,
-                                                  unscaledHeight:Number):void
-    {
-        super.updateDisplayList(unscaledWidth, unscaledHeight);
-
-        // If the size changed, then create a new spinner.
-        if (oldUnscaledWidth != unscaledWidth ||
-            oldUnscaledHeight != unscaledHeight)
-        {
-            var newDiameter:Number;
-            
-            newDiameter = calculateSpinnerDiameter(unscaledWidth, unscaledHeight);
-            updateSpinner(newDiameter);
-
-            oldUnscaledWidth = unscaledWidth;
-            oldUnscaledHeight = unscaledHeight;
-        }
-    }
-    
-    //--------------------------------------------------------------------------
-    //
-    //  Methods
-    //
-    //--------------------------------------------------------------------------
-
-    /**
-     *   @private
-     *
-     *   Apply the rules to calculate the spinner diameter from the width
-     *   and height.
-     *  
-     *   @param width new width of this component
-     *   @param height new height of this component
-     *    
-     *   @return true if the spinner's diameter changes, false otherwise.
-     */
-    private function calculateSpinnerDiameter(width:Number, height:Number):Number
-    {
-        var diameter:Number = Math.min(width, height);
-        diameter = Math.max(DEFAULT_MINIMUM_SIZE, diameter);
-        if (diameter % 2 != 0)
-            diameter--;
-        
-        return diameter;
-    }
-    
-   /**
-    *   @private
-    * 
-    *   Update the spinner properties and redraw.
-    */
-    private function updateSpinner(diameter:Number):void
-    {
-        var isRotating:Boolean = isRotating();
-        
-        if (isRotating)
-            stopRotation();
-       
-        spinnerDiameter = diameter;
-        spokeColor = getStyle("symbolColor");
-        
-        drawSpinner();
-        
-        if (isRotating)
-            startRotation();
-    }
-
-    /**
-     *  @private
-     * 
-     *  Draw the spinner using the graphics property of this component.
-     */ 
-    mx_internal function drawSpinner():void 
-    {
-        var g:Graphics = graphics;
-        var spinnerRadius:int = spinnerDiameter / 2;
-        var spinnerWidth:int = spinnerDiameter;
-        var spokeHeight:Number = spinnerDiameter / 3.7;
-        var insideDiameter:Number = spinnerDiameter - (spokeHeight * 2); 
-        var spokeWidth:Number = insideDiameter / 5;
-        var eHeight:Number = spokeWidth / 2;
-        var spinnerPadding:Number = 0;
-
-        // Undocumented styles to modified the spokeWidth
-        // and spokeHeight.
-//        if (getStyle("spokeWidth") !== undefined)
-//        {
-//            spokeWidth = getStyle("spokeWidth");
-//            eHeight = spokeWidth / 2;
-//        }
-//        
-//        if (getStyle("spokeHeight") !== undefined)
-//            spokeHeight = getStyle("spokeHeight");
-//        
-//        // spinnerPadding is the padding between the outside
-//        // edge of the circle and the edge of a spoke. 
-//        if (getStyle("spinnerPadding") !== undefined)
-//            spinnerPadding = getStyle("spinnerPadding");
-//
-//        trace("spoke height = " + spokeHeight);
-//        trace("spoke width = " + spokeWidth);
-//        trace("center = " + center);
-        
-        g.clear();
-        
-        // 1
-        drawSpoke(0.20, currentRotation + 300, spokeWidth, spokeHeight, spokeColor, spinnerRadius, eHeight, spinnerPadding);
-        
-        // 2
-        drawSpoke(0.25, currentRotation + 330, spokeWidth, spokeHeight, spokeColor, spinnerRadius, eHeight, spinnerPadding);
-        
-        // 3
-        drawSpoke(0.30, currentRotation, spokeWidth, spokeHeight, spokeColor, spinnerRadius, eHeight, spinnerPadding);
-        
-        // 4
-        drawSpoke(0.35, currentRotation + 30, spokeWidth, spokeHeight, spokeColor, spinnerRadius, eHeight, spinnerPadding);
-        
-        // 5
-        drawSpoke(0.40, currentRotation + 60, spokeWidth, spokeHeight, spokeColor, spinnerRadius, eHeight, spinnerPadding);
-        
-        // 6
-        drawSpoke(0.45, currentRotation + 90, spokeWidth, spokeHeight, spokeColor, spinnerRadius, eHeight, spinnerPadding);
-        
-        // 7
-        drawSpoke(0.50, currentRotation + 120, spokeWidth, spokeHeight, spokeColor, spinnerRadius, eHeight, spinnerPadding);
-
-        // 8
-        drawSpoke(0.60, currentRotation + 150, spokeWidth, spokeHeight, spokeColor, spinnerRadius, eHeight, spinnerPadding);
-
-        // 9
-        drawSpoke(0.70, currentRotation + 180, spokeWidth, spokeHeight, spokeColor, spinnerRadius, eHeight, spinnerPadding);
-        
-        // 10
-        drawSpoke(0.80, currentRotation + 210, spokeWidth, spokeHeight, spokeColor, spinnerRadius, eHeight, spinnerPadding);
-        
-        // 11
-        drawSpoke(0.90, currentRotation + 240, spokeWidth, spokeHeight, spokeColor, spinnerRadius, eHeight, spinnerPadding);
-        
-        // 12
-        drawSpoke(1.0, currentRotation + 270, spokeWidth, spokeHeight, spokeColor, spinnerRadius, eHeight, spinnerPadding);
-    }
-    
-    
-    /**
-     *  @private
-     * 
-     *  @param spokeAlpha: alpha value of the spoke.
-     *  @param spokeWidth: width of the spoke in points.
-     *  @param spokeHeight: the lenght of the spoke in pixels.
-     *  @param spokeColor: the color of the spoke.
-     *  @param spinnerRadius: radius of the spinner.
-     *  @param eHeight: estimated height of the rounded end of the spinner.
-     *  @param spinnerPadding: number of pixels between the outside
-     *  radius of the spinner and the spokes. This is used to make 
-     *  spinners with skinny spokes look better by moving them
-     *  closer to the center of the spinner.
-     */ 
-    private function drawSpoke(spokeAlpha:Number, degrees:int,
-                               spokeWidth:Number, 
-                               spokeHeight:Number, 
-                               spokeColor:uint, 
-                               spinnerRadius:Number, 
-                               eHeight:Number,
-                               spinnerPadding:Number):void
-    {
-        var g:Graphics = graphics;
-        
-        g.lineStyle(spokeWidth, spokeColor, spokeAlpha, false, LineScaleMode.NORMAL, CapsStyle.ROUND);
-        var outsidePoint:Point = calculatePointOnCircle(spinnerRadius, spinnerRadius - eHeight - spinnerPadding, degrees);
-        var insidePoint:Point = calculatePointOnCircle(spinnerRadius, spinnerRadius - spokeHeight + eHeight - spinnerPadding, degrees);
-        g.moveTo(outsidePoint.x, outsidePoint.y);
-        g.lineTo(insidePoint.x,  insidePoint.y);
-            
-    }
-    
-    /**
-     *  @private
-     */ 
-    private function calculatePointOnCircle(center:Number, radius:Number, degrees:Number):Point
-    {
-        var point:Point = new Point();
-        var radians:Number = degrees * RADIANS_PER_DEGREE;
-        point.x = center + radius * Math.cos(radians);
-        point.y = center + radius * Math.sin(radians);
-        
-        return point;
-    }
-    
-    /**
-     *  @private
-     */
-    private function startRotation():void
-    {
-        if (!rotationTimer)
-        {
-            var rotationInterval:Number = getStyle("rotationInterval");
-            if (isNaN(rotationInterval))
-                rotationInterval = DEFAULT_ROTATION_INTERVAL;
-            
-            if (rotationInterval < 16.6)
-                rotationInterval = 16.6;
-            
-            rotationTimer = new Timer(rotationInterval);
-        }
-        
-        if (!rotationTimer.hasEventListener(TimerEvent.TIMER))
-        {
-            rotationTimer.addEventListener(TimerEvent.TIMER, timerHandler);
-            rotationTimer.start();
-        }
-        
-    }
-    
-    /**
-     *  @private
-     */
-    private function stopRotation():void
-    {
-        if (rotationTimer)
-        {
-            rotationTimer.removeEventListener(TimerEvent.TIMER, timerHandler);
-            rotationTimer.stop();
-            rotationTimer = null;
-        }
-    }
- 
-    /**
-     *  @private
-     */
-    private function isRotating():Boolean
-    {
-        return rotationTimer != null;
-    }
-    
-    /**
-     *  The BusyIndicator can be rotated if it is both on the display list and 
-     *  visible.
-     * 
-     *  @returns true if the BusyIndicator can be rotated, false otherwise.
-     */ 
-    private function canRotate():Boolean
-    {
-        if (effectiveVisibility && stage != null)
-            return true;
-        
-        return false;
-    }
-    
-    /**
-     *  @private
-     */
-    private function computeEffectiveVisibility():void
-    {
-        
-        // Check our design layer first.
-        if (designLayer && !designLayer.effectiveVisibility)
-        {
-            effectiveVisibility = false;
-            return;
-        }
-        
-        // Start out with true visibility and enablement
-        // then loop up parent-chain to see if any of them are false.
-        effectiveVisibility = true;
-        var current:IVisualElement = this;
-        
-        while (current)
-        {
-            if (!current.visible)
-            {
-                if (!(current is IUIComponent) || !IUIComponent(current).isPopUp)
-                {
-                    // Treat all pop ups as if they were visible. This is to 
-                    // fix a bug where the BusyIndicator does not spin when it 
-                    // is inside modal popup. The problem is in we do not get 
-                    // an event when the modal window is made visible in 
-                    // PopUpManagerImpl.fadeInEffectEndHandler(). When the modal
-                    // window is made visible, setVisible() is passed "true" so 
-                    // as to not send an event. When do get events when the 
-                    // non-modal windows are popped up. Only modal windows are
-                    // a problem.
-                    // The downside of this fix is BusyIndicator components that are
-                    // inside of hidden, non-modal, popup windows will paint themselves
-                    // on a timer.
-                    effectiveVisibility = false;
-                    break;                  
-                }
-            }
-            
-            current = current.parent as IVisualElement;
-        }
-    }
-    
-    /**
-     *  @private
-     *  Add event listeners for SHOW and HIDE on all the ancestors up the parent chain.
-     *  Adding weak event listeners just to be safe.
-     */
-    private function addVisibilityListeners():void
-    {
-        var current:IVisualElement = this.parent as IVisualElement;
-        while (current)
-        {
-            // add visibility listeners to the parent
-            current.addEventListener(FlexEvent.HIDE, visibilityChangedHandler, false, 0, true);
-            current.addEventListener(FlexEvent.SHOW, visibilityChangedHandler, false, 0, true);
-            
-            current = current.parent as IVisualElement;
-        }
-    }
-
-    /**
-     *  @private
-     *  Remove event listeners for SHOW and HIDE on all the ancestors up the parent chain.
-     */
-    private function removeVisibilityListeners():void
-    {
-        var current:IVisualElement = this;
-        while (current)
-        {
-            current.removeEventListener(FlexEvent.HIDE, visibilityChangedHandler, false);
-            current.removeEventListener(FlexEvent.SHOW, visibilityChangedHandler, false);
-            
-            current = current.parent as IVisualElement;
-        }
-    }
-    
-    //--------------------------------------------------------------------------
-    //
-    //  Overridden event handlers: UIComponent
-    //
-    //--------------------------------------------------------------------------
-    
-    /**
-     *  @private
-     */
-    override protected function layer_PropertyChange(event:PropertyChangeEvent):void
-    {
-        super.layer_PropertyChange(event);
-        
-        if (event.property == "effectiveVisibility")
-        {
-            effectiveVisibilityChanged = true;
-            invalidateProperties();
-        }
-    }
-    
-    //--------------------------------------------------------------------------
-    //
-    //  Event Handlers
-    //
-    //--------------------------------------------------------------------------
- 
-    /**
-     *  @private
-     */
-    private function addedToStageHandler(event:Event):void
-    {
-        // Check our visibility here since we haven't added
-        // visibility listeners yet.
-        computeEffectiveVisibility();
-        
-        if (canRotate())
-            startRotation();
-        
-        addVisibilityListeners();
-    }
-   
-    /**
-     *  @private
-     */
-    private function removedFromStageHandler(event:Event):void
-    {
-        stopRotation();
-        
-        removeVisibilityListeners();
-    }
-    
-    /**
-     *  @private
-     *  Event call back whenever the visibility of us or one of our ancestors 
-     *  changes
-     */
-    private function visibilityChangedHandler(event:FlexEvent):void
-    {
-        effectiveVisibilityChanged = true;
-        invalidateProperties();
-    }
-    
-    /**
-     *  @private
-     * 
-     *  Rotate the spinner once for each timer event.
-     */
-    private function timerHandler(event:TimerEvent):void
-    {
-        currentRotation += 30;
-        if (currentRotation >= 360)
-            currentRotation = 0;
-        
-        drawSpinner();
-        event.updateAfterEvent();
-    }
-  
+		
+		private function computeEffectiveVisibility():void
+		{
+			
+			// Check our design layer first.
+			if (designLayer && !designLayer.effectiveVisibility)
+			{
+				effectiveVisibility = false;
+				return;
+			}
+			
+			// Start out with true visibility and enablement
+			// then loop up parent-chain to see if any of them are false.
+			effectiveVisibility = true;
+			var current:IVisualElement = this;
+			
+			while (current)
+			{
+				if (!current.visible)
+				{
+					if (!(current is IUIComponent) || !IUIComponent(current).isPopUp)
+					{
+						// Treat all pop ups as if they were visible. This is to 
+						// fix a bug where the BusyIndicator does not spin when it 
+						// is inside modal popup. The problem is in we do not get 
+						// an event when the modal window is made visible in 
+						// PopUpManagerImpl.fadeInEffectEndHandler(). When the modal
+						// window is made visible, setVisible() is passed "true" so 
+						// as to not send an event. When do get events when the 
+						// non-modal windows are popped up. Only modal windows are
+						// a problem.
+						// The downside of this fix is BusyIndicator components that are
+						// inside of hidden, non-modal, popup windows will paint themselves
+						// on a timer.
+						effectiveVisibility = false;
+						break;                  
+					}
+				}
+				
+				current = current.parent as IVisualElement;
+			}
+		}
+		
+		/**
+		 *  The BusyIndicator can be rotated if it is both on the display list and 
+		 *  visible.
+		 * 
+		 *  @returns true if the BusyIndicator can be rotated, false otherwise.
+		 */ 
+		private function canRotate():Boolean
+		{
+			if (effectiveVisibility && stage != null)
+				return true;
+			
+			return false;
+		}
+		
+		
+		/**
+		 *  @private
+		 *  Add event listeners for SHOW and HIDE on all the ancestors up the parent chain.
+		 *  Adding weak event listeners just to be safe.
+		 */
+		private function addVisibilityListeners():void
+		{
+			var current:IVisualElement = this.parent as IVisualElement;
+			while (current)
+			{
+				// add visibility listeners to the parent
+				current.addEventListener(FlexEvent.HIDE, visibilityChangedHandler, false, 0, true);
+				current.addEventListener(FlexEvent.SHOW, visibilityChangedHandler, false, 0, true);
+				
+				current = current.parent as IVisualElement;
+			}
+		}
+		
+		/**
+		 *  @private
+		 *  Remove event listeners for SHOW and HIDE on all the ancestors up the parent chain.
+		 */
+		private function removeVisibilityListeners():void
+		{
+			var current:IVisualElement = this;
+			while (current)
+			{
+				current.removeEventListener(FlexEvent.HIDE, visibilityChangedHandler, false);
+				current.removeEventListener(FlexEvent.SHOW, visibilityChangedHandler, false);
+				
+				current = current.parent as IVisualElement;
+			}
+		}
+		
+		/**
+		 *  @private
+		 *  Event call back whenever the visibility of us or one of our ancestors 
+		 *  changes
+		 */
+		private function visibilityChangedHandler(event:FlexEvent):void
+		{
+			effectiveVisibilityChanged = true;
+			invalidateProperties();
+		}
+		
+		
+	}
 }
-}
+