#chart {
width: 697px;
height: 595px;
background: #bbb;
margin: 1px auto;
position: relative;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
}

button {
  font-size: 100%;
	background-color:#599bb3;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	border:1px solid #29668f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:12px;
	padding:2px 8px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
    cursor: pointer;
}

text {
	pointer-events: none;
}

.grandparent text { /* header text */
	font-weight: bold;
	font-size: medium;
	font-family: "Open Sans", Helvetica, Arial, sans-serif; 
}

rect {
fill: none;
stroke: #fff;
}

rect.parent,
	.grandparent rect {
		stroke-width: 2px;
	}

.grandparent rect {
fill: #fff;
}

.children rect.parent,
	.grandparent rect {
cursor: pointer;
	}

rect.parent {
	pointer-events: all; 
}

.children:hover rect.child,
	.grandparent:hover rect {
fill: #aaa;
	}

.textdiv { /* text in the boxes */
	font-size: x-small;
padding: 5px;
	 font-family: "Open Sans", Helvetica, Arial, sans-serif; 
}