/*
body {
  font: 14px 'Helvetica Neue', Helvetica, sans-serif;
  text-rendering: optimizeLegibility;
  margin-top: 1em;
  overflow-y: scroll;
}
*/

#illustration {
	background-color: #e5ddd7;
	margin-top: 20px;
	margin-bottom: 20px;
	position: relative;
	width: 620px;
}

svg {
	shape-rendering: crispEdges;
	margin: auto;
}


text#year-label {
  font: 14px 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 300;
  font-size: 40px;
  fill: #666;
}

text {
	font: 14px 'Helvetica Neue', Helvetica, sans-serif;
	fill: #666
}

/*
.tick-labels {
	fill: #666;
}
*/

.age-labels {
	fill: #fff;	
}

.axes {
  stroke: #666;
  stroke-width: 1px;
  stroke-linecap: square;
}

line.female {
  stroke: #bc70a1;
  stroke-width: 18px;
  shape-rendering: crispEdges;
}

line.male {
  stroke: #1f77b4;
  stroke-width: 18px;
  shape-rendering: crispEdges;
}

.controls {
  fill: #b3b3b3;
  stroke: #333;
  stroke-width: 0.5px;
  shape-rendering: geometricPrecision;
}

.controls line {
	stroke-width: 2px;
}

#downarrow:hover, 
#uparrow:hover,
#downdownarrow:hover,
#upuparrow:hover,
#pause:hover {
  fill: #ddd;
  stroke: #333;
}

#fallback p {
	font: 14px 'Helvetica Neue', Helvetica, sans-serif;
  text-rendering: optimizeLegibility;
  text-align: left;
  margin: 2em;
  color: #a45;
}

#fallback button {
	height: 20px;
}

#caption {
	width: 450px;
	text-align: justify;
	margin: 20px auto;
	font-size: smaller;
}