updated css, added images for examples

css/examples.css

@@ -0,0 +1,63 @@
+body {
+    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;
+    height:552px;
+    overflow:auto;
+}
+#visualization {
+    display:block;
+    margin-left:470px;
+    margin-top:-562px;
+    width:500px;
+    height:552px;
+    border: 1px solid #dddddd;
+    border-radius:4px;
+    background-color:#fcfcfc;
+}
+
+div.textHTMLContent {
+    margin-top:10px;
+    margin-bottom:10px;
+    display:block;
+    width:800px;
+}
+
+
+img.example {
+    border:1px solid #dddddd;
+    width:250px;
+    height:250px;
+    border-radius:10px;
+    margin-top:10px;
+}
+div.exampleTitle {
+    position:relative;
+    top:-7px;
+    width:100%;
+    max-width:250px;
+    height:30px;
+    border: 1px solid #dddddd;
+    background-color: #526b84;
+    color:#ffffff;
+    text-align:center;
+    vertical-align:middle;
+    line-height: 30px;
+    border-bottom-left-radius:5px;
+    border-bottom-right-radius:5px;
+}

graph2d_examples.html

@@ -8,7 +8,7 @@
     <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:// -->
@@ -21,71 +21,11 @@
     <script type="text/javascript" src="./js/prettify/prettify.js"></script>
     <script src="./dist/vis.js"></script>
     <link href="./dist/vis.css" rel="stylesheet" type="text/css" />
+    <link href="./css/examples.css" rel="stylesheet" type="text/css" />
 
     <style>
-        body {
-            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;
-            height:552px;
-            overflow:auto;
-        }
-
-        #visualization {
-            display:block;
-            margin-left:470px;
-            margin-top:-562px;
-            width:500px;
-            height:552px;
-            border: 1px solid #dddddd;
-            border-radius:4px;
-            background-color:#fcfcfc;
-        }
-
-        div.textHTMLContent {
-            margin-top:10px;
-            margin-bottom:10px;
-            display:block;
-            width:800px;
-        }
-
-
-        img {
-            border:1px solid #dddddd;
-            width:250px;
-            height:250px;
-            border-radius:10px;
-            margin-top:10px;
-        }
-        div.exampleTitle {
-            position:relative;
-            top:-7px;
-            width:100%;
-            max-width:250px;
-            height:30px;
-            border: 1px solid #dddddd;
-            background-color: #526b84;
-            color:#ffffff;
-            text-align:center;
-            vertical-align:middle;
-            line-height: 30px;
-            border-bottom-left-radius:5px;
-            border-bottom-right-radius:5px;
+        img.example {
+            height:150px;
         }
     </style>
     <script language="JavaScript">

graph3d_examples.html

@@ -8,7 +8,7 @@
     <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:// -->
@@ -21,71 +21,10 @@
     <script type="text/javascript" src="./js/prettify/prettify.js"></script>
     <script src="./dist/vis.js"></script>
     <link href="./dist/vis.css" rel="stylesheet" type="text/css" />
+    <link href="./css/examples.css" rel="stylesheet" type="text/css" />
 
     <style>
-        body {
-            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;
-            height:552px;
-            overflow:auto;
-        }
 
-        #visualization {
-            display:block;
-            margin-left:470px;
-            margin-top:-562px;
-            width:500px;
-            height:552px;
-            border: 1px solid #dddddd;
-            border-radius:4px;
-            background-color:#fcfcfc;
-        }
-
-        div.textHTMLContent {
-            margin-top:10px;
-            margin-bottom:10px;
-            display:block;
-            width:800px;
-        }
-
-
-        img {
-            border:1px solid #dddddd;
-            width:250px;
-            height:250px;
-            border-radius:10px;
-            margin-top:10px;
-        }
-        div.exampleTitle {
-            position:relative;
-            top:-7px;
-            width:100%;
-            max-width:250px;
-            height:30px;
-            border: 1px solid #dddddd;
-            background-color: #526b84;
-            color:#ffffff;
-            text-align:center;
-            vertical-align:middle;
-            line-height: 30px;
-            border-bottom-left-radius:5px;
-            border-bottom-right-radius:5px;
-        }
     </style>
     <script language="JavaScript">
         function loadVis() {

network_examples.html

@@ -20,70 +20,9 @@
     <script type="text/javascript" src="./js/prettify/prettify.js"></script>
     <script src="./dist/vis.js"></script>
     <link href="./dist/vis.css" rel="stylesheet" type="text/css" />
+    <link href="./css/examples.css" rel="stylesheet" type="text/css" />
 
     <style>
-        body {
-            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;
-            height:552px;
-            overflow:auto;
-        }
-
-        #visualization {
-            display:block;
-            margin-left:470px;
-            margin-top:-562px;
-            width:500px;
-            height:552px;
-            border: 1px solid #dddddd;
-            border-radius:4px;
-            background-color:#fcfcfc;
-        }
-
-        div.textHTMLContent {
-            margin-top:10px;
-            margin-bottom:10px;
-            display:block;
-            width:800px;
-        }
-
-        img.example {
-            border:1px solid #dddddd;
-            width:250px;
-            height:250px;
-            border-radius:10px;
-            margin-top:10px;
-        }
-        div.exampleTitle {
-            position:relative;
-            top:-7px;
-            width:100%;
-            max-width:250px;
-            height:30px;
-            border: 1px solid #dddddd;
-            background-color: #526b84;
-            color:#ffffff;
-            text-align:center;
-            vertical-align:middle;
-            line-height: 30px;
-            border-bottom-left-radius:5px;
-            border-bottom-right-radius:5px;
-        }
     </style>
     <script language="JavaScript">
         function loadVis() {

timeline_examples.html

@@ -8,7 +8,7 @@
     <title>Timeline 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,67 +23,11 @@
     <script src="./dist/vis.js"></script>
     <link href="./dist/vis.css" rel="stylesheet" type="text/css" />
 
+    <link href="./css/examples.css" rel="stylesheet" type="text/css" />
 
     <style>
-        body {
-            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;
-            height:552px;
-            overflow:auto;
-        }
-
-        #visualization {
-            margin-left:470px;
-            margin-top:-562px;
-            width:500px;
-            height:552px;
-        }
-
-        div.textHTMLContent {
-            margin-top:10px;
-            margin-bottom:10px;
-            display:block;
-            width:800px;
-        }
-
-
-        img {
-            border:1px solid #dddddd;
-            width:250px;
-            height:250px;
-            border-radius:10px;
-            margin-top:10px;
-        }
-        div.exampleTitle {
-            position:relative;
-            top:-7px;
-            width:100%;
-            max-width:250px;
-            height:30px;
-            border: 1px solid #dddddd;
-            background-color: #526b84;
-            color:#ffffff;
-            text-align:center;
-            vertical-align:middle;
-            line-height: 30px;
-            border-bottom-left-radius:5px;
-            border-bottom-right-radius:5px;
+        img.example {
+            height:150px;
         }
     </style>
     <script language="JavaScript">
@@ -366,6 +310,12 @@
             <div class="exampleTitle">grid styling</div>
         </a>
     </div>
+    <div class="col-lg-2 col-md-3 col-sm-6">
+        <a href="examples/timeline/requirejs/requirejs_example.html">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/requirejs.png">
+            <div class="exampleTitle">grid styling</div>
+        </a>
+    </div>
 </div>
 <br />
 <br />