.entity {
  float: left;
  margin: .25em;
  border: 1px solid #cfcfcf;
  text-align: center;
  background-color: white;
  width: 4em;
  height: 5em;
  line-height: 1em;
  position: relative;
}

.entity.lat1 {border-color: #1b59fd;} label.lat1 {color: #1b59fd;}
.entity.symbols {border-color: #c90a0a;} label.symbols {color: #c90a0a;}
.entity.other {border-color: green;} label.other {color: green;}

.entity .sample {
  font-size: 300%;
  line-height: 2em;
}
.entity:hover .sample, .entity.hover .sample,
.entity.stay .sample {
  font-size: 100%;
}
.entity .sample .abbr {
  font-size: 50%;
}
.entity:hover .sample .abbr, .entity.hover .sample .abbr,
.entity.stay .sample .abbr {
  font-size: 100%;
}

.entity .text,
.entity .num,
.entity .code-point {
  display: none;
}

.entity:hover .text, .entity.hover .text, .entity.stay .text,
.entity:hover .num, .entity.hover .num, .entity.stay .num,
.entity:hover .code-point, .entity.hover .code-point, .entity.stay .code-point {
  display: block;
}

.entity .sample .invisible {
  color: #cfcfcf;
}
label {
  margin-right: .25em;
  margin-left: 1em;
}

.close {
	position: absolute;
	top: 0px;
	right: 0px;
	font-size: 100%;
	font-weight: bold;
	color: #c90a0a;
	cursor: pointer;
}