/* ---------------------------------------------------------
   Author's styles
   ---------------------------------------------------------*/
#timeline {
  margin: 15px auto;
  text-align: center;
  position: relative;
  top: 5px;
  left: 0;
  right: 0;
}

.year label {
  font-weight: normal;
  border: 1px solid #CDCDCD;
  background-color: #D8D8D8;
  padding: 8px 30px 5px 30px;
  margin: 0 5px;
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #D8D8D8, #CDCDCD);
  background-image:    -moz-linear-gradient(top, #D8D8D8, #CDCDCD);
  background-image:     -ms-linear-gradient(top, #D8D8D8, #CDCDCD);
  background-image:      -o-linear-gradient(top, #D8D8D8, #CDCDCD);
  background-image:   linear-gradient(to bottom, #D8D8D8, #CDCDCD);
  border-radius: 15px;
}

.year input {
  display: none;
}
.year input[checked] + label {
  color: #D9E3EF;
  background-color: #6F99C6;
  background-image: -webkit-linear-gradient(top, #6F99C6, #668DB7);
  background-image:    -moz-linear-gradient(top, #6F99C6, #668DB7);
  background-image:     -ms-linear-gradient(top, #6F99C6, #668DB7);
  background-image:      -o-linear-gradient(top, #6F99C6, #668DB7);
  background-image:   linear-gradient(to bottom, #6F99C6, #668DB7);
  border: 1px solid #4686C4;
}

.year label:hover {
  background-image: -webkit-linear-gradient(top, #CDCDCD, #D8D8D8);
  background-image:    -moz-linear-gradient(top, #CDCDCD, #D8D8D8);
  background-image:     -ms-linear-gradient(top, #CDCDCD, #D8D8D8);
  background-image:      -o-linear-gradient(top, #CDCDCD, #D8D8D8);
  background-image:   linear-gradient(to bottom, #CDCDCD, #D8D8D8);
}

.year input[checked] + label:hover {
  color: #D9E3EF;
  background-color: #6F99C6;
  background-image: -webkit-linear-gradient(top, #6F99C6, #6F99C6);
  background-image:    -moz-linear-gradient(top, #6F99C6, #6F99C6);
  background-image:     -ms-linear-gradient(top, #6F99C6, #6F99C6);
  background-image:      -o-linear-gradient(top, #6F99C6, #6F99C6);
  background-image:   linear-gradient(to bottom, #6F99C6, #6F99C6);
  border: 1px solid #4686C4;
}


/* ---------------------------------------------------------
   SVG styles
   ---------------------------------------------------------*/

#diagram > svg{position: relative;
			   display:block;
			   max-width: 100%;
			   clear:both;}





.info, .prov-label {
  pointer-events: none;
}
.info text {
  fill: white;
}

#circle circle {
  fill: none;
  pointer-events: all;
}
text {
  cursor: default;
  fill: #333;
  text-wrap: normal !important;
}
.group-arc + text {
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
.group-arc.animate + text {
  opacity: 0;
}
#circle path {
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
#circle:hover path.fade,
#circle path.unselected {
  opacity: 0;
  pointer-events: none;
}
text.fade {
  opacity: 0;
}
.group-arc {
  cursor: pointer;
}

.chord {
  opacity: 0.75;
}
.chord:hover {
  opacity: 1;
}