<?xml version="1.0" encoding="UTF-8"?>
<stkgui>
    <div x="1%" y="1%" width="98%" height="98%" layout="vertical-row" >
        <header align="center" width="80%" text="SuperTuxKart Help" text_align="center"/>
        <spacer height="15" width="10"/>

        <tabs id="category" height="10%" max_height="110" x="2%" width="98%" align="center">
            <icon-button id="page1" width="128" height="128" icon="gui/track_random.png"
                    I18N="Tab in help menu" text="General"/>
            <icon-button id="page2" width="128" height="128" icon="gui/weapons.png"
                    I18N="Tab in help menu" text="Weapons"/>
            <icon-button id="page3" width="128" height="128" icon="gui/mode_ftl.png"
                    I18N="Tab in help menu" text="Game Modes"/>
            <icon-button id="page4" width="128" height="128" icon="gui/options_input.png"
                    I18N="Tab in help menu" text="Multi-player"/>
            <icon-button id="page5" width="128" height="128" icon="gui/banana.png"
                    I18N="Tab in help menu" text="Bananas"/>
        </tabs>

        <box proportion="1" width="100%" layout="vertical-row">

            <spacer width="5" height="15"/>
            <button id="startTutorial" text="Click here to play the tutorial" align="center"/>
            <spacer width="5" height="15"/>

            <div width="100%" proportion="2" layout="horizontal-row">
                <icon align="center" width="64" height="64" icon="gui/gift.png"/>
                <spacer width="25" height="25"/>
                <bubble proportion="6" height="100%" word_wrap="true"
                        I18N="In the help menu"
                        text="Collect blue boxes. They will give you weapons or other powerups."/>
                <spacer width="25" height="25"/>
                <icon align="center" width="64" height="64" icon="gui/banana.png"/>
                <spacer width="25" height="25"/>
                <bubble proportion="4" height="100%" word_wrap="true"
                        I18N="In the help menu"
                        text="Avoid bananas!"/>
            </div>

            <div width="100%" proportion="3" layout="horizontal-row">
                <icon align="center" width="64" height="64" icon="gui/nitro.png"/>
                <spacer width="25" height="25"/>
                <bubble proportion="3" height="100%" word_wrap="true"
                        I18N="In the help menu"
                        text="Collecting nitro allows you to get speed boosts whenever you wish by pressing the appropriate key. You can see your current level of nitro in the bar at the right of the game screen."/>
                </div>

            <div width="100%" proportion="2" layout="horizontal-row">
                <icon align="center" width="64" height="64" icon="gui/gui_lock.png"/>
                <spacer width="25" height="25"/>
                <bubble proportion="2" height="100%" word_wrap="true"
                        I18N="In the help menu"
                        text="If you see a button with a lock like this one, you need to complete a challenge to unlock it."/>
            </div>

            <bubble align="left" word_wrap="true" width="100%" proportion="1"
                    I18N="in the help menu"
                    text="The 'skidding' key allows you to skid in sharp turns and get a boost."/>

            <spacer height="10" width="10"/>

            <label align="center" I18N="in the help screen" text="* Current key bindings can be seen/changed in menu Options"/>
            <spacer height="10" width="10"/>

        </box>
    </div>

    <icon-button id="back" x="0" y="0" height="8%" icon="gui/back.png"/>
</stkgui>
