.timeline_root {
    width: 100%; 
    border-spacing: 0px;

    font-family: Verdana, sans-serif;
    font-size: 12px;
    color: #4d4d4d;
}
.timeline_panel {}

.timeline_legend_panel {
	width: 100%;
}
timeline_legend_item {
    cursor: pointer;
    color: #4D4D4D;
    margin: 2px;
    display: inline;
    padding: 0 3px;
}
timeline_legend_item:hover {
    background-color: rgba( 205,230,247,0.5 );
}

.timeline_axis_panel {
    position: relative;
    padding: 0px;
}
.timeline_axis_label {
    position: absolute;
    right: 8px;
    white-space: nowrap;
}
.timeline_axis_bar {
    position: absolute;
    right: 0px;
    width: 5px;
    white-space: nowrap;
}
.timeline_axis_grid {
    position: absolute;
    left: 0px;
    width: 100%;
}
.timeline_axis_minor {
    border-top: 1px solid rgba(153,153,153,0.25);
}
.timeline_axis_major {
    border-top: 1px solid rgba(0,0,0,0.25);
}

.timeline_scale {
    border-left: 1px solid transparent;
    padding: 0px;
    overflow: hidden;
}
.timeline_scale_label {
    position: absolute;
    /*padding: 3px;*/
    padding: 3px 0px 3px 2px;
    margin: 0px;
}
.timeline_scale_grid {
    position: absolute;
    top: 0px;
    height: 100%;
    padding: 0px;
    margin: 0px;
}
.timeline_scale_minor {
    border-left: 1px solid rgba(153,153,153,0.25);
}
.timeline_scale_major {
    border-left: 1px solid rgba(0,0,0,0.25);
}
                        

.timeline_canvas_panel {
    display: table-cell;
    width: 100%;
    border: 1px solid #BFBFBF; /*black;*/
    padding: 0px;
    position: relative;
    overflow: hidden;
    /*z-index: 1;*/
}

.timeline_canvas {
    /*vertical-align: bottom;*/
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    /*z-index: 3;*/

    /*background-color: rgba(255,0,255, 0.2);*/
    font: bold 24px arial;
    color: red;
}
.timeline_grid {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    /*z-index: 2;*/
}