/*
 *
 *  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.
 *
 */

@namespace "library://ns.adobe.com/flex/spark";

/*
Default Mobile Flex skins and styles. Defaults sizes are based on
application-dpi=240.
*/

ActionBar
{
    chromeColor: #484848;
    defaultButtonAppearance: normal;
    skinClass: ClassReference("spark.skins.mobile.ActionBarSkin");
    textShadowAlpha: .65;
    textShadowColor: #000000;
    paddingBottom: 1;
    paddingLeft: 0;
    paddingRight: 0;
    paddingTop: 1;
}

ActionBar.beveled
{
    paddingLeft: 7;
    paddingRight: 7;
    titleAlign: center;
}

ActionBar #titleDisplay
{
    color: #FFFFFF;
    fontSize: 28;
    fontWeight: bold;
}

ActionBar ButtonBase
{
    color: #FFFFFF;
}

ActionBar Group#navigationGroup Button
{
    skinClass: ClassReference("spark.skins.mobile.TransparentNavigationButtonSkin");
}

ActionBar Group#navigationGroup Button.emphasized
{
    skinClass: ClassReference("spark.skins.mobile.DefaultTransparentNavigationButtonSkin");
}

ActionBar.beveled Group#navigationGroup Button
{
    fontSize: 18;
    skinClass: ClassReference("spark.skins.mobile.BeveledBackButtonSkin");
}

ActionBar.beveled Group#navigationGroup Button.emphasized
{
    skinClass: ClassReference("spark.skins.mobile.DefaultBeveledBackButtonSkin");
}

ActionBar Group#actionGroup Button
{
    skinClass: ClassReference("spark.skins.mobile.TransparentActionButtonSkin");
}

ActionBar Group#actionGroup Button.emphasized
{
    skinClass: ClassReference("spark.skins.mobile.DefaultTransparentActionButtonSkin");
}

ActionBar.beveled Group#actionGroup Button
{
    fontSize: 18;
    skinClass: ClassReference("spark.skins.mobile.BeveledActionButtonSkin");
}

ActionBar.beveled Group#actionGroup Button.emphasized
{
    skinClass: ClassReference("spark.skins.mobile.DefaultBeveledActionButtonSkin");
}

BusyIndicator
{
    rotationInterval: 50;
}

Button
{
    fontWeight: "bold";
    skinClass: ClassReference("spark.skins.mobile.ButtonSkin");
}

Button.emphasized
{
    skinClass: ClassReference("spark.skins.mobile.DefaultButtonSkin");
}

ButtonBar
{
    fontWeight: "bold";
    skinClass: ClassReference("spark.skins.mobile.ButtonBarSkin");
}

ButtonBase
{
    iconPlacement: "left";
}

Callout
{
    backgroundColor: #484848;
    contentBackgroundAppearance: inset;
    contentBackgroundColor: #FFFFFF;
    gap: 12;
    skinClass: ClassReference("spark.skins.mobile.CalloutSkin");
}

Callout ViewNavigator
{
    skinClass: ClassReference("spark.skins.mobile.CalloutViewNavigatorSkin");
}

Callout ViewNavigator ActionBar
{
    skinClass: ClassReference("spark.skins.mobile.CalloutActionBarSkin");
    defaultButtonAppearance: beveled;
    paddingLeft: 0;
    paddingRight: 0;
}

Callout ViewNavigator ActionBar.beveled
{
    paddingLeft: 0;
    paddingRight: 0;
}

Callout ViewNavigator ActionBar.beveled Group#navigationGroup Button
{
    skinClass: ClassReference("spark.skins.mobile.BeveledActionButtonSkin");
}

Callout ViewNavigator ActionBar.beveled Group#navigationGroup Button.emphasized
{
    skinClass: ClassReference("spark.skins.mobile.DefaultBeveledActionButtonSkin");
}

Callout#viewNavigatorPopUp
{
    contentBackgroundAppearance: none;
}

CheckBox
{
    skinClass: ClassReference("spark.skins.mobile.CheckBoxSkin");
}

DateSpinner
{
	skinClass: ClassReference("spark.skins.mobile.DateSpinnerSkin");    
}

HScrollBar
{
    skinClass: ClassReference("spark.skins.mobile.HScrollBarSkin");
}

HSlider
{
    skinClass: ClassReference("spark.skins.mobile.HSliderSkin");
}

IconItemRenderer
{
    paddingBottom: 12;
    paddingTop: 12;
    horizontalGap: 10;
    verticalGap: 9;
    iconDelay: 500;
    messageStyleName: "iconItemRendererMessageStyle";
}

.iconItemRendererMessageStyle
{
    fontSize: 20;
    color: #333333;
}

Image
{
    skinClass: ClassReference("spark.skins.mobile.ImageSkin");
    enableLoadingState: false;
    showErrorSkin : false;
    smoothingQuality: "default";
}

LabelItemRenderer
{
    paddingBottom: 24;
    paddingLeft: 15;
    paddingRight: 15;
    paddingTop: 24;
    verticalAlign: "middle";
}

List
{
    skinClass: ClassReference("spark.skins.mobile.ListSkin");
    borderColor: #000000;
    borderAlpha: 1;
    verticalScrollPolicy: on;
    borderVisible: false;
}

RadioButton
{
    skinClass: ClassReference("spark.skins.mobile.RadioButtonSkin");
}

Scroller
{
    touchDelay: 100;
}

SkinnableContainer
{
    backgroundColor: #FFFFFF;
    skinClass: ClassReference("spark.skins.mobile.SkinnableContainerSkin");
}

SkinnableTextBase:normalWithPrompt 
{
    fontStyle: normal;
}

SkinnableTextBase:disabledWithPrompt 
{
    fontStyle: normal;
}

SpinnerList
{
	skinClass: ClassReference("spark.skins.mobile.SpinnerListSkin");
}

SpinnerListContainer
{
	skinClass: ClassReference("spark.skins.mobile.SpinnerListContainerSkin");    
}

SpinnerListItemRenderer
{
	paddingTop : 18;
	paddingBottom : 18;
	paddingLeft : 16;
	paddingRight : 16;
}

SplitViewNavigator
{
	skinClass: ClassReference("spark.skins.mobile.SplitViewNavigatorSkin");
    backgroundColor: #000000;
}

TabbedViewNavigatorApplication
{
    backgroundColor: #FFFFFF;
    skinClass: ClassReference("spark.skins.mobile.TabbedViewNavigatorApplicationSkin");
}

TabbedViewNavigator
{
    skinClass: ClassReference("spark.skins.mobile.TabbedViewNavigatorSkin");
}

TabbedViewNavigator #tabBar
{
    chromeColor: #484848;
    color: #FFFFFF;
    fontSize: 20;
    fontWeight: normal;
    iconPlacement: top;
    interactionMode: mouse;
    skinClass: ClassReference("spark.skins.mobile.TabbedViewNavigatorTabBarSkin");
    textShadowAlpha: .65;
    textShadowColor: #000000;
}

TextArea
{
    paddingBottom: 9;
    paddingLeft: 9;
    paddingRight: 9;
    paddingTop: 9;
    showPromptWhenFocused: true;
    skinClass: ClassReference("spark.skins.mobile.StageTextAreaSkin");
}

TextArea VScrollBar
{
    skinClass: ClassReference("spark.skins.mobile.TextAreaVScrollBarSkin");
}

TextArea HScrollBar
{
    skinClass: ClassReference("spark.skins.mobile.TextAreaHScrollBarSkin");
}

TextInput
{
    paddingBottom: 9;
    paddingLeft: 9;
    paddingRight: 9;
    paddingTop: 9;
    showPromptWhenFocused: true;
    skinClass: ClassReference("spark.skins.mobile.StageTextInputSkin");
}

ToggleSwitch
{
    accentColor: #3F7FBA;
    color: #FFFFFF;
    fontSize: 27;
    skinClass: ClassReference("spark.skins.mobile.ToggleSwitchSkin");
    slideDuration: 125;
    textShadowAlpha: .65;
    textShadowColor: #000000;
}

View
{
    backgroundColor: #FFFFFF;
    skinClass: ClassReference("spark.skins.mobile.SkinnableContainerSkin");
}

ViewMenu
{
    skinClass: ClassReference("spark.skins.mobile.ViewMenuSkin");
}

ViewMenuItem
{ 
    iconPlacement : "top";
    chromeColor : #FFFFFF;
    paddingBottom: 8;
    paddingLeft: 8;
    paddingRight: 8;
    paddingTop: 8;
    skinClass : ClassReference("spark.skins.mobile.ViewMenuItemSkin");
}

ViewNavigator
{
    skinClass: ClassReference("spark.skins.mobile.ViewNavigatorSkin");
}

ViewNavigatorApplication
{
    backgroundColor: #FFFFFF;
    skinClass: ClassReference("spark.skins.mobile.ViewNavigatorApplicationSkin");
}

VScrollBar
{
    skinClass: ClassReference("spark.skins.mobile.VScrollBarSkin");
}

global
{
    /* framework styles */
    modalTransparency: 0;
    modalTransparencyBlur: 0;
    
    /* Looks */
    backgroundAlpha : 1;
    backgroundImageFillMode : "scale";
    borderVisible : true;
    borderWeight : 1;
    contentBackgroundColor: #F0F0F0;
    downColor: #E0E0E0; /* set in here and not in framework's default.css because it only is really applicable for touch interactions*/
    selectionColor: #E0E0E0;
    alternatingItemColors: #FFFFFF;
    focusThickness: 3;
    symbolColor: #000000;
    fontLookup: "embeddedCFF";
    fontFamily: "_sans";
    fontSize: 24;
    color: #000000;
    textShadowColor: #FFFFFF;
    textShadowAlpha: .55;
    
    /* Behaviors */
    autoThumbVisibility: true;
    fixedThumbSize: false;
    fullScreenHideControlsDelay: 3000;
    interactionMode: "touch";
    liveDragging: true;
    rollOverOpenDelay: 200;
    slideDuration: 300;
    smoothScrolling: true;
    touchDelay: 0; /* default to 0 here, but Scroller sets it to 100 */
}

@media (application-dpi: 120)
{
	ActionBar
	{
		paddingBottom: 1;
		paddingLeft: 0;
		paddingRight: 0;
		paddingTop: 1;
	}
	
	ActionBar.beveled
	{
		paddingLeft: 4;
		paddingRight: 4;
	}
	
	ActionBar #titleDisplay
	{
		fontSize: 14;
	}
	
	ActionBar.beveled Group#navigationGroup Button
	{
		fontSize: 9;
	}
	
	ActionBar.beveled Group#actionGroup Button
	{
		fontSize: 9;
	}
	
	Callout
	{
		gap: 6;
	}
	
	IconItemRenderer
	{
		paddingBottom: 6;
		paddingTop: 6;
		horizontalGap: 6;
		verticalGap: 3;
	}
	
	.iconItemRendererMessageStyle
	{
		fontSize: 11;
	}
	
	LabelItemRenderer
	{
		paddingBottom: 12;
		paddingLeft: 8;
		paddingRight: 8;
		paddingTop: 12;
	}
	
	SpinnerListItemRenderer
	{
		paddingTop : 8;
		paddingBottom : 8;
		paddingLeft : 6;
		paddingRight : 6;
	}
	
	TextArea
	{
		paddingBottom: 4;
		paddingLeft: 4;
		paddingRight: 4;
		paddingTop: 4;
	}
	
	TextInput
	{
		paddingBottom: 4;
		paddingLeft: 4;
		paddingRight: 4;
		paddingTop: 4;
	}
	
	TabbedViewNavigator #tabBar
	{
		fontSize: 11;
	}
	
	ToggleSwitch
	{
		fontSize: 14;
	}
	
	global
	{
		fontSize: 12;
		focusThickness: 2;
	}
}


@media (application-dpi: 160)
{
    ActionBar
    {
        paddingBottom: 1;
        paddingLeft: 0;
        paddingRight: 0;
        paddingTop: 1;
    }
    
    ActionBar.beveled
    {
        paddingLeft: 5;
        paddingRight: 5;
    }
    
    ActionBar #titleDisplay
    {
        fontSize: 18;
    }
    
    ActionBar.beveled Group#navigationGroup Button
    {
        fontSize: 12;
    }
    
    ActionBar.beveled Group#actionGroup Button
    {
        fontSize: 12;
    }
    
    Callout
    {
        gap: 8;
    }
    
    IconItemRenderer
    {
        paddingBottom: 8;
        paddingTop: 8;
        horizontalGap: 8;
        verticalGap: 6;
    }
    
    .iconItemRendererMessageStyle
    {
        fontSize: 14;
    }
    
    LabelItemRenderer
    {
        paddingBottom: 16;
        paddingLeft: 10;
        paddingRight: 10;
        paddingTop: 16;
    }
    
	SpinnerListItemRenderer
	{
		paddingTop : 12;
		paddingBottom : 12;
		paddingLeft : 8;
		paddingRight : 8;
	}
	
    TextArea
    {
        paddingBottom: 6;
        paddingLeft: 6;
        paddingRight: 6;
        paddingTop: 6;
    }
    
    TextInput
    {
        paddingBottom: 6;
        paddingLeft: 6;
        paddingRight: 6;
        paddingTop: 6;
    }
    
    TabbedViewNavigator #tabBar
    {
        fontSize: 14;
    }
    
    ToggleSwitch
    {
        fontSize: 18;
    }
    
    global
    {
        fontSize: 16;
        focusThickness: 2;
    }
}

@media (application-dpi: 320)
{
    ActionBar
    {
        paddingBottom: 2;
        paddingLeft: 0;
        paddingRight: 0;
        paddingTop: 2;
    }
    
    ActionBar.beveled
    {
        paddingLeft: 10;
        paddingRight: 10;
    }
    
    ActionBar #titleDisplay
    {
        fontSize: 36;
    }
    
    ActionBar.beveled Group#navigationGroup Button
    {
        fontSize: 24;
    }
    
    ActionBar.beveled Group#actionGroup Button
    {
        fontSize: 24;
    }
    
    Callout
    {
        gap: 16;
    }
    
    IconItemRenderer
    {
        paddingBottom: 16;
        paddingTop: 16;
        horizontalGap: 16;
        verticalGap: 12;
    }
    
    .iconItemRendererMessageStyle
    {
        fontSize: 26;
    }
    
    LabelItemRenderer
    {
        paddingBottom: 32;
        paddingLeft: 20;
        paddingRight: 20;
        paddingTop: 32;  
    }
    
	SpinnerListItemRenderer
	{
		paddingTop : 24;
		paddingBottom : 24;
		paddingLeft : 24;
		paddingRight : 24;
	}
	
    TextArea
    {
        paddingBottom: 12;
        paddingLeft: 12;
        paddingRight: 12;
        paddingTop: 12;
    }
    
    TextInput
    {
        paddingBottom: 12;
        paddingLeft: 12;
        paddingRight: 12;
        paddingTop: 12;
    }
    
    TabbedViewNavigator #tabBar
    {
        fontSize: 28;
    }
    
    ToggleSwitch
    {
        fontSize: 36;
    }
    
    global
    {
        fontSize: 32;
    }
}

@media (application-dpi: 480)
{
	ActionBar
	{
		paddingBottom: 4;
		paddingLeft: 0;
		paddingRight: 0;
		paddingTop: 4;
	}
	
	ActionBar.beveled
	{
		paddingLeft: 15;
		paddingRight: 15;
	}
	
	ActionBar #titleDisplay
	{
		fontSize: 54;
	}
	
	ActionBar.beveled Group#navigationGroup Button
	{
		fontSize: 36;
	}
	
	ActionBar.beveled Group#actionGroup Button
	{
		fontSize: 36;
	}
	
	Callout
	{
		gap: 24;
	}
	
	IconItemRenderer
	{
		paddingBottom: 24;
		paddingTop: 24;
		horizontalGap: 24;
		verticalGap: 18;
	}
	
	.iconItemRendererMessageStyle
	{
		fontSize: 42;
	}
	
	LabelItemRenderer
	{
		paddingBottom: 48;
		paddingLeft: 30;
		paddingRight: 30;
		paddingTop: 48;
	}
	
	SpinnerListItemRenderer
	{
		paddingTop : 36;
		paddingBottom : 36;
		paddingLeft : 24;
		paddingRight : 24;
	}
	
	TextArea
	{
		paddingBottom: 18;
		paddingLeft: 18;
		paddingRight: 18;
		paddingTop: 18;
	}
	
	TextInput
	{
		paddingBottom: 18;
		paddingLeft: 18;
		paddingRight: 18;
		paddingTop: 18;
	}
	
	TabbedViewNavigator #tabBar
	{
		fontSize: 42;
	}
	
	ToggleSwitch
	{
		fontSize: 54;
	}
	
	global
	{
		fontSize: 48;
		focusThickness: 6;
	}
}


@media (application-dpi: 640)
{
	ActionBar
	{
		paddingBottom: 4;
		paddingLeft: 0;
		paddingRight: 0;
		paddingTop: 4;
	}
	
	ActionBar.beveled
	{
		paddingLeft: 20;
		paddingRight: 20;
	}
	
	ActionBar #titleDisplay
	{
		fontSize: 72;
	}
	
	ActionBar.beveled Group#navigationGroup Button
	{
		fontSize: 48;
	}
	
	ActionBar.beveled Group#actionGroup Button
	{
		fontSize: 48;
	}
	
	Callout
	{
		gap: 32;
	}
	
	IconItemRenderer
	{
		paddingBottom: 32;
		paddingTop: 32;
		horizontalGap: 32;
		verticalGap: 36;
	}
	
	.iconItemRendererMessageStyle
	{
		fontSize: 26;
	}
	
	LabelItemRenderer
	{
		paddingBottom: 64;
		paddingLeft: 40;
		paddingRight: 40;
		paddingTop: 64;  
	}
	
	SpinnerListItemRenderer
	{
		paddingTop : 48;
		paddingBottom : 48;
		paddingLeft : 48;
		paddingRight : 48;
	}
	
	TextArea
	{
		paddingBottom: 24;
		paddingLeft: 24;
		paddingRight: 24;
		paddingTop: 24;
	}
	
	TextInput
	{
		paddingBottom: 24;
		paddingLeft: 24;
		paddingRight: 24;
		paddingTop: 24;
	}
	
	TabbedViewNavigator #tabBar
	{
		fontSize: 56;
	}
	
	ToggleSwitch
	{
		fontSize: 72;
	}
	
	global
	{
		fontSize: 64;
	}
}


@media (application-dpi: 160) AND (os-platform:"IOS")
{
    TextArea
    {
        leading: 1.5;
        paddingRight: 1.5;
    }
}

@media (application-dpi: 320) AND (os-platform:"IOS")
{
    TextArea
    {
        leading: 4.5;
        paddingRight: 3;
    }
}