<?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="Not all karts drive the same! They belong to classes with several differences:"/>
                <spacer height="2%" width="10"/>                

                <div width="100%" proportion="4" layout="horizontal-row">
                    <icon align="center" width="8%" height="100%" icon="gui/icons/mass.png"/>
                    <spacer width="3%" height="100%"/>
                    <bubble proportion="1" height="100%"
                            I18N="In the help menu"
                            text="Mass - there are three classes of karts, depending on their mass: light, medium and heavy. Heavier karts are less affected by parachutes and are more resistant to explosions."/>
                </div>
                
                <div width="100%" proportion="4" layout="horizontal-row">
                    <icon align="center" width="8%" height="100%" icon="gui/icons/power.png"/>
                    <spacer width="3%" height="100%"/>
                    <bubble proportion="1" height="100%"
                            I18N="In the help menu"
                            text="Acceleration - especially useful at start, after an accident, or in tracks with a lot of sharp curves. The lighter the kart, the faster it accelerates, especially at low speeds."/>
                </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="1" height="100%"
                            I18N="In the help menu"
                            text="Max speed - the higher it is, the faster the kart can go. Especially useful in tracks with straight lines and gentle curves. Heavier karts have a higher top speed."/>
                </div>

                <div width="100%" proportion="3" layout="horizontal-row">
                    <icon align="center" width="8%" height="100%" icon="gui/icons/nitro.png"/>
                    <spacer width="3%" height="100%"/>
                    <bubble proportion="1" height="100%"
                            I18N="In the help menu"
                            text="Nitro efficiency - The higher it is, the more speed you get from a can of nitro. A lighter kart will have higher nitro efficiency."/>
                </div>

                <div width="100%" proportion="4" layout="horizontal-row">
                    <icon align="center" width="12%" height="100%" icon="gui/icons/slipstream_icon.png"/>
                    <spacer width="3%" height="100%"/>
                    <bubble proportion="1" height="100%" word_wrap="true"
                            I18N="In the help menu"
                            text="If you follow closely another kart for a few seconds, you'll get a slipstream speed bonus when you overtake it. The lighter your kart, the easier it is."/>
                </div>

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