styles.css

*{
	font-family: 'Roboto', sans-serif;
	font-size: 10px;
}

.container,.col,.header-section{
	margin: 1px;
}

.container{
	border: 1px navy solid;
	width: 1204px;
	margin: 1px auto;
}

.section{
	float: left;
	margin: 0px;
}
.col{
	float: left;
}
.block{
}
.block:not(:last-child){
	margin-bottom: 31px;
}
.topic{
	margin: 2px 0px;
	padding: 2px 0px;
}
.topic label{
	z-index: 1;
}

.topic:not(:last-child), .header-block{
	border-bottom: 2px #fff solid;
}

 .header-section{
 	background-color: navy;
 	color: white;
 	text-align: center;
 	font-weight: bold;
 	padding: 5px;
 	letter-spacing: 2px;
 }

 .header-block{
 	text-align: center;
 	padding: 4px;
 }

.clearfix{
	clear: both;
}

.widget-wrapper{
  	position: relative;
	padding: 3px 32px 3px 5px;
}

.widget{
	width: 25px;
	height: 13px;
	border-left: 1px #aaa solid;
	display: inline;
	position: absolute;
	right: 1px;
	top: 1px;
	padding-top: 2px;
	z-index: 2;
}

.bar {
	margin-top: 3px;
	height: 5px;
}

.bar:not(:last-child){
	margin-bottom: 1px;
}

.value-0{width: 0px;}
.value-1{width: 7px; background-color: #4CAF50;}
.value-2{width: 14px; background-color: #FFAD33;}
.value-3{width: 21px; background-color: #FF4136;}

table.selector{
	width: 400px;
	margin: 10px auto 0px;
	border: 1px #333 solid;
}

table.selector td, table.selector th{
	padding: 6px 5px;
}
table.selector tbody td, table.selector tbody th{
	cursor: pointer;
}

table.selector thead th{
	background-color: #030d39;
	color: #eee;
}

table.selector tbody td{
	background-color: #d1d5e8;
	text-align: center;
	width: 60px;
}

table.selector tbody th{
	background-color: #b7c0ec;
}

table.selector tbody td:hover, table.selector tbody thno:hover{
	background-color: #2b3c85;
	color: white;
}