diff --git a/modules/ext.categoryTree.styles.css b/modules/ext.categoryTree.styles.css
index 10985813..fee60faa 100644
--- a/modules/ext.categoryTree.styles.css
+++ b/modules/ext.categoryTree.styles.css
@@ -23,11 +23,22 @@
  * @author Daniel Kinzler, brightbyte.de
  */
 
+/* On the list of subcategories hide the normal list bullet */
 .client-js #mw-subcategories ul {
 	list-style: none;
+}
+
+/* and reduce the margin on the margin start side. */
+/* @noflip */
+.client-js #mw-subcategories .mw-content-ltr ul {
 	margin-left: 0.25em;
 }
 
+/* @noflip */
+.client-js #mw-subcategories .mw-content-rtl ul {
+	margin-right: 0.25em;
+}
+
 #mw-panel .portal .body .CategoryTreeTag {
 	margin: 0;
 	font-size: 0.75em;
@@ -38,10 +49,33 @@
 	padding: 0.25em 0;
 }
 
+/*
+ * Indent the children on each level on margin start side.
+ * A category tree in the sidebar is in user interface language therefor
+ * a flipped margin-left is the margin start side.
+ */
 .CategoryTreeChildren {
 	margin-left: 1.25em;
 }
 
+/*
+ * Category trees in the content are in content language and therefor
+ * an unflipped margin-left or margin-right is the margin start side.
+ * Use margin: 0 0 0 1.25em instead of margin-left: 1.25em here to
+ * overwrite the flipped margin-left from above.
+ */
+/* @noflip */
+.mw-content-ltr .CategoryTreeChildren,
+.mw-content-rtl .mw-content-ltr .CategoryTreeChildren {
+	margin: 0 0 0 1.25em;
+}
+
+/* @noflip */
+.mw-content-rtl .CategoryTreeChildren,
+.mw-content-ltr .mw-content-rtl .CategoryTreeChildren {
+	margin: 0 1.25em 0 0;
+}
+
 .CategoryTreeBullet,
 .CategoryTreeEmptyBullet {
 	cursor: default;
@@ -95,7 +129,3 @@
 .CategoryTreeNotice {
 	font-style: italic;
 }
-
-.CategoryTreeSection {
-	direction: ltr;
-}