body {
  background-color: #f5f3f0;
}

#inner {
  width: 940px;
  min-height: 500px;
  margin: 0 auto;
  background-color: #FFF;
}

#contentsTitle {
  width: 940px;
  position: absolute;
  margin-left: 20px;
  margin-top: 20px;
}

#chartContainer {
  width:940px;
  height:500px;
  z-index: 1;
  position: relative;
  background-color: #DDD;
}

#chart {
  width: 570px;
  height: 400px;
  background-color: #FFF;
  z-index: 10;
  position: absolute;
  margin-left: 350px;
  margin-top: 80px;
}

#chartSelector {
  width: 900px;
  height: 100px;
  background-color: #FFF;
  position: absolute;
  margin-left: 20px;
  margin-top: 380px;
}

.title {
  font-size: 24px;
  float: left;
  line-height: 1.2em;
  margin-bottom: 0.2em;
}

.description {
  font-size: 10px;
  color: #666;
  clear: both;
}

.mabar {
  fill: #7f9ada;
}

.mabar:hover {
  fill: #469ffb;
}

.febar {
  fill: #da7fb9;
}

.febar:hover {
  fill: #fb46b1;
}

.axis {
  font: 6px sans-serif;
}

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

.axis.y path,
.axis.y line {
  display: none;
}

.active {
  fill : #F00;
}

.wardOut {                      
	stroke-width: 1px !important;
	stroke: #FFF !important;                                     
}

.wardHover {
	fill: #ffdf00 !important;
}

.wardSelected {
	fill: #ffdf00 !important;
}

.yearOut {   
	color: #FFF !important;                  
	background-color: #333 !important;
}

.yearHover {
	color: #000 !important;
	background-color: #ffdf00 !important;
}

.yearSelected {
	color: #000 !important;
	background-color: #ffdf00 !important;
}

#yearContainer {
	font-size: 12px;
	width: 940px;
	height: 40px;
	background-color: #333;
}

.yearBlock {
	width: 54px;
	height: 40px;
	display: block;
	float: left;
	text-align: center;
	border-right: 1px solid #7a7a7a;
	cursor: pointer;
}

.yearBlock label {
	display: block;
}

.subunit-label {
  pointer-events: none;
}

.yearText {
  display: block;
  line-height: 40px;
  pointer-events: none;
}

.ward,
.ward2 {
  cursor: pointer;
}