diff --git a/rhodecode/public/css/mergerly.css b/rhodecode/public/css/mergerly.css
new file mode 100644
--- /dev/null
+++ b/rhodecode/public/css/mergerly.css
@@ -0,0 +1,41 @@
+
+/* required */
+.mergely-column textarea { width: 80px; height: 200px; }
+.mergely-column { float: left; }
+.mergely-margin { float: left; }
+.mergely-canvas { float: left; width: 28px; }
+
+/* resizeable */
+.mergely-resizer { width: 100%; height: 100%; }
+
+/* style configuration */
+.mergely-column { border: 1px solid #ccc; }
+.mergely-active { border: 1px solid #a3d1ff; }
+
+.mergely.a.rhs.start { border-top: 1px solid #ddffdd; }
+.mergely.a.lhs.start.end,
+.mergely.a.rhs.end { border-bottom: 1px solid #ddffdd; }
+.mergely.a.rhs { background-color: #ddffdd; }
+.mergely.a.lhs.start.end.first { border-bottom: 0; border-top: 1px solid #ddffdd; }
+
+.mergely.d.lhs { background-color: #edc0c0; }
+.mergely.d.lhs.end,
+.mergely.d.rhs.start.end { border-bottom: 1px solid #ffdddd; }
+.mergely.d.rhs.start.end.first { border-bottom: 0; border-top: 1px solid #ffdddd; }
+.mergely.d.lhs.start { border-top: 1px solid #ffdddd; }
+
+.mergely.c.lhs,
+.mergely.c.rhs { background-color: #fafafa; }
+.mergely.c.lhs.start,
+.mergely.c.rhs.start { border-top: 1px solid #a3a3a3; }
+.mergely.c.lhs.end,
+.mergely.c.rhs.end { border-bottom: 1px solid #a3a3a3; }
+
+.mergely.ch.a.rhs { background-color: #ddffdd; }
+.mergely.ch.d.lhs { background-color: #ffdddd; }
+
+
+.mergely-margin #compare-lhs-margin,
+.mergely-margin #compare-rhs-margin{
+    cursor: pointer
+}