<?xml version="1.0" encoding="UTF-8"?>
<stkgui>
    <icon-button id="back" x="0" y="0" height="8%" icon="gui/icons/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/icons/track_random.png"
                        I18N="Tab in help menu" text="General"/>
                <icon-button id="page2" width="128" height="128" icon="gui/icons/mode_ftl.png"
                        I18N="Tab in help menu" text="Game Modes"/>
                <icon-button id="page3" width="128" height="128" icon="gui/icons/weapons.png"
                        I18N="Tab in help menu" text="Powerups"/>
                <icon-button id="page4" width="128" height="128" icon="gui/icons/banana.png"
                        I18N="Tab in help menu" text="Bananas"/>
                <icon-button id="page5" width="128" height="128" icon="gui/icons/story_mode_book.png"
                        I18N="Tab in help menu" text="Story Mode"/>
                <icon-button id="page6" width="128" height="128" icon="gui/icons/mass.png"
                        I18N="Tab in help menu" text="Kart classes"/>
                <icon-button id="page7" width="128" height="128" icon="gui/icons/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/icons/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/icons/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/icons/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/icons/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 or button. 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/icons/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/icons/android/drift.png"/>
                    <spacer width="25" height="25"/>
                    <bubble proportion="2" height="100%" word_wrap="true"
                            I18N="In the help menu"
                            text="You can skid by pressing a special key or button. 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>
