chronoline/chronoline/chronoline.css

chronoline.js is a library for making a chronology timeline out of events on a horizontal timescale.

.chronoline-wrapper {
    position: relative;
}
.chronoline-wrapper * {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}
.chronoline-canvas {
    overflow: hidden;
    position: relative;
    width: 100%;
}
.chronoline-canvas > svg {
    position: relative;
}
.chronoline-wrapper:hover > .chronoline-left,
.chronoline-wrapper:hover > .chronoline-right {
    display: block;
}
.chronoline-left,
.chronoline-right {
    display: none;
    *display: block;
    top: 0;
    position: absolute;
    width: 20px;
    opacity: 0.6;
    filter: alpha(opacity=60);
    background-color: #000000;
    cursor: pointer;
}
.chronoline-left:hover,
.chronoline-right:hover {
    opacity: 1;
    filter: alpha(opacity=100);
    background-color: #0055e1;
}
.chronoline-left {
    left: 0;
}
.chronoline-right {
    right: 0;
}
.chronoline-left-icon,
.chronoline-right-icon {
    background: url("sprites.png") no-repeat scroll 0px 0 transparent;
    height: 15px;
    width: 10px;
    cursor: pointer;
    margin: 0 auto;
}
.chronoline-right-icon {
    background-position: -10px 0;
}
.tooltip-style {
    font-size: 12px;
    background-color: #222222;
    color: #ffffff;
    border-radius: 2px;
    max-width: 300px;
}

.chronoline-draggable {
  cursor:hand;
  cursor:grab;
  cursor:-moz-grab;
  cursor:-webkit-grab;
}

.chronoline-draggable.dragging {
  cursor:grabbing;
  cursor:-moz-grabbing;
  cursor:-webkit-grabbing;
}

.chronoline-draggable .chronoline-canvas .chronoline-event {
    cursor: default;
}