<stkgui>

<div x="2%" y="2%" width="96%" height="96%" layout="vertical-row" >

    <header text_align="center" width="100%" text="SuperTuxKart Options"/>
    <spacer height="15" width="10"/>
    
    <tabs id="options_choice" height="10%" max_height="110" width="100%" align="center">
        <icon-button id="tab_video" width="128" height="128" icon="gui/options_video.png"
                I18N="Section in the settings menu" text="Graphics"/>
        <icon-button id="tab_audio" width="128" height="128" icon="gui/options_audio.png"
                I18N="Section in the settings menu" text="Audio"/>
        <icon-button id="tab_players" width="128" height="128" icon="gui/options_players.png"
                I18N="Section in the settings menu" text="Players"/>
        <icon-button id="tab_controls" width="128" height="128" icon="gui/options_input.png"
                I18N="Section in the settings menu" text="Controls"/>
    </tabs>
    
    <box proportion="1" width="100%" layout="vertical-row">
        
        <spacer height="15" width="10"/>
        
        <label width="100%" I18N="Section in the audio/video settings submenu" text="Music"/>
        
        <!-- FIXME: don't hardcode height! -->
        <div width="75%" height="40" layout="horizontal-row" >
            <label proportion="1" height="100%" text_align="right" I18N="Next to checkbox in settings menu" text="Enabled"/>
            
            <div proportion="1" height="40" layout="horizontal-row" >
                <spacer width="40" height="100%" />
                <checkbox id="music_enabled" width="40" height="40"/>
            </div>
        </div>
        <div width="75%" height="30" layout="horizontal-row" >
            <label proportion="1" height="100%" text_align="right" I18N="Music volume in options" text="Volume"/>
            <div proportion="1" height="40" layout="horizontal-row" >
                <spacer width="40" height="100%" />
                <gauge id="music_volume" proportion="1" height="100%" min_value="1" max_value="10"/>
            </div>
        </div>
        
        <spacer height="15" width="10"/>
        
        <label width="100%" I18N="Section in audio/video settings submenu" text="Sound Effects"/>
                    
        <div width="75%" height="40" layout="horizontal-row" >
            <label proportion="1" height="100%" text_align="right" I18N="Next to checkbox in settings menu" text="Enabled"/>
            <div proportion="1" height="40" layout="horizontal-row" >
                <spacer width="40" height="100%" />
                <checkbox id="sfx_enabled" width="40" height="40"/>
            </div>
        </div>
        <div width="75%" height="30" layout="horizontal-row" >
            <label proportion="1" height="100%" text_align="right" I18N="Sound volume in options" text="Volume"/>
            <div proportion="1" height="40" layout="horizontal-row" >
                <spacer width="40" height="100%" />
                <gauge id="sfx_volume" proportion="1" height="100%" min_value="1" max_value="10"/>
            </div>
        </div>
        
        
        <spacer height="20" width="10"/>
        
    </box>
    
    <spacer width="50" height="10" /> 
    <button id="back" x="20" width="250"  align="left"
        I18N="In the options menu, to go back to the main menu or game" text="Back"/>

</div>

</stkgui>
