// Main Style Sheet
<Style resid=mainss>

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

    // Style changes for Element with ID of "hello"
    Element [ID=atom(hello)]
    {
        Padding: Rect(5,5,50,5);
        BorderThickness: Rect(5,5,25,5);
        BorderColor: Red;
        ContentAlign: MiddleLeft;
        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]
    {
        Padding: Rect(4,4,4,4);
        BorderThickness:  Rect(1,1,1,1);
        BorderColor:  RoyalBlue;
        Background:  PaleTurquoise;
        Foreground:  SteelBlue;
        Cursor: Hand;
    }

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

// UI template
<Element resid=main Direction=RTL Sheet=styleref(mainss) Layout=BorderLayout()>
    <Element LayoutPos=Top Padding=Rect(1,1,1,1)>"Test Frame"</Element>
    <Element LayoutPos=Bottom Layout=FlowLayout(0,0,1) Padding=Rect(20,2,20,2)>
        <Button>"Option 1"</Button>
        <Button>"Option 2"</Button>
        <Button>"Option 3"</Button>
    </Element>
    <Element ID=atom(hello) LayoutPos=Client>
        "Hello World!"
    </Element>
</Element>
  