<?xml version="1.0" encoding="UTF-8"?>
<stkgui>
    <icon-button id="back" x="0" y="0" height="8%" icon="gui/back.png"/>
    <div x="1%" y="1%" width="98%" height="98%" layout="vertical-row" >
        <header width="80%" height="7%" align="center" text="SuperTuxKart Help" text_align="center"/>
        <spacer height="1%" width="100%"/>

        <div width="100%" height="92%" layout="horizontal-row" >

            <vertical-tabs id="category" height="100%" width="18%">
                <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/mode_ftl.png"
                        I18N="Tab in help menu" text="Game Modes"/>
                <icon-button id="page3" width="128" height="128" icon="gui/weapons.png"
                        I18N="Tab in help menu" text="Powerups"/>
                <icon-button id="page4" width="128" height="128" icon="gui/banana.png"
                        I18N="Tab in help menu" text="Bananas"/>
                <icon-button id="page5" width="128" height="128" icon="gui/story_mode_book.png"
                        I18N="Tab in help menu" text="Story Mode"/>
                <icon-button id="page6" width="128" height="128" icon="gui/mass.png"
                        I18N="Tab in help menu" text="Kart classes"/>
                <icon-button id="page7" width="128" height="128" icon="gui/options_input.png"
                        I18N="Tab in help menu" text="Multi-player"/>
            </vertical-tabs>

            <spacer width="2%" height="100%"/>

            <box width="80%" height="100%" layout="vertical-row">

                <spacer width="5" height="1%"/>
                <div width="50%" proportion="2" align="center" layout="horizontal-row">
                    <icon id="tutorialIcon" width="64" height="64" align="center" icon="gui/tutorial.png"/>
                    <button id="startTutorial" align="center" text="Start the tutorial"/>
                </div>
                <spacer width="5" height="1%"/>

                <div width="100%" proportion="5" layout="horizontal-row">
                    <icon align="center" width="64" height="64" icon="gui/gift.png"/>
                    <spacer width="25" height="25"/>
                    <bubble proportion="7" height="100%" word_wrap="true"
                            I18N="In the help menu"
                            text="Collect blue gift boxes, they will give you powerups."/>
                    <spacer width="25" height="25"/>
                    <icon align="center" width="64" height="64" icon="gui/banana.png"/>
                    <spacer width="25" height="25"/>
                    <bubble proportion="3" height="100%" word_wrap="true"
                            I18N="In the help menu"
                            text="Avoid bananas!"/>
                </div>

                <div width="100%" proportion="6" 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 gauge at the bottom-right of the race screen."/>
                    </div>

                <div width="100%" proportion="4" 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>

                <div width="100%" proportion="6" layout="horizontal-row">
                    <icon align="center" width="64" height="64" icon="gui/android/drift.png"/>
                    <spacer width="25" height="25"/>
                    <bubble proportion="2" height="100%" word_wrap="true"
                            I18N="In the help menu"
                            text="The 'skidding' key allows you to skid. Short skids help to take sharp turns. If you skid long enough, you will get a boost. You can't stop turning while skidding, so orient your kart carefully before!"/>
                </div>

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

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

            </box>
        </div>
    </div>
</stkgui>
