diff --git a/blog.html b/blog.html
index 48f5269b..fff7bd87 100644
--- a/blog.html
+++ b/blog.html
@@ -17,6 +17,12 @@
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
 
+
+    <script src="./js/smooth-scroll.min.js"></script>
+    <script language="JavaScript">
+        smoothScroll.init();
+    </script>
+
     <style>
 
         html {
@@ -150,9 +156,9 @@
                 </div>
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
-                        <li class="active"><a href="#about">Modules</a></li>
+                        <li><a href="./index.html#modules">Modules</a></li>
                         <li><a href="./docs/index.html" target="_blank">Documentation <img class="icon" src="./images/external-link-icons/external-link-icon-white.png"></a></li>
-                        <li><a href="#">Blog</a></li>
+                        <li class="active"><a href="#">Blog</a></li>
                         <li><a href="./index.html#download_install">Download</a></li>
                         <li><a href="./index.html#showcase">Showcase</a></li>
                         <li><a href="./index.html#contribute">Contribute</a></li>
@@ -182,10 +188,10 @@
     <div class="postsMenu">
         <div class="postsMenuContent">
             Posts:
-            <a class="post" href="#The 2015 roadmap for vis.js">- The 2015 roadmap for vis.js</a>
-            <a class="post" href="#A look back on vis.js">- A look back on vis.js</a>
-            <a class="post" href="#New website for vis.js!">- New website for vis.js!</a>
-            <a class="post" href="#Released version 3.8.0">- Released version 3.8.0</a>
+            <a data-scroll class="post" href="#The 2015 roadmap for vis.js">- The 2015 roadmap for vis.js</a>
+            <a data-scroll class="post" href="#A look back on vis.js">- A look back on vis.js</a>
+            <a data-scroll class="post" href="#New website for vis.js!">- New website for vis.js!</a>
+            <a data-scroll class="post" href="#Released version 3.8.0">- Released version 3.8.0</a>
         </div>
     </div>
 
@@ -245,11 +251,6 @@
             </p><p>
                 On the 16th of April 2014, exactly a year after the initial commit, <a href="https://twitter.com/hackernewsbot/status/456231005678874624" target="_blank">a twitterbot with a lot of followers</a> notified
                 the world that we were featured on hackernews! This was the boost we needed to really reach a large community. We saw the amount of visitors and Github stars increase greatly over the months that followed.
-            <br />
-            <br />
-            <i><b>TODO: insert graph2d with visitors?</b></i>
-            <br />
-            <br />
             </p><p>
                 The 14th of October, we have altered the license of vis.js to MIT or APACHE 2.0. This allowed <a href="http://tiddlywiki.com/" target="_blank">Tiddlywiki</a> to add vis.js to their keychain. From what we hear,
             their developers really enjoy working with vis and we look forward to hearing how their community uses our software!
diff --git a/graph2d_examples.html b/graph2d_examples.html
index 5c9235fd..ce3556ac 100644
--- a/graph2d_examples.html
+++ b/graph2d_examples.html
@@ -24,9 +24,21 @@
 
     <style>
         body {
-            padding:10px;
             font-family: Lustria,Georgia,Times,"Times New Roman",serif !important;
+            background: url('./images/crossword.png') /* Background pattern from subtlepatterns.com */
+        }
+
+        div.contentWrapper {
+            padding:10px;
         }
+        div.container {
+            max-width:970px;
+        }
+        div.navbar-wrapper {
+            background-color:#07508E;
+            border-bottom: 3px solid #ffffff;
+        }
+
 
         pre {
             width:450px;
@@ -101,6 +113,39 @@
 
 </head>
 <body onload="prettyPrint(); loadVis();">
+
+
+<div class="navbar-wrapper">
+    <div class="container">
+        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
+            <div class="container">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
+                </div>
+                <div id="navbar" class="navbar-collapse collapse">
+                    <ul class="nav navbar-nav">
+                        <li class="active"><a href="./index.html#modules">Modules</a></li>
+                        <li><a href="./docs/index.html" target="_blank">Documentation <img class="icon" src="./images/external-link-icons/external-link-icon-white.png"></a></li>
+                        <li><a href="./blog.html">Blog</a></li>
+                        <li><a href="./index.html#download_install">Download</a></li>
+                        <li><a href="./index.html#showcase">Showcase</a></li>
+                        <li><a href="./index.html#contribute">Contribute</a></li>
+                        <li><a href="./index.html#featureRequests">Feature requests</a></li>
+                        <li><a href="./index.html#licenses">License</a></li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+
+    </div>
+</div>
+<div class="contentWrapper">
 <h1>Graph2d Examples</h1><a class="btn btn-default" href="#allExamples" role="button">View all examples »</a>  <a class="btn btn-primary" href="./docs/graph2d.html" role="button">View docs »</a>
 
 <div class="textHTMLContent">This small code example shows the easiest way to get a Graph2d up and running. This code has been taken from example 1. The working example is shown next to it. Click it to start the interaction.</div>
@@ -131,103 +176,103 @@
 <div class="container-fluid">
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph2d/01_basic.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph2d/1.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/1.png">
             <div class="exampleTitle">basic</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph2d/02_bars.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph2d/2.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/2.png">
             <div class="exampleTitle">bars</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph2d/03_groups.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph2d/3.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/3.png">
             <div class="exampleTitle">groups</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph2d/04_rightAxis.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph2d/4.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/4.png">
             <div class="exampleTitle">right axis</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph2d/05_bothAxis.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph2d/5.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/5.png">
             <div class="exampleTitle">both axis</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph2d/06_interpolation.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph2d/6.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/6.png">
             <div class="exampleTitle">interpolation</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph2d/07_scrollingAndSorting.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph2d/7.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/7.png">
             <div class="exampleTitle">scrolling and sorting</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph2d/08_performance.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph2d/8.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/8.png">
             <div class="exampleTitle">performance</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph2d/09_external_legend.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph2d/9.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/9.png">
             <div class="exampleTitle">external legend</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph2d/10_barsSideBySide.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph2d/10.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/10.png">
             <div class="exampleTitle">bars side by side</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph2d/11_barsSideBySideGroups.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph2d/11.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/11.png">
             <div class="exampleTitle">bars side by side groups</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph2d/12_customRange.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph2d/12.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/12.png">
             <div class="exampleTitle">custom range</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph2d/13_localization.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph2d/13.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/13.png">
             <div class="exampleTitle">localization</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph2d/14_toggleGroups.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph2d/14.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/14.png">
             <div class="exampleTitle">toggle groups</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph2d/15_streaming_data.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph2d/15.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/15.png">
             <div class="exampleTitle">streaming data</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph2d/16_bothAxis_titles.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph2d/16.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/16.png">
             <div class="exampleTitle">axis titles</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph2d/17_dynamicStyling.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph2d/17.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/17.png">
             <div class="exampleTitle">dynamic styling</div>
         </a>
     </div>
@@ -236,7 +281,7 @@
 <br />
 <br />
 <br />
-
+</div>
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
diff --git a/graph3d_examples.html b/graph3d_examples.html
index 0a4a2645..1e78d390 100644
--- a/graph3d_examples.html
+++ b/graph3d_examples.html
@@ -24,8 +24,19 @@
 
     <style>
         body {
-            padding:10px;
             font-family: Lustria,Georgia,Times,"Times New Roman",serif !important;
+            background: url('./images/crossword.png') /* Background pattern from subtlepatterns.com */
+        }
+
+        div.contentWrapper {
+            padding:10px;
+        }
+        div.container {
+            max-width:970px;
+        }
+        div.navbar-wrapper {
+            background-color:#07508E;
+            border-bottom: 3px solid #ffffff;
         }
 
         pre {
@@ -112,6 +123,39 @@
 
 </head>
 <body onload="prettyPrint(); loadVis();">
+
+
+<div class="navbar-wrapper">
+    <div class="container">
+        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
+            <div class="container">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
+                </div>
+                <div id="navbar" class="navbar-collapse collapse">
+                    <ul class="nav navbar-nav">
+                        <li class="active"><a href="./index.html#modules">Modules</a></li>
+                        <li><a href="./docs/index.html" target="_blank">Documentation <img class="icon" src="./images/external-link-icons/external-link-icon-white.png"></a></li>
+                        <li><a href="./blog.html">Blog</a></li>
+                        <li><a href="./index.html#download_install">Download</a></li>
+                        <li><a href="./index.html#showcase">Showcase</a></li>
+                        <li><a href="./index.html#contribute">Contribute</a></li>
+                        <li><a href="./index.html#featureRequests">Feature requests</a></li>
+                        <li><a href="./index.html#licenses">License</a></li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+
+    </div>
+</div>
+<div class="contentWrapper">
 <h1>Graph3d Examples</h1><a class="btn btn-default" href="#allExamples" role="button">View all examples »</a>  <a class="btn btn-primary" href="./docs/graph3d.html" role="button">View docs »</a>
 
 <div class="textHTMLContent">This small code example shows the easiest way to get a Graph2d up and running. This code has been taken from example 1. The working example is shown next to it. Click it to start the interaction.</div>
@@ -155,73 +199,73 @@
 <div class="container-fluid">
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph3d/example01_basis.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph3d/1.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/1.png">
             <div class="exampleTitle">basis</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph3d/example02_camera.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph3d/2.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/2.png">
             <div class="exampleTitle">camera</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph3d/example03_filter.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph3d/3.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/3.png">
             <div class="exampleTitle">filter</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph3d/example04_animate.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph3d/4.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/4.png">
             <div class="exampleTitle">animate</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph3d/example05_line.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph3d/5.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/5.png">
             <div class="exampleTitle">line</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph3d/example06_moving_dots.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph3d/6.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/6.png">
             <div class="exampleTitle">moving dots</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph3d/example07_dot_cloud_colors.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph3d/7.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/7.png">
             <div class="exampleTitle">dot cloud colors</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph3d/example08_dot_cloud_size.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph3d/8.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/8.png">
             <div class="exampleTitle">dot cloud size</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph3d/example09_mobile.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph3d/9.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/9.png">
             <div class="exampleTitle">mobile</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph3d/example10_styles.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph3d/10.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/10.png">
             <div class="exampleTitle">styles</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph3d/example11_tooltips.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph3d/11.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/11.png">
             <div class="exampleTitle">tooltips</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph3d/playground/index.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/graph3d/playground.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/playground.png">
             <div class="exampleTitle">playground</div>
         </a>
     </div>
@@ -230,7 +274,7 @@
 <br />
 <br />
 <br />
-
+</div>
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
diff --git a/images/gettingstartedSlide.png b/images/gettingstartedSlide.png
index 96b2fa53..4af03bcd 100644
Binary files a/images/gettingstartedSlide.png and b/images/gettingstartedSlide.png differ
diff --git a/index.html b/index.html
index ef57b6c9..f7da7014 100644
--- a/index.html
+++ b/index.html
@@ -17,11 +17,19 @@
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
 
+    <script src="./js/smooth-scroll.min.js"></script>
+    <script language="JavaScript">
+        smoothScroll.init();
+    </script>
     <style>
         body {
             font-family: Lustria,Georgia,Times,"Times New Roman",serif !important;
+            font-size:16px;
         }
 
+        a.btn {
+            width:130px;
+        }
         a.header{
             color:#8bb9fb;
         }
@@ -31,9 +39,18 @@
             top:-2px;
         }
 
+        img.featurette-image {
+            border-radius:4px;
+        }
+
+        img.header {
+            margin-bottom:10px;
+        }
+
         div.wall {
             background-image: url("./images/wall.png");
             background-repeat: no-repeat;
+            margin-top:5px;
         }
 
         div.trans {
@@ -63,6 +80,7 @@
         div.valign_child {
             margin:auto 0px;
         }
+
     </style>
 </head>
 <!-- NAVBAR
@@ -83,14 +101,14 @@
                 </div>
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
-                        <li class="active"><a href="#about">Modules</a></li>
+                        <li class="active"><a href="#modules">Modules</a></li>
                         <li><a href="./docs/index.html" target="_blank">Documentation <img class="icon" src="./images/external-link-icons/external-link-icon-white.png"></a></li>
                         <li><a href="./blog.html">Blog</a></li>
-                        <li><a href="#download_install">Download</a></li>
-                        <li><a href="#showcase">Showcase</a></li>
-                        <li><a href="#contribute">Contribute</a></li>
-                        <li><a href="#featureRequests">Feature requests</a></li>
-                        <li><a href="#licenses">License</a></li>
+                        <li><a data-scroll href="#download_install">Download</a></li>
+                        <li><a data-scroll href="#showcase">Showcase</a></li>
+                        <li><a data-scroll href="#contribute">Contribute</a></li>
+                        <li><a data-scroll href="#featureRequests">Feature requests</a></li>
+                        <li><a data-scroll href="#licenses">License</a></li>
                     </ul>
                 </div>
             </div>
@@ -103,7 +121,7 @@
 
 <!-- Carousel
 ================================================== -->
-<div class="jumbotron wall">
+<div class="jumbotron wall hidden-xs">
     <div class="jumbotron trans">
         <div class="container jumbo">
             <h1>vis.js</h1>
@@ -121,6 +139,15 @@
     <!--</div>-->
 </div>
 
+<img src="./images/wall_small.png" class="header img-responsive visible-xs">
+<div class="container visible-xs">
+    <p>A dynamic, browser based visualization library.
+        The library is designed to be easy to use, to handle large amounts
+        of dynamic data, and to enable manipulation of and interaction with the data.
+        The library consists of the components DataSet, Timeline, Network, Graph2d and Graph3d. <a href="#download_install" class="header">Get it over here!</a></p>
+    <br /><hr class="featurette-divider"><br />
+</div>
+
 
 <!-- Marketing messaging and featurettes
 ================================================== -->
@@ -133,34 +160,31 @@
         <div class="col-md-3">
             <a href="./network_examples.html"><img class="img-thumbnail"  src="./images/network.png"alt="network examples" style="width: 240px; height: 140px;"></a>
             <h2>Network</h2>
-            <p class="text-justify">Network is a visualization to display networks and networks consisting of nodes and edges. The visualization is easy to use and supports custom shapes, styles, colors, sizes, images, and more.
-                To handle a larger amount of nodes, Network has clustering support. Network uses HTML canvas for rendering.</p>
+            <p>Display dynamic, automatically organised, customizable network views.</p>
             <p><a class="btn btn-default" href="./network_examples.html" role="button">View examples »</a></p>
             <p><a class="btn btn-primary" href="./docs/network.html" role="button">View docs »</a></p>
         </div><!-- /.col-lg-4 -->
+        <hr class="featurette-divider visible-xs">
         <div class="col-md-3">
             <a href="./timeline_examples.html"><img class="img-thumbnail"  src="./images/timeline.png" alt="timeline examples" style="width: 240px; height: 140px;"></a>
             <h2>Timeline</h2>
-            <p class="text-justify">The Timeline is an interactive chart to visualize data in time. The data items can take place on a single date, or have a start and end date (a range).
-                Timeline uses regular HTML DOM to render the timeline and items put on the timeline. This allows for flexible customization using css styling.</p>
+            <p>Create a fully customizable, interactive timeline with items and ranges.</p>
             <p><a class="btn btn-default" href="./timeline_examples.html" role="button">View examples »</a></p>
             <p><a class="btn btn-primary" href="./docs/timeline.html" role="button">View docs »</a></p>
         </div><!-- /.col-lg-4 -->
+        <hr class="featurette-divider visible-xs">
         <div class="col-md-3">
             <a href="./graph2d_examples.html"><img class="img-thumbnail"  src="./images/graph2d.png" alt="graph2d examples" style="width: 240px; height: 140px;"></a>
             <h2>Graph2d</h2>
-            <p class="text-justify">Graph2d is an interactive visualization chart to draw data in a 2D graph. It can plot lines, point and bars. You can freely move and zoom in the graph by dragging and scrolling in the window.
-                <br />
-                Graph2d uses HTML DOM and SVG for rendering. This allows for flexible customization using css styling.</p>
+            <p>Draw graphs and bar charts on an interactive timeline and personalize it any way you want.</p>
             <p><a class="btn btn-default" href="./graph2d_examples.html" role="button">View examples »</a></p>
             <p><a class="btn btn-primary" href="./docs/graph2d.html" role="button">View docs »</a></p>
         </div><!-- /.col-lg-4 -->
+        <hr class="featurette-divider visible-xs">
         <div class="col-md-3">
             <a href="./graph3d_examples.html"><img class="img-thumbnail" src="./images/graph3d.png" alt="graph3d examples" style="width: 240px; height: 140px;"></a>
             <h2>Graph3d</h2>
-            <p class="text-justify">Graph3d is an interactive visualization chart to draw data in a three dimensional graph.
-                You can freely move and zoom in the graph by dragging and scrolling in the window. Graph3d also supports animation of a graph.
-                Graph3d uses HTML canvas to render graphs, and can render up to a few thousands of data points smoothly.</p>
+            <p>Create interactive, animated 3d graphs. Surfaces, lines, dots and block styling out of the box.</p>
             <p><a class="btn btn-default" href="./graph3d_examples.html" role="button">View examples »</a></p>
             <p><a class="btn btn-primary" href="./docs/graph3d.html" role="button">View docs »</a></p>
         </div><!-- /.col-lg-4 -->
@@ -173,7 +197,7 @@
 
     <div class="row featurette" id="download_install">
         <div class="col-md-5">
-            <img class="featurette-image img-responsive hidden-xs hidden-sm  img-thumbnail" data-src="holder.js/500x500/auto" alt="500x500" src="./images/gettingstartedSlide.png" data-holder-rendered="true">
+            <img class="featurette-image img-responsive hidden-xs hidden-sm " data-src="holder.js/500x500/auto" alt="500x500" src="./images/gettingstartedSlide.png" data-holder-rendered="true">
         </div>
         <div class="col-md-7">
             <div class="valign_parent">
@@ -210,7 +234,7 @@
             </div>
         </div>
         <div class="col-md-5">
-            <a href="showcases.html"><img class="featurette-image img-responsive hidden-xs hidden-sm img-thumbnail" data-src="holder.js/500x500/auto" alt="500x500" src="./images/showcase.png" data-holder-rendered="true"></a>
+            <a href="showcases.html"><img class="featurette-image img-responsive hidden-xs hidden-sm " data-src="holder.js/500x500/auto" alt="500x500" src="./images/showcase.png" data-holder-rendered="true"></a>
         </div>
     </div>
 
@@ -218,7 +242,7 @@
 
     <div class="row featurette" id="contribute">
         <div class="col-md-5">
-            <a href="https://github.com/almende/vis/" target="_blank"><img class="featurette-image img-responsive hidden-xs hidden-sm  img-thumbnail" data-src="holder.js/500x500/auto" alt="500x500" src="./images/octocat.png" data-holder-rendered="true"></a>
+            <a href="https://github.com/almende/vis/" target="_blank"><img class="featurette-image img-responsive hidden-xs hidden-sm  " data-src="holder.js/500x500/auto" alt="500x500" src="./images/octocat.png" data-holder-rendered="true"></a>
         </div>
         <div class="col-md-7">
             <div class="valign_parent">
@@ -261,7 +285,7 @@
             </div>
         </div>
         <div class="col-md-5">
-            <a href="./featureRequests.html"><img class="featurette-image img-responsive hidden-xs hidden-sm  img-thumbnail" data-src="holder.js/500x500/auto" alt="500x500" src="./images/feature_requests.png" data-holder-rendered="true"></a>
+            <a href="./featureRequests.html"><img class="featurette-image img-responsive hidden-xs hidden-sm  " data-src="holder.js/500x500/auto" alt="500x500" src="./images/feature_requests.png" data-holder-rendered="true"></a>
         </div>
     </div>
 
@@ -269,7 +293,7 @@
 
     <div class="row featurette" id="licenses">
         <div class="col-md-5">
-            <img class="featurette-image img-responsive hidden-xs hidden-sm  img-thumbnail" data-src="holder.js/500x500/auto" alt="500x500" src="./images/license.png" data-holder-rendered="true">
+            <img class="featurette-image img-responsive hidden-xs hidden-sm" data-src="holder.js/500x500/auto" alt="500x500" src="./images/license.png" data-holder-rendered="true">
         </div>
         <div class="col-md-7">
             <div class="valign_parent">
diff --git a/js/smooth-scroll.min.js b/js/smooth-scroll.min.js
new file mode 100644
index 00000000..1e4828f2
--- /dev/null
+++ b/js/smooth-scroll.min.js
@@ -0,0 +1,2 @@
+/** smooth-scroll v5.3.3, by Chris Ferdinandi | http://github.com/cferdinandi/smooth-scroll | Licensed under MIT: http://gomakethings.com/mit/ */
+!function(e,t){"function"==typeof define&&define.amd?define("smoothScroll",t(e)):"object"==typeof exports?module.exports=t(e):e.smoothScroll=t(e)}(window||this,function(e){"use strict";var t,n,o,r={},a=!!document.querySelector&&!!e.addEventListener,c={speed:500,easing:"easeInOutCubic",offset:0,updateURL:!0,callbackBefore:function(){},callbackAfter:function(){}},u=function(e,t,n){if("[object Object]"===Object.prototype.toString.call(e))for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.call(n,e[o],o,e);else for(var r=0,a=e.length;a>r;r++)t.call(n,e[r],r,e)},i=function(e,t){var n={};return u(e,function(t,o){n[o]=e[o]}),u(t,function(e,o){n[o]=t[o]}),n},l=function(e,t){for(var n=t.charAt(0);e&&e!==document;e=e.parentNode)if("."===n){if(e.classList.contains(t.substr(1)))return e}else if("#"===n){if(e.id===t.substr(1))return e}else if("["===n&&e.hasAttribute(t.substr(1,t.length-2)))return e;return!1},s=function(e){return Math.max(e.scrollHeight,e.offsetHeight,e.clientHeight)},f=function(e){for(var t,n=String(e),o=n.length,r=-1,a="",c=n.charCodeAt(0);++r<o;){if(t=n.charCodeAt(r),0===t)throw new InvalidCharacterError("Invalid character: the input contains U+0000.");a+=t>=1&&31>=t||127==t||0===r&&t>=48&&57>=t||1===r&&t>=48&&57>=t&&45===c?"\\"+t.toString(16)+" ":t>=128||45===t||95===t||t>=48&&57>=t||t>=65&&90>=t||t>=97&&122>=t?n.charAt(r):"\\"+n.charAt(r)}return a},d=function(e,t){var n;return"easeInQuad"===e&&(n=t*t),"easeOutQuad"===e&&(n=t*(2-t)),"easeInOutQuad"===e&&(n=.5>t?2*t*t:-1+(4-2*t)*t),"easeInCubic"===e&&(n=t*t*t),"easeOutCubic"===e&&(n=--t*t*t+1),"easeInOutCubic"===e&&(n=.5>t?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1),"easeInQuart"===e&&(n=t*t*t*t),"easeOutQuart"===e&&(n=1- --t*t*t*t),"easeInOutQuart"===e&&(n=.5>t?8*t*t*t*t:1-8*--t*t*t*t),"easeInQuint"===e&&(n=t*t*t*t*t),"easeOutQuint"===e&&(n=1+--t*t*t*t*t),"easeInOutQuint"===e&&(n=.5>t?16*t*t*t*t*t:1+16*--t*t*t*t*t),n||t},h=function(e,t,n){var o=0;if(e.offsetParent)do o+=e.offsetTop,e=e.offsetParent;while(e);return o=o-t-n,o>=0?o:0},m=function(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)},p=function(e){return e&&"object"==typeof JSON&&"function"==typeof JSON.parse?JSON.parse(e):{}},v=function(t,n){history.pushState&&(n||"true"===n)&&history.pushState(null,null,[e.location.protocol,"//",e.location.host,e.location.pathname,e.location.search,t].join(""))};r.animateScroll=function(t,n,r){var a=i(a||c,r||{}),u=p(t?t.getAttribute("data-options"):null);a=i(a,u),n="#"+f(n.substr(1));var l="#"===n?document.documentElement:document.querySelector(n),g=e.pageYOffset;o||(o=document.querySelector("[data-scroll-header]"));var b,O,y,S=null===o?0:s(o)+o.offsetTop,I=h(l,S,parseInt(a.offset,10)),H=I-g,E=m(),A=0;v(n,a.updateURL);var L=function(o,r,c){var u=e.pageYOffset;(o==r||u==r||e.innerHeight+u>=E)&&(clearInterval(c),l.focus(),a.callbackAfter(t,n))},Q=function(){A+=16,O=A/parseInt(a.speed,10),O=O>1?1:O,y=g+H*d(a.easing,O),e.scrollTo(0,Math.floor(y)),L(y,I,b)},C=function(){a.callbackBefore(t,n),b=setInterval(Q,16)};0===e.pageYOffset&&e.scrollTo(0,0),C()};var g=function(e){var n=l(e.target,"[data-scroll]");n&&"a"===n.tagName.toLowerCase()&&(e.preventDefault(),r.animateScroll(n,n.hash,t))},b=function(){n||(n=setTimeout(function(){n=null,headerHeight=null===o?0:s(o)+o.offsetTop},66))};return r.destroy=function(){t&&(document.removeEventListener("click",g,!1),e.removeEventListener("resize",b,!1),t=null,n=null,o=null)},r.init=function(n){a&&(r.destroy(),t=i(c,n||{}),o=document.querySelector("[data-scroll-header]"),document.addEventListener("click",g,!1),o&&e.addEventListener("resize",b,!1))},r});
\ No newline at end of file
diff --git a/network_examples.html b/network_examples.html
index 79a5d1e5..d4e5a91f 100644
--- a/network_examples.html
+++ b/network_examples.html
@@ -7,7 +7,7 @@
     <title>Network Examples</title>
     <link rel="icon" HREF="favicon.ico">
     <!-- Bootstrap -->
-    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="./css/bootstrap.css" rel="stylesheet">
 
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@@ -23,8 +23,19 @@
 
     <style>
         body {
-            padding:10px;
             font-family: Lustria,Georgia,Times,"Times New Roman",serif !important;
+            background: url('./images/crossword.png') /* Background pattern from subtlepatterns.com */
+        }
+
+        div.contentWrapper {
+            padding:10px;
+        }
+        div.container {
+            max-width:970px;
+        }
+        div.navbar-wrapper {
+            background-color:#07508E;
+            border-bottom: 3px solid #ffffff;
         }
 
         pre {
@@ -51,7 +62,7 @@
             width:800px;
         }
 
-        img {
+        img.example {
             border:1px solid #dddddd;
             width:250px;
             height:250px;
@@ -104,6 +115,40 @@
 
 </head>
 <body onload="prettyPrint(); loadVis();">
+
+
+<div class="navbar-wrapper">
+    <div class="container">
+        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
+            <div class="container">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
+                </div>
+                <div id="navbar" class="navbar-collapse collapse">
+                    <ul class="nav navbar-nav">
+                        <li class="active"><a href="./index.html#modules">Modules</a></li>
+                        <li><a href="./docs/index.html" target="_blank">Documentation <img class="icon" src="./images/external-link-icons/external-link-icon-white.png"></a></li>
+                        <li><a href="./blog.html">Blog</a></li>
+                        <li><a href="./index.html#download_install">Download</a></li>
+                        <li><a href="./index.html#showcase">Showcase</a></li>
+                        <li><a href="./index.html#contribute">Contribute</a></li>
+                        <li><a href="./index.html#featureRequests">Feature requests</a></li>
+                        <li><a href="./index.html#licenses">License</a></li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+
+    </div>
+</div>
+
+<div class="contentWrapper">
 <h1>Network Examples</h1><a class="btn btn-default" href="#allExamples" role="button">View all examples »</a>  <a class="btn btn-primary" href="./docs/network.html" role="button">View docs »</a>
 
 <div class="textHTMLContent">This small code example shows the easiest way to get a network up and running. This code has been taken from example 1. The working example is shown next to it. (click it to start interacting with it).</div>
@@ -142,205 +187,205 @@
 <div class="container-fluid">
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/01_basic_usage.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/1.png" >
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/1.png" >
             <div class="exampleTitle">basic usage</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/02_random_nodes.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/2.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/2.png">
             <div class="exampleTitle">random nodes</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/03_images.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/3.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/3.png">
             <div class="exampleTitle">images</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/04_shapes.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/4.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/4.png">
             <div class="exampleTitle">shapes</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/05_social_network.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/5.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/5.png">
             <div class="exampleTitle">social network</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/06_groups.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/network/6.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/network/6.png">
             <div class="exampleTitle">groups</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/07_selections.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/7.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/7.png">
             <div class="exampleTitle">selections</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/08_mobile_friendly.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/8.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/8.png">
             <div class="exampleTitle">mobile friendly</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/09_sizing.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/9.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/9.png">
             <div class="exampleTitle">sizing</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/10_multiline_text.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/10.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/10.png">
             <div class="exampleTitle">multiline text</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/11_custom_style.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/11.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/11.png">
             <div class="exampleTitle">custom style</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/12_scalable_images.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/12.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/12.png">
             <div class="exampleTitle">scalable images</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/13_dashed_lines.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/13.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/13.png">
             <div class="exampleTitle">dashed lines</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/14_dot_language.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/14.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/14.png">
             <div class="exampleTitle">dot language</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/15_dot_language_playground.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/15.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/15.png">
             <div class="exampleTitle">playground</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/16_dynamic_data.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/16.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/16.png">
             <div class="exampleTitle">dynamic data</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/17_network_info.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/17.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/17.png">
             <div class="exampleTitle">network info</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/18_fully_random_nodes_clustering.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/18.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/18.png">
             <div class="exampleTitle">fully random nodes clustering</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/19_scale_free_graph_clustering.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/19.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/19.png">
             <div class="exampleTitle">scale free graph clustering</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/20_navigation.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/20.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/20.png">
             <div class="exampleTitle">navigation</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/21_data_manipulation.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/21.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/21.png">
             <div class="exampleTitle">data manipulation</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/22_les_miserables.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/22.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/22.png">
             <div class="exampleTitle">les miserables</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/23_hierarchical_layout.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/23.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/23.png">
             <div class="exampleTitle">hierarchical layout</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/24_hierarchical_layout_userdefined.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/24.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/24.png">
             <div class="exampleTitle">hierarchical layout userdefined</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/25_physics_configuration.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/25.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/25.png">
             <div class="exampleTitle">physics configuration</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/26_staticSmoothCurves.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/26.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/26.png">
             <div class="exampleTitle">static smooth curves</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/27_world_cup_network.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/27.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/27.png">
             <div class="exampleTitle">world cup network</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/28_world_cup_network_performance.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/28.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/28.png">
             <div class="exampleTitle">world cup network performance</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/29_neighbourhood_highlight.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/29.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/29.png">
             <div class="exampleTitle">neighborhood highlight</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/30_importing_from_gephi.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/30.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/30.png">
             <div class="exampleTitle">importing from gephi</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/31_localization.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/31.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/31.png">
             <div class="exampleTitle">localization</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/32_hierarchicaLayoutMethods.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/32.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/32.png">
             <div class="exampleTitle">hierarchical layout methods</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/33_animation.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/33.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/33.png">
             <div class="exampleTitle">animation</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/graphviz/graphviz_exampleScreenshots.html">
-            <img class="img-responsive"  src="./images/exampleScreenshots/network/graphviz.png">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/graphviz.png">
             <div class="exampleTitle">graphviz exampleScreenshots</div>
         </a>
     </div>
@@ -350,6 +395,7 @@
 <br />
 <br />
 
+</div>
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
diff --git a/timeline_examples.html b/timeline_examples.html
index 1e255886..650041f8 100644
--- a/timeline_examples.html
+++ b/timeline_examples.html
@@ -26,9 +26,21 @@
 
     <style>
         body {
-            padding:10px;
             font-family: Lustria,Georgia,Times,"Times New Roman",serif !important;
+            background: url('./images/crossword.png') /* Background pattern from subtlepatterns.com */
+        }
+
+        div.contentWrapper {
+            padding:10px;
         }
+        div.container {
+            max-width:970px;
+        }
+        div.navbar-wrapper {
+            background-color:#07508E;
+            border-bottom: 3px solid #ffffff;
+        }
+
 
         pre {
             width:450px;
@@ -99,6 +111,39 @@
 
 </head>
 <body onload="prettyPrint(); loadVis();">
+
+
+<div class="navbar-wrapper">
+    <div class="container">
+        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
+            <div class="container">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
+                </div>
+                <div id="navbar" class="navbar-collapse collapse">
+                    <ul class="nav navbar-nav">
+                        <li class="active"><a href="./index.html#modules">Modules</a></li>
+                        <li><a href="./docs/index.html" target="_blank">Documentation <img class="icon" src="./images/external-link-icons/external-link-icon-white.png"></a></li>
+                        <li><a href="./blog.html">Blog</a></li>
+                        <li><a href="./index.html#download_install">Download</a></li>
+                        <li><a href="./index.html#showcase">Showcase</a></li>
+                        <li><a href="./index.html#contribute">Contribute</a></li>
+                        <li><a href="./index.html#featureRequests">Feature requests</a></li>
+                        <li><a href="./index.html#licenses">License</a></li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+
+    </div>
+</div>
+<div class="contentWrapper">
 <h1>Timeline Examples</h1>
 <a class="btn btn-default" href="#allExamples" role="button">View all examples »</a>  <a class="btn btn-primary" href="./docs/timeline.html" role="button">View docs »</a>
 
@@ -136,181 +181,181 @@
 <div class="container-fluid">
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/01_basic.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/1.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/1.png">
             <div class="exampleTitle">basic usage</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/02_interactive.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/2.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/2.png">
             <div class="exampleTitle">interactive</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/03_performance.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/3.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/3.png">
             <div class="exampleTitle">performance</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/04_html_data.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/4.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/4.png">
             <div class="exampleTitle">html data</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/05_groups.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/5.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/5.png">
             <div class="exampleTitle">groups</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/06_event_listeners.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/6.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/6.png">
             <div class="exampleTitle">event listeners</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/07_custom_time_bar.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/7.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/7.png">
             <div class="exampleTitle">custom time bar</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/08_edit_items.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/8.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/8.png">
             <div class="exampleTitle">edit items</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/09_order_groups.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/9.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/9.png">
             <div class="exampleTitle">order groups</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/10_limit_move_and_zoom.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/10.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/10.png">
             <div class="exampleTitle">limit move and zoom</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/11_points.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/11.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/11.png">
             <div class="exampleTitle">points</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/12_custom_styling.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/12.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/12.png">
             <div class="exampleTitle">custom styling</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/13_past_and_future.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/13.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/13.png">
             <div class="exampleTitle">past and future</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/14_group_performance.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/14.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/14.png">
             <div class="exampleTitle">group performance</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/15_item_class_names.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/15.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/15.png">
             <div class="exampleTitle">item class names</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/16_navigation_menu.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/16.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/16.png">
             <div class="exampleTitle">navigation menu</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/17_data_serialization.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/17.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/17.png">
             <div class="exampleTitle">data serialization</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/18_range_overflow.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/18.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/18.png">
             <div class="exampleTitle">range overflow</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/19_localization.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/19.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/19.png">
             <div class="exampleTitle">localization</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/20_click_to_use.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/20.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/20.png">
             <div class="exampleTitle">click to use</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/21_set_selection.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/21.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/21.png">
             <div class="exampleTitle">set selection</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/22_window_adjustment.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/22.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/22.png">
             <div class="exampleTitle">window adjustment</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/23_data_attributes.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/23.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/23.png">
             <div class="exampleTitle">data attributes</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/24_all_data_attributes.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/24.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/24.png">
             <div class="exampleTitle">all data attributes</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/25_background_areas.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/25.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/25.png">
             <div class="exampleTitle">background areas</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/26_external_data.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/26.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/26.png">
             <div class="exampleTitle">external data</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/27_templates.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/27.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/27.png">
             <div class="exampleTitle">templates</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/29_hiding_times.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/28.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/28.png">
             <div class="exampleTitle">hiding times</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/30_subgroups.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/29.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/29.png">
             <div class="exampleTitle">subgroups</div>
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/31_background_areas_with_groups.html">
-            <img class="img-responsive" src="./images/exampleScreenshots/timeline/30.png">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/30.png">
             <div class="exampleTitle">background areas with groups</div>
         </a>
     </div>
@@ -319,7 +364,7 @@
 <br />
 <br />
 <br />
-
+</div>
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
