diff --git a/data/gui/help1.stkgui b/data/gui/help1.stkgui
index 8382496c3..12c795ddf 100644
--- a/data/gui/help1.stkgui
+++ b/data/gui/help1.stkgui
@@ -1,12 +1,12 @@
 <div x="2%" y="2%" width="96%" height="96%" layout="vertical-row" >
 
-<label align="center" text="SuperTuxKart Options"/>
+<label align="center" text="SuperTuxKart Help"/>
 
-<ribbon id="category" height="20%" width="75%" align="center">
+<tabs id="category" height="130" width="75%" align="center">
     <icon-button id="page1" width="128" height="128" icon="gui/track_random.png" text="General"/>
     <icon-button id="page2" width="128" height="128" icon="gui/mode_normal.png" text="Weapons"/>
     <icon-button id="page3" width="128" height="128" icon="gui/mode_ftl.png" text="Game Modes"/>
-</ribbon>
+</tabs>
 
 <spacer proportion="1" width="10" proportion="1"/>
 
diff --git a/data/gui/help2.stkgui b/data/gui/help2.stkgui
index 8b9c35503..2a7673b7b 100644
--- a/data/gui/help2.stkgui
+++ b/data/gui/help2.stkgui
@@ -1,12 +1,12 @@
 <div x="2%" y="2%" width="96%" height="96%" layout="vertical-row" >
 
-<label align="center" text="SuperTuxKart Options"/>
+<label align="center" text="SuperTuxKart Help"/>
 
-<ribbon id="category" height="20%" width="75%" align="center">
+<tabs id="category" height="130" width="75%" align="center">
     <icon-button id="page1" width="128" height="128" icon="gui/track_random.png" text="General"/>
     <icon-button id="page2" width="128" height="128" icon="gui/mode_normal.png" text="Weapons"/>
     <icon-button id="page3" width="128" height="128" icon="gui/mode_ftl.png" text="Game Modes"/>
-</ribbon>
+</tabs>
 
 <spacer proportion="1" width="10" proportion="1"/>
 
diff --git a/data/gui/help3.stkgui b/data/gui/help3.stkgui
index ea77508b0..019f09e3f 100644
--- a/data/gui/help3.stkgui
+++ b/data/gui/help3.stkgui
@@ -1,13 +1,13 @@
 
 <div x="2%" y="2%" width="96%" height="96%" layout="vertical-row" >
 
-<label align="center" text="SuperTuxKart Options"/>
+<label align="center" text="SuperTuxKart Help"/>
 
-<ribbon id="category" height="20%" width="75%" align="center">
+<tabs id="category" height="130" width="75%" align="center">
     <icon-button id="page1" width="128" height="128" icon="gui/track_random.png" text="General"/>
     <icon-button id="page2" width="128" height="128" icon="gui/mode_normal.png" text="Weapons"/>
     <icon-button id="page3" width="128" height="128" icon="gui/mode_ftl.png" text="Game Modes"/>
-</ribbon>
+</tabs>
 
 <spacer proportion="1" width="10" proportion="1"/>
 
diff --git a/data/gui/karts.stkgui b/data/gui/karts.stkgui
index 2c6d40e39..ac1e7c2a0 100644
--- a/data/gui/karts.stkgui
+++ b/data/gui/karts.stkgui
@@ -17,5 +17,7 @@
         <button text="All"/>
     </tabs>
     
+    <spacer height="15" width="25"/>
+    
 </div>
 
diff --git a/data/gui/options_av.stkgui b/data/gui/options_av.stkgui
index d70d37da1..72c76e9ec 100644
--- a/data/gui/options_av.stkgui
+++ b/data/gui/options_av.stkgui
@@ -2,11 +2,11 @@
 
 <label align="center" text="SuperTuxKart Options"/>
 
-<ribbon id="options_choice" height="20%" width="75%" align="center">
+<tabs id="options_choice" height="130" width="75%" align="center">
     <icon-button id="audio_video" width="128" height="128" icon="gui/options_audio_video.png" text="Audio/Video"/>
     <icon-button id="players" width="128" height="128" icon="gui/options_players.png" text="Players"/>
     <icon-button id="controls" width="128" height="128" icon="gui/options_input.png" text="Controls"/>
-</ribbon>
+</tabs>
 
 <spacer height="25" width="10"/>
 
diff --git a/data/gui/options_input.stkgui b/data/gui/options_input.stkgui
index 61580559e..8eca2ca59 100644
--- a/data/gui/options_input.stkgui
+++ b/data/gui/options_input.stkgui
@@ -2,11 +2,11 @@
 
 <label align="center" text="SuperTuxKart Options"/>
 
-<ribbon id="options_choice" height="20%" width="75%" align="center">
+<tabs id="options_choice" height="130" width="75%" align="center">
     <icon-button id="audio_video" width="128" height="128" icon="gui/options_audio_video.png" text="Audio/Video"/>
     <icon-button id="players" width="128" height="128" icon="gui/options_players.png" text="Players"/>
     <icon-button id="controls" width="128" height="128" icon="gui/options_input.png" text="Controls"/>
-</ribbon>
+</tabs>
 
 <spacer height="15" width="10" />
 
diff --git a/data/gui/options_players.stkgui b/data/gui/options_players.stkgui
index 061c01fa3..3cac01432 100644
--- a/data/gui/options_players.stkgui
+++ b/data/gui/options_players.stkgui
@@ -2,11 +2,11 @@
 
 <label align="center" text="SuperTuxKart Options"/>
 
-<ribbon id="options_choice" height="20%" width="75%" align="center">
+<tabs id="options_choice" height="130" width="75%" align="center">
     <icon-button id="audio_video" width="128" height="128" icon="gui/options_audio_video.png" text="Audio/Video"/>
     <icon-button id="players" width="128" height="128" icon="gui/options_players.png" text="Players"/>
     <icon-button id="controls" width="128" height="128" icon="gui/options_input.png" text="Controls"/>
-</ribbon>
+</tabs>
 
 <spacer proportion="1" width="10" proportion="1"/>
 
diff --git a/src/gui/engine.hpp b/src/gui/engine.hpp
index f49a0cc74..8a09dec5e 100644
--- a/src/gui/engine.hpp
+++ b/src/gui/engine.hpp
@@ -14,6 +14,7 @@ the "buttonbar" subcategory treats children buttons as action buttons, which mea
 'selected' state, only focused or not (i.e. there is no selection that remains if you leave this area).
 events are triggered only on enter/fire.
 the "tabs" subcategory will show a tab bar. behaviour is same as normal ribbon, only looks are different.
+Orientation of tabs (up or down) is automatically inferred from on-screen position
 Ribbon widgets are of spawn type (<ribbon> ... </ribbon>) and may contain icon-buttons or buttons as children.
 Property PROP_SQUARE can be set to tell the engine if the ribbon's contents are rectangular or not (this will
 affect the type of highlighting used)
diff --git a/src/gui/skin.cpp b/src/gui/skin.cpp
index dd95df742..5aa5153c7 100644
--- a/src/gui/skin.cpp
+++ b/src/gui/skin.cpp
@@ -50,7 +50,7 @@ void Skin::drawBoxFromStretchableTexture(const core::rect< s32 > &dest, ITexture
                                          const int left_border, const int right_border,
                                          const int top_border, const int bottom_border,
                                          const bool preserve_h_aspect_ratios,
-                                         const float border_out_portion, int areas)
+                                         const float border_out_portion, int areas, const bool vertical_flip)
 {
     // FIXME? - lots of things here will be re-calculated every frame, which is useless since
     // widgets won't move, so they'd only need to be calculated once.
@@ -187,6 +187,45 @@ void Skin::drawBoxFromStretchableTexture(const core::rect< s32 > &dest, ITexture
         core::rect<s32> dest_area_bottom_left = core::rect<s32>(hx, hy, lx, ly);
         core::rect<s32> dest_area_bottom_right = core::rect<s32>(jx, jy, nx, ny);
         
+        if(vertical_flip)
+        {
+#define FLIP_Y( X ) {     const int y1 = X.UpperLeftCorner.Y - ay; \
+const int y2 = X.LowerRightCorner.Y - ay; \
+X.UpperLeftCorner.Y = ny - y2;\
+X.LowerRightCorner.Y = ny - y1;}
+        
+        FLIP_Y(dest_area_left)
+        FLIP_Y(dest_area_center)
+        FLIP_Y(dest_area_right)
+        
+        FLIP_Y(dest_area_top)
+        FLIP_Y(dest_area_bottom)
+        
+        FLIP_Y(dest_area_top_left)
+        FLIP_Y(dest_area_top_right)
+        FLIP_Y(dest_area_bottom_left)
+        FLIP_Y(dest_area_bottom_right)
+
+#undef FLIP_Y
+#define FLIP_Y( X ) {     const int y1 = X.UpperLeftCorner.Y; \
+const int y2 = X.LowerRightCorner.Y; \
+X.UpperLeftCorner.Y =  y2;\
+X.LowerRightCorner.Y =  y1;}
+        
+        FLIP_Y(source_area_left)
+        FLIP_Y(source_area_center)
+        FLIP_Y(source_area_right)
+        
+        FLIP_Y(source_area_top)
+        FLIP_Y(source_area_bottom)
+        
+        FLIP_Y(source_area_top_left)
+        FLIP_Y(source_area_top_right)
+        FLIP_Y(source_area_bottom_left)
+        FLIP_Y(source_area_bottom_right)
+#undef FLIP_Y
+        }
+        
         if((areas & LEFT) != 0)
         {
             GUIEngine::getDriver()->draw2DImage(source, dest_area_left, source_area_left,
@@ -255,8 +294,7 @@ void Skin::drawButton(const core::rect< s32 > &rect, const bool pressed, const b
 
 void Skin::drawRibbon(const core::rect< s32 > &rect, const Widget* widget, const bool pressed, bool focused)
 {
-    return;
-    
+/*
     // only combo ribbons need a border
     if ( ((RibbonWidget*)widget)->getRibbonType() != RIBBON_COMBO ) return;
     
@@ -280,6 +318,7 @@ void Skin::drawRibbon(const core::rect< s32 > &rect, const Widget* widget, const
         GUIEngine::getDriver()->draw2DRectangle( SColor(255, 150, 0, 0), rect );
     else
         GUIEngine::getDriver()->draw2DRectangle( SColor(255, 0, 150, 0), rect );
+ */
 }
 
 void Skin::drawRibbonChild(const core::rect< s32 > &rect, const Widget* widget, const bool pressed, bool focused)
@@ -289,31 +328,58 @@ void Skin::drawRibbonChild(const core::rect< s32 > &rect, const Widget* widget,
     
     const bool parent_focused = GUIEngine::getGUIEnv()->getFocus() == widget->m_event_handler->m_element;
     
+    RibbonType type = ((RibbonWidget*)widget->m_event_handler)->getRibbonType();
+    
     /* tab-bar ribbons */
-    if(widget->m_type == WTYPE_BUTTON)
+    if(type == RIBBON_TABS)
     {
         // ribbons containing buttons are actually tabs
         
         // FIXME - specify in file, don't hardcode
-        const int left_border = 75;
-        const int right_border = 75;
-        const int border_above = 0;
-        const int border_below = 0;
+        int left_border = 75;
+        int right_border = 75;
+        int border_above = 0;
+        int border_below = 15;
+        
+        // automatically guess from position on-screen if tabs go up or down
+        const bool vertical_flip = rect.UpperLeftCorner.Y < GUIEngine::getDriver()->getCurrentRenderTargetSize().Height/2;
+        float portion_out = 0.2f;
+        
+        /* when not using plain buttons, it's probably icons, so we need more space */
+        if(widget->m_type != WTYPE_BUTTON)
+        {
+            portion_out = 0.9f;
+            border_below = 50;
+        }
+        
+        core::rect< s32 > rect2 = rect;
+        
+        if(vertical_flip)
+        {
+            // move up a bit
+            rect2.LowerRightCorner.Y -= 10;
+            rect2.UpperLeftCorner.Y -= 10;
+        }
+        
         
         if (mark_selected)
         {
-            core::rect< s32 > rect2 = rect;
-            rect2.LowerRightCorner.Y += 10;
-            
+            if(vertical_flip)
+                rect2.UpperLeftCorner.Y -= 10;
+            else
+                rect2.LowerRightCorner.Y += 10;
+
             drawBoxFromStretchableTexture(rect2, (focused || parent_focused ? m_tex_ftab : m_tex_dtab),
                                           left_border, right_border,
-                                          border_above, border_below, false /* horizontal aspect ratio not kept */, 0.2f);
+                                          border_above, border_below, false /* horizontal aspect ratio not kept */, portion_out,
+                                          BODY | LEFT | RIGHT | TOP | BOTTOM, vertical_flip);
         }
         else
         {
-            drawBoxFromStretchableTexture(rect, m_tex_tab,
+            drawBoxFromStretchableTexture(rect2, m_tex_tab,
                                           left_border, right_border,
-                                          border_above, border_below, false /* horizontal aspect ratio not kept */, 0.0f);
+                                          border_above, border_below, false /* horizontal aspect ratio not kept */, portion_out,
+                                          BODY | LEFT | RIGHT | TOP | BOTTOM, vertical_flip);
         }
         
     }
diff --git a/src/gui/skin.hpp b/src/gui/skin.hpp
index 2062ca8c1..4d04d8838 100644
--- a/src/gui/skin.hpp
+++ b/src/gui/skin.hpp
@@ -52,7 +52,8 @@ class Skin : public IGUISkin
                                        const int top_border, const int bottom_border,
                                        const bool preserve_h_aspect_ratios=false,
                                        const float border_out_portion = 0.5,
-                                       int areas = BODY | LEFT | RIGHT | TOP | BOTTOM);
+                                       int areas = BODY | LEFT | RIGHT | TOP | BOTTOM,
+                                       const bool vertical_flip=false);
     
 public:
     Skin(IGUISkin* fallback_skin);