<?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" I18N="In the help menu" text="To help you win, there are some powerups you can collect:"/>
                <spacer height="2%" width="10"/>

                <div width="100%" proportion="1" layout="horizontal-row">
                    <icon align="center" width="8%" height="100%" icon="gui/icons/bubblegum-icon.png"/>
                    <spacer width="3%" height="100%"/>
                    <bubble proportion="1" height="100%" text="BubbleGum - protect yourself with a shield, or use while looking back to leave a sticky pink puddle behind you."/>
                </div>

                <div width="100%" proportion="1" layout="horizontal-row">
                     <icon align="center" width="8%" height="100%" icon="gui/icons/zipper_collect.png"/>
                     <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%" text="Zipper - will give you a strong speed boost. But beware of not losing control of your kart!"/>
                </div>

                <div width="100%" proportion="1" layout="horizontal-row">
                    <icon align="center" width="8%" height="100%" icon="gui/icons/cake-icon.png"/>
                    <spacer width="3%" height="100%"/>
                    <bubble proportion="1" height="100%"
                            text="Cake - thrown at the closest rival, best on short ranges and long straights. It also affects other karts close to the explosion."/>
                </div>

                <div width="100%" proportion="1" layout="horizontal-row">
                    <icon align="center" width="8%" height="100%" icon="gui/icons/plunger-icon.png"/>
                    <spacer width="3%" height="100%"/>
                    <bubble proportion="1" height="100%" text="Plunger - throw straight to pull an opponent back, or throw while looking back to make one lose sight."/>
                </div>

                <div width="100%" proportion="1" layout="horizontal-row">
                    <icon align="center" width="8%" height="100%" icon="gui/icons/bowling-icon.png"/>
                    <spacer width="3%" height="100%"/>
                    <bubble proportion="1" height="100%"
                            text="Bowling Ball - goes straight until it strikes, it can bounce off walls. If you are looking back, it will be thrown backwards."/>
                </div>

                <div width="100%" proportion="1" 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%" text="Parachute - slows down all karts in a better position."/>
                </div>

                <div width="100%" proportion="1" layout="horizontal-row">
                    <icon align="center" width="8%" height="100%" icon="gui/icons/swap-icon.png"/>
                    <spacer width="3%" height="100%"/>
                    <bubble proportion="1" height="100%" text="Swapper - gift boxes are transformed into bananas, nitro cans into bubblegums, and vice versa for a short time."/>
                </div>

                <div width="100%" proportion="1" layout="horizontal-row">
                     <icon align="center" width="8%" height="100%" icon="gui/icons/rubber_ball-icon.png"/>
                     <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%" text="Basket Ball - bounces after the leader, and might squash and slow down karts down on the way."/>
                </div>

                <div width="100%" proportion="1" layout="horizontal-row">
                     <icon align="center" width="8%" height="100%" icon="gui/icons/swatter-icon.png"/>
                     <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%" text="Swatter - will squash karts close by, slowing them down. Can also be used to remove parachutes and bombs."/>
                </div>

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