body
{
	color: #181f32;	/* rgba(24,31,50,1) */
	background: #c9d7e8;	/* rgba(201,215,232,1) */
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	position: relative;
	margin: 0;
	padding-bottom: 10em;
}

/*
	Style the directory list.
	Selector should match what is done by DirectoryManager.extractDirectoryElement()
*/
#footer + table
{
	background: white;
	padding: 10px;
	border-radius: 0 20px 20px 0;
	display: none;
	margin-right: 232px;
}
body > address { display: none; }

/* My web host apparently uses a different directory format, so we duplicate the above. */
#footer + pre
{
	background: white;
	padding: 10px;
	border-radius: 0 20px 20px 0;
	display: none;
	margin-right: 232px;
}

a:link { color: #42768b; }
a:visited { color: #181f32; }
a:hover { color: #42768b; text-decoration: none; }

a.imagelink { border: 0; }
a.imagelink:hover { position: static; }

a[href^="http://"]::before { content: "🔓"; }

h1 { font-size: x-large; }
h2 { font-size: x-large; color: #42768b; }
h3 { font-size: large; }

pre { overflow: scroll; }
/* 
code { white-space: nowrap; }
 */

#site-nav { position: relative; padding: 5px; background: #181f32; }
#section-nav { margin: 0; list-style-type: none; column-count: 4; }
#section-nav li { margin: 0em 1em; }
#section-nav a { color: white; }
#section-nav a:visited { color: white; }
#section-nav a:hover { color: #c9d7e8; position: static; }
#location { background: white; margin-bottom: 1em;}
#content-group > div { margin-bottom: 2em; }

@keyframes show-scale
{
	0% { opacity: 0; transform: scale(0.25); }
	100% { opacity: 1; transform: scale(1); }
}
.scaler
{
	animation-name: show-scale;
	animation-duration: 1s;
	animation-fill-mode: backwards;
	position: relative;
}
@keyframes show-slide
{
	0% { left: -125%; }
	100% { left: 0%; }
}
.slider
{
	animation-name: show-slide;
	animation-duration: 0.5s;
	animation-fill-mode: backwards;
	position: relative;
}
@keyframes show-grow
{
	0% { max-height: 0vh; border-left-color: rgba(24,31,50,1); }
	100% { max-height: 100vh; border-left-color: rgba(24,31,50,0); }
}
.grower
{
	animation-name: show-grow;
	animation-duration: 2s;
	animation-fill-mode: backwards;
	position: relative;
	overflow: hidden;
	border-left: thick solid rgba(24,31,50,0);
}

.logo { float: left; width: 192px; margin: 5px 20px; }
.content { background: white; padding: 1em; border-radius: 0 20px 20px 0; margin-right: 232px; border-bottom: thick solid #c9d7e8; }
.ctime { color: #c9d7e8; font-size: small; font-weight: normal; padding-left: 1em; white-space: nowrap; }
.comments { background: white; padding: 1em; border-radius: 0 20px 20px 0; margin-right: 232px; display: none; }
.comment-count { }
.comment-count::before { content: "\1f4ac  "; }
.tag { margin-right: 1em; }
.tag::before { content: "\00a7  "; }
.highlights
{
	position: relative;
	width: 212px;
	float: right;
	padding: 10px;
	background: #c9d7e8;
	z-index: 100;
}
.townsquare
{
	border: thin dotted #181f32;
}
.poll
{
	width: 100%;
	height: 12em;
	border: 0;
}

.footer
{
	position: absolute;
	text-align: center;
	font-size: small;
	color: gray;
	bottom: 0px;
	width: 98%;
	z-index: 10;
}