div.diagram {
	margin: 3px;
	background: white;
	padding: 1px;
	float: left;
}

div.overlap1 { border: 1px solid #eee; }
div.overlap2 { border: 1px solid #ccc; }
div.overlap3 { border: 1px solid #aaa; }
div.overlap4 { border: 1px solid #999; }
div.overlap5 { border: 2px solid #999; }
div.overlap6 { border: 3px solid #999; }
div.overlap7 { border: 3px solid #777; }
div.overlap8 { border: 3px solid #555; }
div.overlap9 { border: 4px solid #555; }
div.overlap10 { border: 5px solid #555; }
div.overlap11 { border: 6px solid #555; }
div.overlap12 { border: 7px solid #333; }
div.overlap13 { border: 7px solid #111; }
div.overlap14 { border: 9px solid #000; }
div.overlap15 { border: 10px solid #000; }
div { background: white; }

#div:hover div:hover div:not(:hover) { background: green; }
#div:hover div:not(:hover) { background: red; }
#div:hover { background: white; }

#div:not(:hover) { background: yellow; }
#div:hover > div:not(:hover) { background: yellow; }
#div:hover div:not(:hover) div:not(:hover) { background: blue; }
#div:hover + div:not(:hover) { background: red; }
#div:hover + div:not(:hover) div { background: purple; }
#div:hover div:not(:hover) + div:not(:hover) { background: blue; }

#div:not(:hover) div:not(:hover) { background: red; }

div.cat { 
	border: thin solid black;
	padding: 4px;
	background: #ddd;
	margin: 6px;
	float: left;
	width: 45%;
	height: 15em;
	overflow: auto;
}