Refactored the css of Timeline and Graph2d to have a `vis-` prefix everywhere. (Still a small issue in Graph2d)

9 years ago · b3e3dccad7
--- a/docs/timeline.html
+++ b/docs/timeline.html
@ -1373,7 +1373,7 @@ To load a locale into the Timeline not supported by default, one can add a new l
 <p>For example, to change the border and background color of all items, include the
  following code inside the head of your html code or in a separate stylesheet.</p>
 <pre class="prettyprint lang-html">&lt;style&gt;
  .vis.timeline .item {
  .vis-item {
    border-color: orange;
    background-color: yellow;
  }
@ -1424,17 +1424,17 @@ To load a locale into the Timeline not supported by default, one can add a new l

  <pre class="prettyprint lang-html">&lt;style&gt;
  /* alternating column backgrounds */
  .vis.timeline .timeaxis .grid.odd {
  .vis-time-axis .grid.odd {
    background: #f5f5f5;
  }

  /* gray background in weekends, white text color */
  .vis.timeline .timeaxis .grid.saturday,
  .vis.timeline .timeaxis .grid.sunday {
  .vis-time-axis .vis-grid.saturday,
  .vis-time-axis .vis-grid.sunday {
    background: gray;
  }
  .vis.timeline .timeaxis .text.saturday,
  .vis.timeline .timeaxis .text.sunday {
  .vis-time-axis .vis-text.saturday,
  .vis-time-axis .vis-text.sunday {
    color: white;
  }
 &lt;/style&gt;
--- a/examples/graph2d/04_rightAxis.html
+++ b/examples/graph2d/04_rightAxis.html
@ -8,14 +8,14 @@
            font-family: sans-serif;
        }

        .customStyle1 {
        .custom-style1 {
            fill: #0df200;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #0df200;
        }

        .customStyle2 {
        .custom-style2 {
            fill: #f23303;
            fill-opacity:0;
            stroke-width:2px;
@ -47,7 +47,7 @@
    groups.add({
        id: 0,
        content: names[0],
        className: 'customStyle1',
        className: 'custom-style1',
        options: {
            drawPoints: {
                style: 'square' // square, circle
@ -60,7 +60,7 @@
    groups.add({
        id: 1,
        content: names[1],
        className: 'customStyle2',
        className: 'custom-style2',
        options: {
            style:'bar',
            drawPoints: {style: 'circle',
--- a/examples/graph2d/05_bothAxis.html
+++ b/examples/graph2d/05_bothAxis.html
@ -8,27 +8,26 @@
            font-family: sans-serif;
        }

        .customStyle1 {
        .custom-style1 {
            fill: #f2ea00;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #b3ab00;
        }

        .customStyle2 {
        .custom-style2 {
            fill: #00a0f2;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #050092;
        }

        .customStyle3 {
        .custom-style3 {
            fill: #00f201;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #029200;
        }
        path.customStyle3.fill {
        path.custom-style3.vis-fill {
            fill-opacity:0.5 !important;
            stroke: none;
        }
@ -57,7 +56,7 @@
    groups.add({
        id: 0,
        content: names[0],
        className: 'customStyle1',
        className: 'custom-style1',
        options: {
            drawPoints: {
                style: 'square' // square, circle
@ -70,7 +69,7 @@
    groups.add({
        id: 1,
        content: names[1],
        className: 'customStyle2',
        className: 'custom-style2',
        options: {
            style:'bar',
            drawPoints: {style: 'circle',
@ -90,7 +89,7 @@
    groups.add({
        id: 3,
        content: names[3],
        className: 'customStyle3',
        className: 'custom-style3',
        options: {
            yAxisOrientation: 'right', // right, left
            drawPoints: {
--- a/examples/graph2d/09_external_legend.html
+++ b/examples/graph2d/09_external_legend.html
@ -1,366 +1,366 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Graph2d | External legend Example</title>
    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body, html {
            font-family: sans-serif;
        }

        .customStyle1 {
            fill: #f2ea00;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #b3ab00;
        }

        .customStyle2 {
            fill: #00a0f2;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #050092;
        }

        .customStyle3 {
            fill: #00f201;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #029200;
        }

        path.customStyle3.fill {
            fill-opacity:0.5 !important;
            stroke: none;
        }

         .graphGroup0 {
            fill:#4f81bd;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #4f81bd;
        }

         .graphGroup1 {
            fill:#f79646;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #f79646;
        }

         .graphGroup2 {
            fill: #8c51cf;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #8c51cf;
        }

         .graphGroup3 {
            fill: #75c841;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #75c841;
        }

         .graphGroup4 {
            fill: #ff0100;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #ff0100;
        }

         .graphGroup5 {
            fill: #37d8e6;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #37d8e6;
        }

         .graphGroup6 {
            fill: #042662;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #042662;
        }

         .graphGroup7 {
            fill:#00ff26;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #00ff26;
        }

         .graphGroup8 {
            fill:#ff00ff;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #ff00ff;
        }

         .graphGroup9 {
            fill: #8f3938;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #8f3938;
        }

         .fill {
            fill-opacity:0.1;
            stroke: none;
        }


         .bar {
            fill-opacity:0.5;
            stroke-width:1px;
        }

         .point {
            stroke-width:2px;
            fill-opacity:1.0;
        }


         .legendBackground {
            stroke-width:1px;
            fill-opacity:0.9;
            fill: #ffffff;
            stroke: #c2c2c2;
        }


         .outline {
            stroke-width:1px;
            fill-opacity:1;
            fill: #ffffff;
            stroke: #e5e5e5;
        }

         .iconFill {
            fill-opacity:0.3;
            stroke: none;
        }

        div.descriptionContainer {
            float:left;
            height:30px;
            width:160px;
            padding-left:5px;
            padding-right:5px;
            line-height: 30px;
        }

        div.iconContainer {
            float:left;
        }

        div.legendElementContainer {
            display:inline-block;
            width:200px;
            height:30px;
            border-style:solid;
            border-width:1px;
            border-color: #e0e0e0;
            background-color: #ffffff;
            margin:4px;
            padding:4px;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor:pointer;
        }
        div.legendElementContainer.hidden {
            background-color: #d3e6ff;
        }

        svg.legendIcon {
            width:30px;
            height:30px;
        }

        div.externalLegend {
            position:relative;
            margin-left: -5px;
            width: 900px;
        }




    </style>

    <script src="../../dist/vis.js"></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>
  <title>Graph2d | External legend Example</title>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }

    .custom-style1 {
      fill: #f2ea00;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #b3ab00;
    }

    .custom-style2 {
      fill: #00a0f2;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #050092;
    }

    .custom-style3 {
      fill: #00f201;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #029200;
    }

    path.custom-style3.fill {
      fill-opacity:0.5 !important;
      stroke: none;
    }

    .vis-graph-group0 {
      fill:#4f81bd;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #4f81bd;
    }

    .vis-graph-group1 {
      fill:#f79646;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #f79646;
    }

    .vis-graph-group2 {
      fill: #8c51cf;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #8c51cf;
    }

    .vis-graph-group3 {
      fill: #75c841;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #75c841;
    }

    .vis-graph-group4 {
      fill: #ff0100;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #ff0100;
    }

    .vis-graph-group5 {
      fill: #37d8e6;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #37d8e6;
    }

    .vis-graph-group6 {
      fill: #042662;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #042662;
    }

    .vis-graph-group7 {
      fill:#00ff26;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #00ff26;
    }

    .vis-graph-group8 {
      fill:#ff00ff;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #ff00ff;
    }

    .vis-graph-group9 {
      fill: #8f3938;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #8f3938;
    }

    .vis-fill {
      fill-opacity:0.1;
      stroke: none;
    }


    .vis-bar {
      fill-opacity:0.5;
      stroke-width:1px;
    }

    .vis-point {
      stroke-width:2px;
      fill-opacity:1.0;
    }


    .vis-legend-background {
      stroke-width:1px;
      fill-opacity:0.9;
      fill: #ffffff;
      stroke: #c2c2c2;
    }


    .vis-outline {
      stroke-width:1px;
      fill-opacity:1;
      fill: #ffffff;
      stroke: #e5e5e5;
    }

    .vis-icon-fill {
      fill-opacity:0.3;
      stroke: none;
    }

    div.description-container {
      float:left;
      height:30px;
      width:160px;
      padding-left:5px;
      padding-right:5px;
      line-height: 30px;
    }

    div.icon-container {
      float:left;
    }

    div.legend-element-container {
      display:inline-block;
      width:200px;
      height:30px;
      border-style:solid;
      border-width:1px;
      border-color: #e0e0e0;
      background-color: #ffffff;
      margin:4px;
      padding:4px;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor:pointer;
    }
    div.legend-element-container.hidden {
      background-color: #d3e6ff;
    }

    svg.legend-icon {
      width:30px;
      height:30px;
    }

    div.external-legend {
      position:relative;
      margin-left: -5px;
      width: 900px;
    }




  </style>

  <script src="../../dist/vis.js"></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>
 <h2>Graph2d | External custom legend</h2>
 <div style="width:800px; font-size:14px; text-align: justify;">
    This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the
    groups by updating the dataset.
  This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the
  groups by updating the dataset.

 </div>
 <br />
 <div id="Legend" class="externalLegend"></div>
 <div id="Legend" class="external-legend"></div>
 <div id="visualization"></div>


 <script type="text/javascript">
    // create a dataSet with groups
    var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
    var groups = new vis.DataSet();
    groups.add({
        id: 0,
        content: names[0],
        className: 'customStyle1',
        options: {
            drawPoints: {
                style: 'square' // square, circle
            },
            shaded: {
                orientation: 'bottom' // top, bottom
            }
        }});

    groups.add({
        id: 1,
        content: names[1],
        className: 'customStyle2',
        options: {
            style:'bar',
            drawPoints: {style: 'circle',
                size: 10
            }
        }});

    groups.add({
        id: 2,
        content: names[2],
        options: {
            yAxisOrientation: 'right', // right, left
            drawPoints: false
        }
    });

    groups.add({
        id: 3,
        content: names[3],
        className: 'customStyle3',
        options: {
            yAxisOrientation: 'right', // right, left
            drawPoints: {
                style: 'circle' // square, circle
            },
            shaded: {
                orientation: 'top' // top, bottom
            }
        }});

    var container = document.getElementById('visualization');
    var items = [
        {x: '2014-06-12', y: 0 , group: 0},
        {x: '2014-06-13', y: 30, group: 0},
        {x: '2014-06-14', y: 10, group: 0},
        {x: '2014-06-15', y: 15, group: 1},
        {x: '2014-06-16', y: 30, group: 1},
        {x: '2014-06-17', y: 10, group: 1},
        {x: '2014-06-18', y: 15, group: 1},
        {x: '2014-06-19', y: 52, group: 1},
        {x: '2014-06-20', y: 10, group: 1},
        {x: '2014-06-21', y: 20, group: 2},
        {x: '2014-06-22', y: 600, group: 2},
        {x: '2014-06-23', y: 100, group: 2},
        {x: '2014-06-24', y: 250, group: 2},
        {x: '2014-06-25', y: 300, group: 2},
        {x: '2014-06-26', y: 200, group: 3},
        {x: '2014-06-27', y: 600, group: 3},
        {x: '2014-06-28', y: 1000, group: 3},
        {x: '2014-06-29', y: 250, group: 3},
        {x: '2014-06-30', y: 300, group: 3}
    ];

    var dataset = new vis.DataSet(items);
    var options = {
        dataAxis: {showMinorLabels: false},
        start: '2014-06-09',
        end: '2014-07-03'
    };
    var graph2d = new vis.Graph2d(container, items, groups, options);


    /**
     * this function fills the external legend with content using the getLegend() function.
     */
    function populateExternalLegend() {
        var groupsData = groups.get();
        var legendDiv = document.getElementById("Legend");
        legendDiv.innerHTML = "";

        // get for all groups:
        for (var i = 0; i < groupsData.length; i++) {
            // create divs
            var containerDiv = document.createElement("div");
            var iconDiv = document.createElement("div");
            var descriptionDiv = document.createElement("div");

            // give divs classes and Ids where necessary
            containerDiv.className = 'legendElementContainer';
            containerDiv.id = groupsData[i].id + "_legendContainer"
            iconDiv.className = "iconContainer";
            descriptionDiv.className = "descriptionContainer";

            // get the legend for this group.
            var legend = graph2d.getLegend(groupsData[i].id,30,30);

            // append class to icon. All styling classes from the vis.css have been copied over into the head here to be able to style the
            // icons with the same classes if they are using the default ones.
            legend.icon.setAttributeNS(null, "class", "legendIcon");

            // append the legend to the corresponding divs
            iconDiv.appendChild(legend.icon);
            descriptionDiv.innerHTML = legend.label;

            // determine the order for left and right orientation
            if (legend.orientation == 'left') {
                descriptionDiv.style.textAlign = "left";
                containerDiv.appendChild(iconDiv);
                containerDiv.appendChild(descriptionDiv);
            }
            else {
                descriptionDiv.style.textAlign = "right";
                containerDiv.appendChild(descriptionDiv);
                containerDiv.appendChild(iconDiv);
            }

            // append to the legend container div
            legendDiv.appendChild(containerDiv);

            // bind click event to this legend element.
            containerDiv.onclick = toggleGraph.bind(this,groupsData[i].id);
        }
  // create a dataSet with groups
  var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
  var groups = new vis.DataSet();
  groups.add({
    id: 0,
    content: names[0],
    className: 'custom-style1',
    options: {
      drawPoints: {
        style: 'square' // square, circle
      },
      shaded: {
        orientation: 'bottom' // top, bottom
      }
    }});

  groups.add({
    id: 1,
    content: names[1],
    className: 'custom-style2',
    options: {
      style:'bar',
      drawPoints: {style: 'circle',
        size: 10
      }
    }});

  groups.add({
    id: 2,
    content: names[2],
    options: {
      yAxisOrientation: 'right', // right, left
      drawPoints: false
    }

    /**
     * This function switchs the visible option of the selected group on an off.
     * @param groupId
     */
    function toggleGraph(groupId) {
        // get the container that was clicked on.
        var container = document.getElementById(groupId + "_legendContainer")
        // if visible, hide
        if (graph2d.isGroupVisible(groupId) == true) {
            groups.update({id:groupId, visible:false});
            container.className = container.className + " hidden";
        }
        else { // if invisible, show
            groups.update({id:groupId, visible:true});
            container.className = container.className.replace("hidden","");
        }
  });

  groups.add({
    id: 3,
    content: names[3],
    className: 'custom-style3',
    options: {
      yAxisOrientation: 'right', // right, left
      drawPoints: {
        style: 'circle' // square, circle
      },
      shaded: {
        orientation: 'top' // top, bottom
      }
    }});

  var container = document.getElementById('visualization');
  var items = [
    {x: '2014-06-12', y: 0 , group: 0},
    {x: '2014-06-13', y: 30, group: 0},
    {x: '2014-06-14', y: 10, group: 0},
    {x: '2014-06-15', y: 15, group: 1},
    {x: '2014-06-16', y: 30, group: 1},
    {x: '2014-06-17', y: 10, group: 1},
    {x: '2014-06-18', y: 15, group: 1},
    {x: '2014-06-19', y: 52, group: 1},
    {x: '2014-06-20', y: 10, group: 1},
    {x: '2014-06-21', y: 20, group: 2},
    {x: '2014-06-22', y: 600, group: 2},
    {x: '2014-06-23', y: 100, group: 2},
    {x: '2014-06-24', y: 250, group: 2},
    {x: '2014-06-25', y: 300, group: 2},
    {x: '2014-06-26', y: 200, group: 3},
    {x: '2014-06-27', y: 600, group: 3},
    {x: '2014-06-28', y: 1000, group: 3},
    {x: '2014-06-29', y: 250, group: 3},
    {x: '2014-06-30', y: 300, group: 3}
  ];

  var dataset = new vis.DataSet(items);
  var options = {
    dataAxis: {showMinorLabels: false},
    start: '2014-06-09',
    end: '2014-07-03'
  };
  var graph2d = new vis.Graph2d(container, items, groups, options);


  /**
   * this function fills the external legend with content using the getLegend() function.
   */
  function populateExternalLegend() {
    var groupsData = groups.get();
    var legendDiv = document.getElementById("Legend");
    legendDiv.innerHTML = "";

    // get for all groups:
    for (var i = 0; i < groupsData.length; i++) {
      // create divs
      var containerDiv = document.createElement("div");
      var iconDiv = document.createElement("div");
      var descriptionDiv = document.createElement("div");

      // give divs classes and Ids where necessary
      containerDiv.className = 'legend-element-container';
      containerDiv.id = groupsData[i].id + "_legendContainer"
      iconDiv.className = "icon-container";
      descriptionDiv.className = "description-container";

      // get the legend for this group.
      var legend = graph2d.getLegend(groupsData[i].id,30,30);

      // append class to icon. All styling classes from the vis.css have been copied over into the head here to be able to style the
      // icons with the same classes if they are using the default ones.
      legend.icon.setAttributeNS(null, "class", "legend-icon");

      // append the legend to the corresponding divs
      iconDiv.appendChild(legend.icon);
      descriptionDiv.innerHTML = legend.label;

      // determine the order for left and right orientation
      if (legend.orientation == 'left') {
        descriptionDiv.style.textAlign = "left";
        containerDiv.appendChild(iconDiv);
        containerDiv.appendChild(descriptionDiv);
      }
      else {
        descriptionDiv.style.textAlign = "right";
        containerDiv.appendChild(descriptionDiv);
        containerDiv.appendChild(iconDiv);
      }

      // append to the legend container div
      legendDiv.appendChild(containerDiv);

      // bind click event to this legend element.
      containerDiv.onclick = toggleGraph.bind(this,groupsData[i].id);
    }
  }

  /**
   * This function switchs the visible option of the selected group on an off.
   * @param groupId
   */
  function toggleGraph(groupId) {
    // get the container that was clicked on.
    var container = document.getElementById(groupId + "_legendContainer")
    // if visible, hide
    if (graph2d.isGroupVisible(groupId) == true) {
      groups.update({id:groupId, visible:false});
      container.className = container.className + " hidden";
    }
    else { // if invisible, show
      groups.update({id:groupId, visible:true});
      container.className = container.className.replace("hidden","");
    }
  }

    populateExternalLegend()
  populateExternalLegend()

 </script>
 </body>
--- a/examples/graph2d/16_bothAxis_titles.html
+++ b/examples/graph2d/16_bothAxis_titles.html
@ -8,27 +8,27 @@
            font-family: sans-serif;
        }

        .customStyle1 {
        .custom-style1 {
            fill: #f2ea00;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #b3ab00;
        }

        .customStyle2 {
        .custom-style2 {
            fill: #00a0f2;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #050092;
        }

        .customStyle3 {
        .custom-style3 {
            fill: #00f201;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #029200;
        }
        path.customStyle3.fill {
        path.custom-style3.vis-fill {
            fill-opacity:0.5 !important;
            stroke: none;
        }
@ -88,7 +88,7 @@
    groups.add({
        id: 0,
        content: names[0],
        className: 'customStyle1',
        className: 'custom-style1',
        options: {
            drawPoints: {
                style: 'square' // square, circle
@ -101,7 +101,7 @@
    groups.add({
        id: 1,
        content: names[1],
        className: 'customStyle2',
        className: 'custom-style2',
        options: {
            style:'bar',
            drawPoints: {style: 'circle',
@ -121,7 +121,7 @@
    groups.add({
        id: 3,
        content: names[3],
        className: 'customStyle3',
        className: 'custom-style3',
        options: {
            yAxisOrientation: 'right', // right, left
            drawPoints: {
--- a/examples/timeline/12_custom_styling.html
+++ b/examples/timeline/12_custom_styling.html
@ -7,14 +7,14 @@
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    .vis.timeline.root {
    .vis-timeline {
      border: 2px solid purple;
      font-family:  purisa, 'comic sans', cursive;
      font-size: 12pt;
      background: #ffecea;
    }

    .vis.timeline .item {
    .vis-item {
      border-color: #F991A3;
      background-color: pink;
      font-size: 15pt;
@ -22,37 +22,37 @@
      box-shadow: 5px 5px 20px rgba(128,128,128, 0.5);
    }

    .vis.timeline .item,
    .vis.timeline .item.line {
    .vis-item,
    .vis-item.vis-line {
      border-width: 3px;
    }

    .vis.timeline .item.dot {
    .vis-item.vis-dot {
      border-width: 10px;
      border-radius: 10px;
    }

    .vis.timeline .item.selected {
    .vis-item.vis-selected {
      border-color: green;
      background-color: lightgreen;
    }

    .vis.timeline .timeaxis .text {
    .vis-time-axis .vis-text {
      color: purple;
      padding-top: 10px;
      padding-left: 10px;
    }

    .vis.timeline .timeaxis .text.major {
    .vis-time-axis .vis-text.vis-major {
      font-weight: bold;
    }

    .vis.timeline .timeaxis .grid.minor {
    .vis-time-axis .vis-grid.vis-minor {
      border-width: 2px;
      border-color: pink;
    }

    .vis.timeline .timeaxis .grid.major {
    .vis-time-axis .vis-grid.vis-major {
      border-width: 2px;
      border-color: #F991A3;
    }
--- a/examples/timeline/15_item_class_names.html
+++ b/examples/timeline/15_item_class_names.html
@ -12,44 +12,44 @@

    /* custom styles for individual items, load this after vis.css */

    .vis.timeline .item.green {
    .vis-item.green {
      background-color: greenyellow;
      border-color: green;
    }

    /* create a custom sized dot at the bottom of the red item */
    .vis.timeline .item.red {
    .vis-item.red {
      background-color: red;
      border-color: darkred;
      color: white;
      font-family: monospace;
      box-shadow: 0 0 10px gray;
    }
    .vis.timeline .item.dot.red {
    .vis-item.vis-dot.red {
      border-radius: 10px;
      border-width: 10px;
    }
    .vis.timeline .item.line.red {
    .vis-item.vis-line.red {
      border-width: 5px;
    }
    .vis.timeline .item.box.red {
    .vis-item.vis-box.red {
      border-radius: 0;
      border-width: 2px;
      font-size: 24pt;
      font-weight: bold;
    }

    .vis.timeline .item.orange {
    .vis-item.orange {
      background-color: gold;
      border-color: orange;
    }
    .vis.timeline .item.orange.selected {
    .vis-item.vis-selected.orange {
      /* custom colors for selected orange items */
      background-color: orange;
      border-color: orangered;
    }

    .vis.timeline .item.magenta {
    .vis-item.magenta {
      background-color: magenta;
      border-color: purple;
      color: white;
@ -57,7 +57,7 @@

    /* our custom classes overrule the styles for selected events,
       so lets define a new style for the selected events */
    .vis.timeline .item.selected {
    .vis-item.vis-selected {
      background-color: white;
      border-color: black;
      color: black;
--- a/examples/timeline/18_range_overflow.html
+++ b/examples/timeline/18_range_overflow.html
@ -11,7 +11,7 @@
      font-family: sans-serif;
    }

    .vis.timeline .item.range {
    .vis-item.vis-range {
      overflow: visible;
    }
  </style>
--- a/examples/timeline/25_background_areas.html
+++ b/examples/timeline/25_background_areas.html
@ -9,10 +9,10 @@
      font-size: 11pt;
    }

    .vis.timeline .item.background.negative {
    .vis-item.vis-background.negative {
      background-color: rgba(255, 0, 0, 0.2);
    }
    .vis.timeline .item.background.marker {
    .vis-item.vis-background.marker {
      border-left: 2px solid green;
    }
  </style>
--- a/examples/timeline/30_subgroups.html
+++ b/examples/timeline/30_subgroups.html
@ -9,13 +9,13 @@
            font-size: 11pt;
        }

        .vis.timeline .item.background.negative {
        .vis-item.vis-background.negative {
            background-color: rgba(255, 0, 0, 0.2);
        }
        .vis.timeline .item.background.positive {
        .vis-item.vis-background.positive {
            background-color: rgba(105, 255, 98, 0.20);
        }
        .vis.timeline .item.background.marker {
        .vis-item.vis-background.marker {
            border-left: 2px solid green;
        }
    </style>
--- a/examples/timeline/32_grid_styling.html
+++ b/examples/timeline/32_grid_styling.html
@ -12,17 +12,17 @@
    }

    /* alternating column backgrounds */
    .vis.timeline .timeaxis .grid.odd {
    .vis-time-axis .vis-grid.odd {
      background: #f5f5f5;
    }

    /* gray background in weekends, white text color */
    .vis.timeline .timeaxis .grid.saturday,
    .vis.timeline .timeaxis .grid.sunday {
    .vis-time-axis .vis-grid.saturday,
    .vis-time-axis .vis-grid.sunday {
      background: gray;
    }
    .vis.timeline .timeaxis .text.saturday,
    .vis.timeline .timeaxis .text.sunday {
    .vis-time-axis .vis-text.saturday,
    .vis-time-axis .vis-text.sunday {
      color: white;
    }
  </style>
--- a/lib/DOMutil.js
+++ b/lib/DOMutil.js
@ -150,9 +150,9 @@ exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer, labelObj)
  }

  if(group.options.drawPoints.styles !== undefined) {
    point.setAttributeNS(null, "style", group.group.options.drawPoints.styles);
    point.setAttributeNS(null, "style", 'vis-' + group.group.options.drawPoints.styles);
  }
  point.setAttributeNS(null, "class", group.className + " point");
  point.setAttributeNS(null, "class", group.className + " vis-point");
  //handle label 
  var label = exports.getSVGElement('text',JSONcontainer,svgContainer);
  if (labelObj){
@ -168,7 +168,7 @@ exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer, labelObj)
      }

      if (labelObj.className) {
        label.setAttributeNS(null, "class", labelObj.className  + " label");
        label.setAttributeNS(null, "class", labelObj.className  + " vis-label");
      }


--- a/lib/timeline/Core.js
+++ b/lib/timeline/Core.js
@ -51,24 +51,24 @@ Core.prototype._create = function (container) {
  this.dom.shadowTopRight       = document.createElement('div');
  this.dom.shadowBottomRight    = document.createElement('div');

  this.dom.root.className                 = 'vis timeline root';
  this.dom.background.className           = 'vispanel background';
  this.dom.backgroundVertical.className   = 'vispanel background vertical';
  this.dom.backgroundHorizontal.className = 'vispanel background horizontal';
  this.dom.centerContainer.className      = 'vispanel center';
  this.dom.leftContainer.className        = 'vispanel left';
  this.dom.rightContainer.className       = 'vispanel right';
  this.dom.top.className                  = 'vispanel top';
  this.dom.bottom.className               = 'vispanel bottom';
  this.dom.left.className                 = 'content';
  this.dom.center.className               = 'content';
  this.dom.right.className                = 'content';
  this.dom.shadowTop.className            = 'shadow top';
  this.dom.shadowBottom.className         = 'shadow bottom';
  this.dom.shadowTopLeft.className        = 'shadow top';
  this.dom.shadowBottomLeft.className     = 'shadow bottom';
  this.dom.shadowTopRight.className       = 'shadow top';
  this.dom.shadowBottomRight.className    = 'shadow bottom';
  this.dom.root.className                 = 'vis-timeline';
  this.dom.background.className           = 'vis-panel vis-background';
  this.dom.backgroundVertical.className   = 'vis-panel vis-background vis-vertical';
  this.dom.backgroundHorizontal.className = 'vis-panel vis-background vis-horizontal';
  this.dom.centerContainer.className      = 'vis-panel vis-center';
  this.dom.leftContainer.className        = 'vis-panel vis-left';
  this.dom.rightContainer.className       = 'vis-panel vis-right';
  this.dom.top.className                  = 'vis-panel vis-top';
  this.dom.bottom.className               = 'vis-panel vis-bottom';
  this.dom.left.className                 = 'vis-content';
  this.dom.center.className               = 'vis-content';
  this.dom.right.className                = 'vis-content';
  this.dom.shadowTop.className            = 'vis-shadow vis-top';
  this.dom.shadowBottom.className         = 'vis-shadow vis-bottom';
  this.dom.shadowTopLeft.className        = 'vis-shadow vis-top';
  this.dom.shadowBottomLeft.className     = 'vis-shadow vis-bottom';
  this.dom.shadowTopRight.className       = 'vis-shadow vis-top';
  this.dom.shadowBottomRight.className    = 'vis-shadow vis-bottom';

  this.dom.root.appendChild(this.dom.background);
  this.dom.root.appendChild(this.dom.backgroundVertical);
@ -587,12 +587,12 @@ Core.prototype._redraw = function() {

  // update class names
  if (options.orientation == 'top') {
    util.addClassName(dom.root, 'top');
    util.removeClassName(dom.root, 'bottom');
    util.addClassName(dom.root, 'vis-top');
    util.removeClassName(dom.root, 'vis-bottom');
  }
  else {
    util.removeClassName(dom.root, 'top');
    util.addClassName(dom.root, 'bottom');
    util.removeClassName(dom.root, 'vis-top');
    util.addClassName(dom.root, 'vis-bottom');
  }

  // update root width and height options
--- a/lib/timeline/component/CurrentTime.js
+++ b/lib/timeline/component/CurrentTime.js
@ -37,7 +37,7 @@ CurrentTime.prototype = new Component();
 */
 CurrentTime.prototype._create = function() {
  var bar = document.createElement('div');
  bar.className = 'currenttime';
  bar.className = 'vis-current-time';
  bar.style.position = 'absolute';
  bar.style.top = '0px';
  bar.style.height = '100%';
--- a/lib/timeline/component/CustomTime.js
+++ b/lib/timeline/component/CustomTime.js
@ -64,7 +64,7 @@ CustomTime.prototype.setOptions = function(options) {
 */
 CustomTime.prototype._create = function() {
  var bar = document.createElement('div');
  bar.className = 'customtime';
  bar.className = 'vis-custom-time';
  bar.style.position = 'absolute';
  bar.style.top = '0px';
  bar.style.height = '100%';
--- a/lib/timeline/component/DataAxis.js
+++ b/lib/timeline/component/DataAxis.js
@ -285,7 +285,7 @@ DataAxis.prototype.redraw = function () {
    var frame = this.dom.frame;

    // update classname
    frame.className = 'dataaxis';
    frame.className = 'vis-data-axis';

    // calculate character width and height
    this._calculateCharSize();
@ -416,18 +416,18 @@ DataAxis.prototype._redrawLabels = function () {
    var isMajor = step.isMajor();

    if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) {
      this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'yAxis minor', this.props.minorCharHeight);
      this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'vis-y-axis vis-minor', this.props.minorCharHeight);
    }

    if (isMajor && this.options['showMajorLabels'] && this.master == true ||
        this.options['showMinorLabels'] == false && this.master == false && isMajor == true) {
      if (y >= 0) {
        this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'yAxis major', this.props.majorCharHeight);
        this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'vis-y-axis vis-major', this.props.majorCharHeight);
      }
      this._redrawLine(y, orientation, 'grid horizontal major', this.options.majorLinesOffset, this.props.majorLineWidth);
      this._redrawLine(y, orientation, 'vis-grid vis-horizontal vis-major', this.options.majorLinesOffset, this.props.majorLineWidth);
    }
    else {
      this._redrawLine(y, orientation, 'grid horizontal minor', this.options.minorLinesOffset, this.props.minorLineWidth);
      this._redrawLine(y, orientation, 'vis-grid vis-horizontal vis-minor', this.options.minorLinesOffset, this.props.minorLineWidth);
    }

    if (this.master == true && step.current == 0) {
@ -554,7 +554,7 @@ DataAxis.prototype._redrawTitle = function (orientation) {
  // Check if the title is defined for this axes
  if (this.options.title[orientation] !== undefined && this.options.title[orientation].text !== undefined) {
    var title = DOMutil.getDOMElement('div', this.DOMelements.title, this.dom.frame);
    title.className = 'yAxis title ' + orientation;
    title.className = 'vis-y-axis vis-title vis-' + orientation;
    title.innerHTML = this.options.title[orientation].text;

    // Add style - if provided
@ -589,7 +589,7 @@ DataAxis.prototype._calculateCharSize = function () {
  if (!('minorCharHeight' in this.props)) {
    var textMinor = document.createTextNode('0');
    var measureCharMinor = document.createElement('div');
    measureCharMinor.className = 'yAxis minor measure';
    measureCharMinor.className = 'vis-y-axis vis-minor vis-measure';
    measureCharMinor.appendChild(textMinor);
    this.dom.frame.appendChild(measureCharMinor);

@ -602,7 +602,7 @@ DataAxis.prototype._calculateCharSize = function () {
  if (!('majorCharHeight' in this.props)) {
    var textMajor = document.createTextNode('0');
    var measureCharMajor = document.createElement('div');
    measureCharMajor.className = 'yAxis major measure';
    measureCharMajor.className = 'vis-y-axis vis-major vis-measure';
    measureCharMajor.appendChild(textMajor);
    this.dom.frame.appendChild(measureCharMajor);

@ -615,7 +615,7 @@ DataAxis.prototype._calculateCharSize = function () {
  if (!('titleCharHeight' in this.props)) {
    var textTitle = document.createTextNode('0');
    var measureCharTitle = document.createElement('div');
    measureCharTitle.className = 'yAxis title measure';
    measureCharTitle.className = 'vis-y-axis vis-title vis-measure';
    measureCharTitle.appendChild(textTitle);
    this.dom.frame.appendChild(measureCharTitle);

--- a/lib/timeline/component/GraphGroup.js
+++ b/lib/timeline/component/GraphGroup.js
@ -106,7 +106,7 @@ GraphGroup.prototype.setOptions = function(options) {
 GraphGroup.prototype.update = function(group) {
  this.group = group;
  this.content = group.content || 'graph';
  this.className = group.className || this.className || "graphGroup" + this.groupsUsingDefaultStyles[0] % 10;
  this.className = group.className || this.className || 'vis-graph-group' + this.groupsUsingDefaultStyles[0] % 10;
  this.visible = group.visible === undefined ? true : group.visible;
  this.style = group.style;
  this.setOptions(group.options);
@ -132,13 +132,13 @@ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, icon
  outline.setAttributeNS(null, "y", y - fillHeight);
  outline.setAttributeNS(null, "width", iconWidth);
  outline.setAttributeNS(null, "height", 2*fillHeight);
  outline.setAttributeNS(null, "class", "outline");
  outline.setAttributeNS(null, "class", "vis-outline");

  if (this.options.style == 'line') {
    path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
    path.setAttributeNS(null, "class", this.className);
    if(this.style !== undefined) {
      path.setAttributeNS(null, "style", this.style);
      path.setAttributeNS(null, "style", 'vis-' + this.style);
    }

    path.setAttributeNS(null, "d", "M" + x + ","+y+" L" + (x + iconWidth) + ","+y+"");
@ -154,7 +154,7 @@ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, icon
          "L"+ (x + iconWidth) + "," + (y + fillHeight) +
          "L"+ (x + iconWidth) + ","+y);
      }
      fillPath.setAttributeNS(null, "class", this.className + " iconFill");
      fillPath.setAttributeNS(null, "class", this.className + " vis-icon-fill");
    }

    if (this.options.drawPoints.enabled == true) {
@ -168,8 +168,8 @@ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, icon

    var offset = Math.round((iconWidth - (2 * barWidth))/3);

    DOMutil.drawBar(x + 0.5*barWidth + offset    , y + fillHeight - bar1Height - 1, barWidth, bar1Height, this.className + ' bar', JSONcontainer, SVGcontainer);
    DOMutil.drawBar(x + 1.5*barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, this.className + ' bar', JSONcontainer, SVGcontainer);
    DOMutil.drawBar(x + 0.5*barWidth + offset    , y + fillHeight - bar1Height - 1, barWidth, bar1Height, this.className + ' vis-bar', JSONcontainer, SVGcontainer);
    DOMutil.drawBar(x + 1.5*barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, this.className + ' vis-bar', JSONcontainer, SVGcontainer);
  }
 };

--- a/lib/timeline/component/Group.js
+++ b/lib/timeline/component/Group.js
@ -47,30 +47,30 @@ function Group (groupId, data, itemSet) {
 */
 Group.prototype._create = function() {
  var label = document.createElement('div');
  label.className = 'vlabel';
  label.className = 'vis-label';
  this.dom.label = label;

  var inner = document.createElement('div');
  inner.className = 'inner';
  inner.className = 'vis-inner';
  label.appendChild(inner);
  this.dom.inner = inner;

  var foreground = document.createElement('div');
  foreground.className = 'group';
  foreground.className = 'vis-group';
  foreground['timeline-group'] = this;
  this.dom.foreground = foreground;

  this.dom.background = document.createElement('div');
  this.dom.background.className = 'group';
  this.dom.background.className = 'vis-group';

  this.dom.axis = document.createElement('div');
  this.dom.axis.className = 'group';
  this.dom.axis.className = 'vis-group';

  // create a hidden marker to detect when the Timelines container is attached
  // to the DOM, or the style of a parent of the Timeline is changed from
  // display:none is changed to visible.
  this.dom.marker = document.createElement('div');
  this.dom.marker.style.visibility = 'hidden'; // TODO: ask jos why this is not none?
  this.dom.marker.style.visibility = 'hidden';
  this.dom.marker.innerHTML = '?';
  this.dom.background.appendChild(this.dom.marker);
 };
@ -96,10 +96,10 @@ Group.prototype.setData = function(data) {
  this.dom.label.title = data && data.title || '';

  if (!this.dom.inner.firstChild) {
    util.addClassName(this.dom.inner, 'hidden');
    util.addClassName(this.dom.inner, 'vis-hidden');
  }
  else {
    util.removeClassName(this.dom.inner, 'hidden');
    util.removeClassName(this.dom.inner, 'vis-hidden');
  }

  // update className
@ -120,11 +120,11 @@ Group.prototype.setData = function(data) {

  // update style
  if (this.style) {
    util.removeCssText(this.dom.label, this.style);
    util.removeCssText(this.dom.label, 'vis-' + this.style);
    this.style = null;
  }
  if (data && data.style) {
    util.addCssText(this.dom.label, data.style);
    util.addCssText(this.dom.label, 'vis-' + data.style);
    this.style = data.style;
  }
 };
--- a/lib/timeline/component/ItemSet.js
+++ b/lib/timeline/component/ItemSet.js
@ -146,30 +146,30 @@ ItemSet.types = {
 */
 ItemSet.prototype._create = function(){
  var frame = document.createElement('div');
  frame.className = 'itemset';
  frame.className = 'vis-itemset';
  frame['timeline-itemset'] = this;
  this.dom.frame = frame;

  // create background panel
  var background = document.createElement('div');
  background.className = 'background';
  background.className = 'vis-background';
  frame.appendChild(background);
  this.dom.background = background;

  // create foreground panel
  var foreground = document.createElement('div');
  foreground.className = 'foreground';
  foreground.className = 'vis-foreground';
  frame.appendChild(foreground);
  this.dom.foreground = foreground;

  // create axis panel
  var axis = document.createElement('div');
  axis.className = 'axis';
  axis.className = 'vis-axis';
  this.dom.axis = axis;

  // create labelset
  var labelSet = document.createElement('div');
  labelSet.className = 'labelset';
  labelSet.className = 'vis-labelset';
  this.dom.labelSet = labelSet;

  // create ungrouped Group
@ -504,7 +504,7 @@ ItemSet.prototype.redraw = function() {
  this.props.left = this.body.domProps.left.width + this.body.domProps.border.left;

  // update class name
  frame.className = 'itemset' + (editable ? ' editable' : '');
  frame.className = 'vis-itemset' + (editable ? ' vis-editable' : '');

  // reorder the groups (if needed)
  resized = this._orderGroups() || resized;
@ -829,7 +829,7 @@ ItemSet.prototype._onUpdate = function(ids) {
      else if (type == 'rangeoverflow') {
        // TODO: deprecated since version 2.1.0 (or 3.0.0?). cleanup some day
        throw new TypeError('Item type "rangeoverflow" is deprecated. Use css styling instead: ' +
            '.vis.timeline .item.range .content {overflow: visible;}');
            '.vis-item.vis-range .vis-item-content {overflow: visible;}');
      }
      else {
        throw new TypeError('Unknown item type "' + type + '"');
--- a/lib/timeline/component/Legend.js
+++ b/lib/timeline/component/Legend.js
@ -62,13 +62,13 @@ Legend.prototype.removeGroup = function(label) {

 Legend.prototype._create = function() {
  this.dom.frame = document.createElement('div');
  this.dom.frame.className = 'legend';
  this.dom.frame.className = 'vis-legend';
  this.dom.frame.style.position = "absolute";
  this.dom.frame.style.top = "10px";
  this.dom.frame.style.display = "block";

  this.dom.textArea = document.createElement('div');
  this.dom.textArea.className = 'legendText';
  this.dom.textArea.className = 'vis-legend-text';
  this.dom.textArea.style.position = "relative";
  this.dom.textArea.style.top = "0px";

--- a/lib/timeline/component/LineGraph.js
+++ b/lib/timeline/component/LineGraph.js
@ -160,7 +160,7 @@ LineGraph.prototype = new Component();
 */
 LineGraph.prototype._create = function(){
  var frame = document.createElement('div');
  frame.className = 'LineGraph';
  frame.className = 'vis-line-graph';
  this.dom.frame = frame;

  // create svg element for graph drawing.
--- a/lib/timeline/component/TimeAxis.js
+++ b/lib/timeline/component/TimeAxis.js
@ -94,8 +94,8 @@ TimeAxis.prototype._create = function() {
  this.dom.foreground = document.createElement('div');
  this.dom.background = document.createElement('div');

  this.dom.foreground.className = 'timeaxis foreground';
  this.dom.background.className = 'timeaxis background';
  this.dom.foreground.className = 'vis-time-axis vis-foreground';
  this.dom.background.className = 'vis-time-axis vis-background';
 };

 /**
@ -300,7 +300,7 @@ TimeAxis.prototype._repaintMinorText = function (x, text, orientation, className

  label.style.top = (orientation == 'top') ? (this.props.majorLabelHeight + 'px') : '0';
  label.style.left = x + 'px';
  label.className = 'text minor ' + className;
  label.className = 'vis-text vis-minor ' + className;
  //label.title = title;  // TODO: this is a heavy operation
 };

@ -326,7 +326,7 @@ TimeAxis.prototype._repaintMajorText = function (x, text, orientation, className
  this.dom.majorTexts.push(label);

  label.childNodes[0].nodeValue = text;
  label.className = 'text major ' + className;
  label.className = 'vis-text vis-major ' + className;
  //label.title = title; // TODO: this is a heavy operation

  label.style.top = (orientation == 'top') ? '0' : (this.props.minorLabelHeight  + 'px');
@ -361,7 +361,7 @@ TimeAxis.prototype._repaintMinorLine = function (x, orientation, className) {
  line.style.height = props.minorLineHeight + 'px';
  line.style.left = (x - props.minorLineWidth / 2) + 'px';

  line.className = 'grid vertical minor ' + className;
  line.className = 'vis-grid vis-vertical vis-minor ' + className;

  return line;
 };
@ -394,7 +394,7 @@ TimeAxis.prototype._repaintMajorLine = function (x, orientation, className) {
  line.style.left = (x - props.majorLineWidth / 2) + 'px';
  line.style.height = props.majorLineHeight + 'px';

  line.className = 'grid vertical major ' + className;
  line.className = 'vis-grid vis-vertical vis-major ' + className;

  return line;
 };
@ -411,7 +411,7 @@ TimeAxis.prototype._calculateCharSize = function () {
  // determine the char width and height on the minor axis
  if (!this.dom.measureCharMinor) {
    this.dom.measureCharMinor = document.createElement('DIV');
    this.dom.measureCharMinor.className = 'text minor measure';
    this.dom.measureCharMinor.className = 'vis-text vis-minor vis-measure';
    this.dom.measureCharMinor.style.position = 'absolute';

    this.dom.measureCharMinor.appendChild(document.createTextNode('0'));
@ -423,7 +423,7 @@ TimeAxis.prototype._calculateCharSize = function () {
  // determine the char width and height on the major axis
  if (!this.dom.measureCharMajor) {
    this.dom.measureCharMajor = document.createElement('DIV');
    this.dom.measureCharMajor.className = 'text major measure';
    this.dom.measureCharMajor.className = 'vis-text vis-major vis-measure';
    this.dom.measureCharMajor.style.position = 'absolute';

    this.dom.measureCharMajor.appendChild(document.createTextNode('0'));
--- a/lib/timeline/component/css/animation.css
+++ b/lib/timeline/component/css/animation.css
@ -1,18 +1,18 @@
 .vis.timeline.root {
 .vis-timeline {
  /*
  -webkit-transition: height .4s ease-in-out;
  transition:         height .4s ease-in-out;
  */
 }

 .vis.timeline .vispanel {
 .vis-panel {
  /*
  -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
  transition:         height .4s ease-in-out, top .4s ease-in-out;
  */
 }

 .vis.timeline .axis {
 .vis-axis {
  /*
  -webkit-transition: top .4s ease-in-out;
  transition:         top .4s ease-in-out;
@ -21,12 +21,12 @@

 /* TODO: get animation working nicely

 .vis.timeline .item {
 .vis-item {
  -webkit-transition: top .4s ease-in-out;
  transition:         top .4s ease-in-out;
 }

 .vis.timeline .item.line {
 .vis-item.line {
  -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
  transition:         height .4s ease-in-out, top .4s ease-in-out;
 }
--- a/lib/timeline/component/css/currenttime.css
+++ b/lib/timeline/component/css/currenttime.css
@ -1,4 +1,4 @@
 .vis.timeline .currenttime {
 .vis-current-time {
  background-color: #FF7F6E;
  width: 2px;
  z-index: 1;
--- a/lib/timeline/component/css/customtime.css
+++ b/lib/timeline/component/css/customtime.css
@ -1,4 +1,4 @@
 .vis.timeline .customtime {
 .vis-custom-time {
  background-color: #6E94FF;
  width: 2px;
  cursor: move;
--- a/lib/timeline/component/css/dataaxis.css
+++ b/lib/timeline/component/css/dataaxis.css
@ -1,105 +1,103 @@

 .vis.timeline .vispanel.background.horizontal .grid.horizontal {
    position: absolute;
    width: 100%;
    height: 0;
    border-bottom: 1px solid;
 .vis-panel.vis-background.vis-horizontal .vis-grid.vis-horizontal {
  position: absolute;
  width: 100%;
  height: 0;
  border-bottom: 1px solid;
 }

 .vis.timeline .vispanel.background.horizontal .grid.minor {
    border-color: #e5e5e5;
 .vis-panel.vis-background.vis-horizontal .vis-grid.vis-minor {
  border-color: #e5e5e5;
 }

 .vis.timeline .vispanel.background.horizontal .grid.major {
    border-color: #bfbfbf;
 .vis-panel.vis-background.vis-horizontal .vis-grid.vis-major {
  border-color: #bfbfbf;
 }


 .vis.timeline .dataaxis .yAxis.major {
    width: 100%;
    position: absolute;
    color: #4d4d4d;
    white-space: nowrap;
 .vis-data-axis .vis-y-axis.vis-major {
  width: 100%;
  position: absolute;
  color: #4d4d4d;
  white-space: nowrap;
 }

 .vis.timeline .dataaxis .yAxis.major.measure{
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    border: 0px;
    visibility: hidden;
    width: auto;
 .vis-data-axis .vis-y-axis.vis-major.vis-measure {
  padding: 0;
  margin: 0;
  border: 0;
  visibility: hidden;
  width: auto;
 }


 .vis.timeline .dataaxis .yAxis.minor{
    position: absolute;
    width: 100%;
    color: #bebebe;
    white-space: nowrap;
 .vis-data-axis .vis-y-axis.vis-minor {
  position: absolute;
  width: 100%;
  color: #bebebe;
  white-space: nowrap;
 }

 .vis.timeline .dataaxis .yAxis.minor.measure{
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    border: 0px;
    visibility: hidden;
    width: auto;
 .vis-data-axis .vis-y-axis.vis-minor.vis-measure {
  padding: 0;
  margin: 0;
  border: 0;
  visibility: hidden;
  width: auto;
 }

 .vis.timeline .dataaxis .yAxis.title{
    position: absolute;
    color: #4d4d4d;
    white-space: nowrap;
    bottom: 20px;
    text-align: center;
 .vis-data-axis .vis-y-axis.vis-title {
  position: absolute;
  color: #4d4d4d;
  white-space: nowrap;
  bottom: 20px;
  text-align: center;
 }

 .vis.timeline .dataaxis .yAxis.title.measure{
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    visibility: hidden;
    width: auto;
 .vis-data-axis .vis-y-axis.vis-title.vis-measure {
  padding: 0;
  margin: 0;
  visibility: hidden;
  width: auto;
 }

 .vis.timeline .dataaxis .yAxis.title.left {
    bottom: 0px;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
 .vis-data-axis .vis-y-axis.vis-title.vis-left {
  bottom: 0;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left bottom;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
 }

 .vis.timeline .dataaxis .yAxis.title.right {
    bottom: 0px;
    -webkit-transform-origin: right bottom;
    -moz-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    -o-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
 .vis-data-axis .vis-y-axis.vis-title.vis-right {
  bottom: 0;
  -webkit-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
 }

 .vis.timeline .legend {
    background-color: rgba(247, 252, 255, 0.65);
    padding: 5px;
    border-color: #b3b3b3;
    border-style:solid;
    border-width: 1px;
    box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
 .vis-legend {
  background-color: rgba(247, 252, 255, 0.65);
  padding: 5px;
  border: 1px solid #b3b3b3;
  box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
 }

 .vis.timeline .legendText {
    /*font-size: 10px;*/
    white-space: nowrap;
    display: inline-block
 .vis-legend-text {
  /*font-size: 10px;*/
  white-space: nowrap;
  display: inline-block
 }
--- a/lib/timeline/component/css/item.css
+++ b/lib/timeline/component/css/item.css
@ -1,5 +1,5 @@

 .vis.timeline .item {
 .vis-item {
  position: absolute;
  color: #1A1A1A;
  border-color: #97B0F8;
@ -9,7 +9,7 @@
  overflow: hidden;
 }

 .vis.timeline .item.selected {
 .vis-item.vis-selected {
  border-color: #FFC200;
  background-color: #FFF785;

@ -17,25 +17,25 @@
  z-index: 2;
 }

 .vis.timeline .editable .item.selected {
 .vis-editable .vis-item.vis-selected {
  cursor: move;
 }

 .vis.timeline .item.point.selected {
 .vis-item.vis-point.vis-selected {
  background-color: #FFF785;
 }

 .vis.timeline .item.box {
 .vis-item.vis-box {
  text-align: center;
  border-style: solid;
  border-radius: 2px;
 }

 .vis.timeline .item.point {
 .vis-item.vis-point {
  background: none;
 }

 .vis.timeline .item.dot {
 .vis-item.vis-dot {
  position: absolute;
  padding: 0;
  border-width: 4px;
@ -43,13 +43,13 @@
  border-radius: 4px;
 }

 .vis.timeline .item.range {
 .vis-item.vis-range {
  border-style: solid;
  border-radius: 2px;
  box-sizing: border-box;
 }

 .vis.timeline .item.background {
 .vis-item.background {
  border: none;
  background-color: rgba(213, 221, 246, 0.4);
  box-sizing: border-box;
@ -57,20 +57,20 @@
  margin: 0;
 }

 .vis.timeline .item.range .content {
 .vis-item.vis-range .vis-item-content {
  position: relative;
  display: inline-block;
  max-width: 100%;
 }

 .vis.timeline .item.background .content {
 .vis-item.background .vis-item-content {
  position: absolute;
  display: inline-block;
  max-width: 100%;
  margin: 5px;
 }

 .vis.timeline .item.line {
 .vis-item.vis-line {
  padding: 0;
  position: absolute;
  width: 0;
@ -78,13 +78,13 @@
  border-left-style: solid;
 }

 .vis.timeline .item .content {
 .vis-item .vis-item-content {
  white-space: nowrap;
  box-sizing: border-box;
  padding: 5px;
 }

 .vis.timeline .item .delete {
 .vis-item .vis-delete {
  background: url('img/timeline/delete.png') no-repeat top center;
  position: absolute;
  width: 24px;
@ -94,7 +94,7 @@
  cursor: pointer;
 }

 .vis.timeline .item.range .drag-left {
 .vis-item.vis-range .vis-drag-left {
  position: absolute;
  width: 24px;
  height: 100%;
@ -104,7 +104,7 @@
  cursor: w-resize;
 }

 .vis.timeline .item.range .drag-right {
 .vis-item.vis-range .vis-drag-right {
  position: absolute;
  width: 24px;
  height: 100%;
--- a/lib/timeline/component/css/itemset.css
+++ b/lib/timeline/component/css/itemset.css
@ -1,5 +1,5 @@

 .vis.timeline .itemset {
 .vis-itemset {
  position: relative;
  padding: 0;
  margin: 0;
@ -7,15 +7,15 @@
  box-sizing: border-box;
 }

 .vis.timeline .itemset .background,
 .vis.timeline .itemset .foreground {
 .vis-itemset .vis-background,
 .vis-itemset .vis-foreground {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: visible;
 }

 .vis.timeline .axis {
 .vis-axis {
  position: absolute;
  width: 100%;
  height: 0;
@ -23,12 +23,12 @@
  z-index: 1;
 }

 .vis.timeline  .foreground .group {
 .vis-foreground .vis-group {
  position: relative;
  box-sizing: border-box;
  border-bottom: 1px solid #bfbfbf;
 }

 .vis.timeline  .foreground .group:last-child {
 .vis-foreground .vis-group:last-child {
  border-bottom: none;
 }
--- a/lib/timeline/component/css/labelset.css
+++ b/lib/timeline/component/css/labelset.css
@ -1,5 +1,5 @@

 .vis.timeline .labelset {
 .vis-labelset {
  position: relative;

  overflow: hidden;
@ -7,7 +7,7 @@
  box-sizing: border-box;
 }

 .vis.timeline .labelset .vlabel {
 .vis-labelset .vis-label {
  position: relative;
  left: 0;
  top: 0;
@ -17,19 +17,19 @@
  box-sizing: border-box;
 }

 .vis.timeline .labelset .vlabel {
 .vis-labelset .vis-label {
  border-bottom: 1px solid #bfbfbf;
 }

 .vis.timeline .labelset .vlabel:last-child {
 .vis-labelset .vis-label:last-child {
  border-bottom: none;
 }

 .vis.timeline .labelset .vlabel .inner {
 .vis-labelset .vis-label .vis-inner {
  display: inline-block;
  padding: 5px;
 }

 .vis.timeline .labelset .vlabel .inner.hidden {
 .vis-labelset .vis-label .vis-inner.vis-hidden {
  padding: 0;
 }
--- a/lib/timeline/component/css/panel.css
+++ b/lib/timeline/component/css/panel.css
@ -1,16 +1,5 @@

 .vis.timeline.root {
  position: relative;
  border: 1px solid #bfbfbf;

  overflow: hidden;
  padding: 0;
  margin: 0;

  box-sizing: border-box;
 }

 .vis.timeline .vispanel {
 .vis-panel {
  position: absolute;

  padding: 0;
@ -19,53 +8,53 @@
  box-sizing: border-box;
 }

 .vis.timeline .vispanel.center,
 .vis.timeline .vispanel.left,
 .vis.timeline .vispanel.right,
 .vis.timeline .vispanel.top,
 .vis.timeline .vispanel.bottom {
 .vis-panel.vis-center,
 .vis-panel.vis-left,
 .vis-panel.vis-right,
 .vis-panel.vis-top,
 .vis-panel.vis-bottom {
  border: 1px #bfbfbf;
 }

 .vis.timeline .vispanel.center,
 .vis.timeline .vispanel.left,
 .vis.timeline .vispanel.right {
 .vis-panel.vis-center,
 .vis-panel.vis-left,
 .vis-panel.vis-right {
  border-top-style: solid;
  border-bottom-style: solid;
  overflow: hidden;
 }

 .vis.timeline .vispanel.center,
 .vis.timeline .vispanel.top,
 .vis.timeline .vispanel.bottom {
 .vis-panel.vis-center,
 .vis-panel.vis-top,
 .vis-panel.vis-bottom {
  border-left-style: solid;
  border-right-style: solid;
 }

 .vis.timeline .background {
 .vis-background {
  overflow: hidden;
 }

 .vis.timeline .vispanel > .content {
 .vis-panel > .vis-content {
  position: relative;
 }

 .vis.timeline .vispanel .shadow {
 .vis-panel .vis-shadow {
  position: absolute;
  width: 100%;
  height: 1px;
  box-shadow: 0 0 10px rgba(0,0,0,0.8);
  /* TODO: find a nice way to ensure shadows are drawn on top of items
  /* TODO: find a nice way to ensure vis-shadows are drawn on top of items
  z-index: 1;
  */
 }

 .vis.timeline .vispanel .shadow.top {
 .vis-panel .vis-shadow.vis-top {
  top: -1px;
  left: 0;
 }

 .vis.timeline .vispanel .shadow.bottom {
 .vis-panel .vis-shadow.vis-bottom {
  bottom: -1px;
  left: 0;
 }
--- a/lib/timeline/component/css/pathStyles.css
+++ b/lib/timeline/component/css/pathStyles.css
@ -1,91 +1,91 @@
 .vis.timeline .graphGroup0 {
 .vis-graph-group0 {
    fill:#4f81bd;
    fill-opacity:0;
    stroke-width:2px;
    stroke: #4f81bd;
 }

 .vis.timeline .graphGroup1 {
 .vis-graph-group1 {
    fill:#f79646;
    fill-opacity:0;
    stroke-width:2px;
    stroke: #f79646;
 }

 .vis.timeline .graphGroup2 {
 .vis-graph-group2 {
    fill: #8c51cf;
    fill-opacity:0;
    stroke-width:2px;
    stroke: #8c51cf;
 }

 .vis.timeline .graphGroup3 {
 .vis-graph-group3 {
    fill: #75c841;
    fill-opacity:0;
    stroke-width:2px;
    stroke: #75c841;
 }

 .vis.timeline .graphGroup4 {
 .vis-graph-group4 {
    fill: #ff0100;
    fill-opacity:0;
    stroke-width:2px;
    stroke: #ff0100;
 }

 .vis.timeline .graphGroup5 {
 .vis-graph-group5 {
    fill: #37d8e6;
    fill-opacity:0;
    stroke-width:2px;
    stroke: #37d8e6;
 }

 .vis.timeline .graphGroup6 {
 .vis-graph-group6 {
    fill: #042662;
    fill-opacity:0;
    stroke-width:2px;
    stroke: #042662;
 }

 .vis.timeline .graphGroup7 {
 .vis-graph-group7 {
    fill:#00ff26;
    fill-opacity:0;
    stroke-width:2px;
    stroke: #00ff26;
 }

 .vis.timeline .graphGroup8 {
 .vis-graph-group8 {
    fill:#ff00ff;
    fill-opacity:0;
    stroke-width:2px;
    stroke: #ff00ff;
 }

 .vis.timeline .graphGroup9 {
 .vis-graph-group9 {
    fill: #8f3938;
    fill-opacity:0;
    stroke-width:2px;
    stroke: #8f3938;
 }

 .vis.timeline .fill {
 .vis-fill {
    fill-opacity:0.1;
    stroke: none;
 }


 .vis.timeline .bar {
 .vis-bar {
    fill-opacity:0.5;
    stroke-width:1px;
 }

 .vis.timeline .point {
 .vis-point {
    stroke-width:2px;
    fill-opacity:1.0;
 }


 .vis.timeline .legendBackground {
 .vis-legend-background {
    stroke-width:1px;
    fill-opacity:0.9;
    fill: #ffffff;
@ -93,14 +93,14 @@
 }


 .vis.timeline .outline {
 .vis-outline {
    stroke-width:1px;
    fill-opacity:1;
    fill: #ffffff;
    stroke: #e5e5e5;
 }

 .vis.timeline .iconFill {
 .vis-icon-fill {
    fill-opacity:0.3;
    stroke: none;
 }
--- a/lib/timeline/component/css/timeaxis.css
+++ b/lib/timeline/component/css/timeaxis.css
@ -1,15 +1,15 @@
 .vis.timeline .timeaxis {
 .vis-time-axis {
  position: relative;
  overflow: hidden;
 }

 .vis.timeline .timeaxis.foreground {
 .vis-time-axis.vis-foreground {
  top: 0;
  left: 0;
  width: 100%;
 }

 .vis.timeline .timeaxis.background {
 .vis-time-axis.vis-background {
  position: absolute;
  top: 0;
  left: 0;
@ -17,14 +17,14 @@
  height: 100%;
 }

 .vis.timeline .timeaxis .text {
 .vis-time-axis .vis-text {
  position: absolute;
  color: #4d4d4d;
  padding: 3px;
  white-space: nowrap;
 }

 .vis.timeline .timeaxis .text.measure {
 .vis-time-axis .vis-text.vis-measure {
  position: absolute;
  padding-left: 0;
  padding-right: 0;
@ -33,15 +33,15 @@
  visibility: hidden;
 }

 .vis.timeline .timeaxis .grid.vertical {
 .vis-time-axis .vis-grid.vis-vertical {
  position: absolute;
  border-left: 1px solid;
 }

 .vis.timeline .timeaxis .grid.minor {
 .vis-time-axis .vis-grid.vis-minor {
  border-color: #e5e5e5;
 }

 .vis.timeline .timeaxis .grid.major {
 .vis-time-axis .vis-grid.vis-major {
  border-color: #bfbfbf;
 }
--- a/lib/timeline/component/css/timeline.css
+++ b/lib/timeline/component/css/timeline.css
@ -1,2 +1,11 @@
 .vis.timeline {

 .vis-timeline {
  position: relative;
  border: 1px solid #bfbfbf;

  overflow: hidden;
  padding: 0;
  margin: 0;

  box-sizing: border-box;
 }
--- a/lib/timeline/component/graph2d_types/bar.js
+++ b/lib/timeline/component/graph2d_types/bar.js
@ -109,7 +109,7 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
        else if (group.options.barChart.align == 'right') {drawData.offset += 0.5*drawData.width;}
      }
    }
    DOMutil.drawBar(combinedData[i].x + drawData.offset, combinedData[i].y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].y, group.className + ' bar', framework.svgElements, framework.svg);
    DOMutil.drawBar(combinedData[i].x + drawData.offset, combinedData[i].y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].y, group.className + ' vis-bar', framework.svgElements, framework.svg);
    // draw points
    if (group.options.drawPoints.enabled == true) {
      Points.draw([combinedData[i]], group, framework, drawData.offset);
--- a/lib/timeline/component/graph2d_types/line.js
+++ b/lib/timeline/component/graph2d_types/line.js
@ -31,7 +31,7 @@ Line.prototype.draw = function (dataset, group, framework) {
      path = DOMutil.getSVGElement('path', framework.svgElements, framework.svg);
      path.setAttributeNS(null, "class", group.className);
      if(group.style !== undefined) {
        path.setAttributeNS(null, "style", group.style);
        path.setAttributeNS(null, "style", 'vis-' + group.style);
      }

      // construct path from dataset
@ -52,11 +52,11 @@ Line.prototype.draw = function (dataset, group, framework) {
        else {
          dFill = 'M' + dataset[0].x + ',' + svgHeight + ' ' + d + 'L' + dataset[dataset.length - 1].x + ',' + svgHeight;
        }
        fillPath.setAttributeNS(null, "class", group.className + " fill");
        fillPath.setAttributeNS(null, 'class', group.className + ' vis-fill');
        if(group.options.shaded.style !== undefined) {
          fillPath.setAttributeNS(null, "style", group.options.shaded.style);
          fillPath.setAttributeNS(null, 'style', group.options.shaded.style);
        }
        fillPath.setAttributeNS(null, "d", dFill);
        fillPath.setAttributeNS(null, 'd', dFill);
      }
      // copy properties to path for drawing.
      path.setAttributeNS(null, 'd', 'M' + d);
--- a/lib/timeline/component/item/BackgroundItem.js
+++ b/lib/timeline/component/item/BackgroundItem.js
@ -39,7 +39,7 @@ function BackgroundItem (data, conversion, options) {

 BackgroundItem.prototype = new Item (null, null, null);

 BackgroundItem.prototype.baseClassName = 'item background';
 BackgroundItem.prototype.baseClassName = 'vis-item vis-background';
 BackgroundItem.prototype.stack = false;

 /**
@ -68,7 +68,7 @@ BackgroundItem.prototype.redraw = function() {

    // contents box
    dom.content = document.createElement('div');
    dom.content.className = 'content';
    dom.content.className = 'vis-item-content';
    dom.box.appendChild(dom.content);

    // Note: we do NOT attach this item as attribute to the DOM,
@ -103,7 +103,7 @@ BackgroundItem.prototype.redraw = function() {

    // update class
    var className = (this.data.className ? (' ' + this.data.className) : '') +
        (this.selected ? ' selected' : '');
        (this.selected ? ' vis-selected' : '');
    dom.box.className = this.baseClassName + className;

    // determine from css whether this box has overflow
--- a/lib/timeline/component/item/BoxItem.js
+++ b/lib/timeline/component/item/BoxItem.js
@ -62,16 +62,16 @@ BoxItem.prototype.redraw = function() {

    // contents box (inside the background box). used for making margins
    dom.content = document.createElement('DIV');
    dom.content.className = 'content';
    dom.content.className = 'vis-item-content';
    dom.box.appendChild(dom.content);

    // line to axis
    dom.line = document.createElement('DIV');
    dom.line.className = 'line';
    dom.line.className = 'vis-line';

    // dot on axis
    dom.dot = document.createElement('DIV');
    dom.dot.className = 'dot';
    dom.dot.className = 'vis-dot';

    // attach this item as attribute
    dom.box['timeline-item'] = this;
@ -112,10 +112,10 @@ BoxItem.prototype.redraw = function() {

    // update class
    var className = (this.data.className? ' ' + this.data.className : '') +
        (this.selected ? ' selected' : '');
    dom.box.className = 'item box' + className;
    dom.line.className = 'item line' + className;
    dom.dot.className  = 'item dot' + className;
        (this.selected ? ' vis-selected' : '');
    dom.box.className = 'vis-item vis-box' + className;
    dom.line.className = 'vis-item vis-line' + className;
    dom.dot.className  = 'vis-item vis-dot' + className;

    // recalculate size
    this.props.dot.height = dom.dot.offsetHeight;
--- a/lib/timeline/component/item/Item.js
+++ b/lib/timeline/component/item/Item.js
@ -134,7 +134,7 @@ Item.prototype._repaintDeleteButton = function (anchor) {
    var me = this;

    var deleteButton = document.createElement('div');
    deleteButton.className = 'delete';
    deleteButton.className = 'vis-delete';
    deleteButton.title = 'Delete this item';

    // TODO: be able to destroy the delete button
@ -199,7 +199,7 @@ Item.prototype._updateTitle = function (element) {
    element.title = this.data.title || '';
  }
  else {
    element.removeAttribute('title');
    element.removeAttribute('vis-title');
  }
 };

--- a/lib/timeline/component/item/PointItem.js
+++ b/lib/timeline/component/item/PointItem.js
@ -63,7 +63,7 @@ PointItem.prototype.redraw = function() {

    // contents box, right from the dot
    dom.content = document.createElement('div');
    dom.content.className = 'content';
    dom.content.className = 'vis-item-content';
    dom.point.appendChild(dom.content);

    // dot at start
@ -100,10 +100,10 @@ PointItem.prototype.redraw = function() {
    this._updateStyle(this.dom.point);

    // update class
    var className = (this.data.className? ' ' + this.data.className : '') +
        (this.selected ? ' selected' : '');
    dom.point.className  = 'item point' + className;
    dom.dot.className  = 'item dot' + className;
    var className = (this.data.className ? ' ' + this.data.className : '') +
        (this.selected ? ' vis-selected' : '');
    dom.point.className  = 'vis-item vis-point' + className;
    dom.dot.className  = 'vis-item vis-dot' + className;

    // recalculate size
    this.width = dom.point.offsetWidth;
--- a/lib/timeline/component/item/RangeItem.js
+++ b/lib/timeline/component/item/RangeItem.js
@ -34,7 +34,7 @@ function RangeItem (data, conversion, options) {

 RangeItem.prototype = new Item (null, null, null);

 RangeItem.prototype.baseClassName = 'item range';
 RangeItem.prototype.baseClassName = 'vis-item vis-range';

 /**
 * Check whether this item is visible inside given range
@ -62,7 +62,7 @@ RangeItem.prototype.redraw = function() {

    // contents box
    dom.content = document.createElement('div');
    dom.content.className = 'content';
    dom.content.className = 'vis-item-content';
    dom.box.appendChild(dom.content);

    // attach this item as attribute
@ -96,7 +96,7 @@ RangeItem.prototype.redraw = function() {

    // update class
    var className = (this.data.className ? (' ' + this.data.className) : '') +
        (this.selected ? ' selected' : '');
        (this.selected ? ' vis-selected' : '');
    dom.box.className = this.baseClassName + className;

    // determine from css whether this box has overflow
@ -246,7 +246,7 @@ RangeItem.prototype._repaintDragLeft = function () {
  if (this.selected && this.options.editable.updateTime && !this.dom.dragLeft) {
    // create and show drag area
    var dragLeft = document.createElement('div');
    dragLeft.className = 'drag-left';
    dragLeft.className = 'vis-drag-left';
    dragLeft.dragLeftItem = this;

    this.dom.box.appendChild(dragLeft);
@ -269,7 +269,7 @@ RangeItem.prototype._repaintDragRight = function () {
  if (this.selected && this.options.editable.updateTime && !this.dom.dragRight) {
    // create and show drag area
    var dragRight = document.createElement('div');
    dragRight.className = 'drag-right';
    dragRight.className = 'vis-drag-right';
    dragRight.dragRightItem = this;

    this.dom.box.appendChild(dragRight);