//
// Start Page resource file
//

#include "resource.h"

/*****************************************************
 * Default style sheet rules
 *****************************************************/

<style resid=main>

    startframe
    {
        foreground: white;
        background: argb(0,0,0,0);
        fontsize: 12pt;
    }

    element
    {
        background: argb(0,0,0,0);
    }

    button
    {
        foreground: white;
        background: argb(0,0,0,0);
        fontface: "trebuchet MS";
        fontsize: 12pt;
        fontweight: 700;
        padding: rect(3,3,3,3);
        cursor: hand;
    }

    button [mousefocused]
    {
        fontstyle: underline;
    }

    button [keyfocused]
    {
        background: argb(48, 128, 128, 128);
    }

    selector
    {
        foreground: white;
        background: firebrick;
        fontsize: 12pt;
    }

</style>

<style resid=listlabel>

    element
    {
        fontface: "trebuchet MS";
        fontsize: 12pt;
        fontweight: 800;
        foreground: orange;
        background: argb(0,0,0,0);
    }

    button
    {
        padding: rect(5,0,0,0);
        foreground: gray;
        cursor: hand;
    }

    button [mousefocused]
    {
        fontstyle: underline;
    }

    button [keyfocused]
    {
        background: argb(48, 128, 128, 128);
    }

</style>

<style resid=list>

    selector
    {
        foreground: black;
        background: argb(0,0,0,0);
        fontsize: 10pt;
        fontface: "tahoma";
    }

    selector [id=atom(programlist)]
    {
        fontsize: 12pt;
    }

    element
    {
        padding: rect(2,2,2,2);
    }

    button
    {
        margin: rect(10,10,10,10);
        cursor: hand;
    }

    button [mousefocused]
    {
        fontstyle: underline;
    }

    button [keyfocused]
    {
        background: argb(48, 128, 128, 128);
    }

</style>

<style resid=optionbar>

    element
    {
        background: midnightblue;
    }

    element [class="sep"]
    {
        padding: rect(2,2,2,2);
    }

    button
    {
        fontface: "trebuchet MS";
        fontsize: 9pt;
        foreground: white;
        padding: rect(2,2,2,2);
        cursor: hand;
    }

    button [mousefocused]
    {
        fontstyle: underline;
    }

    button [keyfocused]
    {
        background: argb(48, 128, 128, 128);
    }

</style>

/*****************************************************
 * Element resources
 *****************************************************/

//
// Start frame
//

<startframe resid=main sheet=styleref(main) id=atom(frame)>

    // Option bar
    <element sheet=styleref(optionbar) layout=borderlayout()>
        <element layoutpos=left layout=flowlayout(1,2) padding=rect(15,5,5,5)>
            <button id=atom(logoff)>"Log Off"</button>
            <element class="sep">"|"</element>
            <button id=atom(shutdown)>"Turn Off Computer"</button>
        </element>
        <element layoutpos=right layout=flowlayout(1,2) padding=rect(5,5,15,5)>
            <element layout=borderlayout() contentalign=middleleft>
                <button layoutpos=left id=atom(mycomputericon)/>
                <button layoutpos=left id=atom(mycomputer)>"My Computer"</button>
                <element class="sep" layoutpos=left>"|"</element>
            </element>
            <element layout=borderlayout() contentalign=middleleft>
                <button layoutpos=left id=atom(controlpanel)>"Control Panel"</button>
                <element class="sep" layoutpos=left>"|"</element>
            </element>
            <element layout=borderlayout() contentalign=middleleft>
                <button id=atom(help) layoutpos=left>"Help and Support"</button>
                <element class="sep" layoutpos=left>"|"</element>
            </element>
            <element layout=borderlayout() contentalign=middleleft>
                <button id=atom(customize) layoutpos=left>"Customize this Page"</button>
                <button id=atom(recycle) layoutpos=left/>
            </element>
        </element>
    </element>

    // Logo bar
    <element layout=borderlayout()>
        <element id=atom(logo) layoutpos=left padding=rect(15,5,5,5)/>
        <element id=atom(picture) layoutpos=right padding=rect(5,0,15,0)/>
        <element id=atom(brand) layoutpos=right padding=rect(0,10,15,0)/>
    </element>

    // Search
    <button id=atom(searchicon)/>

    // Search label
    <button id=atom(search)>"Search"</button>

    // Email
    <button id=atom(emailicon)/>

    // Email label
    <button id=atom(email)>"Email"</button>

    // Internet
    <button id=atom(interneticon)/>

    // Internet label
    <button id=atom(internet)>"Internet"</button>

    // Portrait
    <element id=atom(portrait)/>

    // Portrait label
    <element id=atom(username)/>

    // Other folder list
    <selector id=atom(otherlist) sheet=styleref(list) layout=borderlayout() contentalign=middleleft>
        <button id=atom(desktopfiles) layoutpos=top layout=borderlayout()>
            <element id=atom(desktopfilesicon) layoutpos=left background=argb(0,0,0,0)/>
            <element layoutpos=left background=argb(0,0,0,0)>"Desktop Files"</element>
        </button>
        <button id=atom(mydocuments) layoutpos=top layout=borderlayout()>
            <element id=atom(mydocumentsicon) layoutpos=left background=argb(0,0,0,0)/>
            <element layoutpos=left background=argb(0,0,0,0)>"My Documents"</element>
        </button>
        <button id=atom(mymusic) layoutpos=top layout=borderlayout()>
            <element id=atom(mymusicicon) layoutpos=left background=argb(0,0,0,0)/>
            <element layoutpos=left background=argb(0,0,0,0)>"My Music"</element>
        </button>
        <button id=atom(mypictures) layoutpos=top layout=borderlayout()>
            <element id=atom(mypicturesicon) layoutpos=left background=argb(0,0,0,0)/>
            <element layoutpos=left background=argb(0,0,0,0)>"My Pictures"</element>
        </button>
    </selector>

    // Recent files and folders list
    <selector id=atom(filefolderlist) sheet=styleref(list) layout=borderlayout() contentalign=middleleft/>

    // Recent files and folders label
    <element sheet=styleref(listlabel) layout=flowlayout()>
        <element contentalign=wrapleft>"Recent Files & Folders"</element>
        <button>"more..."</button>
    </element>

    // Recent programs list
    <selector id=atom(programlist) sheet=styleref(list) layout=borderlayout() contentalign=middleleft/>

    // Recent programs label
    <element sheet=styleref(listlabel) layout=flowlayout()>
        <element contentalign=wrapleft>"Recent Programs"</element>
        <button>"more..."</button>
    </element>

</startframe>
