From 350f05090f942bfb06b2c0af2b04102cadce8c8f Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Tue, 19 May 2015 15:54:37 +0200
Subject: [PATCH] Doc styling tweaks

---
 docs/css/newdocs.css                          | 145 +++++++++++-------
 docs/graph2d/index.html                       |  66 ++++----
 docs/network/configure.html                   |  17 +-
 docs/network/edges.html                       |  17 +-
 docs/network/groups.html                      |  17 +-
 docs/network/{new_network.html => index.html} |  46 +++---
 docs/network/interaction.html                 |   9 +-
 docs/network/layout.html                      |   9 +-
 docs/network/manipulation.html                |  11 +-
 docs/network/nodes.html                       |  18 +--
 docs/network/physics.html                     |  10 +-
 docs/timeline/index.html                      |  66 ++++----
 12 files changed, 188 insertions(+), 243 deletions(-)
 rename docs/network/{new_network.html => index.html} (98%)

diff --git a/docs/css/newdocs.css b/docs/css/newdocs.css
index d3d3320b..f1989d99 100644
--- a/docs/css/newdocs.css
+++ b/docs/css/newdocs.css
@@ -5,11 +5,25 @@ html {
 body {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
     /*font-family: Lustria, Georgia, Times, "Times New Roman", serif !important;*/
-    height:100%;
     font-size:16px;
+    line-height: 1.5em;
     background: url('../img/crosswordStrong.png') /* Background pattern from subtlepatterns.com */
 }
 
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 40px 0 20px 0;
+}
+
+ul {
+    margin-top: 0.7em;
+    margin-bottom: 0.7em;
+}
+
+p {
+    margin: 20px 0;
+}
+
 img.icon {
     position:relative;
     top:-2px;
@@ -37,67 +51,83 @@ div.blogHeader {
 
 div.full {
     min-height:100%;
-    box-shadow:0px 2px 10px rgba(0,0,0,0.4);
-    padding-left:20px;
-    padding-right:20px;
+    box-shadow:0 2px 10px rgba(0,0,0,0.4);
+    padding: 20px 10px 40px 10px;
     background-color:#ffffff;
 }
 
+@media (min-width: 768px) {
+    div.full {
+        padding: 40px 40px 80px 40px;
+    }
+}
+
+@media (min-width: 992px) {
+    div.full {
+        padding: 80px 80px 160px 80px;
+    }
+}
+
 table.moduleTable {
-    border:1px solid #eeeeee;
-    font-size:14px;
-    max-width: 900px;
 }
 
-table.moduleTable td{
-    min-width: 80px;
-    padding:2px 5px 2px 5px;
-    height:35px;
+table.moduleTable th,
+table.moduleTable td {
+    padding: 5px 15px;
+    border: 1px solid #dddddd;
 }
 
-table.moduleTable tr{
-    border:1px solid #eeeeee;
-    vertical-align: top;
 
+table.moduleTable th {
+    background-color: #f5f5f5;
 }
 
-tr.header {
-    color: #1f3350;
-    background-color: #cccccc;
-    border-bottom:1px solid #999999 !important;
-    font-size:16px;
-    font-style:italic;
+table.moduleTable td {
+    vertical-align: top;
 }
 
+
+/* TODO: cleanup */
+/*tr.header {*/
+    /*color: #1f3350;*/
+    /*background-color: #cccccc;*/
+    /*border-bottom:1px solid #999999 !important;*/
+    /*font-size:16px;*/
+    /*font-style:italic;*/
+/*}*/
+
 td.mid {
-    background-color: rgba(0,0,0,0.035);
+    background-color: #f5f5f5;
 
     font-style:italic;
 }
 
-td.properties {
-    width:150px;
-}
+/*td.properties {*/
+    /*width:150px;*/
+/*}*/
 
-p {
-    min-width:400px;
-    max-width:1000px;
-}
+/*p {*/
+    /*max-width:1000px;*/
+/*}*/
 
 
-pre.code {
-    padding:2px 4px;
-    font-size:90%;
-    color:#c7254e;
-    background-color:#f9f2f4;
-    border-radius:4px;
-    border:0px;
-}
+/*pre.code {*/
+    /*padding:2px 4px;*/
+    /*font-size:90%;*/
+    /*color: #444444;*/
+    /*background-color:#f9f2f4;*/
+    /*border-radius:4px;*/
+    /*border:0;*/
+/*}*/
 
-pre.top {
-    margin-left:20px;
+pre {
+    margin: 20px 0;
 }
 
+/*pre.top {*/
+    /*margin-left:20px;*/
+/*}*/
+
 tr.hidden {
     max-height:0;
     /*max-height: 0;*/
@@ -151,7 +181,7 @@ tr.toggle {
 
 
 tr.toggle.collapsible {
-    background-color: #f7f7f7;
+    background-color: #f5f5f5;
     border-left: 3px solid #89b3ff;
 }
 
@@ -164,29 +194,30 @@ td.indent2 {
     padding-left:50px !important;
 }
 
-td.name {
-    width:230px;
-}
+/* TODO: cleanup */
+/*td.name {*/
+    /*width:230px;*/
+/*}*/
 
-td.nameSmall {
-    width:150px;
-}
+/*td.nameSmall {*/
+    /*width:150px;*/
+/*}*/
 
-td.type {
-    width: 110px;
-}
+/*td.type {*/
+    /*width: 110px;*/
+/*}*/
 
-td.default {
-    width:60px;
-}
+/*td.default {*/
+    /*width:60px;*/
+/*}*/
 
-td.eventProperties {
-    width:150px;
-}
+/*td.eventProperties {*/
+    /*width:150px;*/
+/*}*/
 
-td.methodName {
-    width:250px;
-}
+/*td.methodName {*/
+    /*width:250px;*/
+/*}*/
 
 pre.options {
     max-width:600px;
diff --git a/docs/graph2d/index.html b/docs/graph2d/index.html
index 37e834e2..6e537445 100644
--- a/docs/graph2d/index.html
+++ b/docs/graph2d/index.html
@@ -261,11 +261,11 @@ var items = [
 </pre>
 
     <table class="moduleTable">
-        <tr class="header">
-            <td>Name</td>
-            <td>Type</td>
-            <td>Required</td>
-            <td>Description</td>
+        <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Required</th>
+            <th>Description</th>
         </tr>
         <tr>
             <td>x</td>
@@ -327,11 +327,11 @@ groups.add({
     </p>
 
     <table class="moduleTable">
-        <tr class="header">
-            <td>Name</td>
-            <td>Type</td>
-            <td>Required</td>
-            <td>Description</td>
+        <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Required</th>
+            <th>Description</th>
         </tr>
         <tr>
             <td>id</td>
@@ -397,11 +397,11 @@ var options = {
     The options colored in green can also be used as options for the groups. All options are optional.
 
     <table class="moduleTable" id="g2dOptions">
-        <tr class="header">
-            <td>Name</td>
-            <td>Type</td>
-            <td>Default</td>
-            <td>Description</td>
+        <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Default</th>
+            <th>Description</th>
         </tr>
 
         <tr>
@@ -717,11 +717,11 @@ function (value) {
     </p>
 
     <table class="moduleTable" id="optionTable">
-        <tr class="header">
-            <td>Name</td>
-            <td>Type</td>
-            <td>Default</td>
-            <td>Description</td>
+        <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Default</th>
+            <th>Description</th>
         </tr>
 
         <tr>
@@ -986,10 +986,10 @@ function (value) {
     </p>
 
     <table class="moduleTable">
-        <tr class="header">
-            <td>Method</td>
-            <td>Return Type</td>
-            <td>Description</td>
+        <tr>
+            <th>Method</th>
+            <th>Return Type</th>
+            <th>Description</th>
         </tr>
         <tr>
             <td>clear([what])</td>
@@ -1185,10 +1185,10 @@ Graph2d.off('rangechanged', onChange);
     </p>
 
     <table class="moduleTable">
-        <tr class="header">
-            <td>name</td>
-            <td>Description</td>
-            <td>Properties</td>
+        <tr>
+            <th>name</th>
+            <th>Description</th>
+            <th>Properties</th>
         </tr>
         <tr>
             <td>click</td>
@@ -1347,16 +1347,6 @@ Graph2d.off('rangechanged', onChange);
         <a href="../examples/graph2d/05_bothAxis.html">example 5</a> show the usage of custom styles.
     </p>
 
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
 </div>
 
 <!-- Bootstrap core JavaScript
diff --git a/docs/network/configure.html b/docs/network/configure.html
index 960a88a5..767d610e 100644
--- a/docs/network/configure.html
+++ b/docs/network/configure.html
@@ -119,11 +119,11 @@ network.setOptions(options);
     <p>As shown above, alternative to supplying an object, you can supply a <code>String</code>, <code>Array</code>, <code>Function</code> or
         <code>Boolean</code>. These will do the same as the filter option described below.</p>
     <table class="moduleTable">
-        <tr class="header">
-            <td class="nameSmall">name</td>
-            <td class="type">type</td>
-            <td class="default">default</td>
-            <td class="description">description</td>
+        <tr>
+            <th>name</th>
+            <th>type</th>
+            <th>default</th>
+            <th>description</th>
         </tr>
         <tr>
             <td>enabled</td>
@@ -157,13 +157,6 @@ function (option, path) {
         </tr>
     </table>
 
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
 </div>
 
 <!-- Bootstrap core JavaScript
diff --git a/docs/network/edges.html b/docs/network/edges.html
index cf64f20f..95ca37ce 100644
--- a/docs/network/edges.html
+++ b/docs/network/edges.html
@@ -192,11 +192,11 @@ network.setOptions(options);
 
     <p>These options can also be set per individual edge.</p>
     <table class="moduleTable" id="optionTable">
-        <tr class="header">
-            <td class="name">name</td>
-            <td class="type">type</td>
-            <td class="default">default</td>
-            <td class="description">description</td>
+        <tr>
+            <th>name</th>
+            <th>type</th>
+            <th>default</th>
+            <th>description</th>
         </tr>
         <tr class='toggle collapsible' onclick="toggleTable('optionTable','arrows', this);">
             <td><span parent="arrows" class="right-caret"></span> arrows</td>
@@ -633,13 +633,6 @@ var options: {
         </tr>
     </table>
 
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
 </div>
 
 <!-- Bootstrap core JavaScript
diff --git a/docs/network/groups.html b/docs/network/groups.html
index 194cc3bc..506afc4a 100644
--- a/docs/network/groups.html
+++ b/docs/network/groups.html
@@ -106,11 +106,11 @@ network.setOptions(options);
 </pre>
     <p>All of the individual options are explained here:</p>
     <table class="moduleTable">
-        <tr class="header">
-            <td class="name">name</td>
-            <td class="type">type</td>
-            <td class="default">default</td>
-            <td class="description">description</td>
+        <tr>
+            <th>name</th>
+            <th>type</th>
+            <th>default</th>
+            <th>description</th>
         </tr>
         <tr>
             <td>useDefaultGroups</td>
@@ -147,13 +147,6 @@ var options = {
         </tr>
     </table>
 
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
 </div>
 
 <!-- Bootstrap core JavaScript
diff --git a/docs/network/new_network.html b/docs/network/index.html
similarity index 98%
rename from docs/network/new_network.html
rename to docs/network/index.html
index 61475780..a9212308 100644
--- a/docs/network/new_network.html
+++ b/docs/network/index.html
@@ -281,11 +281,11 @@ network.setOptions(options);
         <p>The individual options are explained below. The ones referring to modules are explained in the corresponding
             module.</p>
         <table class="moduleTable">
-            <tr class="header">
-                <td>name</td>
-                <td>type</td>
-                <td>default</td>
-                <td>description</td>
+            <tr>
+                <th>name</th>
+                <th>type</th>
+                <th>default</th>
+                <th>description</th>
             </tr>
             <tr>
                 <td>autoResize</td>
@@ -1020,10 +1020,10 @@ var locales = {
 
         <p>The options object supplied to the cluster functions can contain these properties:</p>
         <table class="moduleTable">
-            <tr class="header">
-                <td class="name">name</td>
-                <td>Type</td>
-                <td>description</td>
+            <tr>
+                <th class="name">name</th>
+                <th>Type</th>
+                <th>description</th>
             </tr>
             <tr>
                 <td>joinCondition(<br>&nbsp;&nbsp;<code>Object nodeOptions</code><br>)</td>
@@ -1120,10 +1120,10 @@ var options = {
 
         <p>These events are fired by the interaction module. They are related to user input.</p>
         <table class="moduleTable">
-            <tr class="header">
-                <td class="eventName">name</td>
-                <td class="eventProperties">properties</td>
-                <td>description</td>
+            <tr>
+                <th class="eventName">name</th>
+                <th class="eventProperties">properties</th>
+                <th>description</th>
             </tr>
             <tr class="subHeader">
                 <td colspan="3">Events triggered by human interaction, selection, dragging etc.</td>
@@ -1445,11 +1445,11 @@ var network = new vis.Network(container, data);
 
         There are a few options you can use to tell Vis what to do with the data from Gephi.
         <table class="moduleTable">
-            <tr class="header">
-                <td>name</td>
-                <td>type</td>
-                <td>default</td>
-                <td>description</td>
+            <tr>
+                <th>name</th>
+                <th>type</th>
+                <th>default</th>
+                <th>description</th>
             </tr>
             <tr>
                 <td>nodes.fixed</td>
@@ -1480,16 +1480,6 @@ var network = new vis.Network(container, data);
         </table>
     </div>
 
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
 </div>
 
 <!-- Bootstrap core JavaScript
diff --git a/docs/network/interaction.html b/docs/network/interaction.html
index 6b08d21b..ff50deba 100644
--- a/docs/network/interaction.html
+++ b/docs/network/interaction.html
@@ -118,7 +118,7 @@ network.setOptions(options);
 
     <p>This is a list of all the methods in the public API. They are collected here from all individual modules.</p>
     <table class="moduleTable" id="optionTable">
-        <tr class="header"><td class="name">name</td><td class="type">type</td><td class="default">default</td><td class="description">description</td></tr>
+        <tr><th>name</th><th>type</th><th>default</th><th>description</th></tr>
         <tr><td>dragNodes</td>              <td class="mid">Boolean</td>            <td class="mid"><code>true</code></td>      <td>When true, the nodes that are not fixed can be dragged by the user.</td></tr>
         <tr><td>dragView</td>               <td class="mid">Boolean</td>            <td class="mid"><code>true</code></td>      <td>When true, the view can be dragged around by the user.</td></tr>
         <tr><td>hideEdgesOnDrag</td>        <td class="mid">Boolean</td>            <td class="mid"><code>false</code></td>     <td>When true, the edges are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
@@ -137,13 +137,6 @@ network.setOptions(options);
         <tr><td>zoomView</td>               <td class="mid">Boolean</td>            <td class="mid"><code>true</code></td>      <td>When true, the user can zoom in.</td></tr>
     </table>
 
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
 </div>
 
 <!-- Bootstrap core JavaScript
diff --git a/docs/network/layout.html b/docs/network/layout.html
index f5d7b081..124eedbb 100644
--- a/docs/network/layout.html
+++ b/docs/network/layout.html
@@ -110,7 +110,7 @@ network.setOptions(options);
 </pre>
     <p>When enabling the hierarchical layout, it overrules some of the other options. The physics is set to the hierarchical repulsion solver and dynamic smooth edges are converted to static smooth edges.</p>
     <table class="moduleTable" id="optionTable">
-        <tr class="header"><td class="name">name</td><td class="type">type</td><td class="default">default</td><td class="description">description</td></tr>
+        <tr><th>name</th><th>type</th><th>default</th><td>description</td></tr>
         <tr><td>randomSeed</td><td class="mid">Number</td><td class="mid"><code>undefined</code></td>               <td>When NOT using the hierarchical layout, the nodes are randomly positioned initially. This means that the settled result is different every time. If you provide a random seed manually, the layout will be the same every time. Ideally you try with an undefined seed, reload until you are happy with the layout and use the <code>getSeed()</code> method to ascertain the seed.</td></tr>
         <tr class='toggle collapsible' onclick="toggleTable('optionTable','hierarchical', this);"><td><span parent="repulsion" class="right-caret"></span> hierarchical</td><td class="mid">Object or Boolean</td><td class="mid"><code>Object</code></td>      <td>When true, the layout engine positions the nodes in a hierarchical fashion using default settings. For customization you can supply an object.</td></tr>
         <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.enabled</td><td class="mid">Boolean</td><td class="mid"><code>false</code></td>        <td>Toggle the usage of the hierarchical layout system. If this option is not defined, it is set to true if any of the properties in this object are defined.</td></tr>
@@ -121,13 +121,6 @@ network.setOptions(options);
             Directed adheres to the to and from data of the edges. A --> B so B is a level lower than A.</td></tr>
     </table>
 
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
 </div>
 
 <!-- Bootstrap core JavaScript
diff --git a/docs/network/manipulation.html b/docs/network/manipulation.html
index a18190ed..dc6992a0 100644
--- a/docs/network/manipulation.html
+++ b/docs/network/manipulation.html
@@ -110,7 +110,7 @@ var options = {
 network.setOptions(options);
 </pre>
     <table class="moduleTable" id="optionTable">
-        <tr class="header"><td class="name">name</td><td class="type">type</td><td class="default">default</td><td class="description">description</td></tr>
+        <tr><th>name</th><th>type</th><th>default</th><td>description</td></tr>
         <tr><td>enabled</td>                    <td class="mid">Boolean</td>                <td class="mid"><code>false</code></td>     <td>Toggle the manipulation system on or off. This property is optional. If you define any of the options below and enabled is undefined, this will be set to true.</td></tr>
         <tr><td>initiallyActive</td>            <td class="mid">Boolean</td>                <td class="mid"><code>true</code></td>      <td>Toggle whether the toolbar is visible initially or if only the edit button is visible initially.</td></tr>
         <tr><td>addNode</td>                    <td class="mid">Boolean or Function</td>    <td class="mid"><code>true</code></td>      <td>You can use these options to switch certain functionalities on or off of attach
@@ -173,15 +173,6 @@ var options = {
 }
 </pre></td></tr>
     </table>
-
-
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
 </div>
 
 <!-- Bootstrap core JavaScript
diff --git a/docs/network/nodes.html b/docs/network/nodes.html
index cadcf33c..2a611bc2 100644
--- a/docs/network/nodes.html
+++ b/docs/network/nodes.html
@@ -191,11 +191,11 @@ network.setOptions(options);
 
     <p>These options can also be set per individual node. All of the individual options are explained here:</p>
     <table class="moduleTable" id="optionTable">
-        <tr class="header">
-            <td class="name">name</td>
-            <td class="type">type</td>
-            <td class="default">default</td>
-            <td class="description">description</td>
+        <tr>
+            <th>name</th>
+            <th>type</th>
+            <th>default</th>
+            <th>description</th>
         </tr>
         <tr>
             <td>borderWidth</td>
@@ -632,14 +632,6 @@ mySize = minSize + diff * scale;
         </tr>
     </table>
 
-
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
 </div>
 
 <!-- Bootstrap core JavaScript
diff --git a/docs/network/physics.html b/docs/network/physics.html
index 14552d66..0a37f621 100644
--- a/docs/network/physics.html
+++ b/docs/network/physics.html
@@ -142,7 +142,7 @@ network.setOptions(options);
 </pre>
     <p>All of the individual options are explained here:</p>
     <table class="moduleTable" id="optionTable">
-        <tr class="header"><td class="name">name</td><td class="type">type</td><td>default</td><td>description</td></tr>
+        <tr><th class="name">name</th><th class="type">type</th><th>default</th><th>description</th></tr>
         <tr class='toggle collapsible' onclick="toggleTable('optionTable','barnesHut', this);"><td><span parent="barnesHut" class="right-caret"></span> barnesHut</td>                       <td class="mid">Object</td>         <td class="mid"><code>Object</code></td>    <td>BarnesHut is a quadtree based gravity model. This is the fastest, default and recommended solver for non-hierarchical layouts.</td></tr>
         <tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.gravitationalConstant</td>        <td class="mid">Number</td>         <td class="mid"><code>-2000</code></td>     <td>Gravity attracts. We like repulsion. So the value is negative. If you want the repulsion to be stronger, decrease the value (so -10000, -50000).</td></tr>
         <tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.centralGravity</td>               <td class="mid">Number</td>         <td class="mid"><code>0.3</code></td>       <td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
@@ -186,14 +186,6 @@ network.setOptions(options);
         <tr><td>timestep</td>                               <td class="mid">Number</td>         <td class="mid"><code>0.5</code></td>        <td>The physics simulation is discrete. This means we take a step in time, calculate the forces, move the nodes and take another step. If you increase this number the steps will be too large and the network can get unstable. If you see a lot of jittery movement in the network, you may want to reduce this value a little.</td></tr>
     </table>
 
-
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
 </div>
 
 <!-- Bootstrap core JavaScript
diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index 00137357..2ff424e5 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -231,11 +231,11 @@ var items = [
   </p>
 
   <table class="moduleTable" >
-    <tr class="header">
-      <td>Name</td>
-      <td>Type</td>
-      <td>Required</td>
-      <td>Description</td>
+    <tr>
+      <th>Name</th>
+      <th>Type</th>
+      <th>Required</th>
+      <th>Description</th>
     </tr>
     <tr>
       <td>className</td>
@@ -245,7 +245,7 @@ var items = [
         an individual css style. For example, when an item has className
         'red', one can define a css style like:
       <pre class="prettyprint lang-css">
-.vis.timeline .red {
+.vis-item.red {
   color: white;
   background-color: red;
   border-color: darkred;
@@ -361,11 +361,11 @@ var groups = [
   </p>
 
   <table class="moduleTable" >
-    <tr class="header">
-      <td>Name</td>
-      <td>Type</td>
-      <td>Required</td>
-      <td>Description</td>
+    <tr>
+      <th>Name</th>
+      <th>Type</th>
+      <th>Required</th>
+      <th>Description</th>
     </tr>
     <tr>
       <td>className</td>
@@ -448,11 +448,11 @@ var options = {
   </p>
 
   <table class="moduleTable" id="optionTable">
-    <tr class="header">
-      <td>Name</td>
-      <td>Type</td>
-      <td>Default</td>
-      <td>Description</td>
+    <tr>
+      <th>Name</th>
+      <th>Type</th>
+      <th>Default</th>
+      <th>Description</th>
     </tr>
 
     <tr>
@@ -919,10 +919,10 @@ var options = {
   </p>
 
   <table class="moduleTable" >
-    <tr class="header">
-      <td>Method</td>
-      <td>Return Type</td>
-      <td>Description</td>
+    <tr>
+      <th>Method</th>
+      <th>Return&nbsp;Type</th>
+      <th>Description</th>
     </tr>
 
     <tr>
@@ -1182,10 +1182,10 @@ timeline.off('select', onSelect);
       <col style="width: 40%;">
     </colgroup>
 
-    <tr class="header">
-      <td>name</td>
-      <td>Description</td>
-      <td>Properties</td>
+    <tr>
+      <th>name</th>
+      <th>Description</th>
+      <th>Properties</th>
     </tr>
 
     <tr>
@@ -1470,7 +1470,10 @@ var options = {
   </p>
 
   <table class="moduleTable" >
-    <tr class="header"><td>Language</td><td>Code</td></tr>
+    <tr>
+      <th>Language</th>
+      <th>Code</th>
+    </tr>
     <tr>
       <td>English</td>
       <td>
@@ -1518,8 +1521,8 @@ var options = {
   </p>
 
   <table class="moduleTable" >
-    <tr class="header">
-      <td>Description</td><td>values</td>
+    <tr>
+      <th>Description</th><th>values</th>
     </tr>
     <tr>
       <td>Alternating columns</td><td class="mid"><code>vis-even</code>, <code>vis-odd</code></td>
@@ -1574,15 +1577,6 @@ var options = {
     No data is sent to any server.
   </p>
 
-
-
-  <br />
-  <br />
-  <br />
-  <br />
-  <br />
-  <br />
-  <br />
 </div>
 
 <!-- Bootstrap core JavaScript