body,html{margin:0; padding:0; font: 12px Oswald; background:#222;}

.tbl{border:solid 1px white; border-collapse: collapse; user-select:none; width:100%;}
.tbl td, .tbl th{border:solid 1px #222; padding: 2px 6px; text-align: center; font: 300 12px Oswald;}

@media(min-width:1200px){
	body{font-size:14px;}
	.tbl td, .tbl th{font-size:14px;}
}

@media(min-width:1600px){
	body{font-size:16px;}
	.tbl td, .tbl th{font-size:16px;}
}

.tbl td.c1{background:#333; color:#557;}
.tbl td.c2{background:#456; color:#abc;}
.tbl td.c3{background:#069; color:white;}
.tbl td.c4{background:#099; color:white;}
.tbl td.c5{background:#690; color:white;}
.tbl td.c6{background:#9C0; color:black;}
.tbl td.c7{background:#dd0; color:black;}
.tbl td.c8{background:#d90; color:black;}

.tbl td.c9{background:#c00; color:white;}
.tbl td.c10{background:#633; color:#b99;}
.tbl td.c11{background:#333; color:#955;}

.tbl th{font-weight:400; color:white; background:#444}
.tbl th.p{}
.tbl th.t{text-align: right; padding-left:0; padding-right: 10px;}
.tbl th.e{background:#666; font-size:.8em;}
.tbl th.e>a{color:white; text-decoration: none; display:block; padding: 3px 6px; margin: -3px -6px;}
.tbl th.e>a:hover{background:white; color:black;}

.tbl td.d{
	position: relative;
}
.tbl td.d:before{
	transition:transform 100ms ease, font-size 100ms ease;
	content:attr(data-v);
}

.tbl td.d.hover{
	color:white !important;
	background:black !important;
	text-shadow: 0 1px 2px black;
	box-shadow:0 4px 10px rgba(0,0,0,.5);
}
.tbl td.d.hover:before{
	display:block;
	position: relative;
	transform:scale(1.2);
}

.tbl td.d.selected{
	box-shadow: inset 0 1px 2px rgba(0,0,0,.5), inset 0 0 30px rgba(0,0,0,.5);
	text-shadow: 0 1px 3px black;
	color:White;
}

::-moz-selection { background: rgba(0,0,0,.3); color:white;}
::selection { background: rgba(0,0,0,.3); color:white;}

#highlight_x, #highlight_y{
	opacity: 0;
	position:absolute;
	z-index:100;
	pointer-events: none;
	box-sizing:border-box;
}
#highlight_x,
#highlight_y{
	background:rgba(255,255,255,.4);

}
#highlight_x.hover,
#highlight_y.hover{
	opacity:1;
}

#highlight_x.hover{
	border-top:solid 2px white;
}

#highlight_y.hover{
	border-left:solid 2px white;
}

#info{
	display:block;
	position:absolute;
    left: 0;
    top: 0;
    z-index:110;
    margin: 0 0 0 -63px;
    box-sizing:border-box;
    font-weight: 300;
    width: 120px;
    padding-bottom:1.7em;
    box-shadow: 0 7px 15px rgba(0,0,0,.3);
    pointer-events: none;
    transform:scale(0);
    transition: opacity, transform 100ms ease;
    opacity: 0;
}

#info:before{
	position:absolute;
    left:50%;
    top: -16px;
    width:0;
    height:0;
    margin: 0 0 0 -4px;
    border: solid 8px transparent;
    border-bottom-color: rgba(0,0,0,.8);
    content:'';

}

#info.show{transform:scale(1); opacity: 1;}

#info.left{margin-left:-20px;}
	#info.left:before{left:16px;}

#info.right{margin-left:-103px;}
	#info.right:before{left: 100px;}

#info.above{margin-top: -7em; padding: 1.7em 0 0 0;}
	#info.above>span{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
	#info.above>span.temp,
	#info.above>span.pres{
		bottom:auto;
		top:0;
	}
	#info.above:before{border-bottom-color:transparent; border-top-color:rgba(0,0,0,.8); top:100%;}

#info>span{
	padding: .2em .5em;
    box-sizing:border-box;
	display:block;
    background:rgba(0,0,0,.8);
    color:white;
    text-align:center;
}
#info>span.temp,
#info>span.pres{
	bottom:0;
	position:absolute;
    width:50%;
    text-align:center;
    font-size:.9em;
}
#info>span.temp{
    left:0;
	background:rgba(100,100,100,.9);
}
#info>span.pres{
    left:50%;
    width:50%;
	background:rgba(150,150,150,.9);
}