div.nav > ul
{
	text-transform: lowercase;
	text-shadow: 1px 1px 1px #000;
	letter-spacing: 0.5px;
	display: block;
	text-align: center;
	width: 100%;
	margin: 0.5rem 0;
	padding: 0;
}

div.nav > ul > li
{
	border-radius: 4px;
	padding: 4px;
	margin: 4px;
	list-style: none;
	display: inline-block;
	width: 72px;
	background-color: #222;
	border-bottom: 2px solid #aaa;
}

div.nav > ul > li.this
{
	background-color: rgba(238, 238, 238, 0.125);
	border-bottom-color: rgba(238, 238, 238, 0.25);
	font-weight: bold;
}

div.nav > ul > li.irc
{
	background-color: hsl(260, 35%, 45%);
	border-bottom-color: hsl(260, 35%, 60%);
}

div.nav > ul > li.mab
{
	background-color: hsl(305, 35%, 45%);
	border-bottom-color: hsl(305, 35%, 60%);
}

div.nav > ul > li.omb
{
	background-color: hsl(345, 50%, 50%);
	border-bottom-color: hsl(345, 50%, 60%);
}

div.nav > ul > li.hls
{
	background-color: hsl(10, 55%, 50%);
	border-bottom-color: hsl(10, 55%, 60%);
}

div.nav > ul > li.vcs
{
	background-color: hsl(30, 50%, 45%);
	border-bottom-color: hsl(30, 50%, 55%);
}

div.nav > ul > li.bt
{
	background-color: hsl(70, 30%, 40%);
	border-bottom-color: hsl(70, 30%, 55%);
}

div.nav > ul > li.bbs
{
	background-color: hsl(135, 30%, 40%);
	border-bottom-color: hsl(135, 30%, 55%);
}

div.nav > ul > li.kb
{
	background-color: hsl(185, 50%, 40%);
	border-bottom-color: hsl(185, 50%, 55%);
}

div.nav > ul > li.www
{
	background-color: hsl(225, 50%, 50%);
	border-bottom-color: hsl(225, 50%, 60%);
}

@media (min-width: 400px)
{
	/* selectively add a break on smaller mobile displays where
	 * there would be three rows in total but the first two would
	 * have an even number (this looks uncanny), so instead they
	 * look staggered and "bricky"
	 */
	/* element appears but we hide it where undesired */
	div.nav > ul > br.bricky
	{
		display: none;
	}
}