/*
  This is the div that wraps the entire timebar. 
*/
.timebarWrapper {
    position: relative;
    height: 400px;
    width: 800px;
    border: none;
    border-radius: 6px;
    box-shadow: 0 0 18px -2px rgba(0, 0, 0, .43);
}

/*
  This is a header of the timebar component. Mockup has selection controls here.
*/
.timebarHeader {
    height: 20px;
    width: 100%;
}

/*
  This is the footer of the timebar component. Mockup has zoom controls here.
*/
.timebarFooter {
    height: 20px;
    width: 100%;
}

/*
  This is basically our fancy X-Axis with multiple modes of control exposed to allow either 
  granular or broad zooming.
*/
.timeControls {
    height: 40px;
    width: 100%;
}

/* everything below this line is the actual bar chart itself */

/*
  This is the div inside of the timebar that acts as a parent to all of the bars and also contains the 
  SelectionArea.
*/
.chart {
    position: relative;
    height: 80%;
}

/*
  When the user drags a time selection, this component becomes visible and has draggable handles.
*/
.selectionArea {
    position: absolute;
    pointer-events: none;
    opacity: .3;
    background-color: #000000;
    top: 0;
    bottom: 0;
}

/*
  This is inside of the actual bar, and is a container that holds .bar and .label
*/
.barWrapper {
    position: absolute;
    height: 100%;
    width: 2%;
}

/*
  This is the actual div that gets a height and color from the data and receives click events.
*/
.bar {
    width: 100%;
}

/*
  This is the span inside of .barWrapper that contains the label.
*/
.barLabel {
    display: none;
}

.barWrapper:hover .barLabel {
    display: block;
}