<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	backgroundColor="#000000"
	layout="horizontal"
	horizontalGap="25">

    <mx:Style>
        Panel {
            backgroundAlpha: 1;
            borderAlpha: 1;
            headerColors: #c7c7c7, #ffffff;
            footerColors: #ffffff, #c7c7c7;
            paddingTop: 15;
            paddingRight: 15;
            paddingLeft: 15;
            paddingBottom: 15;
            shadowDirection: "right";
        }
        .header {
            color: #ffffff;
            fontSize: 15;
            fontWeight: "bold";
        }
    </mx:Style>

    <mx:VBox verticalGap="10">

        <mx:Panel title="Featured Photograph">

            <mx:Image source="assets/animals03.jpg"
                horizontalCenter="0" top="30" />

            <mx:Label text="Photographed by Elsie Weil"
                horizontalCenter="0" top="250" />

       </mx:Panel>

        <mx:Panel title="Provide feedback">

            <mx:Form x="50" y="50"
                verticalGap="15">

            <mx:FormHeading label="Send us comments" />

            <mx:FormItem label="Full Name:">
                <mx:TextInput id="fullName" />
            </mx:FormItem>

            <mx:FormItem label="Email:">
                <mx:TextInput id="email" />
            </mx:FormItem>

            <mx:FormItem label="Comments:">
                <mx:TextArea id="comments" />
            </mx:FormItem>

            <mx:FormItem>
                <mx:Button id="submit"
                    label="submit" />
            </mx:FormItem>

            </mx:Form>

        </mx:Panel>

    </mx:VBox>

    <mx:VBox verticalGap="25">

        <mx:Canvas>
            <mx:Label text="Category: Animals"
                styleName="header"  />
            <mx:Image source="assets/animals03_sm.jpg" y="30" />
            <mx:Image source="assets/animals08_sm.jpg" y="120" />
            <mx:Image source="assets/animals09_sm.jpg" y="120" x="120" />
            <mx:Image source="assets/animals10_sm.jpg" y="120" x="240" />
            <mx:Image source="assets/animals11_sm.jpg" y="211" />
            <mx:Image source="assets/animals12_sm.jpg" y="211" x="120" />
            <mx:Image source="assets/animals06_sm.jpg" y="30" x="120" />
            <mx:Image source="assets/animals07_sm.jpg" y="30" x="240" />
        </mx:Canvas>

         <mx:Canvas>
             <mx:Label text="Category: Cities"
                 styleName="header" />
            <mx:Image source="assets/city01_sm.jpg" y="30" />
            <mx:Image source="assets/city02_sm.jpg" y="30"  x="120"/>
            <mx:Image source="assets/city03_sm.jpg" y="30" x="240" />
            <mx:Image source="assets/city04_sm.jpg" y="120" x="0" />
        </mx:Canvas>

    </mx:VBox>

</mx:Application>