/* CS 171 Final Project */

/* Using Google Fonts */
body {
    font-family: 'Merriweather', serif;
    padding-top: 150px;
}

div.instruction, p.instruction {
    padding-top: 2.5em;
    font-size: 0.9em;
}

div.instruction-nospace, div.instruction-nospace {
    font-size: 0.9em;
}

span#sel-exp, span#sel-imp {
    cursor:pointer;
}

.selection {
    font-size: 0.9em;
    text-align: left;
    font-weight: normal;
    cursor: pointer;
}

.scrubber {
    stroke: black;
}

.crumb {
    padding-top: 1em;
    font-size: .8em;
    cursor: pointer;
}

div.link-like {
    color: blue;
    cursor: pointer;
}

div.link-like:hover {
    text-decoration: underline;
}

div.text {
    margin-bottom: 2ex;
}

span.emph {
    font-weight: bold;
    color: #1f77b4;
}

div.subsection {
    margin-top: 5pt;
    display: none;
}

footer.container {
    border-top: 1px solid black;
    background-color: #f8f8f8;
    margin-top: 22pt;
    font-size: 10pt;
    font-weight: 300;
    font-style: italic;
}

div#credits div.text {
    padding: 4px;
}

div.flags {
    text-align: center;
    min-height: 30px;
}

div.flags img {
    padding: 2pt;
    width: 32px;
    height: 32px;
}

/*********************/
/*  Sections styling */
/*********************/
#select {
    background-color: white;
}

/* Put space between sections so two aren't visible at the same time */

div.spacer {
    margin-top: 600px;
}

/*********************/
/*  TOOLTIP OVERLAY  */
/*********************/

.tooltip-title {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.d3-tip {
    line-height: 1;
    padding: 12px;
    background: rgba(144, 196, 218, 0.8);
    color: black; 
    border-radius: 2px;
    max-width: 400px;
}

/* Creates a small triangle extender for the tooltip */
/*
.d3-tip:after {
    box-sizing: border-box;
    display: inline;
    font-size: 10px;
    width: 100%;
    line-height: 1;
    color: rgba(144, 196, 218, 0.8);
    content: "\25BC";
    position: absolute;
    text-align: center;
}
*/

/* Style northward tooltips differently */
/*.d3-tip.n:after {
    margin: -1px 0 0 0;
    top: 100%;
    left: 0;
}
*/


/* The contents of the tooltip  */

.d3-tip h1 {
    font-size: 14pt;
    font-weight: 700;
}


/***************/
/*  DOT CHART  */
/***************/

#dot-chart .dot {
    fill: #cccccc;
}

#dot-chart .legend-dot {
    fill: #cccccc;
}

#dot-chart circle.high-importance {
    stroke: #ff7f0d;
    stroke-width: 2;
}

#dot-chart circle.legend-selected {
    fill: #ff7f0d;  /* orange */
}

#dot-chart circle.selected {
    fill: #ff7f0d;  /* orange */
}

#dot-chart circle.semi-selected {
    fill: #1f77b4;  /* blue */
}

#dot-chart .legend {
    font-size: 12px;
    font-family: 'Lato', sans-serif;
}

#dot-chart .axis {
    font-size: 10px;
    font-family: 'Lato', sans-serif;
}

#dot-chart .axis path,
#dot-chart .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

#dot-chart .x.axis path {
    display: none;
}

/*********/
/* MAP   */
/*********/

.map path {
    fill: #cccccc;
    stroke: white;
    stroke-width: .5;
}

.map path.selected {
    fill: #1f77b4;
}

.map .semi-selected {
    fill: #ff7f0d;
}

.map-background {
    fill: #eeeeee;
}

/****************/
/* Area Chart   */
/****************/
#area-chart .axis {
    font-size: 10px;
    font-family: 'Lato', sans-serif;
}

#area-chart .axis path,
#area-chart .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

#area-chart .area {
    opacity: 0.7;
    clip-path: url('#clip');
}

#area-chart .area:hover {
    opacity: 1;
}

#effective-date-text {
    font-size: 10px;
    font-family: 'Lato', sans-serif;
}

#date-line {
    stroke: #000;
    stroke-width: 1px;
}

/*********************/
/* Time line Brush   */
/*********************/

#time-line-brush .axis {
    font-size: 10px;
    font-family: 'Lato', sans-serif;
}

#time-line-brush .axis path,
#time-line-brush .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.brush .extent {
    stroke: #fff;
    fill-opacity: .125;
    shape-rendering: crispEdges;
}

/*****************/
/* Chord Diagram */
/*****************/

#chord .labels {
    font-size: 0.7em;
}

/**********************/
/* TREE/HEAT MAP      */
/**********************/

g.product-group {
    cursor: pointer;
}

.product-group text {
    fill: black;
}

.node {
    border: solid 1px white;
    font-size: 10px;
    font-family: 'Lato', sans-serif;
    line-height: 12px;
    overflow: hidden;
    position: absolute;
    text-indent: 2px;
}

g.product-group .product-selected {
    stroke: yellow;
    stroke-width: 4;
}

g.product-group .hovering {
    stroke: '#ffff70';
    stroke-width: 4;
}