<menumain x="0" y="0" width="100%" height="100%" fadetime="0" orientation="{mainmenuorientation}">
    <background>
        <!-- main menu background -->
        <area x="0" y="0" width="71%" height="70%" layer="1">
            <fill color="{clrTransBlack}" />
        </area>
        <!-- datetime background -->
        <area x="75%" y="0" width="25%" height="10%" layer="2">
            <drawrectangle x="0" y="0" width="53%" height="100%" color="{clrTransBlueLight}" />
            <drawrectangle x="53%" y="0" width="47%" height="100%" color="{clrTransBlack}" />
        </area>
        <!-- system load background -->
        <area x="75%" y="40%" width="25%" height="5%" layer="1">
            <fill color="{clrTransBlack}"/>
        </area>
        <!-- disc usage background -->
        <area x="75%" y="26%" width="25%" height="10%" layer="1">
            <fill color="{clrTransBlack}"/>
        </area>
        <!-- weather background -->
        <area x="75%" y="13%" width="25%" height="10%" layer="2">
            <drawrectangle x="0" y="0" width="53%" height="100%" color="{clrTransBlueLight}" />
            <drawrectangle x="53%" y="0" width="47%" height="100%" color="{clrTransBlack}" />
        </area>
    </background>

    <header>
        <area x="0" y="0" width="70%" height="7%" layer="2">
            <drawtext x="10" valign="center" font="{light}" fontsize="100%" color="{clrWhite}" text="{title} {vdrversion}" />
        </area>
    </header>

    <datetime>
        <area x="75%" y="0" width="13%" height="10%" layer="3">
            <drawtext align="right" y="0%" font="{light}" fontsize="55%" color="{clrWhite}" text="{dayname}" />
            <drawtext align="right" y="45%" font="{light}" fontsize="55%" color="{clrWhite}" text="{day}. {monthnameshort}" />
        </area>
        <area x="88%" y="0" width="12%" height="10%" layer="3">
            <drawtext align="center" valign="center" font="{light}" fontsize="100%" color="{clrWhite}" text="{time}" />
        </area>
    </datetime>

    <colorbuttons>
        <area x="0" y="63%" width="18%" height="7%" layer="2">
            <drawtext condition="{red1}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{red}" />
            <drawrectangle condition="{red1}" x="0" y="0" width="10" height="100%" color="{clrRed}" />
            <drawtext condition="{green1}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{green}" />
            <drawrectangle condition="{green1}" x="0" y="0" width="10" height="100%" color="{clrGreen}" />
            <drawtext condition="{yellow1}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{yellow}" />
            <drawrectangle condition="{yellow1}" x="0" y="0" width="10" height="100%" color="{clrYellow}" />
            <drawtext condition="{blue1}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{blue}" />
            <drawrectangle condition="{blue1}" x="0" y="0" width="10" height="100%" color="{clrBlue}" />
        </area>
        <area x="18%" y="63%" width="17%" height="7%" layer="2">
            <drawtext condition="{red2}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{red}" />
            <drawrectangle condition="{red2}" x="0" y="0" width="10" height="100%" color="{clrRed}" />
            <drawtext condition="{green2}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{green}" />
            <drawrectangle condition="{green2}" x="0" y="0" width="10" height="100%" color="{clrGreen}" />
            <drawtext condition="{yellow2}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{yellow}" />
            <drawrectangle condition="{yellow2}" x="0" y="0" width="10" height="100%" color="{clrYellow}" />
            <drawtext condition="{blue2}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{blue}" />
            <drawrectangle condition="{blue2}" x="0" y="0" width="10" height="100%" color="{clrBlue}" />
        </area>
        <area x="35%" y="63%" width="18%" height="7%" layer="2">
            <drawtext condition="{red3}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{red}" />
            <drawrectangle condition="{red3}" x="0" y="0" width="10" height="100%" color="{clrRed}" />
            <drawtext condition="{green3}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{green}" />
            <drawrectangle condition="{green3}" x="0" y="0" width="10" height="100%" color="{clrGreen}" />
            <drawtext condition="{yellow3}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{yellow}" />
            <drawrectangle condition="{yellow3}" x="0" y="0" width="10" height="100%" color="{clrYellow}" />
            <drawtext condition="{blue3}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{blue}" />
            <drawrectangle condition="{blue3}" x="0" y="0" width="10" height="100%" color="{clrBlue}" />
        </area>
        <area x="53%" y="63%" width="17%" height="7%" layer="2">
            <drawtext condition="{red4}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{red}" />
            <drawrectangle condition="{red4}" x="0" y="0" width="10" height="100%" color="{clrRed}" />
            <drawtext condition="{green4}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{green}" />
            <drawrectangle condition="{green4}" x="0" y="0" width="10" height="100%" color="{clrGreen}" />
            <drawtext condition="{yellow4}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{yellow}" />
            <drawrectangle condition="{yellow4}" x="0" y="0" width="10" height="100%" color="{clrYellow}" />
            <drawtext condition="{blue4}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{blue}" />
            <drawrectangle condition="{blue4}" x="0" y="0" width="10" height="100%" color="{clrBlue}" />
        </area>
    </colorbuttons>

    <timers shifttime="{shifttimetimers}" startx="0" starty="100%">
        <area x="0" y="75%" width="{areawidth}/8 - 5" height="25%" layer="1">
            <fill color="{clrTransBlack}" />
        </area>
        <area condition="not{numtimerconflicts}" x="0" y="75%" width="{areawidth}/8 - 5" height="25%" layer="2">
            <drawtext align="center" y="15%" font="{light}" fontsize="50%" color="{clrWhite}" text="{numtimers}" />
            <drawtext condition="eq({numtimers}, 0)||gt({numtimers}, 1)" name="timersheader" align="center" y="60%" font="{light}" fontsize="20%" color="{clrWhite}" text="{tr(activetimers)}" />
            <drawtext condition="eq({numtimers}, 1)" name="timersheader" align="center" y="60%" font="{light}" fontsize="20%" color="{clrWhite}" text="{tr(activetimer)}" />
        </area>
        <area condition="{numtimerconflicts}" x="0" y="75%" width="{areawidth}/8 - 5" height="25%" layer="2">
            <drawtext align="center" y="0" font="{light}" fontsize="50%" color="{clrWhite}" text="{numtimers}" />
            <drawtext name="timersheader" align="center" y="45%" font="{light}" fontsize="20%" color="{clrWhite}" text="{tr(activetimers)}" />
            <drawtext align="center" y="65%" font="{semibold}" fontsize="20%" color="{clrRed}" text="{numtimerconflicts} {tr(conflicts)}!" />
        </area>
        
        <area condition="gt({numtimers}, 0)" x="{areawidth}/8" y="75%" width="{areawidth}/8 - 5" height="25%" layer="1">
            <fill color="{clrTransBlack}"/>
        </area>
        <area condition="gt({numtimers}, 1)" x="2*{areawidth}/8" y="75%" width="{areawidth}/8 - 5" height="25%" layer="1">
            <fill color="{clrTransBlack}"/>
        </area>
        <area condition="gt({numtimers}, 2)" x="3*{areawidth}/8" y="75%" width="{areawidth}/8 - 5" height="25%" layer="1">
            <fill color="{clrTransBlack}"/>
        </area>
        <area condition="gt({numtimers}, 3)" x="4*{areawidth}/8" y="75%" width="{areawidth}/8 - 5" height="25%" layer="1">
            <fill color="{clrTransBlack}"/>
        </area>
        <area condition="gt({numtimers}, 4)" x="5*{areawidth}/8" y="75%" width="{areawidth}/8 - 5" height="25%" layer="1">
            <fill color="{clrTransBlack}"/>
        </area>
        <area condition="gt({numtimers}, 5)" x="6*{areawidth}/8" y="75%" width="{areawidth}/8 - 5" height="25%" layer="1">
            <fill color="{clrTransBlack}"/>
        </area>
        <area condition="gt({numtimers}, 6)" x="7*{areawidth}/8" y="75%" width="{areawidth}/8 - 5" height="25%" layer="1">
            <fill color="{clrTransBlack}"/>
        </area>
        <area x="{areawidth}/8" y="75%" width="{areawidth}*0.875" height="25%" layer="2">
            <loop name="timers" x="0" y="0" orientation="horizontal" columnwidth="{areawidth}/7" rowheight="{areaheight}" overflow="cut">
                <drawrectangle condition="{timers[recording]}" x="0" y="0" width="{columnwidth}-5" height="{rowheight}" color="{clrRed}" />
                <drawimage cache="true" name="logo" imagetype="channellogo" path="{timers[channelid]}" width="{columnwidth}-15" height="40%" align="center" y="10" />
                <drawtextbox x="5" y="{height(logo)} + 10" width="{columnwidth}-10" align="center" maxlines="2" font="{light}" fontsize="15%" color="{clrWhite}" text="{timers[title]}" />
                <drawtext align="center" y="75%" font="{light}" fontsize="20%" color="{clrWhite}" text="{timers[datetime]}" />
            </loop>
        </area>
    </timers>

    <discusage>
        <area background="true" x="75%" y="26%" width="25%" height="10%" layer="1">
            <fill condition="{discalert}" color="{clrRed}"/>
        </area>
        <area x="75%" y="26%" width="25%" height="10%" layer="2">
            <drawimage imagetype="icon" path="ico_discusage" x="1%" valign="center" width="{areaheight}*0.9" height="{areaheight}*0.9"/>
            <drawtext x="{areaheight}+10" y="0" font="{light}" fontsize="55%" color="{clrWhite}" text="{tr(disc)}: {freepercent}% {tr(free)}" />
            <drawtext x="{areaheight}+10" y="45%" font="{light}" fontsize="55%" color="{clrWhite}" text="{freetime} {tr(hours)}" />
        </area>
    </discusage>

    <currentweather>
        <area x="75%" y="13%" width="12%" height="10%" layer="2">
            <drawimage imagetype="icon" path="{icon}" align="center" valign="center" width="{areaheight}*0.9" height="{areaheight}*0.9"/>
        </area>
        <area x="89%" y="13%" width="10%" height="10%" layer="2">
            <drawtext x="0" y="0" font="{light}" fontsize="35%" color="{clrWhite}" text="{mintemperature}°C" />
            <drawtext x="0" y="70%" font="{light}" fontsize="35%" color="{clrWhite}" text="{maxtemperature}°C" />
        </area>
        <area x="89%" y="13%" width="10%" height="10%" layer="3">
            <drawtext align="right" valign="center" font="{light}" fontsize="65%" color="{clrWhite}" text="{temperature}°C" />
        </area>
    </currentweather>

    <devices condition="{showdevices}">
        <area background="true" x="75%" y="48%" width="25%" height="{areaheight}/12 * {numdevices}" layer="1">
            <fill color="{clrTransBlack}"/>
        </area>
        <area x="75%" y="48%" width="25%" height="{areaheight}/12 * {numdevices}" layer="2">
            <loop name="devices" x="0" y="0" orientation="vertical" columnwidth="{areawidth}" rowheight="{areaheight} / {numdevices}" overflow="cut">
                <drawtext name="label" x="5" y="0" font="{light}" fontsize="{rowheight}*0.35" color="{clrWhite}" text="{devices[num]}: {devices[type]}" />
                <drawtext condition="{devices[hascam]}" x="{width(label)} + 15" y="0" font="{light}" fontsize="{rowheight}*0.35" color="{clrWhite}" text="(CAM {devices[cam]})" />
                <drawtext condition="{devices[recording]} ++ {devices[livetv]}" align="right" y="0" font="{light}" fontsize="{rowheight}*0.35" color="{clrRed}" text="LiveTV, Recording ({devices[channelname]}) " />
                <drawtext condition="{devices[recording]} ++ not{devices[livetv]}" align="right" y="0" font="{light}" fontsize="{rowheight}*0.35" color="{clrRed}" text="Recording ({devices[channelname]}) " />
                <drawtext condition="not{devices[recording]} ++ {devices[livetv]}" align="right" y="0" font="{light}" fontsize="{rowheight}*0.35" color="{clrWhite}" text="LiveTV ({devices[channelname]}) " />
                <drawrectangle condition="{devices[istuned]}" x="5" y="{rowheight}/3 + 5" width="{areawidth} * {devices[signalstrength]} / 100 - 10 * {devices[signalstrength]} / 100" height="{rowheight}/3 - 10" color="{clrTransWhite}" />
                <drawrectangle condition="{devices[istuned]}" x="5" y="2*{rowheight}/3 + 5" width="{areawidth} * {devices[signalquality]} / 100 - 10 * {devices[signalquality]} / 100" height="{rowheight}/3 - 10" color="{clrTransWhite}" />
                <drawtext condition="not{devices[istuned]}" align="center" y="{rowheight}/2" font="{light}" fontsize="{rowheight}*0.35" color="{clrWhite}" text="not tuned" />
            </loop>
        </area>
    </devices>

    <systemload>
        <area x="75%" y="40%" width="25%" height="5%" layer="2">
            <drawtext x="5" valign="center" font="{light}" fontsize="100%" color="{clrWhite}" text="System Load: {load}" />
        </area>
    </systemload>

    <menuitems x="0" y="7%" orientation="vertical" width="70%" height="56%" align="center" numlistelements="8">
        <listelement>
            <area x="0" width="60%" layer="2">
                <fill condition="not{current}" color="{clrTransparent}" />
                <fill condition="{current}" color="{clrTransBlueLight}" />
            </area>
            <areascroll scrollelement="menutext" mode="forthandback" orientation="horizontal" delay="1000" scrollspeed="medium" x="0" width="60%" layer="3">
                <drawtext name="menutext" x="20" valign="center" font="{light}" fontsize="90%" color="{clrWhite}" text="{number} {label}" />
            </areascroll>
        </listelement>
        <currentelement fadetime="300">
            <area x="61%" y="22%" width="36%" height="52%" layer="2">
                <fill color="{clrTransBlueLight}" />
            </area>
            <area x="61%" y="23%" width="36%" height="50%" layer="3">
                <drawimage imagetype="menuicon" path="{icon}" align="center" valign="center" width="{areaheight} - 10" height="{areaheight} - 10"/>
            </area>
        </currentelement>
    </menuitems>

    <menuitems x="0" y="7%" orientation="horizontal" width="70%" height="56%" align="center" numlistelements="1">
        <listelement>
            <area y="10%" height="80%" layer="2">
                <drawrectangle condition="{current}" x="20%" y="0" width="60%" height="100%" color="{clrTransBlueLight}" />
            </area>
            <area y="10%" height="80%" layer="3">
                <drawimage condition="{current}" imagetype="menuicon" path="{icon}" align="center" y="10%" width="{areaheight}*0.6" height="{areaheight}*0.6"/>
            </area>
            <areascroll scrollelement="menutext" mode="forthandback" orientation="horizontal" delay="1000" scrollspeed="medium" y="70%" height="20%" layer="4">
                <drawtext name="menutext" align="center" valign="center" font="{light}" fontsize="90%" color="{clrWhite}" text="{label}" />
            </areascroll>
        </listelement>
    </menuitems>

    <scrollbar orientation="vertical">
        <area x="68%" y="7%" width="2%" height="56%" layer="2">
            <fill color="{clrWhite}" />
            <drawrectangle x="2" y="2" width="{areawidth} - 4" height="{areaheight} - 4" color="{clrTransparent}" />
            <drawrectangle x="4" y="4 + {areaheight} * {offset} / 1000" width="{areawidth} - 8" height="{areaheight} * {height} / 1000 - 8" color="{clrWhite}" />
        </area>
    </scrollbar>

    <scrollbar orientation="horizontal">
        <area condition="{hasprev}" x="0" y="7%" width="14%" height="56%" layer="2">
            <drawimage imagetype="icon" path="ico_arrow_left" align="center" valign="center" width="{areawidth}*0.8" height="{areawidth}*0.8"/>
        </area>
        <area condition="{hasnext}" x="56%" y="7%" width="14%" height="56%" layer="2">
            <drawimage imagetype="icon" path="ico_arrow_right" align="center" valign="center" width="{areawidth}*0.8" height="{areawidth}*0.8"/>
        </area>
    </scrollbar>

</menumain>
