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

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

            <vertical-tabs id="category" height="100%" width="20%">
                <icon-button id="page1" width="128" height="128" icon="gui/icons/options_general.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/gift.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="Multiplayer"/>
            </vertical-tabs>

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

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

                <spacer width="5" height="1%"/>
                <div width="70%" height="fit" align="left" layout="horizontal-row">
                    <spacer proportion="1"/>
                    <icon id="tutorialIcon" height="100%" icon="gui/icons/tutorial.png"/>
                    <button id="startTutorial" text="Start the tutorial"/>
                    <spacer proportion="1"/>
                </div>
                <spacer width="5" height="2%"/>

                <div width="100%" proportion="4" layout="horizontal-row">
                    <icon align="center" width="8%" height="100%" icon="gui/icons/gift.png"/>
                    <spacer width="3%" height="100%"/>
                    <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="3%" height="100%"/>
                    <icon align="center" width="8%" height="100%" icon="gui/icons/banana.png"/>
                    <spacer width="3%" height="100%"/>
                    <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="8%" height="100%" icon="gui/icons/nitro.png"/>
                    <spacer width="3%" height="100%"/>
                    <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="8%" height="100%" icon="gui/icons/gui_lock.png"/>
                    <spacer width="3%" height="100%"/>
                    <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="8%" height="100%" icon="gui/icons/android/drift.png"/>
                    <spacer width="3%" height="100%"/>
                    <bubble proportion="2" height="100%" word_wrap="true"
                            I18N="In the help menu"
                            text="You can skid by pressing a special key or button. Successive short skids help to take sharp turns; while medium skids will boost your speed, long skids more so. You can't stop turning while skidding, so orient your kart carefully before!"/>
                </div>

                <div width="100%" proportion="4" layout="horizontal-row">
                    <icon align="center" width="8%" height="100%" icon="gui/icons/speed.png"/>
                    <spacer width="3%" height="100%"/>
                    <bubble proportion="2" height="100%" word_wrap="true"
                            I18N="In the help menu"
                            text="You can get a startup boost by pressing the accelerate button at 'Set!', before the race's start."/>
                </div>

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

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

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