.layout {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
}
/* leftgroup lets you zoom in and not have left sidebar flex above the blog */
.leftgroup {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	flex-wrap: wrap-reverse;
}
.sidebar	{order: 1;}
.topicbar	{order: 3;}
.blog {
	order: 2;
	max-width: 600px;
	padding: 0px 10px 0px 10px;
}
.sidebar {
	max-width: 180px;
	padding: 6em 10px 0px 0px;
	margin: 0px;
	font-size: .8em;
}
.topicbar {
	max-width: 180px;
	padding: 6em 0px 0px 10px;
	margin: 0px;
	font-size: .8em;
}


body {
	background: #ccc url(/zpi/zpilogo.watermark.ccc.trans.png) no-repeat fixed;
	padding: 0px;
	margin: 0px;
	font-family: verdana, sans-serif;
	font-size: 1em;
}

@font-face {
	font-family: 'ZPi';
	src: local('ZPi'), url('/fonts/zpi_symbols.woff') format('woff');
}
.zpi_font	{font-family:ZPi, Segoe UI Symbol;}

h1,h2,h3,h4,h5	{margin:0px; font-weight:bold;}
h5		{font-size:.9em; color:#777; margin-bottom:10px;}
h4		{font-size:1.2em; border-bottom:6px solid #bbb; margin:0px;}
h3		{font-size:1.5em; font-weight:normal;}
h2		{font-size:1.7em;}
h1		{font-size:1.9em;}
a		{color:#668; text-decoration:underline; font-weight:bold;}
a:link		{color:#668;}
a:visited	{color:#668;}
a:focus,
a:hover		{color:#fff;}
a img		{border:0px;}


.blog-mast	{vertical-align:bottom;}
.blog-head	{padding:2px 2px 2px 6px; font-size:16px; background-color:#000; color:#fff; border-radius:6px 6px 6px 6px;}
.blog-head span,
.blog-head a	{color:#fff; text-decoration:none;}
.blog-head	{color:#8eadb0;}

.rssfeeds	{float:right; padding-top:1px;}
.rssfeeds a	{margin-left:2px;}

.blog-nav	{display:table; color:#ccc; background:#aaa; font-size:.8em; font-weight:bold; margin:6px 0px; padding:2px 0px; width:100%; border-radius:4px 4px 4px 4px;}
.blog-nav-left	{display:table-cell; text-align:left; width:70px; padding:0px 6px; vertical-align:middle;}
.blog-nav-mid	{display:table-cell; text-align:center; vertical-align:middle;}
.blog-nav-right	{display:table-cell; text-align:right; width:70px; padding:0px 6px; vertical-align:middle;}
.blog-nav a		{color:#fff; text-decoration:none;}
.blog-nav a:visited	{color:#fff;}
.blog-nav a:link	{color:#fff;}
.blog-nav a:focus,
.blog-nav a:hover	{color:#fff;}
.blog-nav b		{color:#ccc;}

.topicbar .authorimg	{text-align:center; margin:6px 0px 0px 0px;}
.topicbar h4 img	{float:right; margin-top:5px;}
.topicbar ul	{margin:6px 0px; padding-left:0px; color:#aaa; list-style:none;}
.sidebar a,
.topicbar a	{text-decoration:none;}
li.topichl	{background:#c4c4c4;}
.topicbar p,
.sidebar p	{text-align:left; margin:6px 0px 15px 0px;}
.sidebar ul	{margin:4px 0px 16px; padding-left:0px; list-style:none;}
.sidebar li	{border-bottom:1px solid #aaa; padding-bottom:2px;}
.sidebar b	{font-size:.8em; font-weight:bold;}

.linkbut	{border:1px solid black;}

.fine		{font-size:9px;}

.cephnews	{margin:0px 0px 6px 0px; padding:0px;}
.cephnews dt	{font-size:1em; padding-top:4px;}
.cephnews dt a	{font-size:1em;}
.cephnews dd	{margin:0px; font-size:1em; border-bottom:1px solid #aaa; padding-bottom:4px;}

.motto		{float:right; margin-top:30px; font-size:18px; text-align:center;}
.eop		{display:block; font-size:14px; font-weight:bold; text-align:right; border:0px #bbb solid; border-width:6px 0px 0px 0px; margin:0px; padding:0px; clear:both;}
.copyright	{color:#aaa; text-align:center; font-size:9px; font-weight:bold; margin:0px; padding:0px; padding-bottom:6px;}


/* skip nav */
a.skip-nav	{color:#fff; background-color:#000; text-align: center; padding: 0.5rem 1rem; border-radius: 0.5rem; position:absolute; transform: translateY(-700%); transition: transform 300ms ease-in;}
a.skip-nav:focus{transform: translateY(-150%)}


/* expanding author/topic lists */
.topicbar h4	{cursor: ns-resize;}
p.excon		{font-size:.8em; text-align:center; margin:0px; padding-top:10px;}
#author-toggle,
#topic-toggle	{display: none;}
#authors,
#topics		{max-height:0px; overflow: hidden;  transition: max-height 200ms ease;}
#author-toggle:checked ~ #authors,
#authors:focus-within	{max-height: 15rem;}
#topic-toggle:checked ~ #topics,
#topics:focus-within	{max-height: 50rem;}
.navarrow	{color:#fff; float:right;}
.navarrow::after	{font-family: zpi; content: '⯆';}
#author-toggle:checked ~ #author-label .navarrow::after,
#topic-toggle:checked ~ #topic-label .navarrow::after	{content: '⯅';}


/* scroll bar */
body	{scrollbar-face-color: #eee;
	scrollbar-shadow-color: #eee;
	scrollbar-highlight-color: #eee;
	scrollbar-3dlight-color: #eee;
	scrollbar-darkshadow-color: #eee;
	scrollbar-base-color: #ccc;
	scrollbar-track-color: #ccc;
	scrollbar-arrow-color: #444;}


/* small tablets and phones */
@media screen and (max-width:1000px) and (orientation: portrait)
{
body		{background:#ccc none; padding:0px 10px;}
body		{font-size:1em;}
h5		{font-size:1em;}
h4		{font-size:1.1em;}
h3		{font-size:1.2em;}
h2		{font-size:1.3em;}
h1		{font-size:1.4em;}
#authors,
#topics		{height:auto;}
.skip-nav,
.navarrow,
.excon		{display:none;}
.linkbut	{width:auto; height:2em;}
.eop		{font-size:1em;}
.copyright	{font-size:.6em; padding:.8em 0px}

.layout		{display:block; margin:0px;}
.leftgroup	{display:block;}
.blog		{display:block; max-width:100%; padding:0px;}
.sidebar,
.topicbar	{display:block; text-align:left; max-width:100%; width:100%; padding:10px 0px 0px 0px;}
.topicbar	{padding-bottom:1em; margin-bottom:0px;}

.topicbar h4 a	{color:#000;}
.sidebar ul	{font-size:1em;}
.sidebar b	{font-size:.8em;}
.cephnews dt	{font-size:1em;}
.cephnews dt a	{font-size:1em;}
.cephnews dt b	{color:#fff; background-color:#000; padding:0px 4px;}
.cephnews dd	{font-size:1em;}
.motto		{margin-top:.9em; font-size:1em;}
.blog-entry-head h4	{font-size:1.5em;}
.blog-mast	{position:relative; top:1px; width:auto; height:4em;}
.blog-head	{font-size:1.3em;}
.rssfeeds a img	{width:1em; height:auto; vertical-align:middle; margin-right:.1em; margin-bottom:.3em;}
.blog-nav	{font-size:1.3em;}
.blog-nav-mid	{font-size:.8em; padding-top:.2em;}
.blog-nav-left,
.blog-nav-right	{width:6em;}
.blog-nav img	{width:auto; height:.8em; margin-bottom:.1em; vertical-align:middle;}
}