2019-11-04 20:13:20 +00:00
|
|
|
@import url('https://fonts.googleapis.com/css?family=Lato|Special+Elite|Averia+Serif+Libre');
|
|
|
|
|
|
|
|
body {
|
|
|
|
padding: 0px;
|
|
|
|
margin: 0px;
|
|
|
|
background: white;
|
|
|
|
font-family: 'Lato', serif;
|
|
|
|
font-weight: normal;
|
|
|
|
font-size: 14px;
|
|
|
|
}
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
text-align: center;
|
|
|
|
font-family: 'Averia Serif Libre', serif;
|
|
|
|
font-size: 34px;
|
|
|
|
font-weight: bold;
|
|
|
|
color: #BBB;
|
|
|
|
}
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
text-align: center;
|
|
|
|
font-family: 'Special Elite', serif;
|
|
|
|
font-size: 26px;
|
|
|
|
font-weight: bold;
|
|
|
|
color: #48B;
|
|
|
|
}
|
|
|
|
|
|
|
|
table, dl, .histogram_others, .heatmap {
|
|
|
|
margin-left: auto;
|
|
|
|
margin-right: auto;
|
|
|
|
padding-bottom: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.heatmap {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
|
|
|
|
.dt_head {
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
|
|
|
td {
|
|
|
|
width: 4em;
|
|
|
|
background: #CCC;
|
|
|
|
color: #000;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
td.dt_zero {
|
|
|
|
color: #888;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bar {
|
|
|
|
font-size: .8em;
|
|
|
|
line-height: 1;
|
|
|
|
text-transform: uppercase;
|
|
|
|
width: 500px;
|
|
|
|
height: 40px;
|
|
|
|
margin-left: 200px;
|
|
|
|
background: repeating-linear-gradient(
|
|
|
|
to right,
|
|
|
|
#ddd,
|
|
|
|
#ddd 1px,
|
|
|
|
#fff 1px,
|
|
|
|
#fff 5%
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar:after {
|
|
|
|
content: "";
|
|
|
|
display: block;
|
|
|
|
background-color: #48B;
|
|
|
|
width: 50px;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
height: 90%;
|
|
|
|
position: relative;
|
|
|
|
top: 50%;
|
|
|
|
transform: translateY(-50%);
|
|
|
|
}
|
|
|
|
|
|
|
|
.text {
|
|
|
|
/* font-weight: 600;*/
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
height: 40px;
|
|
|
|
width: 200px;
|
|
|
|
background-color: white;
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
justify-content: flex-end;
|
|
|
|
}
|
|
|
|
|
|
|
|
dl {
|
|
|
|
display: flex;
|
|
|
|
background-color: white;
|
|
|
|
flex-direction: column;
|
|
|
|
width: 100%;
|
|
|
|
max-width: 700px;
|
|
|
|
position: relative;
|
|
|
|
padding: 20px;
|
|
|
|
padding-top: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.histogram_others {
|
|
|
|
width: 700px;
|
|
|
|
}
|
|
|
|
/*
|
|
|
|
dt {
|
|
|
|
align-self: flex-start;
|
|
|
|
width: 100%;
|
|
|
|
display: block;
|
|
|
|
text-align: center;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
margin-left: 130px;
|
|
|
|
}
|
|
|
|
*/
|
|
|
|
|
2019-11-04 22:39:44 +00:00
|
|
|
.bar-0:after {
|
|
|
|
width: 1px;
|
|
|
|
}
|
|
|
|
|
2019-11-04 20:13:20 +00:00
|
|
|
.bar-1:after {
|
|
|
|
width: 1%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-2:after {
|
|
|
|
width: 2%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-3:after {
|
|
|
|
width: 3%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-4:after {
|
|
|
|
width: 4%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-5:after {
|
|
|
|
width: 5%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-6:after {
|
|
|
|
width: 6%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-7:after {
|
|
|
|
width: 7%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-8:after {
|
|
|
|
width: 8%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-9:after {
|
|
|
|
width: 9%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-10:after {
|
|
|
|
width: 10%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-11:after {
|
|
|
|
width: 11%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-12:after {
|
|
|
|
width: 12%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-13:after {
|
|
|
|
width: 13%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-14:after {
|
|
|
|
width: 14%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-15:after {
|
|
|
|
width: 15%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-16:after {
|
|
|
|
width: 16%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-17:after {
|
|
|
|
width: 17%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-18:after {
|
|
|
|
width: 18%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-19:after {
|
|
|
|
width: 19%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-20:after {
|
|
|
|
width: 20%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-21:after {
|
|
|
|
width: 21%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-22:after {
|
|
|
|
width: 22%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-23:after {
|
|
|
|
width: 23%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-24:after {
|
|
|
|
width: 24%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-25:after {
|
|
|
|
width: 25%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-26:after {
|
|
|
|
width: 26%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-27:after {
|
|
|
|
width: 27%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-28:after {
|
|
|
|
width: 28%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-29:after {
|
|
|
|
width: 29%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-30:after {
|
|
|
|
width: 30%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-31:after {
|
|
|
|
width: 31%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-32:after {
|
|
|
|
width: 32%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-33:after {
|
|
|
|
width: 33%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-34:after {
|
|
|
|
width: 34%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-35:after {
|
|
|
|
width: 35%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-36:after {
|
|
|
|
width: 36%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-37:after {
|
|
|
|
width: 37%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-38:after {
|
|
|
|
width: 38%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-39:after {
|
|
|
|
width: 39%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-40:after {
|
|
|
|
width: 40%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-41:after {
|
|
|
|
width: 41%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-42:after {
|
|
|
|
width: 42%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-43:after {
|
|
|
|
width: 43%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-44:after {
|
|
|
|
width: 44%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-45:after {
|
|
|
|
width: 45%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-46:after {
|
|
|
|
width: 46%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-47:after {
|
|
|
|
width: 47%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-48:after {
|
|
|
|
width: 48%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-49:after {
|
|
|
|
width: 49%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-50:after {
|
|
|
|
width: 50%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-51:after {
|
|
|
|
width: 51%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-52:after {
|
|
|
|
width: 52%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-53:after {
|
|
|
|
width: 53%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-54:after {
|
|
|
|
width: 54%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-55:after {
|
|
|
|
width: 55%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-56:after {
|
|
|
|
width: 56%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-57:after {
|
|
|
|
width: 57%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-58:after {
|
|
|
|
width: 58%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-59:after {
|
|
|
|
width: 59%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-60:after {
|
|
|
|
width: 60%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-61:after {
|
|
|
|
width: 61%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-62:after {
|
|
|
|
width: 62%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-63:after {
|
|
|
|
width: 63%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-64:after {
|
|
|
|
width: 64%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-65:after {
|
|
|
|
width: 65%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-66:after {
|
|
|
|
width: 66%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-67:after {
|
|
|
|
width: 67%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-68:after {
|
|
|
|
width: 68%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-69:after {
|
|
|
|
width: 69%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-70:after {
|
|
|
|
width: 70%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-71:after {
|
|
|
|
width: 71%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-72:after {
|
|
|
|
width: 72%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-73:after {
|
|
|
|
width: 73%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-74:after {
|
|
|
|
width: 74%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-75:after {
|
|
|
|
width: 75%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-76:after {
|
|
|
|
width: 76%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-77:after {
|
|
|
|
width: 77%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-78:after {
|
|
|
|
width: 78%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-79:after {
|
|
|
|
width: 79%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-80:after {
|
|
|
|
width: 80%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-81:after {
|
|
|
|
width: 81%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-82:after {
|
|
|
|
width: 82%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-83:after {
|
|
|
|
width: 83%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-84:after {
|
|
|
|
width: 84%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-85:after {
|
|
|
|
width: 85%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-86:after {
|
|
|
|
width: 86%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-87:after {
|
|
|
|
width: 87%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-88:after {
|
|
|
|
width: 88%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-89:after {
|
|
|
|
width: 89%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-90:after {
|
|
|
|
width: 90%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-91:after {
|
|
|
|
width: 91%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-92:after {
|
|
|
|
width: 92%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-93:after {
|
|
|
|
width: 93%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-94:after {
|
|
|
|
width: 94%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-95:after {
|
|
|
|
width: 95%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-96:after {
|
|
|
|
width: 96%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-97:after {
|
|
|
|
width: 97%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-98:after {
|
|
|
|
width: 98%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-99:after {
|
|
|
|
width: 99%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar-100:after {
|
|
|
|
width: 100%;
|
|
|
|
}
|