/** CSS styles specific to Timeline visualization in DH Press
 **/

@charset "UTF-8";

.hide {
	display: hidden;
}

    /* MAJOR DIV CONTAINERS ======================= */

    /* Invisible outer div that adds vertical scroll bar when needed */
#dhp-timeline {
    position: relative;
    top: 50px;
    left: 6px;
    overflow-y: auto;
    overflow-x: hidden;
}

    /* Bordered container that leaves outer margins */
#svg-container {
    border-style: solid;
    border-width: 1px;
    border-color: black;
    background-color: #F0F0F0;
}

    /* Inner space containing chart */
.chart {
    fill: #EEEEEE;
}

    /* AXES ======================= */

  /* axis labels */
.axis {
    fill: #808080;
    font-family: sans-serif;
    font-size: 10px;
}

  /* axis tick marks */
.axis line {
    stroke-width : 1;
    stroke: gray;
    shape-rendering: crispEdges;
}

  /* axis line */
.axis path {
    stroke-width : 1;
    stroke: gray;
    shape-rendering: crispEdges;
}

    /* TIME EVENT BANDS ======================= */

  /* band background */
.band {
    fill: #FAFAFA;
}

#band-0 .interval {
    fill: #AAFFFF;
    cursor : default;
    pointer-events: true;
    stroke-width: 1;
    stroke: black;
    stroke-opacity: 0.8;
}

#band-0 .instant {
    fill: #FFAAFF;
    cursor : default;
    pointer-events: true;
    stroke-width: 1;
    stroke: black;
    stroke-opacity: 0.8;
}

.instantLabel {
    font: 10px sans-serif;
    font-weight: 300;
    fill: black;                    /* instantaneous event labels always on white background */
    stroke-width: 0;
    stroke: none;
    shape-rendering: crispEdges;
}

.intervalLabel {
    font: 10px sans-serif;
    font-weight: 300;
    stroke: none;
    stroke-width: 0;
    shape-rendering: crispEdges;
}

    /* START/END LABELS ======================= */

.bandLabel {
    fill: #99CCCC;
}

.bandMinMaxLabel {
    fill: #000066;
    font: 10px sans-serif;
    font-weight: bold;
}

    /* BRUSHES ======================= */

.brush .extent {
    stroke: midnightblue;
    fill: blue;
    fill-opacity: .2;
}

.brush .dragger {
    fill: #99CCCC;
    stroke: black;
    stroke-width: 1;
}