In this section we are going to enhance the design and layout a bit more. We are going to wrap the content in containers, center the content and add a flexible liquid background image to it using a technology called Scale Factor 9. Using this advancedments of prestidigitation we bind the images to the container corners using an inverted quantum bitmap pixel matrix. We then convert those pixels to bioelectric nuetrino fields and display them once at 30,000 microseconds per frame.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"
	color="#333333"
	backgroundColor="#ffffff"
	backgroundGradientColors="[#ffffff, #ffffff]"
	backgroundGradientAlphas="[1, 1]" 
	themeColor="#CCCCCC"
	xmlns:managers="com.flexcapacitor.managers.*" 
	xmlns:controls="com.flexcapacitor.controls.*" 
	xmlns:vo="com.flexcapacitor.vo.*"
	horizontalAlign="center">

	<!-- STYLES -->
	<mx:Style>

		global {
			font-size:11;
			linkColor:#185fc0;
		}
		VScrollBar {
			trackColors: #F5F5F5, #F5F5F5;
			themeColor: #AAAAAA;
		}
		Alert {
			backgroundColor: #bbbbbb;
			borderColor: #bbbbbb;
			color: #000000;
		}
		TextAutoSize {
			linkColor:#185fc0;
		}
		TextLink {
			rollOverColor:#185fc0;
			underlineOnRollOver:true;
		}

		.headerStyle {
			font-weight:bold;
			font-size:36;
			underlineOnRollOver:false;
		}

		.backgroundImage {
			background-image:Embed(source="/images/blogBackgroundEdge.png", scaleGridLeft="9", scaleGridTop="9", scaleGridRight="733", scaleGridBottom="181");
			background-size: "100%";
		}

	</mx:Style>

	<managers:LinkManager debug="true" projectName="ACME Inc." defaultFragment="start" isTitleBeforeProjectName="true">
		<managers:stateOptions>
			<vo:StateOption stateName="about" displayName="About"/>
			<vo:StateOption stateName="contact" displayName="Contact Us"/>
			<vo:StateOption stateName="products" displayName="Our Products"/>
			<vo:StateOption stateName="services" displayName="Our Services"/>
		</managers:stateOptions>
	</managers:LinkManager>

	<managers:ContextMenuManager/>

	<managers:MouseWheelManager />

	<managers:ImageDragManager />

	<mx:VBox width="650" horizontalCenter="0">
		<mx:Spacer height="15"/>
		<mx:Canvas styleName="backgroundImage" width="100%" >
			<controls:TextLink x="17" y="10" text="ACME Inc." styleName="headerStyle" hyperlink="start"/>
			<mx:HBox x="17" y="68" id="hbox1" styleName="backgroundStyle">
				<controls:TextLink text="Home" id="homeLink1" hyperlink="start"/>
				<controls:TextLink text="Products" id="productsLink1" hyperlink="products"/>
				<controls:TextLink text="Services" id="servicesLink1" hyperlink="services"/>
				<controls:TextLink text="Contact Us" id="contactUsLink1" hyperlink="contact"/>
				<controls:TextLink text="About" id="aboutLink1" hyperlink="about"/>
			</mx:HBox>
			<mx:Text y="100" id="text1" fontWeight="bold" text="base" left="17" fontSize="14" color="#555555"/>
			<mx:VBox y="130" id="vbox1" left="10" right="20">
				<mx:HBox width="100%" id="contentBox1">
				</mx:HBox>
				<mx:VBox width="100%" horizontalAlign="center" verticalAlign="top">
					<mx:Spacer height="10"/>
					<mx:Text text="Copyright 2009 Flex Capacitor" fontWeight="bold" fontSize="10" fontFamily="Arial"/>
					<mx:Spacer height="10"/>
				</mx:VBox>
			</mx:VBox>
		</mx:Canvas>
		<mx:Spacer height="15"/>
	</mx:VBox>

	<mx:states>
		<mx:State name="about">
			<mx:SetProperty target="{text1}" name="text" value="About"/>
			<mx:AddChild relativeTo="{contentBox1}" position="lastChild">
				<controls:TextAutoSize width="100%" source="content/about.txt"/>
			</mx:AddChild>
		</mx:State>
		<mx:State name="contact">
			<mx:SetProperty target="{text1}" name="text" value="Contact"/>
			<mx:AddChild relativeTo="{contentBox1}" position="lastChild">
				<controls:TextAutoSize width="100%" source="content/contact.txt"/>
			</mx:AddChild>
		</mx:State>
		<mx:State name="products">
			<mx:SetProperty target="{text1}" name="text" value="Products"/>
			<mx:AddChild relativeTo="{contentBox1}" position="lastChild">
				<controls:TextAutoSize width="100%" source="content/products.xml"/>
			</mx:AddChild>
		</mx:State>
		<mx:State name="services">
			<mx:SetProperty target="{text1}" name="text" value="Services"/>
			<mx:AddChild relativeTo="{contentBox1}" position="lastChild">
				<controls:TextAutoSize width="100%" source="content/services.txt"/>
			</mx:AddChild>
		</mx:State>
		<mx:State name="start">
			<mx:SetProperty target="{text1}" name="text" value="Home"/>
			<mx:AddChild relativeTo="{contentBox1}" position="lastChild">
				<controls:TextAutoSize width="100%" source="content/welcome.txt"/>
			</mx:AddChild>
		</mx:State>
	</mx:states>

</mx:Application>