/*
$textfont    : 'Baskerville','Baskerville Old Face','Hoefler Text',Garamond,'Libre Baskerville','Times New Roman',serif;

body {
  font-family: $textfont;
}

*/
.chart {
  font-size: 11px; }

h3, h4 {
  text-align: center; }

div#chartandlegend {
  margin: 20px;
  width: 90%;
  padding: 5px;
  background-color: #EDEBE9; }

div#chart, div#legende {
  display: inline-block;
  vertical-align: top; }

div#breadcrumbs {
  margin-left: -20px; }

#chart li {
  list-style-type: none;
  display: inline;
  margin-right: 10px; }

.axis {
  fill: #777; }

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

.axis path {
  stroke: none; }

.dot {
  stroke-width: 3px; }

div.tooltip {
  font-size: 12px;
  position: absolute;
  text-align: left;
  vertical-align: middle;
  padding: 5px;
  font: 8px;
  background: white;
  border: 1px solid lightgray;
  pointer-events: none;
  box-shadow: 2px 2px 5px #AAAAAA; }

.tooltip .commune {
  font-weight: bold;
  font-size: 12px;
  font-variant: caps; }

.tooltip table {
  margin: 0px;
  padding-left: 0px; }

#legende {
  margin-left: 20px;
  color: #777;
  stroke: #777; }
  #legende div {
    display: inline-block; }

#legende svg.legende-color {
  width: 50px;
  height: 30px; }

#legende table th {
  text-align: center; }

#legend-size, #legende-proportion-fixed, #legende-proportion-dynamic {
  width: 273px;
  height: 80px; }

circle.small, circle.medium, circle.large {
  fill: none;
  stroke-width: 1px; }

line.small, line.medium, line.large {
  fill: none;
  stroke-width: 1px; }

text.small, text.medium, text.large {
  text-anchor: end;
  fill: #777;
  stroke: none;
  font-size: 75%; }

#legende-proportion-fixed, #legende-proportion-dynamic {
  text-anchor: end;
  fill: #777;
  stroke: none; }

#legende-proportion-fixed line, #legende-proportion-dynamic line {
  stroke: #777; }