tdf#114709, tdf#112758, tdf#112757

Lots of changes and tweaks.
Header and footer now span 100% width even on desktop.
Font sizes were increased and content area made narrower.
We now have two separate language menus so the menu is
always visible on mobile.
Google search moved out of the accordion panel.
Accordion panel colours made darker.
On desktop, expanded accordion panels overlap content.

Change-Id: I976a67b1ca0cb2d21f0569da8d1fefd2b589d7d3
Reviewed-on: https://gerrit.libreoffice.org/47139
Reviewed-by: Olivier Hallot <olivier.hallot@libreoffice.org>
Tested-by: Olivier Hallot <olivier.hallot@libreoffice.org>

4 files changed, 304 insertions, 237 deletions

diff --git a/help3xsl/default.css b/help3xsl/default.css
index f4ee3273fa..268b1ac4d8 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -92,7 +92,7 @@ h6 {
 }
 p,
 td {
-    font-size: 11pt;
+    font-size: 14pt;
     margin: 2px 2px 2px 2px;
 }
 h1 {
@@ -102,15 +102,15 @@ h1 {
     padding-bottom: 6px;
 }
 h2 {
-    font-size: 14pt;
+    font-size: 18pt;
 }
 h3 {
-    font-size: 12pt;
+    font-size: 16pt;
 }
 h4,
 h5,
 h6 {
-    font-size: 11pt;
+    font-size: 14pt;
 }
 .avis {
     /*    background-color: #EEEEEE;*/
@@ -191,6 +191,7 @@ h6 {
     overflow: auto;
     padding: 10px;
     grid-area: main;
+    margin-bottom: 50px;
 }
 .mediabutton {
     background-color: cyan;
@@ -211,21 +212,20 @@ header {
     color: #fff;
     height: 4em;
     padding: .5em .5em .5em 1em;
-    flex-wrap: wrap;
-    justify-content: space-between;
     grid-area: header;
 }
+.logo-menu-container {
+    display: flex;
+    justify-content: space-between;
+}
 .logo {
-    flex-shrink: 0;
     color: #fff;
     text-decoration: none;
-    float: left;
-    width: 190px;
+    display: flex;
+    align-items: flex-end;
 }
 .logo p {
     font-size: 1.5em;
-    width: 130px;
-    float: left;
 }
 .logo .symbol {
     background-image: url(media/navigation/libo-symbol-white.svg);
@@ -233,20 +233,19 @@ header {
     background-size: contain;
     width: 3em;
     height: 3.7em;
-    float: left;
     margin-right: .5em;
 }
 header nav {
     margin-top: .7em;
     padding: 0;
     display: none;
-    border: 1px solid;
+    border: 1px solid #333;
     position: relative;
 }
 /* Create a style for the first level items */
 
-header nav a {
-    color: #333333;
+header nav a, .mobile-lang a {
+    color: #333;
     background-color: #EEEEEE;
     display: block;
     line-height: 1.5em;
@@ -255,14 +254,14 @@ header nav a {
     font-weight: bold;
     border-width: 0 1px 0 0;
     border-style: solid;
-    border-color: #333333;
+    border-color: #333;
     font-size: 1.5em;
     flex-shrink: 0;
     z-index: 100;
     white-space: nowrap;
 }
 
-header nav a:last-child {
+header nav a:last-child, .mobile-lang a:last-child {
     border-right-width: 0;
 }
 
@@ -272,21 +271,34 @@ header label {
     position: relative;
     top: 2em;
     float: right;
+    display: none;
 }
 header input[type="checkbox"]:checked ~ nav {
     background: #f1f1f1;
-    color: #444;
+    color: #333;
     z-index: 100;
-    /* line them up horizontally */
+    display: none;
+    /* allow for scrolling */
+
+    overflow-x: auto;
+    /* make it smooth on iOS */
 
+    -webkit-overflow-scrolling: touch;
+    clear: both;
+    text-align: center;
+}
+.mobile-lang {
+    background: #f1f1f1;
+    color: #333;
+    border: 1px solid #333;
+    z-index: 100;
+    /* line them up horizontally */
     display: flex;
     flex-direction: row;
     /* allow for scrolling */
-
     overflow-x: auto;
     overflow-y: hidden;
     /* make it smooth on iOS */
-
     -webkit-overflow-scrolling: touch;
     clear: both;
     text-align: center;
@@ -298,6 +310,9 @@ footer {
     text-align: center;
     grid-area: footer;
 }
+footer .headerfooter-center {
+    margin-top: 20px;
+}
 footer a {
     color: #c2f6ba;
 }
@@ -343,9 +358,17 @@ footer a {
     list-style-type: none;
     grid-area: accordion;
 }
+.acc-panel {
+    z-index: 10;
+}
 .acc-panel > div {
     display: none;
 }
+.gsc-control-cse {
+    border-color: transparent !important;
+    background-color: transparent !important;
+    padding: 3px 0 0 0 !important;
+}
 header input[type=checkbox],
 .contents-treeview input[type=checkbox] {
     position: absolute;
@@ -355,7 +378,7 @@ header input[type=checkbox],
     display: none;
 }
 .acc-panel > label {
-    color: #666;
+    color: #333;
     cursor: pointer;
     display: block;
     font-size: 1em;
@@ -364,32 +387,27 @@ header input[type=checkbox],
     padding: 0 1.5em;
     text-align: center;
 }
-.acc-panel:nth-of-type(1) > label {
-    background: #E7FDE4;
-}
 .acc-panel:nth-of-type(2) > label {
-    background: #F7FEE5;
+    background: #F0FDD2;
 }
 .acc-panel:nth-of-type(3) > label {
-    background: #E2FBF8;
+    background: #CAF4F0;
 }
 .acc-panel > label:hover {
     color: #222;
 }
-.acc-panel:nth-of-type(1) > label:hover {
-    background: #D5FACF;
-}
 .acc-panel:nth-of-type(2) > label:hover {
-    background: #F0FDD2;
+    background: #D4F489;
 }
 .acc-panel:nth-of-type(3) > label:hover {
-    background: #CAF4F0;
+    background: #6ABFB6;
 }
 .accordion input[type=checkbox]:checked + label + div {
     background: #f1f1f1;
-    color: #444;
+    color: #333;
     z-index: 6;
     display: block;
+    padding: 15px 0;
 }
 #Index div#SearchBox {
     background-color: #c2f6ba;
@@ -405,7 +423,7 @@ header input[type=checkbox],
 }
 #Index ul li {
     list-style-type: none;
-    font-size: 11pt;
+    font-size: 14pt;
 }
 #Index p {
     font-size: 16pt;
@@ -440,7 +458,7 @@ header input[type=checkbox],
     padding: 0.5em 0.5em;
     text-decoration: none;
     font-weight: bold;
-    font-size: 11pt;
+    font-size: 14pt;
     float: left;
 }
 .modules div {
@@ -459,7 +477,6 @@ header input[type=checkbox],
     width: 21.5px;
     height: 26px;
     position: relative;
-    top: -8px;
     margin-right: 5px;
 }
 .calc {
@@ -493,18 +510,14 @@ header input[type=checkbox],
     padding: 0;
     margin: 0;
     list-style: none;
-    font-size: 11pt;
+    font-size: 14pt;
 }
 .contents-treeview {
-    /*    font: normal 11px "Segoe UI", Arial, Sans-serif;*/
-
     -moz-user-select: none;
     -webkit-user-select: none;
     user-select: none;
 }
 .contents-treeview a {
-    /*     color: #00f; */
-
     text-decoration: none;
 }
 .contents-treeview a:hover {
@@ -565,9 +578,17 @@ header input[type=checkbox],
     }
 }
 @media screen and (min-width: 960px) {
-    body {
+    .content-center {
+        max-width: 1024px;
+        margin: 0 auto;
+        grid-area: content-center;
+    }
+    .mobile-lang {
+        display: none;
+    }
+    .headerfooter-center {
         max-width: 1024px;
-        margin: auto;
+        margin: 0 auto;
     }
     header nav a {
         font-size: 1em;
@@ -577,9 +598,18 @@ header input[type=checkbox],
     header nav a:last-child {
         border-bottom-width: 0;
     }
+    header label {
+        cursor: pointer;
+        font-size: 1.2em;
+        position: relative;
+        top: 2em;
+        float: right;
+        display: block;
+    }
     /* change the language menu direction to stacked */
 
     header input[type="checkbox"]:checked ~ nav {
+        display: flex;
         flex-direction: column;
         max-width: 7.5em;
         float: right;
@@ -589,16 +619,23 @@ header input[type=checkbox],
     .accordion {
         display: flex;
         width: 960px;
+        max-height: 50px;
     }
-    .acc-panel {
+    .accordion > div {
         flex-basis: 320px;
     }
+    .acc-panel:nth-of-type(2) > label, #Contents {
+        margin-left: .25em;
+    }
     .acc-panel > label {
         margin-right: .25em;
     }
     .accordion input[type=checkbox]:checked + label + div {
         max-width: 316px;
     }
+    #DisplayArea {
+        padding: 10px 150px;
+    }
     #search-bar {
         max-width: 290px;
     }
@@ -610,10 +647,16 @@ header input[type=checkbox],
             grid-template-columns: 320px 1fr;
             grid-template-rows: 1fr minmax(1em, auto);
             grid-template-areas: "header header"
-                                 "modules modules"
+                                 "content-center content-center"
+                                 "footer footer"
+        }
+        content-center {
+            display: grid;
+            grid-template-columns: 320px 1fr;
+            grid-template-rows: 1fr minmax(1em, auto);
+            grid-template-areas: "modules modules"
                                  "accordion accordion"
                                  "main main"
-                                 "footer footer";
         }
     }
 }
diff --git a/help3xsl/help.js b/help3xsl/help.js
index 09ebb34b85..552022070d 100644
--- a/help3xsl/help.js
+++ b/help3xsl/help.js
@@ -74,19 +74,19 @@ function getParameterByName(name, url) {
     if (!url) {
         url = window.location.href;
     }
-    
+
     name = name.replace(/[\[\]]/g, "\\$&");
     var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)");
     var results = regex.exec(url);
-    
+
     if (!results) {
         return null;
     }
-    
+
     if (!results[2]) {
         return '';
     }
-    
+
     return decodeURIComponent(results[2].replace(/\+/g, " "));
 }
 
@@ -124,14 +124,8 @@ $(document).ready(function() {
     $('input[name="accordion-menu"]').on('change', function(){
         $('input[name="accordion-menu"]').not(this).prop('checked', false);
     });
-    //focus Google Search input clicking on Find panel
-    $('#accordion-2').on('change', function(){
-        if($(this).is(':checked')){
-            $('#gsc-i-id1').focus();
-        }
-    });
     //focus index search input clicking on Index panel
-    $('#accordion-3').on('change', function(){
+    $('#accordion-2').on('change', function(){
         if($(this).is(':checked')){
             $('#search-bar').focus();
             //prevent all results to be shown
diff --git a/help3xsl/localized.xsl b/help3xsl/localized.xsl
index 124cfc9e71..584d4bec4d 100644
--- a/help3xsl/localized.xsl
+++ b/help3xsl/localized.xsl
@@ -94,47 +94,6 @@ Stylesheet map language-dependent parameters and translation
 </xsl:choose>
 </xsl:template>
 
-<xsl:template name="getSearch">
-    <xsl:param name="lang"/>
-    <xsl:choose>
-        <xsl:when test="$lang='ast'"><xsl:text>Alcontrar</xsl:text></xsl:when>
-        <xsl:when test="$lang='be'"><xsl:text>Пошук</xsl:text></xsl:when>
-        <xsl:when test="$lang='bg'"><xsl:text>Търсене</xsl:text></xsl:when>
-        <xsl:when test="$lang='ca'"><xsl:text>Cerca</xsl:text></xsl:when>
-        <xsl:when test="$lang='ca-valencia'"><xsl:text>Cerca</xsl:text></xsl:when>
-        <xsl:when test="$lang='cs'"><xsl:text>Najít</xsl:text></xsl:when>
-        <xsl:when test="$lang='da'"><xsl:text>Find</xsl:text></xsl:when>
-        <xsl:when test="$lang='de'"><xsl:text>Suchen</xsl:text></xsl:when>
-        <xsl:when test="$lang='el'"><xsl:text>Εύρεση</xsl:text></xsl:when>
-        <xsl:when test="$lang='en-US'"><xsl:text>Find</xsl:text></xsl:when>
-        <xsl:when test="$lang='en-GB'"><xsl:text>Find</xsl:text></xsl:when>
-        <xsl:when test="$lang='en-ZA'"><xsl:text>Find</xsl:text></xsl:when>
-        <xsl:when test="$lang='eo'"><xsl:text>Serĉi</xsl:text></xsl:when>
-        <xsl:when test="$lang='es'"><xsl:text>Buscar</xsl:text></xsl:when>
-        <xsl:when test="$lang='fi'"><xsl:text>Etsi</xsl:text></xsl:when>
-        <xsl:when test="$lang='fr'"><xsl:text>Recherche</xsl:text></xsl:when>
-        <xsl:when test="$lang='gl'"><xsl:text>Buscar</xsl:text></xsl:when>
-        <xsl:when test="$lang='hr'"><xsl:text>Pronađi</xsl:text></xsl:when>
-        <xsl:when test="$lang='hu'"><xsl:text>Keresés</xsl:text></xsl:when>
-        <xsl:when test="$lang='is'"><xsl:text>Leita</xsl:text></xsl:when>
-        <xsl:when test="$lang='it'"><xsl:text>Cerca</xsl:text></xsl:when>
-        <xsl:when test="$lang='ja'"><xsl:text>検索</xsl:text></xsl:when>
-        <xsl:when test="$lang='lt'"><xsl:text>Paieška</xsl:text></xsl:when>
-        <xsl:when test="$lang='nb'"><xsl:text>Finn</xsl:text></xsl:when>
-        <xsl:when test="$lang='nl'"><xsl:text>Zoeken</xsl:text></xsl:when>
-        <xsl:when test="$lang='nn'"><xsl:text>Finn</xsl:text></xsl:when>
-        <xsl:when test="$lang='pt-BR'"><xsl:text>Pesquisar</xsl:text></xsl:when>
-        <xsl:when test="$lang='pt'"><xsl:text>Localizar</xsl:text></xsl:when>
-        <xsl:when test="$lang='ru'"><xsl:text>Искать</xsl:text></xsl:when>
-        <xsl:when test="$lang='sl'"><xsl:text>Najdi</xsl:text></xsl:when>
-        <xsl:when test="$lang='sq'"><xsl:text>Gjej</xsl:text></xsl:when>
-        <xsl:when test="$lang='tr'"><xsl:text>Bul</xsl:text></xsl:when>
-        <xsl:when test="$lang='zh-CN'"><xsl:text>搜索</xsl:text></xsl:when>
-        <xsl:when test="$lang='zh-TW'"><xsl:text>尋找</xsl:text></xsl:when>
-        <xsl:otherwise><xsl:text>Find</xsl:text></xsl:otherwise>
-</xsl:choose>
-</xsl:template>
-
 <xsl:template name="getLanguage">
     <xsl:param name="lang"/>
     <xsl:choose>
diff --git a/help3xsl/online_transform.xsl b/help3xsl/online_transform.xsl
index 95a1269c0b..446c5ed39b 100644
--- a/help3xsl/online_transform.xsl
+++ b/help3xsl/online_transform.xsl
@@ -136,155 +136,226 @@
         <meta itemprop="headline" content="{$titleL10N}"/>
     </xsl:if>
     <header>
-        <a class="logo" href="https://helponline.libreoffice.org/">
-            <div class="symbol"></div>
-            <p>LibreOffice <xsl:value-of select="$productversion"/> Help</p>
-        </a>
-        <xsl:if test="$online">
+        <div class="headerfooter-center">
             <input id="langs" name="language-menu" type="checkbox"/>
-            <label for="langs"><xsl:call-template name="getLanguage"><xsl:with-param name="lang" select="$lang"/></xsl:call-template> ▼</label>
-            <nav>
-                <a href="{$productversion}/en-US{$htmlpage}">English (USA)</a>
-                <a href="{$productversion}/am{$htmlpage}">አማርኛ</a>
-                <a href="{$productversion}/ar{$htmlpage}">العربية</a>
-                <a href="{$productversion}/ast{$htmlpage}">Asturianu</a>
-                <a href="{$productversion}/bg{$htmlpage}">Български</a>
-                <a href="{$productversion}/bn{$htmlpage}">বাংলা</a>
-                <a href="{$productversion}/bn-IN{$htmlpage}">বাংলা</a>
-                <a href="{$productversion}/bo{$htmlpage}">བོད་ཡིག / Bod skad</a>
-                <a href="{$productversion}/bs{$htmlpage}">Bosanski</a>
-                <a href="{$productversion}/ca{$htmlpage}">Català</a>
-                <a href="{$productversion}/ca-valencia{$htmlpage}">Català-Valencia</a>
-                <a href="{$productversion}/cs{$htmlpage}">Česky</a>
-                <a href="{$productversion}/da{$htmlpage}">Dansk</a>
-                <a href="{$productversion}/de{$htmlpage}">Deutsch</a>
-                <a href="{$productversion}/dz{$htmlpage}"> ཇོང་ཁ</a>
-                <a href="{$productversion}/el{$htmlpage}">Ελληνικά</a>
-                <a href="{$productversion}/en-GB{$htmlpage}">English (GB)</a>
-                <a href="{$productversion}/en-ZA{$htmlpage}">English (ZA)</a>
-                <a href="{$productversion}/eo{$htmlpage}">Esperanto</a>
-                <a href="{$productversion}/es{$htmlpage}">Español</a>
-                <a href="{$productversion}/et{$htmlpage}">Eesti</a>
-                <a href="{$productversion}/eu{$htmlpage}">Euskara</a>
-                <a href="{$productversion}/fi{$htmlpage}">Suomi</a>
-                <a href="{$productversion}/fr{$htmlpage}">Français</a>
-                <a href="{$productversion}/gl{$htmlpage}">Galego</a>
-                <a href="{$productversion}/gu{$htmlpage}">ગુજરાતી</a>
-                <a href="{$productversion}/he{$htmlpage}">עברית</a>
-                <a href="{$productversion}/hi{$htmlpage}">हिन्दी</a>
-                <a href="{$productversion}/hr{$htmlpage}">Hrvatski</a>
-                <a href="{$productversion}/hu{$htmlpage}">Magyar</a>
-                <a href="{$productversion}/id{$htmlpage}">Bahasa Indonesia</a>
-                <a href="{$productversion}/is{$htmlpage}">Íslenska</a>
-                <a href="{$productversion}/it{$htmlpage}">Italiano</a>
-                <a href="{$productversion}/ja{$htmlpage}">日本語</a>
-                <a href="{$productversion}/ka{$htmlpage}">ქართული</a>
-                <a href="{$productversion}/km{$htmlpage}">ភាសាខ្មែរ</a>
-                <a href="{$productversion}/ko{$htmlpage}">한국어</a>
-                <a href="{$productversion}/lo{$htmlpage}">ລາວ</a>
-                <a href="{$productversion}/lt{$htmlpage}">Lietuvių</a>
-                <a href="{$productversion}/lv{$htmlpage}">Latviešu</a>
-                <a href="{$productversion}/mk{$htmlpage}">Македонски</a>
-                <a href="{$productversion}/nb{$htmlpage}">Norsk (bokmål / riksmål)</a>
-                <a href="{$productversion}/ne{$htmlpage}">नेपाली</a>
-                <a href="{$productversion}/nl{$htmlpage}">Nederlands</a>
-                <a href="{$productversion}/nn{$htmlpage}">Norsk (nynorsk)</a>
-                <a href="{$productversion}/om{$htmlpage}">Oromoo</a>
-                <a href="{$productversion}/pl{$htmlpage}">Polski</a>
-                <a href="{$productversion}/pt{$htmlpage}">Português</a>
-                <a href="{$productversion}/pt-BR{$htmlpage}">Português do Brasil</a>
-                <a href="{$productversion}/ro{$htmlpage}">Română</a>
-                <a href="{$productversion}/ru{$htmlpage}">Русский</a>
-                <a href="{$productversion}/si{$htmlpage}">සිංහල</a>
-                <a href="{$productversion}/sid{$htmlpage}">Sidámo 'Afó</a>
-                <a href="{$productversion}/sk{$htmlpage}">Slovenčina</a>
-                <a href="{$productversion}/sl{$htmlpage}">Slovenščina</a>
-                <a href="{$productversion}/sq{$htmlpage}">Shqip</a>
-                <a href="{$productversion}/sv{$htmlpage}">Svenska</a>
-                <a href="{$productversion}/ta{$htmlpage}">தமிழ்</a>
-                <a href="{$productversion}/tg{$htmlpage}">Тоҷикӣ</a>
-                <a href="{$productversion}/tr{$htmlpage}">Türkçe</a>
-                <a href="{$productversion}/ug{$htmlpage}">ئۇيغۇرچە</a>
-                <a href="{$productversion}/uk{$htmlpage}">Українська</a>
-                <a href="{$productversion}/vi{$htmlpage}">Tiếng Việt</a>
-                <a href="{$productversion}/zh-CN{$htmlpage}">中文 (简体字)</a>
-                <a href="{$productversion}/zh-TW{$htmlpage}">中文 (正體字)‬</a>
-            </nav>
-        </xsl:if>
-    </header>
-    <nav id="Modules" class="modules">
-        <ul>
-            <li><a href="{$productversion}/{$lang}/text/swriter/main0000.html?DbPAR=WRITER"><div class="writer"></div>Writer</a></li>
-            <li><a href="{$productversion}/{$lang}/text/scalc/main0000.html?DbPAR=CALC"><div class="calc"></div>Calc</a></li>
-            <li><a href="{$productversion}/{$lang}/text/simpress/main0000.html?DbPAR=IMPRESS"><div class="impress"></div>Impress</a></li>
-            <li><a href="{$productversion}/{$lang}/text/sdraw/main0000.html?DbPAR=DRAW"><div class="draw"></div>Draw</a></li>
-            <li><a href="{$productversion}/{$lang}/text/shared/explorer/database/main.html?DbPAR=BASE"><div class="base"></div>Base</a></li>
-            <li><a href="{$productversion}/{$lang}/text/smath/main0000.html?DbPAR=MATH"><div class="math"></div>Math</a></li>
-            <li><a href="{$productversion}/{$lang}/text/schart/main0000.html?DbPAR=CHART"><div class="chart"></div>Chart</a></li>
-            <li><a href="{$productversion}/{$lang}/text/sbasic/shared/main0601.html?DbPAR=BASIC"><div class="basic"></div>Basic</a></li>
-        </ul>
-    </nav>
-    <div class="accordion">
-        <div class="acc-panel">
-            <input id="accordion-1" name="accordion-menu" type="checkbox"/>
-            <label for="accordion-1"><xsl:call-template name="getContents"><xsl:with-param name="lang" select="$lang"/></xsl:call-template></label>
-            <div id="Contents" class="contents-treeview"></div>
+            <div class="logo-menu-container">
+                <a class="logo" href="https://helponline.libreoffice.org/">
+                    <div class="symbol"></div>
+                    <p>LibreOffice <xsl:value-of select="$productversion"/> Help</p>
+                </a>
+                <xsl:if test="$online">
+                    <label for="langs"><xsl:call-template name="getLanguage"><xsl:with-param name="lang" select="$lang"/></xsl:call-template> ▼</label>
+                </xsl:if>
+            </div>
+                <xsl:if test="$online">
+                <nav>
+                    <a href="{$productversion}/en-US{$htmlpage}">English (USA)</a>
+                    <a href="{$productversion}/am{$htmlpage}">አማርኛ</a>
+                    <a href="{$productversion}/ar{$htmlpage}">العربية</a>
+                    <a href="{$productversion}/ast{$htmlpage}">Asturianu</a>
+                    <a href="{$productversion}/bg{$htmlpage}">Български</a>
+                    <a href="{$productversion}/bn{$htmlpage}">বাংলা</a>
+                    <a href="{$productversion}/bn-IN{$htmlpage}">বাংলা</a>
+                    <a href="{$productversion}/bo{$htmlpage}">བོད་ཡིག / Bod skad</a>
+                    <a href="{$productversion}/bs{$htmlpage}">Bosanski</a>
+                    <a href="{$productversion}/ca{$htmlpage}">Català</a>
+                    <a href="{$productversion}/ca-valencia{$htmlpage}">Català-Valencia</a>
+                    <a href="{$productversion}/cs{$htmlpage}">Česky</a>
+                    <a href="{$productversion}/da{$htmlpage}">Dansk</a>
+                    <a href="{$productversion}/de{$htmlpage}">Deutsch</a>
+                    <a href="{$productversion}/dz{$htmlpage}"> ཇོང་ཁ</a>
+                    <a href="{$productversion}/el{$htmlpage}">Ελληνικά</a>
+                    <a href="{$productversion}/en-GB{$htmlpage}">English (GB)</a>
+                    <a href="{$productversion}/en-ZA{$htmlpage}">English (ZA)</a>
+                    <a href="{$productversion}/eo{$htmlpage}">Esperanto</a>
+                    <a href="{$productversion}/es{$htmlpage}">Español</a>
+                    <a href="{$productversion}/et{$htmlpage}">Eesti</a>
+                    <a href="{$productversion}/eu{$htmlpage}">Euskara</a>
+                    <a href="{$productversion}/fi{$htmlpage}">Suomi</a>
+                    <a href="{$productversion}/fr{$htmlpage}">Français</a>
+                    <a href="{$productversion}/gl{$htmlpage}">Galego</a>
+                    <a href="{$productversion}/gu{$htmlpage}">ગુજરાતી</a>
+                    <a href="{$productversion}/he{$htmlpage}">עברית</a>
+                    <a href="{$productversion}/hi{$htmlpage}">हिन्दी</a>
+                    <a href="{$productversion}/hr{$htmlpage}">Hrvatski</a>
+                    <a href="{$productversion}/hu{$htmlpage}">Magyar</a>
+                    <a href="{$productversion}/id{$htmlpage}">Bahasa Indonesia</a>
+                    <a href="{$productversion}/is{$htmlpage}">Íslenska</a>
+                    <a href="{$productversion}/it{$htmlpage}">Italiano</a>
+                    <a href="{$productversion}/ja{$htmlpage}">日本語</a>
+                    <a href="{$productversion}/ka{$htmlpage}">ქართული</a>
+                    <a href="{$productversion}/km{$htmlpage}">ភាសាខ្មែរ</a>
+                    <a href="{$productversion}/ko{$htmlpage}">한국어</a>
+                    <a href="{$productversion}/lo{$htmlpage}">ລາວ</a>
+                    <a href="{$productversion}/lt{$htmlpage}">Lietuvių</a>
+                    <a href="{$productversion}/lv{$htmlpage}">Latviešu</a>
+                    <a href="{$productversion}/mk{$htmlpage}">Македонски</a>
+                    <a href="{$productversion}/nb{$htmlpage}">Norsk (bokmål / riksmål)</a>
+                    <a href="{$productversion}/ne{$htmlpage}">नेपाली</a>
+                    <a href="{$productversion}/nl{$htmlpage}">Nederlands</a>
+                    <a href="{$productversion}/nn{$htmlpage}">Norsk (nynorsk)</a>
+                    <a href="{$productversion}/om{$htmlpage}">Oromoo</a>
+                    <a href="{$productversion}/pl{$htmlpage}">Polski</a>
+                    <a href="{$productversion}/pt{$htmlpage}">Português</a>
+                    <a href="{$productversion}/pt-BR{$htmlpage}">Português do Brasil</a>
+                    <a href="{$productversion}/ro{$htmlpage}">Română</a>
+                    <a href="{$productversion}/ru{$htmlpage}">Русский</a>
+                    <a href="{$productversion}/si{$htmlpage}">සිංහල</a>
+                    <a href="{$productversion}/sid{$htmlpage}">Sidámo 'Afó</a>
+                    <a href="{$productversion}/sk{$htmlpage}">Slovenčina</a>
+                    <a href="{$productversion}/sl{$htmlpage}">Slovenščina</a>
+                    <a href="{$productversion}/sq{$htmlpage}">Shqip</a>
+                    <a href="{$productversion}/sv{$htmlpage}">Svenska</a>
+                    <a href="{$productversion}/ta{$htmlpage}">தமிழ்</a>
+                    <a href="{$productversion}/tg{$htmlpage}">Тоҷикӣ</a>
+                    <a href="{$productversion}/tr{$htmlpage}">Türkçe</a>
+                    <a href="{$productversion}/ug{$htmlpage}">ئۇيغۇرچە</a>
+                    <a href="{$productversion}/uk{$htmlpage}">Українська</a>
+                    <a href="{$productversion}/vi{$htmlpage}">Tiếng Việt</a>
+                    <a href="{$productversion}/zh-CN{$htmlpage}">中文 (简体字)</a>
+                    <a href="{$productversion}/zh-TW{$htmlpage}">中文 (正體字)‬</a>
+                </nav>
+            </xsl:if>
         </div>
+    </header>
+    <div class="content-center">
         <xsl:if test="$online">
+        <nav class="mobile-lang">
+            <a href="{$productversion}/en-US{$htmlpage}">English (USA)</a>
+            <a href="{$productversion}/am{$htmlpage}">አማርኛ</a>
+            <a href="{$productversion}/ar{$htmlpage}">العربية</a>
+            <a href="{$productversion}/ast{$htmlpage}">Asturianu</a>
+            <a href="{$productversion}/bg{$htmlpage}">Български</a>
+            <a href="{$productversion}/bn{$htmlpage}">বাংলা</a>
+            <a href="{$productversion}/bn-IN{$htmlpage}">বাংলা</a>
+            <a href="{$productversion}/bo{$htmlpage}">བོད་ཡིག / Bod skad</a>
+            <a href="{$productversion}/bs{$htmlpage}">Bosanski</a>
+            <a href="{$productversion}/ca{$htmlpage}">Català</a>
+            <a href="{$productversion}/ca-valencia{$htmlpage}">Català-Valencia</a>
+            <a href="{$productversion}/cs{$htmlpage}">Česky</a>
+            <a href="{$productversion}/da{$htmlpage}">Dansk</a>
+            <a href="{$productversion}/de{$htmlpage}">Deutsch</a>
+            <a href="{$productversion}/dz{$htmlpage}"> ཇོང་ཁ</a>
+            <a href="{$productversion}/el{$htmlpage}">Ελληνικά</a>
+            <a href="{$productversion}/en-GB{$htmlpage}">English (GB)</a>
+            <a href="{$productversion}/en-ZA{$htmlpage}">English (ZA)</a>
+            <a href="{$productversion}/eo{$htmlpage}">Esperanto</a>
+            <a href="{$productversion}/es{$htmlpage}">Español</a>
+            <a href="{$productversion}/et{$htmlpage}">Eesti</a>
+            <a href="{$productversion}/eu{$htmlpage}">Euskara</a>
+            <a href="{$productversion}/fi{$htmlpage}">Suomi</a>
+            <a href="{$productversion}/fr{$htmlpage}">Français</a>
+            <a href="{$productversion}/gl{$htmlpage}">Galego</a>
+            <a href="{$productversion}/gu{$htmlpage}">ગુજરાતી</a>
+            <a href="{$productversion}/he{$htmlpage}">עברית</a>
+            <a href="{$productversion}/hi{$htmlpage}">हिन्दी</a>
+            <a href="{$productversion}/hr{$htmlpage}">Hrvatski</a>
+            <a href="{$productversion}/hu{$htmlpage}">Magyar</a>
+            <a href="{$productversion}/id{$htmlpage}">Bahasa Indonesia</a>
+            <a href="{$productversion}/is{$htmlpage}">Íslenska</a>
+            <a href="{$productversion}/it{$htmlpage}">Italiano</a>
+            <a href="{$productversion}/ja{$htmlpage}">日本語</a>
+            <a href="{$productversion}/ka{$htmlpage}">ქართული</a>
+            <a href="{$productversion}/km{$htmlpage}">ភាសាខ្មែរ</a>
+            <a href="{$productversion}/ko{$htmlpage}">한국어</a>
+            <a href="{$productversion}/lo{$htmlpage}">ລາວ</a>
+            <a href="{$productversion}/lt{$htmlpage}">Lietuvių</a>
+            <a href="{$productversion}/lv{$htmlpage}">Latviešu</a>
+            <a href="{$productversion}/mk{$htmlpage}">Македонски</a>
+            <a href="{$productversion}/nb{$htmlpage}">Norsk (bokmål / riksmål)</a>
+            <a href="{$productversion}/ne{$htmlpage}">नेपाली</a>
+            <a href="{$productversion}/nl{$htmlpage}">Nederlands</a>
+            <a href="{$productversion}/nn{$htmlpage}">Norsk (nynorsk)</a>
+            <a href="{$productversion}/om{$htmlpage}">Oromoo</a>
+            <a href="{$productversion}/pl{$htmlpage}">Polski</a>
+            <a href="{$productversion}/pt{$htmlpage}">Português</a>
+            <a href="{$productversion}/pt-BR{$htmlpage}">Português do Brasil</a>
+            <a href="{$productversion}/ro{$htmlpage}">Română</a>
+            <a href="{$productversion}/ru{$htmlpage}">Русский</a>
+            <a href="{$productversion}/si{$htmlpage}">සිංහල</a>
+            <a href="{$productversion}/sid{$htmlpage}">Sidámo 'Afó</a>
+            <a href="{$productversion}/sk{$htmlpage}">Slovenčina</a>
+            <a href="{$productversion}/sl{$htmlpage}">Slovenščina</a>
+            <a href="{$productversion}/sq{$htmlpage}">Shqip</a>
+            <a href="{$productversion}/sv{$htmlpage}">Svenska</a>
+            <a href="{$productversion}/ta{$htmlpage}">தமிழ்</a>
+            <a href="{$productversion}/tg{$htmlpage}">Тоҷикӣ</a>
+            <a href="{$productversion}/tr{$htmlpage}">Türkçe</a>
+            <a href="{$productversion}/ug{$htmlpage}">ئۇيغۇرچە</a>
+            <a href="{$productversion}/uk{$htmlpage}">Українська</a>
+            <a href="{$productversion}/vi{$htmlpage}">Tiếng Việt</a>
+            <a href="{$productversion}/zh-CN{$htmlpage}">中文 (简体字)</a>
+            <a href="{$productversion}/zh-TW{$htmlpage}">中文 (正體字)‬</a>
+        </nav>
+        </xsl:if>
+        <nav id="Modules" class="modules">
+            <ul>
+                <li><a href="{$productversion}/{$lang}/text/swriter/main0000.html?DbPAR=WRITER"><div class="writer"></div>Writer</a></li>
+                <li><a href="{$productversion}/{$lang}/text/scalc/main0000.html?DbPAR=CALC"><div class="calc"></div>Calc</a></li>
+                <li><a href="{$productversion}/{$lang}/text/simpress/main0000.html?DbPAR=IMPRESS"><div class="impress"></div>Impress</a></li>
+                <li><a href="{$productversion}/{$lang}/text/sdraw/main0000.html?DbPAR=DRAW"><div class="draw"></div>Draw</a></li>
+                <li><a href="{$productversion}/{$lang}/text/shared/explorer/database/main.html?DbPAR=BASE"><div class="base"></div>Base</a></li>
+                <li><a href="{$productversion}/{$lang}/text/smath/main0000.html?DbPAR=MATH"><div class="math"></div>Math</a></li>
+                <li><a href="{$productversion}/{$lang}/text/schart/main0000.html?DbPAR=CHART"><div class="chart"></div>Chart</a></li>
+                <li><a href="{$productversion}/{$lang}/text/sbasic/shared/main0601.html?DbPAR=BASIC"><div class="basic"></div>Basic</a></li>
+            </ul>
+        </nav>
+        <div class="accordion">
+            <script type="text/javascript">
+                <![CDATA[
+                (function() {]]>
+                <xsl:call-template name="getToken"><xsl:with-param name="lang" select="$lang"/></xsl:call-template>
+                <![CDATA[
+                var gcse = document.createElement('script');
+                gcse.type = 'text/javascript';
+                gcse.async = true;
+                gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
+                var s = document.getElementsByTagName('script')[0];
+                s.parentNode.insertBefore(gcse, s);
+                })();
+                ]]>
+            </script>
+            <xsl:text disable-output-escaping="yes">&lt;gcse:search&gt;&lt;/gcse:search&gt;</xsl:text>
             <div class="acc-panel">
-                <input id="accordion-2" name="accordion-menu" type="checkbox"/>
-                <label for="accordion-2"><xsl:call-template name="getSearch"><xsl:with-param name="lang" select="$lang"/></xsl:call-template></label>
-                <div id="content-2">
-                    <script type="text/javascript">
-                        <![CDATA[
-                        (function() {]]>
-                        <xsl:call-template name="getToken"><xsl:with-param name="lang" select="$lang"/></xsl:call-template>
-                        <![CDATA[
-                        var gcse = document.createElement('script');
-                        gcse.type = 'text/javascript';
-                        gcse.async = true;
-                        gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
-                        var s = document.getElementsByTagName('script')[0];
-                        s.parentNode.insertBefore(gcse, s);
-                        })();
-                        ]]>
-                    </script>
-                    <xsl:text disable-output-escaping="yes">&lt;gcse:search&gt;&lt;/gcse:search&gt;</xsl:text>
-                </div>
+                <input id="accordion-1" name="accordion-menu" type="checkbox"/>
+                <label for="accordion-1"><xsl:call-template name="getContents"><xsl:with-param name="lang" select="$lang"/></xsl:call-template></label>
+                <div id="Contents" class="contents-treeview"></div>
             </div>
-        </xsl:if>
-        <div class="acc-panel">
-            <input id="accordion-3" name="accordion-menu" type="checkbox"/>
-            <label for="accordion-3"><xsl:call-template name="getIndex"><xsl:with-param name="lang" select="$lang"/></xsl:call-template></label>
-            <div id="Index">
-                <div id="SearchBox">
-                    <p> &#32;&#x1f50e;&#32; <input id="search-bar" type="text"/></p>
-                </div>
-                <div id="Bookmarks">
-                    <p>WRITER</p><ul id="bookmarkWRITER"></ul>
-                    <p>CALC</p><ul id="bookmarkCALC"></ul>
-                    <p>IMPRESS</p><ul id="bookmarkIMPRESS"></ul>
-                    <p>DRAW</p><ul id="bookmarkDRAW" ></ul>
-                    <p>BASE</p><ul id="bookmarkBASE"></ul>
-                    <p>MATH</p><ul id="bookmarkMATH"></ul>
-                    <p>CHART</p><ul id="bookmarkCHART"></ul>
-                    <p>BASIC</p><ul id="bookmarkBASIC"></ul>
-                    <p>GLOBAL</p><ul id="bookmarkSHARED"></ul>
+            <div class="acc-panel">
+                <input id="accordion-2" name="accordion-menu" type="checkbox"/>
+                <label for="accordion-2"><xsl:call-template name="getIndex"><xsl:with-param name="lang" select="$lang"/></xsl:call-template></label>
+                <div id="Index">
+                    <div id="SearchBox">
+                        <p> &#32;&#x1f50e;&#32; <input id="search-bar" type="text"/></p>
+                    </div>
+                    <div id="Bookmarks">
+                        <p>WRITER</p><ul id="bookmarkWRITER"></ul>
+                        <p>CALC</p><ul id="bookmarkCALC"></ul>
+                        <p>IMPRESS</p><ul id="bookmarkIMPRESS"></ul>
+                        <p>DRAW</p><ul id="bookmarkDRAW" ></ul>
+                        <p>BASE</p><ul id="bookmarkBASE"></ul>
+                        <p>MATH</p><ul id="bookmarkMATH"></ul>
+                        <p>CHART</p><ul id="bookmarkCHART"></ul>
+                        <p>BASIC</p><ul id="bookmarkBASIC"></ul>
+                        <p>GLOBAL</p><ul id="bookmarkSHARED"></ul>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-    <div id="DisplayArea" itemprop="articleBody">
-        <xsl:apply-templates select="/helpdocument/body"/>
+        <div id="DisplayArea" itemprop="articleBody">
+            <xsl:apply-templates select="/helpdocument/body"/>
+        </div>
     </div>
     <footer>
-        <p><a href="http://www.libreoffice.org/imprint" target="_blank">Impressum (Legal Info)</a> | <a href="http://www.libreoffice.org/privacy" target="_blank">Privacy Policy</a> | <a href="http://www.documentfoundation.org/statutes.pdf" target="_blank">Statutes (non-binding English translation)</a> - <a href="http://www.documentfoundation.org/satzung.pdf" target="_blank">Satzung (binding German version)</a> | Copyright information: Unless otherwise specified, all text and images on this website are licensed under the <a href="http://www.libreoffice.org/download/license/" target="_blank">Mozilla Public License v2.0</a>. “LibreOffice” and “The Document Foundation” are registered trademarks of their corresponding registered owners or are in actual use as trademarks in one or more countries. Their respective logos and icons are also subject to international copyright laws. Use thereof is explained in our <a href="http://wiki.documentfoundation.org/TradeMark_Policy" target="_blank">trademark policy</a>. LibreOffice was based on OpenOffice.org.</p>
-        <div id="DEBUG" class="debug">
-            <h3 class="bug">Help content debug info:</h3>
-            <p>This page is: <a href="https://opengrok.libreoffice.org/xref/help/source{$filename}" target="_blank"><xsl:value-of select="$filename"/></a></p>
-            <p>Title is: <xsl:value-of select="$title"/></p>
-            <p id="bm_module"></p>
-            <p id="bm_system"></p>
+        <div class="headerfooter-center">
+            <p><a href="http://www.libreoffice.org/imprint" target="_blank">Impressum (Legal Info)</a> | <a href="http://www.libreoffice.org/privacy" target="_blank">Privacy Policy</a> | <a href="http://www.documentfoundation.org/statutes.pdf" target="_blank">Statutes (non-binding English translation)</a> - <a href="http://www.documentfoundation.org/satzung.pdf" target="_blank">Satzung (binding German version)</a> | Copyright information: Unless otherwise specified, all text and images on this website are licensed under the <a href="http://www.libreoffice.org/download/license/" target="_blank">Mozilla Public License v2.0</a>. “LibreOffice” and “The Document Foundation” are registered trademarks of their corresponding registered owners or are in actual use as trademarks in one or more countries. Their respective logos and icons are also subject to international copyright laws. Use thereof is explained in our <a href="http://wiki.documentfoundation.org/TradeMark_Policy" target="_blank">trademark policy</a>. LibreOffice was based on OpenOffice.org.</p>
+            <div id="DEBUG" class="debug">
+                <h3 class="bug">Help content debug info:</h3>
+                <p>This page is: <a href="https://opengrok.libreoffice.org/xref/help/source{$filename}" target="_blank"><xsl:value-of select="$filename"/></a></p>
+                <p>Title is: <xsl:value-of select="$title"/></p>
+                <p id="bm_module"></p>
+                <p id="bm_system"></p>
+            </div>
         </div>
     </footer>
     <script type="text/javascript" src="{$productversion}/{$lang}/bookmarks.js"/>