/*
 * Colours:     plum   orange green  blue   red
 * (very light) aaf254 aaf254 aaf254 92bfff ff4949
 * (light)      8ae234 8ae234 8ae234 729fcf ef2929
 * (medium)     73d216 73d216 73d216 3465a4 cc0000
 * (dark)       4e9a06 4e9a06 4e9a06 204a87 a40000
 */
body
{
	text-align: center;
	color: black;
	font-family: Arial, sans-serif;
	background: #d3d7cf;
/*	background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(0, 0, 255, 0.2) 33%, white 33%, white 67%, rgba(255, 0, 0, 0.2) 33%) repeat scroll 0 0; */
	margin: 0;
	padding: 0;
	word-wrap: break-word;
}

/* Desktop */
@media only screen and (min-width: 1200px) {
	body {
		word-wrap: normal;
	}
	
}

div.main div.article div.body, div.side div.body, div.side div.contact
{
	border: solid 1px #babdb6;
	background: #eeeeec;
}

div.side
{
	float: right;
}

div.articleListItem
{
	padding-top: 3em;
}

div.articleListItem:first-child
{
	padding-top: 0em;
}

ul.footnotes
{
	font-size: 0.75rem;
	list-style-type: none;
}

ul.footnotes li a
{
	vertical-align: super;
	padding: 10;
}

ul.footnotes li p a
{
	vertical-align: baseline;
}

p
{
	font-family: Arial, sans-serif;
	margin-top: 0;
	margin-bottom: 1em;
	line-height: 140%;
}

dd, dt
{
	font-family: Arial, sans-serif;
	line-height: 140%;
}

li p
{
	margin-bottom: 0.3em;
	margin-top: 0.3em;
}

div.comment div.article div.body li p
{
	margin-bottom: 0em;
	margin-top: 0em;
	padding-top: 0em;
	padding-bottom: 0em;
}

div.comment div.article div.body ul
{
	padding-bottom: 1em;
}

div.addComment p
{
	font-family: Arial, sans-serif;
}

div.like p
{
	margin-bottom: 0em;
}

div.credits
{
	font-size: 0.75rem;
	margin-bottom: 1em;
}

div.credits p
{
	list-style-type: circle;
	display: list-item;
	margin-bottom: 0;
	margin-left: 2em;
	padding-top: 0;
	padding-bottom: 0;
}

span.strike_through
{
	text-decoration: line-through;
}

pre
{
	margin: 0.5em;
	border: solid 1px #babdb6;
	overflow: auto;
	font-size: 1rem;
}

p, pre, h1, h2, h3, h4, div.articleMetaData, div.commentMetaData, dl
{
	padding: 0.25em;
}

div, ol, li, ul, table
{
	margin: 0;
	padding: 0;
}

dl
{
	font-size: smaller;
}

dt
{
	font-weight: bold;
	font-style: italic;
	margin-top: 1em;
}

li
{
	margin-left: 2em;
}

/* responsive */
div.main,
div.side,
div.wide
{
	width: 100%;
	min-width: 320px;
	text-align: left;
	margin: 0 auto;
}

div.side
{
	font-size: 0.75rem;
}

.main .article,
.side .body {
	padding: 0;
}

.side .body {
	display: none;
}

.articleListItem:not(.fridayNightDinner) > * {
	padding-left: 30px;
	padding-right: 30px;
}

div.wide
{
	background-color: #2e3436;
	color: #eeeeec;
	padding: 10px 0;
}

div.contact
{
	margin-bottom: 1em;
	padding-top: 0.5em;
}

div.contact div.icons
{
	float: left;
}

div.icons
{
	width: 100%;
	text-align: center;
}

div.icon
{
	display: inline-block;
}

div.icon a img
{
	width: 32px;
	height: 32px;
}

div.email
{
	text-align: center;
	margin-bottom: 0.5em;
}

div.email img
{
	width: 40px;
	height: 40px;
	margin: 0px;
	margin-right: 1em;
	display: inline;
	vertical-align: middle;
}

div.contact
{
	margin-top: 0;
}

div.side .amazon, div.side .patreon
{
	display: none;
}

@media only screen and (max-width: 542px) { /* 542 */
	div.main
	{
		top: 95px;
	}

	div.contact
	{
		text-align: center;
		padding-bottom: 5px;
	}

	div.icons
	{
		display: inline-block;
		margin-top: 0px;
	}

	div.contact div.icons
	{
		float: none;
	}
}

/* Desktop */
@media only screen and (min-width: 1200px) {
	div.full, div.top
	{
		width: 1200px;
		text-align: left;
		margin: 0 auto;
		clear: both;
	}

	div.main
	{
		width: 865px;
		margin: 0 auto;
		padding-top: 10px;
		padding-bottom: 10px;
		float: left;
	}

	div.side .body, div.side .contact, div.side .amazon, div.side .patreon
	{
		display: block;
	}

	div.contact
	{
		margin-top: 0;
	}

	div.side
	{
		width: 325px;
		margin: 0 auto;
		padding-top: 10px;
		padding-bottom: 0;
		padding-left: 10px;
		font-size: 0.75rem;
	}

	div.contact div.icons
	{
		float: none;
		margin-left: 3em;
		margin-right: 3em;
	}

	div.icons
	{
		display: grid;
		width: initial;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	}

	div.wide
	{
		width: 1200px;
		margin: 0 auto;
		float: left;
	}
}



h1
{
	font-size: 166%;
	color: #eeeeec;
	background-color: #663399;
}

h2, h3
{
	font-size: 125%;
	color: #d3d7cf;
	background-color: #663399;
	clear: both;
}

hr
{
	clear: both;
}

div.comment h1, div.comment h2, div.comment h3
{
	background-color: transparent;
	color: #000;
}

div.addComment a
{
	color: #000000;
}

h1 a
{
	text-decoration: none;
	background-color: #663399;
	color: #eeeeec;
}

h2 a, h3 a, h4 a
{
	text-decoration: none;
	color: #eeeeec;
}

h1, h2, h3, h4
{
	margin-top: 0;
	margin-bottom: 0.5em;
}


div.articleMetaData, div.commentMetaData
{
	margin-top: 0.5em;
	margin-bottom: 1em;
	padding: 0;
	margin-right: 1.5em;
	font-size: 1.25rem;
	text-align: right;
}

div.commentMetaData
{
	display: flex;
	flex-direction: column;
}

div.articleMetaData div.Author
{
	font-style: italic;
}

a
{
	color: #204a87;
}

a:hover, div.addComment a:hover
{
	color: #3465a4;
}

h1 a:hover
{
	color: #d3d7cf;
}

div.commentList
{
	clear: both;
	margin-bottom: 1em;
}

div.commentListJoindin
{
	margin-bottom: 2em;
}

div.comment, div.addComment
{
	background-color: #729fcf;
}

div.LikesContent
{
	display: flex;
	flex-flow: wrap;
}

@media only screen and (min-width: 1200px)
{
	div.comment, div.addComment
	{
		margin-top: 0.5em;
	}
}



div.previewComment div.article div.body div.comment div.contact
{
	margin: 0.5em;
}

div.addComment form
{
	background: #eeeeec;
	border: 1px solid #92bfff;
	margin-bottom: 1em;
}

div.commentName
{
	font-weight: bold;
}

div.date
{
	font-style: italic;
}

div.comment div.article div.body div.contact
{
	border: 1px solid #92bfff;
}


img, iframe
{
	text-align: center;
	margin: 0 auto 1em;
	display: block;
}

/* Container needed to position the overlay. Adjust the width as needed */
.img-container, .img-container-right, .img-container-left {
	position: relative;
	padding: 0px;
	margin: 10px;
	margin-left: 2em;
	margin-right: 2em;
}

.img-container-right {
	float: right;
}

.img-container-left {
	float: left;
}

/* Make the image to responsive */
.img-container img {
  display: block;
  width: 100%;
  height: auto;
}

.img-container-right img, .img-container-left img {
  display: block;
  height: auto;
}

/* The overlay effect - lays on top of the container and over the image */
.img-container .img-overlay,
.img-container-right .img-overlay,
.img-container-left .img-overlay {
	position: absolute;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5); /* Black see-through */
	color: #f1f1f1;
	width: 100%;
	opacity: 1;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
}

.img-container-right .img-overlay, .img-container-left .img-overlay {
	bottom: 1em;
}

blockquote
{
	font-style: italic;
}

img.left
{
	float: left;
	margin: 0.5em 0.5em 0.5em 9px;
}

img.right
{
	float: right;
	margin: 0.5em 9px 0.5em 0.5em;
}

img.icon
{
	display: inline;
	border: 0;
	vertical-align: bottom;
}

div.addComment th
{
	text-align: left;
}

div.addComment td, div.addComment th
{
	vertical-align: top;
	padding-top: 0.5em !important;
	padding-bottom: 0.5em !important;
}

div.addComment table
{
	padding-right: 1em;
}

div.addComment table, div.addComment td, div.addComment textarea
{
	width: 100%;
}

div.addComment span.note
{
	font-size: 1rem;
	color: #555753;
}

div.addComment tr
{
	border-bottom: 1px;
	border-bottom-style: solid;
	border-bottom-color: #92bfff;
}

/* Desktop */
@media only screen and (max-width: 1199px) {
	#logo-image {
		display: block;
		float: none;
		margin: 0 auto 10px;
		width: 90%;
		max-width: 325px;
	}

	.header ul {
		list-style: none;
		display: flex;
		justify-content: center;
		font-size: 1.25rem;
	}

	.header li {
		padding: 0;
		margin: 0;
		display: inline-block;
	}
}

div.header ul li a
{
	color: #eeeeec;
	text-decoration: none;
	font-size: 1.25rem;
	display: inline-block;
	padding: 10px 20px;
}

div.header ul li a:hover
{
	text-decoration: underline;
}

#map {
	margin: 0 auto;
	width: 90% !important;
}

/* Desktop */
@media only screen and (min-width: 1200px)
{

	div.header
	{
		vertical-align: center;
	}

	div.header ul
	{
		position: relative;
		left: 0.42em;
		top:  3em;
	}

	div.header ul li
	{
		display: inline;
		margin: 0.3em;
		padding: 0em;
	}
}

div.footer
{
	font-size: 0.75rem;
	text-align: center;
}

div.footer a
{
	color: #eeeeec;
}

div.videoWrapper {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0px;
}

div.videoWrapper iframe {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

div.video p, div.figure p
{
	font-size: 0.75rem;
	text-align: center;
}

p.extend
{
	text-align: right;
}

div#dopplr-blog-badge
{
	margin: 0 auto;
	padding-top: 2em;
	padding-bottom: 2em;
}

ul.lifeline
{
	list-style-type: none;
}

ul.lifeline li div div.source
{
	color: #555753;
	text-align: right;
}

ul.lifeline li 
{
	margin: 0.5em;
	padding-top: 0.25em;
	padding-bottom: 1em;
	clear: both;
	border-top: dashed 1px #888a85;
}

ul.lifeline li:first-child
{
	border-top: none;
}

div.flickr div.center
{
	text-align: center;
}

div.flickr div.center img
{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

p.comment
{
	margin: 0;
	padding: 0;
}

span.hide
{
	display: none;
}

div.talkentry
{
	display: flex;
	justify-content: space-between;
}

div.counter
{
	font-size: small;
	color: grey;
	margin-right: 1em;
}

div.counter a
{
	color: grey;
	text-decoration: none;
}

div.counter a:hover
{
	text-decoration: underline;
}

div.commentErrors
{
	background-color: #ef2929;
}

div.commentOk
{
	background-color: #3465a4;
}

div.validationMessage
{
	margin-left: 1em;
	border-right: solid 1px #babdb6;
	background: #eeeeec;
}

div.validationMessage h1
{
	margin-bottom: 0;
}

div.lines
{
	padding: 1em 0;
}

div.line
{
	font-family: monospace;
	white-space: pre;
}

div.lineWithError
{
	font-family: monospace;
	white-space: pre;
	background-color: #ef2929;
	color: #eeeeec;
}

ul.errorMessages li
{
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

.footnote
{
	vertical-align: super;
	font-size: 0.8rem;
}

ul.footnotes li p
{
	display: inline;
}

code
{
	margin: 0;
	padding: 0 0.2em;
	border: solid 1px #babdb6;
}

div.talk-comments
{
	display: none;
}

div.rating
{
	font-size: smaller;
}

p.extend
{
	display: none;
}

div.articleListItem div.addComment table, div.articleListItem div.addComment td 
{
	border: none;
	font-size: 1rem;
	margin: 0;
	padding: 0.25em;
	padding-right: 1em;
	width: 100%;
}

div.articleListItem table
{
	font-size: 0.8rem;
	border: solid #888 1px;
	margin-top: 0em;
	margin-bottom: 2em;
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse;
	width: 95%;
}

div.articleListItem thead td
{
	border: solid #444 1px;
	vertical-align: bottom;
}

div.articleListItem tbody td
{
	border: solid #888 1px;
}

div.articleListItem table thead
{
	font-weight: bold;
}

div.articleListItem table p
{
	padding: 0px;
	margin: 1px;
}

div.patreon
{
	margin-top: 1em;
	padding: 4px;
	clear: both;
}

div.patreon img
{
	height: 32px;
}

div.credit
{
	font-size: 0.8rem;
	background-color: #eee;
	padding-bottom: 0.5em;
}

/* Slide Shows */
.mySlides {display: none}
div.slideshow-container div div img {
	vertical-align: middle;
	max-width: 803px;
	max-height: 600px;
	margin: 0px;
	display: initial;
}

/* Slideshow container */
.slideshow-container {
	max-height: 600px;
	position: relative;
	margin: auto;
	margin-bottom: 1em;
	background: grey;
	padding-left: 0;
	padding-right: 0;
}

/* Next & previous buttons */
div.slideshow-container .prev, div.slideshow-container .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -22px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
	background-color: rgba(0,0,0,0.2);
}

/* Position the "next button" to the right */
div.slideshow-container .next {
	right: 0;
	border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
div.slideshow-container .prev:hover, div.slideshow-container .next:hover {
	background-color: rgba(0,0,0,0.8);
}

/* Caption text */
div.slideshow-container div .text {
	color: #f2f2f2;
	font-size: 15px;
	padding: 8px 12px;
	position: absolute;
	bottom: 0px;
	width: 100%;
	text-align: center;
	background: rgba(0, 0, 0, 0.5);
	padding-left: 0;
	padding-right: 0;
}

/* Number text (1/3 etc) */
div.slideshow-container div div.numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	bottom: 0;
	right: 0;
}

/* Fading animation */
.fade {
	animation-name: fade;
	animation-duration: 1s;
}

@keyframes fade {
	from {opacity: .5}
	to {opacity: 1}
}