* {
  box-sizing: border-box;
}

html, body {
	width: 900px;
}

body {
	font-size: 62.5%;
	font-family: "TextbookNew-Regular", arial, helvetica;
}

#header {
	font-family: "TextbookNew-Bold";
	text-transform: uppercase;
	font-size: 1.25em;
	color: black;
	margin-bottom: .8em;
	letter-spacing: .04em;
	display: none;
}

#subheader {
	font-size: 1.25em;
	color: black;
	margin-bottom: .8em;
	letter-spacing: .04em;
}

#chart {
	font-size: 1.25em;
}

.top {
	display: inline-block;
	width: 30%;
	height: 20%;
	list-style: none;
	margin: 10px 20px 10px 0;
	padding: 0;
	vertical-align: top;
}

.top.small {
	width: 300px;
}

.top-header {
	display: inline-block;
	background-color: #b9c3c6;
	font-family: "TextbookNew-Bold";
	font-size: .9em;
	text-transform: uppercase;
	letter-spacing: .04em;
	width: 100%;
	height: 40px;
	padding: 18px 0 0 10px;
	color: #5a5957;
}

.top li {
	height: 25px;
}
.top.small li {
	height: 30px;
}

.top li div, .top li span {
	display: inline-block;
}

li .number {
	font-family: "TextbookNew-Bold";
	text-align: left;
	color: #5a5957;
	width: 10%;
	padding: .5em 1.75em 0 .9em;
}

li .item {
	width: 85%;
	padding-top: .5em;
	line-height: 1.05;
}

li .item a {
	text-decoration: none;
	color: #696867;
}

li:nth-child(odd) {
	background-color: #f6f5f3;
}

li:hover a {
	color: #9e63aa;
	/*cursor: default;*/
}

.top:hover .top-header {
	background-color: #773e84;
	color: white;
} 

#caption {
	font-family: "TextbookNew-Light";
	text-transform: uppercase;
	color: #555150;
	margin-top: 1.3em;
	letter-spacing: .04em;
	font-size: 1em;
}

.active {
	background-color: yellow;
}