styles.css

/* Graph container */
.intvg {
    position: relative;
    width: 100%;
    height: 20px;
    background-color: #e1e0eb;
}

/* Single dates */
/* TODO Prevent the border from overflowing the graph container. */
.intvg .bar-date {
    position: absolute;
    height: 20px;
    box-sizing: content-box;
    border-width: 0 2px 0 2px;
    border-style: solid;
    border-color: black;
    width: 0;
}

/* Intervals */
.intvg .bar-intv {
    position: absolute;
    height: 20px;
}

.bar-intv:hover {
    border: thin solid black;
    box-sizing: border-box;
}

/* Colors */
.color_0 {
    background-color: #ff5450;
}
.color_1 {
    background-color: #ff9431;
}
.color_2 {
    background-color: #d7e174;
}
.color_3 {
    background-color: #5cb781;
}
.color_4 {
    background-color: #557ebf;
}

/* Stripes */
.striped {
    background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 5px, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 10px);
}

.striped_wide {
    background-image: repeating-linear-gradient(165deg, #ccc, #ccc 30px, #dbdbdb 30px, #dbdbdb 60px);
}

/* Popup */
/* Use bootstrap tooltips or equivalent for better results. */
.bar:hover:after {
    content: attr(data-title);
    padding: 4px 8px;
    color: #333;
    font-family: sans-serif;
    font-size: small;
    background: whitesmoke;
    position: absolute;
    left: 0;
    top: 23px;
    white-space: nowrap;
    z-index: 20;
    border-radius: 5px;
    -moz-box-shadow: 0 0 4px #222;
    -webkit-box-shadow: 0 0 4px #222;
    box-shadow: 0 0 4px #222;
}