Merge pull request #1215 from marianoguerra/improve-docs-style

Merge PR-1215 from 'marianoguerra/improve-docs-style'

OTP-14371
Improve Documentation Style

16 files changed, 546 insertions, 295 deletions

diff --git a/lib/erl_docgen/priv/css/Makefile b/lib/erl_docgen/priv/css/Makefile
index c317411d32..e3d2ee7e3f 100644
--- a/lib/erl_docgen/priv/css/Makefile
+++ b/lib/erl_docgen/priv/css/Makefile
@@ -39,7 +39,8 @@ RELSYSDIR = $(RELEASE_PATH)/lib/erl_docgen-$(VSN)
 
 
 CSS_FILES = \
-	otp_doc.css
+	otp_doc.css \
+	highlight.css
 
 
 # ----------------------------------------------------
diff --git a/lib/erl_docgen/priv/css/highlight.css b/lib/erl_docgen/priv/css/highlight.css
new file mode 100644
index 0000000000..d5bd1d2a9a
--- /dev/null
+++ b/lib/erl_docgen/priv/css/highlight.css
@@ -0,0 +1,96 @@
+/*
+
+Atom One Light by Daniel Gamage
+Original One Light Syntax theme from https://github.com/atom/one-light-syntax
+
+base:    #fafafa
+mono-1:  #383a42
+mono-2:  #686b77
+mono-3:  #a0a1a7
+hue-1:   #0184bb
+hue-2:   #4078f2
+hue-3:   #a626a4
+hue-4:   #50a14f
+hue-5:   #e45649
+hue-5-2: #c91243
+hue-6:   #986801
+hue-6-2: #c18401
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #383a42;
+  background: #fafafa;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #a0a1a7;
+  font-style: italic;
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-formula {
+  color: #a626a4;
+}
+
+.hljs-section,
+.hljs-name,
+.hljs-selector-tag,
+.hljs-deletion,
+.hljs-subst {
+  color: #e45649;
+}
+
+.hljs-literal {
+  color: #0184bb;
+}
+
+.hljs-string,
+.hljs-regexp,
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta-string {
+  color: #50a14f;
+}
+
+.hljs-built_in,
+.hljs-class .hljs-title {
+  color: #c18401;
+}
+
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-type,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-number {
+  color: #986801;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-title {
+  color: #4078f2;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
diff --git a/lib/erl_docgen/priv/css/otp_doc.css b/lib/erl_docgen/priv/css/otp_doc.css
index 219740a557..844aad2945 100644
--- a/lib/erl_docgen/priv/css/otp_doc.css
+++ b/lib/erl_docgen/priv/css/otp_doc.css
@@ -1,34 +1,39 @@
 /* standard OTP style sheet */
 body {
-  background: white;
-  font-family: Verdana, Arial, Helvetica, sans-serif;
+  background: #fefefe;
+  color: #1a1a1a;
+  font-family: sans-serif;
   margin: 0;
   padding: 0;
   border: 0;
   overflow: scroll;
   height: 100%;
   max-height: 100%;
+  line-height: 1.2em;
+  font-size: 16px;
 }
 
-th            { font-family: Verdana, Arial, Helvetica, sans-serif }
-td            { font-family: Verdana, Arial, Helvetica, sans-serif }
-p             { font-family: Verdana, Arial, Helvetica, sans-serif }
+h1, h2, h3, h4, h5, h6{
+ line-height: 1.2em;
+}
+
+p             { max-width: 42em }
 
-.header       { background: #222; color: #fff }
+.header       { background: #222; color: #fefefe }
 .top          { background: #efe }
 .otp          { background: #efe }
 .erlang       { background: #ffe }
 .otp2         { background: #efe }
 .app          { background: #ffe }
 
-a:link         { color: blue; text-decoration: none }
-a:active       { color: blue; text-decoration: none }
-a:visited      { color: blue; text-decoration: none }
+a:link         { color: #1862ab; text-decoration: none }
+a:active       { color: #1c7cd6; text-decoration: none }
+a:visited      { color: #1b6ec2; text-decoration: none }
 
 #container {
   width: 100%;
   margin: 0;
-  background-color: #fff;
+  background-color: #fefefe;
 }
 
 #leftnav {
@@ -41,11 +46,12 @@ a:visited      { color: blue; text-decoration: none }
   overflow:auto;
   margin: 0;
   padding: 1px;
-  border-right: 1px solid red;
+  border-right: 1px solid #ccc;
 }
 
 #content {
   margin-left: 340px; /* set left value to WidthOfFrameDiv */
+  max-width: 42em;
 }
 
 .frontpage 
@@ -61,66 +67,67 @@ a:visited      { color: blue; text-decoration: none }
 .footer 
 {
   margin: 15px; /* Magins for inner DIV inside each DIV (to provide padding) */
+  text-align: center;
 }
 
-span.bold_code   { font-family: Courier, monospace; font-weight: bold }
-span.code        { font-family: Courier, monospace; font-weight: normal }
+.bold_code   { font-family: mono, Courier, monospace; font-weight: bold }
+.code        {
+ font-family: mono, Courier, monospace;
+ font-weight: normal;
+ background-color: #f3f3f3;
+}
 
 .note, .warning, .do, .dont {
-  border: solid black 1px;
-  margin: 1em 3em;
+  border: 1px solid #495057;
+  margin: 1em 0;
 }
 .note .label {
-  background: #30d42a;
-  color: white;
+  background-color: #2b8a3e;
+  color: #fefefe;
   font-weight: bold;
-  padding: 5px 10px;
+  padding: 0.5em 1em;
 }
 .note .content {
-  background: #eafeea;
-  color: black;
+  background: #f8f9fa;
   line-height: 120%;
-  font-size: 90%;
-  padding: 5px 10px;
+  font-size: 0.9em;
+  padding: 0.5em 1em;
 }
 .warning .label {
-  background: #C00;
-  color: white;
+  background: #c92a2a;
+  color: #fefefe;
   font-weight: bold;
-  padding: 5px 10px;
+  padding: 0.5em 1em;
 }
 .warning .content {
-  background: #FFF0F0;
-  color: black;
+  background-color: #f8f9fa;
   line-height: 120%;
-  font-size: 90%;
-  padding: 5px 10px;
+  font-size: 0.9em;
+  padding: 0.5em 1em;
 }
 .do .label {
-  background: #30d42a;
-  color: white;
+  background-color: #2b8a3e;
+  color: #fefefe;
   font-weight: bold;
-  padding: 5px 10px;
+  padding: 0.5em 1em;
 }
 .do .content {
-  background: #eafeea;
-  color: black;
+  background: #f8f9fa;
   line-height: 120%;
-  font-size: 90%;
-  padding: 5px 10px;
+  font-size: 0.9em;
+  padding: 0.5em 1em;
 }
 .dont .label {
-  background: #C00;
-  color: white;
+  background: #c92a2a;
+  color: #fefefe;
   font-weight: bold;
-  padding: 5px 10px;
+  padding: 0.5em 1em;
 }
 .dont .content {
-  background: #FFF0F0;
-  color: black;
+  background-color: #f8f9fa;
   line-height: 120%;
-  font-size: 90%;
-  padding: 5px 10px;
+  font-size: 0.9em;
+  padding: 0.5em 1em;
 }
 
 .quote {
@@ -128,19 +135,134 @@ span.code        { font-family: Courier, monospace; font-weight: normal }
 }
 
 .example {
-  background-color:#eeeeff;
-  padding: 0px 10px;
+  background-color:#f1f3f5;
+  border: 1px solid #dee2e6;
+  padding: 0.5em 1em;
+  margin: 1em 0;
+  font-size: 0.7em;
 }
 .extrafrontpageinfo {
   color: #C00;
   font-weight: bold;
-  font-size: 120%;
+  font-size: 1.2em;
 }
 
-pre          { font-family: Courier, monospace; font-weight: normal }
+pre {
+ font-family: mono, Courier, monospace;
+ font-weight: normal;
+ margin: 0;
+}
 
-.REFBODY     { margin-left: 13mm }
 
-.REFTYPES    { margin-left: 8mm }
+.exports-body, .data-types-body, .REFBODY{
+ margin-left: 2em;
+}
+.REFTYPES    { margin-left: 1.5em }
 
 footer       { }
+
+.erlang-logo-wrapper{
+ text-align: center;
+ margin-bottom: 1em;
+}
+
+.main-title{
+ text-align: center;
+}
+
+.main-description{
+ text-align: center;
+ margin: 2em 0;
+ font-size: 1.5em;
+ line-height: 1.5em;
+}
+
+.doc-table-wrapper, .doc-image-wrapper{
+ width: 100%;
+}
+
+.doc-image-wrapper{
+ text-align: center;
+}
+
+.doc-table, .doc-image{
+ min-width: 50%;
+ margin: 0 auto;
+ font-size: 0.7em;
+}
+
+.doc-table-caption, .doc-image-caption{
+ margin-top: 1em;
+ font-style: italic;
+ text-align: center;
+}
+
+table {
+ border-collapse: collapse;
+ min-width: 50%;
+ margin: 1em;
+}
+
+table, th, td {
+ border: 1px solid #666;
+}
+
+th, td {
+ padding: 0.5em;
+ text-align: left;
+}
+
+tr:hover {
+ background-color: #f5f5f5;
+}
+
+tr:nth-child(even) {
+ background-color: #f2f2f2;
+}
+
+th {
+ background-color: #777;
+ color: #fefefe;
+}
+
+.section-title, .section-subtitle, .section-version{
+ text-align: center;
+ margin: 0;
+}
+
+.section-title{
+ font-weight: bold;
+}
+
+.section-version{
+ font-size: small;
+}
+
+.expand-collapse-items{
+ font-size: small;
+}
+
+h3>a{
+ color: #1a1a1a !important;
+}
+
+hr{
+  border: 0;
+  border-top: 1px solid #aaa;
+}
+
+.section-links, .panel-sections, .expand-collapse-items{
+ padding: 0 1em;
+}
+
+.section-links, .panel-sections{
+ margin-top: 0;
+}
+
+a > .code {
+ color: #1862ab;
+}
+
+.func-types-title{
+ font-size: 1em;
+}
diff --git a/lib/erl_docgen/priv/images/erlang-logo.gif b/lib/erl_docgen/priv/images/erlang-logo.gif
index abf5f225d7..ae13168429 100644
--- a/lib/erl_docgen/priv/images/erlang-logo.gif
+++ b/lib/erl_docgen/priv/images/erlang-logo.gif
diff --git a/lib/erl_docgen/priv/images/erlang-logo.png b/lib/erl_docgen/priv/images/erlang-logo.png
index 56291aac15..41bba97417 100644
--- a/lib/erl_docgen/priv/images/erlang-logo.png
+++ b/lib/erl_docgen/priv/images/erlang-logo.png
diff --git a/lib/erl_docgen/priv/js/flipmenu/Makefile b/lib/erl_docgen/priv/js/flipmenu/Makefile
index 06a13defca..ad6d4acb6c 100644
--- a/lib/erl_docgen/priv/js/flipmenu/Makefile
+++ b/lib/erl_docgen/priv/js/flipmenu/Makefile
@@ -76,6 +76,7 @@ release_spec: opt
 release_docs_spec:
 	$(INSTALL_DIR) "$(RELEASE_PATH)/doc/js/flipmenu"
 	$(INSTALL_DATA) $(JS_FILES) $(GIF_FILES) "$(RELEASE_PATH)/doc/js/flipmenu"
+	$(INSTALL_DATA) ../highlight.js ../highlight.pack.js "$(RELEASE_PATH)/doc/js/"
 
 release_tests_spec:
 
diff --git a/lib/erl_docgen/priv/js/flipmenu/flip_closed.gif b/lib/erl_docgen/priv/js/flipmenu/flip_closed.gif
index 9a27c7c25d..a75107a782 100644
--- a/lib/erl_docgen/priv/js/flipmenu/flip_closed.gif
+++ b/lib/erl_docgen/priv/js/flipmenu/flip_closed.gif
diff --git a/lib/erl_docgen/priv/js/flipmenu/flip_open.gif b/lib/erl_docgen/priv/js/flipmenu/flip_open.gif
index 9dda60e73a..1274637fe0 100644
--- a/lib/erl_docgen/priv/js/flipmenu/flip_open.gif
+++ b/lib/erl_docgen/priv/js/flipmenu/flip_open.gif
diff --git a/lib/erl_docgen/priv/js/flipmenu/flip_static.gif b/lib/erl_docgen/priv/js/flipmenu/flip_static.gif
index 2b3ddb5382..4cc914a50a 100644
--- a/lib/erl_docgen/priv/js/flipmenu/flip_static.gif
+++ b/lib/erl_docgen/priv/js/flipmenu/flip_static.gif
diff --git a/lib/erl_docgen/priv/js/highlight.js b/lib/erl_docgen/priv/js/highlight.js
new file mode 100644
index 0000000000..0594b42aa3
--- /dev/null
+++ b/lib/erl_docgen/priv/js/highlight.js
@@ -0,0 +1,39 @@
+/*globals document, window*/
+window.addEventListener("load", function () {
+    "use strict";
+    var body = document.body,
+        base = window.__otpTopDocDir || "/doc/js/",
+        cssLink = document.createElement('link'),
+        script = document.createElement('script'),
+        intervalId, attempts = 0;
+
+    cssLink.rel = "stylesheet";
+    cssLink.href = base + "../highlight.css";
+    script.src = base + "highlight.pack.js";
+
+    body.appendChild(cssLink);
+    body.appendChild(script);
+
+    function doHighlight() {
+        attempts += 1;
+
+        if (attempts > 20) {
+            window.clearInterval(intervalId);
+            return;
+        }
+
+        if (!window.hljs) {
+            return;
+        }
+
+        window.clearInterval(intervalId);
+
+        var i, len, nodes = document.querySelectorAll('.example');
+        for (i = 0, len = nodes.length; i < len; i += 1) {
+            window.hljs.highlightBlock(nodes[i]);
+        }
+
+    }
+
+    intervalId = window.setInterval(doHighlight, 50);
+});
diff --git a/lib/erl_docgen/priv/js/highlight.pack.js b/lib/erl_docgen/priv/js/highlight.pack.js
new file mode 100644
index 0000000000..073d39e644
--- /dev/null
+++ b/lib/erl_docgen/priv/js/highlight.pack.js
@@ -0,0 +1,2 @@
+/*! highlight.js v9.7.0 | BSD3 License | git.io/hljslicense */
+!function(e){var n="object"==typeof window&&window||"object"==typeof self&&self;"undefined"!=typeof exports?e(exports):n&&(n.hljs=e({}),"function"==typeof define&&define.amd&&define([],function(){return n.hljs}))}(function(e){function n(e){return e.replace(/[&<>]/gm,function(e){return I[e]})}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0===t.index}function a(e){return k.test(e)}function i(e){var n,t,r,i,o=e.className+" ";if(o+=e.parentNode?e.parentNode.className:"",t=B.exec(o))return R(t[1])?t[1]:"no-highlight";for(o=o.split(/\s+/),n=0,r=o.length;r>n;n++)if(i=o[n],a(i)||R(i))return i}function o(e,n){var t,r={};for(t in e)r[t]=e[t];if(n)for(t in n)r[t]=n[t];return r}function u(e){var n=[];return function r(e,a){for(var i=e.firstChild;i;i=i.nextSibling)3===i.nodeType?a+=i.nodeValue.length:1===i.nodeType&&(n.push({event:"start",offset:a,node:i}),a=r(i,a),t(i).match(/br|hr|img|input/)||n.push({event:"stop",offset:a,node:i}));return a}(e,0),n}function c(e,r,a){function i(){return e.length&&r.length?e[0].offset!==r[0].offset?e[0].offset<r[0].offset?e:r:"start"===r[0].event?e:r:e.length?e:r}function o(e){function r(e){return" "+e.nodeName+'="'+n(e.value)+'"'}l+="<"+t(e)+w.map.call(e.attributes,r).join("")+">"}function u(e){l+="</"+t(e)+">"}function c(e){("start"===e.event?o:u)(e.node)}for(var s=0,l="",f=[];e.length||r.length;){var g=i();if(l+=n(a.substr(s,g[0].offset-s)),s=g[0].offset,g===e){f.reverse().forEach(u);do c(g.splice(0,1)[0]),g=i();while(g===e&&g.length&&g[0].offset===s);f.reverse().forEach(o)}else"start"===g[0].event?f.push(g[0].node):f.pop(),c(g.splice(0,1)[0])}return l+n(a.substr(s))}function s(e){function n(e){return e&&e.source||e}function t(t,r){return new RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(a,i){if(!a.compiled){if(a.compiled=!0,a.k=a.k||a.bK,a.k){var u={},c=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");u[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof a.k?c("keyword",a.k):E(a.k).forEach(function(e){c(e,a.k[e])}),a.k=u}a.lR=t(a.l||/\w+/,!0),i&&(a.bK&&(a.b="\\b("+a.bK.split(" ").join("|")+")\\b"),a.b||(a.b=/\B|\b/),a.bR=t(a.b),a.e||a.eW||(a.e=/\B|\b/),a.e&&(a.eR=t(a.e)),a.tE=n(a.e)||"",a.eW&&i.tE&&(a.tE+=(a.e?"|":"")+i.tE)),a.i&&(a.iR=t(a.i)),null==a.r&&(a.r=1),a.c||(a.c=[]);var s=[];a.c.forEach(function(e){e.v?e.v.forEach(function(n){s.push(o(e,n))}):s.push("self"===e?a:e)}),a.c=s,a.c.forEach(function(e){r(e,a)}),a.starts&&r(a.starts,i);var l=a.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([a.tE,a.i]).map(n).filter(Boolean);a.t=l.length?t(l.join("|"),!0):{exec:function(){return null}}}}r(e)}function l(e,t,a,i){function o(e,n){var t,a;for(t=0,a=n.c.length;a>t;t++)if(r(n.c[t].bR,e))return n.c[t]}function u(e,n){if(r(e.eR,n)){for(;e.endsParent&&e.parent;)e=e.parent;return e}return e.eW?u(e.parent,n):void 0}function c(e,n){return!a&&r(n.iR,e)}function g(e,n){var t=N.cI?n[0].toLowerCase():n[0];return e.k.hasOwnProperty(t)&&e.k[t]}function h(e,n,t,r){var a=r?"":y.classPrefix,i='<span class="'+a,o=t?"":C;return i+=e+'">',i+n+o}function p(){var e,t,r,a;if(!E.k)return n(B);for(a="",t=0,E.lR.lastIndex=0,r=E.lR.exec(B);r;)a+=n(B.substr(t,r.index-t)),e=g(E,r),e?(M+=e[1],a+=h(e[0],n(r[0]))):a+=n(r[0]),t=E.lR.lastIndex,r=E.lR.exec(B);return a+n(B.substr(t))}function d(){var e="string"==typeof E.sL;if(e&&!x[E.sL])return n(B);var t=e?l(E.sL,B,!0,L[E.sL]):f(B,E.sL.length?E.sL:void 0);return E.r>0&&(M+=t.r),e&&(L[E.sL]=t.top),h(t.language,t.value,!1,!0)}function b(){k+=null!=E.sL?d():p(),B=""}function v(e){k+=e.cN?h(e.cN,"",!0):"",E=Object.create(e,{parent:{value:E}})}function m(e,n){if(B+=e,null==n)return b(),0;var t=o(n,E);if(t)return t.skip?B+=n:(t.eB&&(B+=n),b(),t.rB||t.eB||(B=n)),v(t,n),t.rB?0:n.length;var r=u(E,n);if(r){var a=E;a.skip?B+=n:(a.rE||a.eE||(B+=n),b(),a.eE&&(B=n));do E.cN&&(k+=C),E.skip||(M+=E.r),E=E.parent;while(E!==r.parent);return r.starts&&v(r.starts,""),a.rE?0:n.length}if(c(n,E))throw new Error('Illegal lexeme "'+n+'" for mode "'+(E.cN||"<unnamed>")+'"');return B+=n,n.length||1}var N=R(e);if(!N)throw new Error('Unknown language: "'+e+'"');s(N);var w,E=i||N,L={},k="";for(w=E;w!==N;w=w.parent)w.cN&&(k=h(w.cN,"",!0)+k);var B="",M=0;try{for(var I,j,O=0;;){if(E.t.lastIndex=O,I=E.t.exec(t),!I)break;j=m(t.substr(O,I.index-O),I[0]),O=I.index+j}for(m(t.substr(O)),w=E;w.parent;w=w.parent)w.cN&&(k+=C);return{r:M,value:k,language:e,top:E}}catch(T){if(T.message&&-1!==T.message.indexOf("Illegal"))return{r:0,value:n(t)};throw T}}function f(e,t){t=t||y.languages||E(x);var r={r:0,value:n(e)},a=r;return t.filter(R).forEach(function(n){var t=l(n,e,!1);t.language=n,t.r>a.r&&(a=t),t.r>r.r&&(a=r,r=t)}),a.language&&(r.second_best=a),r}function g(e){return y.tabReplace||y.useBR?e.replace(M,function(e,n){return y.useBR&&"\n"===e?"<br>":y.tabReplace?n.replace(/\t/g,y.tabReplace):void 0}):e}function h(e,n,t){var r=n?L[n]:t,a=[e.trim()];return e.match(/\bhljs\b/)||a.push("hljs"),-1===e.indexOf(r)&&a.push(r),a.join(" ").trim()}function p(e){var n,t,r,o,s,p=i(e);a(p)||(y.useBR?(n=document.createElementNS("http://www.w3.org/1999/xhtml","div"),n.innerHTML=e.innerHTML.replace(/\n/g,"").replace(/<br[ \/]*>/g,"\n")):n=e,s=n.textContent,r=p?l(p,s,!0):f(s),t=u(n),t.length&&(o=document.createElementNS("http://www.w3.org/1999/xhtml","div"),o.innerHTML=r.value,r.value=c(t,u(o),s)),r.value=g(r.value),e.innerHTML=r.value,e.className=h(e.className,p,r.language),e.result={language:r.language,re:r.r},r.second_best&&(e.second_best={language:r.second_best.language,re:r.second_best.r}))}function d(e){y=o(y,e)}function b(){if(!b.called){b.called=!0;var e=document.querySelectorAll("pre code");w.forEach.call(e,p)}}function v(){addEventListener("DOMContentLoaded",b,!1),addEventListener("load",b,!1)}function m(n,t){var r=x[n]=t(e);r.aliases&&r.aliases.forEach(function(e){L[e]=n})}function N(){return E(x)}function R(e){return e=(e||"").toLowerCase(),x[e]||x[L[e]]}var w=[],E=Object.keys,x={},L={},k=/^(no-?highlight|plain|text)$/i,B=/\blang(?:uage)?-([\w-]+)\b/i,M=/((^(<[^>]+>|\t|)+|(?:\n)))/gm,C="</span>",y={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0},I={"&":"&amp;","<":"&lt;",">":"&gt;"};return e.highlight=l,e.highlightAuto=f,e.fixMarkup=g,e.highlightBlock=p,e.configure=d,e.initHighlighting=b,e.initHighlightingOnLoad=v,e.registerLanguage=m,e.listLanguages=N,e.getLanguage=R,e.inherit=o,e.IR="[a-zA-Z]\\w*",e.UIR="[a-zA-Z_]\\w*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|like)\b/},e.C=function(n,t,r){var a=e.inherit({cN:"comment",b:n,e:t,c:[]},r||{});return a.c.push(e.PWM),a.c.push({cN:"doctag",b:"(?:TODO|FIXME|NOTE|BUG|XXX):",r:0}),a},e.CLCM=e.C("//","$"),e.CBCM=e.C("/\\*","\\*/"),e.HCM=e.C("#","$"),e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e.METHOD_GUARD={b:"\\.\\s*"+e.UIR,r:0},e});hljs.registerLanguage("erlang",function(e){var r="[a-z'][a-zA-Z0-9_']*",c="("+r+":"+r+"|"+r+")",b={keyword:"after and andalso|10 band begin bnot bor bsl bzr bxor case catch cond div end fun if let not of orelse|10 query receive rem try when xor",literal:"false true"},i=e.C("%","$"),n={cN:"number",b:"\\b(\\d+#[a-fA-F0-9]+|\\d+(\\.\\d+)?([eE][-+]?\\d+)?)",r:0},a={b:"fun\\s+"+r+"/\\d+"},d={b:c+"\\(",e:"\\)",rB:!0,r:0,c:[{b:c,r:0},{b:"\\(",e:"\\)",eW:!0,rE:!0,r:0}]},o={b:"{",e:"}",r:0},t={b:"\\b_([A-Z][A-Za-z0-9_]*)?",r:0},f={b:"[A-Z][a-zA-Z0-9_]*",r:0},l={b:"#"+e.UIR,r:0,rB:!0,c:[{b:"#"+e.UIR,r:0},{b:"{",e:"}",r:0}]},s={bK:"fun receive if try case",e:"end",k:b};s.c=[i,a,e.inherit(e.ASM,{cN:""}),s,d,e.QSM,n,o,t,f,l];var u=[i,a,s,d,e.QSM,n,o,t,f,l];d.c[1].c=u,o.c=u,l.c[1].c=u;var h={cN:"params",b:"\\(",e:"\\)",c:u};return{aliases:["erl"],k:b,i:"(</|\\*=|\\+=|-=|/\\*|\\*/|\\(\\*|\\*\\))",c:[{cN:"function",b:"^"+r+"\\s*\\(",e:"->",rB:!0,i:"\\(|#|//|/\\*|\\\\|:|;",c:[h,e.inherit(e.TM,{b:r})],starts:{e:";|\\.",k:b,c:u}},i,{b:"^-",e:"\\.",r:0,eE:!0,rB:!0,l:"-"+e.IR,k:"-module -record -undef -export -ifdef -ifndef -author -copyright -doc -vsn -import -include -include_lib -compile -define -else -endif -file -behaviour -behavior -spec",c:[h]},n,e.QSM,l,t,f,o,{b:/\.$/}]}});hljs.registerLanguage("erlang-repl",function(e){return{k:{built_in:"spawn spawn_link self",keyword:"after and andalso|10 band begin bnot bor bsl bsr bxor case catch cond div end fun if let not of or orelse|10 query receive rem try when xor"},c:[{cN:"meta",b:"^[0-9]+> ",r:10},e.C("%","$"),{cN:"number",b:"\\b(\\d+#[a-fA-F0-9]+|\\d+(\\.\\d+)?([eE][-+]?\\d+)?)",r:0},e.ASM,e.QSM,{b:"\\?(::)?([A-Z]\\w*(::)?)+"},{b:"->"},{b:"ok"},{b:"!"},{b:"(\\b[a-z'][a-zA-Z0-9_']*:[a-z'][a-zA-Z0-9_']*)|(\\b[a-z'][a-zA-Z0-9_']*)",r:0},{b:"[A-Z][a-zA-Z0-9_']*",r:0}]}});hljs.registerLanguage("diff",function(e){return{aliases:["patch"],c:[{cN:"meta",r:10,v:[{b:/^@@ +\-\d+,\d+ +\+\d+,\d+ +@@$/},{b:/^\*\*\* +\d+,\d+ +\*\*\*\*$/},{b:/^\-\-\- +\d+,\d+ +\-\-\-\-$/}]},{cN:"comment",v:[{b:/Index: /,e:/$/},{b:/={3,}/,e:/$/},{b:/^\-{3}/,e:/$/},{b:/^\*{3} /,e:/$/},{b:/^\+{3}/,e:/$/},{b:/\*{5}/,e:/\*{5}$/}]},{cN:"addition",b:"^\\+",e:"$"},{cN:"deletion",b:"^\\-",e:"$"},{cN:"addition",b:"^\\!",e:"$"}]}});hljs.registerLanguage("bash",function(e){var t={cN:"variable",v:[{b:/\$[\w\d#@][\w\d_]*/},{b:/\$\{(.*?)}/}]},s={cN:"string",b:/"/,e:/"/,c:[e.BE,t,{cN:"variable",b:/\$\(/,e:/\)/,c:[e.BE]}]},a={cN:"string",b:/'/,e:/'/};return{aliases:["sh","zsh"],l:/-?[a-z\._]+/,k:{keyword:"if then else elif fi for while in do done case esac function",literal:"true false",built_in:"break cd continue eval exec exit export getopts hash pwd readonly return shift test times trap umask unset alias bind builtin caller command declare echo enable help let local logout mapfile printf read readarray source type typeset ulimit unalias set shopt autoload bg bindkey bye cap chdir clone comparguments compcall compctl compdescribe compfiles compgroups compquote comptags comptry compvalues dirs disable disown echotc echoti emulate fc fg float functions getcap getln history integer jobs kill limit log noglob popd print pushd pushln rehash sched setcap setopt stat suspend ttyctl unfunction unhash unlimit unsetopt vared wait whence where which zcompile zformat zftp zle zmodload zparseopts zprof zpty zregexparse zsocket zstyle ztcp",_:"-ne -eq -lt -gt -f -d -e -s -l -a"},c:[{cN:"meta",b:/^#![^\n]+sh\s*$/,r:10},{cN:"function",b:/\w[\w\d_]*\s*\(\s*\)\s*\{/,rB:!0,c:[e.inherit(e.TM,{b:/\w[\w\d_]*/})],r:0},e.HCM,s,a,t]}});
\ No newline at end of file
diff --git a/lib/erl_docgen/priv/xsl/db_html.xsl b/lib/erl_docgen/priv/xsl/db_html.xsl
index edab8e1c7e..4c7df1d1a0 100644
--- a/lib/erl_docgen/priv/xsl/db_html.xsl
+++ b/lib/erl_docgen/priv/xsl/db_html.xsl
@@ -200,13 +200,12 @@
   <xsl:template match="head">
     <xsl:param name="local_types"/>
     <xsl:param name="global_types"/>
-    <span class="bold_code">
+    <div class="bold_code func-head">
       <xsl:apply-templates mode="local_type">
         <xsl:with-param name="local_types" select="$local_types"/>
         <xsl:with-param name="global_types" select="$global_types"/>
       </xsl:apply-templates>
-    </span>
-    <br/>
+    </div>
   </xsl:template>
 
   <!-- The *last* <name name="..." arity=".."/> -->
@@ -234,7 +233,8 @@
     <!-- It is assumed there is no support for overloaded specs
          (there is no spec with more than one clause) -->
     <xsl:if test="count($clause/guard) > 0 or count($type) > 0">
-      <div class="REFBODY"><p>Types:</p>
+        <div class="REFBODY fun-types">
+            <h3 class="func-types-title">Types</h3>
 
         <xsl:choose>
           <xsl:when test="$output_subtypes">
@@ -327,13 +327,13 @@
 
     <xsl:for-each select="$subtype">
       <xsl:variable name="tname" select="typename"/>
-      <div class="REFTYPES">
-	<span class="bold_code">
-	  <xsl:apply-templates select="string" mode="local_type">
-	    <xsl:with-param name="local_types" select="$local_types"/>
-	    <xsl:with-param name="global_types" select="$global_types"/>
-	  </xsl:apply-templates>
-	</span>
+      <div class="REFTYPES rt-1">
+          <span class="bold_code bc-2">
+              <xsl:apply-templates select="string" mode="local_type">
+                  <xsl:with-param name="local_types" select="$local_types"/>
+                  <xsl:with-param name="global_types" select="$global_types"/>
+              </xsl:apply-templates>
+          </span>
       </div>
       <xsl:apply-templates select="$type_desc[@variable = $tname]"/>
     </xsl:for-each>
@@ -345,7 +345,7 @@
     <xsl:param name="global_types"/>
 
     <xsl:for-each select="$local_types">
-      <div class="REFTYPES">
+      <div class="REFTYPES rt-2">
 	<xsl:call-template name="type_name">
 	  <xsl:with-param name="mode" select="'local_type'"/>
 	  <xsl:with-param name="local_types" select="$local_types"/>
@@ -366,7 +366,7 @@
 
   <!-- Similar to <d> -->
   <xsl:template match="type_desc">
-    <div class="REFBODY">
+    <div class="REFBODY rb-1">
       <xsl:apply-templates/>
     </div>
   </xsl:template>
@@ -375,7 +375,7 @@
   <xsl:template match="all_etypes">
     <xsl:for-each select= "$i//type">
       <pre>
-	<span class="bold_code">
+	<span class="bold_code bc-3">
 	  <xsl:apply-templates select="typedecl"/>
 	</span><xsl:text>
 </xsl:text>
@@ -386,15 +386,17 @@
   <!-- Datatypes -->
   <xsl:template match="datatypes">
     <h3>
-      <xsl:text>DATA TYPES</xsl:text>
+        <a name="data-types" href="#data-types"><xsl:text>Data Types</xsl:text></a>
     </h3>
-    <xsl:apply-templates/>
+    <div class="data-types-body">
+        <xsl:apply-templates/>
+    </div>
   </xsl:template>
 
   <!-- Datatype -->
   <xsl:template match="datatype">
-    <p><xsl:apply-templates select="name"/></p>
-    <xsl:apply-templates select="desc"/>
+    <div class="data-type-name"><xsl:apply-templates select="name"/></div>
+    <div class="data-type-desc"><xsl:apply-templates select="desc"/></div>
   </xsl:template>
 
   <!-- The "mode" attribute of apply has been used to separate the case
@@ -454,7 +456,7 @@
   </xsl:template>
 
   <xsl:template match="typehead">
-    <span class="bold_code">
+    <span class="bold_code bc-4">
       <xsl:apply-templates/>
     </span><br/>
   </xsl:template>
@@ -462,7 +464,7 @@
   <xsl:template match="typehead" mode="local_type">
     <xsl:param name="local_types"/>
     <xsl:param name="global_types"/>
-    <span class="bold_code">
+    <span class="bold_code bc-5">
     <xsl:apply-templates mode="local_type">
       <xsl:with-param name="local_types" select="$local_types"/>
       <xsl:with-param name="global_types" select="$global_types"/>
@@ -473,7 +475,7 @@
   <!-- Not used right now -->
   <!-- local_defs -->
   <xsl:template match="local_defs">
-    <div class="REFBODY">
+    <div class="REFBODY rb-2">
       <xsl:apply-templates>
       </xsl:apply-templates>
     </div>
@@ -481,8 +483,8 @@
 
   <!-- Not used right now -->
   <xsl:template match="local_def">
-    <div class="REFTYPES">
-      <span class="bold_code">
+    <div class="REFTYPES rt-3">
+      <span class="bold_code bc-6">
         <xsl:apply-templates/>
       </span>
     </div>
@@ -659,7 +661,7 @@
           </xsl:otherwise>
         </xsl:choose>
       </head>
-      <body bgcolor="white" text="#000000" link="#0000ff" vlink="#ff00ff" alink="#ff0000">
+      <body>
 
         <div id="container">
           <script id="js" type="text/javascript" language="JavaScript" src="{$topdocdir}/js/flipmenu/flipmenu.js"/>
@@ -734,6 +736,8 @@
           </div>
         </div>
 
+        <script type="text/javascript"><xsl:text>window.__otpTopDocDir = '</xsl:text><xsl:value-of select="$topdocdir"/><xsl:text>/js/';</xsl:text></script>
+        <script type="text/javascript" src="{$topdocdir}/js/highlight.js"/>
       </body>
     </html>
   </xsl:template>
@@ -796,36 +800,42 @@
   </xsl:template>
 
 
-  <xsl:template name="menu_top">
+  <xsl:template name="erlang_logo">
     <xsl:choose>
       <xsl:when test="string-length($logo) > 0">
-        <img alt="Erlang logo" src="{$topdocdir}/{$logo}"/>
+        <div class="erlang-logo-wrapper">
+            <a href="{$topdocdir}/index.html"><img alt="Erlang Logo" src="{$topdocdir}/{$logo}" class="erlang-logo"/></a>
+        </div>
       </xsl:when>
       <xsl:otherwise>
-        <img alt="Erlang logo" src="{$topdocdir}/erlang-logo.png"/>
+        <div class="erlang-logo-wrapper">
+            <a href="{$topdocdir}/index.html"><img alt="Erlang Logo" src="{$topdocdir}/erlang-logo.png" class="erlang-logo"/></a>
+        </div>
       </xsl:otherwise>
     </xsl:choose>
-    <br/>
-    <small>
+  </xsl:template>
+
+  <xsl:template name="menu_top">
+    <ul class="panel-sections">
       <xsl:if test="boolean(/book/parts/part)">
-        <a href="users_guide.html">User's Guide</a><br/>
+          <li><a href="users_guide.html">User's Guide</a></li>
       </xsl:if>
       <xsl:if test="boolean(/book/applications)">
-        <a href="index.html">Reference Manual</a><br/>
+          <li><a href="index.html">Reference Manual</a></li>
       </xsl:if>
       <xsl:if test="boolean(/book/releasenotes)">
-        <a href="release_notes.html">Release Notes</a><br/>
+          <li><a href="release_notes.html">Release Notes</a></li>
       </xsl:if>
       <xsl:choose>
 	<xsl:when test="string-length($pdfname) > 0">
-	  <a href="{$pdfdir}/{$pdfname}.pdf">PDF</a><br/>
+        <li><a href="{$pdfdir}/{$pdfname}.pdf">PDF</a></li>
 	</xsl:when>
 	<xsl:otherwise>
-	  <a href="{$pdfdir}/{$appname}-{$appver}.pdf">PDF</a><br/>
+        <li><a href="{$pdfdir}/{$appname}-{$appver}.pdf">PDF</a></li>
 	</xsl:otherwise>
       </xsl:choose>
-      <a href="{$topdocdir}/index.html">Top</a>
-    </small>
+      <li><a href="{$topdocdir}/index.html">Top</a></li>
+    </ul>
   </xsl:template>
 
   <xsl:template name="menu_middle">
@@ -841,10 +851,11 @@
         </xsl:when>
       </xsl:choose>
     </small -->
-    <br/>
 
-    <a href="javascript:openAllFlips()">Expand All</a><br/>
-    <a href="javascript:closeAllFlips()">Contract All</a>
+    <ul class="expand-collapse-items">
+        <li><a href="javascript:openAllFlips()">Expand All</a></li>
+        <li><a href="javascript:closeAllFlips()">Contract All</a></li>
+    </ul>
   </xsl:template>
 
 
@@ -934,7 +945,7 @@
         <xsl:value-of select="title"/>
       </a>
     </h3>
-    <div class="REFBODY">
+    <div class="REFBODY rb-3">
     <xsl:apply-templates>
       <xsl:with-param name="chapnum" select="$chapnum"/>
     </xsl:apply-templates>
@@ -948,7 +959,7 @@
     <h4>
       <xsl:value-of select="title"/>
     </h4>
-    <div class="REFBODY">
+    <div class="REFBODY rb-4">
     <xsl:apply-templates>
       <xsl:with-param name="chapnum" select="$chapnum"/>
     </xsl:apply-templates>
@@ -1129,7 +1140,8 @@
     <xsl:variable name="tabnum">
       <xsl:number level="any" from="chapter" count="table"/>
     </xsl:variable>
-    <table border="1" cellpadding="2" cellspacing="0">
+    <div class="doc-table-wrapper">
+    <table class="doc-table">
       <!-- tbody-->
       <xsl:apply-templates select="row">
         <xsl:with-param name="chapnum" select="$chapnum"/>
@@ -1141,6 +1153,7 @@
       <xsl:with-param name="chapnum" select="$chapnum"/>
       <xsl:with-param name="tabnum" select="$tabnum"/>
     </xsl:apply-templates>
+    </div>
   </xsl:template>
 
   <xsl:template match="row">
@@ -1160,11 +1173,11 @@
     <xsl:param name="chapnum"/>
     <xsl:param name="tabnum"/>
 
-      <em>Table
+      <p class="doc-table-caption">Table
         <xsl:value-of select="$chapnum"/>.<xsl:value-of select="$tabnum"/>:
         &#160;
         <xsl:apply-templates/>
-      </em>
+      </p>
 
   </xsl:template>
 
@@ -1175,12 +1188,14 @@
       <xsl:number level="any" from="chapter" count="image"/>
     </xsl:variable>
 
-      <img alt="IMAGE MISSING" src="{@file}"/><br/>
+    <div class="doc-image-wrapper">
+      <img alt="IMAGE MISSING" src="{@file}" class="doc-image"/>
 
       <xsl:apply-templates>
         <xsl:with-param name="chapnum" select="$chapnum"/>
         <xsl:with-param name="fignum" select="$fignum"/>
       </xsl:apply-templates>
+    </div>
 
 
   </xsl:template>
@@ -1190,11 +1205,11 @@
     <xsl:param name="chapnum"/>
     <xsl:param name="fignum"/>
 
-      <p><em>Figure
+      <p class="doc-image-caption">Figure
         <xsl:value-of select="$chapnum"/>.<xsl:value-of select="$fignum"/>:
         &#160;
         <xsl:apply-templates/>
-      </em></p>
+      </p>
 
   </xsl:template>
 
@@ -1244,21 +1259,17 @@
     <div id="leftnav">
       <div class="innertube">
 
-        <xsl:call-template name="menu_top"/>
+        <xsl:call-template name="erlang_logo"/>
 
-        <p>
-          <strong><xsl:value-of select="/book/header/title"/></strong><br/>
-          <strong>User's Guide</strong><br/>
-          <small>Version <xsl:value-of select="$appver"/></small>
-        </p>
+        <p class="section-title"><xsl:value-of select="/book/header/title"/></p>
+        <p class="section-subtitle">User's Guide</p>
+        <p class="section-version">Version <xsl:value-of select="$appver"/></p>
+
+        <xsl:call-template name="menu_top"/>
 
         <xsl:call-template name="menu_middle"/>
 
-        <p>
-          <small>
-            <strong>Chapters</strong>
-          </small>
-        </p>
+        <h3>Chapters</h3>
 
         <ul class="flipMenu" imagepath="{$topdocdir}/js/flipmenu">
           <xsl:call-template name="menu.chapter">
@@ -1409,21 +1420,17 @@
     <div id="leftnav">
       <div class="innertube">
 
-        <xsl:call-template name="menu_top"/>
+        <xsl:call-template name="erlang_logo"/>
 
-        <p>
-          <strong><xsl:value-of select="/book/header/title"/></strong><br/>
-          <strong>Reference Manual</strong><br/>
-          <small>Version <xsl:value-of select="$appver"/></small>
-        </p>
+        <p class="section-title"><xsl:value-of select="/book/header/title"/></p>
+        <p class="section-subtitle">Reference Manual</p>
+        <p class="section-version">Version <xsl:value-of select="$appver"/></p>
+
+        <xsl:call-template name="menu_top"/>
 
         <xsl:call-template name="menu_middle"/>
 
-        <p>
-          <small>
-            <strong>Table of Contents</strong>
-          </small>
-        </p>
+        <h3>Table of Contents</h3>
 
         <ul class="flipMenu">
           <xsl:call-template name="menu.ref2">
@@ -1773,8 +1780,8 @@
   <!-- Module -->
   <xsl:template match="module">
     <xsl:param name="partnum"/>
-    <h3>MODULE</h3>
-    <div class="REFBODY">
+    <h3><a name="module" href="#module">Module</a></h3>
+    <div class="REFBODY module-body">
       <xsl:apply-templates>
         <xsl:with-param name="partnum" select="$partnum"/>
       </xsl:apply-templates>
@@ -1785,8 +1792,8 @@
   <!-- Modulesummary -->
   <xsl:template match="modulesummary">
     <xsl:param name="partnum"/>
-    <h3>MODULE SUMMARY</h3>
-    <div class="REFBODY">
+    <h3><a name="module-sumary" href="#module-sumary">Module Summary</a></h3>
+    <div class="REFBODY module-summary-body">
       <xsl:apply-templates>
         <xsl:with-param name="partnum" select="$partnum"/>
       </xsl:apply-templates>
@@ -1796,8 +1803,8 @@
   <!-- Lib -->
   <xsl:template match="lib">
     <xsl:param name="partnum"/>
-    <h3>C LIBRARY</h3>
-    <div class="REFBODY">
+    <h3><a name="c-library" href="#c-library">C Library</a></h3>
+    <div class="REFBODY c-library-body">
       <xsl:apply-templates>
         <xsl:with-param name="partnum" select="$partnum"/>
       </xsl:apply-templates>
@@ -1808,8 +1815,8 @@
   <!-- Libsummary -->
   <xsl:template match="libsummary">
     <xsl:param name="partnum"/>
-    <h3>LIBRARY SUMMARY</h3>
-    <div class="REFBODY">
+    <h3><a name="library-sumary" href="#library-sumary">Library Summary</a></h3>
+    <div class="REFBODY library-summary-body">
       <xsl:apply-templates>
         <xsl:with-param name="partnum" select="$partnum"/>
       </xsl:apply-templates>
@@ -1819,8 +1826,8 @@
   <!-- Com -->
   <xsl:template match="com">
     <xsl:param name="partnum"/>
-    <h3>COMMAND</h3>
-    <div class="REFBODY">
+    <h3><a name="command" href="#command">Command</a></h3>
+    <div class="REFBODY command-body">
       <xsl:apply-templates>
         <xsl:with-param name="partnum" select="$partnum"/>
       </xsl:apply-templates>
@@ -1831,8 +1838,8 @@
   <!-- Comsummary -->
   <xsl:template match="comsummary">
     <xsl:param name="partnum"/>
-    <h3>COMMAND SUMMARY</h3>
-    <div class="REFBODY">
+    <h3><a name="command-summary" href="#command-summary">Command Summary</a></h3>
+    <div class="REFBODY command-summary-body">
       <xsl:apply-templates>
         <xsl:with-param name="partnum" select="$partnum"/>
       </xsl:apply-templates>
@@ -1842,8 +1849,8 @@
   <!-- File -->
   <xsl:template match="file">
     <xsl:param name="partnum"/>
-    <h3>FILE</h3>
-    <div class="REFBODY">
+    <h3><a name="file" href="#file">File</a></h3>
+    <div class="REFBODY file-body">
       <xsl:apply-templates>
         <xsl:with-param name="partnum" select="$partnum"/>
       </xsl:apply-templates>
@@ -1854,8 +1861,8 @@
   <!-- Filesummary -->
   <xsl:template match="filesummary">
     <xsl:param name="partnum"/>
-    <h3>FILE SUMMARY</h3>
-    <div class="REFBODY">
+    <h3><a name="file-summary" href="#file-summary">File Summary</a></h3>
+    <div class="REFBODY file-summary-body">
       <xsl:apply-templates>
         <xsl:with-param name="partnum" select="$partnum"/>
       </xsl:apply-templates>
@@ -1866,8 +1873,8 @@
   <!-- App -->
   <xsl:template match="app">
     <xsl:param name="partnum"/>
-    <h3>APPLICATION</h3>
-    <div class="REFBODY">
+    <h3><a name="application" href="#application">Application</a></h3>
+    <div class="REFBODY application-body">
       <xsl:apply-templates>
         <xsl:with-param name="partnum" select="$partnum"/>
       </xsl:apply-templates>
@@ -1878,8 +1885,8 @@
   <!-- Appsummary -->
   <xsl:template match="appsummary">
     <xsl:param name="partnum"/>
-    <h3>APPLICATION SUMMARY</h3>
-    <div class="REFBODY">
+    <h3><a name="application-summary" href="#application-summary">Application Summary</a></h3>
+    <div class="REFBODY application-summary-body">
       <xsl:apply-templates>
         <xsl:with-param name="partnum" select="$partnum"/>
       </xsl:apply-templates>
@@ -1889,8 +1896,8 @@
   <!-- Description -->
   <xsl:template match="description">
     <xsl:param name="partnum"/>
-    <h3>DESCRIPTION</h3>
-    <div class="REFBODY">
+    <h3><a name="description" href="#description">Description</a></h3>
+    <div class="REFBODY description-body">
       <p>
         <xsl:apply-templates>
           <xsl:with-param name="partnum" select="$partnum"/>
@@ -1903,13 +1910,13 @@
   <xsl:template match="funcs">
     <xsl:param name="partnum"/>
 
-    <h3>
-      <xsl:text>EXPORTS</xsl:text>
-    </h3>
+    <h3><a name="exports" href="#exports"><xsl:text>Exports</xsl:text></a></h3>
 
-    <xsl:apply-templates>
-      <xsl:with-param name="partnum" select="$partnum"/>
-    </xsl:apply-templates>
+    <div class="exports-body">
+        <xsl:apply-templates>
+            <xsl:with-param name="partnum" select="$partnum"/>
+        </xsl:apply-templates>
+    </div>
 
   </xsl:template>
 
@@ -1980,7 +1987,7 @@
     <xsl:choose>
       <xsl:when test="ancestor::cref">
         <a name="{substring-before(nametext, '(')}">
-          <span class="bold_code">
+          <span class="bold_code bc-7">
             <xsl:value-of select="ret"/>
             <xsl:call-template name="maybe-space-after-ret">
               <xsl:with-param name="s" select="ret"/>
@@ -2007,15 +2014,15 @@
         </xsl:variable>
 	<xsl:choose>
 	  <xsl:when test="ancestor::datatype">
-            <a name="type-{$fname}"></a><span class="bold_code"><xsl:apply-templates/></span><br/>
+            <a name="type-{$fname}"></a><span class="bold_code bc-8"><xsl:apply-templates/></span><br/>
 	  </xsl:when>
           <xsl:otherwise>
-            <a name="{$fname}-{$arity}"></a><span class="bold_code"><xsl:apply-templates/></span><br/>
+            <a name="{$fname}-{$arity}"></a><span class="bold_code fun-type"><xsl:apply-templates/></span><br/>
           </xsl:otherwise>
 	</xsl:choose>
       </xsl:when>
       <xsl:otherwise>
-        <span class="bold_code"><xsl:value-of select="."/></span>
+        <span class="bold_code bc-10"><xsl:value-of select="."/></span>
       </xsl:otherwise>
     </xsl:choose>
 
@@ -2040,12 +2047,13 @@
     <!-- The case where @name != 0 is taken care of in "type_name" -->
     <xsl:if test="string-length(@name) = 0 and string-length(@variable) = 0">
 
-      <div class="REFBODY"><p>Types:</p>
+        <div class="REFBODY rb-5">
+            <h3 class="func-types-title">Types</h3>
 
-	<xsl:apply-templates>
-	  <xsl:with-param name="partnum" select="$partnum"/>
-	</xsl:apply-templates>
-      </div>
+            <xsl:apply-templates>
+                <xsl:with-param name="partnum" select="$partnum"/>
+            </xsl:apply-templates>
+        </div>
 
     </xsl:if>
 
@@ -2055,8 +2063,8 @@
   <!-- V -->
   <xsl:template match="v">
     <xsl:param name="partnum"/>
-    <div class="REFTYPES">
-      <span class="bold_code">
+    <div class="REFTYPES rt-4">
+      <span class="bold_code fun-param-type">
         <xsl:apply-templates>
           <xsl:with-param name="partnum" select="$partnum"/>
         </xsl:apply-templates>
@@ -2067,7 +2075,7 @@
   <!-- D -->
   <xsl:template match="d">
     <xsl:param name="partnum"/>
-    <div class="REFBODY">
+    <div class="REFBODY rb-6">
       <xsl:apply-templates>
         <xsl:with-param name="partnum" select="$partnum"/>
       </xsl:apply-templates>
@@ -2077,7 +2085,7 @@
   <!-- Desc -->
   <xsl:template match="desc">
     <xsl:param name="partnum"/>
-    <div class="REFBODY">
+    <div class="REFBODY rb-7">
       <p>
         <xsl:apply-templates>
           <xsl:with-param name="partnum" select="$partnum"/>
@@ -2094,7 +2102,7 @@
 
 
   <xsl:template match="input">
-    <span class="bold_code"><xsl:apply-templates/></span>
+    <span class="bold_code bc-12"><xsl:apply-templates/></span>
   </xsl:template>
 
   <xsl:template match="seealso">
@@ -2113,7 +2121,7 @@
           <xsl:when test="string-length($app_part) > 0">
             <!-- "AppPart:ModPart#Linkpart" -->
             <xsl:variable name="mod_part"><xsl:value-of select="substring-after($filepart, ':')"/></xsl:variable>
-            <span class="bold_code"><a href="javascript:erlhref('{$topdocdir}/../','{$app_part}','{$mod_part}.html#{$linkpart}');"><xsl:apply-templates/></a></span>
+            <span class="bold_code bc-13"><a href="javascript:erlhref('{$topdocdir}/../','{$app_part}','{$mod_part}.html#{$linkpart}');"><xsl:apply-templates/></a></span>
           </xsl:when>
           <xsl:otherwise>
             <!-- "Filepart#Linkpart (there is no ':' in Filepart) -->
@@ -2133,7 +2141,7 @@
                   <xsl:variable name="app" select="key('mod2app', $filepart)"/>
 		  <xsl:choose>
 		    <xsl:when test="string-length($app) > 0">
-		      <span class="bold_code"><a href="javascript:erlhref('{$topdocdir}/../','{$app}','{$filepart}.html#{$linkpart}');"><xsl:value-of select="$this"/></a></span>
+		      <span class="bold_code bc-14"><a href="javascript:erlhref('{$topdocdir}/../','{$app}','{$filepart}.html#{$linkpart}');"><xsl:value-of select="$this"/></a></span>
 		    </xsl:when>
 		    <xsl:otherwise>
 		      <!-- Unknown application -->
@@ -2146,11 +2154,11 @@
               </xsl:when>
               <xsl:when test="string-length($linkpart) > 0">
                 <!-- Still Filepart#Linkpart (there is no ':' in Filepart -->
-                <span class="bold_code"><a href="{$filepart}.html#{$linkpart}"><xsl:apply-templates/></a></span>
+                <span class="bold_code bc-15"><a href="{$filepart}.html#{$linkpart}"><xsl:apply-templates/></a></span>
               </xsl:when>
               <xsl:otherwise>
                 <!-- "Filepart#" (there is no ':' in Filepart -->
-                <span class="bold_code"><a href="{$filepart}.html"><xsl:apply-templates/></a></span>
+                <span class="bold_code bc-16"><a href="{$filepart}.html"><xsl:apply-templates/></a></span>
               </xsl:otherwise>
             </xsl:choose>
           </xsl:otherwise>
@@ -2158,7 +2166,7 @@
       </xsl:when> <!-- string-length($filepart) > 0 -->
       <xsl:when test="string-length($linkpart) > 0">
 	<!-- "#Linkpart" -->
-	<span class="bold_code"><a href="#{$linkpart}"><xsl:apply-templates/></a></span>
+	<span class="bold_code bc-17"><a href="#{$linkpart}"><xsl:apply-templates/></a></span>
       </xsl:when>
       <xsl:otherwise>
 	<!-- "AppPart:Mod" or "Mod" (there is no '#') -->
@@ -2168,11 +2176,11 @@
 	  <xsl:when test="string-length($app_part) > 0">
 	    <!-- "App:Mod" -->
 	    <xsl:variable name="mod_part"><xsl:value-of select="substring-after(@marker, ':')"/></xsl:variable>
-	    <span class="bold_code"><a href="javascript:erlhref('{$topdocdir}/../','{$app_part}','{$mod_part}.html');"><xsl:apply-templates/></a></span>
+	    <span class="bold_code bc-18"><a href="javascript:erlhref('{$topdocdir}/../','{$app_part}','{$mod_part}.html');"><xsl:apply-templates/></a></span>
 	  </xsl:when>
 	  <xsl:otherwise>
 	    <!-- "Mod" -->
-	    <span class="bold_code"><a href="{@marker}.html"><xsl:apply-templates/></a></span>
+	    <span class="bold_code bc-19"><a href="{@marker}.html"><xsl:apply-templates/></a></span>
 	  </xsl:otherwise>
 	</xsl:choose>
       </xsl:otherwise>
@@ -2181,7 +2189,7 @@
   </xsl:template>
 
   <xsl:template match="url">
-    <span class="bold_code"><a href="{@href}"><xsl:apply-templates/></a></span>
+    <span class="bold_code bc-20"><a href="{@href}"><xsl:apply-templates/></a></span>
   </xsl:template>
 
   <xsl:template match="marker">
@@ -2256,21 +2264,17 @@
     <div id="leftnav">
       <div class="innertube">
 
-        <xsl:call-template name="menu_top"/>
+        <xsl:call-template name="erlang_logo"/>
 
-        <p>
-          <strong><xsl:value-of select="/book/header/title"/></strong><br/>
-          <strong>Release Notes</strong><br/>
-          <small>Version <xsl:value-of select="$appver"/></small>
-        </p>
+        <p class="section-title"><xsl:value-of select="/book/header/title"/></p>
+        <p class="section-subtitle">Release Notes</p>
+        <p class="section-version">Version <xsl:value-of select="$appver"/></p>
+
+        <xsl:call-template name="menu_top"/>
 
         <xsl:call-template name="menu_middle"/>
 
-        <p>
-          <small>
-            <strong>Chapters</strong>
-          </small>
-        </p>
+        <h3>Chapters</h3>
 
         <ul class="flipMenu" imagepath="{$topdocdir}/js/flipmenu">
           <xsl:call-template name="menu.chapter">
diff --git a/system/doc/top/src/erl_html_tools.erl b/system/doc/top/src/erl_html_tools.erl
index d55c2e1164..28a0649658 100644
--- a/system/doc/top/src/erl_html_tools.erl
+++ b/system/doc/top/src/erl_html_tools.erl
@@ -387,9 +387,7 @@ subst("#copyright#", _Info, _Group) ->
     "copyright  Copyright &copy; 1991-2004";
 subst("#groups#", Info, _Group) ->
     [
-     "<table border=0 width=\"90%\" cellspacing=3 cellpadding=5>\n",
-     subst_groups(Info),
-     "</table>\n"
+     subst_groups(Info)
     ];
 subst("#applinks#", Info, Group) ->
     subst_applinks(Info, Group);
@@ -476,16 +474,10 @@ subst_unknown_groups([{_Group,Heading,Apps} | Groups], Text0, Left) ->
 
 
 group_table(Heading,Apps) ->
-    [
-     "  <tr>\n",
-     "    <td colspan=2 class=header>\n",
-     "      <font size=\"+1\"><b>",Heading,"</b></font>\n",
-     "    </td>\n",
-     "  </tr>\n",
+    ["<h2>",Heading,"</h2>",
+     "<table class=\"group-table\">\n",
      subst_apps(Apps),
-     "  <tr>\n",
-     "    <td colspan=2><font size=1>&nbsp;</font></td>\n",
-     "  </tr>\n"
+     "</table>\n"
     ].
 
 % Count and split the applications in half to get the right sort
@@ -500,17 +492,11 @@ subst_apps([]) ->
 subst_app(App, [{VSN,_Path,Link,Text}]) ->
     [
      "  <tr class=app>\n",
-     "    <td align=left valign=top>\n",
-     "      <table border=0 width=\"100%\" cellspacing=0 cellpadding=0>\n",
-     "        <tr class=app>\n",
-     "          <td align=left valign=top>\n",
+     "    <td>\n",
      "            <a href=\"",Link,"\" target=\"_top\">",uc(App),"</a>\n",
      "            <a href=\"",Link,"\" target=\"_top\">",VSN,"</a>\n",
-     "          </td>\n",
-     "        </tr>\n",
-     "      </table>\n"
      "    </td>\n",
-     "    <td align=left valign=top>\n",
+     "    <td>\n",
      Text,"\n",
      "    </td>\n",
      "  </tr>\n"
@@ -518,27 +504,14 @@ subst_app(App, [{VSN,_Path,Link,Text}]) ->
 subst_app(App, [{VSN,_Path,Link,Text} | VerInfos]) ->
     [
      "  <tr class=app>\n",
-     "    <td align=left valign=top>\n",
-     "      <table border=0 width=\"100%\" cellspacing=0 cellpadding=0>\n",
-     "        <tr class=app>\n",
-     "          <td align=left valign=top>\n",
+     "    <td>\n",
      "            <a href=\"",Link,"\" target=\"_top\">",uc(App),
-     "</a>&nbsp;&nbsp;<br>\n",
+     "</a>\n",
      "            <a href=\"",Link,"\" target=\"_top\">",VSN,"</a>\n",
-     "          </td>\n",
-     "          <td align=right valign=top width=50>\n",
-     "            <table border=0 width=40 cellspacing=0 cellpadding=0>\n",
-     "              <tr class=app>\n",
-     "                <td align=left valign=top class=appnums>\n",
+     "                <td class=appnums>\n",
      subst_vsn(VerInfos),
-     "                </td>\n",
-     "              </tr>\n",
-     "            </table>\n"
-     "          </td>\n",
-     "        </tr>\n",
-     "      </table>\n"
      "    </td>\n",
-     "    <td align=left valign=top>\n",
+     "    <td>\n",
      Text,"\n",
      "    </td>\n",
      "  </tr>\n"
diff --git a/system/doc/top/src/otp_man_index.erl b/system/doc/top/src/otp_man_index.erl
index 12aaba1423..655d7265f7 100644
--- a/system/doc/top/src/otp_man_index.erl
+++ b/system/doc/top/src/otp_man_index.erl
@@ -154,10 +154,10 @@ gen_html(RefPages, OutFile)->
 	    SortedPages = lists:sort(RefPages),
 	    
 	    lists:foreach(fun({_,Module, App, AppDocDir, RefPagePath}) -> 
-				  io:fwrite(Out, "  <TR>\n",[]),
-				  io:fwrite(Out, "    <TD><A HREF=\"~s\">~s</A></TD>\n", 
+				  io:fwrite(Out, "  <tr>\n",[]),
+				  io:fwrite(Out, "    <td><a href=\"~s\">~s</a></td>\n", 
 					    [RefPagePath, Module]),
-				  io:fwrite(Out, "    <TD><A HREF=\"~s\">~s</A></TD>\n", 
+				  io:fwrite(Out, "    <td><a HREF=\"~s\">~s</a></td>\n", 
 					    [filename:join(AppDocDir, "index.html"), 
 					     App]),
 				  io:fwrite(Out, "  </TR>\n",[])
@@ -175,41 +175,40 @@ gen_html(RefPages, OutFile)->
 html_header() ->
     "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">\n"
 	"<!-- This file was generated by the otp_man_index  -->\n"
-	"<HTML>\n"
-	"<HEAD>\n"
+	"<html>\n"
+	"<head>\n"
 	"  <link rel=\"stylesheet\" href=\"otp_doc.css\" type=\"text/css\"/>\n"
-	"  <TITLE>Erlang/OTP Manual Page Index</TITLE>\n"
-	"</HEAD>\n"
-	"<BODY BGCOLOR=\"#FFFFFF\" TEXT=\"#000000\" LINK=\"#0000FF\" VLINK=\"#FF00FF\" ALINK=\"#FF0000\">\n"
-	"<CENTER>\n"
+	"  <title>Erlang/OTP Manual Page Index</title>\n"
+	"</head>\n"
+	"<body>\n"
+	"<center>\n"
 	"<!-- A HREF=\"http://www.erlang.org/\">\n"
 	"<img alt=\"Erlang logo\" src=\"erlang-logo.png\"/>\n"
-	"</A><BR -->\n"
-	"<SMALL>\n"
-	"[<A HREF=\"index.html\">Up</A> | <A HREF=\"http://www.erlang.org/\">Erlang</A>]\n"
-	"</SMALL><BR>\n"
-	"<P/><FONT SIZE=\"+4\">OTP Reference Page Index</FONT><BR>\n"
-	"</CENTER>\n"
-	"<CENTER>\n"
-	"<P/>\n"
-	"<TABLE BORDER=1>\n"
-	"<TR>\n"
-	"  <TH>Manual Page</TH><TH>Application</TH>\n"
-	"</TR>\n".
+	"</a><br -->\n"
+	"<small>\n"
+	"[ <A HREF=\"index.html\">Up</A> | <A HREF=\"http://www.erlang.org/\">Homepage</A> ]\n"
+	"</small><br>\n"
+	"<h1>OTP Reference Page Index</h1>\n"
+	"</center>\n"
+	"<center>\n"
+	"<table class=\"man-index\">\n"
+	"<tr>\n"
+	"  <th>Manual Page</th><th>Application</th>\n"
+	"</tr>\n".
 
 
 
 html_footer(Year) ->
-    "</TABLE>\n"
-	"</CENTER>\n"
-	"<P/>\n"
-	"<CENTER>\n"
-	"<HR/>\n"
-	"<SMALL>\n"
+    "</table>\n"
+	"</center>\n"
+	"<p/>\n"
+	"<center>\n"
+	"<hr/>\n"
+	"<small>\n"
 	"Copyright &copy; 1991-" ++ Year ++ "\n"
 	"<a href=\"http://www.ericsson.com/technology/opensource/erlang/\">\n"
 	"Ericsson AB</a>\n"
-	"</SMALL>\n"
-	"</CENTER>\n"
-	"</BODY>\n"
-	"</HTML>\n".
+	"</small>\n"
+	"</center>\n"
+	"</body>\n"
+	"</html>\n".
diff --git a/system/doc/top/templates/applications.html.src b/system/doc/top/templates/applications.html.src
index 1f73c44d69..7e939ddcd6 100644
--- a/system/doc/top/templates/applications.html.src
+++ b/system/doc/top/templates/applications.html.src
@@ -24,31 +24,53 @@ limitations under the License.
   <title>Erlang/OTP #version# Applications</title>
   <style type="text/css">
 <!--
-    BODY           { background: white }
+    BODY           { background: #fefefe; color: #111; }
 
-    BODY           { font-family: Verdana, Arial, Helvetica, sans-serif }
-    TH             { font-family: Verdana, Arial, Helvetica, sans-serif }
-    TD             { font-family: Verdana, Arial, Helvetica, sans-serif }
-    P              { font-family: Verdana, Arial, Helvetica, sans-serif }
+    BODY           { font-family: sans-serif }
 
-    .header        { background: #222; color: #fff }
-    .app           { background: #ccc }
+    .header        { background: #333; color: #fefefe; }
 
-    a.anum:link    { color: green; text-decoration: none }
-    a.anum:active  { color: green; text-decoration: none }
-    a.anum:visited { color: green; text-decoration: none }
+    a:link    { color: #303f9f; text-decoration: none }
+    a:active  { color: #303f9f; text-decoration: none }
+    a:visited { color: #303f9f; text-decoration: none }
 
-    a:link         { text-decoration: none }
-    a:active       { text-decoration: none }
-    a:visited      { text-decoration: none }
+    h1,h2{
+        text-align: center;
+    }
+    table {
+     margin: 1em 10%;
+     width: 80%;
+     border-collapse: collapse;
+     min-width: 50%;
+    }
+
+    table, th, td {
+     border: 1px solid #666;
+    }
+
+    th, td {
+     padding: 0.5em;
+     text-align: left;
+    }
+
+    tr:hover {
+     background-color: #f5f5f5;
+    }
+
+    tr:nth-child(even) {
+     background-color: #f2f2f2;
+    }
+
+    th {
+     background-color: #777;
+     color: #fefefe;
+    }
 -->
   </style>
 </head>
 
-<body bgcolor=white text="#000000" link="#0000ff" vlink="#ff00ff"
-      alink="#ff0000">
-<center>
+<body>
+    <h1>Erlang/OTP Applications</h1>
 #groups#
-</center>
 </body>
 </html>
diff --git a/system/doc/top/templates/index.html.src b/system/doc/top/templates/index.html.src
index d2a6736d34..b7fff0993d 100644
--- a/system/doc/top/templates/index.html.src
+++ b/system/doc/top/templates/index.html.src
@@ -29,20 +29,24 @@ limitations under the License.
 </script>
 </head> 
 
-<body bgcolor=white text="#000000" link="#0000ff" vlink="#ff00ff"
-      alink="#ff0000">
+<body>
 
 <div id="container">
 <div id="leftnav">
 <div class="innertube">
-<img alt="Erlang logo" src="erlang-logo.png"/ >
-<p/>
-<small><a href="applications.html">Applications</a><br>
-<a href="man_index.html">Modules</a></small>
-<p/>
-<a href="javascript:openAllFlips()">Expand All</a><br>
-<a href="javascript:closeAllFlips()">Contract All</a>
-<p/>
+<div class="erlang-logo-wrapper">
+ <img alt="Erlang logo" src="erlang-logo.png" class="erlang-logo"/ >
+</div>
+
+<ul class="section-links">
+ <li><a href="applications.html">Applications</a></li>
+ <li><a href="man_index.html" class="modules">Modules</a></li>
+</ul>
+
+<ul class="expand-collapse-items">
+ <li><a href="javascript:openAllFlips()">Expand All</a></li>
+ <li><a href="javascript:closeAllFlips()">Contract All</a></li>
+</ul>
 
 <ul class="flipMenu">
 <li>System Documentation
@@ -60,8 +64,8 @@ limitations under the License.
 </ul>
 </li>
 </ul>
-<b>Application Groups</b>
-<br/>
+
+<h3>Application Groups</h3>
 
 <ul class="flipMenu">
 #applinks#
@@ -73,24 +77,12 @@ limitations under the License.
 
 <div id="content">
 <div class="innertube">
-<center>
-<font size="+1"><b>Erlang/OTP #otp_base_vsn#</b></font><br>
-</center>
-<center>
-<p>
-<font size="+1">Welcome to Erlang/OTP, a complete<br>
-development environment<br>
-for concurrent programming.</font>
-</p>
-</center>
-<br>
-<br>
-<br>
-<p><b>
-<font size="+1">
-Some hints that may get you started faster
-</font>
-</b></p>
+    <h1 class="main-title">Erlang/OTP #otp_base_vsn#</h1>
+    <p class="main-description">
+    Welcome to Erlang/OTP, a complete development environment for concurrent programming.
+    </p>
+
+    <h2>Some hints that may get you started faster</h2>
 
 <ul>