<?xml version="1.0" encoding="utf-8"?>
<!--

  Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.

-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		title="Multiple queries">
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		
		/* Generic style */
		.buttonMultipleQueriesTest
		{
			chromeColor: #AAAAAA;
			color: #000000;
			fontSize: 24;
		}
		
		/* Styles when running on emulator (superseded by specific os-platform values below) */
		@media screen and (application-dpi: 160)
		{
			.buttonMultipleQueriesTest
			{
				chromeColor: #990000;
				color: #990000;
				fontSize: 22;
			}
		}
		@media screen and (application-dpi: 240)
		{
			.buttonMultipleQueriesTest
			{
				chromeColor: #990000;
				color: #009900;
				fontSize: 26;
			}
		}
		@media screen and (application-dpi: 320)
		{
			.buttonMultipleQueriesTest
			{
				chromeColor: #000099;
				color: #009999;
				fontSize: 28;
			}
		}
		
		/* Styles when running on Android devices */
		@media screen and (os-platform: "Android") and (application-dpi: 160)
		{
			.buttonMultipleQueriesTest
			{
				chromeColor: #990000;
				color: #990000;
				fontSize: 22;
			}
		}
		@media (os-platform: "Android") and (application-dpi: 240)
		{
			.buttonMultipleQueriesTest
			{
				chromeColor: #990000;
				color: #009900;
				fontSize: 26;
			}
		}
		
		/* Styles when running on iOS devices */
		@media all and (os-platform: "IOS") and (application-dpi: 160)
		{
			.buttonMultipleQueriesTest
			{
				chromeColor: #000099;
				color: #990000;
				fontSize: 22;
			}
		}
		@media (os-platform: "IOS") and (application-dpi: 320)
		{
			.buttonMultipleQueriesTest
			{
				chromeColor: #000099;
				color: #009999;
				fontSize: 28;
			}
		}
	</fx:Style>
	<s:Button id="testButton" label="test button" styleName="buttonMultipleQueriesTest" left="10" top="10" />
	
	<s:VGroup top="100" left="10" right="10" bottom="10">
		<s:Label fontWeight="bold" text="Expected Output:" fontSize="20" color="#666666" />
		<s:Label text="Android 160dpi devices: 22 font, red text, red chrome" fontSize="16" color="#666666" />
		<s:Label text="IOS 160dpi devices: 22 font, red text, blue chrome" fontSize="16" color="#666666" />
		<s:Label text="Android 240dpi devices: 26 font, green text, red chrome" fontSize="16" color="#666666" />
		<s:Label text="Android 320dpi devices: 28 font, teal text, red chrome" fontSize="16" color="#666666" />
		<s:Label text="IOS 320dpi devices: 28 font, teal text, blue chrome" fontSize="16" color="#666666" />
		<s:Label text="Others: 24 font, black text, gray chrome" fontSize="16" color="#666666" />
	</s:VGroup>
</s:View>