Refactored css of network navigation

lib/network/css/network-navigation.css

@@ -1,4 +1,4 @@
-div.network-navigation {
+div.vis-network div.vis-navigation div.vis-button {
     width:34px;
     height:34px;
     -moz-border-radius: 17px;
@@ -16,45 +16,45 @@ div.network-navigation {
     user-select: none;
 }
 
-div.network-navigation:hover {
-    box-shadow: 0px 0px 3px 3px rgba(56, 207, 21, 0.30);
+div.vis-network div.vis-navigation div.vis-button:hover {
+    box-shadow: 0 0 3px 3px rgba(56, 207, 21, 0.30);
 }
 
-div.network-navigation:active {
-    box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
+div.vis-network div.vis-navigation div.vis-button:active {
+    box-shadow: 0 0 1px 3px rgba(56, 207, 21, 0.95);
 }
 
-div.network-navigation.up {
+div.vis-network div.vis-navigation div.vis-button.vis-up {
     background-image: url("img/network/upArrow.png");
     bottom:50px;
     left:55px;
 }
-div.network-navigation.down {
+div.vis-network div.vis-navigation div.vis-button.vis-down {
     background-image: url("img/network/downArrow.png");
     bottom:10px;
     left:55px;
 }
-div.network-navigation.left {
+div.vis-network div.vis-navigation div.vis-button.vis-left {
     background-image: url("img/network/leftArrow.png");
     bottom:10px;
     left:15px;
 }
-div.network-navigation.right {
+div.vis-network div.vis-navigation div.vis-button.vis-right {
     background-image: url("img/network/rightArrow.png");
     bottom:10px;
     left:95px;
 }
-div.network-navigation.zoomIn {
+div.vis-network div.vis-navigation div.vis-button.vis-zoomIn {
     background-image: url("img/network/plus.png");
     bottom:10px;
     right:15px;
 }
-div.network-navigation.zoomOut {
+div.vis-network div.vis-navigation div.vis-button.vis-zoomOut {
     background-image: url("img/network/minus.png");
     bottom:10px;
     right:55px;
 }
-div.network-navigation.zoomExtends {
+div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends {
     background-image: url("img/network/zoomExtends.png");
     bottom:50px;
     right:15px;

lib/network/modules/Canvas.js

@@ -70,7 +70,7 @@ class Canvas {
     }
 
     this.frame = document.createElement('div');
-    this.frame.className = 'vis network-frame';
+    this.frame.className = 'vis-network';
     this.frame.style.position = 'relative';
     this.frame.style.overflow = 'hidden';
     this.frame.tabIndex = 900; // tab index is required for keycharm to bind keystrokes to the div instead of the window

lib/network/modules/components/NavigationHandler.js

@@ -78,11 +78,12 @@ class NavigationHandler {
     var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','_zoomExtent'];
 
     this.navigationDOM['wrapper'] = document.createElement('div');
+    this.navigationDOM['wrapper'].className = 'vis-navigation';
     this.canvas.frame.appendChild(this.navigationDOM['wrapper']);
 
     for (var i = 0; i < navigationDivs.length; i++) {
       this.navigationDOM[navigationDivs[i]] = document.createElement('div');
-      this.navigationDOM[navigationDivs[i]].className = 'network-navigation ' + navigationDivs[i];
+      this.navigationDOM[navigationDivs[i]].className = 'vis-button vis-' + navigationDivs[i];
       this.navigationDOM['wrapper'].appendChild(this.navigationDOM[navigationDivs[i]]);
 
       var hammer = new Hammer(this.navigationDOM[navigationDivs[i]]);