#ruler{
	position:absolute;
	top:-20%;
	left:50%;
	transform:translate(-50%,-100%);
	width:30em;
	transition:all 0.3s;
	opacity:1;
	pointer-events:none;
}

#ruler.hidden{
	opacity:0;
	transform:translate(-50%,-80%);
}

#ruler .icon img{
	-webkit-filter: saturate(0.3);
	filter: saturate(0.3);
}
#ruler .icon:hover img{
	-webkit-filter: saturate(0.9);
	filter: saturate(0.9);
}
#ruler .icon.selected img{
	-webkit-filter: none;
	filter: none;
}
#ruler .icon{pointer-events:auto;}
#ruler.hidden .icon{pointer-events:none;}