<?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 height="1%" width="10"/>
                <label align="center" word_wrap="true" text="Hitting a banana can result in one of the following being attached to the kart:"/>
                <spacer height="2%" width="10"/>                

                <div width="100%" proportion="2" layout="horizontal-row">
                    <icon align="center" width="8%" height="100%" icon="gui/icons/anchor-icon.png"/>
                    <spacer width="3%" height="100%"/>
                    <bubble proportion="1" height="100%"
                            I18N="In the help menu"
                            text="Anchor - slows down the kart suddenly."/>
                </div>
                
                <div width="100%" proportion="2" layout="horizontal-row">
                    <icon align="center" width="8%" height="100%" icon="gui/icons/parachute-icon.png"/>
                    <spacer width="3%" height="100%"/>
                    <bubble proportion="1" height="100%"
                            I18N="In the help menu"
                            text="Parachute - slows down the kart, more progressively than the anchor. The faster you go, the stronger it slows you down."/>
                </div>
                
                <div width="100%" proportion="2" layout="horizontal-row">
                    <icon align="center" width="8%" height="100%" icon="gui/icons/bomb_icon.png"/>
                    <spacer width="3%" height="100%"/>
                    <bubble proportion="1" height="100%"
                            I18N="In the help menu"
                            text="Bomb - detonates after some amount of time, throwing the kart up in the air. Bump into another kart to transfer the bomb to it."/>
                </div>
            </box>
        </div>
    </div>
</stkgui>
