a#nowgobang
{
	display: block;
	position: absolute;
	top: 0.5px;
	left: 114px;
	width: 109px;
	height: 61px;
	padding: 0;
	margin: 0;
	text-decoration: none;
	background-image: url(/visuals/nowgobang-badge.png);
	background-position: 0 0;
}

a#nowgobang:hover { background-position: 0 -61px; }

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (   -moz-min-device-pixel-ratio: 1.5),
only screen and (        min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi)
{
	a#nowgobang
	{
		background-image: url(/visuals/nowgobang-badge_hr.png);
		background-position: 0 0;
		-webkit-background-size: 109px 122px;
		-moz-background-size: 109px 122px;
		background-size: 109px 122px;
	}
}

@media screen and (max-width: 740px) { /* nav collapsed */
	#menuButton { display: block; }
	#menuToggle + nav {
		visibility: hidden;
		opacity: 0;
		-webkit-transition: visibility 0s, opacity 0.25s linear;
		-moz-transition: visibility 0s, opacity 0.25s linear;
		-o-transition: visibility 0s, opacity 0.25s linear;
		transition: visibility 0s, opacity 0.25s linear;
	}
	#menuToggle:checked + nav
	{
		position: absolute;
		right: 7px;
		top: 51px;
		width: 200px;
		z-index: 2;
		border: 1px #eee solid;
		border-radius: 1px;
		box-shadow: 0 1px 3px rgba(0,0,0,0.05);
		visibility: visible;
		opacity: 1; 
	}
	nav li,
	nav li.gap
	{
		display: block;
		float: none;
		padding: 0.8em 0.5em 0.5em 1.25em;
		margin: 0;
		border-bottom: 1px #eee solid;
		background-color: #fff;
	}
	nav li a { display: block; margin: 0; padding: 0; }
	nav li:active { background-color: #9be0ef; }
	#menuFallback { width: 20px; height: 16px; vertical-align: bottom; }
	a#nowgobang { left: 107px; }
}

main img
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 100%;
}

main p.intro { color: #383838; }

article
{
	margin: 0 0 3em 0;
	padding: 0;
	position: relative;
/*
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-word;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
	-webkit-text-rendering: optimizeLegibility;
	text-rendering: optimizeLegibility;
*/
}

article time
{
	display: block;
	white-space: nowrap;
	margin: -0.8em 0.1em 0.2em 0.1em;
	padding: 0;
	font-size: 12px;
	text-align: right;
}
article.full time { margin: -1.8em 0.1em 1.8em 0.1em; }

article div.vertical-percentage
{
	position: absolute;
	font-size: 11px;
	color: #9adeed;
	white-space: nowrap;
	left: -83px;
	width: 51px;
	text-align: center;
	line-height: 0;
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

main article h1
{
	clear: both;
	font-size: 28px;
	line-height: 38px;
}
main article.post h1
{
	padding: 0 3em 8px 0;
	border-bottom: 1px #eee solid;
}
main article.full h1
{
	padding: 0 1em 0 0;
}

main article h1 a { color: inherit; text-decoration: none; }
main article h1 a:hover,
main article h1 a:focus
{
	color: #d2383d;
	text-decoration: underline;
	-webkit-text-decoration-color: #62a9b9;
	-moz-text-decoration-color: #62a9b9;
	text-decoration-color: #62a9b9;
}
main article h1 a:active
{
	color: #62a9b9;
	text-decoration: underline;
	-webkit-text-decoration-color: #f79d3d;
	-moz-text-decoration-color: #f79d3d;
	text-decoration-color: #f79d3d;
}

main ul.post-list-compact
{
	margin: 2.5em 0 1em 0;
	padding: 0 0 0 1.1em;
	list-style: none;
}
main ul.post-list-compact li
{
	clear: both;
	padding-bottom: 1.5em;
	position: relative;
}
main ul.post-list-compact li:before
{
	position: absolute;
	left: -1.1em;
	display: block;
	content: '\002022';
	font-weight: 700 !important;
	color: #99c7d9;
}

main ul.post-list-compact h2
{
	font-size: 19px;
	line-height: 24px;
	color: #d2383d;
	margin: 0 !important;
	padding: 0 3em 3px 0 !important;
	border-bottom: 1px #eee solid;
}
main ul.post-list-compact h2 a { color: inherit; text-decoration: none; }
main ul.post-list-compact h2 a:hover,
main ul.post-list-compact h2 a:focus
{
	color: #d2383d;
	text-decoration: underline;
	-webkit-text-decoration-color: #62a9b9;
	-moz-text-decoration-color: #62a9b9;
	text-decoration-color: #62a9b9;
}
main ul.post-list-compact h2 a:active
{
	color: #62a9b9;
	text-decoration: underline;
	-webkit-text-decoration-color: #f79d3d;
	-moz-text-decoration-color: #f79d3d;
	text-decoration-color: #f79d3d;
}
main ul.post-list-compact time
{
	display: block;
	float: right;
	white-space: nowrap;
	margin: 0.55em 0.1em 0.2em 1em;
	padding: 0;
	font-size: 12px;
	text-align: right;
	width: 10em;
}
main ul.post-list-compact p
{
	color: #555;
	text-indent: 0;
	font-style: italic;
	font-family: 'Lato', sans-serif;
	margin: 0.25em 0 0.5em 0.25em;
}

.dropcaps
{
	float: left;
	font-family: 'Lato', sans-serif;
	font-size: 49px;
	line-height: 39px;
	margin: 0;
	padding: 0 0.2em 0 0.1em;
	color: #a62850;
	opacity: 0.99;
}

.dropcaps2
{
	float: left;
	font-family: 'Lato', sans-serif;
	font-size: 46px;
	line-height: 43px;
	margin: 0;
	padding: 0 0.2em 0 0.1em;
	color: #925b6d;
}

.dropcaps.round
{
	display: block;
	float: left;
	vertical-align: top;
	box-sizing: border-box;
	color: #F76D40;
	height: 82px;
	width: 82px;
	border: 1px #F76D40dd solid;
	line-height: 80px;
	font-size: 54px;
	text-align: center;
	border-radius: 50%;
	padding: 0;
	margin: 0 0.2em 0 0;
	font-family: 'Nunito Sans', sans-serif;
	opacity: 1.0;
}

cite { font-style: italic; }

article cite.small { font-size: 90%; }

article figure
{
	margin: 1.25em 0;
	padding: 0;
}

article figure img
{
	display: block;
	margin: 0 auto;
	padding: 0;
	max-width: 100%;
	height: auto;
}

article figure.img
{
	margin: 2.5em auto;
}

article figure.img img
{
	padding: 12px;
	background-color: #fff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 1px;
}
article figure.img.borderless img { padding: 0; }
article figure.img.transparent img { background-color: transparent; padding: 0; margin: 1.5em auto; }
article figcaption
{
	font-size: 14px;
	color: #555;
	padding: 0;
	margin: 1.5em 12px;
}
article figcaption.center { text-align: center; }
article figcaption cite { margin-left: 0.3em; }

article figcaption cite::before { content: '\0000B7'; margin-right: 0.3em; }

article figcaption cite.plain::before,
article figcaption p > cite::before,
article figcaption br + cite::before { content: ''; display: none; margin-right:0; }

article.indent-p p { text-indent: 0.8em; }
article.indent-p p.noindent { text-indent: 0; }

article p.lead
{
	color: #555;
	text-indent: 0;
	font-style: italic;
	font-family: 'Lato', sans-serif;
	margin: 0 1em 2em 2em;
}
article p.lead.index { margin: 0 0 0 1em; }

article p.more { margin: 1.5em 0 -1.5em 0.4em; }
article p.more a { text-decoration: none; }
article p.more a:hover,
article p.more a:focus,
article p.more a:active { text-decoration: underline; }

main p.note {
	color: #666667;
	padding: 0 1em 0 1.9em;
	border-left: 1px rgba(155,224,239,0.7) solid;
	margin-bottom: 1.5em;
	margin-left: 0.2em;
	text-indent: 0;
}

article pre
{
	font-size: 14px;
	line-height: 18px;
	padding: 1em 0.75em 1em 2em;
	margin: 1.5em 0.5em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 100%;
	overflow: auto;
}
article pre.quote { padding: 1em 0.5em; }

blockquote
{
	margin: 1.5em;
	padding: 0;
	color: #555;
	text-indent: 0;
	font-style: italic;
	font-family: 'Lato', sans-serif;
}
blockquote em { font-style: normal; }


@media screen and (min-width: 540px) {
	blockquote.bar {
		margin: 1.5em 1.5em 1.5em 0.8em;
		padding: 0 0 0 2.95em;
		border-left: 10px solid #e3e3e3;
	}
}


blockquote cite { display: block; margin: 0.5em 0 0 1em; text-align: right; font-size: 90%; }

blockquote.straight {
	font-family: 'Nunito Sans', sans-serif;
	font-style: normal;
	color: #535353;
	margin: 1.5em;
	padding: 0;
	border-left: none;
}
blockquote.straight cite,
blockquote.straight em {
	font-family: 'Lato', sans-serif;
	font-style: italic; 
	color: #5b5b5b;
}
@media screen and (min-width: 400px) {
	.justify { text-align: justify; }
}

article p.blockquote-cite {
	margin: 0 1.5em 1.5em 2.5em;
	text-indent: 0;
	font-style: italic;
	font-size: 14px;
	text-indent: 0;
}

@media screen and (min-width: 540px) {
	article p.blockquote-cite.bar
	{
		margin: 0 1.5em 1.5em 0.8em;
		padding: 0 0 0 2.95em;
		border-left: 10px solid transparent;
	}
}


main article p[rel=author]
{
	text-indent: 0;
	margin-top: 2.75em;
	color: #555;
}

.lato { font-family: 'Lato', sans-serif; }

.mark { color: teal; }
.mark2 { color: darkred; }

article p.sep-line
{
	width: 200px;
	text-indent: 0;
	font-size: 6px;
	line-height: 6px;
	margin: 4em auto;
	border-bottom: 1px solid rgba(155,224,239,0.7);
}

main ul.blue-dot,
main ul.grey-dot
{
	list-style: none;
	padding-left: 1em;
}
main ul.blue-dot li,
main ul.grey-dot li
{
	padding-left: 1.25em;
	margin-left: 0;
}
main ul.blue-dot li:before,
main ul.grey-dot li:before
{
	display: inline-block;
	content: '\002022';
	font-weight: 700 !important;
	vertical-align: text-bottom;
	margin-left: -1.25em;
	width: 1.25em;
}
main ul.blue-dot li:before { color: #99c7d9; }
main ul.grey-dot li:before { color: #84a7ae; }

main .pseudolink
{
	text-decoration: underline;
	-webkit-text-decoration-style: dotted;
	-moz-text-decoration-style: dotted;
	text-decoration-style: dotted;
	-webkit-text-decoration-color: #ec3b42;
	-moz-text-decoration-color: #ec3b42;
	text-decoration-color: #ec3b42;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	transition: all 0.25s ease;
	cursor: help;
	display: inline-block;
	margin: 0;
	padding: 0;
	text-indent: 0;
	position: relative;
	overflow: visible;
}
main u.pseudolink:hover,
main u.pseudolink:focus
{
	-webkit-text-decoration-color: #62a9b9;
	-moz-text-decoration-color: #62a9b9;
	text-decoration-color: #62a9b9;
}
main .pseudolink:hover:before,
main .pseudolink:focus:before,
main .pseudolink:active:before
{
	display: block;
	position: absolute;
	content: attr(data-info);
	padding: 4px 6px;
	background-color: #f2fbfd;
	border: 2px #99c7d9 solid;
	border-radius: 4px;
	box-shadow: 0 2px 3px rgba(0,0,0, 0.3);
	width: 420px;
	max-width: 50vw;
	z-index: 2;
	font-size: 92%;
	top: 1.66em;
	left: 0.25em;
	text-indent: 0;
	white-space: pre-wrap;
	color: #202020;
}

main .pseudolink.w250px:hover:before,
main .pseudolink.w250px:focus:before,
main .pseudolink.w250px:active:before
{ width: 250px; }

main .nunito { font-family: 'Nunito Sans', sans-serif; }

p.rss svg.rss g,
span.rss svg.rss g { fill: #9adeed; }
p.rss:hover svg.rss g,p.rss:focus svg.rss g,
span.rss:hover svg.rss g,span.rss:focus svg.rss g{ fill: #F2890A; }
p.rss:active svg.rss g,
span.rss:active svg.rss g{ fill: #f73d44; }

span.rss { margin-left: 0.3em; }
p.intro.rss { margin-bottom: 0 !important; }
p.tags
{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	margin: 0.2em 0 1.8em 0 !important;
	max-width: 470px;
}
p.tags span { display: inline-block; }
p.tags span.title { white-space: nowrap; margin-right: 0.2em; min-width: 5.2em; }

p.postRangeIntro { margin-bottom: 1.8em; }


main #postsNav
{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
	margin: 2.5em 0;
	padding: 0;
}

main #postsNav a
{
	display: inline-block;
	text-decoration: none;
	vertical-align: top;
	white-space: nowrap;
}
main #postsNav a span
{
	display: inline-block;
	margin-top: 12px;
}

main #postsNav a svg { display: inline-block; height: 46px; width: 46px; vertical-align: top; margin: 0 0.5em; }

main #postsNav a[disabled] { color: #999 !important; pointer-events: none; opacity: 0.275; }

main #postsNav a { color: #9adeed; }
main #postsNav a:hover,
main #postsNav a:focus { color: #f29e39; }
main #postsNav a:active { color: #ff454b; }

main #postsNav a span { color: #222; }
main #postsNav a:hover span,
main #postsNav a:focus span { color: #F2890A; }
main #postsNav a:active span { color: #f73d44; }

main .smiley
{
	display: inline-block !important;
	width: 1.5em !important;
	height: 1.5em !important;
	border-radius: 50% !important;
	background-color: #f6ef9b !important;
	border: 1px #ebe48e solid !important;
	white-space: nowrap !important;
	font-size: 90% !important;
	font-style: normal !important;
	padding: 0 0 0 0.01em !important;
	margin: 0 0.05em !important;
	line-height: 1.5em !important;
	text-align: center !important;
	vertical-align: top !important;
	box-sizing: border-box !important;
	box-shadow: 0 1px 2px rgba(34,34,34, 0.215), inset 0 -2px 2px #ebe48e;
}
main .smiley.grey
{
	background-color: #e8e8e8 !important;
}

main p.postNav-sep
{
	width: 25%;
	text-indent: 0;
	font-size: 6px;
	line-height: 6px;
	margin: 5em auto 4em auto;
	border-bottom: 1px solid #eee;
}

.textglitch {
	color: #333;
	text-shadow: 2px 0 0 rgba(0,255,255, 0.7), -2px 0 0 rgba(243,88,76, 0.5);
	-webkit-animation: kf_textglitch 8s infinite linear;
	-moz-animation: kf_textglitch 8s infinite linear;
	animation: kf_textglitch 8s infinite linear;
}

@keyframes kf_textglitch {
0% { text-shadow: 2px 0 1px rgba(0,255,255, 0.55), -2px 0 0 rgba(243,88,76, 0.5) }
5% { text-shadow: 2px 0 1px rgba(0,255,255, 0.59), -1px 0 1px rgba(243,88,76, 0.400.05) }
10% { text-shadow: 2px 0 1px rgba(0,255,255, 0.49), -2px 0 1px rgba(243,88,76, 0.50) }
15% { text-shadow: 1px 0 1px rgba(0,255,255, 0.530.05), -1px 0 1px rgba(243,88,76, 0.440.05) }
20% { text-shadow: 2px 0 1px rgba(0,255,255, 0.53), -1px 0 1px rgba(243,88,76, 0.500.05) }
25% { text-shadow: 2px 0 1px rgba(0,255,255, 0.46), -1px 0 1px rgba(243,88,76, 0.490.05) }
30% { text-shadow: 2px 0 1px rgba(0,255,255, 0.58), -2px 0 1px rgba(243,88,76, 0.49) }
35% { text-shadow: 2px 0 1px rgba(0,255,255, 0.64), -2px 0 1px rgba(243,88,76, 0.46) }
40% { text-shadow: 1px 0 1px rgba(0,255,255, 0.540.05), -2px 0 1px rgba(243,88,76, 0.53) }
45% { text-shadow: 2px 0 1px rgba(0,255,255, 0.48), -1px 0 1px rgba(243,88,76, 0.470.05) }
50% { text-shadow: 2px 0 1px rgba(0,255,255, 0.55), -2px 0 0 rgba(243,88,76, 0.5) }
55% { text-shadow: 2px 0 1px rgba(0,255,255, 0.64), -1px 0 1px rgba(243,88,76, 0.590.05) }
60% { text-shadow: 1px 0 1px rgba(0,255,255, 0.550.05), -2px 0 1px rgba(243,88,76, 0.50) }
65% { text-shadow: 2px 0 1px rgba(0,255,255, 0.56), -1px 0 1px rgba(243,88,76, 0.440.05) }
70% { text-shadow: 2px 0 1px rgba(0,255,255, 0.51), -2px 0 1px rgba(243,88,76, 0.42) }
75% { text-shadow: 1px 0 1px rgba(0,255,255, 0.580.05), -1px 0 1px rgba(243,88,76, 0.590.05) }
80% { text-shadow: 2px 0 1px rgba(0,255,255, 0.46), -2px 0 1px rgba(243,88,76, 0.57) }
85% { text-shadow: 1px 0 1px rgba(0,255,255, 0.610.05), -2px 0 1px rgba(243,88,76, 0.49) }
90% { text-shadow: 2px 0 1px rgba(0,255,255, 0.55), -2px 0 1px rgba(243,88,76, 0.59) }
95% { text-shadow: 1px 0 1px rgba(0,255,255, 0.510.05), -1px 0 1px rgba(243,88,76, 0.600.05) }
100% { text-shadow: 2px 0 1px rgba(0,255,255, 0.55), -2px 0 0 rgba(243,88,76, 0.5) }
}

@media print {
	article.indent-p p { text-indent: 0; }
	article div.vertical-percentage { display: none; }
}