diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/In Blue.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/In Blue.css
new file mode 100644
--- /dev/null
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/In Blue.css	
@@ -0,0 +1,51 @@
+
+.x-incomingItem .x-timeStamp
+{
+	color: #7fc5f8;
+}
+
+.x-incomingItem .x-myBubble .x-indicator
+{
+	background: url("../images/blueIndicator.png") no-repeat top left;
+}
+
+.x-incomingItem .x-tableBubble .x-tl
+{
+	background: url("../images/blueCurves.png") no-repeat top left;
+}
+
+.x-incomingItem .x-tableBubble .x-tr
+{
+	background: url("../images/blueCurves.png") no-repeat top right;
+}
+
+.x-incomingItem .x-tableBubble .x-head
+{
+	background: url("../images/blueCurves.png") no-repeat -10px 0;
+}
+
+.x-incomingItem .x-tableBubble .x-message
+{
+	background: url("../images/blueBackground.png") repeat-y top left;
+}
+
+.x-incomingItem .x-tableBubble .x-messageRight
+{
+	background: url("../images/blueBackground.png") repeat-y top right;
+}
+
+.x-incomingItem .x-tableBubble .x-bl
+{
+	background: url("../images/blueCurves.png") no-repeat bottom left;
+}
+
+.x-incomingItem .x-tableBubble .x-br
+{
+	background: url("../images/blueCurves.png") no-repeat bottom right;
+}
+
+.x-incomingItem .x-followUp
+{
+	background-color: #ddf0fe;
+	border-bottom: 1px solid #fff;
+}
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/In Green.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/In Green.css
new file mode 100644
--- /dev/null
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/In Green.css	
@@ -0,0 +1,51 @@
+
+.x-incomingItem .x-timeStamp
+{
+	color: #9ecf35;
+}
+
+.x-incomingItem .x-myBubble .x-indicator
+{
+	background: url("../images/greenIndicator.png") no-repeat top left;
+}
+
+.x-incomingItem .x-tableBubble .x-tl
+{
+	background: url("../images/greenCurves.png") no-repeat top left;
+}
+
+.x-incomingItem .x-tableBubble .x-tr
+{
+	background: url("../images/greenCurves.png") no-repeat top right;
+}
+
+.x-incomingItem .x-tableBubble .x-head
+{
+	background: url("../images/greenCurves.png") no-repeat -10px 0;
+}
+
+.x-incomingItem .x-tableBubble .x-message
+{
+	background: url("../images/greenBackground.png") repeat-y top left;
+}
+
+.x-incomingItem .x-tableBubble .x-messageRight
+{
+	background: url("../images/greenBackground.png") repeat-y top right;
+}
+
+.x-incomingItem .x-tableBubble .x-bl
+{
+	background: url("../images/greenCurves.png") no-repeat bottom left;
+}
+
+.x-incomingItem .x-tableBubble .x-br
+{
+	background: url("../images/greenCurves.png") no-repeat bottom right;
+}
+
+.x-incomingItem .x-followUp
+{
+	background-color: #e2efc4;
+	border-bottom: 1px solid #fff;
+}
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/In Red.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/In Red.css
new file mode 100644
--- /dev/null
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/In Red.css	
@@ -0,0 +1,51 @@
+
+.x-incomingItem .x-timeStamp
+{
+	color: #f88f8f;
+}
+
+.x-incomingItem .x-myBubble .x-indicator
+{
+	background: url("../images/redIndicator.png") no-repeat top left;
+}
+
+.x-incomingItem .x-tableBubble .x-tl
+{
+	background: url("../images/redCurves.png") no-repeat top left;
+}
+
+.x-incomingItem .x-tableBubble .x-tr
+{
+	background: url("../images/redCurves.png") no-repeat top right;
+}
+
+.x-incomingItem .x-tableBubble .x-head
+{
+	background: url("../images/redCurves.png") no-repeat -10px 0;
+}
+
+.x-incomingItem .x-tableBubble .x-message
+{
+	background: url("../images/redBackground.png") repeat-y top left;
+}
+
+.x-incomingItem .x-tableBubble .x-messageRight
+{
+	background: url("../images/redBackground.png") repeat-y top right;
+}
+
+.x-incomingItem .x-tableBubble .x-bl
+{
+	background: url("../images/redCurves.png") no-repeat bottom left;
+}
+
+.x-incomingItem .x-tableBubble .x-br
+{
+	background: url("../images/redCurves.png") no-repeat bottom right;
+}
+
+.x-incomingItem .x-followUp
+{
+	background-color: #ffdada;
+	border-bottom: 1px solid #fff;
+}
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/In Steel.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/In Steel.css
new file mode 100644
--- /dev/null
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/In Steel.css	
@@ -0,0 +1,51 @@
+
+.x-incomingItem .x-timeStamp
+{
+	color: #a9a9a9;
+}
+
+.x-incomingItem .x-myBubble .x-indicator
+{
+	background: url("../images/steelIndicator.png") no-repeat top left;
+}
+
+.x-incomingItem .x-tableBubble .x-tl
+{
+	background: url("../images/steelCurves.png") no-repeat top left;
+}
+
+.x-incomingItem .x-tableBubble .x-tr
+{
+	background: url("../images/steelCurves.png") no-repeat top right;
+}
+
+.x-incomingItem .x-tableBubble .x-head
+{
+	background: url("../images/steelCurves.png") no-repeat -10px 0;
+}
+
+.x-incomingItem .x-tableBubble .x-message
+{
+	background: url("../images/steelBackground.png") repeat-y top left;
+}
+
+.x-incomingItem .x-tableBubble .x-messageRight
+{
+	background: url("../images/steelBackground.png") repeat-y top right;
+}
+
+.x-incomingItem .x-tableBubble .x-bl
+{
+	background: url("../images/steelCurves.png") no-repeat bottom left;
+}
+
+.x-incomingItem .x-tableBubble .x-br
+{
+	background: url("../images/steelCurves.png") no-repeat bottom right;
+}
+
+.x-incomingItem .x-followUp
+{
+	background-color: #ececec;
+	border-bottom: 1px solid #fff;
+}
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/In Yellow.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/In Yellow.css
new file mode 100644
--- /dev/null
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/In Yellow.css	
@@ -0,0 +1,51 @@
+
+.x-incomingItem .x-timeStamp
+{
+	color: #bdb410;
+}
+
+.x-incomingItem .x-myBubble .x-indicator
+{
+	background: url("../images/yellowIndicator.png") no-repeat top left;
+}
+
+.x-incomingItem .x-tableBubble .x-tl
+{
+	background: url("../images/yellowCurves.png") no-repeat top left;
+}
+
+.x-incomingItem .x-tableBubble .x-tr
+{
+	background: url("../images/yellowCurves.png") no-repeat top right;
+}
+
+.x-incomingItem .x-tableBubble .x-head
+{
+	background: url("../images/yellowCurves.png") no-repeat -10px 0;
+}
+
+.x-incomingItem .x-tableBubble .x-message
+{
+	background: url("../images/yellowBackground.png") repeat-y top left;
+}
+
+.x-incomingItem .x-tableBubble .x-messageRight
+{
+	background: url("../images/yellowBackground.png") repeat-y top right;
+}
+
+.x-incomingItem .x-tableBubble .x-bl
+{
+	background: url("../images/yellowCurves.png") no-repeat bottom left;
+}
+
+.x-incomingItem .x-tableBubble .x-br
+{
+	background: url("../images/yellowCurves.png") no-repeat bottom right;
+}
+
+.x-incomingItem .x-followUp
+{
+	background-color: #f4f0a7;
+	border-bottom: 1px solid #fff;
+}
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/Out Blue.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/Out Blue.css
new file mode 100644
--- /dev/null
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/Out Blue.css	
@@ -0,0 +1,51 @@
+
+.x-outgoingItem .x-timeStamp
+{
+	color: #7fc5f8;
+}
+
+.x-outgoingItem .x-myBubble .x-indicator
+{
+	background: url("../images/blueIndicator.png") no-repeat top left;
+}
+
+.x-outgoingItem .x-tableBubble .x-tl
+{
+	background: url("../images/blueCurves.png") no-repeat top left;
+}
+
+.x-outgoingItem .x-tableBubble .x-tr
+{
+	background: url("../images/blueCurves.png") no-repeat top right;
+}
+
+.x-outgoingItem .x-tableBubble .x-head
+{
+	background: url("../images/blueCurves.png") no-repeat -10px 0;
+}
+
+.x-outgoingItem .x-tableBubble .x-message
+{
+	background: url("../images/blueBackground.png") repeat-y top left;
+}
+
+.x-outgoingItem .x-tableBubble .x-messageRight
+{
+	background: url("../images/blueBackground.png") repeat-y top right;
+}
+
+.x-outgoingItem .x-tableBubble .x-bl
+{
+	background: url("../images/blueCurves.png") no-repeat bottom left;
+}
+
+.x-outgoingItem .x-tableBubble .x-br
+{
+	background: url("../images/blueCurves.png") no-repeat bottom right;
+}
+
+.x-outgoingItem .x-followUp
+{
+	background-color: #ddf0fe;
+	border-bottom: 1px solid #fff;
+}
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/Out Green.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/Out Green.css
new file mode 100644
--- /dev/null
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/Out Green.css	
@@ -0,0 +1,51 @@
+
+.x-outgoingItem .x-timeStamp
+{
+	color: #9ecf35;
+}
+
+.x-outgoingItem .x-myBubble .x-indicator
+{
+	background: url("../images/greenIndicator.png") no-repeat top left;
+}
+
+.x-outgoingItem .x-tableBubble .x-tl
+{
+	background: url("../images/greenCurves.png") no-repeat top left;
+}
+
+.x-outgoingItem .x-tableBubble .x-tr
+{
+	background: url("../images/greenCurves.png") no-repeat top right;
+}
+
+.x-outgoingItem .x-tableBubble .x-head
+{
+	background: url("../images/greenCurves.png") no-repeat -10px 0;
+}
+
+.x-outgoingItem .x-tableBubble .x-message
+{
+	background: url("../images/greenBackground.png") repeat-y top left;
+}
+
+.x-outgoingItem .x-tableBubble .x-messageRight
+{
+	background: url("../images/greenBackground.png") repeat-y top right;
+}
+
+.x-outgoingItem .x-tableBubble .x-bl
+{
+	background: url("../images/greenCurves.png") no-repeat bottom left;
+}
+
+.x-outgoingItem .x-tableBubble .x-br
+{
+	background: url("../images/greenCurves.png") no-repeat bottom right;
+}
+
+.x-outgoingItem .x-followUp
+{
+	background-color: #e2efc4;
+	border-bottom: 1px solid #fff;
+}
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/Out Red.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/Out Red.css
new file mode 100644
--- /dev/null
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/Out Red.css	
@@ -0,0 +1,51 @@
+
+.x-outgoingItem .x-timeStamp
+{
+	color: #f88f8f;
+}
+
+.x-outgoingItem .x-myBubble .x-indicator
+{
+	background: url("../images/redIndicator.png") no-repeat top left;
+}
+
+.x-outgoingItem .x-tableBubble .x-tl
+{
+	background: url("../images/redCurves.png") no-repeat top left;
+}
+
+.x-outgoingItem .x-tableBubble .x-tr
+{
+	background: url("../images/redCurves.png") no-repeat top right;
+}
+
+.x-outgoingItem .x-tableBubble .x-head
+{
+	background: url("../images/redCurves.png") no-repeat -10px 0;
+}
+
+.x-outgoingItem .x-tableBubble .x-message
+{
+	background: url("../images/redBackground.png") repeat-y top left;
+}
+
+.x-outgoingItem .x-tableBubble .x-messageRight
+{
+	background: url("../images/redBackground.png") repeat-y top right;
+}
+
+.x-outgoingItem .x-tableBubble .x-bl
+{
+	background: url("../images/redCurves.png") no-repeat bottom left;
+}
+
+.x-outgoingItem .x-tableBubble .x-br
+{
+	background: url("../images/redCurves.png") no-repeat bottom right;
+}
+
+.x-outgoingItem .x-followUp
+{
+	background-color: #ffdada;
+	border-bottom: 1px solid #fff;
+}
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/Out Steel.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/Out Steel.css
new file mode 100644
--- /dev/null
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/Out Steel.css	
@@ -0,0 +1,51 @@
+
+.x-outgoingItem .x-timeStamp
+{
+	color: #a9a9a9;
+}
+
+.x-outgoingItem .x-myBubble .x-indicator
+{
+	background: url("../images/steelIndicator.png") no-repeat top left;
+}
+
+.x-outgoingItem .x-tableBubble .x-tl
+{
+	background: url("../images/steelCurves.png") no-repeat top left;
+}
+
+.x-outgoingItem .x-tableBubble .x-tr
+{
+	background: url("../images/steelCurves.png") no-repeat top right;
+}
+
+.x-outgoingItem .x-tableBubble .x-head
+{
+	background: url("../images/steelCurves.png") no-repeat -10px 0;
+}
+
+.x-outgoingItem .x-tableBubble .x-message
+{
+	background: url("../images/steelBackground.png") repeat-y top left;
+}
+
+.x-outgoingItem .x-tableBubble .x-messageRight
+{
+	background: url("../images/steelBackground.png") repeat-y top right;
+}
+
+.x-outgoingItem .x-tableBubble .x-bl
+{
+	background: url("../images/steelCurves.png") no-repeat bottom left;
+}
+
+.x-outgoingItem .x-tableBubble .x-br
+{
+	background: url("../images/steelCurves.png") no-repeat bottom right;
+}
+
+.x-outgoingItem .x-followUp
+{
+	background-color: #ececec;
+	border-bottom: 1px solid #fff;
+}
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/Out Yellow.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/Out Yellow.css
new file mode 100644
--- /dev/null
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Colors/Out Yellow.css	
@@ -0,0 +1,51 @@
+
+.x-outgoingItem .x-timeStamp
+{
+	color: #bdb410;
+}
+
+.x-outgoingItem .x-myBubble .x-indicator
+{
+	background: url("../images/yellowIndicator.png") no-repeat top left;
+}
+
+.x-outgoingItem .x-tableBubble .x-tl
+{
+	background: url("../images/yellowCurves.png") no-repeat top left;
+}
+
+.x-outgoingItem .x-tableBubble .x-tr
+{
+	background: url("../images/yellowCurves.png") no-repeat top right;
+}
+
+.x-outgoingItem .x-tableBubble .x-head
+{
+	background: url("../images/yellowCurves.png") no-repeat -10px 0;
+}
+
+.x-outgoingItem .x-tableBubble .x-message
+{
+	background: url("../images/yellowBackground.png") repeat-y top left;
+}
+
+.x-outgoingItem .x-tableBubble .x-messageRight
+{
+	background: url("../images/yellowBackground.png") repeat-y top right;
+}
+
+.x-outgoingItem .x-tableBubble .x-bl
+{
+	background: url("../images/yellowCurves.png") no-repeat bottom left;
+}
+
+.x-outgoingItem .x-tableBubble .x-br
+{
+	background: url("../images/yellowCurves.png") no-repeat bottom right;
+}
+
+.x-outgoingItem .x-followUp
+{
+	background-color: #f4f0a7;
+	border-bottom: 1px solid #fff;
+}
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Blue on Green.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Blue on Green.css
--- a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Blue on Green.css	
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Blue on Green.css	
@@ -1,110 +1,7 @@
 @import url("../Styles/main.css");
 
-/* outgoing */
-
-.x-outgoingItem .x-timeStamp
-{
-	color: #7fc5f8;
-}
-
-.x-outgoingItem .x-myBubble .x-indicator
-{
-	background: url("../images/blueIndicator.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tl
-{
-	background: url("../images/blueCurves.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tr
-{
-	background: url("../images/blueCurves.png") no-repeat top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-head
-{
-	background: url("../images/blueCurves.png") no-repeat -10px 0;
-}
-
-.x-outgoingItem .x-tableBubble .x-message
-{
-	background: url("../images/blueBackground.png") repeat-y top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/blueBackground.png") repeat-y top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-bl
-{
-	background: url("../images/blueCurves.png") no-repeat bottom left;
-}
-
-.x-outgoingItem .x-tableBubble .x-br
-{
-	background: url("../images/blueCurves.png") no-repeat bottom right;
-}
-
-.x-outgoingItem .x-followUp
-{
-	background-color: #ddf0fe;
-	border-bottom: 1px solid #fff;
-}
-
-/*incoming */
-
-.x-incomingItem .x-myBubble .x-indicator
-{
-	background: url("../images/greenIndicator.png") no-repeat top left;
-}
-
-.x-incomingItem .x-timeStamp
-{
-	color: #9ecf35;
-}
-
-.x-incomingItem .x-tableBubble .x-tl
-{
-	background: url("../images/greenCurves.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tr
-{
-	background: url("../images/greenCurves.png") no-repeat top right;
-}
-
-.x-incomingItem .x-tableBubble .x-head
-{
-	background: url("../images/greenCurves.png") no-repeat -10px 0;
-}
-
-.x-incomingItem .x-tableBubble .x-message
-{
-	background: url("../images/greenBackground.png") repeat-y top left;
-}
-
-.x-incomingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/greenBackground.png") repeat-y top right;
-}
-
-.x-incomingItem .x-tableBubble .x-bl
-{
-	background: url("../images/greenCurves.png") no-repeat bottom left;
-}
-
-.x-incomingItem .x-tableBubble .x-br
-{
-	background: url("../images/greenCurves.png") no-repeat bottom right;
-}
-
-.x-incomingItem .x-followUp
-{
-	background-color: #e2efc4;
-	border-bottom: 1px solid #fff;
-}
+@import url("../Colors/Out Blue.css");
+@import url("../Colors/In Green.css");
 
 .mention,
 .firstFocus .x-timeStamp:before
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Blue on Red.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Blue on Red.css
--- a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Blue on Red.css	
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Blue on Red.css	
@@ -1,110 +1,7 @@
 @import url("../Styles/main.css");
 
-/* outgoing */
-
-.x-outgoingItem .x-timeStamp
-{
-	color: #7fc5f8;
-}
-
-.x-outgoingItem .x-myBubble .x-indicator
-{
-	background: url("../images/blueIndicator.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tl
-{
-	background: url("../images/blueCurves.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tr
-{
-	background: url("../images/blueCurves.png") no-repeat top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-head
-{
-	background: url("../images/blueCurves.png") no-repeat -10px 0;
-}
-
-.x-outgoingItem .x-tableBubble .x-message
-{
-	background: url("../images/blueBackground.png") repeat-y top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/blueBackground.png") repeat-y top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-bl
-{
-	background: url("../images/blueCurves.png") no-repeat bottom left;
-}
-
-.x-outgoingItem .x-tableBubble .x-br
-{
-	background: url("../images/blueCurves.png") no-repeat bottom right;
-}
-
-.x-outgoingItem .x-followUp
-{
-	background-color: #ddf0fe;
-	border-bottom: 1px solid #fff;
-}
-
-/*incoming */
-
-.x-incomingItem .x-timeStamp
-{
-	color: #f88f8f;
-}
-
-.x-incomingItem .x-myBubble .x-indicator
-{
-	background: url("../images/redIndicator.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tl
-{
-	background: url("../images/redCurves.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tr
-{
-	background: url("../images/redCurves.png") no-repeat top right;
-}
-
-.x-incomingItem .x-tableBubble .x-head
-{
-	background: url("../images/redCurves.png") no-repeat -10px 0;
-}
-
-.x-incomingItem .x-tableBubble .x-message
-{
-	background: url("../images/redBackground.png") repeat-y top left;
-}
-
-.x-incomingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/redBackground.png") repeat-y top right;
-}
-
-.x-incomingItem .x-tableBubble .x-bl
-{
-	background: url("../images/redCurves.png") no-repeat bottom left;
-}
-
-.x-incomingItem .x-tableBubble .x-br
-{
-	background: url("../images/redCurves.png") no-repeat bottom right;
-}
-
-.x-incomingItem .x-followUp
-{
-	background-color: #ffdada;
-	border-bottom: 1px solid #fff;
-}
+@import url("../Colors/Out Blue.css");
+@import url("../Colors/In Red.css");
 
 .mention,
 .firstFocus .x-timeStamp:before
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Blue on Steel.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Blue on Steel.css
--- a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Blue on Steel.css	
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Blue on Steel.css	
@@ -1,110 +1,7 @@
 @import url("../Styles/main.css");
 
-/* outgoing */
-
-.x-outgoingItem .x-timeStamp
-{
-	color: #7fc5f8;
-}
-
-.x-outgoingItem .x-myBubble .x-indicator
-{
-	background: url("../images/blueIndicator.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tl
-{
-	background: url("../images/blueCurves.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tr
-{
-	background: url("../images/blueCurves.png") no-repeat top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-head
-{
-	background: url("../images/blueCurves.png") no-repeat -10px 0;
-}
-
-.x-outgoingItem .x-tableBubble .x-message
-{
-	background: url("../images/blueBackground.png") repeat-y top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/blueBackground.png") repeat-y top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-bl
-{
-	background: url("../images/blueCurves.png") no-repeat bottom left;
-}
-
-.x-outgoingItem .x-tableBubble .x-br
-{
-	background: url("../images/blueCurves.png") no-repeat bottom right;
-}
-
-.x-outgoingItem .x-followUp
-{
-	background-color: #ddf0fe;
-	border-bottom: 1px solid #fff;
-}
-
-/*incoming */
-
-.x-incomingItem .x-timeStamp
-{
-	color: #a9a9a9;
-}
-
-.x-incomingItem .x-myBubble .x-indicator
-{
-	background: url("../images/steelIndicator.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tl
-{
-	background: url("../images/steelCurves.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tr
-{
-	background: url("../images/steelCurves.png") no-repeat top right;
-}
-
-.x-incomingItem .x-tableBubble .x-head
-{
-	background: url("../images/steelCurves.png") no-repeat -10px 0;
-}
-
-.x-incomingItem .x-tableBubble .x-message
-{
-	background: url("../images/steelBackground.png") repeat-y top left;
-}
-
-.x-incomingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/steelBackground.png") repeat-y top right;
-}
-
-.x-incomingItem .x-tableBubble .x-bl
-{
-	background: url("../images/steelCurves.png") no-repeat bottom left;
-}
-
-.x-incomingItem .x-tableBubble .x-br
-{
-	background: url("../images/steelCurves.png") no-repeat bottom right;
-}
-
-.x-incomingItem .x-followUp
-{
-	background-color: #ececec;
-	border-bottom: 1px solid #fff;
-}
+@import url("../Colors/Out Blue.css");
+@import url("../Colors/In Steel.css");
 
 .mention,
 .firstFocus .x-timeStamp:before
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Blue on Yellow.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Blue on Yellow.css
--- a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Blue on Yellow.css	
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Blue on Yellow.css	
@@ -1,110 +1,7 @@
 @import url("../Styles/main.css");
 
-/* outgoing */
-
-.x-outgoingItem .x-timeStamp
-{
-	color: #7fc5f8;
-}
-
-.x-outgoingItem .x-myBubble .x-indicator
-{
-	background: url("../images/blueIndicator.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tl
-{
-	background: url("../images/blueCurves.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tr
-{
-	background: url("../images/blueCurves.png") no-repeat top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-head
-{
-	background: url("../images/blueCurves.png") no-repeat -10px 0;
-}
-
-.x-outgoingItem .x-tableBubble .x-message
-{
-	background: url("../images/blueBackground.png") repeat-y top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/blueBackground.png") repeat-y top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-bl
-{
-	background: url("../images/blueCurves.png") no-repeat bottom left;
-}
-
-.x-outgoingItem .x-tableBubble .x-br
-{
-	background: url("../images/blueCurves.png") no-repeat bottom right;
-}
-
-.x-outgoingItem .x-followUp
-{
-	background-color: #ddf0fe;
-	border-bottom: 1px solid #fff;
-}
-
-/*incoming */
-
-.x-incomingItem .x-timeStamp
-{
-	color: #bdb410;
-}
-
-.x-incomingItem .x-myBubble .x-indicator
-{
-	background: url("../images/yellowIndicator.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tl
-{
-	background: url("../images/yellowCurves.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tr
-{
-	background: url("../images/yellowCurves.png") no-repeat top right;
-}
-
-.x-incomingItem .x-tableBubble .x-head
-{
-	background: url("../images/yellowCurves.png") no-repeat -10px 0;
-}
-
-.x-incomingItem .x-tableBubble .x-message
-{
-	background: url("../images/yellowBackground.png") repeat-y top left;
-}
-
-.x-incomingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/yellowBackground.png") repeat-y top right;
-}
-
-.x-incomingItem .x-tableBubble .x-bl
-{
-	background: url("../images/yellowCurves.png") no-repeat bottom left;
-}
-
-.x-incomingItem .x-tableBubble .x-br
-{
-	background: url("../images/yellowCurves.png") no-repeat bottom right;
-}
-
-.x-incomingItem .x-followUp
-{
-	background-color: #f4f0a7;
-	border-bottom: 1px solid #fff;
-}
+@import url("../Colors/Out Blue.css");
+@import url("../Colors/In Yellow.css");
 
 .mention,
 .firstFocus .x-timeStamp:before
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Green on Blue.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Green on Blue.css
--- a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Green on Blue.css	
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Green on Blue.css	
@@ -1,110 +1,7 @@
 @import url("../Styles/main.css");
 
-/* outgoing */
-
-.x-outgoingItem .x-timeStamp
-{
-	color: #9ecf35;
-}
-
-.x-outgoingItem .x-myBubble .x-indicator
-{
-	background: url("../images/greenIndicator.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tl
-{
-	background: url("../images/greenCurves.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tr
-{
-	background: url("../images/greenCurves.png") no-repeat top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-head
-{
-	background: url("../images/greenCurves.png") no-repeat -10px 0;
-}
-
-.x-outgoingItem .x-tableBubble .x-message
-{
-	background: url("../images/greenBackground.png") repeat-y top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/greenBackground.png") repeat-y top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-bl
-{
-	background: url("../images/greenCurves.png") no-repeat bottom left;
-}
-
-.x-outgoingItem .x-tableBubble .x-br
-{
-	background: url("../images/greenCurves.png") no-repeat bottom right;
-}
-
-.x-outgoingItem .x-followUp
-{
-	background-color: #e2efc4;
-	border-bottom: 1px solid #fff;
-}
-
-/*incoming */
-
-.x-incomingItem .x-timeStamp
-{
-	color: #7fc5f8;
-}
-
-.x-incomingItem .x-myBubble .x-indicator
-{
-	background: url("../images/blueIndicator.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tl
-{
-	background: url("../images/blueCurves.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tr
-{
-	background: url("../images/blueCurves.png") no-repeat top right;
-}
-
-.x-incomingItem .x-tableBubble .x-head
-{
-	background: url("../images/blueCurves.png") no-repeat -10px 0;
-}
-
-.x-incomingItem .x-tableBubble .x-message
-{
-	background: url("../images/blueBackground.png") repeat-y top left;
-}
-
-.x-incomingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/blueBackground.png") repeat-y top right;
-}
-
-.x-incomingItem .x-tableBubble .x-bl
-{
-	background: url("../images/blueCurves.png") no-repeat bottom left;
-}
-
-.x-incomingItem .x-tableBubble .x-br
-{
-	background: url("../images/blueCurves.png") no-repeat bottom right;
-}
-
-.x-incomingItem .x-followUp
-{
-	background-color: #ddf0fe;
-	border-bottom: 1px solid #fff;
-}
+@import url("../Colors/Out Green.css");
+@import url("../Colors/In Blue.css");
 
 .mention,
 .firstFocus .x-timeStamp:before
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Green on Red.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Green on Red.css
--- a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Green on Red.css	
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Green on Red.css	
@@ -1,110 +1,7 @@
 @import url("../Styles/main.css");
 
-/* outgoing */
-
-.x-outgoingItem .x-timeStamp
-{
-	color: #9ecf35;
-}
-
-.x-outgoingItem .x-myBubble .x-indicator
-{
-	background: url("../images/greenIndicator.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tl
-{
-	background: url("../images/greenCurves.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tr
-{
-	background: url("../images/greenCurves.png") no-repeat top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-head
-{
-	background: url("../images/greenCurves.png") no-repeat -10px 0;
-}
-
-.x-outgoingItem .x-tableBubble .x-message
-{
-	background: url("../images/greenBackground.png") repeat-y top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/greenBackground.png") repeat-y top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-bl
-{
-	background: url("../images/greenCurves.png") no-repeat bottom left;
-}
-
-.x-outgoingItem .x-tableBubble .x-br
-{
-	background: url("../images/greenCurves.png") no-repeat bottom right;
-}
-
-.x-outgoingItem .x-followUp
-{
-	background-color: #e2efc4;
-	border-bottom: 1px solid #fff;
-}
-
-/*incoming */
-
-.x-incomingItem .x-timeStamp
-{
-	color: #f88f8f;
-}
-
-.x-incomingItem .x-myBubble .x-indicator
-{
-	background: url("../images/redIndicator.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tl
-{
-	background: url("../images/redCurves.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tr
-{
-	background: url("../images/redCurves.png") no-repeat top right;
-}
-
-.x-incomingItem .x-tableBubble .x-head
-{
-	background: url("../images/redCurves.png") no-repeat -10px 0;
-}
-
-.x-incomingItem .x-tableBubble .x-message
-{
-	background: url("../images/redBackground.png") repeat-y top left;
-}
-
-.x-incomingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/redBackground.png") repeat-y top right;
-}
-
-.x-incomingItem .x-tableBubble .x-bl
-{
-	background: url("../images/redCurves.png") no-repeat bottom left;
-}
-
-.x-incomingItem .x-tableBubble .x-br
-{
-	background: url("../images/redCurves.png") no-repeat bottom right;
-}
-
-.x-incomingItem .x-followUp
-{
-	background-color: #ffdada;
-	border-bottom: 1px solid #fff;
-}
+@import url("../Colors/Out Green.css");
+@import url("../Colors/In Red.css");
 
 .mention,
 .firstFocus .x-timeStamp:before
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Green on Steel.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Green on Steel.css
--- a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Green on Steel.css	
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Green on Steel.css	
@@ -1,110 +1,7 @@
 @import url("../Styles/main.css");
 
-/* outgoing */
-
-.x-outgoingItem .x-timeStamp
-{
-	color: #9ecf35;
-}
-
-.x-outgoingItem .x-myBubble .x-indicator
-{
-	background: url("../images/greenIndicator.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tl
-{
-	background: url("../images/greenCurves.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tr
-{
-	background: url("../images/greenCurves.png") no-repeat top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-head
-{
-	background: url("../images/greenCurves.png") no-repeat -10px 0;
-}
-
-.x-outgoingItem .x-tableBubble .x-message
-{
-	background: url("../images/greenBackground.png") repeat-y top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/greenBackground.png") repeat-y top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-bl
-{
-	background: url("../images/greenCurves.png") no-repeat bottom left;
-}
-
-.x-outgoingItem .x-tableBubble .x-br
-{
-	background: url("../images/greenCurves.png") no-repeat bottom right;
-}
-
-.x-outgoingItem .x-followUp
-{
-	background-color: #e2efc4;
-	border-bottom: 1px solid #fff;
-}
-
-/*incoming */
-
-.x-incomingItem .x-timeStamp
-{
-	color: #a9a9a9;
-}
-
-.x-incomingItem .x-myBubble .x-indicator
-{
-	background: url("../images/steelIndicator.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tl
-{
-	background: url("../images/steelCurves.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tr
-{
-	background: url("../images/steelCurves.png") no-repeat top right;
-}
-
-.x-incomingItem .x-tableBubble .x-head
-{
-	background: url("../images/steelCurves.png") no-repeat -10px 0;
-}
-
-.x-incomingItem .x-tableBubble .x-message
-{
-	background: url("../images/steelBackground.png") repeat-y top left;
-}
-
-.x-incomingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/steelBackground.png") repeat-y top right;
-}
-
-.x-incomingItem .x-tableBubble .x-bl
-{
-	background: url("../images/steelCurves.png") no-repeat bottom left;
-}
-
-.x-incomingItem .x-tableBubble .x-br
-{
-	background: url("../images/steelCurves.png") no-repeat bottom right;
-}
-
-.x-incomingItem .x-followUp
-{
-	background-color: #ececec;
-	border-bottom: 1px solid #fff;
-}
+@import url("../Colors/Out Green.css");
+@import url("../Colors/In Steel.css");
 
 .mention,
 .firstFocus .x-timeStamp:before
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Green on Yellow.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Green on Yellow.css
--- a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Green on Yellow.css	
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Green on Yellow.css	
@@ -1,110 +1,7 @@
 @import url("../Styles/main.css");
 
-/* outgoing */
-
-.x-outgoingItem .x-timeStamp
-{
-	color: #9ecf35;
-}
-
-.x-outgoingItem .x-myBubble .x-indicator
-{
-	background: url("../images/greenIndicator.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tl
-{
-	background: url("../images/greenCurves.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tr
-{
-	background: url("../images/greenCurves.png") no-repeat top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-head
-{
-	background: url("../images/greenCurves.png") no-repeat -10px 0;
-}
-
-.x-outgoingItem .x-tableBubble .x-message
-{
-	background: url("../images/greenBackground.png") repeat-y top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/greenBackground.png") repeat-y top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-bl
-{
-	background: url("../images/greenCurves.png") no-repeat bottom left;
-}
-
-.x-outgoingItem .x-tableBubble .x-br
-{
-	background: url("../images/greenCurves.png") no-repeat bottom right;
-}
-
-.x-outgoingItem .x-followUp
-{
-	background-color: #e2efc4;
-	border-bottom: 1px solid #fff;
-}
-
-/*incoming */
-
-.x-incomingItem .x-timeStamp
-{
-	color: #bdb410;
-}
-
-.x-incomingItem .x-myBubble .x-indicator
-{
-	background: url("../images/yellowIndicator.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tl
-{
-	background: url("../images/yellowCurves.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tr
-{
-	background: url("../images/yellowCurves.png") no-repeat top right;
-}
-
-.x-incomingItem .x-tableBubble .x-head
-{
-	background: url("../images/yellowCurves.png") no-repeat -10px 0;
-}
-
-.x-incomingItem .x-tableBubble .x-message
-{
-	background: url("../images/yellowBackground.png") repeat-y top left;
-}
-
-.x-incomingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/yellowBackground.png") repeat-y top right;
-}
-
-.x-incomingItem .x-tableBubble .x-bl
-{
-	background: url("../images/yellowCurves.png") no-repeat bottom left;
-}
-
-.x-incomingItem .x-tableBubble .x-br
-{
-	background: url("../images/yellowCurves.png") no-repeat bottom right;
-}
-
-.x-incomingItem .x-followUp
-{
-	background-color: #f4f0a7;
-	border-bottom: 1px solid #fff;
-}
+@import url("../Colors/Out Green.css");
+@import url("../Colors/In Yellow.css");
 
 .mention,
 .firstFocus .x-timeStamp:before
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Red on Blue.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Red on Blue.css
--- a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Red on Blue.css	
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Red on Blue.css	
@@ -1,111 +1,8 @@
 @import url("../Styles/main.css");
 
-/* outgoing */
+@import url("../Colors/Out Red.css");
+@import url("../Colors/In Blue.css");
 
-.x-outgoingItem .x-timeStamp
-{
-	color: #f88f8f;
-}
-
-.x-outgoingItem .x-myBubble .x-indicator
-{
-	background: url("../images/redIndicator.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tl
-{
-	background: url("../images/redCurves.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tr
-{
-	background: url("../images/redCurves.png") no-repeat top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-head
-{
-	background: url("../images/redCurves.png") no-repeat -10px 0;
-}
-
-.x-outgoingItem .x-tableBubble .x-message
-{
-	background: url("../images/redBackground.png") repeat-y top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/redBackground.png") repeat-y top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-bl
-{
-	background: url("../images/redCurves.png") no-repeat bottom left;
-}
-
-.x-outgoingItem .x-tableBubble .x-br
-{
-	background: url("../images/redCurves.png") no-repeat bottom right;
-}
-
-.x-outgoingItem .x-followUp
-{
-	background-color: #ffdada;
-	border-bottom: 1px solid #fff;
-}
-
-
-/*incoming */
-
-.x-incomingItem .x-timeStamp
-{
-	color: #7fc5f8;
-}
-
-.x-incomingItem .x-myBubble .x-indicator
-{
-	background: url("../images/blueIndicator.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tl
-{
-	background: url("../images/blueCurves.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tr
-{
-	background: url("../images/blueCurves.png") no-repeat top right;
-}
-
-.x-incomingItem .x-tableBubble .x-head
-{
-	background: url("../images/blueCurves.png") no-repeat -10px 0;
-}
-
-.x-incomingItem .x-tableBubble .x-message
-{
-	background: url("../images/blueBackground.png") repeat-y top left;
-}
-
-.x-incomingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/blueBackground.png") repeat-y top right;
-}
-
-.x-incomingItem .x-tableBubble .x-bl
-{
-	background: url("../images/blueCurves.png") no-repeat bottom left;
-}
-
-.x-incomingItem .x-tableBubble .x-br
-{
-	background: url("../images/blueCurves.png") no-repeat bottom right;
-}
-
-.x-incomingItem .x-followUp
-{
-	background-color: #ddf0fe;
-	border-bottom: 1px solid #fff;
-}
 .mention,
 .firstFocus .x-timeStamp:before
 {
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Red on Green.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Red on Green.css
--- a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Red on Green.css	
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Red on Green.css	
@@ -1,115 +1,7 @@
 @import url("../Styles/main.css");
 
-/* outgoing */
-
-.x-outgoingItem .x-timeStamp
-{
-	color: #f88f8f;
-}
-
-.x-outgoingItem .x-myBubble .x-indicator
-{
-	background: url("../images/redIndicator.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tl
-{
-	background: url("../images/redCurves.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tr
-{
-	background: url("../images/redCurves.png") no-repeat top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-head
-{
-	background: url("../images/redCurves.png") no-repeat -10px 0;
-}
-
-.x-outgoingItem .x-tableBubble .x-message
-{
-	background: url("../images/redBackground.png") repeat-y top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/redBackground.png") repeat-y top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-bl
-{
-	background: url("../images/redCurves.png") no-repeat bottom left;
-}
-
-.x-outgoingItem .x-tableBubble .x-br
-{
-	background: url("../images/redCurves.png") no-repeat bottom right;
-}
-
-.x-outgoingItem .x-followUp
-{
-	background-color: #ffdada;
-	border-bottom: 1px solid #fff;
-}
-
-/*incoming */
-
-.x-incomingItem .x-timeStamp
-{
-	color: #9ecf35;
-}
-
-.x-incomingItem .x-myBubble .x-indicator
-{
-	background: url("../images/greenIndicator.png") no-repeat top left;
-}
-
-.x-incomingItem .x-timeStamp
-{
-	color: #9ecf35;
-}
-
-.x-incomingItem .x-tableBubble .x-tl
-{
-	background: url("../images/greenCurves.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tr
-{
-	background: url("../images/greenCurves.png") no-repeat top right;
-}
-
-.x-incomingItem .x-tableBubble .x-head
-{
-	background: url("../images/greenCurves.png") no-repeat -10px 0;
-}
-
-.x-incomingItem .x-tableBubble .x-message
-{
-	background: url("../images/greenBackground.png") repeat-y top left;
-}
-
-.x-incomingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/greenBackground.png") repeat-y top right;
-}
-
-.x-incomingItem .x-tableBubble .x-bl
-{
-	background: url("../images/greenCurves.png") no-repeat bottom left;
-}
-
-.x-incomingItem .x-tableBubble .x-br
-{
-	background: url("../images/greenCurves.png") no-repeat bottom right;
-}
-
-.x-incomingItem .x-followUp
-{
-	background-color: #e2efc4;
-	border-bottom: 1px solid #fff;
-}
+@import url("../Colors/Out Red.css");
+@import url("../Colors/In Green.css");
 
 .mention,
 .firstFocus .x-timeStamp:before
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Red on Steel.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Red on Steel.css
--- a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Red on Steel.css	
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Red on Steel.css	
@@ -1,112 +1,7 @@
 @import url("../Styles/main.css");
 
-/* outgoing */
-
-.x-outgoingItem .x-timeStamp
-{
-	color: #f88f8f;
-}
-
-.x-outgoingItem .x-myBubble .x-indicator
-{
-	background: url("../images/redIndicator.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tl
-{
-	background: url("../images/redCurves.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tr
-{
-	background: url("../images/redCurves.png") no-repeat top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-head
-{
-	background: url("../images/redCurves.png") no-repeat -10px 0;
-}
-
-.x-outgoingItem .x-tableBubble .x-message
-{
-	background: url("../images/redBackground.png") repeat-y top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/redBackground.png") repeat-y top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-bl
-{
-	background: url("../images/redCurves.png") no-repeat bottom left;
-}
-
-.x-outgoingItem .x-tableBubble .x-br
-{
-	background: url("../images/redCurves.png") no-repeat bottom right;
-}
-
-.x-outgoingItem .x-followUp
-{
-	background-color: #ffdada;
-	border-bottom: 1px solid #fff;
-}
-
-
-
-/*incoming */
-
-.x-incomingItem .x-timeStamp
-{
-	color: #a9a9a9;
-}
-
-.x-incomingItem .x-myBubble .x-indicator
-{
-	background: url("../images/steelIndicator.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tl
-{
-	background: url("../images/steelCurves.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tr
-{
-	background: url("../images/steelCurves.png") no-repeat top right;
-}
-
-.x-incomingItem .x-tableBubble .x-head
-{
-	background: url("../images/steelCurves.png") no-repeat -10px 0;
-}
-
-.x-incomingItem .x-tableBubble .x-message
-{
-	background: url("../images/steelBackground.png") repeat-y top left;
-}
-
-.x-incomingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/steelBackground.png") repeat-y top right;
-}
-
-.x-incomingItem .x-tableBubble .x-bl
-{
-	background: url("../images/steelCurves.png") no-repeat bottom left;
-}
-
-.x-incomingItem .x-tableBubble .x-br
-{
-	background: url("../images/steelCurves.png") no-repeat bottom right;
-}
-
-.x-incomingItem .x-followUp
-{
-	background-color: #ececec;
-	border-bottom: 1px solid #fff;
-}
+@import url("../Colors/Out Red.css");
+@import url("../Colors/In Steel.css");
 
 .mention,
 .firstFocus .x-timeStamp:before
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Red on Yellow.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Red on Yellow.css
--- a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Red on Yellow.css	
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Red on Yellow.css	
@@ -1,112 +1,7 @@
 @import url("../Styles/main.css");
 
-/* outgoing */
-
-.x-outgoingItem .x-timeStamp
-{
-	color: #f88f8f;
-}
-
-.x-outgoingItem .x-myBubble .x-indicator
-{
-	background: url("../images/redIndicator.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tl
-{
-	background: url("../images/redCurves.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tr
-{
-	background: url("../images/redCurves.png") no-repeat top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-head
-{
-	background: url("../images/redCurves.png") no-repeat -10px 0;
-}
-
-.x-outgoingItem .x-tableBubble .x-message
-{
-	background: url("../images/redBackground.png") repeat-y top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/redBackground.png") repeat-y top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-bl
-{
-	background: url("../images/redCurves.png") no-repeat bottom left;
-}
-
-.x-outgoingItem .x-tableBubble .x-br
-{
-	background: url("../images/redCurves.png") no-repeat bottom right;
-}
-
-.x-outgoingItem .x-followUp
-{
-	background-color: #ffdada;
-	border-bottom: 1px solid #fff;
-}
-
-
-
-/*incoming */
-
-.x-incomingItem .x-timeStamp
-{
-	color: #bdb410;
-}
-
-.x-incomingItem .x-myBubble .x-indicator
-{
-	background: url("../images/yellowIndicator.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tl
-{
-	background: url("../images/yellowCurves.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tr
-{
-	background: url("../images/yellowCurves.png") no-repeat top right;
-}
-
-.x-incomingItem .x-tableBubble .x-head
-{
-	background: url("../images/yellowCurves.png") no-repeat -10px 0;
-}
-
-.x-incomingItem .x-tableBubble .x-message
-{
-	background: url("../images/yellowBackground.png") repeat-y top left;
-}
-
-.x-incomingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/yellowBackground.png") repeat-y top right;
-}
-
-.x-incomingItem .x-tableBubble .x-bl
-{
-	background: url("../images/yellowCurves.png") no-repeat bottom left;
-}
-
-.x-incomingItem .x-tableBubble .x-br
-{
-	background: url("../images/yellowCurves.png") no-repeat bottom right;
-}
-
-.x-incomingItem .x-followUp
-{
-	background-color: #f4f0a7;
-	border-bottom: 1px solid #fff;
-}
+@import url("../Colors/Out Red.css");
+@import url("../Colors/In Yellow.css");
 
 .mention,
 .firstFocus .x-timeStamp:before
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Steel on Blue.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Steel on Blue.css
--- a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Steel on Blue.css	
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Steel on Blue.css	
@@ -1,111 +1,7 @@
 @import url("../Styles/main.css");
 
-/* outgoing */
-
-.x-outgoingItem .x-timeStamp
-{
-	color: #a9a9a9;
-}
-
-.x-outgoingItem .x-myBubble .x-indicator
-{
-	background: url("../images/steelIndicator.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tl
-{
-	background: url("../images/steelCurves.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tr
-{
-	background: url("../images/steelCurves.png") no-repeat top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-head
-{
-	background: url("../images/steelCurves.png") no-repeat -10px 0;
-}
-
-.x-outgoingItem .x-tableBubble .x-message
-{
-	background: url("../images/steelBackground.png") repeat-y top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/steelBackground.png") repeat-y top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-bl
-{
-	background: url("../images/steelCurves.png") no-repeat bottom left;
-}
-
-.x-outgoingItem .x-tableBubble .x-br
-{
-	background: url("../images/steelCurves.png") no-repeat bottom right;
-}
-
-.x-outgoingItem .x-followUp
-{
-	background-color: #ececec;
-	border-bottom: 1px solid #fff;
-}
-
-
-/*incoming */
-
-.x-incomingItem .x-timeStamp
-{
-	color: #7fc5f8;
-}
-
-.x-incomingItem .x-myBubble .x-indicator
-{
-	background: url("../images/blueIndicator.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tl
-{
-	background: url("../images/blueCurves.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tr
-{
-	background: url("../images/blueCurves.png") no-repeat top right;
-}
-
-.x-incomingItem .x-tableBubble .x-head
-{
-	background: url("../images/blueCurves.png") no-repeat -10px 0;
-}
-
-.x-incomingItem .x-tableBubble .x-message
-{
-	background: url("../images/blueBackground.png") repeat-y top left;
-}
-
-.x-incomingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/blueBackground.png") repeat-y top right;
-}
-
-.x-incomingItem .x-tableBubble .x-bl
-{
-	background: url("../images/blueCurves.png") no-repeat bottom left;
-}
-
-.x-incomingItem .x-tableBubble .x-br
-{
-	background: url("../images/blueCurves.png") no-repeat bottom right;
-}
-
-.x-incomingItem .x-followUp
-{
-	background-color: #ddf0fe;
-	border-bottom: 1px solid #fff;
-}
+@import url("../Colors/Out Steel.css");
+@import url("../Colors/In Blue.css");
 
 .mention,
 .firstFocus .x-timeStamp:before
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Steel on Green.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Steel on Green.css
--- a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Steel on Green.css	
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Steel on Green.css	
@@ -1,116 +1,7 @@
 @import url("../Styles/main.css");
 
-/* outgoing */
-
-.x-outgoingItem .x-timeStamp
-{
-	color: #a9a9a9;
-}
-
-.x-outgoingItem .x-myBubble .x-indicator
-{
-	background: url("../images/steelIndicator.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tl
-{
-	background: url("../images/steelCurves.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tr
-{
-	background: url("../images/steelCurves.png") no-repeat top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-head
-{
-	background: url("../images/steelCurves.png") no-repeat -10px 0;
-}
-
-.x-outgoingItem .x-tableBubble .x-message
-{
-	background: url("../images/steelBackground.png") repeat-y top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/steelBackground.png") repeat-y top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-bl
-{
-	background: url("../images/steelCurves.png") no-repeat bottom left;
-}
-
-.x-outgoingItem .x-tableBubble .x-br
-{
-	background: url("../images/steelCurves.png") no-repeat bottom right;
-}
-
-.x-outgoingItem .x-followUp
-{
-	background-color: #ececec;
-	border-bottom: 1px solid #fff;
-}
-
-
-/*incoming */
-
-.x-incomingItem .x-timeStamp
-{
-	color: #9ecf35;
-}
-
-.x-incomingItem .x-myBubble .x-indicator
-{
-	background: url("../images/greenIndicator.png") no-repeat top left;
-}
-
-.x-incomingItem .x-timeStamp
-{
-	color: #9ecf35;
-}
-
-.x-incomingItem .x-tableBubble .x-tl
-{
-	background: url("../images/greenCurves.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tr
-{
-	background: url("../images/greenCurves.png") no-repeat top right;
-}
-
-.x-incomingItem .x-tableBubble .x-head
-{
-	background: url("../images/greenCurves.png") no-repeat -10px 0;
-}
-
-.x-incomingItem .x-tableBubble .x-message
-{
-	background: url("../images/greenBackground.png") repeat-y top left;
-}
-
-.x-incomingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/greenBackground.png") repeat-y top right;
-}
-
-.x-incomingItem .x-tableBubble .x-bl
-{
-	background: url("../images/greenCurves.png") no-repeat bottom left;
-}
-
-.x-incomingItem .x-tableBubble .x-br
-{
-	background: url("../images/greenCurves.png") no-repeat bottom right;
-}
-
-.x-incomingItem .x-followUp
-{
-	background-color: #e2efc4;
-	border-bottom: 1px solid #fff;
-}
+@import url("../Colors/Out Steel.css");
+@import url("../Colors/In Green.css");
 
 .mention,
 .firstFocus .x-timeStamp:before
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Steel on Red.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Steel on Red.css
--- a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Steel on Red.css	
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Steel on Red.css	
@@ -1,110 +1,8 @@
 @import url("../Styles/main.css");
 
-/* outgoing */
+@import url("../Colors/Out Steel.css");
+@import url("../Colors/In Red.css");
 
-.x-outgoingItem .x-timeStamp
-{
-	color: #a9a9a9;
-}
-
-.x-outgoingItem .x-myBubble .x-indicator
-{
-	background: url("../images/steelIndicator.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tl
-{
-	background: url("../images/steelCurves.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tr
-{
-	background: url("../images/steelCurves.png") no-repeat top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-head
-{
-	background: url("../images/steelCurves.png") no-repeat -10px 0;
-}
-
-.x-outgoingItem .x-tableBubble .x-message
-{
-	background: url("../images/steelBackground.png") repeat-y top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/steelBackground.png") repeat-y top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-bl
-{
-	background: url("../images/steelCurves.png") no-repeat bottom left;
-}
-
-.x-outgoingItem .x-tableBubble .x-br
-{
-	background: url("../images/steelCurves.png") no-repeat bottom right;
-}
-
-.x-outgoingItem .x-followUp
-{
-	background-color: #ececec;
-	border-bottom: 1px solid #fff;
-}
-
-/*incoming */
-
-.x-incomingItem .x-timeStamp
-{
-	color: #f88f8f;
-}
-
-.x-incomingItem .x-myBubble .x-indicator
-{
-	background: url("../images/redIndicator.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tl
-{
-	background: url("../images/redCurves.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tr
-{
-	background: url("../images/redCurves.png") no-repeat top right;
-}
-
-.x-incomingItem .x-tableBubble .x-head
-{
-	background: url("../images/redCurves.png") no-repeat -10px 0;
-}
-
-.x-incomingItem .x-tableBubble .x-message
-{
-	background: url("../images/redBackground.png") repeat-y top left;
-}
-
-.x-incomingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/redBackground.png") repeat-y top right;
-}
-
-.x-incomingItem .x-tableBubble .x-bl
-{
-	background: url("../images/redCurves.png") no-repeat bottom left;
-}
-
-.x-incomingItem .x-tableBubble .x-br
-{
-	background: url("../images/redCurves.png") no-repeat bottom right;
-}
-
-.x-incomingItem .x-followUp
-{
-	background-color: #ffdada;
-	border-bottom: 1px solid #fff;
-}
 .mention,
 .firstFocus .x-timeStamp:before
 {
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Steel on Yellow.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Steel on Yellow.css
--- a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Steel on Yellow.css	
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Steel on Yellow.css	
@@ -1,111 +1,7 @@
 @import url("../Styles/main.css");
 
-/* outgoing */
-
-.x-outgoingItem .x-timeStamp
-{
-	color: #a9a9a9;
-}
-
-.x-outgoingItem .x-myBubble .x-indicator
-{
-	background: url("../images/steelIndicator.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tl
-{
-	background: url("../images/steelCurves.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tr
-{
-	background: url("../images/steelCurves.png") no-repeat top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-head
-{
-	background: url("../images/steelCurves.png") no-repeat -10px 0;
-}
-
-.x-outgoingItem .x-tableBubble .x-message
-{
-	background: url("../images/steelBackground.png") repeat-y top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/steelBackground.png") repeat-y top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-bl
-{
-	background: url("../images/steelCurves.png") no-repeat bottom left;
-}
-
-.x-outgoingItem .x-tableBubble .x-br
-{
-	background: url("../images/steelCurves.png") no-repeat bottom right;
-}
-
-.x-outgoingItem .x-followUp
-{
-	background-color: #ececec;
-	border-bottom: 1px solid #fff;
-}
-
-
-/*incoming */
-
-.x-incomingItem .x-timeStamp
-{
-	color: #bdb410;
-}
-
-.x-incomingItem .x-myBubble .x-indicator
-{
-	background: url("../images/yellowIndicator.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tl
-{
-	background: url("../images/yellowCurves.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tr
-{
-	background: url("../images/yellowCurves.png") no-repeat top right;
-}
-
-.x-incomingItem .x-tableBubble .x-head
-{
-	background: url("../images/yellowCurves.png") no-repeat -10px 0;
-}
-
-.x-incomingItem .x-tableBubble .x-message
-{
-	background: url("../images/yellowBackground.png") repeat-y top left;
-}
-
-.x-incomingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/yellowBackground.png") repeat-y top right;
-}
-
-.x-incomingItem .x-tableBubble .x-bl
-{
-	background: url("../images/yellowCurves.png") no-repeat bottom left;
-}
-
-.x-incomingItem .x-tableBubble .x-br
-{
-	background: url("../images/yellowCurves.png") no-repeat bottom right;
-}
-
-.x-incomingItem .x-followUp
-{
-	background-color: #f4f0a7;
-	border-bottom: 1px solid #fff;
-}
+@import url("../Colors/Out Steel.css");
+@import url("../Colors/In Yellow.css");
 
 .mention,
 .firstFocus .x-timeStamp:before
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Yellow on Blue.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Yellow on Blue.css
--- a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Yellow on Blue.css	
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Yellow on Blue.css	
@@ -1,110 +1,7 @@
 @import url("../Styles/main.css");
 
-/* outgoing */
-
-.x-outgoingItem .x-timeStamp
-{
-	color: #bdb410;
-}
-
-.x-outgoingItem .x-myBubble .x-indicator
-{
-	background: url("../images/yellowIndicator.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tl
-{
-	background: url("../images/yellowCurves.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tr
-{
-	background: url("../images/yellowCurves.png") no-repeat top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-head
-{
-	background: url("../images/yellowCurves.png") no-repeat -10px 0;
-}
-
-.x-outgoingItem .x-tableBubble .x-message
-{
-	background: url("../images/yellowBackground.png") repeat-y top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/yellowBackground.png") repeat-y top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-bl
-{
-	background: url("../images/yellowCurves.png") no-repeat bottom left;
-}
-
-.x-outgoingItem .x-tableBubble .x-br
-{
-	background: url("../images/yellowCurves.png") no-repeat bottom right;
-}
-
-.x-outgoingItem .x-followUp
-{
-	background-color: #f4f0a7;
-	border-bottom: 1px solid #fff;
-}
-
-/*incoming */
-
-.x-incomingItem .x-timeStamp
-{
-	color: #7fc5f8;
-}
-
-.x-incomingItem .x-myBubble .x-indicator
-{
-	background: url("../images/blueIndicator.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tl
-{
-	background: url("../images/blueCurves.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tr
-{
-	background: url("../images/blueCurves.png") no-repeat top right;
-}
-
-.x-incomingItem .x-tableBubble .x-head
-{
-	background: url("../images/blueCurves.png") no-repeat -10px 0;
-}
-
-.x-incomingItem .x-tableBubble .x-message
-{
-	background: url("../images/blueBackground.png") repeat-y top left;
-}
-
-.x-incomingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/blueBackground.png") repeat-y top right;
-}
-
-.x-incomingItem .x-tableBubble .x-bl
-{
-	background: url("../images/blueCurves.png") no-repeat bottom left;
-}
-
-.x-incomingItem .x-tableBubble .x-br
-{
-	background: url("../images/blueCurves.png") no-repeat bottom right;
-}
-
-.x-incomingItem .x-followUp
-{
-	background-color: #ddf0fe;
-	border-bottom: 1px solid #fff;
-}
+@import url("../Colors/Out Yellow.css");
+@import url("../Colors/In Blue.css");
 
 .mention,
 .firstFocus .x-timeStamp:before
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Yellow on Green.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Yellow on Green.css
--- a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Yellow on Green.css	
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Yellow on Green.css	
@@ -1,115 +1,7 @@
 @import url("../Styles/main.css");
 
-/* outgoing */
-
-.x-outgoingItem .x-timeStamp
-{
-	color: #bdb410;
-}
-
-.x-outgoingItem .x-myBubble .x-indicator
-{
-	background: url("../images/yellowIndicator.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tl
-{
-	background: url("../images/yellowCurves.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tr
-{
-	background: url("../images/yellowCurves.png") no-repeat top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-head
-{
-	background: url("../images/yellowCurves.png") no-repeat -10px 0;
-}
-
-.x-outgoingItem .x-tableBubble .x-message
-{
-	background: url("../images/yellowBackground.png") repeat-y top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/yellowBackground.png") repeat-y top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-bl
-{
-	background: url("../images/yellowCurves.png") no-repeat bottom left;
-}
-
-.x-outgoingItem .x-tableBubble .x-br
-{
-	background: url("../images/yellowCurves.png") no-repeat bottom right;
-}
-
-.x-outgoingItem .x-followUp
-{
-	background-color: #f4f0a7;
-	border-bottom: 1px solid #fff;
-}
-
-/*incoming */
-
-.x-incomingItem .x-timeStamp
-{
-	color: #9ecf35;
-}
-
-.x-incomingItem .x-myBubble .x-indicator
-{
-	background: url("../images/greenIndicator.png") no-repeat top left;
-}
-
-.x-incomingItem .x-timeStamp
-{
-	color: #9ecf35;
-}
-
-.x-incomingItem .x-tableBubble .x-tl
-{
-	background: url("../images/greenCurves.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tr
-{
-	background: url("../images/greenCurves.png") no-repeat top right;
-}
-
-.x-incomingItem .x-tableBubble .x-head
-{
-	background: url("../images/greenCurves.png") no-repeat -10px 0;
-}
-
-.x-incomingItem .x-tableBubble .x-message
-{
-	background: url("../images/greenBackground.png") repeat-y top left;
-}
-
-.x-incomingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/greenBackground.png") repeat-y top right;
-}
-
-.x-incomingItem .x-tableBubble .x-bl
-{
-	background: url("../images/greenCurves.png") no-repeat bottom left;
-}
-
-.x-incomingItem .x-tableBubble .x-br
-{
-	background: url("../images/greenCurves.png") no-repeat bottom right;
-}
-
-.x-incomingItem .x-followUp
-{
-	background-color: #e2efc4;
-	border-bottom: 1px solid #fff;
-}
+@import url("../Colors/Out Yellow.css");
+@import url("../Colors/In Green.css");
 
 .mention,
 .firstFocus .x-timeStamp:before
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Yellow on Red.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Yellow on Red.css
--- a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Yellow on Red.css	
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Yellow on Red.css	
@@ -1,110 +1,7 @@
 @import url("../Styles/main.css");
 
-/* outgoing */
-
-.x-outgoingItem .x-timeStamp
-{
-	color: #bdb410;
-}
-
-.x-outgoingItem .x-myBubble .x-indicator
-{
-	background: url("../images/yellowIndicator.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tl
-{
-	background: url("../images/yellowCurves.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tr
-{
-	background: url("../images/yellowCurves.png") no-repeat top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-head
-{
-	background: url("../images/yellowCurves.png") no-repeat -10px 0;
-}
-
-.x-outgoingItem .x-tableBubble .x-message
-{
-	background: url("../images/yellowBackground.png") repeat-y top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/yellowBackground.png") repeat-y top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-bl
-{
-	background: url("../images/yellowCurves.png") no-repeat bottom left;
-}
-
-.x-outgoingItem .x-tableBubble .x-br
-{
-	background: url("../images/yellowCurves.png") no-repeat bottom right;
-}
-
-.x-outgoingItem .x-followUp
-{
-	background-color: #f4f0a7;
-	border-bottom: 1px solid #fff;
-}
-
-/*incoming */
-
-.x-incomingItem .x-timeStamp
-{
-	color: #f88f8f;
-}
-
-.x-incomingItem .x-myBubble .x-indicator
-{
-	background: url("../images/redIndicator.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tl
-{
-	background: url("../images/redCurves.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tr
-{
-	background: url("../images/redCurves.png") no-repeat top right;
-}
-
-.x-incomingItem .x-tableBubble .x-head
-{
-	background: url("../images/redCurves.png") no-repeat -10px 0;
-}
-
-.x-incomingItem .x-tableBubble .x-message
-{
-	background: url("../images/redBackground.png") repeat-y top left;
-}
-
-.x-incomingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/redBackground.png") repeat-y top right;
-}
-
-.x-incomingItem .x-tableBubble .x-bl
-{
-	background: url("../images/redCurves.png") no-repeat bottom left;
-}
-
-.x-incomingItem .x-tableBubble .x-br
-{
-	background: url("../images/redCurves.png") no-repeat bottom right;
-}
-
-.x-incomingItem .x-followUp
-{
-	background-color: #ffdada;
-	border-bottom: 1px solid #fff;
-}
+@import url("../Colors/Out Yellow.css");
+@import url("../Colors/In Red.css");
 
 .mention,
 .firstFocus .x-timeStamp:before
diff --git a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Yellow on Steel.css b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Yellow on Steel.css
--- a/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Yellow on Steel.css	
+++ b/data/styles/renkoo.AdiumMessageStyle/Contents/Resources/Variants/Yellow on Steel.css	
@@ -1,110 +1,7 @@
 @import url("../Styles/main.css");
 
-/* outgoing */
-
-.x-outgoingItem .x-timeStamp
-{
-	color: #bdb410;
-}
-
-.x-outgoingItem .x-myBubble .x-indicator
-{
-	background: url("../images/yellowIndicator.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tl
-{
-	background: url("../images/yellowCurves.png") no-repeat top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-tr
-{
-	background: url("../images/yellowCurves.png") no-repeat top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-head
-{
-	background: url("../images/yellowCurves.png") no-repeat -10px 0;
-}
-
-.x-outgoingItem .x-tableBubble .x-message
-{
-	background: url("../images/yellowBackground.png") repeat-y top left;
-}
-
-.x-outgoingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/yellowBackground.png") repeat-y top right;
-}
-
-.x-outgoingItem .x-tableBubble .x-bl
-{
-	background: url("../images/yellowCurves.png") no-repeat bottom left;
-}
-
-.x-outgoingItem .x-tableBubble .x-br
-{
-	background: url("../images/yellowCurves.png") no-repeat bottom right;
-}
-
-.x-outgoingItem .x-followUp
-{
-	background-color: #f4f0a7;
-	border-bottom: 1px solid #fff;
-}
-
-/*incoming */
-
-.x-incomingItem .x-timeStamp
-{
-	color: #a9a9a9;
-}
-
-.x-incomingItem .x-myBubble .x-indicator
-{
-	background: url("../images/steelIndicator.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tl
-{
-	background: url("../images/steelCurves.png") no-repeat top left;
-}
-
-.x-incomingItem .x-tableBubble .x-tr
-{
-	background: url("../images/steelCurves.png") no-repeat top right;
-}
-
-.x-incomingItem .x-tableBubble .x-head
-{
-	background: url("../images/steelCurves.png") no-repeat -10px 0;
-}
-
-.x-incomingItem .x-tableBubble .x-message
-{
-	background: url("../images/steelBackground.png") repeat-y top left;
-}
-
-.x-incomingItem .x-tableBubble .x-messageRight
-{
-	background: url("../images/steelBackground.png") repeat-y top right;
-}
-
-.x-incomingItem .x-tableBubble .x-bl
-{
-	background: url("../images/steelCurves.png") no-repeat bottom left;
-}
-
-.x-incomingItem .x-tableBubble .x-br
-{
-	background: url("../images/steelCurves.png") no-repeat bottom right;
-}
-
-.x-incomingItem .x-followUp
-{
-	background-color: #ececec;
-	border-bottom: 1px solid #fff;
-}
+@import url("../Colors/Out Yellow.css");
+@import url("../Colors/In Steel.css");
 
 .mention,
 .firstFocus .x-timeStamp:before