<menudetailedtext x="0" y="0" width="100%" height="100%" fadetime="0">

    <background>
        <area x="0" y="0" width="100%" height="100%" layer="1">
            <drawimage imagetype="skinpart" path="displaymenuback" x="0" y="0" width="100%" height="100%"/>
        </area>
        <area x="1%" y="10%" width="93%" height="80%" layer="2">
            <drawimage imagetype="skinpart" path="displaymendetailback" x="0" y="0" width="100%" height="100%" />
        </area>
        <area x="0" y="0" width="83%" height="8%" layer="2">
            <drawimage imagetype="skinpart" path="displaymenuheader" x="0" y="0" width="100%" height="100%"/>
        </area>
        <area x="74%" y="0" width="26%" height="46%" layer="3">
            <drawimage imagetype="skinpart" path="displaymenucorner" x="0" y="0" width="100%" height="100%"/>
        </area>
        <area x="{areawidth}*0.865" y="{areawidth}*0.005" width="13%" height="{areawidth}*0.13" layer="4">
            <drawimage imagetype="skinpart" path="watchback" x="0" y="0" width="100%" height="100%"/>
        </area>
    </background>

    <scrollbar>
        <area x="97%" y="10%" width="2%" height="80%" layer="2">
            <drawimage imagetype="skinpart" path="scrollbarback" x="0" y="0" width="100%" height="100%"/>
        </area>
        <area x="97%" y="10%" width="2%" height="80%" layer="3">
            <drawimage imagetype="skinpart" path="scrollbar" x="0" y="{areaheight} * {offset} / 1000" width="100%" height="{areaheight} * {height} / 1000"/>
        </area>
    </scrollbar>

    <!-- Available Variables in tab elements:
    {text}                    detailed text
    -->
    <tab name="text" x="2%" y="11%" width="92%" height="79%" layer="3" scrollheight="{areaheight}/4">
        <drawtextbox x="0" y="0" width="100%" font="{regular}" fontsize="5%" color="{clrWhite}" text="{text}" />
    </tab>

</menudetailedtext>