Merge remote-tracking branch 'origin/master' into STK-helper-ItemWeights

data/gui/online/networking_lobby.stkgui

@@ -2,22 +2,21 @@
 <stkgui>
     <div x="0" y="0" width="100%" height="100%" layout="vertical-row" >
         <header id="lobby-text" text_align="center" width="80%" align="center" I18N="In networking lobby" text="Lobby"/>
-        <spacer height="15" width="10"/>
-        <div proportion="4" x="2%" width="96%" layout="vertical-row">
+        <spacer height="1%" width="10"/>
+        <div proportion="9" x="2%" width="96%" layout="vertical-row">
             <div width="100%" proportion="2" layout="horizontal-row">
                 <box id="info" proportion="2" height="100%" layout="vertical-row">
                     <label word_wrap="true" id="text" proportion="3" width="100%" height="100%" text_valign="top"/>
                 </box>
-                <spacer width="20" height="20"/>
+                <spacer width="3%" height="20"/>
                 <box proportion="1" height="100%" layout="vertical-row">
                     <list id="players" width="100%" height="100%"/>
                 </box>
             </div>
         </div>
-        <spacer height="20"/>
-        <div width="100%" proportion="1" layout="horizontal-row">
-            <spacer width="20" height="20"/>
-            <box proportion="2" height="100%" layout="vertical-row">
+        <spacer height="2%"/>
+        <div proportion="2" x="2%" width="96%" layout="horizontal-row">
+            <box proportion="4" height="100%" layout="vertical-row">
                 <textbox id="chat" width="100%" height="30%"/>
                 <spacer height="10"/>
                 <div width="100%" height="30%" proportion="1" layout="horizontal-row">
@@ -26,15 +25,13 @@
                     <label id="timeout-message" width="80%" height="fit"/>
                 </div>
             </box>
-            <spacer width="40"/>
-            <buttonbar id="actions" proportion="1" width="75%" height="75%">
-                <icon-button id="start" width="64" height="64" icon="gui/green_check.png" align="center"
-                    I18N="In the network lobby" text="Start race"/>
-                <icon-button id="exit" width="64" height="64" icon="gui/main_quit.png" align="center"
-                    I18N="In the network lobby" text="Exit"/>
-            </buttonbar>
+            <spacer width="3%"/>
+            <icon-button id="start" proportion="1" width="64" height="64" icon="gui/green_check.png" align="top"
+                I18N="In the network lobby" text="Start race"/>
+            <icon-button id="exit" proportion="1" width="64" height="64" icon="gui/main_quit.png" align="top"
+                I18N="In the network lobby" text="Exit"/>
         </div>
-        <spacer height="10"/>
+        <spacer height="1%"/>
     </div>
     <icon-button id="back" x="0" y="0" height="8%" icon="gui/back.png"/>
 </stkgui>

data/skins/Coal.stkskin

@@ -0,0 +1,288 @@
+<!--
+
+Coal skin is based on Ocean skin
+Ocean skin by Dakal and Marianne Gagnon, released under creative-commons BY-SA 3.0+
+Except background.jpg, by elisee
+Except stars, by s@f
+
+To make your own skin, I suggest simply duplicating this file and modifying it as needed.
+There are two types of images : some will be simply stretched as a whole, others will
+have non-stretchable borders (you cannot choose which one you must use, it's hardcoded
+for each element type; though, as you will see below, for all "advanced stretching" images
+you can easily fake "simple stretch")
+
+All elements will have at least 2 properties :
+        type="X"                                sets what you're skinning with this entry
+        image="skinDirectory/imageName.png"     sets which image is used for this element
+
+Most elements also support states :
+        state="neutral"
+        state="focused"
+        state="down"
+You can thus give different looks for different states.  Not all widgets support all states,
+see entries and comments below to know what's supported.
+Note that checkboxes are an exception and have the following styles :
+    "neutral+unchecked"
+    "neutral+checked"
+    "focused+unchecked"
+    "focused+checked"
+    "deactivated+unchecked"
+    "deactivated+checked"
+
+"Advanced stretching" images are split this way :
+
+     +----+--------------------+----+
+     |    |                    |    |
+     +----+--------------------+----+
+     |    |                    |    |
+     |    |                    |    |     
+     |    |                    |    |     
+     +----+--------------------+----+
+     |    |                    |    | 
+     +----+--------------------+----+
+     
+The center border will be stretched in all directions. The 4 corners will not stretch at all.
+Horizontal borders will stretch horizontally, verticallt borders will stretch vertically.
+Use properties left_border="X" right_border="X" top_border="X" bottom_border="X" to specify
+the size of each border in pixels (setting all borders to '0' makes the whole image scaled).
+
+In some cases, you may not want vertical stretching to occur (like if the left and right sides
+of the image must not be stretched vertically, e.g. for the spinner). In this case, pass
+parameter preserve_h_aspect_ratios="true" to make the left and right areas stretch by keeping
+their aspect ratio.
+
+Some components may fill the full inner area with stuff; others will only take a smaller
+area at the center. To adjust for this, there are properties "hborder_out_portion" and "vborder_out_portion"
+that take a float from 0 to 1, representing the percentage of each border that goes out of the widget's
+area (this might include stuff like shadows, etc.). The 'h' one is for horizontal borders,
+the 'v' one is for vertical borders.
+
+Finnally : the image is split, as shown above, into 9 areas. In osme cases, you may not want
+all areas to be rendered. Then you can pass parameter areas="body+left+right+top+bottom"
+and explicitely specify which parts you want to see. The 4 corner areas are only visible
+when the border that intersect at this corner are enabled.
+
+-->
+
+<skin name="Coal" author="Alayan">
+
+<!--  Stateless -->
+<element type="background" image="coal/background.jpg" />
+
+<element type="bottom-bar" image="coal/bottom_bar.png" />
+
+<element type="achievement-message" image="coal/achievement.png"
+      left_border="128" right_border="13" top_border="13" bottom_border="13"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0.3" vborder_out_portion="0"/>
+
+<element type="friend-message" image="coal/friend.png"
+      left_border="128" right_border="13" top_border="13" bottom_border="13"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
+
+<element type="error-message" image="coal/error.png"
+      left_border="128" right_border="13" top_border="13" bottom_border="13"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
+
+<element type="generic-message" image="coal/generic.png"
+      left_border="128" right_border="13" top_border="13" bottom_border="13"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
+
+<element type="button" state="neutral" image="coal/glassbutton.png"
+      left_border="13" right_border="13" top_border="13" bottom_border="13"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
+
+<element type="button" state="focused" image="coal/glassbutton_focused.png"
+      left_border="13" right_border="13" top_border="13" bottom_border="13"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
+
+<element type="button" state="deactivated" image="common/glassbutton_deactivated.png"
+      left_border="13" right_border="13" top_border="13" bottom_border="13"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
+
+<!-- TODO : buttons could support 'pressed' state -->
+
+<element type="textbubble" state="neutral" image="coal/textbubble.png"
+      left_border="13" right_border="13" top_border="13" bottom_border="13"
+      hborder_out_portion="0.7" vborder_out_portion="0.3" />
+
+<element type="textbubble" state="focused" image="coal/textbubble2.png"
+      left_border="13" right_border="13" top_border="13" bottom_border="13"
+      hborder_out_portion="0.7" vborder_out_portion="0.3" />
+      
+<element type="progress" state="fill" image="coal/glasssgauge_fill.png"
+      left_border="20" right_border="20" top_border="0" bottom_border="0"
+      preserve_h_aspect_ratios="true" />
+
+<element type="progress" state="neutral" image="common/scrollbar_bg.png"
+      left_border="31" right_border="31" top_border="15" bottom_border="15"
+      preserve_h_aspect_ratios="true" />
+      
+      
+<element type="tab" state="neutral" image="coal/glasstab.png"
+      left_border="75" right_border="75" top_border="0" bottom_border="15"
+      hborder_out_portion="0.2" />
+      
+<element type="tab" state="focused" image="coal/glasstab_focus.png"
+      left_border="75" right_border="75" top_border="0" bottom_border="15"
+      hborder_out_portion="0.2" />
+
+<element type="tab" state="down" image="coal/glasstab_down.png"
+      left_border="75" right_border="75" top_border="0" bottom_border="15"
+      hborder_out_portion="0.2" />
+
+
+<element type="verticalTab" state="neutral" image="coal/glasstab_vert.png"
+      left_border="75" right_border="75" top_border="10" bottom_border="10"
+      hborder_out_portion="0.2" />
+      
+<element type="verticalTab" state="focused" image="coal/glasstab_vert_focus.png"
+      left_border="75" right_border="75" top_border="10" bottom_border="10"
+      hborder_out_portion="0.2" />
+
+<element type="verticalTab" state="down" image="coal/glasstab_vert_down.png"
+      left_border="75" right_border="75" top_border="10" bottom_border="10"
+      hborder_out_portion="0.2" />
+
+<!-- Stateless -->
+<element type="squareFocusHaloBW" image="common/glass_square_focused_bw.png"
+      left_border="6" right_border ="6" top_border="6" bottom_border="6"
+      hborder_out_portion="1.0" />
+<element type="squareFocusHalo" image="common/glass_square_focused_black.png"
+      left_border="6" right_border ="6" top_border="6" bottom_border="6"
+      hborder_out_portion="1.0" />
+<element type="squareFocusHalo2" image="common/glass_square_focused_cyan.png"
+      left_border="6" right_border ="6" top_border="6" bottom_border="6"
+      hborder_out_portion="1.0" />
+<element type="squareFocusHalo3" image="common/glass_square_focused_red.png"
+      left_border="6" right_border ="6" top_border="6" bottom_border="6"
+      hborder_out_portion="1.0" />
+<element type="squareFocusHalo4" image="common/glass_square_focused_green.png"
+      left_border="6" right_border ="6" top_border="6" bottom_border="6"
+      hborder_out_portion="1.0" />
+      
+<!-- Stateless. No splitting into 9 areas is done; the image is just resized. -->
+<element type="selectionHalo" image="coal/bubble.png"  />
+<element type="focusHalo" image="coal/glass_iconhighlight_focus.png"  />
+
+<element type="spinner" state="neutral" image="common/glassspinner.png"
+    left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+
+<element type="spinner" state="focused" image="coal/glassspinner_focus.png"
+    left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+
+<element type="spinner" state="deactivated" image="common/glassspinner_deactivated.png"
+    left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+
+<!-- player name spinner color in multiplayer-->
+<element type="spinner1" state="neutral" image="common/glass_square_black.png"
+      left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+<element type="spinner2" state="neutral" image="common/glass_square_cyan.png"
+      left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+<element type="spinner3" state="neutral" image="common/glass_square_red.png"
+      left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+<element type="spinner4" state="neutral" image="common/glass_square_green.png"
+      left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+
+
+<!-- This one is a bit special. Only area(s) LEFT and/or RIGHT will be rendered. They will be overlaid
+     on top of the spinner's background -->
+<element type="spinner" state="down" image="coal/glassspinner_down.png"
+    left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+
+<!-- For checkboxes, no splitting into 9 areas is done; the image is just stretched -->
+<element type="checkbox" state="neutral+unchecked" image="coal/glasscheckbox.png"/>
+<element type="checkbox" state="neutral+checked" image="coal/glasscheckbox_checked.png"/>
+<element type="checkbox" state="focused+unchecked" image="coal/glasscheckbox_focus.png"/>
+<element type="checkbox" state="focused+checked" image="coal/glasscheckbox_checked_focus.png"/>
+<element type="checkbox" state="deactivated+unchecked" image="common/glasscheckbox_deactivated.png"/>
+<element type="checkbox" state="deactivated+checked" image="common/glasscheckbox_checked_deactivated.png"/>
+
+<!-- are always in neutral state for now. No splitting into 9 areas is done; the image is just stretched.
+     Note: the body of a guage is the same as for for spinners. -->
+<element type="gaugefill" image="coal/glasssgauge_fill.png" />
+
+<!-- Lists are always in neutral state for now -->
+<element type="list" image="coal/glass_section.png"
+    left_border="15" right_border="15" top_border="7" bottom_border="7"
+    hborder_out_portion="0.0" vborder_out_portion="0.0" />
+    
+<element type="listitem" state="focused" image="coal/select.png"
+    left_border="0" right_border="0" top_border="0" bottom_border="0"
+    hborder_out_portion="0.0" vborder_out_portion="0.0" />
+    
+
+<!-- Scrollbars. Background and thumb have no state (always neutral state).
+     The buttons are the top and bottom arrows. Image must be top arrow, will
+     be mirrorred for bottom. Buttons can be in neutral or down state.
+     Advanced stretching is not used here.
+      -->
+<element type="scrollbar_background"          image="common/scrollbar_bg.png" />
+<element type="scrollbar_thumb"               image="coal/scrollbar_thumb.png" />
+<element type="scrollbar_button"              image="common/scrollbar_btn.png" />
+<element type="scrollbar_button" state="down" image="coal/scrollbar_btn_down.png" />
+
+<element type="left_arrow"  state="neutral" image="common/left_arrow.png" />
+<element type="right_arrow" state="neutral" image="common/right_arrow.png" />
+<element type="left_arrow"  state="focus"   image="coal/left_arrow_focus.png" />
+<element type="right_arrow" state="focus"   image="coal/right_arrow_focus.png" />
+
+<element type="list_header"  state="neutral" image="coal/table_header.png" />
+<element type="list_sort_up" state="neutral" image="common/list_sort_up.png" />
+<element type="list_sort_down" state="neutral" image="common/list_sort_down.png" />
+<element type="list_header"  state="down"    image="coal/table_header_down.png" />
+
+<!-- Stateless -->
+<element type="section" image="coal/glass_section.png"
+      left_border="15" right_border="15" top_border="15" bottom_border="15"
+      hborder_out_portion="0.0" vborder_out_portion="0.0" />
+
+<!-- Stateless -->
+<element type="rounded_section" image="coal/glass_rsection.png"
+      left_border="15" right_border="15" top_border="15" bottom_border="15"
+      hborder_out_portion="0.0" vborder_out_portion="0.0" />
+
+<!-- Stateless -->
+<element type="window" image="coal/dialog.png"
+      left_border="7" right_border="7" top_border="50" bottom_border="50"
+      hborder_out_portion="1.0" vborder_out_portion="0.2" />
+
+<!-- Stateless -->
+<element type="tooltip" image="common/tooltip.png"
+    left_border="10" right_border="10" top_border="10" bottom_border="10"
+    hborder_out_portion="1.0" vborder_out_portion="1.0" />
+    
+<!--                   Colors                  -->
+<color type="text" state="neutral" r="220" g="220" b="220" />
+<color type="brighttext" state="neutral" r="240" g="240" b="240" />
+
+<!-- For highlighted items, e.g. in list -->
+<color type="text" state="focused" r="255" g="255" b="255" />
+
+<!-- Color used to fade out background when a dialog is shown -->
+<color type="dialog_background" state="neutral" a="120" r="0" g="0" b="0" />
+
+<!-- Text field color -->
+<color type="text_field" state="background" a="255" r="35" g="35" b="35" />
+<color type="text_field" state="background_focused" a="255" r="15" g="15" b="15" />
+<color type="text_field" state="background_deactivated" a="255" r="90" g="90" b="90" />
+<color type="text_field" state="neutral" a="255" r="35" g="35" b="35" />
+<color type="text_field" state="focused" a="255" r="15" g="15" b="15" />
+<color type="text_field" state="deactivated" a="255" r="90" g="90" b="90" />
+
+<!-- Rating star image -->
+<element type="rating" state="neutral" image="common/rating_star.png" />
+
+<!-- Font color -->
+<color type="font" state="top" a="255" r="140" g="140" b="140" />
+<color type="font" state="bottom" a="255" r="235" g="235" b="235" />
+<color type="font" state="normal" a="255" r="220" g="220" b="220" />
+
+</skin>

data/skins/Forest.stkskin

@@ -67,7 +67,9 @@ when the border that intersect at this corner are enabled.
 <skin name="Forest" author="Benau">
 
 <!--  Stateless -->
-<element type="background" image="forest/background.jpg" />
+<element type="background" image="common/background.jpg" />
+
+<element type="bottom-bar" image="common/bottom_bar.png" />
 
 <element type="achievement-message" image="forest/achievement.png"
       left_border="128" right_border="13" top_border="13" bottom_border="13"
@@ -93,7 +95,7 @@ when the border that intersect at this corner are enabled.
       left_border="13" right_border="13" top_border="13" bottom_border="13"
       preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
 
-<element type="button" state="deactivated" image="forest/glassbutton_deactivated.png"
+<element type="button" state="deactivated" image="common/glassbutton_deactivated.png"
       left_border="13" right_border="13" top_border="13" bottom_border="13"
       preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
 
@@ -111,7 +113,7 @@ when the border that intersect at this corner are enabled.
       left_border="20" right_border="20" top_border="0" bottom_border="0"
       preserve_h_aspect_ratios="true" />
 
-<element type="progress" state="neutral" image="forest/scrollbar_bg.png"
+<element type="progress" state="neutral" image="common/scrollbar_bg.png"
       left_border="31" right_border="31" top_border="15" bottom_border="15"
       preserve_h_aspect_ratios="true" />
       
@@ -128,20 +130,33 @@ when the border that intersect at this corner are enabled.
       left_border="75" right_border="75" top_border="0" bottom_border="15"
       hborder_out_portion="0.2" />
 
+
+<element type="verticalTab" state="neutral" image="forest/glasstab_vert.png"
+      left_border="75" right_border="75" top_border="10" bottom_border="10"
+      hborder_out_portion="0.2" />
+      
+<element type="verticalTab" state="focused" image="forest/glasstab_vert_focus.png"
+      left_border="75" right_border="75" top_border="10" bottom_border="10"
+      hborder_out_portion="0.2" />
+
+<element type="verticalTab" state="down" image="forest/glasstab_vert_down.png"
+      left_border="75" right_border="75" top_border="10" bottom_border="10"
+      hborder_out_portion="0.2" />
+
 <!-- Stateless -->
-<element type="squareFocusHaloBW" image="forest/glass_square_focused_bw.png"
+<element type="squareFocusHaloBW" image="common/glass_square_focused_bw.png"
       left_border="6" right_border ="6" top_border="6" bottom_border="6"
       hborder_out_portion="1.0" />
-<element type="squareFocusHalo" image="forest/glass_square_focused.png"
+<element type="squareFocusHalo" image="common/glass_square_focused_green.png"
       left_border="6" right_border ="6" top_border="6" bottom_border="6"
       hborder_out_portion="1.0" />
-<element type="squareFocusHalo2" image="forest/glass_square_focused2.png"
+<element type="squareFocusHalo2" image="common/glass_square_focused_yellow.png"
       left_border="6" right_border ="6" top_border="6" bottom_border="6"
       hborder_out_portion="1.0" />
-<element type="squareFocusHalo3" image="forest/glass_square_focused3.png"
+<element type="squareFocusHalo3" image="common/glass_square_focused_red.png"
       left_border="6" right_border ="6" top_border="6" bottom_border="6"
       hborder_out_portion="1.0" />
-<element type="squareFocusHalo4" image="forest/glass_square_focused4.png"
+<element type="squareFocusHalo4" image="common/glass_square_focused_cyan.png"
       left_border="6" right_border ="6" top_border="6" bottom_border="6"
       hborder_out_portion="1.0" />
       
@@ -149,7 +164,7 @@ when the border that intersect at this corner are enabled.
 <element type="selectionHalo" image="forest/bubble.png"  />
 <element type="focusHalo" image="forest/glass_iconhighlight_focus.png"  />
 
-<element type="spinner" state="neutral" image="forest/glassspinner.png"
+<element type="spinner" state="neutral" image="common/glassspinner.png"
     left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
 
@@ -157,21 +172,21 @@ when the border that intersect at this corner are enabled.
     left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
 
-<element type="spinner" state="deactivated" image="forest/glassspinner_deactivated.png"
+<element type="spinner" state="deactivated" image="common/glassspinner_deactivated.png"
     left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
 
 <!-- player name spinner color in multiplayer-->
-<element type="spinner1" state="neutral" image="forest/glass_square1.png"
+<element type="spinner1" state="neutral" image="common/glass_square_green.png"
       left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
-<element type="spinner2" state="neutral" image="forest/glass_square2.png"
+<element type="spinner2" state="neutral" image="common/glass_square_yellow.png"
       left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
-<element type="spinner3" state="neutral" image="forest/glass_square3.png"
+<element type="spinner3" state="neutral" image="common/glass_square_red.png"
       left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
-<element type="spinner4" state="neutral" image="forest/glass_square4.png"
+<element type="spinner4" state="neutral" image="common/glass_square_cyan.png"
       left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
 
@@ -187,15 +202,15 @@ when the border that intersect at this corner are enabled.
 <element type="checkbox" state="neutral+checked" image="forest/glasscheckbox_checked.png"/>
 <element type="checkbox" state="focused+unchecked" image="forest/glasscheckbox_focus.png"/>
 <element type="checkbox" state="focused+checked" image="forest/glasscheckbox_checked_focus.png"/>
-<element type="checkbox" state="deactivated+unchecked" image="forest/glasscheckbox_deactivated.png"/>
-<element type="checkbox" state="deactivated+checked" image="forest/glasscheckbox_checked_deactivated.png"/>
+<element type="checkbox" state="deactivated+unchecked" image="common/glasscheckbox_deactivated.png"/>
+<element type="checkbox" state="deactivated+checked" image="common/glasscheckbox_checked_deactivated.png"/>
 
 <!-- are always in neutral state for now. No splitting into 9 areas is done; the image is just stretched.
      Note: the body of a guage is the same as for for spinners. -->
 <element type="gaugefill" image="forest/glasssgauge_fill.png" />
 
 <!-- Lists are always in neutral state for now -->
-<element type="list" image="forest/glass_section.png"
+<element type="list" image="common/glass_section.png"
     left_border="15" right_border="15" top_border="7" bottom_border="7"
     hborder_out_portion="0.0" vborder_out_portion="0.0" />
     
@@ -209,38 +224,38 @@ when the border that intersect at this corner are enabled.
      be mirrorred for bottom. Buttons can be in neutral or down state.
      Advanced stretching is not used here.
       -->
-<element type="scrollbar_background"          image="forest/scrollbar_bg.png" />
+<element type="scrollbar_background"          image="common/scrollbar_bg.png" />
 <element type="scrollbar_thumb"               image="forest/scrollbar_thumb.png" />
-<element type="scrollbar_button"              image="forest/scrollbar_btn.png" />
+<element type="scrollbar_button"              image="common/scrollbar_btn.png" />
 <element type="scrollbar_button" state="down" image="forest/scrollbar_btn_down.png" />
 
-<element type="left_arrow"  state="neutral" image="forest/left_arrow.png" />
-<element type="right_arrow" state="neutral" image="forest/right_arrow.png" />
+<element type="left_arrow"  state="neutral" image="common/left_arrow.png" />
+<element type="right_arrow" state="neutral" image="common/right_arrow.png" />
 <element type="left_arrow"  state="focus"   image="forest/left_arrow_focus.png" />
 <element type="right_arrow" state="focus"   image="forest/right_arrow_focus.png" />
 
-<element type="list_header"  state="neutral" image="forest/table_header.png" />
-<element type="list_sort_up" state="neutral" image="forest/list_sort_up.png" />
-<element type="list_sort_down" state="neutral" image="forest/list_sort_down.png" />
+<element type="list_header"  state="neutral" image="common/table_header.png" />
+<element type="list_sort_up" state="neutral" image="common/list_sort_up.png" />
+<element type="list_sort_down" state="neutral" image="common/list_sort_down.png" />
 <element type="list_header"  state="down"    image="forest/table_header_down.png" />
 
 <!-- Stateless -->
-<element type="section" image="forest/glass_section.png"
+<element type="section" image="common/glass_section.png"
       left_border="15" right_border="15" top_border="15" bottom_border="15"
       hborder_out_portion="0.0" vborder_out_portion="0.0" />
 
 <!-- Stateless -->
-<element type="rounded_section" image="forest/glass_rsection.png"
+<element type="rounded_section" image="common/glass_rsection.png"
       left_border="15" right_border="15" top_border="15" bottom_border="15"
       hborder_out_portion="0.0" vborder_out_portion="0.0" />
 
 <!-- Stateless -->
-<element type="window" image="forest/dialog.png"
+<element type="window" image="common/dialog.png"
       left_border="7" right_border="7" top_border="50" bottom_border="50"
       hborder_out_portion="1.0" vborder_out_portion="0.2" />
 
 <!-- Stateless -->
-<element type="tooltip" image="forest/tooltip.png"
+<element type="tooltip" image="common/tooltip.png"
     left_border="10" right_border="10" top_border="10" bottom_border="10"
     hborder_out_portion="1.0" vborder_out_portion="1.0" />
     
@@ -263,7 +278,7 @@ when the border that intersect at this corner are enabled.
 <color type="text_field" state="deactivated" a="255" r="138" g="138" b="138" />
 
 <!-- Rating star image -->
-<element type="rating" state="neutral" image="forest/rating_star.png" />
+<element type="rating" state="neutral" image="common/rating_star.png" />
 
 <!-- Font color -->
 <color type="font" state="top" a="255" r="60" g="230" b="150" />

data/skins/Ocean.stkskin

@@ -66,7 +66,9 @@ when the border that intersect at this corner are enabled.
 <skin name="Ocean" author="Dakal & Marianne Gagnon (Auria)">
 
 <!--  Stateless -->
-<element type="background" image="ocean/background.jpg" />
+<element type="background" image="common/background.jpg" />
+
+<element type="bottom-bar" image="common/bottom_bar.png" />
 
 <element type="achievement-message" image="ocean/achievement.png"
       left_border="128" right_border="13" top_border="13" bottom_border="13"
@@ -92,7 +94,7 @@ when the border that intersect at this corner are enabled.
       left_border="13" right_border="13" top_border="13" bottom_border="13"
       preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
 
-<element type="button" state="deactivated" image="ocean/glassbutton_deactivated.png"
+<element type="button" state="deactivated" image="common/glassbutton_deactivated.png"
       left_border="13" right_border="13" top_border="13" bottom_border="13"
       preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
 
@@ -110,7 +112,7 @@ when the border that intersect at this corner are enabled.
       left_border="20" right_border="20" top_border="0" bottom_border="0"
       preserve_h_aspect_ratios="true" />
 
-<element type="progress" state="neutral" image="ocean/scrollbar_bg.png"
+<element type="progress" state="neutral" image="common/scrollbar_bg.png"
       left_border="31" right_border="31" top_border="15" bottom_border="15"
       preserve_h_aspect_ratios="true" />
       
@@ -127,20 +129,33 @@ when the border that intersect at this corner are enabled.
       left_border="75" right_border="75" top_border="0" bottom_border="15"
       hborder_out_portion="0.2" />
 
+
+<element type="verticalTab" state="neutral" image="ocean/glasstab_vert.png"
+      left_border="75" right_border="75" top_border="10" bottom_border="10"
+      hborder_out_portion="0.2" />
+      
+<element type="verticalTab" state="focused" image="ocean/glasstab_vert_focus.png"
+      left_border="75" right_border="75" top_border="10" bottom_border="10"
+      hborder_out_portion="0.2" />
+
+<element type="verticalTab" state="down" image="ocean/glasstab_vert_down.png"
+      left_border="75" right_border="75" top_border="10" bottom_border="10"
+      hborder_out_portion="0.2" />
+
 <!-- Stateless -->
-<element type="squareFocusHaloBW" image="ocean/glass_square_focused_bw.png"
+<element type="squareFocusHaloBW" image="common/glass_square_focused_bw.png"
       left_border="6" right_border ="6" top_border="6" bottom_border="6"
       hborder_out_portion="1.0" />
-<element type="squareFocusHalo" image="ocean/glass_square_focused.png"
+<element type="squareFocusHalo" image="common/glass_square_focused_cyan.png"
       left_border="6" right_border ="6" top_border="6" bottom_border="6"
       hborder_out_portion="1.0" />
-<element type="squareFocusHalo2" image="ocean/glass_square_focused2.png"
+<element type="squareFocusHalo2" image="common/glass_square_focused_yellow.png"
       left_border="6" right_border ="6" top_border="6" bottom_border="6"
       hborder_out_portion="1.0" />
-<element type="squareFocusHalo3" image="ocean/glass_square_focused3.png"
+<element type="squareFocusHalo3" image="common/glass_square_focused_red.png"
       left_border="6" right_border ="6" top_border="6" bottom_border="6"
       hborder_out_portion="1.0" />
-<element type="squareFocusHalo4" image="ocean/glass_square_focused4.png"
+<element type="squareFocusHalo4" image="common/glass_square_focused_green.png"
       left_border="6" right_border ="6" top_border="6" bottom_border="6"
       hborder_out_portion="1.0" />
       
@@ -148,7 +163,7 @@ when the border that intersect at this corner are enabled.
 <element type="selectionHalo" image="ocean/bubble.png"  />
 <element type="focusHalo" image="ocean/glass_iconhighlight_focus.png"  />
 
-<element type="spinner" state="neutral" image="ocean/glassspinner.png"
+<element type="spinner" state="neutral" image="common/glassspinner.png"
     left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
 
@@ -156,21 +171,21 @@ when the border that intersect at this corner are enabled.
     left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
 
-<element type="spinner" state="deactivated" image="ocean/glassspinner_deactivated.png"
+<element type="spinner" state="deactivated" image="common/glassspinner_deactivated.png"
     left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
 
 <!-- player name spinner color in multiplayer-->
-<element type="spinner1" state="neutral" image="ocean/glass_square1.png"
+<element type="spinner1" state="neutral" image="common/glass_square_cyan.png"
       left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
-<element type="spinner2" state="neutral" image="ocean/glass_square2.png"
+<element type="spinner2" state="neutral" image="common/glass_square_yellow.png"
       left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
-<element type="spinner3" state="neutral" image="ocean/glass_square3.png"
+<element type="spinner3" state="neutral" image="common/glass_square_red.png"
       left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
-<element type="spinner4" state="neutral" image="ocean/glass_square4.png"
+<element type="spinner4" state="neutral" image="common/glass_square_green.png"
       left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
 
@@ -186,15 +201,15 @@ when the border that intersect at this corner are enabled.
 <element type="checkbox" state="neutral+checked" image="ocean/glasscheckbox_checked.png"/>
 <element type="checkbox" state="focused+unchecked" image="ocean/glasscheckbox_focus.png"/>
 <element type="checkbox" state="focused+checked" image="ocean/glasscheckbox_checked_focus.png"/>
-<element type="checkbox" state="deactivated+unchecked" image="ocean/glasscheckbox_deactivated.png"/>
-<element type="checkbox" state="deactivated+checked" image="ocean/glasscheckbox_checked_deactivated.png"/>
+<element type="checkbox" state="deactivated+unchecked" image="common/glasscheckbox_deactivated.png"/>
+<element type="checkbox" state="deactivated+checked" image="common/glasscheckbox_checked_deactivated.png"/>
 
 <!-- are always in neutral state for now. No splitting into 9 areas is done; the image is just stretched.
      Note: the body of a guage is the same as for for spinners. -->
 <element type="gaugefill" image="ocean/glasssgauge_fill.png" />
 
 <!-- Lists are always in neutral state for now -->
-<element type="list" image="ocean/glass_section.png"
+<element type="list" image="common/glass_section.png"
     left_border="15" right_border="15" top_border="7" bottom_border="7"
     hborder_out_portion="0.0" vborder_out_portion="0.0" />
     
@@ -208,38 +223,38 @@ when the border that intersect at this corner are enabled.
      be mirrorred for bottom. Buttons can be in neutral or down state.
      Advanced stretching is not used here.
       -->
-<element type="scrollbar_background"          image="ocean/scrollbar_bg.png" />
+<element type="scrollbar_background"          image="common/scrollbar_bg.png" />
 <element type="scrollbar_thumb"               image="ocean/scrollbar_thumb.png" />
-<element type="scrollbar_button"              image="ocean/scrollbar_btn.png" />
+<element type="scrollbar_button"              image="common/scrollbar_btn.png" />
 <element type="scrollbar_button" state="down" image="ocean/scrollbar_btn_down.png" />
 
-<element type="left_arrow"  state="neutral" image="ocean/left_arrow.png" />
-<element type="right_arrow" state="neutral" image="ocean/right_arrow.png" />
+<element type="left_arrow"  state="neutral" image="common/left_arrow.png" />
+<element type="right_arrow" state="neutral" image="common/right_arrow.png" />
 <element type="left_arrow"  state="focus"   image="ocean/left_arrow_focus.png" />
 <element type="right_arrow" state="focus"   image="ocean/right_arrow_focus.png" />
 
-<element type="list_header"  state="neutral" image="ocean/table_header.png" />
-<element type="list_sort_up" state="neutral" image="ocean/list_sort_up.png" />
-<element type="list_sort_down" state="neutral" image="ocean/list_sort_down.png" />
+<element type="list_header"  state="neutral" image="common/table_header.png" />
+<element type="list_sort_up" state="neutral" image="common/list_sort_up.png" />
+<element type="list_sort_down" state="neutral" image="common/list_sort_down.png" />
 <element type="list_header"  state="down"    image="ocean/table_header_down.png" />
 
 <!-- Stateless -->
-<element type="section" image="ocean/glass_section.png"
+<element type="section" image="common/glass_section.png"
       left_border="15" right_border="15" top_border="15" bottom_border="15"
       hborder_out_portion="0.0" vborder_out_portion="0.0" />
 
 <!-- Stateless -->
-<element type="rounded_section" image="ocean/glass_rsection.png"
+<element type="rounded_section" image="common/glass_rsection.png"
       left_border="15" right_border="15" top_border="15" bottom_border="15"
       hborder_out_portion="0.0" vborder_out_portion="0.0" />
 
 <!-- Stateless -->
-<element type="window" image="ocean/dialog.png"
+<element type="window" image="common/dialog.png"
       left_border="7" right_border="7" top_border="50" bottom_border="50"
       hborder_out_portion="1.0" vborder_out_portion="0.2" />
 
 <!-- Stateless -->
-<element type="tooltip" image="ocean/tooltip.png"
+<element type="tooltip" image="common/tooltip.png"
     left_border="10" right_border="10" top_border="10" bottom_border="10"
     hborder_out_portion="1.0" vborder_out_portion="1.0" />
     
@@ -262,7 +277,7 @@ when the border that intersect at this corner are enabled.
 <color type="text_field" state="deactivated" a="255" r="138" g="138" b="138" />
 
 <!-- Rating star image -->
-<element type="rating" state="neutral" image="ocean/rating_star.png" />
+<element type="rating" state="neutral" image="common/rating_star.png" />
 
 <!-- Font color -->
 <color type="font" state="top" a="255" r="100" g="200" b="220" />

data/skins/Peach.stkskin

@@ -66,7 +66,9 @@ when the border that intersect at this corner are enabled.
 <skin name="Peach" author="Dakal & Marianne Gagnon (Auria)">
 
 <!--  Stateless -->
-<element type="background" image="peach/background.jpg" />
+<element type="background" image="common/background.jpg" />
+
+<element type="bottom-bar" image="common/bottom_bar.png" />
 
 <element type="achievement-message" image="peach/achievement.png"
       left_border="128" right_border="13" top_border="13" bottom_border="13"
@@ -92,7 +94,7 @@ when the border that intersect at this corner are enabled.
       left_border="13" right_border="13" top_border="13" bottom_border="13"
       preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
 
-<element type="button" state="deactivated" image="peach/glassbutton_deactivated.png"
+<element type="button" state="deactivated" image="common/glassbutton_deactivated.png"
       left_border="13" right_border="13" top_border="13" bottom_border="13"
       preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
 
@@ -110,7 +112,7 @@ when the border that intersect at this corner are enabled.
       left_border="15" right_border="15" top_border="15" bottom_border="15"
       preserve_h_aspect_ratios="false" />
 
-<element type="progress" state="neutral" image="peach/scrollbar_bg.png"
+<element type="progress" state="neutral" image="common/scrollbar_bg.png"
       left_border="31" right_border="31" top_border="15" bottom_border="15"
       preserve_h_aspect_ratios="true" />
       
@@ -128,20 +130,32 @@ when the border that intersect at this corner are enabled.
       hborder_out_portion="0.2" />
 
 
+<element type="verticalTab" state="neutral" image="peach/glasstab_vert.png"
+      left_border="75" right_border="75" top_border="10" bottom_border="10"
+      hborder_out_portion="0.2" />
+      
+<element type="verticalTab" state="focused" image="peach/glasstab_vert_focus.png"
+      left_border="75" right_border="75" top_border="10" bottom_border="10"
+      hborder_out_portion="0.2" />
+
+<element type="verticalTab" state="down" image="peach/glasstab_vert_down.png"
+      left_border="75" right_border="75" top_border="10" bottom_border="10"
+      hborder_out_portion="0.2" />
+
 <!-- Stateless -->
-<element type="squareFocusHaloBW" image="peach/glass_square_focused_bw.png"
+<element type="squareFocusHaloBW" image="common/glass_square_focused_bw.png"
       left_border="6" right_border ="6" top_border="6" bottom_border="6"
       hborder_out_portion="1.0" />
-<element type="squareFocusHalo" image="peach/glass_square_focused.png"
+<element type="squareFocusHalo" image="common/glass_square_focused_red.png"
       left_border="6" right_border ="6" top_border="6" bottom_border="6"
       hborder_out_portion="1.0" />
-<element type="squareFocusHalo2" image="peach/glass_square_focused2.png"
+<element type="squareFocusHalo2" image="common/glass_square_focused_cyan.png"
       left_border="6" right_border ="6" top_border="6" bottom_border="6"
       hborder_out_portion="1.0" />
-<element type="squareFocusHalo3" image="peach/glass_square_focused3.png"
+<element type="squareFocusHalo3" image="common/glass_square_focused_green.png"
       left_border="6" right_border ="6" top_border="6" bottom_border="6"
       hborder_out_portion="1.0" />
-<element type="squareFocusHalo4" image="peach/glass_square_focused4.png"
+<element type="squareFocusHalo4" image="common/glass_square_focused_yellow.png"
       left_border="6" right_border ="6" top_border="6" bottom_border="6"
       hborder_out_portion="1.0" />
       
@@ -149,7 +163,7 @@ when the border that intersect at this corner are enabled.
 <element type="selectionHalo" image="peach/bubble.png"  />
 <element type="focusHalo" image="peach/glass_iconhighlight_focus.png"  />
 
-<element type="spinner" state="neutral" image="peach/glassspinner.png"
+<element type="spinner" state="neutral" image="common/glassspinner.png"
     left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
 
@@ -157,20 +171,21 @@ when the border that intersect at this corner are enabled.
     left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
 
-<element type="spinner" state="deactivated" image="peach/glassspinner_deactivated.png"
+<element type="spinner" state="deactivated" image="common/glassspinner_deactivated.png"
     left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
 
-<element type="spinner1" state="neutral" image="peach/glass_square1.png"
+<!-- player name spinner color in multiplayer-->
+<element type="spinner1" state="neutral" image="common/glass_square_red.png"
       left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
-<element type="spinner2" state="neutral" image="peach/glass_square2.png"
+<element type="spinner2" state="neutral" image="common/glass_square_cyan.png"
       left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
-<element type="spinner3" state="neutral" image="peach/glass_square3.png"
+<element type="spinner3" state="neutral" image="common/glass_square_green.png"
       left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
-<element type="spinner4" state="neutral" image="peach/glass_square4.png"
+<element type="spinner4" state="neutral" image="common/glass_square_yellow.png"
       left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
 
@@ -185,15 +200,15 @@ when the border that intersect at this corner are enabled.
 <element type="checkbox" state="neutral+checked" image="peach/glasscheckbox_checked.png"/>
 <element type="checkbox" state="focused+unchecked" image="peach/glasscheckbox_focus.png"/>
 <element type="checkbox" state="focused+checked" image="peach/glasscheckbox_checked_focus.png"/>
-<element type="checkbox" state="deactivated+unchecked" image="peach/glasscheckbox_deactivated.png"/>
-<element type="checkbox" state="deactivated+checked" image="peach/glasscheckbox_checked_deactivated.png"/>
+<element type="checkbox" state="deactivated+unchecked" image="common/glasscheckbox_deactivated.png"/>
+<element type="checkbox" state="deactivated+checked" image="common/glasscheckbox_checked_deactivated.png"/>
 
 <!-- are always in neutral state for now. No splitting into 9 areas is done; the image is just stretched.
      Note: the body of a guage is the same as for for spinners. -->
 <element type="gaugefill" image="peach/glasssgauge_fill.png" />
 
 <!-- Lists are always in neutral state for now -->
-<element type="list" image="peach/glass_section.png"
+<element type="list" image="common/glass_section.png"
     left_border="15" right_border="15" top_border="7" bottom_border="7"
     hborder_out_portion="0.0" vborder_out_portion="0.0" />
     
@@ -206,38 +221,38 @@ when the border that intersect at this corner are enabled.
      be mirrorred for bottom. Buttons can be in neutral or down state.
      Advanced stretching is not used here.
       -->
-<element type="scrollbar_background"          image="peach/scrollbar_bg.png" />
+<element type="scrollbar_background"          image="common/scrollbar_bg.png" />
 <element type="scrollbar_thumb"               image="peach/scrollbar_thumb.png" />
-<element type="scrollbar_button"              image="peach/scrollbar_btn.png" />
+<element type="scrollbar_button"              image="common/scrollbar_btn.png" />
 <element type="scrollbar_button" state="down" image="peach/scrollbar_btn_down.png" />
 
-<element type="left_arrow"  state="neutral" image="peach/left_arrow.png" />
-<element type="right_arrow" state="neutral" image="peach/right_arrow.png" />
+<element type="left_arrow"  state="neutral" image="common/left_arrow.png" />
+<element type="right_arrow" state="neutral" image="common/right_arrow.png" />
 <element type="left_arrow"  state="focus"   image="peach/left_arrow_focus.png" />
 <element type="right_arrow" state="focus"   image="peach/right_arrow_focus.png" />
 
-<element type="list_header"  state="neutral" image="peach/table_header.png" />
-<element type="list_sort_up" state="neutral" image="peach/list_sort_up.png" />
-<element type="list_sort_down" state="neutral" image="peach/list_sort_down.png" />
+<element type="list_header"  state="neutral" image="common/table_header.png" />
+<element type="list_sort_up" state="neutral" image="common/list_sort_up.png" />
+<element type="list_sort_down" state="neutral" image="common/list_sort_down.png" />
 <element type="list_header"  state="down"    image="peach/table_header_down.png" />
 
 <!-- Stateless -->
-<element type="section" image="peach/glass_section.png"
+<element type="section" image="common/glass_section.png"
       left_border="15" right_border="15" top_border="15" bottom_border="15"
       hborder_out_portion="0.0" vborder_out_portion="0.0" />
 
 <!-- Stateless -->
-<element type="rounded_section" image="peach/glass_rsection.png"
+<element type="rounded_section" image="common/glass_rsection.png"
       left_border="15" right_border="15" top_border="15" bottom_border="15"
       hborder_out_portion="0.0" vborder_out_portion="0.0" />
 
 <!-- Stateless -->
-<element type="window" image="peach/dialog.png"
+<element type="window" image="common/dialog.png"
       left_border="7" right_border="7" top_border="50" bottom_border="50"
       hborder_out_portion="1.0" vborder_out_portion="0.2" />
 
 <!-- Stateless -->
-<element type="tooltip" image="peach/tooltip.png"
+<element type="tooltip" image="common/tooltip.png"
     left_border="10" right_border="10" top_border="10" bottom_border="10"
     hborder_out_portion="1.0" vborder_out_portion="1.0" />
     
@@ -260,7 +275,7 @@ when the border that intersect at this corner are enabled.
 <color type="text_field" state="deactivated" a="255" r="138" g="138" b="138" />
 
 <!-- Rating star image -->
-<element type="rating" state="neutral" image="peach/rating_star.png" />
+<element type="rating" state="neutral" image="common/rating_star.png" />
 
 <!-- Font color -->
 <color type="font" state="top" a="255" r="255" g="128" b="0" />

data/skins/Ruby.stkskin

@@ -67,7 +67,9 @@ when the border that intersect at this corner are enabled.
 <skin name="Ruby" author="Benau">
 
 <!--  Stateless -->
-<element type="background" image="ruby/background.jpg" />
+<element type="background" image="common/background.jpg" />
+
+<element type="bottom-bar" image="common/bottom_bar.png" />
 
 <element type="achievement-message" image="ruby/achievement.png"
       left_border="128" right_border="13" top_border="13" bottom_border="13"
@@ -93,7 +95,7 @@ when the border that intersect at this corner are enabled.
       left_border="13" right_border="13" top_border="13" bottom_border="13"
       preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
 
-<element type="button" state="deactivated" image="ruby/glassbutton_deactivated.png"
+<element type="button" state="deactivated" image="common/glassbutton_deactivated.png"
       left_border="13" right_border="13" top_border="13" bottom_border="13"
       preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
 
@@ -111,7 +113,7 @@ when the border that intersect at this corner are enabled.
       left_border="15" right_border="15" top_border="15" bottom_border="15"
       preserve_h_aspect_ratios="false" />
 
-<element type="progress" state="neutral" image="ruby/scrollbar_bg.png"
+<element type="progress" state="neutral" image="common/scrollbar_bg.png"
       left_border="31" right_border="31" top_border="15" bottom_border="15"
       preserve_h_aspect_ratios="true" />
       
@@ -129,20 +131,32 @@ when the border that intersect at this corner are enabled.
       hborder_out_portion="0.2" />
 
 
+<element type="verticalTab" state="neutral" image="ruby/glasstab_vert.png"
+      left_border="75" right_border="75" top_border="10" bottom_border="10"
+      hborder_out_portion="0.2" />
+      
+<element type="verticalTab" state="focused" image="ruby/glasstab_vert_focus.png"
+      left_border="75" right_border="75" top_border="10" bottom_border="10"
+      hborder_out_portion="0.2" />
+
+<element type="verticalTab" state="down" image="ruby/glasstab_vert_down.png"
+      left_border="75" right_border="75" top_border="10" bottom_border="10"
+      hborder_out_portion="0.2" />
+
 <!-- Stateless -->
-<element type="squareFocusHaloBW" image="ruby/glass_square_focused_bw.png"
+<element type="squareFocusHaloBW" image="common/glass_square_focused_bw.png"
       left_border="6" right_border ="6" top_border="6" bottom_border="6"
       hborder_out_portion="1.0" />
-<element type="squareFocusHalo" image="ruby/glass_square_focused.png"
+<element type="squareFocusHalo" image="common/glass_square_focused_pink.png"
       left_border="6" right_border ="6" top_border="6" bottom_border="6"
       hborder_out_portion="1.0" />
-<element type="squareFocusHalo2" image="ruby/glass_square_focused2.png"
+<element type="squareFocusHalo2" image="common/glass_square_focused_cyan.png"
       left_border="6" right_border ="6" top_border="6" bottom_border="6"
       hborder_out_portion="1.0" />
-<element type="squareFocusHalo3" image="ruby/glass_square_focused3.png"
+<element type="squareFocusHalo3" image="common/glass_square_focused_green.png"
       left_border="6" right_border ="6" top_border="6" bottom_border="6"
       hborder_out_portion="1.0" />
-<element type="squareFocusHalo4" image="ruby/glass_square_focused4.png"
+<element type="squareFocusHalo4" image="common/glass_square_focused_yellow.png"
       left_border="6" right_border ="6" top_border="6" bottom_border="6"
       hborder_out_portion="1.0" />
       
@@ -150,7 +164,7 @@ when the border that intersect at this corner are enabled.
 <element type="selectionHalo" image="ruby/bubble.png"  />
 <element type="focusHalo" image="ruby/glass_iconhighlight_focus.png"  />
 
-<element type="spinner" state="neutral" image="ruby/glassspinner.png"
+<element type="spinner" state="neutral" image="common/glassspinner.png"
     left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
 
@@ -158,20 +172,21 @@ when the border that intersect at this corner are enabled.
     left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
 
-<element type="spinner" state="deactivated" image="ruby/glassspinner_deactivated.png"
+<element type="spinner" state="deactivated" image="common/glassspinner_deactivated.png"
     left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
 
-<element type="spinner1" state="neutral" image="ruby/glass_square1.png"
+<!-- player name spinner color in multiplayer-->
+<element type="spinner1" state="neutral" image="common/glass_square_red.png"
       left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
-<element type="spinner2" state="neutral" image="ruby/glass_square2.png"
+<element type="spinner2" state="neutral" image="common/glass_square_cyan.png"
       left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
-<element type="spinner3" state="neutral" image="ruby/glass_square3.png"
+<element type="spinner3" state="neutral" image="common/glass_square_green.png"
       left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
-<element type="spinner4" state="neutral" image="ruby/glass_square4.png"
+<element type="spinner4" state="neutral" image="common/glass_square_yellow.png"
       left_border="110" right_border="110" top_border="0" bottom_border="36"
     preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
 
@@ -186,15 +201,15 @@ when the border that intersect at this corner are enabled.
 <element type="checkbox" state="neutral+checked" image="ruby/glasscheckbox_checked.png"/>
 <element type="checkbox" state="focused+unchecked" image="ruby/glasscheckbox_focus.png"/>
 <element type="checkbox" state="focused+checked" image="ruby/glasscheckbox_checked_focus.png"/>
-<element type="checkbox" state="deactivated+unchecked" image="ruby/glasscheckbox_deactivated.png"/>
-<element type="checkbox" state="deactivated+checked" image="ruby/glasscheckbox_checked_deactivated.png"/>
+<element type="checkbox" state="deactivated+unchecked" image="common/glasscheckbox_deactivated.png"/>
+<element type="checkbox" state="deactivated+checked" image="common/glasscheckbox_checked_deactivated.png"/>
 
 <!-- are always in neutral state for now. No splitting into 9 areas is done; the image is just stretched.
      Note: the body of a guage is the same as for for spinners. -->
 <element type="gaugefill" image="ruby/glasssgauge_fill.png" />
 
 <!-- Lists are always in neutral state for now -->
-<element type="list" image="ruby/glass_section.png"
+<element type="list" image="common/glass_section.png"
     left_border="15" right_border="15" top_border="7" bottom_border="7"
     hborder_out_portion="0.0" vborder_out_portion="0.0" />
     
@@ -207,38 +222,38 @@ when the border that intersect at this corner are enabled.
      be mirrorred for bottom. Buttons can be in neutral or down state.
      Advanced stretching is not used here.
       -->
-<element type="scrollbar_background"          image="ruby/scrollbar_bg.png" />
+<element type="scrollbar_background"          image="common/scrollbar_bg.png" />
 <element type="scrollbar_thumb"               image="ruby/scrollbar_thumb.png" />
-<element type="scrollbar_button"              image="ruby/scrollbar_btn.png" />
+<element type="scrollbar_button"              image="common/scrollbar_btn.png" />
 <element type="scrollbar_button" state="down" image="ruby/scrollbar_btn_down.png" />
 
-<element type="left_arrow"  state="neutral" image="ruby/left_arrow.png" />
-<element type="right_arrow" state="neutral" image="ruby/right_arrow.png" />
+<element type="left_arrow"  state="neutral" image="common/left_arrow.png" />
+<element type="right_arrow" state="neutral" image="common/right_arrow.png" />
 <element type="left_arrow"  state="focus"   image="ruby/left_arrow_focus.png" />
 <element type="right_arrow" state="focus"   image="ruby/right_arrow_focus.png" />
 
-<element type="list_header"  state="neutral" image="ruby/table_header.png" />
-<element type="list_sort_up" state="neutral" image="ruby/list_sort_up.png" />
-<element type="list_sort_down" state="neutral" image="ruby/list_sort_down.png" />
+<element type="list_header"  state="neutral" image="common/table_header.png" />
+<element type="list_sort_up" state="neutral" image="common/list_sort_up.png" />
+<element type="list_sort_down" state="neutral" image="common/list_sort_down.png" />
 <element type="list_header"  state="down"    image="ruby/table_header_down.png" />
 
 <!-- Stateless -->
-<element type="section" image="ruby/glass_section.png"
+<element type="section" image="common/glass_section.png"
       left_border="15" right_border="15" top_border="15" bottom_border="15"
       hborder_out_portion="0.0" vborder_out_portion="0.0" />
 
 <!-- Stateless -->
-<element type="rounded_section" image="ruby/glass_rsection.png"
+<element type="rounded_section" image="common/glass_rsection.png"
       left_border="15" right_border="15" top_border="15" bottom_border="15"
       hborder_out_portion="0.0" vborder_out_portion="0.0" />
 
 <!-- Stateless -->
-<element type="window" image="ruby/dialog.png"
+<element type="window" image="common/dialog.png"
       left_border="7" right_border="7" top_border="50" bottom_border="50"
       hborder_out_portion="1.0" vborder_out_portion="0.2" />
 
 <!-- Stateless -->
-<element type="tooltip" image="ruby/tooltip.png"
+<element type="tooltip" image="common/tooltip.png"
     left_border="10" right_border="10" top_border="10" bottom_border="10"
     hborder_out_portion="1.0" vborder_out_portion="1.0" />
     
@@ -261,7 +276,7 @@ when the border that intersect at this corner are enabled.
 <color type="text_field" state="deactivated" a="255" r="138" g="138" b="138" />
 
 <!-- Rating star image -->
-<element type="rating" state="neutral" image="ruby/rating_star.png" />
+<element type="rating" state="neutral" image="common/rating_star.png" />
 
 <!-- Font color -->
 <color type="font" state="top" a="255" r="255" g="30" b="200" />

data/skins/coal/License.txt

@@ -0,0 +1,7 @@
+friend.png, error.png, achievement.png - Licensed under CC-BY-SA 3.0 by Magne Djupvik (notification_backgrounds.xcf), 
+    based on  cup_gold.png licensed under CC-BY-SA 3+ from Open Game Art (art by onyum.com, comissionned by Bart Kelsey)
+    glass_section.png licensed under CC-BY-SA 3.0 Unported and main_about.png licensed under Creative-Commons BY-SA 3, By yeKcim (Anthony Carré)
+
+This work is licensed under the Creative Commons Attribution-Share Alike 3.0 Unported License.
+To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/3.0/ or send
+a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.

data/skins/common/License.txt

@@ -0,0 +1,5 @@
+glass_section.png licensed under CC-BY-SA 3.0 Unported, By yeKcim (Anthony Carré)
+
+This work is licensed under the Creative Commons Attribution-Share Alike 3.0 Unported License.
+To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/3.0/ or send
+a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.