// Main Style Sheet
<Style resid=mainss>

    // Standard style for Element and Button
    Element
    {
        Background: NavajoWhite;
        ContentAlign: MiddleCenter;
        FontFace: "Tahoma";
        FontSize: 16;
    }
    Button
    {
        BorderThickness: Rect(1,1,1,1);
        BorderColor: GoldenRod;
        Padding: Rect(4,4,4,4);
        Margin: Rect(5,0,5,0);
    }

    // Style changes for Element with ID of "hello"
    Element [ID=atom(hello)]
    {
        FontSize: 80;
        FontFace: "trebuchet MS";
        Background: Gradient(ARGB(0,0,0,0), ARGB(0,244,128,96), 1);
        Foreground: Khaki;
    }

    // Style changes for Button when it has MouseFocus
    Button [MouseFocused]
    {
        BorderColor:  RoyalBlue;
        Background:  PaleTurquoise;
        Foreground:  SteelBlue;
        Cursor: Hand;
    }

    // Style changes for Button when it is Pressed
    Button [Pressed]
    {
        Background: Cyan;
        Foreground:  Blue;
    }

    Button [KeyFocused]
    {
        Background: Goldenrod;
        BorderColor: Yellow;
    }
</Style>

// UI template
<Element resid=main Sheet=styleref(mainss) Layout=GridLayout(2,2)>
  <Element Layout=NineGridLayout()>
    <Button LayoutPos=NineTop>"One"</Button>
    <Button LayoutPos=NineBottom>"Two"</Button>
    <Button LayoutPos=NineLeft>"Three"</Button>
    <Button LayoutPos=NineTopLeft>"Four"</Button>
    <Button LayoutPos=NineRight>"Five"</Button>
    <Button LayoutPos=NineBottomRight>"Six"</Button>
    <Button LayoutPos=NineClient>"Seven"</Button>
    <Button LayoutPos=NineBottomLeft>"Eight"</Button>
    <Button LayoutPos=NineTopRight>"Nine"</Button>
  </Element>
  <Element Layout=FlowLayout(1,3,0,3)>
    <Button>"One"</Button>
    <Button>"Two"</Button>
    <Button>"Three"</Button>
    <Button>"Four"</Button>
    <Button>"Five"</Button>
    <Button>"Six"</Button>
    <Button>"Seven"</Button>
    <Button>"Eight"</Button>
    <Button>"Nine"</Button>
    <Button>"Ten"</Button>	
  </Element>
  <Element Layout=VerticalFlowLayout(1,3,0,3)>
    <Button>"One"</Button>
    <Button>"Two"</Button>
    <Button>"Three"</Button>
    <Button>"Four"</Button>
    <Button>"Five"</Button>
    <Button>"Six"</Button>
    <Button>"Seven"</Button>
    <Button>"Eight"</Button>
    <Button>"Nine"</Button>
    <Button>"Ten"</Button>
  </Element>
  <Element Layout=NineGridLayout()>
    <Button LayoutPos=NineTop>"One"</Button>
    <Button LayoutPos=NineBottom>"Two"</Button>
    <Button LayoutPos=NineLeft>"Three"</Button>
    <Button LayoutPos=NineTopLeft>"Four"</Button>
    <Button LayoutPos=NineRight>"Five"</Button>
    <Button LayoutPos=NineBottomRight>"Six"</Button>
    <Button LayoutPos=NineClient>"Seven"</Button>
    <Button LayoutPos=NineBottomLeft>"Eight"</Button>
    <Button LayoutPos=NineTopRight>"Nine"</Button>
  </Element>
</Element>
