geostat/geo.css

@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;
}
*/

.bar-0:after {
  width: 1px;
}

.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%;
}