/*
 * Custom Fonts
 */
@font-face {
  font-family: 'Avenir', 'Average';
  font-style: normal;
  font-weight: 400;
/*
  src: local('Average'), local('Average-Regular'), url(https://waps.l3s.uni-hannover.de/live/oe_/https://brianschrader.com/bin/average.ttf) format('truetype');
 */
}

/*
*
* Begin Tag Styling
*
*/


html {
	height: 100%; /*required for all browsers*/
}

body {
	font-family: 'Avenir', 'Helvetica', 'Average', serif;
	text-align: justify;
	background-color:#F4F4F4;
	line-height:1.7;
	margin:auto;
}

img { border:none; }

/* p { text-indent:20px; } */

h1, h2, h3 {
	/* font-family:'Average', serif; */
	font-weight:300;
}
h1 {
	font-size:18pt;
	margin-bottom:0px;
}

h2 {
	font-size:16pt;
}

blockquote {
	margin: 1em 3em;
	color: #585858;
	border-left: 2px solid #999;
	padding-left: 1em;
}

ul p {
  text-indent:0px;
}

details {
  background-color: #ddd;
  padding: 8px 16px;
  border-radius: 6px;
  box-shadow: 3px 3px 3px #ccc;
}

details p {
  text-indent: 0px;
}

/*
*
* Begin ID Styling
*
*/

.site-title {
  font-size:1.5em;
  display:block;
}

.author-tag {
  font-size:10pt;
  font-style:italic;
}

#content {
	margin:0px;
	padding:0px;
}

#post-list {
	margin: auto;
	max-width:825px;
  overflow:hidden;
}

#post, #first-post {
	margin-top: -3px;
	padding: 3%;

	border-right: 0px; /* Don't forget to modify to the right border. */
	background-image:
	    -webkit-gradient(linear, 0 0, 0 100%, from(#4068B8), to(transparent));
	background-image:
	    -webkit-linear-gradient(180deg, transparent, #4068B8, transparent);
	background-image:
	    -moz-linear-gradient(180deg, transparent, #4068B8, transparent),
	    -moz-linear-gradient(180deg, transparent, #4068B8, transparent);
	background-image:
	    -o-linear-gradient(180deg, transparent, #4068B8, transparent),
	    -o-linear-gradient(180deg, transparent, #4068B8, transparent);
	background-image:
   		linear-gradient(90deg, transparent, #4068B8, transparent),
   		linear-gradient(90deg, transparent, #4068B8, transparent);
	-moz-background-size: 80% 3px; /* This get flipped. */
	background-size: 85% 3px; /* This get flipped. */
	background-position: bottom; /* The last argument gets flipped. */
	background-repeat: no-repeat;
}

#article-title {
	text-align:center;
}

.show-on-mobile {
  display:none !important;
}

/*
*
* Begin Class Styling
*
*/

.post {
	margin-top: -3px;
	padding: 3%;
	/*
	border-right: 0px; /* Don't forget to modify to the right border.
	background-image:
	    -webkit-gradient(linear, 0 0, 0 100%, from(#4068B8), to(transparent));
	background-image:
	    -webkit-linear-gradient(180deg, transparent, #4068B8, transparent);
	background-image:
	    -moz-linear-gradient(180deg, transparent, #4068B8, transparent),
	    -moz-linear-gradient(180deg, transparent, #4068B8, transparent);
	background-image:
	    -o-linear-gradient(180deg, transparent, #4068B8, transparent),
	    -o-linear-gradient(180deg, transparent, #4068B8, transparent);
	background-image:
   		linear-gradient(90deg, transparent, #4068B8, transparent),
   		linear-gradient(90deg, transparent, #4068B8, transparent);
	-moz-background-size: 80% 3px; /* This get flipped. */
	background-size: 85% 3px; /* This get flipped. */
	background-position: bottom; /* The last argument gets flipped.
	background-repeat: no-repeat;
	*/
}

.article-title {
	text-align:center;
}

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

.link {
	margin-left:1em;
	background-color:#E6E6E6; /* Kind of a darker grey */
	color:#484848; /* Dark gray */
	font-style:italic;
	padding-left:15pt;
	padding-right:15pt;
}

.post-divider {
	height:10pt;
	background: url(https://waps.l3s.uni-hannover.de/live/oe_/http://itsinteresting.net/images/misc/horizontal-divider.png) no-repeat scroll center;
	background-size:150pt, 30pt;
	border:none;
}

.footnote {
  font-size:small;
}

/*
 * Dynamic Image Styling
 */
 #post img, .post img {
 	/*
 	 * Generic Image Styling. Unless something more detailed is needed,
 	 * this is the default image styling.
 	 * Centered image that 'fills' the post width.
 	 */
	/* Adaptive */
 	border:1px;
	padding:1px 8px;
	display:block;
	width:auto;
	height:auto;
 	/* Max sizing */
 	max-width:90%;
}

.image-right, .image-left, .image-center {
	max-width:700px;
	max-height:600px;
	width:80%;
	height:auto;
  }
.image-right {
	float:right;
	padding:1px;
	margin:15px;
}
.image-left {
	float:left;
	padding:1px;
	margin:15px;
}
.image-center {
	border:1px;
	padding:1px;
	margin-top:10px;
	margin-bottom:10px;
	margin-left:auto;
	margin-right:auto;
	display:block;
}
.image-rounded {
  border-radius: 50%;
  /* Remove other style padding that messes with circle border. */
  padding: 0px !important;
}

.shadow {
  box-shadow: 1px 1px 2px #ccc;
}

.image-container {
  float:right;
  padding-left:5px;
  text-align:center;
}

.image-container caption {
  font-style:italic;
}

.small {
	width:400px;
}

.xsmall {
	width:200px;
}

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


/*
 * Depricated image styling. Use .image-center, .image-left, .image-right
 */
.body-image-right{	/* Deprecated */
	float:right;
	padding:1px;
	margin:15px;
}
.body-image-left{	/* Deprecated */
	float:left;
	border:1px;
	padding:1px;
	margin:15px;
}
.body-image-center {	/* Deprecated */
	border:1px;
	padding:1px;
	margin-top:10px;
	margin-bottom:10px;
	margin-left:auto;
	margin-right:auto;
	display:block;
}
.page-sectionTitle {
	font-family:'Average', sans-serif;
	margin-right:auto;
	border-right:3px solid gray;
	border-bottom:1px solid gray;
	text-align:left;
	width:auto;
	padding:1%;
	font-size:26pt;
}

/* New Nav Styling */

.nav-container {
	background-color: #454545;
	color:#FFFFFF;
	z-index: 100;
  width:100%;
  line-height: 1;
}

.nav {
	margin: auto;
	max-width:825px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.nav .nav-item {
	position:relative;
	display:inline-block;
	margin: 0.75rem;
	font-size:13.5pt;
  vertical-align: middle;
}

/* Home Page Styles */

.bars {
	margin: auto;
	max-width: 925px;
}

.bars .main-bar {
  overflow: hidden;
  display: inline-block;
  width: 80%;
  vertical-align: top;
}

.bars .side-bar {
	margin: auto;
  display: inline-block;
  width: 20%;
  float: right;
  text-align: left;
  vertical-align: top;
/*
  padding-top: 6rem;
 */
}

.side-bar h4,h5,h6 {
  margin-bottom: 8px;
}

.side-bar ul {
  font-size: 92%;
  margin-top: 0px;
  list-style: none;
  padding-inline-start: 0px;
}

.side-bar ul ul {
  padding-inline-start: 1rem;
}

.side-bar div.tags {
  font-size: 92%;
  margin-top: 0px;
  text-align: left;
}

.side-bar ul > li {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.side-bar a {
  text-decoration: none;
  color: #4068B8;
}

.footer {
	margin: auto;
	max-width: 925px;
  text-align:center;
  margin-bottom: 2rem;
}

/* Begin Link Styling */

.nav a:link {color:white; text-decoration:none;}
.nav a:visited {color:white; text-decoration:none;}
.nav a:hover {color:#7EA5E0; text-decoration:none;}
.nav a:active {color:#4068B8; text-decoration:none;}

#article-content a:link {color:#4068B8; text-decoration:none;}
#article-content a:visited {color:#4068B8; text-decoration:none;}
#article-content a:hover {color:#4068B8; text-decoration:none;}
#article-content a:active {color:#4068B8; text-decoration:none;}

#article-title a:link {color:black; text-decoration:none;}
#article-title a:visited {color:black; text-decoration:none;}
#article-title a:hover {color:#4068B8; text-decoration:none;}
#article-title a:active {color:#4068B8; text-decoration:none;}

.article-title a:link {color:black; text-decoration:none;}
.article-title a:visited {color:black; text-decoration:none;}
.article-title a:hover {color:#4068B8; text-decoration:none;}
.article-title a:active {color:#4068B8; text-decoration:none;}

.article-content a:link {color:#4068B8; text-decoration:none;}
.article-content a:visited {color:#4068B8; text-decoration:none;}
.article-content a:hover {color:#4068B8; text-decoration:none;}
.article-content a:active {color:#4068B8; text-decoration:none;}

::selection {
	background: #7EA5E0; /* Safari */
	}
::-moz-selection {
	background: #7EA5E0; /* Firefox */
}


/* Progress Bars */

.progress-bar {
  margin: auto;
  width: calc(100% - 2px);
  border: 1px solid #ccc;
  border-radius: 3px;
}

.progress-bar .progress {
  border-radius: 3px;
  background-color: #454545;
  text-align:center;
  height: 6px;
}

.progress-bar .progress-pine-blog-release {
  width: 25%;
}

/* Going Indie Promo */

.promotion {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px;
  margin: 8px 8px 8px 0px;
  border: 1px dashed #ccc;
  text-align: left;
}

.promotion img.promotion-cover {
  flex: 0 0 50px;
  margin-right: 12px;
  width: auto;
  height: auto;
  max-width: 100px;
}

.promotion div.promotion-body {
  flex: 1;
}

.promotion p {
  text-indent: 0px;
  text-align: left;
}

.promotion .link-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  text-align: center;
}

.promotion .link-bar a {
  flex: 1;
}

.promotion a {
  text-decoration: none;
  color: initial;
}

.promotion content {
  font-size: small;
}

.promotion .disclaimer {
  font-size: small;
  font-style: italic;
}

/**
  Newsletter Promo
 */

.newsletter-callout a.subscribe {
  font-size: small;
  display: block;
  background-color: #575757;
  color: white;
  border-radius: 5px;
  padding: 0.2rem 0.7rem;
  margin-top: 0.5rem;
  text-decoration: none;
}

.newsletter-callout a.subscribe:hover {
  background-color: #454545;
  box-shadow: inset 0px 0px 2px 2px rgba(0, 0, 0, 0.05);
}

.hide {
  display: none;
}
.histogram {
  width: 100%;
  overflow-x: scroll;
}

.rtl {
  direction: rtl;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-0.5 * 1.5rem);
  margin-right: calc(-0.5 * 1.5rem);
}

.row .col-6 {
  vertical-align: top;
  flex: 0 0 auto;
  width: 50%;
}

.row .col-12 {
  vertical-align: top;
  flex: 0 0 auto;
  width: 100%;
}

/*
  Search
*/

.pagefind-ui__search-input {
  width: 100%;
  height: 1.25rem;
  margin-top: 0.3rem;
}

.pagefind-ui__search-clear {
  display: none;
}

.pagefind-ui__result {
  border-bottom: 1px solid #ccc;
  font-size: small;
}

.pagefind-ui__result-thumb {
  display: none;
}

.pagefind-ui__result-title {
  margin-top: 0.25rem;
  margin-bottom: 0.05rem;
}

.pagefind-ui__result-excerpt {
  margin-top: 0;
  margin-bottom: 0;
  font-size: smaller;
}

p.pagefind-ui__message {
  font-size: small;
  margin: 0;
  text-align: right;
}

ol.pagefind-ui__results {
  list-style-type: none;
  margin: 0;
  margin-block-start: 0em;
  padding-inline-start: 0;
}