Switched to a sidebar layout. Art direction by Andreas Kainz

Markup and JS got simpler, layout got more robust.

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

4 files changed, 254 insertions, 375 deletions

diff --git a/help3xsl/default.css b/help3xsl/default.css
index 268b1ac4d8..0236011dc1 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -22,6 +22,11 @@
 +                           WESTERN LANGUAGES                       +
 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 
+We use px as the unit for navigation elements and fonts because we do
+not want them to scale with browser-set font size.
+We use rem as the unit for article and footer contents because they
+do not break anything related to layout by scaling.
+
 */
 
 body,
@@ -42,6 +47,9 @@ body {
     margin: 0;
     line-height: normal;
 }
+a {
+    color: #18A303;
+}
 pre,
 .code,
 .codeintable,
@@ -52,15 +60,14 @@ pre,
 .path,
 .pathintable {
     font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
-    margin-top: 1pt;
-    margin-bottom: 1pt;
+    margin: 0.08rem 0;
 }
 .acronym {
     font-weight: bold;
 }
 .related {
     font-weight: bold;
-    margin-top: 20pt;
+    margin-top: 1.67rem;
     border-top: 1px solid black;
 }
 .emph,
@@ -87,30 +94,30 @@ h3,
 h4,
 h5,
 h6 {
-    margin-bottom: 8pt;
+    margin-bottom: 0.67rem;
     color: #18A303;
 }
 p,
 td {
-    font-size: 14pt;
+    font-size: 1.17rem;
     margin: 2px 2px 2px 2px;
 }
 h1 {
-    font-size: 22pt;
+    font-size: 1.83rem;
     font-weight: 300;
     border-bottom: 3px solid #18A303;
     padding-bottom: 6px;
 }
 h2 {
-    font-size: 18pt;
+    font-size: 1.5rem;
 }
 h3 {
-    font-size: 16pt;
+    font-size: 1.33rem;
 }
 h4,
 h5,
 h6 {
-    font-size: 14pt;
+    font-size: 1.17rem;
 }
 .avis {
     /*    background-color: #EEEEEE;*/
@@ -178,11 +185,11 @@ h6 {
 }
 .infopage {
     color: green;
-    font-size: 16pt;
+    font-size: 1.33rem;
     font-weight: bold;
 }
 .topmenu {
-    font-size: 12pt;
+    font-size: 1rem;
     font-weight: bold;
     padding: 1px;
     border: solid 1px #18A303;
@@ -201,20 +208,22 @@ h6 {
     background-color: green;
     font-family: Arial;
     font-weight: bold;
-    font-size: 24pt;
+    font-size: 2rem;
     border: 1px solid black;
     padding-bottom: 6px;
     margin-bottom: 6px;
 }
 .embedded {}
+.header-extrawurst {
+    grid-area: header;
+}
 header {
     background-color: #18A303;
     color: #fff;
-    height: 4em;
-    padding: .5em .5em .5em 1em;
-    grid-area: header;
+    height: 64px;
+    padding: 8px 8px 8px 16px;
 }
-.logo-menu-container {
+.logo-container {
     display: flex;
     justify-content: space-between;
 }
@@ -222,75 +231,19 @@ header {
     color: #fff;
     text-decoration: none;
     display: flex;
-    align-items: flex-end;
 }
 .logo p {
-    font-size: 1.5em;
+    font-size: 24px;
 }
 .logo .symbol {
     background-image: url(media/navigation/libo-symbol-white.svg);
     background-repeat: no-repeat;
     background-size: contain;
-    width: 3em;
-    height: 3.7em;
-    margin-right: .5em;
-}
-header nav {
-    margin-top: .7em;
-    padding: 0;
-    display: none;
-    border: 1px solid #333;
-    position: relative;
-}
-/* Create a style for the first level items */
-
-header nav a, .mobile-lang a {
-    color: #333;
-    background-color: #EEEEEE;
-    display: block;
-    line-height: 1.5em;
-    padding: 0.2em 0.4em;
-    text-decoration: none;
-    font-weight: bold;
-    border-width: 0 1px 0 0;
-    border-style: solid;
-    border-color: #333;
-    font-size: 1.5em;
-    flex-shrink: 0;
-    z-index: 100;
-    white-space: nowrap;
-}
-
-header nav a:last-child, .mobile-lang a:last-child {
-    border-right-width: 0;
+    width: 52px;
+    height: 60px;
+    margin-right: 10px;
 }
-
-header label {
-    cursor: pointer;
-    font-size: 1.2em;
-    position: relative;
-    top: 2em;
-    float: right;
-    display: none;
-}
-header input[type="checkbox"]:checked ~ nav {
-    background: #f1f1f1;
-    color: #333;
-    z-index: 100;
-    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;
+.lang nav, .modules nav {
     z-index: 100;
     /* line them up horizontally */
     display: flex;
@@ -300,21 +253,28 @@ header input[type="checkbox"]:checked ~ nav {
     overflow-y: hidden;
     /* make it smooth on iOS */
     -webkit-overflow-scrolling: touch;
-    clear: both;
     text-align: center;
 }
-footer {
-    background: #18A303;
+.lang nav a, .modules nav a {
     color: #fff;
-    padding: .1em 3em;
-    text-align: center;
-    grid-area: footer;
+    background-color: #31363A;
+    display: block;
+    line-height: 1.5;
+    padding: 3px 6px;
+    text-decoration: none;
+    font-size: 24px;
+    flex-shrink: 0;
+    z-index: 100;
+    white-space: nowrap;
 }
-footer .headerfooter-center {
-    margin-top: 20px;
+footer {
+    color: #333;
+    border-top: 1px solid #18A303;
+    padding: 20px 0 0 0;
+    margin: 20px 0 0 0;
 }
-footer a {
-    color: #c2f6ba;
+footer p {
+    font-size: 1rem;
 }
 .breadcrumbs ul {
     list-style-type: none;
@@ -325,7 +285,7 @@ footer a {
 .breadcrumbs li {
     display: inline-block;
     position: relative;
-    padding-right: 2em;
+    padding-right: 24px;
     margin: 0;
 }
 .breadcrumbs li:after {
@@ -333,7 +293,7 @@ footer a {
     position: absolute;
     display: inline-block;
     right: 0;
-    width: 2em;
+    width: 24px;
     text-align: center;
 }
 .breadcrumbs li:last-child {
@@ -351,120 +311,93 @@ footer a {
 .breadcrumbs a:hover {
     text-decoration: underline;
 }
-.accordion {
-    margin: 0 auto;
-    width: 100%;
-    height: 100%;
-    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] {
+.modules input[type=checkbox], .lang input[type=checkbox],
+.contents-treeview input[type=checkbox], aside input[type=checkbox] {
     position: absolute;
     opacity: 0;
 }
-.accordion input[type=checkbox] {
-    display: none;
-}
-.acc-panel > label {
-    color: #333;
+label[for=accordion-1] {
+    text-decoration: underline;
+    color: #18A303;
     cursor: pointer;
     display: block;
-    font-size: 1em;
-    height: 2.5em;
-    line-height: 2.5em;
-    padding: 0 1.5em;
-    text-align: center;
-}
-.acc-panel:nth-of-type(2) > label {
-    background: #F0FDD2;
-}
-.acc-panel:nth-of-type(3) > label {
-    background: #CAF4F0;
+    padding: 10px 0 10px 20px;
+    font-size: 29px;
+    line-height: .6;
 }
-.acc-panel > label:hover {
-    color: #222;
+label[for=accordion-1]:after {
+    font-size: 44px;
+    content:"⌄";
 }
-.acc-panel:nth-of-type(2) > label:hover {
-    background: #D4F489;
-}
-.acc-panel:nth-of-type(3) > label:hover {
-    background: #6ABFB6;
+aside input[type=checkbox] ~ .contents-treeview {
+    display: none;
 }
-.accordion input[type=checkbox]:checked + label + div {
-    background: #f1f1f1;
+aside input[type=checkbox]:checked ~ .contents-treeview {
     color: #333;
     z-index: 6;
     display: block;
-    padding: 15px 0;
+    padding: 0 0 0 20px;
 }
-#Index div#SearchBox {
-    background-color: #c2f6ba;
-    line-height: 2em;
-    border: 1px solid #18A303;
-    vertical-align: center;
-    text-align: center;
-    top: 2px;
-    left: 2px;
+.index-label {
+    float: left;
+    font-size: 29px;
+    color: #18A303;
+    margin-right: 10px;
+}
+#SearchBox {
+    padding-left: 20px;
+    margin: 20px 0 20px 0;
+}
+#SearchBox p {
+    font-size: 29px;
+}
+#Index {
+    margin-top: 10px;
 }
 #Index ul {
-    padding-left:15px;
+    padding-left: 15px;
 }
 #Index ul li {
     list-style-type: none;
-    font-size: 14pt;
+    font-size: 16px;
+    margin-bottom: 5px;
 }
-#Index p {
-    font-size: 16pt;
+#Bookmarks p {
+    font-size: 22px;
     font-weight: bold;
+    color: #18A303;
 }
 #search-bar {
-    max-width: 90%;
+    margin-top: 10px;
 }
-.modules {
-    margin: 0;
-    padding: 1em;
-    overflow: hidden;
-    grid-area: modules;
+#Bookmarks {
+    padding: 0 20px;
 }
-.modules ul {
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
+.google-search {
+    max-width: 300px;
+    margin: 0 auto;
 }
-.modules ul li {
-    float: left;
-    list-style-type: none;
+.modules {
+    border-bottom: 2px solid #f3f3f3;
 }
-/* Create a style for the first level items */
-
-.modules > ul > li > a {
-    color: #000;
-    display: block;
-    line-height: 1.5em;
-    padding: 0.5em 0.5em;
-    text-decoration: none;
-    font-weight: bold;
-    font-size: 14pt;
-    float: left;
+.modules label:after, .lang label:after {
+    font-size: 30px;
+    color: #fff;
+    content:"⌄";
 }
-.modules div {
+.lang label, .modules label {
+    display: none;
+}
+.modules nav div {
     background-repeat: no-repeat;
     background-size: contain;
     float: left;
+    display: none;
 }
 .calc,
 .chart,
@@ -510,7 +443,7 @@ header input[type=checkbox],
     padding: 0;
     margin: 0;
     list-style: none;
-    font-size: 14pt;
+    font-size: 16px;
 }
 .contents-treeview {
     -moz-user-select: none;
@@ -530,9 +463,8 @@ header input[type=checkbox],
     display: none;
 }
 .contents-treeview label,
-.contents-treeview label::before {
+.contents-treeview label:before {
     cursor: pointer;
-    background: url("media/icon-themes/res/folderop.png") no-repeat;
     color: #111;
 }
 .contents-treeview input:disabled + label {
@@ -552,10 +484,11 @@ header input[type=checkbox],
 .contents-treeview label {
     background-position: 18px 0;
 }
-.contents-treeview label::before {
-    content: "";
+.contents-treeview label:before {
+    content: "🖿";
+    color: #18A303;
     width: 16px;
-    margin: 0 22px 0 0;
+    margin: 0 5px 0 0;
     background-position: 0 -32px;
     display: inline-block;
 }
@@ -578,63 +511,89 @@ header input[type=checkbox],
     }
 }
 @media screen and (min-width: 960px) {
-    .content-center {
-        max-width: 1024px;
-        margin: 0 auto;
-        grid-area: content-center;
-    }
-    .mobile-lang {
+    .lang nav {
         display: none;
     }
-    .headerfooter-center {
-        max-width: 1024px;
-        margin: 0 auto;
-    }
-    header nav a {
-        font-size: 1em;
+    .lang nav a {
+        font-size: 19px;
         white-space: normal;
-        border-width: 0 0 1px 0;
     }
-    header nav a:last-child {
-        border-bottom-width: 0;
-    }
-    header label {
+    .lang label, .modules label {
         cursor: pointer;
-        font-size: 1.2em;
+        color: #fff;
+        font-size: 19px;
         position: relative;
-        top: 2em;
-        float: right;
+        top: 40px;
         display: block;
     }
-    /* change the language menu direction to stacked */
+    /* change the menu direction to stacked */
 
-    header input[type="checkbox"]:checked ~ nav {
+    .lang input[type="checkbox"]:checked ~ nav, .modules input[type="checkbox"]:checked ~ nav {
         display: flex;
         flex-direction: column;
-        max-width: 7.5em;
-        float: right;
+        max-width: 120px;
         overflow-y: auto;
-        max-height: 30em;
+        overflow-x: hidden;
+        max-height: 480px;
+        position: absolute;
+        top: 80px;
     }
-    .accordion {
-        display: flex;
-        width: 960px;
-        max-height: 50px;
+    .modules input[type="checkbox"]:checked ~ nav {
+        background-color: #31363A;
+        text-align: left;
     }
-    .accordion > div {
-        flex-basis: 320px;
+    .modules nav {
+        display: none;
     }
-    .acc-panel:nth-of-type(2) > label, #Contents {
-        margin-left: .25em;
+    .modules nav div {
+        display: block;
+    }
+    .modules nav a {
+        font-size: 19px;
+    }
+    aside {
+        border-right: 5px solid #19A303;
+        float: left;
+        width: 320px;
+        grid-area: sidebar;
+    }
+    .google-search {
+        margin: 0;
+        position: absolute;
+        top: 19px;
+        left: 860px;
+    }
+    .lang {
+        position: absolute;
+        top: 0;
+        left: 200px;
+    }
+    .modules {
+        width: 120px;
+        position: absolute;
+        top: 0;
+        left: 80px;
+        border: none;
+    }
+    label[for=accordion-1] {
+        background-color: transparent;
+        text-decoration: none;
     }
-    .acc-panel > label {
-        margin-right: .25em;
+     label[for=accordion-1]:hover {
+        background-color: transparent;
     }
-    .accordion input[type=checkbox]:checked + label + div {
-        max-width: 316px;
+     label[for=accordion-1]:after {
+        content: "";
     }
     #DisplayArea {
-        padding: 10px 150px;
+        padding: 10px 50px;
+        width: 800px;
+    }
+    #Contents {
+        color: #333;
+        z-index: 6;
+        display: block;
+        padding: 0 0 0 20px;
     }
     #search-bar {
         max-width: 290px;
@@ -647,16 +606,7 @@ header input[type=checkbox],
             grid-template-columns: 320px 1fr;
             grid-template-rows: 1fr minmax(1em, auto);
             grid-template-areas: "header header"
-                                 "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"
+                                 "sidebar main"
         }
     }
 }
diff --git a/help3xsl/help.js b/help3xsl/help.js
index 04b02e5261..13861024f2 100644
--- a/help3xsl/help.js
+++ b/help3xsl/help.js
@@ -7,7 +7,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-// Used to set Application in caseinline=APP
+// Used to set Apllication in caseinlie=APP
 function setModule(module){
     if (module == null){module="WRITER"}
     var itemspan = document.getElementsByTagName("span");
@@ -120,17 +120,7 @@ $(document).ready(function() {
         }, 200);
     });
 
-    //maintain only one panel open
-    $('input[name="accordion-menu"]').on('change', function(){
-        $('input[name="accordion-menu"]').not(this).prop('checked', false);
-    });
-    //focus index search input clicking on Index panel
-    $('#accordion-2').on('change', function(){
-        if($(this).is(':checked')){
-            $('#search-bar').focus();
-            //prevent all results to be shown
-            $("#Bookmarks").toggle($('#search-bar').val().length > 2);
-        }
-    });
+    //prevent all results to be shown
+    $("#Bookmarks").toggle($('#search-bar').val().length > 2);
 });
 /* vim:set shiftwidth=4 softtabstop=4 expandtab cinoptions=b1,g0,N-s cinkeys+=0=break: */
diff --git a/help3xsl/localized.xsl b/help3xsl/localized.xsl
index 584d4bec4d..094da06172 100644
--- a/help3xsl/localized.xsl
+++ b/help3xsl/localized.xsl
@@ -94,6 +94,16 @@ Stylesheet map language-dependent parameters and translation
 </xsl:choose>
 </xsl:template>
 
+<xsl:template name="getModules">
+    <xsl:param name="lang"/>
+    <xsl:choose>
+        <xsl:when test="$lang='en-US'"><xsl:text>Module</xsl:text></xsl:when>
+        <xsl:when test="$lang='en-GB'"><xsl:text>Module</xsl:text></xsl:when>
+        <xsl:when test="$lang='en-ZA'"><xsl:text>Module</xsl:text></xsl:when>
+        <xsl:otherwise><xsl:text>Module</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 446c5ed39b..ab787411c4 100644
--- a/help3xsl/online_transform.xsl
+++ b/help3xsl/online_transform.xsl
@@ -135,19 +135,33 @@
         <meta itemprop="datePublished" content="2017"/>
         <meta itemprop="headline" content="{$titleL10N}"/>
     </xsl:if>
-    <header>
-        <div class="headerfooter-center">
-            <input id="langs" name="language-menu" type="checkbox"/>
-            <div class="logo-menu-container">
+    <div class="header-extrawurst">
+        <header>
+            <div class="logo-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">
+        </header>
+        <div class="modules">
+            <input id="modules" name="modules" type="checkbox"/>
+            <label for="modules"><xsl:call-template name="getModules"><xsl:with-param name="lang" select="$lang"/></xsl:call-template></label>
+            <nav>
+                <a href="{$productversion}/{$lang}/text/swriter/main0000.html?DbPAR=WRITER"><div class="writer"></div>Writer</a>
+                <a href="{$productversion}/{$lang}/text/scalc/main0000.html?DbPAR=CALC"><div class="calc"></div>Calc</a>
+                <a href="{$productversion}/{$lang}/text/simpress/main0000.html?DbPAR=IMPRESS"><div class="impress"></div>Impress</a>
+                <a href="{$productversion}/{$lang}/text/sdraw/main0000.html?DbPAR=DRAW"><div class="draw"></div>Draw</a>
+                <a href="{$productversion}/{$lang}/text/shared/explorer/database/main.html?DbPAR=BASE"><div class="base"></div>Base</a>
+                <a href="{$productversion}/{$lang}/text/smath/main0000.html?DbPAR=MATH"><div class="math"></div>Math</a>
+                <a href="{$productversion}/{$lang}/text/schart/main0000.html?DbPAR=CHART"><div class="chart"></div>Chart</a>
+                <a href="{$productversion}/{$lang}/text/sbasic/shared/main0601.html?DbPAR=BASIC"><div class="basic"></div>Basic</a>
+            </nav>
+        </div>
+        <xsl:if test="$online">
+            <div class="lang">
+                <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>
@@ -215,139 +229,54 @@
                     <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>
+            </div>
         </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-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>
+    <aside>
+        <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 id="Index">
+            <div id="SearchBox">
+                <div class="index-label"><xsl:call-template name="getIndex"><xsl:with-param name="lang" select="$lang"/></xsl:call-template></div>
+                <p> &#32;&#x1f50e;&#32; </p>
+                <input id="search-bar" type="text"/>
             </div>
-            <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 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 id="DisplayArea" itemprop="articleBody">
-            <xsl:apply-templates select="/helpdocument/body"/>
-        </div>
-    </div>
-    <footer>
-        <div class="headerfooter-center">
+    </aside>
+    <div id="DisplayArea" itemprop="articleBody">
+        <xsl:apply-templates select="/helpdocument/body"/>
+        <footer>
+            <xsl:if test="$online">
+                <div class="google-search">
+                    <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>
+            </xsl:if>
             <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>
@@ -356,8 +285,8 @@
                 <p id="bm_module"></p>
                 <p id="bm_system"></p>
             </div>
-        </div>
-    </footer>
+        </footer>
+    </div>
     <script type="text/javascript" src="{$productversion}/{$lang}/bookmarks.js"/>
     <script type="text/javascript" src="{$productversion}/{$lang}/contents.js"/>
     <xsl:choose>