diff --git a/data/skins/cartoon-coal/achievement.png b/data/skins/cartoon-coal/achievement.png
new file mode 100644
index 000000000..3d3ee76ad
Binary files /dev/null and b/data/skins/cartoon-coal/achievement.png differ
diff --git a/data/skins/cartoon-coal/background.jpg b/data/skins/cartoon-coal/background.jpg
new file mode 100644
index 000000000..cde7ae5d7
Binary files /dev/null and b/data/skins/cartoon-coal/background.jpg differ
diff --git a/data/skins/cartoon-coal/bottom_bar.png b/data/skins/cartoon-coal/bottom_bar.png
new file mode 100644
index 000000000..27398c55a
Binary files /dev/null and b/data/skins/cartoon-coal/bottom_bar.png differ
diff --git a/data/skins/cartoon-coal/bubble.png b/data/skins/cartoon-coal/bubble.png
new file mode 100644
index 000000000..0ce1b0a2d
Binary files /dev/null and b/data/skins/cartoon-coal/bubble.png differ
diff --git a/data/skins/cartoon-coal/button.png b/data/skins/cartoon-coal/button.png
new file mode 100644
index 000000000..d6e4a4e77
Binary files /dev/null and b/data/skins/cartoon-coal/button.png differ
diff --git a/data/skins/cartoon-coal/button_focused.png b/data/skins/cartoon-coal/button_focused.png
new file mode 100644
index 000000000..982216bfc
Binary files /dev/null and b/data/skins/cartoon-coal/button_focused.png differ
diff --git a/data/skins/cartoon-coal/checkbox.png b/data/skins/cartoon-coal/checkbox.png
new file mode 100644
index 000000000..df90c4064
Binary files /dev/null and b/data/skins/cartoon-coal/checkbox.png differ
diff --git a/data/skins/cartoon-coal/checkbox_checked.png b/data/skins/cartoon-coal/checkbox_checked.png
new file mode 100644
index 000000000..e2fbe9be7
Binary files /dev/null and b/data/skins/cartoon-coal/checkbox_checked.png differ
diff --git a/data/skins/cartoon-coal/checkbox_checked_focus.png b/data/skins/cartoon-coal/checkbox_checked_focus.png
new file mode 100644
index 000000000..fb8d1e78c
Binary files /dev/null and b/data/skins/cartoon-coal/checkbox_checked_focus.png differ
diff --git a/data/skins/cartoon-coal/checkbox_focus.png b/data/skins/cartoon-coal/checkbox_focus.png
new file mode 100644
index 000000000..868b9deaa
Binary files /dev/null and b/data/skins/cartoon-coal/checkbox_focus.png differ
diff --git a/data/skins/cartoon-coal/dialog.png b/data/skins/cartoon-coal/dialog.png
new file mode 100644
index 000000000..760fb7e3a
Binary files /dev/null and b/data/skins/cartoon-coal/dialog.png differ
diff --git a/data/skins/cartoon-coal/down_arrow.png b/data/skins/cartoon-coal/down_arrow.png
new file mode 100644
index 000000000..be54a4a9c
Binary files /dev/null and b/data/skins/cartoon-coal/down_arrow.png differ
diff --git a/data/skins/cartoon-coal/error.png b/data/skins/cartoon-coal/error.png
new file mode 100644
index 000000000..6187d1710
Binary files /dev/null and b/data/skins/cartoon-coal/error.png differ
diff --git a/data/skins/cartoon-coal/error_red_with_orange_bg.png b/data/skins/cartoon-coal/error_red_with_orange_bg.png
new file mode 100644
index 000000000..5eb1a5511
Binary files /dev/null and b/data/skins/cartoon-coal/error_red_with_orange_bg.png differ
diff --git a/data/skins/cartoon-coal/error_white_with_red_bg.png b/data/skins/cartoon-coal/error_white_with_red_bg.png
new file mode 100644
index 000000000..e4b105411
Binary files /dev/null and b/data/skins/cartoon-coal/error_white_with_red_bg.png differ
diff --git a/data/skins/cartoon-coal/friend.png b/data/skins/cartoon-coal/friend.png
new file mode 100644
index 000000000..1805cda22
Binary files /dev/null and b/data/skins/cartoon-coal/friend.png differ
diff --git a/data/skins/cartoon-coal/gauge_fill.png b/data/skins/cartoon-coal/gauge_fill.png
new file mode 100644
index 000000000..acaadcb56
Binary files /dev/null and b/data/skins/cartoon-coal/gauge_fill.png differ
diff --git a/data/skins/cartoon-coal/generic.png b/data/skins/cartoon-coal/generic.png
new file mode 100644
index 000000000..d871314e1
Binary files /dev/null and b/data/skins/cartoon-coal/generic.png differ
diff --git a/data/skins/cartoon-coal/glass_iconhighlight_focus.png b/data/skins/cartoon-coal/glass_iconhighlight_focus.png
new file mode 100644
index 000000000..76fad7381
Binary files /dev/null and b/data/skins/cartoon-coal/glass_iconhighlight_focus.png differ
diff --git a/data/skins/cartoon-coal/glass_rsection.png b/data/skins/cartoon-coal/glass_rsection.png
new file mode 100644
index 000000000..27592d0d0
Binary files /dev/null and b/data/skins/cartoon-coal/glass_rsection.png differ
diff --git a/data/skins/cartoon-coal/left_arrow.png b/data/skins/cartoon-coal/left_arrow.png
new file mode 100644
index 000000000..7229ff996
Binary files /dev/null and b/data/skins/cartoon-coal/left_arrow.png differ
diff --git a/data/skins/cartoon-coal/left_arrow_focus.png b/data/skins/cartoon-coal/left_arrow_focus.png
new file mode 100644
index 000000000..201690fbd
Binary files /dev/null and b/data/skins/cartoon-coal/left_arrow_focus.png differ
diff --git a/data/skins/cartoon-coal/licenses.txt b/data/skins/cartoon-coal/licenses.txt
new file mode 100644
index 000000000..086c7eeaa
--- /dev/null
+++ b/data/skins/cartoon-coal/licenses.txt
@@ -0,0 +1,30 @@
+Format: https://www.debian.org/doc/packaging-manuals/copyright-format/1.0/
+Upstream-Name: SuperTuxKart
+Upstream-Contact:
+ Marianne Gagnon <auria.mg@gmail.com>
+ Jean-Manuel Clémençon <sam.un@protonmail.com>
+Source: https://supertuxkart.net
+
+Files:
+ glass_iconhighlight_focus.png
+ bubble.png
+Copyright: ???
+License: CC-BY-SA 3.0
+Comment: From peach skin
+
+Files:
+ src/Inter-UI-Black.ttf
+Copyright: Copyright 2018 The Inter UI project authors
+License: OFL 1.1 (SIL Open Font License, Version 1.1)
+Comment: Specifically using version 2.5 of the font, later versions have a different look
+
+Files:
+ src/NotoSans*
+Copyright: Copyright 2015-2016 Google Inc. All Rights Reserved.
+License: This Font Software is licensed under the SIL Open Font License, Version 1.1. This Font Software is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the SIL Open Font License for the specific language, permissions and limitations governing your use of this Font Software.
+Comment: Bold/Black versions of the language-specific fonts used in the other skins
+
+Files: *
+Copyright: Copyright 2018-2020 LCP and QwertyChouskie
+License: CC-BY-SA 4.0
+Comment: Original style, most icons, and some elements by LCP, skin finished by QwertyChouskie
diff --git a/data/skins/cartoon-coal/right_arrow.png b/data/skins/cartoon-coal/right_arrow.png
new file mode 100644
index 000000000..48b90444d
Binary files /dev/null and b/data/skins/cartoon-coal/right_arrow.png differ
diff --git a/data/skins/cartoon-coal/right_arrow_focus.png b/data/skins/cartoon-coal/right_arrow_focus.png
new file mode 100644
index 000000000..40096b37a
Binary files /dev/null and b/data/skins/cartoon-coal/right_arrow_focus.png differ
diff --git a/data/skins/cartoon-coal/rsection.png b/data/skins/cartoon-coal/rsection.png
new file mode 100644
index 000000000..7e36aef4c
Binary files /dev/null and b/data/skins/cartoon-coal/rsection.png differ
diff --git a/data/skins/cartoon-coal/scrollbar_bg.png b/data/skins/cartoon-coal/scrollbar_bg.png
new file mode 100644
index 000000000..6e9758836
Binary files /dev/null and b/data/skins/cartoon-coal/scrollbar_bg.png differ
diff --git a/data/skins/cartoon-coal/scrollbar_button.png b/data/skins/cartoon-coal/scrollbar_button.png
new file mode 100644
index 000000000..12d221470
Binary files /dev/null and b/data/skins/cartoon-coal/scrollbar_button.png differ
diff --git a/data/skins/cartoon-coal/scrollbar_thumb.png b/data/skins/cartoon-coal/scrollbar_thumb.png
new file mode 100644
index 000000000..ecae57208
Binary files /dev/null and b/data/skins/cartoon-coal/scrollbar_thumb.png differ
diff --git a/data/skins/cartoon-coal/section.png b/data/skins/cartoon-coal/section.png
new file mode 100644
index 000000000..4a3ad3eee
Binary files /dev/null and b/data/skins/cartoon-coal/section.png differ
diff --git a/data/skins/cartoon-coal/select.png b/data/skins/cartoon-coal/select.png
new file mode 100644
index 000000000..6fd5a98d9
Binary files /dev/null and b/data/skins/cartoon-coal/select.png differ
diff --git a/data/skins/cartoon-coal/spinner.png b/data/skins/cartoon-coal/spinner.png
new file mode 100644
index 000000000..6cee4dd4c
Binary files /dev/null and b/data/skins/cartoon-coal/spinner.png differ
diff --git a/data/skins/cartoon-coal/spinner_down.png b/data/skins/cartoon-coal/spinner_down.png
new file mode 100644
index 000000000..6cee4dd4c
Binary files /dev/null and b/data/skins/cartoon-coal/spinner_down.png differ
diff --git a/data/skins/cartoon-coal/spinner_fill.png b/data/skins/cartoon-coal/spinner_fill.png
new file mode 100644
index 000000000..4a208f649
Binary files /dev/null and b/data/skins/cartoon-coal/spinner_fill.png differ
diff --git a/data/skins/cartoon-coal/spinner_focus.png b/data/skins/cartoon-coal/spinner_focus.png
new file mode 100644
index 000000000..6a1deeeee
Binary files /dev/null and b/data/skins/cartoon-coal/spinner_focus.png differ
diff --git a/data/skins/cartoon-coal/stkskin.xml b/data/skins/cartoon-coal/stkskin.xml
new file mode 100644
index 000000000..c34ca6321
--- /dev/null
+++ b/data/skins/cartoon-coal/stkskin.xml
@@ -0,0 +1,376 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+Cartoon skin by LCP and QwertyChouskie, released under CC-BY-SA 4.0+
+
+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 some 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.
+
+When there is a common="y" with image tag, the image will be loaded only from data/skins/common in stk-code.
+
+Any information not specified in this theme will be inherited from the specified base theme,
+if any.  To specify a base theme, add base_theme="themename" to the <skin> tag.
+
+To use an icon theme, place the replacement icons (PNG or SVG) into [skin folder]/data/gui/icons
+STK will prefer these icons first, if not found it will fallback to icons from the base theme(s).
+-->
+
+<skin name="Cartoon - Coal" author="LCP and QwertyChouskie (edited by CrystalDaEevee)" base_theme="cartoon">
+
+<!--
+Here you can configure advanced theming rules for this skin
+
+For TTF specify the list like the following, for normal and digit ttf it will be added at the beginning of the
+font list in STK, so those TTF will be used first, and any missing characters will be rendered from the base
+theme font list. For color emoji ttf it will replace the base theme color emoji directly. You are not required
+to specify all types of ttf.
+
+<advanced normal_ttf="xxx.ttf yyy.ttf"
+          digit_ttf="zzz.ttf"
+          color_emoji_ttf="www.ttf"/>
+-->
+
+<!--  Stateless -->
+<element type="background" image="background.jpg" />
+
+<element type="bottom-bar" image="bottom_bar.png" />
+
+<element type="achievement-message" image="achievement.png"
+      left_border="130" 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="friend.png"
+      left_border="130" right_border="13" top_border="13" bottom_border="13"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
+
+<!-- Provided by base theme
+<element type="error-message" image="error.png"
+      left_border="130" 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="generic.png"
+      left_border="130" 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="button.png"
+      left_border="40" right_border="40" top_border="12" bottom_border="12"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0" vborder_out_portion="0"
+      h_inner_padding="0.15" v_inner_padding="0.35"/>
+
+<element type="button" state="focused" image="button_focused.png"
+      left_border="40" right_border="40" top_border="12" bottom_border="12"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0" vborder_out_portion="0"
+      h_inner_padding="0.15" v_inner_padding="0.35"/>
+
+<!-- Provided by base theme
+<element type="button" state="deactivated" image="button_inactive.png"
+      left_border="40" right_border="40" top_border="12" bottom_border="12"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0" vborder_out_portion="0"
+      h_inner_padding="0.15" v_inner_padding="0.35"/>-->
+
+<!-- TODO : buttons could support 'pressed' state -->
+
+<!-- Provided by base theme
+<element type="textbubble" state="neutral" image="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="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="gauge_fill.png"
+      left_border="7" right_border="7" top_border="7" bottom_border="7"
+      preserve_h_aspect_ratios="false" />
+
+<!-- Provided by base theme
+<element type="progress" state="neutral" image="section.png"
+      left_border="7" right_border="7" top_border="7" bottom_border="7"
+      preserve_h_aspect_ratios="false" />-->
+      
+      
+<element type="tab" state="neutral" image="tab.png"
+      left_border="44" right_border="44" top_border="28" bottom_border="28"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-12" h_margin="0" v_margin="0" />
+      
+<element type="tab" state="focused" image="tab_focus.png"
+      left_border="44" right_border="44" top_border="28" bottom_border="28"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-12" h_margin="0" v_margin="0" />
+
+<element type="tab" state="down" image="tab.png"
+      left_border="44" right_border="44" top_border="28" bottom_border="28"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-12" h_margin="0" v_margin="0" />
+
+
+<element type="verticalTab" state="neutral" image="tab_vert.png"
+      left_border="45" right_border="45" top_border="28" bottom_border="28"
+      hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-8" h_margin="0" v_margin="4" />
+      
+<element type="verticalTab" state="focused" image="tab_vert_focus.png"
+      left_border="45" right_border="45" top_border="28" bottom_border="28"
+      hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-8" h_margin="0" v_margin="4" />
+
+<element type="verticalTab" state="down" image="tab_vert.png"
+      left_border="45" right_border="45" top_border="28" bottom_border="28"
+      hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-8" h_margin="0" v_margin="4" />
+
+<!-- Stateless -->
+<!-- Provided by base theme
+<element type="squareFocusHaloBW" common="y" image="glass_square_focused_bw.png"
+      left_border="6" right_border ="6" top_border="6" bottom_border="6"
+      hborder_out_portion="1.0" />
+<element type="squareFocusHalo1" common="y" image="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" common="y" image="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" common="y" image="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" common="y" image="glass_square_focused_yellow.png"
+      left_border="6" right_border ="6" top_border="6" bottom_border="6"
+      hborder_out_portion="1.0" />
+<element type="squareFocusHalo5" common="y" image="glass_square_focused_pink.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="bubble.png"  />
+<element type="focusHalo" image="glass_iconhighlight_focus.png"  />
+
+<element type="spinner" state="neutral" image="spinner.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="spinner_focus.png"
+    left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+
+<!-- Provided by base theme
+<element type="spinner" state="deactivated" image="spinner_deactivated.png"
+    left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />-->
+
+<!-- color spinner in kart color selection -->
+<!-- Provided by base theme
+<element type="spinner_rainbow" state="neutral" image="spinner_rainbow.png"
+      left_border="104" right_border="104" top_border="0" bottom_border="36"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0.0"/>
+
+<element type="spinner_rainbow" state="focused" image="spinner_rainbow_focus.png"
+      left_border="104" right_border="104" top_border="0" bottom_border="36"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0.0"/>
+
+<element type="spinner_rainbow" state="deactivated" image="spinner_rainbow_deactivated.png"
+      left_border="104" right_border="104" top_border="0" bottom_border="36"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0.0"/>-->
+
+<!-- player name spinner color in multiplayer-->
+<!-- Provided by base theme
+<element type="spinner1" state="neutral" image="spinner_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="spinner_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="spinner_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="spinner_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="spinner5" state="neutral" image="spinner_pink.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="spinner_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="checkbox.png"/>
+<element type="checkbox" state="neutral+checked" image="checkbox_checked.png"/>
+<element type="checkbox" state="focused+unchecked" image="checkbox_focus.png"/>
+<element type="checkbox" state="focused+checked" image="checkbox_checked_focus.png"/>
+<!-- Provided by base theme
+<element type="checkbox" state="deactivated+unchecked" image="checkbox_deactivated.png"/>
+<element type="checkbox" state="deactivated+checked" image="checkbox_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="spinner_fill.png" />
+<!-- used for the color slider. -->
+<!-- Provided by base theme
+<element type="gaugefillrainbow" common="y" image="gauge_fill_rainbow.png"/>-->
+
+<!-- Lists are always in neutral state for now -->
+<!-- Provided by base theme
+<element type="list" image="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="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 only used for the background and thumb. -->
+<!-- Provided by base theme
+<element type="scrollbar_background"          image="scrollbar_bg.png"
+    left_border="7" right_border="7" top_border="7" bottom_border="7"
+    hborder_out_portion="0.0" vborder_out_portion="0.0" />-->
+<element type="scrollbar_thumb"               image="scrollbar_thumb.png"
+    left_border="7" right_border="7" top_border="7" bottom_border="7"
+    hborder_out_portion="0.0" vborder_out_portion="0.0" />
+<element type="scrollbar_button"              image="scrollbar_button.png" />
+<element type="scrollbar_button" state="down" image="scrollbar_button.png" />
+
+<element type="left_arrow"  state="neutral" image="left_arrow.png" />
+<element type="right_arrow" state="neutral" image="right_arrow.png" />
+<element type="left_arrow"  state="focus"   image="left_arrow_focus.png" />
+<element type="right_arrow" state="focus"   image="right_arrow_focus.png" />
+
+<!-- Provided by base theme
+<element type="list_header"  state="neutral" image="table_header.png" />-->
+<element type="list_sort_up" state="neutral" image="up_arrow.png" />
+<element type="list_sort_down" state="neutral" image="down_arrow.png" />
+<element type="list_header"  state="down"    image="table_header_down.png" />
+
+<!-- Stateless -->
+<!-- Provided by base theme
+<element type="section" image="section.png"
+      left_border="15" right_border="15" top_border="15" bottom_border="15"
+      hborder_out_portion="0.0" vborder_out_portion="0.0" />
+
+<element type="section" state="selected" image="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 -->
+<!-- Provided by base theme
+<element type="rounded_section" image="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 -->
+<!-- Provided by base theme
+<element type="window" image="dialog.png"
+      left_border="32" right_border="32" top_border="32" bottom_border="32"
+      hborder_out_portion="1.0" vborder_out_portion="1.0" />-->
+
+<!-- Stateless -->
+<!-- Provided by base theme
+<element type="tooltip" image="tooltip.png"
+    left_border="10" right_border="10" top_border="10" bottom_border="10"
+    hborder_out_portion="1.5" 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 in the credits -->
+<color type="credits_text" state="neutral" r="220" g="220" b="220" />
+
+<!-- Color used for emphasized items in e.g. lists -->
+<color type="emphasis_text" state="neutral" r="230" g="210" b="50" />
+<color type="emphasis_text" state="focused" r="255" g="226" b="56" />
+
+<!-- Color used for red/blue items in list (e.g. player team color in networking) -->
+<color type="list_blue" state="neutral" r="0" g="0" b="180" />
+<color type="list_blue" state="focused" r="0" g="0" b="255" />
+<color type="list_red" state="neutral" r="255" g="0" b="0" />
+<color type="list_red" state="focused" r="255" g="0" b="0" />
+
+<!-- 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" />
+
+<!-- Color used for tips in the loading screen -->
+<color type="tips_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="background_marked" a="128" r="220" g="220" b="220" />
+<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 -->
+<!-- Provided by base theme
+<element type="rating" state="neutral" image="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>
diff --git a/data/skins/cartoon-coal/tab.png b/data/skins/cartoon-coal/tab.png
new file mode 100644
index 000000000..0c5ce0280
Binary files /dev/null and b/data/skins/cartoon-coal/tab.png differ
diff --git a/data/skins/cartoon-coal/tab_focus.png b/data/skins/cartoon-coal/tab_focus.png
new file mode 100644
index 000000000..443e5b51a
Binary files /dev/null and b/data/skins/cartoon-coal/tab_focus.png differ
diff --git a/data/skins/cartoon-coal/tab_vert.png b/data/skins/cartoon-coal/tab_vert.png
new file mode 100644
index 000000000..593c80263
Binary files /dev/null and b/data/skins/cartoon-coal/tab_vert.png differ
diff --git a/data/skins/cartoon-coal/tab_vert_focus.png b/data/skins/cartoon-coal/tab_vert_focus.png
new file mode 100644
index 000000000..61bdbdbdf
Binary files /dev/null and b/data/skins/cartoon-coal/tab_vert_focus.png differ
diff --git a/data/skins/cartoon-coal/table_header_down.png b/data/skins/cartoon-coal/table_header_down.png
new file mode 100644
index 000000000..010b72656
Binary files /dev/null and b/data/skins/cartoon-coal/table_header_down.png differ
diff --git a/data/skins/cartoon-coal/textbubble.png b/data/skins/cartoon-coal/textbubble.png
new file mode 100644
index 000000000..fb805bd24
Binary files /dev/null and b/data/skins/cartoon-coal/textbubble.png differ
diff --git a/data/skins/cartoon-coal/textbubble2.png b/data/skins/cartoon-coal/textbubble2.png
new file mode 100644
index 000000000..9c9fcb174
Binary files /dev/null and b/data/skins/cartoon-coal/textbubble2.png differ
diff --git a/data/skins/cartoon-coal/tooltip.png b/data/skins/cartoon-coal/tooltip.png
new file mode 100644
index 000000000..579d4c93d
Binary files /dev/null and b/data/skins/cartoon-coal/tooltip.png differ
diff --git a/data/skins/cartoon-coal/up_arrow.png b/data/skins/cartoon-coal/up_arrow.png
new file mode 100644
index 000000000..14a3fdcb9
Binary files /dev/null and b/data/skins/cartoon-coal/up_arrow.png differ
diff --git a/data/skins/cartoon-desert/achievement.png b/data/skins/cartoon-desert/achievement.png
new file mode 100644
index 000000000..712296a4e
Binary files /dev/null and b/data/skins/cartoon-desert/achievement.png differ
diff --git a/data/skins/cartoon-desert/background.jpg b/data/skins/cartoon-desert/background.jpg
new file mode 100644
index 000000000..97c30b671
Binary files /dev/null and b/data/skins/cartoon-desert/background.jpg differ
diff --git a/data/skins/cartoon-desert/bottom_bar.png b/data/skins/cartoon-desert/bottom_bar.png
new file mode 100644
index 000000000..c4c9f0554
Binary files /dev/null and b/data/skins/cartoon-desert/bottom_bar.png differ
diff --git a/data/skins/cartoon-desert/bubble.png b/data/skins/cartoon-desert/bubble.png
new file mode 100644
index 000000000..d94f880f1
Binary files /dev/null and b/data/skins/cartoon-desert/bubble.png differ
diff --git a/data/skins/cartoon-desert/button.png b/data/skins/cartoon-desert/button.png
new file mode 100644
index 000000000..068fb2887
Binary files /dev/null and b/data/skins/cartoon-desert/button.png differ
diff --git a/data/skins/cartoon-desert/button_focused.png b/data/skins/cartoon-desert/button_focused.png
new file mode 100644
index 000000000..e26ddf6b3
Binary files /dev/null and b/data/skins/cartoon-desert/button_focused.png differ
diff --git a/data/skins/cartoon-desert/checkbox.png b/data/skins/cartoon-desert/checkbox.png
new file mode 100644
index 000000000..615e6d7ab
Binary files /dev/null and b/data/skins/cartoon-desert/checkbox.png differ
diff --git a/data/skins/cartoon-desert/checkbox_checked.png b/data/skins/cartoon-desert/checkbox_checked.png
new file mode 100644
index 000000000..bfa4c25e7
Binary files /dev/null and b/data/skins/cartoon-desert/checkbox_checked.png differ
diff --git a/data/skins/cartoon-desert/checkbox_checked_focus.png b/data/skins/cartoon-desert/checkbox_checked_focus.png
new file mode 100644
index 000000000..fe487bde1
Binary files /dev/null and b/data/skins/cartoon-desert/checkbox_checked_focus.png differ
diff --git a/data/skins/cartoon-desert/checkbox_focus.png b/data/skins/cartoon-desert/checkbox_focus.png
new file mode 100644
index 000000000..8b1b86de8
Binary files /dev/null and b/data/skins/cartoon-desert/checkbox_focus.png differ
diff --git a/data/skins/cartoon-desert/down_arrow.png b/data/skins/cartoon-desert/down_arrow.png
new file mode 100644
index 000000000..a7491b437
Binary files /dev/null and b/data/skins/cartoon-desert/down_arrow.png differ
diff --git a/data/skins/cartoon-desert/friend.png b/data/skins/cartoon-desert/friend.png
new file mode 100644
index 000000000..55dbf1624
Binary files /dev/null and b/data/skins/cartoon-desert/friend.png differ
diff --git a/data/skins/cartoon-desert/gauge_fill.png b/data/skins/cartoon-desert/gauge_fill.png
new file mode 100644
index 000000000..cf6741928
Binary files /dev/null and b/data/skins/cartoon-desert/gauge_fill.png differ
diff --git a/data/skins/cartoon-desert/generic.png b/data/skins/cartoon-desert/generic.png
new file mode 100644
index 000000000..378f0b0da
Binary files /dev/null and b/data/skins/cartoon-desert/generic.png differ
diff --git a/data/skins/cartoon-desert/glass_iconhighlight_focus.png b/data/skins/cartoon-desert/glass_iconhighlight_focus.png
new file mode 100644
index 000000000..bbbfa8af7
Binary files /dev/null and b/data/skins/cartoon-desert/glass_iconhighlight_focus.png differ
diff --git a/data/skins/cartoon-desert/left_arrow.png b/data/skins/cartoon-desert/left_arrow.png
new file mode 100644
index 000000000..23b92a682
Binary files /dev/null and b/data/skins/cartoon-desert/left_arrow.png differ
diff --git a/data/skins/cartoon-desert/left_arrow_focus.png b/data/skins/cartoon-desert/left_arrow_focus.png
new file mode 100644
index 000000000..cb12ab0de
Binary files /dev/null and b/data/skins/cartoon-desert/left_arrow_focus.png differ
diff --git a/data/skins/cartoon-desert/licenses.txt b/data/skins/cartoon-desert/licenses.txt
new file mode 100644
index 000000000..d0cbfe1df
--- /dev/null
+++ b/data/skins/cartoon-desert/licenses.txt
@@ -0,0 +1,30 @@
+Format: https://www.debian.org/doc/packaging-manuals/copyright-format/1.0/
+Upstream-Name: SuperTuxKart
+Upstream-Contact:
+ Marianne Gagnon <auria.mg@gmail.com>
+ Jean-Manuel Clémençon <sam.un@protonmail.com>
+Source: https://supertuxkart.net
+
+Files:
+ glass_iconhighlight_focus.png
+ bubble.png
+Copyright: 2010 Dakal and/or Marianne Gagnon (Auria)
+License: CC-BY-SA 3.0
+Comment: From peach skin, first found in commit 5cddb8ffb61001407ce97ee5a8c63faa18a08c2c.  It is unclear which author made these particular files.
+
+Files:
+ src/Inter-UI-Black.ttf
+Copyright: Copyright 2018 The Inter UI project authors
+License: OFL 1.1 (SIL Open Font License, Version 1.1)
+Comment: Specifically using version 2.5 of the font, later versions have a different look
+
+Files:
+ src/NotoSans*
+Copyright: Copyright 2015-2016 Google Inc. All Rights Reserved.
+License: This Font Software is licensed under the SIL Open Font License, Version 1.1. This Font Software is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the SIL Open Font License for the specific language, permissions and limitations governing your use of this Font Software.
+Comment: Bold/Black versions of the language-specific fonts used in the other skins
+
+Files: *
+Copyright: Copyright 2018-2020 LCP and QwertyChouskie
+License: CC-BY-SA 4.0
+Comment: Original style, most icons, and some elements by LCP, skin finished by QwertyChouskie
diff --git a/data/skins/cartoon-desert/readme.txt b/data/skins/cartoon-desert/readme.txt
new file mode 100644
index 000000000..f39612d02
--- /dev/null
+++ b/data/skins/cartoon-desert/readme.txt
@@ -0,0 +1,10 @@
+# This color variation was made using the following commands:
+
+for i in *.png ; do convert "$i" -colorspace gray -fill "#00ff00" -tint 100 "$i" ; done
+for i in *focus.png ; do convert "$i" -colorspace gray -fill "#00dd00" -tint 100 "$i" ; done
+for i in *focused.png ; do convert "$i" -colorspace gray -fill "#00dd00" -tint 100 "$i" ; done
+convert bottom_bar.png -colorspace gray -fill "#006900" -tint 100 bottom_bar.png
+
+# table_header_down manually re-colored
+# gauge_fill and spinner_fill were manually colored to #77ff77
+# achievement and friend were manually re-created from the source SVG with the background color changed.
\ No newline at end of file
diff --git a/data/skins/cartoon-desert/right_arrow.png b/data/skins/cartoon-desert/right_arrow.png
new file mode 100644
index 000000000..bf72bbd5a
Binary files /dev/null and b/data/skins/cartoon-desert/right_arrow.png differ
diff --git a/data/skins/cartoon-desert/right_arrow_focus.png b/data/skins/cartoon-desert/right_arrow_focus.png
new file mode 100644
index 000000000..8e6190027
Binary files /dev/null and b/data/skins/cartoon-desert/right_arrow_focus.png differ
diff --git a/data/skins/cartoon-desert/scrollbar_button.png b/data/skins/cartoon-desert/scrollbar_button.png
new file mode 100644
index 000000000..06c779410
Binary files /dev/null and b/data/skins/cartoon-desert/scrollbar_button.png differ
diff --git a/data/skins/cartoon-desert/scrollbar_thumb.png b/data/skins/cartoon-desert/scrollbar_thumb.png
new file mode 100644
index 000000000..469eefcba
Binary files /dev/null and b/data/skins/cartoon-desert/scrollbar_thumb.png differ
diff --git a/data/skins/cartoon-desert/select.png b/data/skins/cartoon-desert/select.png
new file mode 100644
index 000000000..9d730ede0
Binary files /dev/null and b/data/skins/cartoon-desert/select.png differ
diff --git a/data/skins/cartoon-desert/spinner.png b/data/skins/cartoon-desert/spinner.png
new file mode 100644
index 000000000..64124c9b1
Binary files /dev/null and b/data/skins/cartoon-desert/spinner.png differ
diff --git a/data/skins/cartoon-desert/spinner_down.png b/data/skins/cartoon-desert/spinner_down.png
new file mode 100644
index 000000000..64124c9b1
Binary files /dev/null and b/data/skins/cartoon-desert/spinner_down.png differ
diff --git a/data/skins/cartoon-desert/spinner_fill.png b/data/skins/cartoon-desert/spinner_fill.png
new file mode 100644
index 000000000..dc7f4e02e
Binary files /dev/null and b/data/skins/cartoon-desert/spinner_fill.png differ
diff --git a/data/skins/cartoon-desert/spinner_focus.png b/data/skins/cartoon-desert/spinner_focus.png
new file mode 100644
index 000000000..d019c47a9
Binary files /dev/null and b/data/skins/cartoon-desert/spinner_focus.png differ
diff --git a/data/skins/cartoon-desert/stkskin.xml b/data/skins/cartoon-desert/stkskin.xml
new file mode 100644
index 000000000..33cf9f837
--- /dev/null
+++ b/data/skins/cartoon-desert/stkskin.xml
@@ -0,0 +1,376 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+Cartoon skin by LCP and QwertyChouskie, released under CC-BY-SA 4.0+
+
+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 some 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.
+
+When there is a common="y" with image tag, the image will be loaded only from data/skins/common in stk-code.
+
+Any information not specified in this theme will be inherited from the specified base theme,
+if any.  To specify a base theme, add base_theme="themename" to the <skin> tag.
+
+To use an icon theme, place the replacement icons (PNG or SVG) into [skin folder]/data/gui/icons
+STK will prefer these icons first, if not found it will fallback to icons from the base theme(s).
+-->
+
+<skin name="Cartoon - Desert" author="LCP and QwertyChouskie (edited by CrystalDaEevee)" base_theme="cartoon">
+
+<!--
+Here you can configure advanced theming rules for this skin
+
+For TTF specify the list like the following, for normal and digit ttf it will be added at the beginning of the
+font list in STK, so those TTF will be used first, and any missing characters will be rendered from the base
+theme font list. For color emoji ttf it will replace the base theme color emoji directly. You are not required
+to specify all types of ttf.
+
+<advanced normal_ttf="xxx.ttf yyy.ttf"
+          digit_ttf="zzz.ttf"
+          color_emoji_ttf="www.ttf"/>
+-->
+
+<!--  Stateless -->
+<element type="background" image="background.jpg" />
+
+<element type="bottom-bar" image="bottom_bar.png" />
+
+<element type="achievement-message" image="achievement.png"
+      left_border="130" 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="friend.png"
+      left_border="130" right_border="13" top_border="13" bottom_border="13"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
+
+<!-- Provided by base theme
+<element type="error-message" image="error.png"
+      left_border="130" 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="generic.png"
+      left_border="130" 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="button.png"
+      left_border="40" right_border="40" top_border="12" bottom_border="12"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0" vborder_out_portion="0"
+      h_inner_padding="0.15" v_inner_padding="0.35"/>
+
+<element type="button" state="focused" image="button_focused.png"
+      left_border="40" right_border="40" top_border="12" bottom_border="12"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0" vborder_out_portion="0"
+      h_inner_padding="0.15" v_inner_padding="0.35"/>
+
+<!-- Provided by base theme
+<element type="button" state="deactivated" image="button_inactive.png"
+      left_border="40" right_border="40" top_border="12" bottom_border="12"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0" vborder_out_portion="0"
+      h_inner_padding="0.15" v_inner_padding="0.35"/>-->
+
+<!-- TODO : buttons could support 'pressed' state -->
+
+<!-- Provided by base theme
+<element type="textbubble" state="neutral" image="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="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="gauge_fill.png"
+      left_border="7" right_border="7" top_border="7" bottom_border="7"
+      preserve_h_aspect_ratios="false" />
+
+<!-- Provided by base theme
+<element type="progress" state="neutral" image="section.png"
+      left_border="7" right_border="7" top_border="7" bottom_border="7"
+      preserve_h_aspect_ratios="false" />-->
+      
+      
+<element type="tab" state="neutral" image="tab.png"
+      left_border="44" right_border="44" top_border="28" bottom_border="28"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-12" h_margin="0" v_margin="0" />
+      
+<element type="tab" state="focused" image="tab_focus.png"
+      left_border="44" right_border="44" top_border="28" bottom_border="28"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-12" h_margin="0" v_margin="0" />
+
+<element type="tab" state="down" image="tab.png"
+      left_border="44" right_border="44" top_border="28" bottom_border="28"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-12" h_margin="0" v_margin="0" />
+
+
+<element type="verticalTab" state="neutral" image="tab_vert.png"
+      left_border="45" right_border="45" top_border="28" bottom_border="28"
+      hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-8" h_margin="0" v_margin="4" />
+      
+<element type="verticalTab" state="focused" image="tab_vert_focus.png"
+      left_border="45" right_border="45" top_border="28" bottom_border="28"
+      hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-8" h_margin="0" v_margin="4" />
+
+<element type="verticalTab" state="down" image="tab_vert.png"
+      left_border="45" right_border="45" top_border="28" bottom_border="28"
+      hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-8" h_margin="0" v_margin="4" />
+
+<!-- Stateless -->
+<!-- Provided by base theme
+<element type="squareFocusHaloBW" common="y" image="glass_square_focused_bw.png"
+      left_border="6" right_border ="6" top_border="6" bottom_border="6"
+      hborder_out_portion="1.0" />
+<element type="squareFocusHalo1" common="y" image="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" common="y" image="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" common="y" image="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" common="y" image="glass_square_focused_yellow.png"
+      left_border="6" right_border ="6" top_border="6" bottom_border="6"
+      hborder_out_portion="1.0" />
+<element type="squareFocusHalo5" common="y" image="glass_square_focused_pink.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="bubble.png"  />
+<element type="focusHalo" image="glass_iconhighlight_focus.png"  />
+
+<element type="spinner" state="neutral" image="spinner.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="spinner_focus.png"
+    left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+
+<!-- Provided by base theme
+<element type="spinner" state="deactivated" image="spinner_deactivated.png"
+    left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />-->
+
+<!-- color spinner in kart color selection -->
+<!-- Provided by base theme
+<element type="spinner_rainbow" state="neutral" image="spinner_rainbow.png"
+      left_border="104" right_border="104" top_border="0" bottom_border="36"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0.0"/>
+
+<element type="spinner_rainbow" state="focused" image="spinner_rainbow_focus.png"
+      left_border="104" right_border="104" top_border="0" bottom_border="36"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0.0"/>
+
+<element type="spinner_rainbow" state="deactivated" image="spinner_rainbow_deactivated.png"
+      left_border="104" right_border="104" top_border="0" bottom_border="36"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0.0"/>-->
+
+<!-- player name spinner color in multiplayer-->
+<!-- Provided by base theme
+<element type="spinner1" state="neutral" image="spinner_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="spinner_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="spinner_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="spinner_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="spinner5" state="neutral" image="spinner_pink.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="spinner_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="checkbox.png"/>
+<element type="checkbox" state="neutral+checked" image="checkbox_checked.png"/>
+<element type="checkbox" state="focused+unchecked" image="checkbox_focus.png"/>
+<element type="checkbox" state="focused+checked" image="checkbox_checked_focus.png"/>
+<!-- Provided by base theme
+<element type="checkbox" state="deactivated+unchecked" image="checkbox_deactivated.png"/>
+<element type="checkbox" state="deactivated+checked" image="checkbox_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="spinner_fill.png" />
+<!-- used for the color slider. -->
+<!-- Provided by base theme
+<element type="gaugefillrainbow" common="y" image="gauge_fill_rainbow.png"/>-->
+
+<!-- Lists are always in neutral state for now -->
+<!-- Provided by base theme
+<element type="list" image="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="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 only used for the background and thumb. -->
+<!-- Provided by base theme
+<element type="scrollbar_background"          image="scrollbar_bg.png"
+    left_border="7" right_border="7" top_border="7" bottom_border="7"
+    hborder_out_portion="0.0" vborder_out_portion="0.0" />-->
+<element type="scrollbar_thumb"               image="scrollbar_thumb.png"
+    left_border="7" right_border="7" top_border="7" bottom_border="7"
+    hborder_out_portion="0.0" vborder_out_portion="0.0" />
+<element type="scrollbar_button"              image="scrollbar_button.png" />
+<element type="scrollbar_button" state="down" image="scrollbar_button.png" />
+
+<element type="left_arrow"  state="neutral" image="left_arrow.png" />
+<element type="right_arrow" state="neutral" image="right_arrow.png" />
+<element type="left_arrow"  state="focus"   image="left_arrow_focus.png" />
+<element type="right_arrow" state="focus"   image="right_arrow_focus.png" />
+
+<!-- Provided by base theme
+<element type="list_header"  state="neutral" image="table_header.png" />-->
+<element type="list_sort_up" state="neutral" image="up_arrow.png" />
+<element type="list_sort_down" state="neutral" image="down_arrow.png" />
+<element type="list_header"  state="down"    image="table_header_down.png" />
+
+<!-- Stateless -->
+<!-- Provided by base theme
+<element type="section" image="section.png"
+      left_border="15" right_border="15" top_border="15" bottom_border="15"
+      hborder_out_portion="0.0" vborder_out_portion="0.0" />
+
+<element type="section" state="selected" image="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 -->
+<!-- Provided by base theme
+<element type="rounded_section" image="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 -->
+<!-- Provided by base theme
+<element type="window" image="dialog.png"
+      left_border="32" right_border="32" top_border="32" bottom_border="32"
+      hborder_out_portion="1.0" vborder_out_portion="1.0" />-->
+
+<!-- Stateless -->
+<!-- Provided by base theme
+<element type="tooltip" image="tooltip.png"
+    left_border="10" right_border="10" top_border="10" bottom_border="10"
+    hborder_out_portion="1.5" vborder_out_portion="1.0" />-->
+    
+<!--                   Colors                  -->
+<color type="text" state="neutral" r="0" g="0" b="0" />
+<color type="brighttext" state="neutral" r="255" g="255" b="0" />
+
+<!-- For highlighted items, e.g. in list -->
+<color type="text" state="focused" r="255" g="255" b="255" />
+
+<!-- Color used in the credits -->
+<color type="credits_text" state="neutral" r="65" g="65" b="0" />
+
+<!-- Color used for emphasized items in e.g. lists -->
+<color type="emphasis_text" state="neutral" r="0" g="0" b="180" />
+<color type="emphasis_text" state="focused" r="0" g="0" b="160" />
+
+<!-- Color used for red/blue items in list (e.g. player team color in networking) -->
+<color type="list_blue" state="neutral" r="0" g="0" b="255" />
+<color type="list_blue" state="focused" r="0" g="0" b="255" />
+<color type="list_red" state="neutral" r="255" g="0" b="0" />
+<color type="list_red" state="focused" r="255" g="0" b="0" />
+
+<!-- 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" />
+
+<!-- Color used for tips in the loading screen -->
+<color type="tips_background" state="neutral" a="120" r="0" g="0" b="0" />
+
+<!-- Text field color -->
+<color type="text_field" state="background" a="255" r="200" g="200" b="200" />
+<color type="text_field" state="background_focused" a="255" r="236" g="236" b="181" />
+<color type="text_field" state="background_deactivated" a="255" r="200" g="200" b="200" />
+<color type="text_field" state="background_marked" a="128" r="90" g="90" b="25" />
+<color type="text_field" state="neutral" a="255" r="138" g="138" b="138" />
+<color type="text_field" state="focused" a="255" r="243" g="243" b="80" />
+<color type="text_field" state="deactivated" a="255" r="138" g="138" b="138" />
+
+<!-- Rating star image -->
+<!-- Provided by base theme
+<element type="rating" state="neutral" image="rating_star.png" />-->
+
+<!-- Font color -->
+<color type="font" state="top" a="255" r="107" g="80" b="0" />
+<color type="font" state="bottom" a="255" r="255" g="255" b="15" />
+<color type="font" state="normal" a="255" r="210" g="210" b="50" />
+
+</skin>
diff --git a/data/skins/cartoon-desert/tab.png b/data/skins/cartoon-desert/tab.png
new file mode 100644
index 000000000..e4304e12d
Binary files /dev/null and b/data/skins/cartoon-desert/tab.png differ
diff --git a/data/skins/cartoon-desert/tab_focus.png b/data/skins/cartoon-desert/tab_focus.png
new file mode 100644
index 000000000..625f0d941
Binary files /dev/null and b/data/skins/cartoon-desert/tab_focus.png differ
diff --git a/data/skins/cartoon-desert/tab_vert.png b/data/skins/cartoon-desert/tab_vert.png
new file mode 100644
index 000000000..b36bb60e1
Binary files /dev/null and b/data/skins/cartoon-desert/tab_vert.png differ
diff --git a/data/skins/cartoon-desert/tab_vert_focus.png b/data/skins/cartoon-desert/tab_vert_focus.png
new file mode 100644
index 000000000..fd49bd683
Binary files /dev/null and b/data/skins/cartoon-desert/tab_vert_focus.png differ
diff --git a/data/skins/cartoon-desert/table_header_down.png b/data/skins/cartoon-desert/table_header_down.png
new file mode 100644
index 000000000..2a4333b86
Binary files /dev/null and b/data/skins/cartoon-desert/table_header_down.png differ
diff --git a/data/skins/cartoon-desert/up_arrow.png b/data/skins/cartoon-desert/up_arrow.png
new file mode 100644
index 000000000..cd1d63302
Binary files /dev/null and b/data/skins/cartoon-desert/up_arrow.png differ
diff --git a/data/skins/cartoon-forest/achievement.png b/data/skins/cartoon-forest/achievement.png
new file mode 100644
index 000000000..3f4d3d165
Binary files /dev/null and b/data/skins/cartoon-forest/achievement.png differ
diff --git a/data/skins/cartoon-forest/background.jpg b/data/skins/cartoon-forest/background.jpg
new file mode 100644
index 000000000..3972567e5
Binary files /dev/null and b/data/skins/cartoon-forest/background.jpg differ
diff --git a/data/skins/cartoon-forest/bottom_bar.png b/data/skins/cartoon-forest/bottom_bar.png
new file mode 100644
index 000000000..b97e2b2e3
Binary files /dev/null and b/data/skins/cartoon-forest/bottom_bar.png differ
diff --git a/data/skins/cartoon-forest/bubble.png b/data/skins/cartoon-forest/bubble.png
new file mode 100644
index 000000000..9a48b1bba
Binary files /dev/null and b/data/skins/cartoon-forest/bubble.png differ
diff --git a/data/skins/cartoon-forest/button.png b/data/skins/cartoon-forest/button.png
new file mode 100644
index 000000000..5e66865d6
Binary files /dev/null and b/data/skins/cartoon-forest/button.png differ
diff --git a/data/skins/cartoon-forest/button_focused.png b/data/skins/cartoon-forest/button_focused.png
new file mode 100644
index 000000000..99b7230e1
Binary files /dev/null and b/data/skins/cartoon-forest/button_focused.png differ
diff --git a/data/skins/cartoon-forest/checkbox.png b/data/skins/cartoon-forest/checkbox.png
new file mode 100644
index 000000000..9400181e9
Binary files /dev/null and b/data/skins/cartoon-forest/checkbox.png differ
diff --git a/data/skins/cartoon-forest/checkbox_checked.png b/data/skins/cartoon-forest/checkbox_checked.png
new file mode 100644
index 000000000..cad6cc80b
Binary files /dev/null and b/data/skins/cartoon-forest/checkbox_checked.png differ
diff --git a/data/skins/cartoon-forest/checkbox_checked_focus.png b/data/skins/cartoon-forest/checkbox_checked_focus.png
new file mode 100644
index 000000000..9b6d80716
Binary files /dev/null and b/data/skins/cartoon-forest/checkbox_checked_focus.png differ
diff --git a/data/skins/cartoon-forest/checkbox_focus.png b/data/skins/cartoon-forest/checkbox_focus.png
new file mode 100644
index 000000000..86b9bc8ff
Binary files /dev/null and b/data/skins/cartoon-forest/checkbox_focus.png differ
diff --git a/data/skins/cartoon-forest/down_arrow.png b/data/skins/cartoon-forest/down_arrow.png
new file mode 100644
index 000000000..10630de90
Binary files /dev/null and b/data/skins/cartoon-forest/down_arrow.png differ
diff --git a/data/skins/cartoon-forest/friend.png b/data/skins/cartoon-forest/friend.png
new file mode 100644
index 000000000..3a82fdf37
Binary files /dev/null and b/data/skins/cartoon-forest/friend.png differ
diff --git a/data/skins/cartoon-forest/gauge_fill.png b/data/skins/cartoon-forest/gauge_fill.png
new file mode 100644
index 000000000..f5b45c523
Binary files /dev/null and b/data/skins/cartoon-forest/gauge_fill.png differ
diff --git a/data/skins/cartoon-forest/generic.png b/data/skins/cartoon-forest/generic.png
new file mode 100644
index 000000000..9c0e635b1
Binary files /dev/null and b/data/skins/cartoon-forest/generic.png differ
diff --git a/data/skins/cartoon-forest/glass_iconhighlight_focus.png b/data/skins/cartoon-forest/glass_iconhighlight_focus.png
new file mode 100644
index 000000000..bbb8a9c31
Binary files /dev/null and b/data/skins/cartoon-forest/glass_iconhighlight_focus.png differ
diff --git a/data/skins/cartoon-forest/left_arrow.png b/data/skins/cartoon-forest/left_arrow.png
new file mode 100644
index 000000000..be0be9bd9
Binary files /dev/null and b/data/skins/cartoon-forest/left_arrow.png differ
diff --git a/data/skins/cartoon-forest/left_arrow_focus.png b/data/skins/cartoon-forest/left_arrow_focus.png
new file mode 100644
index 000000000..455bb99e8
Binary files /dev/null and b/data/skins/cartoon-forest/left_arrow_focus.png differ
diff --git a/data/skins/cartoon-forest/licenses.txt b/data/skins/cartoon-forest/licenses.txt
new file mode 100644
index 000000000..d0cbfe1df
--- /dev/null
+++ b/data/skins/cartoon-forest/licenses.txt
@@ -0,0 +1,30 @@
+Format: https://www.debian.org/doc/packaging-manuals/copyright-format/1.0/
+Upstream-Name: SuperTuxKart
+Upstream-Contact:
+ Marianne Gagnon <auria.mg@gmail.com>
+ Jean-Manuel Clémençon <sam.un@protonmail.com>
+Source: https://supertuxkart.net
+
+Files:
+ glass_iconhighlight_focus.png
+ bubble.png
+Copyright: 2010 Dakal and/or Marianne Gagnon (Auria)
+License: CC-BY-SA 3.0
+Comment: From peach skin, first found in commit 5cddb8ffb61001407ce97ee5a8c63faa18a08c2c.  It is unclear which author made these particular files.
+
+Files:
+ src/Inter-UI-Black.ttf
+Copyright: Copyright 2018 The Inter UI project authors
+License: OFL 1.1 (SIL Open Font License, Version 1.1)
+Comment: Specifically using version 2.5 of the font, later versions have a different look
+
+Files:
+ src/NotoSans*
+Copyright: Copyright 2015-2016 Google Inc. All Rights Reserved.
+License: This Font Software is licensed under the SIL Open Font License, Version 1.1. This Font Software is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the SIL Open Font License for the specific language, permissions and limitations governing your use of this Font Software.
+Comment: Bold/Black versions of the language-specific fonts used in the other skins
+
+Files: *
+Copyright: Copyright 2018-2020 LCP and QwertyChouskie
+License: CC-BY-SA 4.0
+Comment: Original style, most icons, and some elements by LCP, skin finished by QwertyChouskie
diff --git a/data/skins/cartoon-forest/readme.txt b/data/skins/cartoon-forest/readme.txt
new file mode 100644
index 000000000..f39612d02
--- /dev/null
+++ b/data/skins/cartoon-forest/readme.txt
@@ -0,0 +1,10 @@
+# This color variation was made using the following commands:
+
+for i in *.png ; do convert "$i" -colorspace gray -fill "#00ff00" -tint 100 "$i" ; done
+for i in *focus.png ; do convert "$i" -colorspace gray -fill "#00dd00" -tint 100 "$i" ; done
+for i in *focused.png ; do convert "$i" -colorspace gray -fill "#00dd00" -tint 100 "$i" ; done
+convert bottom_bar.png -colorspace gray -fill "#006900" -tint 100 bottom_bar.png
+
+# table_header_down manually re-colored
+# gauge_fill and spinner_fill were manually colored to #77ff77
+# achievement and friend were manually re-created from the source SVG with the background color changed.
\ No newline at end of file
diff --git a/data/skins/cartoon-forest/right_arrow.png b/data/skins/cartoon-forest/right_arrow.png
new file mode 100644
index 000000000..4c4baa834
Binary files /dev/null and b/data/skins/cartoon-forest/right_arrow.png differ
diff --git a/data/skins/cartoon-forest/right_arrow_focus.png b/data/skins/cartoon-forest/right_arrow_focus.png
new file mode 100644
index 000000000..bfbf9646c
Binary files /dev/null and b/data/skins/cartoon-forest/right_arrow_focus.png differ
diff --git a/data/skins/cartoon-forest/scrollbar_button.png b/data/skins/cartoon-forest/scrollbar_button.png
new file mode 100644
index 000000000..f3891e604
Binary files /dev/null and b/data/skins/cartoon-forest/scrollbar_button.png differ
diff --git a/data/skins/cartoon-forest/scrollbar_thumb.png b/data/skins/cartoon-forest/scrollbar_thumb.png
new file mode 100644
index 000000000..6230264ad
Binary files /dev/null and b/data/skins/cartoon-forest/scrollbar_thumb.png differ
diff --git a/data/skins/cartoon-forest/select.png b/data/skins/cartoon-forest/select.png
new file mode 100644
index 000000000..c018de590
Binary files /dev/null and b/data/skins/cartoon-forest/select.png differ
diff --git a/data/skins/cartoon-forest/spinner.png b/data/skins/cartoon-forest/spinner.png
new file mode 100644
index 000000000..622249b02
Binary files /dev/null and b/data/skins/cartoon-forest/spinner.png differ
diff --git a/data/skins/cartoon-forest/spinner_down.png b/data/skins/cartoon-forest/spinner_down.png
new file mode 100644
index 000000000..622249b02
Binary files /dev/null and b/data/skins/cartoon-forest/spinner_down.png differ
diff --git a/data/skins/cartoon-forest/spinner_fill.png b/data/skins/cartoon-forest/spinner_fill.png
new file mode 100644
index 000000000..dc508489c
Binary files /dev/null and b/data/skins/cartoon-forest/spinner_fill.png differ
diff --git a/data/skins/cartoon-forest/spinner_focus.png b/data/skins/cartoon-forest/spinner_focus.png
new file mode 100644
index 000000000..2bd8a93a9
Binary files /dev/null and b/data/skins/cartoon-forest/spinner_focus.png differ
diff --git a/data/skins/cartoon-forest/stkskin.xml b/data/skins/cartoon-forest/stkskin.xml
new file mode 100644
index 000000000..401bf3137
--- /dev/null
+++ b/data/skins/cartoon-forest/stkskin.xml
@@ -0,0 +1,376 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+Cartoon skin by LCP and QwertyChouskie, released under CC-BY-SA 4.0+
+
+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 some 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.
+
+When there is a common="y" with image tag, the image will be loaded only from data/skins/common in stk-code.
+
+Any information not specified in this theme will be inherited from the specified base theme,
+if any.  To specify a base theme, add base_theme="themename" to the <skin> tag.
+
+To use an icon theme, place the replacement icons (PNG or SVG) into [skin folder]/data/gui/icons
+STK will prefer these icons first, if not found it will fallback to icons from the base theme(s).
+-->
+
+<skin name="Cartoon - Forest" author="LCP and QwertyChouskie" base_theme="cartoon">
+
+<!--
+Here you can configure advanced theming rules for this skin
+
+For TTF specify the list like the following, for normal and digit ttf it will be added at the beginning of the
+font list in STK, so those TTF will be used first, and any missing characters will be rendered from the base
+theme font list. For color emoji ttf it will replace the base theme color emoji directly. You are not required
+to specify all types of ttf.
+
+<advanced normal_ttf="xxx.ttf yyy.ttf"
+          digit_ttf="zzz.ttf"
+          color_emoji_ttf="www.ttf"/>
+-->
+
+<!--  Stateless -->
+<element type="background" image="background.jpg" />
+
+<element type="bottom-bar" image="bottom_bar.png" />
+
+<element type="achievement-message" image="achievement.png"
+      left_border="130" 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="friend.png"
+      left_border="130" right_border="13" top_border="13" bottom_border="13"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
+
+<!-- Provided by base theme
+<element type="error-message" image="error.png"
+      left_border="130" 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="generic.png"
+      left_border="130" 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="button.png"
+      left_border="40" right_border="40" top_border="12" bottom_border="12"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0" vborder_out_portion="0"
+      h_inner_padding="0.15" v_inner_padding="0.35"/>
+
+<element type="button" state="focused" image="button_focused.png"
+      left_border="40" right_border="40" top_border="12" bottom_border="12"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0" vborder_out_portion="0"
+      h_inner_padding="0.15" v_inner_padding="0.35"/>
+
+<!-- Provided by base theme
+<element type="button" state="deactivated" image="button_inactive.png"
+      left_border="40" right_border="40" top_border="12" bottom_border="12"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0" vborder_out_portion="0"
+      h_inner_padding="0.15" v_inner_padding="0.35"/>-->
+
+<!-- TODO : buttons could support 'pressed' state -->
+
+<!-- Provided by base theme
+<element type="textbubble" state="neutral" image="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="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="gauge_fill.png"
+      left_border="7" right_border="7" top_border="7" bottom_border="7"
+      preserve_h_aspect_ratios="false" />
+
+<!-- Provided by base theme
+<element type="progress" state="neutral" image="section.png"
+      left_border="7" right_border="7" top_border="7" bottom_border="7"
+      preserve_h_aspect_ratios="false" />-->
+      
+      
+<element type="tab" state="neutral" image="tab.png"
+      left_border="44" right_border="44" top_border="28" bottom_border="28"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-12" h_margin="0" v_margin="0" />
+      
+<element type="tab" state="focused" image="tab_focus.png"
+      left_border="44" right_border="44" top_border="28" bottom_border="28"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-12" h_margin="0" v_margin="0" />
+
+<element type="tab" state="down" image="tab.png"
+      left_border="44" right_border="44" top_border="28" bottom_border="28"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-12" h_margin="0" v_margin="0" />
+
+
+<element type="verticalTab" state="neutral" image="tab_vert.png"
+      left_border="45" right_border="45" top_border="28" bottom_border="28"
+      hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-8" h_margin="0" v_margin="4" />
+      
+<element type="verticalTab" state="focused" image="tab_vert_focus.png"
+      left_border="45" right_border="45" top_border="28" bottom_border="28"
+      hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-8" h_margin="0" v_margin="4" />
+
+<element type="verticalTab" state="down" image="tab_vert.png"
+      left_border="45" right_border="45" top_border="28" bottom_border="28"
+      hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-8" h_margin="0" v_margin="4" />
+
+<!-- Stateless -->
+<!-- Provided by base theme
+<element type="squareFocusHaloBW" common="y" image="glass_square_focused_bw.png"
+      left_border="6" right_border ="6" top_border="6" bottom_border="6"
+      hborder_out_portion="1.0" />
+<element type="squareFocusHalo1" common="y" image="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" common="y" image="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" common="y" image="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" common="y" image="glass_square_focused_yellow.png"
+      left_border="6" right_border ="6" top_border="6" bottom_border="6"
+      hborder_out_portion="1.0" />
+<element type="squareFocusHalo5" common="y" image="glass_square_focused_pink.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="bubble.png"  />
+<element type="focusHalo" image="glass_iconhighlight_focus.png"  />
+
+<element type="spinner" state="neutral" image="spinner.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="spinner_focus.png"
+    left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+
+<!-- Provided by base theme
+<element type="spinner" state="deactivated" image="spinner_deactivated.png"
+    left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />-->
+
+<!-- color spinner in kart color selection -->
+<!-- Provided by base theme
+<element type="spinner_rainbow" state="neutral" image="spinner_rainbow.png"
+      left_border="104" right_border="104" top_border="0" bottom_border="36"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0.0"/>
+
+<element type="spinner_rainbow" state="focused" image="spinner_rainbow_focus.png"
+      left_border="104" right_border="104" top_border="0" bottom_border="36"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0.0"/>
+
+<element type="spinner_rainbow" state="deactivated" image="spinner_rainbow_deactivated.png"
+      left_border="104" right_border="104" top_border="0" bottom_border="36"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0.0"/>-->
+
+<!-- player name spinner color in multiplayer-->
+<!-- Provided by base theme
+<element type="spinner1" state="neutral" image="spinner_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="spinner_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="spinner_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="spinner_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="spinner5" state="neutral" image="spinner_pink.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="spinner_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="checkbox.png"/>
+<element type="checkbox" state="neutral+checked" image="checkbox_checked.png"/>
+<element type="checkbox" state="focused+unchecked" image="checkbox_focus.png"/>
+<element type="checkbox" state="focused+checked" image="checkbox_checked_focus.png"/>
+<!-- Provided by base theme
+<element type="checkbox" state="deactivated+unchecked" image="checkbox_deactivated.png"/>
+<element type="checkbox" state="deactivated+checked" image="checkbox_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="spinner_fill.png" />
+<!-- used for the color slider. -->
+<!-- Provided by base theme
+<element type="gaugefillrainbow" common="y" image="gauge_fill_rainbow.png"/>-->
+
+<!-- Lists are always in neutral state for now -->
+<!-- Provided by base theme
+<element type="list" image="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="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 only used for the background and thumb. -->
+<!-- Provided by base theme
+<element type="scrollbar_background"          image="scrollbar_bg.png"
+    left_border="7" right_border="7" top_border="7" bottom_border="7"
+    hborder_out_portion="0.0" vborder_out_portion="0.0" />-->
+<element type="scrollbar_thumb"               image="scrollbar_thumb.png"
+    left_border="7" right_border="7" top_border="7" bottom_border="7"
+    hborder_out_portion="0.0" vborder_out_portion="0.0" />
+<element type="scrollbar_button"              image="scrollbar_button.png" />
+<element type="scrollbar_button" state="down" image="scrollbar_button.png" />
+
+<element type="left_arrow"  state="neutral" image="left_arrow.png" />
+<element type="right_arrow" state="neutral" image="right_arrow.png" />
+<element type="left_arrow"  state="focus"   image="left_arrow_focus.png" />
+<element type="right_arrow" state="focus"   image="right_arrow_focus.png" />
+
+<!-- Provided by base theme
+<element type="list_header"  state="neutral" image="table_header.png" />-->
+<element type="list_sort_up" state="neutral" image="up_arrow.png" />
+<element type="list_sort_down" state="neutral" image="down_arrow.png" />
+<element type="list_header"  state="down"    image="table_header_down.png" />
+
+<!-- Stateless -->
+<!-- Provided by base theme
+<element type="section" image="section.png"
+      left_border="15" right_border="15" top_border="15" bottom_border="15"
+      hborder_out_portion="0.0" vborder_out_portion="0.0" />
+
+<element type="section" state="selected" image="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 -->
+<!-- Provided by base theme
+<element type="rounded_section" image="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 -->
+<!-- Provided by base theme
+<element type="window" image="dialog.png"
+      left_border="32" right_border="32" top_border="32" bottom_border="32"
+      hborder_out_portion="1.0" vborder_out_portion="1.0" />-->
+
+<!-- Stateless -->
+<!-- Provided by base theme
+<element type="tooltip" image="tooltip.png"
+    left_border="10" right_border="10" top_border="10" bottom_border="10"
+    hborder_out_portion="1.5" vborder_out_portion="1.0" />-->
+    
+<!--                   Colors                  -->
+<color type="text" state="neutral" r="0" g="0" b="0" />
+<color type="brighttext" state="neutral" r="0" g="160" b="70" />
+
+<!-- For highlighted items, e.g. in list -->
+<color type="text" state="focused" r="255" g="255" b="255" />
+
+<!-- Color used in the credits -->
+<color type="credits_text" state="neutral" r="0" g="55" b="0" />
+
+<!-- Color used for emphasized items in e.g. lists -->
+<color type="emphasis_text" state="neutral" r="0" g="0" b="180" />
+<color type="emphasis_text" state="focused" r="0" g="0" b="160" />
+
+<!-- Color used for red/blue items in list (e.g. player team color in networking) -->
+<color type="list_blue" state="neutral" r="0" g="0" b="255" />
+<color type="list_blue" state="focused" r="0" g="0" b="255" />
+<color type="list_red" state="neutral" r="255" g="0" b="0" />
+<color type="list_red" state="focused" r="255" g="0" b="0" />
+
+<!-- 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" />
+
+<!-- Color used for tips in the loading screen -->
+<color type="tips_background" state="neutral" a="120" r="0" g="0" b="0" />
+
+<!-- Text field color -->
+<color type="text_field" state="background" a="255" r="200" g="200" b="200" />
+<color type="text_field" state="background_focused" a="255" r="223" g="250" b="245" />
+<color type="text_field" state="background_deactivated" a="255" r="200" g="200" b="200" />
+<color type="text_field" state="background_marked" a="128" r="30" g="80" b="40" />
+<color type="text_field" state="neutral" a="255" r="138" g="138" b="138" />
+<color type="text_field" state="focused" a="255" r="80" g="240" b="80" />
+<color type="text_field" state="deactivated" a="255" r="138" g="138" b="138" />
+
+<!-- Rating star image -->
+<!-- Provided by base theme
+<element type="rating" state="neutral" image="rating_star.png" />-->
+
+<!-- Font color -->
+<color type="font" state="top" a="255" r="80" g="190" b="0" />
+<color type="font" state="bottom" a="255" r="60" g="230" b="150" />
+<color type="font" state="normal" a="255" r="100" g="160" b="130" />
+
+</skin>
diff --git a/data/skins/cartoon-forest/tab.png b/data/skins/cartoon-forest/tab.png
new file mode 100644
index 000000000..afafda473
Binary files /dev/null and b/data/skins/cartoon-forest/tab.png differ
diff --git a/data/skins/cartoon-forest/tab_focus.png b/data/skins/cartoon-forest/tab_focus.png
new file mode 100644
index 000000000..728e750a6
Binary files /dev/null and b/data/skins/cartoon-forest/tab_focus.png differ
diff --git a/data/skins/cartoon-forest/tab_vert.png b/data/skins/cartoon-forest/tab_vert.png
new file mode 100644
index 000000000..1d6862982
Binary files /dev/null and b/data/skins/cartoon-forest/tab_vert.png differ
diff --git a/data/skins/cartoon-forest/tab_vert_focus.png b/data/skins/cartoon-forest/tab_vert_focus.png
new file mode 100644
index 000000000..2c2ba5615
Binary files /dev/null and b/data/skins/cartoon-forest/tab_vert_focus.png differ
diff --git a/data/skins/cartoon-forest/table_header_down.png b/data/skins/cartoon-forest/table_header_down.png
new file mode 100644
index 000000000..ccd6657cc
Binary files /dev/null and b/data/skins/cartoon-forest/table_header_down.png differ
diff --git a/data/skins/cartoon-forest/up_arrow.png b/data/skins/cartoon-forest/up_arrow.png
new file mode 100644
index 000000000..4a0f8f578
Binary files /dev/null and b/data/skins/cartoon-forest/up_arrow.png differ
diff --git a/data/skins/cartoon-ocean/achievement.png b/data/skins/cartoon-ocean/achievement.png
new file mode 100644
index 000000000..9a76be1df
Binary files /dev/null and b/data/skins/cartoon-ocean/achievement.png differ
diff --git a/data/skins/cartoon-ocean/background.jpg b/data/skins/cartoon-ocean/background.jpg
new file mode 100644
index 000000000..b3cf5bf55
Binary files /dev/null and b/data/skins/cartoon-ocean/background.jpg differ
diff --git a/data/skins/cartoon-ocean/bottom_bar.png b/data/skins/cartoon-ocean/bottom_bar.png
new file mode 100644
index 000000000..2145f3e3b
Binary files /dev/null and b/data/skins/cartoon-ocean/bottom_bar.png differ
diff --git a/data/skins/cartoon-ocean/bubble.png b/data/skins/cartoon-ocean/bubble.png
new file mode 100644
index 000000000..128d9f221
Binary files /dev/null and b/data/skins/cartoon-ocean/bubble.png differ
diff --git a/data/skins/cartoon-ocean/button.png b/data/skins/cartoon-ocean/button.png
new file mode 100644
index 000000000..8fff3b662
Binary files /dev/null and b/data/skins/cartoon-ocean/button.png differ
diff --git a/data/skins/cartoon-ocean/button_focused.png b/data/skins/cartoon-ocean/button_focused.png
new file mode 100644
index 000000000..a707bef58
Binary files /dev/null and b/data/skins/cartoon-ocean/button_focused.png differ
diff --git a/data/skins/cartoon-ocean/checkbox.png b/data/skins/cartoon-ocean/checkbox.png
new file mode 100644
index 000000000..be5b31c90
Binary files /dev/null and b/data/skins/cartoon-ocean/checkbox.png differ
diff --git a/data/skins/cartoon-ocean/checkbox_checked.png b/data/skins/cartoon-ocean/checkbox_checked.png
new file mode 100644
index 000000000..6339e9716
Binary files /dev/null and b/data/skins/cartoon-ocean/checkbox_checked.png differ
diff --git a/data/skins/cartoon-ocean/checkbox_checked_focus.png b/data/skins/cartoon-ocean/checkbox_checked_focus.png
new file mode 100644
index 000000000..6ca63c44b
Binary files /dev/null and b/data/skins/cartoon-ocean/checkbox_checked_focus.png differ
diff --git a/data/skins/cartoon-ocean/checkbox_focus.png b/data/skins/cartoon-ocean/checkbox_focus.png
new file mode 100644
index 000000000..492dec6e9
Binary files /dev/null and b/data/skins/cartoon-ocean/checkbox_focus.png differ
diff --git a/data/skins/cartoon-ocean/down_arrow.png b/data/skins/cartoon-ocean/down_arrow.png
new file mode 100644
index 000000000..62d13159f
Binary files /dev/null and b/data/skins/cartoon-ocean/down_arrow.png differ
diff --git a/data/skins/cartoon-ocean/friend.png b/data/skins/cartoon-ocean/friend.png
new file mode 100644
index 000000000..4d562d386
Binary files /dev/null and b/data/skins/cartoon-ocean/friend.png differ
diff --git a/data/skins/cartoon-ocean/gauge_fill.png b/data/skins/cartoon-ocean/gauge_fill.png
new file mode 100644
index 000000000..4ca05cdd3
Binary files /dev/null and b/data/skins/cartoon-ocean/gauge_fill.png differ
diff --git a/data/skins/cartoon-ocean/generic.png b/data/skins/cartoon-ocean/generic.png
new file mode 100644
index 000000000..413c18f07
Binary files /dev/null and b/data/skins/cartoon-ocean/generic.png differ
diff --git a/data/skins/cartoon-ocean/glass_iconhighlight_focus.png b/data/skins/cartoon-ocean/glass_iconhighlight_focus.png
new file mode 100644
index 000000000..ea1cfb23a
Binary files /dev/null and b/data/skins/cartoon-ocean/glass_iconhighlight_focus.png differ
diff --git a/data/skins/cartoon-ocean/left_arrow.png b/data/skins/cartoon-ocean/left_arrow.png
new file mode 100644
index 000000000..9bc82a44c
Binary files /dev/null and b/data/skins/cartoon-ocean/left_arrow.png differ
diff --git a/data/skins/cartoon-ocean/left_arrow_focus.png b/data/skins/cartoon-ocean/left_arrow_focus.png
new file mode 100644
index 000000000..c3d32dba3
Binary files /dev/null and b/data/skins/cartoon-ocean/left_arrow_focus.png differ
diff --git a/data/skins/cartoon-ocean/licenses.txt b/data/skins/cartoon-ocean/licenses.txt
new file mode 100644
index 000000000..d0cbfe1df
--- /dev/null
+++ b/data/skins/cartoon-ocean/licenses.txt
@@ -0,0 +1,30 @@
+Format: https://www.debian.org/doc/packaging-manuals/copyright-format/1.0/
+Upstream-Name: SuperTuxKart
+Upstream-Contact:
+ Marianne Gagnon <auria.mg@gmail.com>
+ Jean-Manuel Clémençon <sam.un@protonmail.com>
+Source: https://supertuxkart.net
+
+Files:
+ glass_iconhighlight_focus.png
+ bubble.png
+Copyright: 2010 Dakal and/or Marianne Gagnon (Auria)
+License: CC-BY-SA 3.0
+Comment: From peach skin, first found in commit 5cddb8ffb61001407ce97ee5a8c63faa18a08c2c.  It is unclear which author made these particular files.
+
+Files:
+ src/Inter-UI-Black.ttf
+Copyright: Copyright 2018 The Inter UI project authors
+License: OFL 1.1 (SIL Open Font License, Version 1.1)
+Comment: Specifically using version 2.5 of the font, later versions have a different look
+
+Files:
+ src/NotoSans*
+Copyright: Copyright 2015-2016 Google Inc. All Rights Reserved.
+License: This Font Software is licensed under the SIL Open Font License, Version 1.1. This Font Software is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the SIL Open Font License for the specific language, permissions and limitations governing your use of this Font Software.
+Comment: Bold/Black versions of the language-specific fonts used in the other skins
+
+Files: *
+Copyright: Copyright 2018-2020 LCP and QwertyChouskie
+License: CC-BY-SA 4.0
+Comment: Original style, most icons, and some elements by LCP, skin finished by QwertyChouskie
diff --git a/data/skins/cartoon-ocean/readme.txt b/data/skins/cartoon-ocean/readme.txt
new file mode 100644
index 000000000..491ceb43f
--- /dev/null
+++ b/data/skins/cartoon-ocean/readme.txt
@@ -0,0 +1,10 @@
+# This color variation was made using the following commands:
+
+for i in *.png ; do convert "$i" -colorspace gray -fill "#00cfff" -tint 100 "$i" ; done
+for i in *focus.png ; do convert "$i" -colorspace gray -fill "#00dfff" -tint 100 "$i" ; done
+for i in *focused.png ; do convert "$i" -colorspace gray -fill "#00dfff" -tint 100 "$i" ; done
+convert bottom_bar.png -colorspace gray -fill "#006999" -tint 100 bottom_bar.png
+
+# table_header_down manually re-colored
+# gauge_fill and spinner_fill were manually colored to #00ffff
+# achievement and friend were manually re-created from the source SVG with the background color changed.
\ No newline at end of file
diff --git a/data/skins/cartoon-ocean/right_arrow.png b/data/skins/cartoon-ocean/right_arrow.png
new file mode 100644
index 000000000..c3ce631d4
Binary files /dev/null and b/data/skins/cartoon-ocean/right_arrow.png differ
diff --git a/data/skins/cartoon-ocean/right_arrow_focus.png b/data/skins/cartoon-ocean/right_arrow_focus.png
new file mode 100644
index 000000000..9038d96f3
Binary files /dev/null and b/data/skins/cartoon-ocean/right_arrow_focus.png differ
diff --git a/data/skins/cartoon-ocean/scrollbar_button.png b/data/skins/cartoon-ocean/scrollbar_button.png
new file mode 100644
index 000000000..c9de25b92
Binary files /dev/null and b/data/skins/cartoon-ocean/scrollbar_button.png differ
diff --git a/data/skins/cartoon-ocean/scrollbar_thumb.png b/data/skins/cartoon-ocean/scrollbar_thumb.png
new file mode 100644
index 000000000..cf40666f8
Binary files /dev/null and b/data/skins/cartoon-ocean/scrollbar_thumb.png differ
diff --git a/data/skins/cartoon-ocean/select.png b/data/skins/cartoon-ocean/select.png
new file mode 100644
index 000000000..bd6c20cb2
Binary files /dev/null and b/data/skins/cartoon-ocean/select.png differ
diff --git a/data/skins/cartoon-ocean/spinner.png b/data/skins/cartoon-ocean/spinner.png
new file mode 100644
index 000000000..0d0fbe75c
Binary files /dev/null and b/data/skins/cartoon-ocean/spinner.png differ
diff --git a/data/skins/cartoon-ocean/spinner_down.png b/data/skins/cartoon-ocean/spinner_down.png
new file mode 100644
index 000000000..0d0fbe75c
Binary files /dev/null and b/data/skins/cartoon-ocean/spinner_down.png differ
diff --git a/data/skins/cartoon-ocean/spinner_fill.png b/data/skins/cartoon-ocean/spinner_fill.png
new file mode 100644
index 000000000..44ffe46da
Binary files /dev/null and b/data/skins/cartoon-ocean/spinner_fill.png differ
diff --git a/data/skins/cartoon-ocean/spinner_focus.png b/data/skins/cartoon-ocean/spinner_focus.png
new file mode 100644
index 000000000..69bfd419a
Binary files /dev/null and b/data/skins/cartoon-ocean/spinner_focus.png differ
diff --git a/data/skins/cartoon-ocean/spinner_rainbow_focus.png b/data/skins/cartoon-ocean/spinner_rainbow_focus.png
new file mode 100644
index 000000000..9d721f98f
Binary files /dev/null and b/data/skins/cartoon-ocean/spinner_rainbow_focus.png differ
diff --git a/data/skins/cartoon-ocean/stkskin.xml b/data/skins/cartoon-ocean/stkskin.xml
new file mode 100644
index 000000000..c56c1507e
--- /dev/null
+++ b/data/skins/cartoon-ocean/stkskin.xml
@@ -0,0 +1,376 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+Cartoon skin by LCP and QwertyChouskie, released under CC-BY-SA 4.0+
+
+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 some 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.
+
+When there is a common="y" with image tag, the image will be loaded only from data/skins/common in stk-code.
+
+Any information not specified in this theme will be inherited from the specified base theme,
+if any.  To specify a base theme, add base_theme="themename" to the <skin> tag.
+
+To use an icon theme, place the replacement icons (PNG or SVG) into [skin folder]/data/gui/icons
+STK will prefer these icons first, if not found it will fallback to icons from the base theme(s).
+-->
+
+<skin name="Cartoon - Ocean" author="LCP and QwertyChouskie" base_theme="cartoon">
+
+<!--
+Here you can configure advanced theming rules for this skin
+
+For TTF specify the list like the following, for normal and digit ttf it will be added at the beginning of the
+font list in STK, so those TTF will be used first, and any missing characters will be rendered from the base
+theme font list. For color emoji ttf it will replace the base theme color emoji directly. You are not required
+to specify all types of ttf.
+
+<advanced normal_ttf="xxx.ttf yyy.ttf"
+          digit_ttf="zzz.ttf"
+          color_emoji_ttf="www.ttf"/>
+-->
+
+<!--  Stateless -->
+<element type="background" image="background.jpg" />
+
+<element type="bottom-bar" image="bottom_bar.png" />
+
+<element type="achievement-message" image="achievement.png"
+      left_border="130" 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="friend.png"
+      left_border="130" right_border="13" top_border="13" bottom_border="13"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
+
+<!-- Provided by base theme
+<element type="error-message" image="error.png"
+      left_border="130" 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="generic.png"
+      left_border="130" 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="button.png"
+      left_border="40" right_border="40" top_border="12" bottom_border="12"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0" vborder_out_portion="0"
+      h_inner_padding="0.15" v_inner_padding="0.35"/>
+
+<element type="button" state="focused" image="button_focused.png"
+      left_border="40" right_border="40" top_border="12" bottom_border="12"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0" vborder_out_portion="0"
+      h_inner_padding="0.15" v_inner_padding="0.35"/>
+
+<!-- Provided by base theme
+<element type="button" state="deactivated" image="button_inactive.png"
+      left_border="40" right_border="40" top_border="12" bottom_border="12"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0" vborder_out_portion="0"
+      h_inner_padding="0.15" v_inner_padding="0.35"/>-->
+
+<!-- TODO : buttons could support 'pressed' state -->
+
+<!-- Provided by base theme
+<element type="textbubble" state="neutral" image="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="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="gauge_fill.png"
+      left_border="7" right_border="7" top_border="7" bottom_border="7"
+      preserve_h_aspect_ratios="false" />
+
+<!-- Provided by base theme
+<element type="progress" state="neutral" image="section.png"
+      left_border="7" right_border="7" top_border="7" bottom_border="7"
+      preserve_h_aspect_ratios="false" />-->
+      
+      
+<element type="tab" state="neutral" image="tab.png"
+      left_border="44" right_border="44" top_border="28" bottom_border="28"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-12" h_margin="0" v_margin="0" />
+      
+<element type="tab" state="focused" image="tab_focus.png"
+      left_border="44" right_border="44" top_border="28" bottom_border="28"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-12" h_margin="0" v_margin="0" />
+
+<element type="tab" state="down" image="tab.png"
+      left_border="44" right_border="44" top_border="28" bottom_border="28"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-12" h_margin="0" v_margin="0" />
+
+
+<element type="verticalTab" state="neutral" image="tab_vert.png"
+      left_border="45" right_border="45" top_border="28" bottom_border="28"
+      hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-8" h_margin="0" v_margin="4" />
+      
+<element type="verticalTab" state="focused" image="tab_vert_focus.png"
+      left_border="45" right_border="45" top_border="28" bottom_border="28"
+      hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-8" h_margin="0" v_margin="4" />
+
+<element type="verticalTab" state="down" image="tab_vert.png"
+      left_border="45" right_border="45" top_border="28" bottom_border="28"
+      hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-8" h_margin="0" v_margin="4" />
+
+<!-- Stateless -->
+<!-- Provided by base theme
+<element type="squareFocusHaloBW" common="y" image="glass_square_focused_bw.png"
+      left_border="6" right_border ="6" top_border="6" bottom_border="6"
+      hborder_out_portion="1.0" />
+<element type="squareFocusHalo1" common="y" image="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" common="y" image="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" common="y" image="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" common="y" image="glass_square_focused_yellow.png"
+      left_border="6" right_border ="6" top_border="6" bottom_border="6"
+      hborder_out_portion="1.0" />
+<element type="squareFocusHalo5" common="y" image="glass_square_focused_pink.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="bubble.png"  />
+<element type="focusHalo" image="glass_iconhighlight_focus.png"  />
+
+<element type="spinner" state="neutral" image="spinner.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="spinner_focus.png"
+    left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+
+<!-- Provided by base theme
+<element type="spinner" state="deactivated" image="spinner_deactivated.png"
+    left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />-->
+
+<!-- color spinner in kart color selection -->
+<!-- Provided by base theme
+<element type="spinner_rainbow" state="neutral" image="spinner_rainbow.png"
+      left_border="104" right_border="104" top_border="0" bottom_border="36"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0.0"/>
+
+<element type="spinner_rainbow" state="focused" image="spinner_rainbow_focus.png"
+      left_border="104" right_border="104" top_border="0" bottom_border="36"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0.0"/>
+
+<element type="spinner_rainbow" state="deactivated" image="spinner_rainbow_deactivated.png"
+      left_border="104" right_border="104" top_border="0" bottom_border="36"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0.0"/>-->
+
+<!-- player name spinner color in multiplayer-->
+<!-- Provided by base theme
+<element type="spinner1" state="neutral" image="spinner_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="spinner_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="spinner_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="spinner_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="spinner5" state="neutral" image="spinner_pink.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="spinner_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="checkbox.png"/>
+<element type="checkbox" state="neutral+checked" image="checkbox_checked.png"/>
+<element type="checkbox" state="focused+unchecked" image="checkbox_focus.png"/>
+<element type="checkbox" state="focused+checked" image="checkbox_checked_focus.png"/>
+<!-- Provided by base theme
+<element type="checkbox" state="deactivated+unchecked" image="checkbox_deactivated.png"/>
+<element type="checkbox" state="deactivated+checked" image="checkbox_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="spinner_fill.png" />
+<!-- used for the color slider. -->
+<!-- Provided by base theme
+<element type="gaugefillrainbow" common="y" image="gauge_fill_rainbow.png"/>-->
+
+<!-- Lists are always in neutral state for now -->
+<!-- Provided by base theme
+<element type="list" image="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="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 only used for the background and thumb. -->
+<!-- Provided by base theme
+<element type="scrollbar_background"          image="scrollbar_bg.png"
+    left_border="7" right_border="7" top_border="7" bottom_border="7"
+    hborder_out_portion="0.0" vborder_out_portion="0.0" />-->
+<element type="scrollbar_thumb"               image="scrollbar_thumb.png"
+    left_border="7" right_border="7" top_border="7" bottom_border="7"
+    hborder_out_portion="0.0" vborder_out_portion="0.0" />
+<element type="scrollbar_button"              image="scrollbar_button.png" />
+<element type="scrollbar_button" state="down" image="scrollbar_button.png" />
+
+<element type="left_arrow"  state="neutral" image="left_arrow.png" />
+<element type="right_arrow" state="neutral" image="right_arrow.png" />
+<element type="left_arrow"  state="focus"   image="left_arrow_focus.png" />
+<element type="right_arrow" state="focus"   image="right_arrow_focus.png" />
+
+<!-- Provided by base theme
+<element type="list_header"  state="neutral" image="table_header.png" />-->
+<element type="list_sort_up" state="neutral" image="up_arrow.png" />
+<element type="list_sort_down" state="neutral" image="down_arrow.png" />
+<element type="list_header"  state="down"    image="table_header_down.png" />
+
+<!-- Stateless -->
+<!-- Provided by base theme
+<element type="section" image="section.png"
+      left_border="15" right_border="15" top_border="15" bottom_border="15"
+      hborder_out_portion="0.0" vborder_out_portion="0.0" />
+
+<element type="section" state="selected" image="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 -->
+<!-- Provided by base theme
+<element type="rounded_section" image="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 -->
+<!-- Provided by base theme
+<element type="window" image="dialog.png"
+      left_border="32" right_border="32" top_border="32" bottom_border="32"
+      hborder_out_portion="1.0" vborder_out_portion="1.0" />-->
+
+<!-- Stateless -->
+<!-- Provided by base theme
+<element type="tooltip" image="tooltip.png"
+    left_border="10" right_border="10" top_border="10" bottom_border="10"
+    hborder_out_portion="1.5" vborder_out_portion="1.0" />-->
+    
+<!--                   Colors                  -->
+<color type="text" state="neutral" r="0" g="0" b="0" />
+<color type="brighttext" state="neutral" r="28" g="176" b="255" />
+
+<!-- For highlighted items, e.g. in list -->
+<color type="text" state="focused" r="255" g="255" b="255" />
+
+<!-- Color used in the credits -->
+<color type="credits_text" state="neutral" r="0" g="0" b="75" />
+
+<!-- Color used for emphasized items in e.g. lists -->
+<color type="emphasis_text" state="neutral" r="0" g="0" b="180" />
+<color type="emphasis_text" state="focused" r="0" g="0" b="160" />
+
+<!-- Color used for red/blue items in list (e.g. player team color in networking) -->
+<color type="list_blue" state="neutral" r="0" g="0" b="255" />
+<color type="list_blue" state="focused" r="0" g="0" b="255" />
+<color type="list_red" state="neutral" r="255" g="0" b="0" />
+<color type="list_red" state="focused" r="255" g="0" b="0" />
+
+<!-- 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" />
+
+<!-- Color used for tips in the loading screen -->
+<color type="tips_background" state="neutral" a="120" r="0" g="0" b="0" />
+
+<!-- Text field color -->
+<color type="text_field" state="background" a="255" r="200" g="200" b="200" />
+<color type="text_field" state="background_focused" a="255" r="223" g="238" b="248" />
+<color type="text_field" state="background_deactivated" a="255" r="200" g="200" b="200" />
+<color type="text_field" state="background_marked" a="128" r="40" g="80" b="100" />
+<color type="text_field" state="neutral" a="255" r="138" g="138" b="138" />
+<color type="text_field" state="focused" a="255" r="42" g="169" b="211" />
+<color type="text_field" state="deactivated" a="255" r="138" g="138" b="138" />
+
+<!-- Rating star image -->
+<!-- Provided by base theme
+<element type="rating" state="neutral" image="rating_star.png" />-->
+
+<!-- Font color -->
+<color type="font" state="top" a="255" r="100" g="200" b="220" />
+<color type="font" state="bottom" a="255" r="100" g="250" b="220" />
+<color type="font" state="normal" a="255" r="40" g="40" b="180" />
+
+</skin>
diff --git a/data/skins/cartoon-ocean/tab.png b/data/skins/cartoon-ocean/tab.png
new file mode 100644
index 000000000..c77911452
Binary files /dev/null and b/data/skins/cartoon-ocean/tab.png differ
diff --git a/data/skins/cartoon-ocean/tab_focus.png b/data/skins/cartoon-ocean/tab_focus.png
new file mode 100644
index 000000000..17be11a5a
Binary files /dev/null and b/data/skins/cartoon-ocean/tab_focus.png differ
diff --git a/data/skins/cartoon-ocean/tab_vert.png b/data/skins/cartoon-ocean/tab_vert.png
new file mode 100644
index 000000000..7dfb601be
Binary files /dev/null and b/data/skins/cartoon-ocean/tab_vert.png differ
diff --git a/data/skins/cartoon-ocean/tab_vert_focus.png b/data/skins/cartoon-ocean/tab_vert_focus.png
new file mode 100644
index 000000000..1c1bfdb82
Binary files /dev/null and b/data/skins/cartoon-ocean/tab_vert_focus.png differ
diff --git a/data/skins/cartoon-ocean/table_header_down.png b/data/skins/cartoon-ocean/table_header_down.png
new file mode 100644
index 000000000..09e3f0a62
Binary files /dev/null and b/data/skins/cartoon-ocean/table_header_down.png differ
diff --git a/data/skins/cartoon-ocean/up_arrow.png b/data/skins/cartoon-ocean/up_arrow.png
new file mode 100644
index 000000000..3cc16ad8e
Binary files /dev/null and b/data/skins/cartoon-ocean/up_arrow.png differ
diff --git a/data/skins/cartoon-ruby/achievement.png b/data/skins/cartoon-ruby/achievement.png
new file mode 100644
index 000000000..c41eff986
Binary files /dev/null and b/data/skins/cartoon-ruby/achievement.png differ
diff --git a/data/skins/cartoon-ruby/background.jpg b/data/skins/cartoon-ruby/background.jpg
new file mode 100644
index 000000000..b1cf44354
Binary files /dev/null and b/data/skins/cartoon-ruby/background.jpg differ
diff --git a/data/skins/cartoon-ruby/bottom_bar.png b/data/skins/cartoon-ruby/bottom_bar.png
new file mode 100644
index 000000000..ae4e0d35e
Binary files /dev/null and b/data/skins/cartoon-ruby/bottom_bar.png differ
diff --git a/data/skins/cartoon-ruby/bubble.png b/data/skins/cartoon-ruby/bubble.png
new file mode 100644
index 000000000..bb9676304
Binary files /dev/null and b/data/skins/cartoon-ruby/bubble.png differ
diff --git a/data/skins/cartoon-ruby/button.png b/data/skins/cartoon-ruby/button.png
new file mode 100644
index 000000000..7ec7e3f06
Binary files /dev/null and b/data/skins/cartoon-ruby/button.png differ
diff --git a/data/skins/cartoon-ruby/button_focused.png b/data/skins/cartoon-ruby/button_focused.png
new file mode 100644
index 000000000..6329b0815
Binary files /dev/null and b/data/skins/cartoon-ruby/button_focused.png differ
diff --git a/data/skins/cartoon-ruby/checkbox.png b/data/skins/cartoon-ruby/checkbox.png
new file mode 100644
index 000000000..fedc6db6e
Binary files /dev/null and b/data/skins/cartoon-ruby/checkbox.png differ
diff --git a/data/skins/cartoon-ruby/checkbox_checked.png b/data/skins/cartoon-ruby/checkbox_checked.png
new file mode 100644
index 000000000..cc6e6a864
Binary files /dev/null and b/data/skins/cartoon-ruby/checkbox_checked.png differ
diff --git a/data/skins/cartoon-ruby/checkbox_checked_focus.png b/data/skins/cartoon-ruby/checkbox_checked_focus.png
new file mode 100644
index 000000000..3fbb41b4b
Binary files /dev/null and b/data/skins/cartoon-ruby/checkbox_checked_focus.png differ
diff --git a/data/skins/cartoon-ruby/checkbox_focus.png b/data/skins/cartoon-ruby/checkbox_focus.png
new file mode 100644
index 000000000..e2ccf8a1d
Binary files /dev/null and b/data/skins/cartoon-ruby/checkbox_focus.png differ
diff --git a/data/skins/cartoon-ruby/down_arrow.png b/data/skins/cartoon-ruby/down_arrow.png
new file mode 100644
index 000000000..92036d6e7
Binary files /dev/null and b/data/skins/cartoon-ruby/down_arrow.png differ
diff --git a/data/skins/cartoon-ruby/friend.png b/data/skins/cartoon-ruby/friend.png
new file mode 100644
index 000000000..f6c1da879
Binary files /dev/null and b/data/skins/cartoon-ruby/friend.png differ
diff --git a/data/skins/cartoon-ruby/gauge_fill.png b/data/skins/cartoon-ruby/gauge_fill.png
new file mode 100644
index 000000000..a27e69a0a
Binary files /dev/null and b/data/skins/cartoon-ruby/gauge_fill.png differ
diff --git a/data/skins/cartoon-ruby/generic.png b/data/skins/cartoon-ruby/generic.png
new file mode 100644
index 000000000..a8f53b59c
Binary files /dev/null and b/data/skins/cartoon-ruby/generic.png differ
diff --git a/data/skins/cartoon-ruby/glass_iconhighlight_focus.png b/data/skins/cartoon-ruby/glass_iconhighlight_focus.png
new file mode 100644
index 000000000..6f2bd52d5
Binary files /dev/null and b/data/skins/cartoon-ruby/glass_iconhighlight_focus.png differ
diff --git a/data/skins/cartoon-ruby/left_arrow.png b/data/skins/cartoon-ruby/left_arrow.png
new file mode 100644
index 000000000..43af58fec
Binary files /dev/null and b/data/skins/cartoon-ruby/left_arrow.png differ
diff --git a/data/skins/cartoon-ruby/left_arrow_focus.png b/data/skins/cartoon-ruby/left_arrow_focus.png
new file mode 100644
index 000000000..1cce63915
Binary files /dev/null and b/data/skins/cartoon-ruby/left_arrow_focus.png differ
diff --git a/data/skins/cartoon-ruby/licenses.txt b/data/skins/cartoon-ruby/licenses.txt
new file mode 100644
index 000000000..d0cbfe1df
--- /dev/null
+++ b/data/skins/cartoon-ruby/licenses.txt
@@ -0,0 +1,30 @@
+Format: https://www.debian.org/doc/packaging-manuals/copyright-format/1.0/
+Upstream-Name: SuperTuxKart
+Upstream-Contact:
+ Marianne Gagnon <auria.mg@gmail.com>
+ Jean-Manuel Clémençon <sam.un@protonmail.com>
+Source: https://supertuxkart.net
+
+Files:
+ glass_iconhighlight_focus.png
+ bubble.png
+Copyright: 2010 Dakal and/or Marianne Gagnon (Auria)
+License: CC-BY-SA 3.0
+Comment: From peach skin, first found in commit 5cddb8ffb61001407ce97ee5a8c63faa18a08c2c.  It is unclear which author made these particular files.
+
+Files:
+ src/Inter-UI-Black.ttf
+Copyright: Copyright 2018 The Inter UI project authors
+License: OFL 1.1 (SIL Open Font License, Version 1.1)
+Comment: Specifically using version 2.5 of the font, later versions have a different look
+
+Files:
+ src/NotoSans*
+Copyright: Copyright 2015-2016 Google Inc. All Rights Reserved.
+License: This Font Software is licensed under the SIL Open Font License, Version 1.1. This Font Software is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the SIL Open Font License for the specific language, permissions and limitations governing your use of this Font Software.
+Comment: Bold/Black versions of the language-specific fonts used in the other skins
+
+Files: *
+Copyright: Copyright 2018-2020 LCP and QwertyChouskie
+License: CC-BY-SA 4.0
+Comment: Original style, most icons, and some elements by LCP, skin finished by QwertyChouskie
diff --git a/data/skins/cartoon-ruby/readme.txt b/data/skins/cartoon-ruby/readme.txt
new file mode 100644
index 000000000..7388b7efd
--- /dev/null
+++ b/data/skins/cartoon-ruby/readme.txt
@@ -0,0 +1,10 @@
+# This color variation was made using the following commands:
+
+for i in *.png ; do convert "$i" -colorspace gray -fill "#ff0000" -tint 100 "$i" ; done
+for i in *focus.png ; do convert "$i" -colorspace gray -fill "#990000" -tint 100 "$i" ; done
+for i in *focused.png ; do convert "$i" -colorspace gray -fill "#990000" -tint 100 "$i" ; done
+convert bottom_bar.png -colorspace gray -fill "#690000" -tint 100 bottom_bar.png
+
+# table_header_down manually re-colored
+# gauge_fill and spinner_fill were manually colored to #ffa6b3
+# achievement and friend were manually re-created from the source SVG with the background color changed.
\ No newline at end of file
diff --git a/data/skins/cartoon-ruby/right_arrow.png b/data/skins/cartoon-ruby/right_arrow.png
new file mode 100644
index 000000000..7da0ef0d1
Binary files /dev/null and b/data/skins/cartoon-ruby/right_arrow.png differ
diff --git a/data/skins/cartoon-ruby/right_arrow_focus.png b/data/skins/cartoon-ruby/right_arrow_focus.png
new file mode 100644
index 000000000..469e538cb
Binary files /dev/null and b/data/skins/cartoon-ruby/right_arrow_focus.png differ
diff --git a/data/skins/cartoon-ruby/scrollbar_button.png b/data/skins/cartoon-ruby/scrollbar_button.png
new file mode 100644
index 000000000..ebd76ac25
Binary files /dev/null and b/data/skins/cartoon-ruby/scrollbar_button.png differ
diff --git a/data/skins/cartoon-ruby/scrollbar_thumb.png b/data/skins/cartoon-ruby/scrollbar_thumb.png
new file mode 100644
index 000000000..54816e014
Binary files /dev/null and b/data/skins/cartoon-ruby/scrollbar_thumb.png differ
diff --git a/data/skins/cartoon-ruby/select.png b/data/skins/cartoon-ruby/select.png
new file mode 100644
index 000000000..29737bad2
Binary files /dev/null and b/data/skins/cartoon-ruby/select.png differ
diff --git a/data/skins/cartoon-ruby/spinner.png b/data/skins/cartoon-ruby/spinner.png
new file mode 100644
index 000000000..ec9f248f4
Binary files /dev/null and b/data/skins/cartoon-ruby/spinner.png differ
diff --git a/data/skins/cartoon-ruby/spinner_down.png b/data/skins/cartoon-ruby/spinner_down.png
new file mode 100644
index 000000000..ec9f248f4
Binary files /dev/null and b/data/skins/cartoon-ruby/spinner_down.png differ
diff --git a/data/skins/cartoon-ruby/spinner_fill.png b/data/skins/cartoon-ruby/spinner_fill.png
new file mode 100644
index 000000000..0dfa6dc18
Binary files /dev/null and b/data/skins/cartoon-ruby/spinner_fill.png differ
diff --git a/data/skins/cartoon-ruby/spinner_focus.png b/data/skins/cartoon-ruby/spinner_focus.png
new file mode 100644
index 000000000..a904d1977
Binary files /dev/null and b/data/skins/cartoon-ruby/spinner_focus.png differ
diff --git a/data/skins/cartoon-ruby/stkskin.xml b/data/skins/cartoon-ruby/stkskin.xml
new file mode 100644
index 000000000..aa9e01791
--- /dev/null
+++ b/data/skins/cartoon-ruby/stkskin.xml
@@ -0,0 +1,312 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+Cartoon Ruby skin by LCP, QwertyChouskie and CrystalDaEevee, released under CC-BY-SA 4.0+
+
+See the Cartoon skin for further info.
+-->
+
+<skin name="Cartoon - Ruby" author="LCP and QwertyChouskie (edited by CrystalDaEevee)" base_theme="cartoon">
+
+<!--
+Here you can configure advanced theming rules for this skin
+
+For TTF specify the list like the following, for normal and digit ttf it will be added at the beginning of the
+font list in STK, so those TTF will be used first, and any missing characters will be rendered from the base
+theme font list. For color emoji ttf it will replace the base theme color emoji directly. You are not required
+to specify all types of ttf.
+
+<advanced normal_ttf="xxx.ttf yyy.ttf"
+          digit_ttf="zzz.ttf"
+          color_emoji_ttf="www.ttf"/>
+-->
+
+<!--  Stateless -->
+<element type="background" image="background.jpg" />
+
+<element type="bottom-bar" image="bottom_bar.png" />
+
+<element type="achievement-message" image="achievement.png"
+      left_border="130" 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="friend.png"
+      left_border="130" right_border="13" top_border="13" bottom_border="13"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
+
+<!-- Provided by base theme
+<element type="error-message" image="error.png"
+      left_border="130" 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="generic.png"
+      left_border="130" 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="button.png"
+      left_border="40" right_border="40" top_border="12" bottom_border="12"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0" vborder_out_portion="0"
+      h_inner_padding="0.15" v_inner_padding="0.35"/>
+
+<element type="button" state="focused" image="button_focused.png"
+      left_border="40" right_border="40" top_border="12" bottom_border="12"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0" vborder_out_portion="0"
+      h_inner_padding="0.15" v_inner_padding="0.35"/>
+
+<!-- Provided by base theme
+<element type="button" state="deactivated" image="button_inactive.png"
+      left_border="40" right_border="40" top_border="12" bottom_border="12"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0" vborder_out_portion="0"
+      h_inner_padding="0.15" v_inner_padding="0.35"/>-->
+
+<!-- TODO : buttons could support 'pressed' state -->
+
+<!-- Provided by base theme
+<element type="textbubble" state="neutral" image="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="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="gauge_fill.png"
+      left_border="7" right_border="7" top_border="7" bottom_border="7"
+      preserve_h_aspect_ratios="false" />
+
+<!-- Provided by base theme
+<element type="progress" state="neutral" image="section.png"
+      left_border="7" right_border="7" top_border="7" bottom_border="7"
+      preserve_h_aspect_ratios="false" />-->
+      
+      
+<element type="tab" state="neutral" image="tab.png"
+      left_border="44" right_border="44" top_border="28" bottom_border="28"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-12" h_margin="0" v_margin="0" />
+      
+<element type="tab" state="focused" image="tab_focus.png"
+      left_border="44" right_border="44" top_border="28" bottom_border="28"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-12" h_margin="0" v_margin="0" />
+
+<element type="tab" state="down" image="tab.png"
+      left_border="44" right_border="44" top_border="28" bottom_border="28"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-12" h_margin="0" v_margin="0" />
+
+
+<element type="verticalTab" state="neutral" image="tab_vert.png"
+      left_border="45" right_border="45" top_border="28" bottom_border="28"
+      hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-8" h_margin="0" v_margin="4" />
+      
+<element type="verticalTab" state="focused" image="tab_vert_focus.png"
+      left_border="45" right_border="45" top_border="28" bottom_border="28"
+      hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-8" h_margin="0" v_margin="4" />
+
+<element type="verticalTab" state="down" image="tab_vert.png"
+      left_border="45" right_border="45" top_border="28" bottom_border="28"
+      hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-8" h_margin="0" v_margin="4" />
+
+<!-- Stateless -->
+<!-- Provided by base theme
+<element type="squareFocusHaloBW" common="y" image="glass_square_focused_bw.png"
+      left_border="6" right_border ="6" top_border="6" bottom_border="6"
+      hborder_out_portion="1.0" />
+<element type="squareFocusHalo1" common="y" image="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" common="y" image="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" common="y" image="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" common="y" image="glass_square_focused_yellow.png"
+      left_border="6" right_border ="6" top_border="6" bottom_border="6"
+      hborder_out_portion="1.0" />
+<element type="squareFocusHalo5" common="y" image="glass_square_focused_pink.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="bubble.png"  />
+<element type="focusHalo" image="glass_iconhighlight_focus.png"  />
+
+<element type="spinner" state="neutral" image="spinner.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="spinner_focus.png"
+    left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+
+<!-- Provided by base theme
+<element type="spinner" state="deactivated" image="spinner_deactivated.png"
+    left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />-->
+
+<!-- color spinner in kart color selection -->
+<!-- Provided by base theme
+<element type="spinner_rainbow" state="neutral" image="spinner_rainbow.png"
+      left_border="104" right_border="104" top_border="0" bottom_border="36"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0.0"/>
+
+<element type="spinner_rainbow" state="focused" image="spinner_rainbow_focus.png"
+      left_border="104" right_border="104" top_border="0" bottom_border="36"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0.0"/>
+
+<element type="spinner_rainbow" state="deactivated" image="spinner_rainbow_deactivated.png"
+      left_border="104" right_border="104" top_border="0" bottom_border="36"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0.0"/>-->
+
+<!-- player name spinner color in multiplayer-->
+<!-- Provided by base theme
+<element type="spinner1" state="neutral" image="spinner_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="spinner_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="spinner_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="spinner_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="spinner5" state="neutral" image="spinner_pink.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="spinner_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="checkbox.png"/>
+<element type="checkbox" state="neutral+checked" image="checkbox_checked.png"/>
+<element type="checkbox" state="focused+unchecked" image="checkbox_focus.png"/>
+<element type="checkbox" state="focused+checked" image="checkbox_checked_focus.png"/>
+<!-- Provided by base theme
+<element type="checkbox" state="deactivated+unchecked" image="checkbox_deactivated.png"/>
+<element type="checkbox" state="deactivated+checked" image="checkbox_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="spinner_fill.png" />
+<!-- used for the color slider. -->
+<!-- Provided by base theme
+<element type="gaugefillrainbow" common="y" image="gauge_fill_rainbow.png"/>-->
+
+<!-- Lists are always in neutral state for now -->
+<!-- Provided by base theme
+<element type="list" image="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="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 only used for the background and thumb. -->
+<!-- Provided by base theme
+<element type="scrollbar_background"          image="scrollbar_bg.png"
+    left_border="7" right_border="7" top_border="7" bottom_border="7"
+    hborder_out_portion="0.0" vborder_out_portion="0.0" />-->
+<element type="scrollbar_thumb"               image="scrollbar_thumb.png"
+    left_border="7" right_border="7" top_border="7" bottom_border="7"
+    hborder_out_portion="0.0" vborder_out_portion="0.0" />
+<element type="scrollbar_button"              image="scrollbar_button.png" />
+<element type="scrollbar_button" state="down" image="scrollbar_button.png" />
+
+<element type="left_arrow"  state="neutral" image="left_arrow.png" />
+<element type="right_arrow" state="neutral" image="right_arrow.png" />
+<element type="left_arrow"  state="focus"   image="left_arrow_focus.png" />
+<element type="right_arrow" state="focus"   image="right_arrow_focus.png" />
+
+<!-- Provided by base theme
+<element type="list_header"  state="neutral" image="table_header.png" />-->
+<element type="list_sort_up" state="neutral" image="up_arrow.png" />
+<element type="list_sort_down" state="neutral" image="down_arrow.png" />
+<element type="list_header"  state="down"    image="table_header_down.png" />
+
+<!-- Stateless -->
+<!-- Provided by base theme
+<element type="section" image="section.png"
+      left_border="15" right_border="15" top_border="15" bottom_border="15"
+      hborder_out_portion="0.0" vborder_out_portion="0.0" />
+
+<element type="section" state="selected" image="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 -->
+<!-- Provided by base theme
+<element type="rounded_section" image="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 -->
+<!-- Provided by base theme
+<element type="window" image="dialog.png"
+      left_border="32" right_border="32" top_border="32" bottom_border="32"
+      hborder_out_portion="1.0" vborder_out_portion="1.0" />-->
+
+<!-- Stateless -->
+<!-- Provided by base theme
+<element type="tooltip" image="tooltip.png"
+    left_border="10" right_border="10" top_border="10" bottom_border="10"
+    hborder_out_portion="1.5" vborder_out_portion="1.0" />-->
+    
+<!--                   Colors                  -->
+<color type="text" state="neutral" r="0" g="0" b="0" />
+<color type="brighttext" state="neutral" r="255" g="30" b="150" />
+
+<!-- For highlighted items, e.g. in list -->
+<color type="text" state="focused" r="255" g="255" b="255" />
+
+<!-- Color used in the credits -->
+<color type="credits_text" state="neutral" r="65" g="0" b="15" />
+
+<!-- Color used for emphasized items in e.g. lists -->
+<color type="emphasis_text" state="neutral" r="0" g="0" b="180" />
+<color type="emphasis_text" state="focused" r="0" g="0" b="160" />
+
+<!-- Color used for red/blue items in list (e.g. player team color in networking) -->
+<color type="list_blue" state="neutral" r="0" g="0" b="255" />
+<color type="list_blue" state="focused" r="0" g="0" b="255" />
+<color type="list_red" state="neutral" r="255" g="0" b="0" />
+<color type="list_red" state="focused" r="255" g="0" b="0" />
+
+<!-- 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" />
+
+<!-- Color used for tips in the loading screen -->
+<color type="tips_background" state="neutral" a="120" r="0" g="0" b="0" />
+
+<!-- Text field color -->
+<color type="text_field" state="background" a="255" r="200" g="200" b="200" />
+<color type="text_field" state="background_focused" a="255" r="245" g="220" b="235" />
+<color type="text_field" state="background_deactivated" a="255" r="200" g="200" b="200" />
+<color type="text_field" state="background_marked" a="128" r="80" g="40" b="40" />
+<color type="text_field" state="neutral" a="255" r="138" g="138" b="138" />
+<color type="text_field" state="focused" a="255" r="240" g="80" b="110" />
+<color type="text_field" state="deactivated" a="255" r="138" g="138" b="138" />
+
+<!-- Rating star image -->
+<!-- Provided by base theme
+<element type="rating" state="neutral" image="rating_star.png" />-->
+
+<!-- Font color -->
+<color type="font" state="top" a="255" r="255" g="50" b="200" />
+<color type="font" state="bottom" a="255" r="255" g="150" b="200" />
+<color type="font" state="normal" a="255" r="190" g="115" b="180" />
+
+</skin>
diff --git a/data/skins/cartoon-ruby/tab.png b/data/skins/cartoon-ruby/tab.png
new file mode 100644
index 000000000..b9e80f94a
Binary files /dev/null and b/data/skins/cartoon-ruby/tab.png differ
diff --git a/data/skins/cartoon-ruby/tab_focus.png b/data/skins/cartoon-ruby/tab_focus.png
new file mode 100644
index 000000000..fa78b00fa
Binary files /dev/null and b/data/skins/cartoon-ruby/tab_focus.png differ
diff --git a/data/skins/cartoon-ruby/tab_vert.png b/data/skins/cartoon-ruby/tab_vert.png
new file mode 100644
index 000000000..de3dd9f56
Binary files /dev/null and b/data/skins/cartoon-ruby/tab_vert.png differ
diff --git a/data/skins/cartoon-ruby/tab_vert_focus.png b/data/skins/cartoon-ruby/tab_vert_focus.png
new file mode 100644
index 000000000..fce37730c
Binary files /dev/null and b/data/skins/cartoon-ruby/tab_vert_focus.png differ
diff --git a/data/skins/cartoon-ruby/table_header_down.png b/data/skins/cartoon-ruby/table_header_down.png
new file mode 100644
index 000000000..6f3e79476
Binary files /dev/null and b/data/skins/cartoon-ruby/table_header_down.png differ
diff --git a/data/skins/cartoon-ruby/up_arrow.png b/data/skins/cartoon-ruby/up_arrow.png
new file mode 100644
index 000000000..1e4a46b92
Binary files /dev/null and b/data/skins/cartoon-ruby/up_arrow.png differ