tdf#97745 Use system browser to display help pages

Some improvements (WIP)
* Use CSS grids
* Better language selector
* Better svg icons
* reorder some scripts, clean code
* favicon
* fix index

Change-Id: Idd55f41724cc3972c8b461ede5f1e975716c5290
Signed-off-by: Olivier Hallot <olivier.hallot@libreoffice.org>
Reviewed-on: https://gerrit.libreoffice.org/40316
Reviewed-by: Olivier Hallot <olivier.hallot@edx.srv.br>
Tested-by: Olivier Hallot <olivier.hallot@edx.srv.br>

2 files changed, 564 insertions, 467 deletions

diff --git a/help3xsl/default.css b/help3xsl/default.css
index d0ac1d303e..8ec98944f9 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -25,204 +25,12 @@
 
 */
 
-/* Document Structure */
-html{
-    background: #FFFFFF;
-}
-body {
-    padding: 0px;
-    background: #fff;
-    color: #333;
-    margin: 0 auto;
-    max-width: 900px;
-}
-
-/* Document Header */
-
-header {
-    background: #00a500;
-    padding: .5em 2em;
-    color: #fff;
-    line-height: 1;
-}
-
-header h1{
-    margin-bottom: 0;
-    color:white;
-}
-
-header nav{
-    float: right;
-/*    display:inline-block;*/
-}
-
-header nav select{
-    font-size: .8em;
-}
-
-
-header nav div{
-    font-size: .8em;
-}
-
-header nav div a {
-    font-weight: 300;
-    padding: .3em .5em
-}
-header nav a{
-    color: #fff;
-    display: inline-block;
-    padding: .3em .8em
-}
-
-header nav a:hover, header nav a:focus{
-    color: rgba(255,255,255,.6)
-}
-
-
-[role=main]{
-    padding:1.5em 3em;
-}
-
-/* Document Article */
-
-article{
-    padding: 1em 0;
-}
-
-/* Document Footer */
-
-footer{
-    background: #00a500;
-    color: #fff;
-    padding: .1em 3em;
-    text-align: center;
-}
-
-footer a{
-    color:#c2f6ba;
+body, p, h1, h2, h3, h4, h5, h6, .listitem, .listitemintable, .tablecontent, .tablecontentintable {
+  font-family: "Segoe UI", Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Tahoma, sans-serif;
 }
 
-/* tree view */
-
-.contents-treeview ul,
-.contents-treeview li
-{
-    padding: 0;
+body {
     margin: 0;
-    list-style: none;
-}
-
-.contents-treeview input
-{
-    position: absolute;
-    opacity: 0;
-}
-
-.contents-treeview
-{
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    user-select: none;
-}
-
-.contents-treeview a
-{
-    text-decoration: none;
-}
-
-.contents-treeview a:hover
-{
-    text-decoration: underline;
-}
-
-.contents-treeview input + label + ul
-{
-    margin: 0 0 0 22px;
-}
-
-.contents-treeview input ~ ul
-{
-    display: none;
-}
-
-.contents-treeview label,
-.contents-treeview label::before
-{
-    cursor: pointer;
-}
-
-.contents-treeview input:disabled + label
-{
-    cursor: default;
-    opacity: .6;
-}
-
-.contents-treeview input:checked:not(:disabled) ~ ul
-{
-    display: block;
-}
-
-.contents-treeview label,
-.contents-treeview label::before
-{
-    background: url("media/icon-themes/res/folderop.png") no-repeat;
-}
-
-.contents-treeview label,
-.contents-treeview a,
-.contents-treeview label::before
-{
-    display: inline-block;
-    height: 16px;
-    line-height: 16px;
-    vertical-align: middle;
-}
-
-.contents-treeview label
-{
-    background-position: 18px 0;
-}
-
-.contents-treeview label::before
-{
-    content: "";
-    width: 16px;
-    margin: 0 22px 0 0;
-    vertical-align: middle;
-    background-position: 0 -32px;
-}
-
-.contents-treeview input:checked + label::before
-{
-    background-position: 0 -16px;
-}
-
-/* webkit adjacent element selector bugfix */
-@media screen and (-webkit-min-device-pixel-ratio:0)
-{
-    .contents-treeview
-    {
-        -webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s;
-    }
-
-    @-webkit-keyframes webkit-adjacent-element-selector-bugfix
-    {
-        from
-        {
-            padding: 0;
-        }
-        to
-        {
-            padding: 0;
-        }
-    }
-}
-
-
-/* default from old LibreOffice help system */
-body, p, h1, h2, h3, h4, h5, h6, .listitem, .listitemintable, .tablecontent, .tablecontentintable {
-  font-family: "Segoe UI", Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Tahoma, sans-serif;
 }
 
 pre, .code, .codeintable, .example, .exampleintable, .literal, .literalintable, .path, .pathintable {
@@ -289,6 +97,7 @@ h4, h5, h6 {
 }
 
 .avis {
+/*    background-color: #EEEEEE;*/
 }
 
 .relatedtopics {
@@ -321,15 +130,15 @@ h4, h5, h6 {
 
 .bug {
   color: red;
-  border: 1px solid red;
 }
 
 .debug {
   border: 1px solid black;
   padding: 3px;
   display: show;
-  background-color:black;
-  text-align: left;
+  background-color:#222;
+  color:red;
+  text-align:left;
 }
 
 /* Basic code syntax highlight */
@@ -363,167 +172,486 @@ h4, h5, h6 {
   font-weight: bold;
 }
 
-.topmenu {
-  font-size: 12pt;
-  font-weight: bold;
-  padding: 1px;
-  border: solid 1px #18A303;
+
+#DisplayArea {
+  overflow: auto;
+/*   border: solid 1px; */
+  padding: 10px;
+  grid-area: main;
 }
 
-a:hover, a:focus{
-    color: #000;
+.mediabutton {
+  background-color: cyan;
 }
-a:active{
-    position: relative;
-    top:1px;
+
+.embedded {
+}
+
+header {
+    background-color: #18A303;
+    color: #fff;
+    height: 4em;
+    padding: .5em .5em .5em 1em;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    grid-area: header;
 }
 
-/* Document Tabs */
+.logo {
+    flex-shrink: 0;
+    color: #fff;
+    text-decoration: none;
+    float: left;
+}
 
-.js-on #tabs article
-{
-    display:none
+.logo p {
+    font-size: 1.5em;
 }
 
-#tabs, #tabs nav a.active{
-background: #f8f8f8;
-color: #111;
+.logo .symbol {
+    /*mask: url(libo-symbol.svg) no-repeat center;
+    mask-size: contain;
+    background-color: #fff;*/
+    background-image: url(media/navigation/libo-symbol-white.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+    width: 3em;
+    height: 3.7em;
+    float: left;
+    margin-right: .5em;
 }
 
-#tabs nav
-{
+header ul {
+    margin-top: .7em;
+    padding: 0;
+    display: none;
+}
+
+/* Create a style for the first level items */
+header > ul > li > a {
+    color: #333333;
+    background-color:#EEEEEE;
+    display: block;
+    line-height: 1.5em;
+    padding: 0.2em 0.4em;
+    text-decoration: none;
+    font-weight: bold;
+    border:1px solid;
+    border-color:#333333;
+    font-size: 1.5em;
+}
+
+header ul li {
+  /* make sure the width is honored */
+    flex-shrink: 0;
+    list-style-type: none;
+    z-index: 100;
+}
+
+
+header label {
+    cursor: pointer;
+    font-size: 1.2em;
     position: relative;
-    overflow: hidden;
-    display: table;
-    background: #bbb;
+    top: 2em;
+    float: right;
 }
 
-#tabs nav a
-{
-    width:200px;
-    display:table-cell;
-    padding:1em;
-    text-align:center;
-    color: #333;
+header input[type="checkbox"]:checked ~ ul {
+	background: #f1f1f1;
+	color: #444;
+	z-index: 100;
+    /* line them up horizontally */
+    display: flex;
+    flex-direction: row;
+    /* allow for scrolling */
+    overflow-x: auto;
+    /* make it smooth on iOS */
+    -webkit-overflow-scrolling: touch;
+    clear: both;    
+    text-align: center;
 }
 
-#tabs nav a:hover,#tabs nav a:focus
-{
-    background:#eee
+footer{
+    background: #18A303;
+    color: #fff;
+    padding: .1em 3em;
+    text-align: center;
+    grid-area: footer;
 }
 
-#tabs article
-{
-    padding:2em;
+footer a{
+    color:#c2f6ba;
 }
 
-.js-on #tabs article.active
-{
+.breadcrumbs ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  color: #333;
+}
+
+.breadcrumbs li {
+  display: inline-block;
+  position: relative;
+  padding-right: 2em;
+  margin: 0;
+}
+
+.breadcrumbs li:after {
+    content: '>';
+    position: absolute;
+    display: inline-block;
+    right: 0;
+    width: 2em;
+    text-align: center;
+}
+
+.breadcrumbs li:last-child {
+  font-weight: bold;
+}
+
+.breadcrumbs li:last-child:after {
+    content: '';
+}
+
+.breadcrumbs a {
+  text-decoration: none;
+  display: inline-block;
+  color: #333;
+  white-space: nowrap;
+}
+
+.breadcrumbs a:hover {
+    text-decoration: underline;
+}
+
+.accordion {
+    margin: 0 auto;
+    width: 100%;
+    height: 100%;
+    list-style-type: none;
+    grid-area: accordion;
+}
+
+.accordion > div {
+    display:none;
+}
+
+.accordion input[type=checkbox], header input[type=checkbox] {
+	position: absolute;
+	opacity: 0;
+}
+
+.accordion > label {
+	color: #666;
+	cursor: pointer;
+	display: block;
+	font-size: 1em;
+	height: 2.5em;
+	line-height: 2.5em;
+	margin-right: .25em;
+	padding: 0 1.5em;
+	text-align: center;
+}
+
+.accordion > label:nth-of-type(1) {
+    background: #E7FDE4;
+}
+
+.accordion > label:nth-of-type(2) {
+    background: #F7FEE5;
+}
+
+.accordion > label:nth-of-type(3) {
+    background: #E2FBF8;
+}
+
+.accordion > label:hover {
+	color: #222;
+}
+
+.accordion > label:nth-of-type(1):hover {
+	background: #D5FACF;
+}
+
+.accordion > label:nth-of-type(2):hover {
+	background: #F0FDD2;
+}
+
+.accordion > label:nth-of-type(3):hover {
+	background: #CAF4F0;
+}
+
+.accordion input[type=checkbox]:checked + label + div {
+	background: #f1f1f1;
+	color: #444;
+	z-index: 6;
     display:block;
 }
-#tabs #mobiles{
-display:none;
-border-radius: 0;
+
+#Index div#SearchBox {
+	background-color: #c2f6ba;
+	line-height:2em;
+	border: 1px solid #18A303;
+    vertical-align: center;
+    text-align: center;
+    top:2px;
+    left:2px;
+}
+#Index ul li {
+    list-style-type: none;
+}
+#Index p {
+	font-size: 16pt;
+	font-weight: bold;
 }
-#tabs #mobiles a, #tabs #mobiles a:first-child, #tabs #mobiles a:last-child{
-width:300px;
-border-radius: 0;
+#search-bar {
+    max-width: 300px;
 }
 
-#DisplayArea {
+.modules {
+    margin: 0;
+    padding: 1em;
+    overflow: hidden;
+    grid-area: modules;
+}
+.modules ul{
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+.modules ul li {
+    float: left;
+    list-style-type: none;
 }
 
-#Index {
-  overflow: auto;
+/* 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: 11pt;
+    float:left;
 }
 
-#Index ul{
-  list-style-type: none;
+.modules div {
+    /*mask: url(libo-symbol-white.svg) no-repeat center;
+    mask-size: contain;*/    
+    background-repeat: no-repeat;
+    background-size: contain;
+    float: left;
 }
 
-#SearchBox{
-background-color:#c2f6ba;
-border-color:green;
-border:solid 1px;
+/* We have to use SVG sprites for now, but CSS mask would be
+   the superior solution (commented out). It can be used,
+   when browser support improves and bugs are fixed. */
 
+.calc, .writer, .impress, .draw, .math, .base {
+    width: 21.5px;
+
+    height: 26px;
+
+    position: relative;
+    top: -8px;
+    margin-right: 5px;
 }
 
-#TopRight {
+.calc {
+    /*background-color: #179e03;*/
+    background-image: url(media/navigation/libo-calc.svg);
 }
 
-#TopLeft {
-  left: 1px;
-  position: fixed;
-  top: 35px;
+.writer {
+    /*background-color: #03669e;*/
+    background-image: url(media/navigation/libo-writer.svg);
 }
 
-#TopLang {
-  left: 1px;
-  position: fixed;
-  top: 1px;
-  right:30%
+.impress {
+    /*background-color: #9e3c03;*/
+    background-image: url(media/navigation/libo-impress.svg);
 }
 
-.mediabutton {
-  background-color: cyan;
+.draw {
+    /*background-color: #c49800;*/
+    background-image: url(media/navigation/libo-draw.svg);
 }
 
-.tintro {
-  color: white;
-  background-color: green;
-  font-family: Arial;
-  font-weight: bold;
-  font-size: 24pt;
-  border: 1px solid black;
-  padding-bottom: 6px;
-  margin-bottom: 6px;
+.math {
+    /*background-color: #626262;*/
+    background-image: url(media/navigation/libo-math.svg);
 }
 
-.embedded {
+.base {
+    /*background-color: #89039e;*/
+    background-image: url(media/navigation/libo-base.svg);
+}
+
+.chart {
+    background-image: url(media/navigation/libo-chart.svg);
+    width: 25.14px;
+    height: 25.4px;
+    position: relative;
+    top: -6.5px;
+    margin-right: 5px;
+}
+
+.basic {
+    background-image: url(media/navigation/libo-basic.svg);
+    width: 25.4px;
+    height: 25.4px;
+    position: relative;
+    top: -8.7px;
+    margin-right: 5px;
+}
+
+/* tree view */
+
+.contents-treeview ul,
+.contents-treeview li
+{
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+.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
+{
+    text-decoration: underline;
 }
 
-/* Media queries */
-@media screen and (min-width:900px)
+.contents-treeview input + label + ul
 {
-    body{font-size: 1.1em;}
+    margin: 0 0 0 22px;
 }
 
-@media screen and (max-width:600px)
+.contents-treeview input ~ ul
 {
-    #tabs nav{
     display: none;
-    position: relative;
-    }
-    #tabs #mobiles{
-    display:block;
-    }
-    #tabs article {
-    display:block;
-    }
 }
-@media screen and (max-width:480px)
+
+.contents-treeview label,
+.contents-treeview label::before
+{
+    cursor: pointer;
+    background: url("media/icon-themes/res/folderop.png") no-repeat;
+    color: #111;
+}
+
+.contents-treeview input:disabled + label
+{
+    cursor: default;
+    opacity: .6;
+}
+
+.contents-treeview input:checked:not(:disabled) ~ ul
+{
+    display: block;
+}
+
+.contents-treeview label,
+.contents-treeview a,
+.contents-treeview label::before
+{
+    height: 16px;
+    line-height: 16px;
+    vertical-align: middle;
+}
+
+.contents-treeview label
+{
+    background-position: 18px 0;
+}
+
+.contents-treeview label::before
+{
+    content: "";
+    width: 16px;
+    margin: 0 22px 0 0;
+    background-position: 0 -32px;
+    display: inline-block;
+}
+
+.contents-treeview input:checked + label::before
+{
+    background-position: 0 -16px;
+}
+
+/* webkit adjacent element selector bugfix */
+@media screen and (-webkit-min-device-pixel-ratio:0)
 {
-    blockquote{
-        float: none;
+    .contents-treeview
+    {
+        -webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s;
+    }
+
+    @-webkit-keyframes webkit-adjacent-element-selector-bugfix
+    {
+        from
+        {
+            padding: 0;
+        }
+        to
+        {
+            padding: 0;
+        }
     }
+}
 
-    header nav a{
-        padding:.7em .8em
+@media screen and (min-width:960px) {
+    body {
+        max-width: 960px;
+        margin: auto;
     }
-    header nav{
-        float: none;
-        margin: -.5em -3em 0;
-        background: #000;
-        overflow: hidden;
-        text-align: left
+    header > ul > li > a {
+        font-size: 1em;
     }
-    header nav a{
-        border-right: 1px solid #222
+    /* force a break after the language button so menu will go below */
+    header label {
+        page-break-after: always;
+        break-after: always;
     }
-    [role=main]{
-        padding:1.5em 2em;
+    /* change the language menu direction to stacked */
+    header input[type="checkbox"]:checked ~ ul {
+        flex-direction: column;
+        max-width: 7.5em;
+        float: right;
+        overflow-y: auto;
+        max-height: 30em;
     }
-    header nav div{
-        display: none;
+}
+
+@supports (grid-area: auto) {
+    @media screen and (min-width:960px) {
+    body {
+        max-width: 1280px;
+        margin: auto;
+        display: grid;
+        grid-template-columns: 320px 1fr;
+        grid-template-rows: 1fr minmax(1em, auto);
+        grid-template-areas: "header header"
+                             "accordion modules"
+                             "accordion main"
+                             "footer footer";
     }
 }
+}
diff --git a/help3xsl/online_transform.xsl b/help3xsl/online_transform.xsl
index 354195a848..eef2cb9826 100644
--- a/help3xsl/online_transform.xsl
+++ b/help3xsl/online_transform.xsl
@@ -129,27 +129,11 @@
         <!--<base href="file:///home/tdf/git/core/helpcontent2/source/html/"/> -->
         <base href="/"/>
         <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
-	<title><xsl:value-of select="$titleL10N"/></title>
+        <title><xsl:value-of select="$titleL10N"/></title>
+        <link rel="shortcut icon" href="{$productversion}/media/navigation/favicon.ico" />
         <link  type="text/css" href="{$productversion}/default.css" rel="Stylesheet" />
         <script type="text/javascript" src="{$productversion}/jquery-3.1.1.min.js"></script>
         <script type="text/javascript" src="{$productversion}/help.js"></script>
-        <!-- Piwik -->
-        <script type="text/javascript">
-            <![CDATA[
-            var _paq = _paq || [];
-            /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-            _paq.push(['trackPageView']);
-            _paq.push(['enableLinkTracking']);
-            (function() {
-            var u="//piwik.documentfoundation.org/";
-            _paq.push(['setTrackerUrl', u+'piwik.php']);
-            _paq.push(['setSiteId', '68']);
-            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-            g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
-            })();
-            ]]>
-        </script>
-        <!-- End Piwik Code -->
         <meta name="viewport" content="width=device-width,initial-scale=1"/>
     </head>
     <body lang="{$lang}" itemscope="true" itemtype="http://schema.org/TechArticle">
@@ -158,125 +142,120 @@
     <meta itemprop="datePublished" content="2017"/>
     <meta itemprop="headline" content="{$titleL10N}"/>
     <header>
-        <nav>
-            <select name="modules">
-                <option id="M_CALC" value="{$productversion}/{$lang}/text/scalc/main0000.html?DbPAR=CALC">Calc</option>
-                <option id="M_WRITER" value="{$productversion}/{$lang}/text/swriter/main0000.html?DbPAR=WRITER">Writer</option>
-                <option id="M_IMPRESS" value="{$productversion}/{$lang}/text/simpress/main0000.html?DbPAR=IMPRESS">Impress</option>
-                <option id="M_DRAW" value="{$productversion}/{$lang}/text/sdraw/main0000.html?DbPAR=DRAW">Draw</option>
-                <option id="M_CHART" value="{$productversion}/{$lang}/text/schart/main0000.html?DbPAR=CHART">Chart</option>
-                <option id="M_BASIC" value="{$productversion}/{$lang}/text/sbasic/shared/main0601.html?DbPAR=BASIC">Basic</option>
-                <option id="M_MATH" value="{$productversion}/{$lang}/text/smath/main0000.html?DbPAR=MATH">Math</option>
-                <option id="M_BASE" value="{$productversion}/{$lang}/text/shared/explorer/database/main.html?DbPAR=BASE">Base</option>
-            </select>
-            <select name="system">
-                <option id="S_WIN" value="{$productversion}/{$lang}{$htmlpage}?System=WIN">Windows</option>
-                <option id="S_UNIX" value="{$productversion}/{$lang}{$htmlpage}?System=UNIX">Linux</option>
-                <option id="S_MAC" value="{$productversion}/{$lang}{$htmlpage}?System=MAC">Mac</option>
-            </select>
-            <select name="language">
-                <option value="{$productversion}/en-US{$htmlpage}">EN-US</option>
-                <option value="{$productversion}/am{$htmlpage}">AM</option>
-                <option value="{$productversion}/ar{$htmlpage}">AR</option>
-                <option value="{$productversion}/ast{$htmlpage}">AST</option>
-                <option value="{$productversion}/bg{$htmlpage}">BG</option>
-                <option value="{$productversion}/bn{$htmlpage}">BN</option>
-                <option value="{$productversion}/bn-IN{$htmlpage}">BN-IN</option>
-                <option value="{$productversion}/bo{$htmlpage}">BO</option>
-                <option value="{$productversion}/bs{$htmlpage}">BS</option>
-                <option value="{$productversion}/ca{$htmlpage}">CA</option>
-                <option value="{$productversion}/ca-valencia{$htmlpage}">CA-Valencia</option>
-                <option value="{$productversion}/cs{$htmlpage}">CS</option>
-                <option value="{$productversion}/da{$htmlpage}">DA</option>
-                <option value="{$productversion}/de{$htmlpage}">DE</option>
-                <option value="{$productversion}/dz{$htmlpage}">DZ</option>
-                <option value="{$productversion}/el{$htmlpage}">EL</option>
-                <option value="{$productversion}/en-GB{$htmlpage}">EN-GB</option>
-                <option value="{$productversion}/en-ZA{$htmlpage}">EN-ZA</option>
-                <option value="{$productversion}/eo{$htmlpage}">EO</option>
-                <option value="{$productversion}/es{$htmlpage}">ES</option>
-                <option value="{$productversion}/et{$htmlpage}">ET</option>
-                <option value="{$productversion}/eu{$htmlpage}">EU</option>
-                <option value="{$productversion}/fi{$htmlpage}">FI</option>
-                <option value="{$productversion}/fr{$htmlpage}">FR</option>
-                <option value="{$productversion}/gl{$htmlpage}">GL</option>
-                <option value="{$productversion}/gu{$htmlpage}">GU</option>
-                <option value="{$productversion}/he{$htmlpage}">HE</option>
-                <option value="{$productversion}/hi{$htmlpage}">HI</option>
-                <option value="{$productversion}/hr{$htmlpage}">HR</option>
-                <option value="{$productversion}/hu{$htmlpage}">HU</option>
-                <option value="{$productversion}/id{$htmlpage}">ID</option>
-                <option value="{$productversion}/is{$htmlpage}">IS</option>
-                <option value="{$productversion}/it{$htmlpage}">IT</option>
-                <option value="{$productversion}/ja{$htmlpage}">JA</option>
-                <option value="{$productversion}/ka{$htmlpage}">KA</option>
-                <option value="{$productversion}/km{$htmlpage}">KM</option>
-                <option value="{$productversion}/ko{$htmlpage}">KO</option>
-                <option value="{$productversion}/lo{$htmlpage}">LO</option>
-                <option value="{$productversion}/lt{$htmlpage}">LT</option>
-                <option value="{$productversion}/lv{$htmlpage}">LV</option>
-                <option value="{$productversion}/mk{$htmlpage}">MK</option>
-                <option value="{$productversion}/nb{$htmlpage}">NB</option>
-                <option value="{$productversion}/ne{$htmlpage}">NE</option>
-                <option value="{$productversion}/nl{$htmlpage}">NL</option>
-                <option value="{$productversion}/nn{$htmlpage}">NN</option>
-                <option value="{$productversion}/om{$htmlpage}">OM</option>
-                <option value="{$productversion}/pl{$htmlpage}">PL</option>
-                <option value="{$productversion}/pt{$htmlpage}">PT</option>
-                <option value="{$productversion}/pt-BR{$htmlpage}">PT-BR</option>
-                <option value="{$productversion}/ro{$htmlpage}">RO</option>
-                <option value="{$productversion}/ru{$htmlpage}">RU</option>
-                <option value="{$productversion}/sid{$htmlpage}">SID</option>
-                <option value="{$productversion}/sk{$htmlpage}">SK</option>
-                <option value="{$productversion}/sl{$htmlpage}">SL</option>
-                <option value="{$productversion}/sq{$htmlpage}">SQ</option>
-                <option value="{$productversion}/sv{$htmlpage}">SV</option>
-                <option value="{$productversion}/ta{$htmlpage}">TA</option>
-                <option value="{$productversion}/tg{$htmlpage}">TG</option>
-                <option value="{$productversion}/tr{$htmlpage}">TR</option>
-                <option value="{$productversion}/ug{$htmlpage}">UG</option>
-                <option value="{$productversion}/uk{$htmlpage}">UK</option>
-                <option value="{$productversion}/vi{$htmlpage}">VI</option>
-                <option value="{$productversion}/zh-CN{$htmlpage}">ZH-CN</option>
-                <option value="{$productversion}/zh-TW{$htmlpage}">ZH-TW</option>
-            </select>
+        <a class="logo" href="https://helponline.libreoffice.org/">
+            <div class="symbol"></div>
+            <p>LibreOffice <xsl:value-of select="$productversion"/> Help</p>
+        </a>
+        <input id="langs" name="language-menu" type="checkbox"/>
+        <label for="langs" role="button">Language ▼</label>
+        <ul>
+            <li><a href="{$productversion}/en-US{$htmlpage}">EN-US</a></li>
+            <li><a href="{$productversion}/am{$htmlpage}">AM</a></li>
+            <li><a href="{$productversion}/ar{$htmlpage}">AR</a></li>
+            <li><a href="{$productversion}/ast{$htmlpage}">AST</a></li>
+            <li><a href="{$productversion}/bg{$htmlpage}">BG</a></li>
+            <li><a href="{$productversion}/bn{$htmlpage}">BN</a></li>
+            <li><a href="{$productversion}/bn-IN{$htmlpage}">BN-IN</a></li>
+            <li><a href="{$productversion}/bo{$htmlpage}">BO</a></li>
+            <li><a href="{$productversion}/bs{$htmlpage}">BS</a></li>
+            <li><a href="{$productversion}/ca{$htmlpage}">CA</a></li>
+            <li><a href="{$productversion}/ca-valencia{$htmlpage}">CA-Valencia</a></li>
+            <li><a href="{$productversion}/cs{$htmlpage}">CS</a></li>
+            <li><a href="{$productversion}/da{$htmlpage}">DA</a></li>
+            <li><a href="{$productversion}/de{$htmlpage}">DE</a></li>
+            <li><a href="{$productversion}/dz{$htmlpage}">DZ</a></li>
+            <li><a href="{$productversion}/el{$htmlpage}">EL</a></li>
+            <li><a href="{$productversion}/en-GB{$htmlpage}">EN-GB</a></li>
+            <li><a href="{$productversion}/en-ZA{$htmlpage}">EN-ZA</a></li>
+            <li><a href="{$productversion}/eo{$htmlpage}">EO</a></li>
+            <li><a href="{$productversion}/es{$htmlpage}">ES</a></li>
+            <li><a href="{$productversion}/et{$htmlpage}">ET</a></li>
+            <li><a href="{$productversion}/eu{$htmlpage}">EU</a></li>
+            <li><a href="{$productversion}/fi{$htmlpage}">FI</a></li>
+            <li><a href="{$productversion}/fr{$htmlpage}">FR</a></li>
+            <li><a href="{$productversion}/gl{$htmlpage}">GL</a></li>
+            <li><a href="{$productversion}/gu{$htmlpage}">GU</a></li>
+            <li><a href="{$productversion}/he{$htmlpage}">HE</a></li>
+            <li><a href="{$productversion}/hi{$htmlpage}">HI</a></li>
+            <li><a href="{$productversion}/hr{$htmlpage}">HR</a></li>
+            <li><a href="{$productversion}/hu{$htmlpage}">HU</a></li>
+            <li><a href="{$productversion}/id{$htmlpage}">ID</a></li>
+            <li><a href="{$productversion}/is{$htmlpage}">IS</a></li>
+            <li><a href="{$productversion}/it{$htmlpage}">IT</a></li>
+            <li><a href="{$productversion}/ja{$htmlpage}">JA</a></li>
+            <li><a href="{$productversion}/ka{$htmlpage}">KA</a></li>
+            <li><a href="{$productversion}/km{$htmlpage}">KM</a></li>
+            <li><a href="{$productversion}/ko{$htmlpage}">KO</a></li>
+            <li><a href="{$productversion}/lo{$htmlpage}">LO</a></li>
+            <li><a href="{$productversion}/lt{$htmlpage}">LT</a></li>
+            <li><a href="{$productversion}/lv{$htmlpage}">LV</a></li>
+            <li><a href="{$productversion}/mk{$htmlpage}">MK</a></li>
+            <li><a href="{$productversion}/nb{$htmlpage}">NB</a></li>
+            <li><a href="{$productversion}/ne{$htmlpage}">NE</a></li>
+            <li><a href="{$productversion}/nl{$htmlpage}">NL</a></li>
+            <li><a href="{$productversion}/nn{$htmlpage}">NN</a></li>
+            <li><a href="{$productversion}/om{$htmlpage}">OM</a></li>
+            <li><a href="{$productversion}/pl{$htmlpage}">PL</a></li>
+            <li><a href="{$productversion}/pt{$htmlpage}">PT</a></li>
+            <li><a href="{$productversion}/pt-BR{$htmlpage}">PT-BR</a></li>
+            <li><a href="{$productversion}/ro{$htmlpage}">RO</a></li>
+            <li><a href="{$productversion}/ru{$htmlpage}">RU</a></li>
+            <li><a href="{$productversion}/sid{$htmlpage}">SID</a></li>
+            <li><a href="{$productversion}/sk{$htmlpage}">SK</a></li>
+            <li><a href="{$productversion}/sl{$htmlpage}">SL</a></li>
+            <li><a href="{$productversion}/sq{$htmlpage}">SQ</a></li>
+            <li><a href="{$productversion}/sv{$htmlpage}">SV</a></li>
+            <li><a href="{$productversion}/ta{$htmlpage}">TA</a></li>
+            <li><a href="{$productversion}/tg{$htmlpage}">TG</a></li>
+            <li><a href="{$productversion}/tr{$htmlpage}">TR</a></li>
+            <li><a href="{$productversion}/ug{$htmlpage}">UG</a></li>
+            <li><a href="{$productversion}/uk{$htmlpage}">UK</a></li>
+            <li><a href="{$productversion}/vi{$htmlpage}">VI</a></li>
+            <li><a href="{$productversion}/zh-CN{$htmlpage}">ZH-CN</a></li>
+            <li><a href="{$productversion}/zh-TW{$htmlpage}">ZH-TW</a></li>
+        </ul>
+    </header>
+    <nav class="modules">
+        <ul>
+            <li><a href="{$productversion}/{$lang}/text/scalc/main0000.html?DbPAR=CALC"><div class="calc"></div>Calc</a></li>
+            <li><a href="{$productversion}/{$lang}/text/swriter/main0000.html?DbPAR=WRITER"><div class="writer"></div>Writer</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/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>
+            <li><a href="{$productversion}/{$lang}/text/smath/main0000.html?DbPAR=MATH"><div class="math"></div>Math</a></li>
+            <li><a href="{$productversion}/{$lang}/text/shared/explorer/database/main.html?DbPAR=BASE"><div class="base"></div>Base</a></li>
+        </ul>
+    </nav>
+
+    <div class="accordion">
+        <input id="accordion-1" name="accordion-menu" type="checkbox"/>
+        <label for="accordion-1" role="button">Contents</label>
+        <div id="Contents" class="contents-treeview"></div>
+        <input id="accordion-2" name="accordion-menu" type="checkbox"/>
+        <label for="accordion-2" role="button">Search</label>
+        <div id="content-2">
             <script type="text/javascript">
                 <![CDATA[
-                document.addEventListener('DOMContentLoaded',function() {
-                document.querySelector('select[name="modules"]').onchange=changeModuleHandler;
-                document.querySelector('select[name="system"]').onchange=changeSystemHandler;
-                document.querySelector('select[name="language"]').onchange=changeLangHandler;
-                },false);
-
-                function changeModuleHandler(event) {
-                // You can use “this” to refer to the selected element.
-                var system = getParameterByName("System");
-                window.open('/'+event.target.value + '&System=' + system,'_top');
-                }
-                function changeSystemHandler(event) {
-                // You can use “this” to refer to the selected element.
-                var module = getParameterByName("DbPAR");
-                window.open('/'+event.target.value + '&DbPAR=' + module,'_top');
-                }
-                function changeLangHandler(event) {
-                // You can use “this” to refer to the selected element.
-                var system = getParameterByName("System");
-                var module = getParameterByName("DbPAR");
-                window.open('/' + event.target.value  + '?DbPAR=' + module + '&System=' + system ,'_top');
-                }
+                (function() {
+                var cx = '010161382024564278136:oejldkqc20o';
+                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>
-        </nav>
-        <h1>LibreOffice <xsl:value-of select="$productversion"/><br/>Help Online</h1>
-    </header>
-    <section id="tabs">
-        <article data-title="{$titleL10N}">
-            <div id="DisplayArea" itemprop="articleBody">
-                <xsl:apply-templates select="/helpdocument/body"/>
+            <xsl:text disable-output-escaping="yes">&lt;gcse:search&gt;&lt;/gcse:search&gt;</xsl:text>
+        </div>
+        <input id="accordion-3" name="accordion-menu" type="checkbox"/>
+        <label for="accordion-3" role="button">Index</label>
+        <div id="Index">
+            <div id="SearchBox">
+                <p> &#32;&#x1f50e;&#32; <input id="search-bar" type="text"/></p>
             </div>
-        </article>
-        <article id="Index" data-title="Index">
-            <div id="SearchBox"><p>&#32;&#x1f50e;&#32;<input type="text" id="search-bar"/></p></div>
             <div id="Bookmarks">
                 <ul id="bookmarkCALC" hidden="true"></ul>
                 <ul id="bookmarkCHART" hidden="true"></ul>
@@ -288,33 +267,13 @@
                 <ul id="bookmarkSHARED"></ul>
                 <ul id="bookmarkBASIC" hidden="true"></ul>
             </div>
-        </article>
-        <article data-title="Search">
-            <div id="TopRight">
-                <script type="text/javascript">
-                    <![CDATA[
-                    (function() {
-                    var cx = '010161382024564278136:oejldkqc20o';
-                    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>
-        </article>
-        <article data-title="Contents">
-            <div id="Contents" class="contents-treeview"></div>
-        </article>
-    </section>
+        </div>
+    </div>
+    <div id="DisplayArea" itemprop="articleBody">
+        <xsl:apply-templates select="/helpdocument/body"/>
+    </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://creativecommons.org/licenses/by-sa/3.0/" target="_blank">Creative Commons Attribution-Share Alike 3.0 License</a>. This does not include the source code of LibreOffice, which is 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>
-    </footer>
-    <footer>
         <div class="debug">
             <h3 class="bug">Help content debug info:</h3>
             <p>This page is: <xsl:value-of select="$filename"/></p>
@@ -323,6 +282,8 @@
             <p id="bm_system"></p>
         </div>
     </footer>
+    <script type="text/javascript" src="{$productversion}/{$lang}/bookmarks.js"/>
+    <script type="text/javascript" src="{$productversion}/{$lang}/contents.js"/>
     <script type="text/javascript">
         <![CDATA[
         var module = getParameterByName("DbPAR");
@@ -334,15 +295,23 @@
         document.getElementById("bm_system").innerHTML ="System is: "+system;
         ]]>
     </script>
-    <script type="text/javascript" src="{$productversion}/{$lang}/bookmarks.js"/>
-    <script type="text/javascript" src="{$productversion}/{$lang}/contents.js"/>
-    <script type="text/javascript" src="{$productversion}/tabs.js"></script>
-    <script>
-        var myTabs = new tabs(document.getElementById("tabs"), "article", "h2").responsive("myTabs", {
-        prev: "Previous",
-        next: "Next"
-        });
+    <!-- Piwik -->
+    <script type="text/javascript">
+        <![CDATA[
+        var _paq = _paq || [];
+        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+        _paq.push(['trackPageView']);
+        _paq.push(['enableLinkTracking']);
+        (function() {
+        var u="//piwik.documentfoundation.org/";
+        _paq.push(['setTrackerUrl', u+'piwik.php']);
+        _paq.push(['setSiteId', '68']);
+        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+        g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
+        })();
+        ]]>
     </script>
+    <!-- End Piwik Code -->
 </body>
 </html>
 </xsl:template>