/* A lot of this CSS is inherited from the Flowing Data tutorial:
http://flowingdata.com/2015/02/19/make-an-interactive-map-with-category-filters/;
*/

body {
	margin: 0;
	padding: 0;
  font-family: Helvetica, sans-serif;
}

#main-wrapper {
    width: 1000px;
    padding: 50px;
}

#metrics { width: 920px; margin: 20px auto 15px 0; font-family: Helvetica, sans-serif; }
#metrics h3 { font-size: 13px; font-family: Helvetica, sans-serif; text-align: center; margin-bottom: 0; }
#metrics ul { font-size: 12px; font-family: Helvetica, sans-serif; margin-left: 0; padding: 0; }
#metrics ul li {
    list-style: none;
    margin: 10px 10px 0 0;
    padding: 2px 0;
    display: inline-block;
    width: 139px;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
}

#metrics ul li.bottom { margin-bottom: 0; }
#metrics #income { width: 461px; float: left;  margin-right: 15px; }
#metrics #location { width: 250px; float: left; padding-left: 5px;  }
#metrics .block-button { width: 80px; display: block; float:left; clear:both; }

.tooltip {
    position: absolute;
    z-index: 10;
    text-align: left;
    width: 170px;
    padding: 10px;
    font-size: 10px;
    font-family: Helvetica, sans-serif;
    background: #ffffff;
    pointer-events: none;
    opacity: 0;
}
.tooltip h3 {
  font-size: 12px; margin: 0 0 7px 0;
  line-height: 1.2em;
}
div.tooltip .line { clear: both; margin-top: 3px; font-size: 11px; }
div.tooltip .symbol { float: left; width: 6px; height: 6px; margin: 3px 4px 0 0; }
div.tooltip .val { float: right; width: 25px; text-align: center; margin-right: 4px; background: none; }


.overlay {
  fill: none;
  pointer-events: all;
}

.button {
  fill: #000;
}

.scalebutton {
  cursor: pointer;
}

.countries {
  stroke: #fff;
  stroke-linejoin: round;
}
.countries path.selected {
    stroke: #000;
    stroke-width: 0.5px;
}

path.expend, #metrics ul li.selected.expend, .tooltip .expend {color:white; background: #85e085;}
path.arrivals, #metrics ul li.selected.arrivals, .tooltip .arrivals {color:white; background: #e066ff;}
path.receipts, #metrics ul li.selected.receipts, .tooltip .receipts {color:white; background: #8080ff;}


.clr { clear: both; }

#vis {
  padding: 25px;
  display: inline-block;
}

.legendColors text {
    font-size: .8em;
}