diff --git a/examples/googleAnalytics.js b/examples/googleAnalytics.js
new file mode 100644
index 00000000..106072a0
--- /dev/null
+++ b/examples/googleAnalytics.js
@@ -0,0 +1,12 @@
+(function (i, s, o, g, r, a, m) {
+  i['GoogleAnalyticsObject'] = r;
+  i[r] = i[r] || function () {
+      (i[r].q = i[r].q || []).push(arguments)
+    }, i[r].l = 1 * new Date();
+  a = s.createElement(o), m = s.getElementsByTagName(o)[0];
+  a.async = 1;
+  a.src = g;
+  m.parentNode.insertBefore(a, m)
+})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
+ga('create', 'UA-61231638-1', 'auto');
+ga('send', 'pageview');
\ No newline at end of file
diff --git a/examples/network/01_basic_usage.html b/examples/network/01_basic_usage.html
index a0be8eb6..fff868ee 100644
--- a/examples/network/01_basic_usage.html
+++ b/examples/network/01_basic_usage.html
@@ -13,26 +13,29 @@
       border: 1px solid lightgray;
     }
   </style>
+</head>
 <body>
 
+<p>
+  Create a simple network with some nodes and edges.
+</p>
+
 <div id="mynetwork"></div>
 
 <script type="text/javascript">
   // create an array with nodes
-  var nodesDS = new vis.DataSet();
-
   var nodes = [
-    {id: 1, label: 'Node 1', value:3, title:'hello world', color:'red'},
-    {id: 2, label: 'Node 2', value:1, group:'bla'},
-    {id: 3, label: 'Node 3', value:5},
-    {id: 4, value:3},
-    {id: 5, label: 'Node 5', value:2}
+    {id: 1, label: 'Node 1'},
+    {id: 2, label: 'Node 2'},
+    {id: 3, label: 'Node 3'},
+    {id: 4, label: 'Node 4'},
+    {id: 5, label: 'Node 5'}
   ];
 
   // create an array with edges
   var edges = new vis.DataSet([
     {from: 1, to: 1},
-    {from: 1, to: 3,id:'e1', dashes:{pattern:[10,15,2,5]}},
+    {from: 1, to: 3},
     {from: 1, to: 2},
     {from: 2, to: 4},
     {from: 2, to: 5}
@@ -40,24 +43,14 @@
 
   // create a network
   var container = document.getElementById('mynetwork');
-  nodesDS.add(nodes);
   var data = {
-    nodes: nodesDS,
+    nodes: nodes,
     edges: edges
   };
-  var options = {
-    edges:{color:'red'}
-  }
+  var options = {};
   var network = new vis.Network(container, data, options);
-//    network.setOptions({nodes:{color:'red'}})
-  nodesDS.update({id:1, color:undefined,label:'hi'});
 </script>
-<pre>
-var options = {
-  manipulation: 'hello',
-  physics:{barnesHut:{gravitationslPull:34}, solver:'banana'},
-  groups:{'bla':{color:{backsground:'red'}, borderWidth:5}}
-}
-  </pre>
+
+<script src="../googleAnalytics.js"></script>
 </body>
 </html>
diff --git a/examples/network/02_random_nodes.html b/examples/network/02_random_nodes.html
index a490ad60..b6209d0d 100644
--- a/examples/network/02_random_nodes.html
+++ b/examples/network/02_random_nodes.html
@@ -84,37 +84,27 @@
         nodes: nodes,
         edges: edges
       };
-      var options = {physics:{stabilization:false}};
+      var options = {
+        physics: { stabilization: false }
+      };
       network = new vis.Network(container, data, options);
-
-      // add event listeners
-//      network.on('select', function(params) {
-//        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
-//      });
-//      network.on('stabilized', function (params) {
-//        document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.';
-//      });
-//      network.on('startStabilization', function (params) {
-//        document.getElementById('stabilization').innerHTML = 'Stabilizing...';
-//      });
-
-//      setTimeout(destroy,500);
     }
 
 
   </script>
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
 
 <body onload="draw();">
-<label for="nodeCount">Number of nodes:</label>
-<input id="nodeCount" type="text" value="25" style="width: 50px;">
-<input type="submit" value="Go" onclick="draw()">
-
-<br>
+<p>
+  Generate a random network with nodes and edges.
+</p>
+<p>
+  <label for="nodeCount">Number of nodes:</label>
+  <input id="nodeCount" type="text" value="25" style="width: 50px;">
+  <input type="submit" value="Go" onclick="draw()">
+</p>
 
 <div id="mynetwork"></div>
 
-<p id="selection"></p>
-<p id="stabilization"></p>
 </body>
 </html>
diff --git a/examples/network/03_images.html b/examples/network/03_images.html
index 162aa7ae..b9428d75 100644
--- a/examples/network/03_images.html
+++ b/examples/network/03_images.html
@@ -4,9 +4,6 @@
   <title>Network | Images</title>
 
   <style type="text/css">
-    body {
-      font: 10pt arial;
-    }
     #mynetwork {
       width: 600px;
       height: 600px;
@@ -68,16 +65,17 @@
         nodes: nodes,
         edges: edges
       };
-      var options = {
-        stabilize: false   // stabilize positions before displaying
-      };
+      var options = {};
       network = new vis.Network(container, data, options);
     }
   </script>
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
 
 <body onload="draw()">
 
+<p>
+  Display nodes as images.
+</p>
 <div id="mynetwork"></div>
 
 </body>
diff --git a/examples/network/04_shapes.html b/examples/network/04_shapes.html
index c7a9568f..22e5b107 100644
--- a/examples/network/04_shapes.html
+++ b/examples/network/04_shapes.html
@@ -4,11 +4,8 @@
   <title>Network | Shapes</title>
 
   <style type="text/css">
-    body {
-      font: 10pt arial;
-    }
     #mynetwork {
-      width: 100%;
+      width: 800px;
       height: 600px;
       border: 1px solid lightgray;
     }
@@ -61,15 +58,17 @@
         nodes: nodes,
         edges: edges
       };
-      var options = {
-        stabilize: false
-      };
+      var options = {};
       network = new vis.Network(container, data, options);
     }
   </script>
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
 
 <body onload="draw()">
+
+<p>
+  Nodes can have all sorts of shapes, colors and sizes. Edges can be drawn solid or dashed, and can have one or multiple arrows.
+</p>
 <div id="mynetwork"></div>
 
 <div id="info"></div>
diff --git a/examples/network/05_social_network.html b/examples/network/05_social_network.html
index baa215dd..ff2ffc76 100644
--- a/examples/network/05_social_network.html
+++ b/examples/network/05_social_network.html
@@ -62,13 +62,19 @@
         nodes: nodes,
         edges: edges
       };
-      var options = {};
+      var options = {
+        physics: {stabilization: false}
+      };
       network = new vis.Network(container, data, options);
     }
   </script>
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
-
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body onload="draw()">
+
+<p>
+  Create a social network showing the amount of interaction between people.
+</p>
 <div id="mynetwork"></div>
 <p>
   Icons: <a href="http://www.deleket.com/" target="_blank">Scrap Icons by Deleket</a>
diff --git a/examples/network/06_groups.html b/examples/network/06_groups.html
index aaf10421..88179661 100644
--- a/examples/network/06_groups.html
+++ b/examples/network/06_groups.html
@@ -5,14 +5,14 @@
 
   <style>
     body {
-        color:#ffffff;
-        font: 10pt arial;
+        color: #d3d3d3;
+        font: 12pt arial;
         background-color:#222222;
     }
     #mynetwork {
       width: 600px;
       height: 600px;
-      border: 1px solid lightgray;
+      border: 1px solid #444444;
       background-color:#222222;
     }
   </style>
@@ -137,23 +137,31 @@
       var options = {
         nodes: {
             shape: 'dot',
-            radius:30,
-            font:{color:'#ffffff'},
-            borderWidth:2
+            size: 30,
+            font: {
+              size: 32,
+              color: '#ffffff'
+            },
+            borderWidth: 2
+        },
+        edges : {
+          width: 2
         }
       };
       network = new vis.Network(container, data, options);
     }
 
   </script>
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 
 <body onload="draw()">
+<p>
+  Apply styling to groups of nodes.
+</p>
 <form onsubmit= "javascript: draw(); return false;">
-  Number of groups:
-  <input type="text" value="10" id="groupCount" style="width: 50px;">
-  Number of nodes per group:
-  <input type="text" value="3" id="nodeCount" style="width: 50px;">
+  Number of groups: <input type="text" value="10" id="groupCount" style="width: 50px;">
+  Number of nodes per group: <input type="text" value="3" id="nodeCount" style="width: 50px;">
   <input type="submit" value="Go">
 </form>
 <br>
diff --git a/examples/network/07_selections.html b/examples/network/07_selections.html
index ebf495a5..9f74849b 100644
--- a/examples/network/07_selections.html
+++ b/examples/network/07_selections.html
@@ -13,12 +13,15 @@
       border: 1px solid lightgray;
     }
   </style>
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
-
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 
+<p>
+  Select nodes or edges by clicking them. To select multiple nodes, long-press (hold) them.
+</p>
 <div id="mynetwork"></div>
-<div id="info"></div>
+<pre id="info"></pre>
 
 <script type="text/javascript">
   // create an array with nodes
@@ -53,7 +56,9 @@
 
   // add event listener
   network.on('select', function(properties) {
-    document.getElementById('info').innerHTML += 'selection: ' + JSON.stringify(properties) + '<br>';
+    console.log('select', properties);
+    delete properties.event;
+    document.getElementById('info').innerHTML = 'Selection: ' + JSON.stringify(properties, null, 2) + '<br>';
   });
 
   // set initial selection (id's of some nodes)
diff --git a/examples/network/08_mobile_friendly.html b/examples/network/08_mobile_friendly.html
deleted file mode 100644
index c29cd17a..00000000
--- a/examples/network/08_mobile_friendly.html
+++ /dev/null
@@ -1,109 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
-  <title>Network | Mobile friendly</title>
-
-  <style type="text/css">
-    html, body {
-      font: 10pt arial;
-      padding: 0;
-      margin: 0;
-      width: 100%;
-      height: 100%;
-    }
-
-    #mynetwork {
-      width: 100%;
-      height: 100%;
-    }
-  </style>
-
-  <!-- for mobile devices like android and iphone -->
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-
-  <script type="text/javascript" src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-
-  <script type="text/javascript">
-    var nodes = null;
-    var edges = null;
-    var network = null;
-
-    // Called when the Visualization API is loaded.
-    function draw() {
-      nodes = [];
-      edges = [];
-      var EDGE_LENGTH = 50;
-      var connectionCount = [];
-
-      // randomly create some nodes
-      var nodeCount = 20;
-      var cols = parseInt(Math.sqrt(nodeCount));
-      for (var i = 0; i < nodeCount; i++) {
-        nodes.push({
-          id: i,
-          label: '' + i
-        });
-
-        connectionCount[i] = 0;
-
-        // create links in a scale-free-network way
-        if (i == 1) {
-          var from = i;
-          var to = 0;
-          edges.push({
-            from: from,
-            to: to,
-            length: EDGE_LENGTH
-          });
-          connectionCount[from]++;
-          connectionCount[to]++;
-        }
-        else if (i > 1) {
-          var conn = edges.length * 2;
-          var rand = Math.floor(Math.random() * conn);
-          var cum = 0;
-          var j = 0;
-          while (j < connectionCount.length && cum < rand) {
-            cum += connectionCount[j];
-            j++;
-          }
-
-          var from = i;
-          var to = j;
-          edges.push({
-            from: from,
-            to: to,
-            length: EDGE_LENGTH
-          });
-          connectionCount[from]++;
-          connectionCount[to]++;
-        }
-      }
-
-      // Create a network
-      var container = document.getElementById('mynetwork');
-      var data = {
-        nodes: nodes,
-        edges: edges
-      };
-      var options = {
-        stabilize: false,
-        nodes: {
-          shape: 'dot',
-          radius: 24,
-          fontSize: 24
-        },
-        edges: {
-          width: 2
-        }
-      };
-      network = new vis.Network(container, data, options);
-    }
-  </script>
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
-
-<body onload="draw()" onresize="network.redraw();">
-<div id="mynetwork"></div>
-</body>
-</html>
diff --git a/examples/network/12_scalable_images.html b/examples/network/09_scaling.html
similarity index 80%
rename from examples/network/12_scalable_images.html
rename to examples/network/09_scaling.html
index 4b694909..411859d3 100644
--- a/examples/network/12_scalable_images.html
+++ b/examples/network/09_scaling.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <html>
 <head>
-  <title>Network | Scalable images</title>
+  <title>Network | Sizing</title>
 
   <style type="text/css">
-    body {
+    html, body {
       font: 10pt arial;
     }
     #mynetwork {
@@ -18,13 +18,10 @@
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
-    var DIR = 'img/soft-scraps-icons/';
-
     var nodes = null;
     var edges = null;
     var network = null;
 
-    // Called when the Visualization API is loaded.
     function draw() {
       // create people.
       // value corresponds with the age of the person
@@ -42,7 +39,7 @@
         {id: 10, value: 18, shape: 'image', label: 'Tod', title: 'Tod (18 years old)', image: DIR + 'User-Preppy-Red-icon.png'}
       ];
 
-      // create connetions between people
+      // create connections between people
       // value corresponds with the amount of contact between two people
       edges = [
         {from: 2, to: 8, value: 3, title: '3 emails per week'},
@@ -58,7 +55,7 @@
         {from: 2, to: 7, value: 4, title: '4 emails per week'}
       ];
 
-      // create a network
+      // Instantiate our network object.
       var container = document.getElementById('mynetwork');
       var data = {
         nodes: nodes,
@@ -66,21 +63,25 @@
       };
       var options = {
         nodes: {
-          widthMin: 20,  // min width in pixels
-          widthMax: 100  // max width in pixels
+          shape: 'dot',
+          scaling: {
+            min: 16, // px
+            max: 64  // px
+          }
         },
         edges: {
-          color: 'lightgray'
+          //color: 'gray'
         }
       };
       network = new vis.Network(container, data, options);
     }
   </script>
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
-
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body onload="draw()">
+<p>
+  Scale nodes and edges depending on their value. Hover over nodes and edges to get more information.
+</p>
 <div id="mynetwork"></div>
-
-<div id="info"></div>
 </body>
 </html>
diff --git a/examples/network/09_sizing.html b/examples/network/09_sizing.html
deleted file mode 100644
index 6add76dd..00000000
--- a/examples/network/09_sizing.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<head>
-  <title>Network | Sizing</title>
-
-  <style type="text/css">
-    html, body {
-      font: 10pt arial;
-    }
-    #mynetwork {
-      width: 600px;
-      height: 600px;
-      border: 1px solid lightgray;
-    }
-  </style>
-
-  <script type="text/javascript" src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-
-  <script type="text/javascript">
-    var nodes = null;
-    var edges = null;
-    var network = null;
-
-    function draw() {
-      // create people.
-      // value corresponds with the age of the person
-      nodes = [
-        {id: 1, value: 2, label:'Algie', title: 'Algie (2 years old)'},
-        {id: 2, value: 31, label: 'Alston', title: 'Alston (31 years old)'},
-        {id: 3, value: 12, label: 'Barney', title: 'Barney (12 years old)'},
-        {id: 4, value: 16, label: 'Coley', title: 'Coley (16 years old)'},
-        {id: 5, value: 17, label: 'Grant', title: 'Grant (17 years old)'},
-        {id: 6, value: 15, label: 'Langdon', title: 'Langdon (15 years old)'},
-        {id: 7, value: 6, label: 'Lee', title: 'Lee (6 years old)'},
-        {id: 8, value: 5, label: 'Merlin', title: 'Merlin (5 years old)'},
-        {id: 9, value: 30, label: 'Mick', title: 'Mick (30 years old)'},
-        {id: 10, value: 18, label: 'Tod', title: 'Tod (18 years old)'}
-      ];
-
-      // create connections.
-      // value corresponds with the amount of contact between two people
-      edges = [
-        {from: 2, to: 8, value: 3, title: '3 emails per week'},
-        {from: 2, to: 9, value: 5, title: '5 emails per week'},
-        {from: 2, to: 10,value: 1, title: '1 emails per week'},
-        {from: 4, to: 6, value: 8, title: '8 emails per week'},
-        {from: 5, to: 7, value: 2, title: '2 emails per week'},
-        {from: 4, to: 5, value: 1, title: '1 emails per week'},
-        {from: 9, to: 10,value: 2, title: '2 emails per week'},
-        {from: 2, to: 3, value: 6, title: '6 emails per week'},
-        {from: 3, to: 9, value: 4, title: '4 emails per week'},
-        {from: 5, to: 3, value: 1, title: '1 emails per week'},
-        {from: 2, to: 7, value: 4, title: '4 emails per week'}
-      ];
-
-      // Instantiate our network object.
-      var container = document.getElementById('mynetwork');
-      var data = {
-        nodes: nodes,
-        edges: edges
-      };
-      var options = {
-        nodes: {
-          shape: 'dot'
-        }
-      };
-      network = new vis.Network(container, data, options);
-    }
-  </script>
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
-
-<body onload="draw()">
-<div id="mynetwork"></div>
-</body>
-</html>
diff --git a/examples/network/10_multiline_text.html b/examples/network/10_multiline_text.html
index 18efb761..7d755b44 100644
--- a/examples/network/10_multiline_text.html
+++ b/examples/network/10_multiline_text.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<!doctype html>
 <html>
 <head>
   <title>Network | Multiline text</title>
@@ -43,7 +43,8 @@
       var network = new vis.Network(container, data, options);
     }
   </script>
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 
 <body onload="draw()">
 <div id="mynetwork"></div>
diff --git a/examples/network/11_custom_style.html b/examples/network/11_styling.html
similarity index 75%
rename from examples/network/11_custom_style.html
rename to examples/network/11_styling.html
index 13c2e8f7..adcb7a10 100644
--- a/examples/network/11_custom_style.html
+++ b/examples/network/11_styling.html
@@ -1,12 +1,9 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<!doctype html>
 <html>
 <head>
   <title>Network | Custom style</title>
 
   <style type="text/css">
-    body {
-      font: 10pt arial;
-    }
     #mynetwork {
       width: 600px;
       height: 600px;
@@ -60,15 +57,22 @@
 
       // specify options
       options = {
-        stabilize: false,
+        physics: {
+          stabilization: false,
+          barnesHut: {
+            springLength:200
+          }
+        },
         edges: {
           width: 2,
-          style: 'arrow',
+          arrows: 'to',
           color: 'gray'
         },
         nodes: {
           // default for all nodes
-          fontFace: 'times',
+          font: {
+            face: 'times'
+          },
           shape: 'circle',
           color: {
             border: 'orange',
@@ -79,16 +83,17 @@
             }
           }
         },
-        physics: {barnesHut:{springLength:200}}, // this is the correct way to set the length of the springs
         groups: {
           black: {
             // defaults for nodes in this group
-            radius: 15,
+            size: 15,
             color: 'black',
-            fontColor: 'white',
-            fontSize: 18,
-            fontFace: 'courier',
-            shape: 'rect'
+            font: {
+              color: 'white',
+              size: 18,
+              face: 'courier'
+            },
+            shape: 'box'
           },
           gray: {
             color: {
@@ -99,8 +104,10 @@
                 background: 'lightgray'
               }
             },
-            fontSize: 18,
-            fontFace: 'arial',
+            font: {
+              size: 18,
+              face: 'arial'
+            },
             shape: 'circle'
           },
           white: {
@@ -108,7 +115,9 @@
               border: 'black',
               background: 'white'
             },
-            fontColor: 'red',
+            font: {
+              color: 'red'
+            },
             shape: 'image',
             image: 'img/soft-scraps-icons/User-Coat-Blue-icon.png'
           }
@@ -124,8 +133,12 @@
       network = new vis.Network(container, data, options);
     }
   </script>
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 
+<p>
+  Custom styles for nodes can be applied globally, per group, of to individual nodes. Same holds for edges.
+</p>
 <body onload="draw()">
 <div id="mynetwork"></div>
 </body>
diff --git a/examples/network/13_dashed_lines.html b/examples/network/13_dashed_lines.html
index 91994d6d..87446e58 100644
--- a/examples/network/13_dashed_lines.html
+++ b/examples/network/13_dashed_lines.html
@@ -23,17 +23,17 @@
       var nodes = [
         {id: 1, label: 'dashed\nline\nexamples'},
         {id: 2, label: 'default'},
-        {id: 3, label: 'dash.length: 20\ndash.gap: 20'},
-        {id: 4, label: 'dash.length: 20\ndash.gap: 5'},
-        {id: 5, label: 'dash.length: 5\ndash.gap: 20'},
-        {id: 6, label: 'dash.length: 20\ndash.gap: 5\ndash.altLength: 5'}
+        {id: 3, label: 'dashes: [20, 20]'},
+        {id: 4, label: 'dashes: [20, 5]'},
+        {id: 5, label: 'dashes: [5, 20]'},
+        {id: 6, label: 'dashes: [20, 5, 5, 5]'}
       ];
       var edges = [
-        {from: 1, to: 2, style: 'dash-line'},
-        {from: 1, to: 3, style: 'dash-line', dash: {length: 20, gap: 20}},
-        {from: 1, to: 4, style: 'dash-line', dash: {length: 20, gap: 5}},
-        {from: 1, to: 5, style: 'dash-line', dash: {length: 5, gap: 20}},
-        {from: 1, to: 6, style: 'dash-line', dash: {length: 20, gap: 5, altLength: 5}}
+        {from: 1, to: 2, dashes: true},
+        {from: 1, to: 3, dashes: [20, 20]},
+        {from: 1, to: 4, dashes: [20, 5]},
+        {from: 1, to: 5, dashes: [5, 20]},
+        {from: 1, to: 6, dashes: [20, 5, 5, 5]}
       ];
 
       // create the network
@@ -46,13 +46,18 @@
         nodes: {
           shape: 'box'
         },
-        physics: {barnesHut:{springLength:150}}, // this is the correct way to set the length of the springs
-        stabilize: false
+        physics: {
+          barnesHut: {
+            springLength: 150
+          },
+          stabilization: false
+        }
       };
       var network = new vis.Network(container, data, options);
     }
   </script>
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 
 <body onload="draw();">
 <p>
diff --git a/examples/network/index.html b/examples/network/index.html
index 7e1e43fb..086ca9b5 100644
--- a/examples/network/index.html
+++ b/examples/network/index.html
@@ -19,11 +19,9 @@
   <p><a href="05_social_network.html">05_social_network.html</a></p>
   <p><a href="06_groups.html">06_groups.html</a></p>
   <p><a href="07_selections.html">07_selections.html</a></p>
-  <p><a href="08_mobile_friendly.html">08_mobile_friendly.html</a></p>
-  <p><a href="09_sizing.html">09_sizing.html</a></p>
+  <p><a href="09_scaling.html">09_scaling.html</a></p>
   <p><a href="10_multiline_text.html">10_multiline_text.html</a></p>
-  <p><a href="11_custom_style.html">11_custom_style.html</a></p>
-  <p><a href="12_scalable_images.html">12_scalable_images.html</a></p>
+  <p><a href="11_styling.html">11_styling.html</a></p>
   <p><a href="13_dashed_lines.html">13_dashed_lines.html</a></p>
   <p><a href="14_dot_language.html">14_dot_language.html</a></p>
   <p><a href="15_dot_language_playground.html">15_dot_language_playground.html</a></p>
diff --git a/lib/network/modules/components/nodes/shapes/Box.js b/lib/network/modules/components/nodes/shapes/Box.js
index bb8aab48..d872ff10 100644
--- a/lib/network/modules/components/nodes/shapes/Box.js
+++ b/lib/network/modules/components/nodes/shapes/Box.js
@@ -9,8 +9,8 @@ class Box extends NodeBase {
 
   resize(ctx, selected) {
     if (this.width === undefined) {
-      var margin = 5;
-      var textSize = this.labelModule.getTextSize(ctx,selected);
+      let margin = 5;
+      let textSize = this.labelModule.getTextSize(ctx,selected);
       this.width = textSize.width + 2 * margin;
       this.height = textSize.height + 2 * margin;
     }
@@ -21,8 +21,8 @@ class Box extends NodeBase {
     this.left = x - this.width / 2;
     this.top = y - this.height / 2;
 
-    var borderWidth = this.options.borderWidth;
-    var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
+    let borderWidth = this.options.borderWidth;
+    let selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
 
     ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
     ctx.lineWidth = (selected ? selectionLineWidth : borderWidth);
@@ -31,7 +31,8 @@ class Box extends NodeBase {
 
     ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
 
-    ctx.roundRect(this.left, this.top, this.width, this.height, this.options.size);
+    let borderRadius = 6;
+    ctx.roundRect(this.left, this.top, this.width, this.height, borderRadius);
 
     // draw shadow if enabled
     this.enableShadow(ctx);
@@ -52,10 +53,10 @@ class Box extends NodeBase {
 
   distanceToBorder(ctx, angle) {
     this.resize(ctx);
-    var a = this.width / 2;
-    var b = this.height / 2;
-    var w = (Math.sin(angle) * a);
-    var h = (Math.cos(angle) * b);
+    let a = this.width / 2;
+    let b = this.height / 2;
+    let w = (Math.sin(angle) * a);
+    let h = (Math.cos(angle) * b);
     return a * b / Math.sqrt(w * w + h * h);
   }
 }
