Playing around with a bit of custom theming

Ok, bear in mind this is quick and rough WIP, and for my preferences on desktop.

If you want the current code, this is it. Runs on top of the current default light theme.

@-moz-document domain(blenderartists.org) {
	body {
		background: #505050;
	}
	.wrap {
		max-width: 960px !important;
		background: #fff;
		border: 2px solid #ccc;
		box-shadow: 0 0 6px #111;
	}

	.d-header.clearfix>.wrap {
		border: none;
		box-shadow: none;
	}
	.panel-body {
		max-height: 12em !important;
		overflow: hidden !important;
	}
	.categories-and-latest {
		flex-flow: column-reverse nowrap !important;
	}
	.categories-and-latest>div {
		flex-direction: column-reverse !important;
	}
	.latest-topic-list {
		height: 10em;
		overflow: auto !important;
		resize: vertical !important;
	}
	.badge-wrapper {
		display: block !important;
		padding: 6px 6px 0 6px !important;
		font-size: 1em !important;
		border-top: 1px solid #ccc !important;
	}
	.badge-category-bg {
		display: none !important;
	}
	.panel-body-contents.clearfix .notifications,
	.category-list>thead, td.topics, #suggested-topics {
		display: none !important;
	}
	.category-list>tbody {
		border-top: none !important;
	}
	td.category {
		color: #444 !important;
		border-top: 3px solid #e9e9e9 !important;
		border-left: none !important;
	}
	.subcategory {
		line-height: 1.7em !important;
	}
	.subcategory>.ember-view {
		float: right;
		line-height: 2.2em !important;
	}
	.thumbnail {
		max-height: 152px;
		max-width: 152px;
	}
	.topic-thumbnail .thumbnail {
		max-height: 80px;
		max-width: 80px;
	}
	.timeline-container {
		margin-left: 820px !important;
	}
	.timeline-container>.topic-timeline {
		margin-left: 0 !important;
		width: 100px !important;
	}
}