Great improvements to skin data (#3312)

* Add vertical tab support and get common files from a common folder

* License file for the common folder

* UI images shared by all 4 colored themes

* Delete redundant pictures

* Delete background.jpg

* Delete dialog.png

* Delete glassbutton_deactivated.png

* Delete glasscheckbox_checked_deactivated.png

* Delete glasscheckbox_deactivated.png

* Delete glass_rsection.png

* Delete glass_section.png

* Delete glassspinner.png

* Delete glassspinner_deactivated.png

* Delete glass_square_focused_bw.png

* Delete left_arrow.png

* Delete list_sort_down.png

* Delete list_sort_up.png

* Delete rating_star.png

* Delete right_arrow.png

* Delete scrollbar_bg.png

* Delete scrollbar_btn.png

* Delete table_header.png

* Delete tooltip.png

* Optimize image size and add vertical tabs

* Optimize image size and add vertical tabs for ocean skin

* The multiplayer colored squares are also shared

* Use the multiplayer colored squares from common

* Remove more redundant skin images

* Delete glass_square1.png

* Delete glass_square2.png

* Delete glass_square3.png

* Delete glass_square4.png

* Delete glass_square_focused.png

* Delete glass_square_focused2.png

* Delete glass_square_focused3.png

* Delete glass_square_focused4.png

* Optimize image size and add vertical tabs for peach skin

* Optimize image size and add vertical tabs for forest skin

* Special focus halo for ruby skin

Currently, the halo used in single player is shared with the one used for the first player in local multiplayer, despite the color of the top spinner widget not matching in this situation.

Better having this mismatch that a not-so-great halo in single-player.

I put it in common as it may be reused for multiplayer focus by other skins.

* Use pink selection halo

* Put the bottom bar among skinnable UI images

* Make the bottom bar part of the skins

* Coding style fix

* Delete bar.png

* Load bottom bar texture from skin rather than gui folder

Also rename bg_image to m_bg_image

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/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.