Make the narrative web support both LTR and RTL layouts

Fixes #12960.

data/css/Web_Basic-Ash.css

@@ -152,6 +152,7 @@ a[href]:hover, a[href]:active {
 /* Header
 ----------------------------------------------------- */
 #SiteTitle {
+    width: 95%;
     color: #555;
 }
 #user_header, #user_footer {
@@ -169,20 +170,21 @@ div#nav, #subnavigation {
 }
 div#nav ul, #subnavigation ul {
     list-style: none;
-    margin: 0px;
     padding-left: 15px;
 }
 #subnavigation ul {
     border-bottom: solid 1px #999;
 }
-div#nav ul li, #subnavigation ul li {
+div#nav.wrappernav.ltr {
     float: left;
 }
+div#nav.wrappernav.rtl {
+    float: right;
+}
 div#nav ul li a, #subnavigation ul li a {
     display: block;
     font-size: smaller;
     font-weight: bold;
-    padding: 5px;
     border-bottom: solid 1px #EEE;
 }
 div#nav ul li a:hover, #subnavigation ul li a:hover {
@@ -201,34 +203,41 @@ div#nav ul li.CurrentSection a {
     background-color: white;
 }
 div#nav li.lang {
-    font-size: smaller;
     font-family: sans-serif;
-    padding-top: .4em;
-    padding-bottom: .2em;
-    font-weight: bold;
 }
 div#nav li.lang:hover > ul {
     visibility: visible;
     opacity: 1;
+    width: 80px;
+    padding-right: 5px;
 }
 div#nav ul.lang {
     position: absolute;
     visibility: hidden;
     opacity: 0;
     z-index: 999;
     background-color: #EEE;
-    top: -1em;
-    font-size: larger;
     font-family: sans-serif;
 }
 div#nav ul.lang:hover {
     float: initial;
-    padding-left: 0px;
 }
 div#nav ul.lang li {
     float: none;
     padding: 2px;
 }
+.ltr, .ltr li {
+    float: left;
+    list-style: none;
+}
+li:not(:first-child) {
+    padding-right: 8px;
+    padding-left: 8px;
+}
+.rtl, .rtl li {
+    float: right;
+    list-style: none;
+}
 /* Alphabet Navigation
 ----------------------------------------------------- */
 div#alphanav {
@@ -269,6 +278,18 @@ button.navIcon {
     display: none;
 }
 
+div#header.rtl h1 {
+    margin-right: 40px;
+}
+div#header.rtl button {
+    float: right;
+}
+div#header.ltr h1 {
+    margin-left: 40px;
+}
+div#header.ltr button {
+    float: left;
+}
 div#header::after {
     content: "";
     clear: both;
@@ -298,45 +319,62 @@ div#nav::after {
         list-style: none;
         min-width: unset;
         width: 200px;
-        height: 32px;
         margin: 0;
         padding: 0;
     }
     .nav ul li, #subnavigation ul li {
         float: unset;
         display: unset
     }
+    li:first-child {
+        padding-right: 8px;
+        padding-left: 8px;
+    }
 
     /* Start with hidden menu options */
     /* .nav li:not(:first-child) {display: none;} */
     .nav li {display: none;}
     .nav ul {display: none;}
 
+    button.navIcon.rtl {
+        text-align:right;
+    }
+    button.navIcon.ltr {
+        text-align:left;
+    }
     button.navIcon {
         display: block;
-        float: left;
         font-size:2.9em;
-        line-height: 35px;
         border: 0px;
         color: #555;
         background-color: #EEE;
     }
 
+    h1#SiteTitle.ltr  {
+        float: left;
+    }
+    h1#SiteTitle.rlt  {
+        float: right;
+    }
     .nav.responsive {position: absolute; display: block; z-index: 100;}
     .nav.responsive a.icon {
         position: absolute;
         right: 0;
         top: 0;
         margin-right: 10px;
     }
+    .nav.rtl.responsive li.lang {
+        text-align: right;
+    }
+    .nav.ltr.responsive li.lang {
+        text-align: left;
+    }
     .nav.responsive li {
         display: block;
-        text-align: left;
-        background-color: #EEE;
+        background-color: #CCC;
         /* required by IE */
-        float: left;
         clear: both;
-        width: 200px;
+        width: 150px;
     }
 
     div#nav ul, #subnavigation ul {
@@ -351,7 +389,7 @@ div#nav::after {
     }
     .lang > .lang {
         top: 0;
-        left: 100%;
+        /* left: 100%; */
         margin-top: -6px;
         margin-left: -1px;
         -webkit-border-radius: 0 6px 6px 6px;
@@ -375,7 +413,6 @@ h3 + table.infolist {
     width: auto;
 }
 table tr th {
-    text-align: left;
     background-color: #EEE;
     border-top: solid 1px #999;
     border-bottom: solid 1px #999;
@@ -386,6 +423,12 @@ table tr th:first-child {
 table tr th:last-child {
     border-right: solid 1px #999;
 }
+table.relationships.ltr tr th, table.infolist.ltr tr th, table.primobjlist.ltr tr th, table.eventlist.ltr tr th {
+    text-align: left;
+}
+table.relationships.rtl tr th, table.infolist.rtl tr th, table.primobjlist.rtl tr th, table.eventlist.rtl tr th {
+    text-align: right;
+}
 table.primobjlist tr th {
     background-color: #CCC;
 }
@@ -713,8 +756,13 @@ div#families table.fixed_subtables .Child table.eventlist .ColumnDate {
     word-wrap: break-word;
     display: block;
 }
-#gallery .gallerycell {
+#gallery .gallerycell.ltr {
     float: left;
+}
+#gallery .gallerycell.rtl {
+    float: right;
+}
+#gallery .gallerycell {
     width: 130px;
     height: 150px;
     text-align: center;
@@ -925,6 +973,12 @@ body#FamilyMap {
 
 /* Calendar Styles
 ===================================================== */
+.dropmenu.rtl li {
+    text-align: right;
+}
+.dropmenu.ltr li {
+    text-align: left;
+}
 table.calendar {
     table-layout: fixed;
     empty-cells: show;
@@ -1075,7 +1129,7 @@ body#fullyearlinked #YearGlance tbody td:hover .date {
     border: 5px solid;
 }
 h4 button.icon {
-    width: 0.9em;
+    width: 1.9em;
     border: 0px solid;
     padding: 0;
     opacity: 1;