/*
 Theme Name:   Stargazer Child
 Description:  Child Theme for Stargazer; used by codefx.org
 Author:	   Nicolai Parlog
 License:	  Public Domain via Creative Commons' CC0
 Template:	 stargazer
 Version:	  1.0.0
 Text Domain:  stargazer-child
*/

@import url("../stargazer/style.min.css");
@import url("cta-header.css");

/* make main wrap slimmer */
.custom-background.layout-1c-narrow #container>.wrap {
	max-width: 800px;
}
/* remove empty space at top of the page on low res */
@media only screen and (max-width: 540px) {
	.custom-header #header {
		margin-bottom: 0;
	}
}
/* align responsive padding change with new wrap width */
@media only screen and (min-width: 800px) {
	.custom-background #header, .custom-background #main, .custom-background #sidebar-subsidiary {
		padding-left: 75px;
		padding-right: 75px;
	}
}
/* set font size properties for the theme */
html {
	font-size: 14px;
}
body p {
	line-height: 1.75;
	hyphens: none;
}
body .font-headlines {
	hyphens: none;
}

/* WIDGET BARS */

/* in header */
.header-bar-container {
	padding: 1.5rem 25px;
}
.header-bar-border {
	padding: 0 0 0.5rem;
	border-bottom: 2px solid;
	border-color: #3d3075;
}
@media only screen and (min-width:800px){
	.header-bar-container {
		padding-left: 75px;
		padding-right: 75px;
	}
}
/* remove header bar if
	it gets its second row (~ below 700 px width)
	and screen is short (~ below 750px height) */
@media only screen and (max-width:700px) and (max-height:750px){
	.header-bar-container {
		display: none;
	}
}
/* remove header bar if it gets its third row (~ below 400 px width) */
@media only screen and (max-width:400px){
	.header-bar-container {
		display: none;
	}
}

/* same bar goes into footer */
.footer-bar-container {
	padding: 0.5rem 25px 1.5rem;
}
.footer-bar-border {
	padding-top: 1.5rem;
	border-top: 2px solid;
	border-color: #3d3075;
}
@media only screen and (min-width:800px){
	.footer-bar-container {
		padding-left: 75px;
		padding-right: 75px;
	}
}
/* in footer, primary is above subsidiary so remove padding and border */
#sidebar-subsidiary {
	padding-top: 0;
	border-top: none;
}

/* override existing media queries which make undesirable changes to widgets */
@media only screen and (max-width: 950px) and (min-width: 700px) {
	#sidebar-primary .widget {
		width: inherit;
	}
	#sidebar-primary .widget:nth-child(2n+1) {
		clear: inherit;
	}
	.ltr #sidebar-primary .widget {
		float: inherit;
		margin-right: inherit;
	}
}

/* display primary widgets horizontally in layout-1c-narrow */
.layout-1c-narrow #sidebar-primary {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: inherit;
}
@media only screen and (min-width:800px){
	.layout-1c-narrow #sidebar-primary {
		flex-wrap: nowrap;
	}
}
.layout-1c-narrow #sidebar-primary .widget {
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 0;
}
.layout-1c-narrow #sidebar-primary .widget:first-of-type {
	padding-left: 0;
}
.layout-1c-narrow #sidebar-primary .widget:last-of-type {
	padding-right: 0;
}
.ltr .widget .widget-title {
	margin: 0;
}
.ltr .widget .widget-title .wrap::before {
	content: none;
}
.ltr .widget .textwidget {
	margin: 0.5rem;
	font-size: 90%;
}
.ltr .widget ul {
	margin: 0;
	list-style-type: none;
}

/* style hot topics in widget bar */
.widget .hot {
	color: #271E4B;
	background-color: orange;
	border-radius: 3px;
	padding: 3px 5px;
	margin: -3px -5px;
}

/* bring header bar, breadcrumb-trail and main content closer together */
.breadcrumb-trail {
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
}
.main {
	padding-top: 0;
}
h1 {
	margin-top: 1rem;
}

/* make search widget less intrusive by making the box smaller */
.widget_search > .search-form {
	padding: 0.15rem;
	margin:  -1.65rem 0 1.5rem;
}

/* make widget titles a little slimmer by reducing the padding left and right */
.widget-title > .wrap, #comments-number > .wrap, #reply-title > .wrap, .attachment-meta-title > .wrap {
	padding: 0.75rem 0.75rem 0.625rem;
}

/* create classes for CSS links to social media */
.link-twitter, .link-medium, .link-googleplus, .link-diaspora, .link-newsletter, .link-rss, .link-github, .link-bitbucket, .link-stackoverflow, .link-youtube {
	background-size: 30px 30px;
	width: 30px;
	height: 30px;
	display: block;
	float: left;
	margin-bottom: 5px;
	margin-right: 5px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	-o-transition: all 0.5s ease-in-out 0s;
	-ms-transition: all 0.5s ease-in-out 0s;
	-moz-transition: all 0.5s ease-in-out 0s;
	-webkit-transition: all 0.5s ease-in-out 0s;
	transition: all 0.5s ease-in-out 0s;
}

.empty-link-block {
	width: 30px;
	height: 30px;
	float: left;
	margin-bottom: 5px;
	margin-right: 5px;
}

.link-twitter {
	background-image: url(//blog.codefx.org/wp-content/uploads/twitter_black.png);
}
.link-twitter:hover {
	background-image: url(//blog.codefx.org/wp-content/uploads/twitter_purple.png);
}

.link-youtube {
	background-image: url(//blog.codefx.org/wp-content/uploads/playvideo_orange.png);
}
.link-youtube:hover {
	background-image: url(//blog.codefx.org/wp-content/uploads/playvideo_purple.png);
}

.link-medium {
	background-image: url(//blog.codefx.org/wp-content/uploads/medium_black.png);
}
.link-medium:hover {
	background-image: url(//blog.codefx.org/wp-content/uploads/medium_purple.png);
}

.link-googleplus {
	background-image: url(//blog.codefx.org/wp-content/uploads/googleplus_black.png);
}
.link-googleplus:hover {
	background-image: url(//blog.codefx.org/wp-content/uploads/googleplus_purple.png);
}

.link-diaspora {
	background-image: url(//blog.codefx.org/wp-content/uploads/diaspora_black.png);
}
.link-diaspora:hover {
	background-image: url(//blog.codefx.org/wp-content/uploads/diaspora_purple.png);
}

.link-newsletter {
	background-image: url(//blog.codefx.org/wp-content/uploads/newsletter_orange.png);
}
.link-newsletter:hover {
	background-image: url(//blog.codefx.org/wp-content/uploads/newsletter_purple.png);
}

.link-rss {
	background-image: url(//blog.codefx.org/wp-content/uploads/rss_black.png);
}
.link-rss:hover {
	background-image: url(//blog.codefx.org/wp-content/uploads/rss_purple.png);
}

.link-github {
	background-image: url(//blog.codefx.org/wp-content/uploads/github_black.png);
}
.link-github:hover {
	background-image: url(//blog.codefx.org/wp-content/uploads/github_purple.png);
}

.link-bitbucket {
	background-image: url(//blog.codefx.org/wp-content/uploads/bitbucket_black.png);
}
.link-bitbucket:hover {
	background-image: url(//blog.codefx.org/wp-content/uploads/bitbucket_purple.png);
}

.link-stackoverflow {
	background-image: url(//blog.codefx.org/wp-content/uploads/stackoverflow_black.png);
}
.link-stackoverflow:hover {
	background-image: url(//blog.codefx.org/wp-content/uploads/stackoverflow_purple.png);
}

/* POST LIST */

/* make the images in the post list less dominant */
img.landscape.thumbnail.medium {
	width: 38%;
	float: right;
	margin-left: 15px;
}

.content .entry-byline {
	width: 58%;
}

.archive-header {
	border-bottom: 1px solid #e3e3e3;
	padding-bottom: 1.5rem;
	margin-bottom: 3rem;
}

.archive-title {
	border-bottom: none;
	padding-bottom: 0;
}

/* POST CONTENT */

/* let article content overflow */

article, .entry {
	overflow: visible;
}

/* style the editorial note pointing to the original  */
.canonical {
	font-style: italic;
	margin-left: 12px;
}

/* style series post lists */
.series-stretch {
	background-color: rgb(237, 237, 237);
	padding: 0;
}

@media only screen and (min-width: 800px) {
	.series-stretch {
		padding: 0 50px;
	}
}

.series-list {
	column-gap: 20px;
	list-style: none;
}

.series-long-list, .series-short-list {
	column-count: 1;
}
@media only screen and (min-width: 400px) {
	.series-short-list {
		column-count: 2;
	}
}
@media only screen and (min-width: 600px) {
	.series-short-list {
		column-count: 3;
	}
}
@media only screen and (min-width: 800px) {
	.series-long-list {
		column-count: 2;
	}
}

#toc_container {
	border: none;
	background-color: #ededed;
	margin: 0 -25px 1em;
	width: 100% !important;
	padding: 15px 25px;
}
@media only screen and (min-width: 800px) {
	#toc_container {
		margin-left: -75px;
		margin-right: -75px;
		padding-left: 75px;
		padding-right: 75px;
	}
}

/* create class for CSS links to videos */
.link-playvideo {
	background-image: url(//blog.codefx.org/wp-content/uploads/playvideo_dark.png);
	background-size: 1em 1em;
	background-repeat: no-repeat;
	width: 1em;
	height: 1em;
	display: block;
	margin-top: 0.25em;
	margin-right: 0.25em;
	margin-left: 0.25em;
	float: left;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.link-playvideo:hover {
	background-image: url(//blog.codefx.org/wp-content/uploads/playvideo_purple.png);
}

/* remove underlines from links */
.entry-content a, .entry-summary a, .comment-content a {
	border-bottom: 0px;
}
a:hover,
a:focus { text-decoration: none; }


/* create a style for my personal parenthesis in the impulse posts */
.impulse-parenthesis:before {
	content: "(";
}
.impulse-parenthesis {
	font-style: italic;
}
.impulse-parenthesis:after {
	content: ")";
}

/* make linked images fully opaque, even when hovered over */
a img {
	opacity: 1;
}
a:hover img, a:focus img {
	opacity: 1;
}

/* make definition lists less sparse by bringing the entries closer together */
dd + dt {
	margin-top: 0.5rem;
}

/* allow to center tables with their auto width */
table.center {
	display: table;
	margin-left: auto;
	margin-right: auto;
	width: auto;
}

/* create styles for credits and sources */
.credits, /* style for credits (e.g. at the end of the page) */
.image-credits /* style for credits below images */
{
	margin-top: 1.0rem;
	margin-bottom: 1.0rem;
	text-align: center;
	font-size: 75%;
}
.image-credits {
	margin-top: -1.0rem;
}
.quote-source {
	font-size: 75%;
	font-style: italic;
	text-align: right;
}

/* remove the quotation marks in blockquotes */
.en-us blockquote p:before, .en-us blockquote p:first-child:before {
	content: "";
}
.en-us blockquote p:last-child:after, .en-us blockquote p.is-last-child:after {
	content: "";
}

/* make blockquotes go from sideline to sideline */
blockquote {
	margin-left: -15px;
	margin-right: -15px;
}
@media only screen and (min-width:800px){
	blockquote {
		margin-left: -65px;
		margin-right: -65px;
		padding-left: 65px;
		padding-right: 65px;
	}
}

/* make tweets as wide as regular quotes */
blockquote.twitter-tweet {
	width: inherit;
}

/* create a style for pull quotes */
blockquote.pull {
	float: right;
	width: 45%;
	background-color: transparent;
	outline-color: transparent;
	margin: 0 -25px 0 25px;
	border: 0 none;
	padding: 1rem 0 1rem 1rem;
	color: rgba(61,48,117,0.85);
	font-size: 1.5em;
	font-style: italic;
}

blockquote.pull p {
	margin: 0;
}

/* CRAYON */

/* remove padding/margin of inline snippets */
.crayon-syntax-inline {
	margin: 0;
	padding: 0;
}

/* break code out of container padding */
.crayon-syntax {
	overflow: visible !important;
	width: auto;
	margin-bottom: 1.5rem
}
.crayon-syntax .crayon-main {
	margin: 0 -25px;
	padding: 15px;
	width: auto;
	background-color: #ededed;
}
blockquote .crayon-syntax .crayon-main {
	margin-left: 0;
	margin-right: 0;
}
.crayon-syntax .crayon-table {
	margin: 0 auto !important;
}
@media only screen and (min-width:800px){
	.crayon-syntax .crayon-main {
		margin-left: -75px;
		margin-right: -75px;
	}
	blockquote .crayon-syntax .crayon-main {
		margin-left: 0;
		margin-right: 0;
	}
}

/* always hide the line number column */
.crayon-syntax .crayon-table .crayon-nums {
	display: none;
}

/* MARK IMPORTANT TEXT */

.important {
	margin: 0 0 1.5rem 30px;
	font-weight: bold;
}
.important:before{
	content: '';
	background: url('//blog.codefx.org/wp-content/uploads/exclamation.png');
	background-size: cover;
	position: absolute;
	width: 20px;
	height: 20px;
	margin-top: 3px;
	margin-left: -30px;
}

/* STRETCH SOME CONTENT BEYOND CONTAINER PADDING */

.stretch {
	margin-left: -25px;
	margin-right: -25px;
}
/* article images have class ".size-full" */
.stretch .size-full {
	width: 100%;
}
/* some things in a stretch may look when going from margin to margin */
.stretch .size-almost-full {
	width: 95%;
}

@media only screen and (min-width: 800px) {
	.stretch {
		margin-left: -75px;
		margin-right: -75px;
	}
}

/* BANNERS */

.banner-container {
	background: linear-gradient(to bottom right, rgba(61, 48, 117, 0.95), rgba(61, 48, 117, 0.75));
	color: white;
	font-family: 'Open Sans',Arial,sans-serif;
	font-weight: 600;

	padding: 15px 25px;
	margin-bottom: 1.5rem;
	overflow: auto;
}

.banner-container a {
	font-weight: bold;
	color: #f26611;
}

.banner-container a:hover {
	color: #d95b0f;
}

.banner-top-level-ul {
	list-style: none;
	margin: 0;
}

.banner-top-level-ul > li {
	margin: 0px 0px 10px;
}

.banner-title {
	font-weight: bold;
	font-size: 2.5rem;
	text-align: center;
	margin-bottom: 0.5rem;
	line-height: 1.5;
}

.banner-header {
	font-weight: bold;
	font-size: 1.5625rem;
	text-align: center;
	margin-bottom: 0.5rem;
	line-height: 1.5;
}

@media only screen and (min-width: 600px) {
	.banner-top-level-ul {
		margin: 0 0 0 2rem;
	}
}

@media only screen and (min-width: 800px) {
	.banner-container {
		padding-left: 75px;
		padding-right: 75px;
	}
}

/* JMSiA banner */

/* nothing to style beyond .banner-container */
.jmsia-container {
}

/* with background image but that's too noisy
.jmsia-container {
	background-color: #000;
	background-image: url(//blog.codefx.org/wp-content/uploads/puzzle-people.jpg);
	background-size: cover;

	font-family: 'Open Sans',Arial,sans-serif;
	text-shadow: 0 0 3px black, 0 0 3px black, 0 0 1px black;
}
*/

.jmsia-cover {
	margin: 15px auto;
	display: block;
	width: 150px;
	box-shadow: 0px 0px 5px 5px #f26611;
}

a:hover > .jmsia-cover {
	box-shadow: 0px 0px 8px 8px #f26611;
}

@media only screen and (min-width: 600px) {
	/* show cover next to text */

	.jmsia-cover {
		margin-top: 10px;
		display: inherit;
		float: left;
		width: 30%;
	}

	.jmsia-text {
		float: right;
		width: 70%;
	}

}

/* Training banner */

.training-container {
}

.training-logo {
	margin-right: 1em;
	float: left;
	width: 38%;
}

.training-location {
	font-size: 1.5em;
}

/* YouTube banner */

.youtube-container {
  background: linear-gradient(to bottom right, rgba(229, 0, 0, 0.95), rgba(229, 15, 15, 0.75));
}

.youtube-container {
  color: #eee;
}

.youtube-container a {
  color: #fff;
}

.youtube-container a:hover {
  color: #aaa;
}

.youtube-thumbnail {
  margin: 15px auto;
	display: block;
	width: 80%;
	box-shadow: 0px 0px 5px 5px #ddd;
}

a:hover > .youtube-thumbnail {
	box-shadow: 0px 0px 8px 8px #fff;
}

@media only screen and (min-width: 600px) {
	/* show cover next to text */

	.youtube-thumbnail {
		margin-top: 10px;
		display: inherit;
		float: left;
		width: 48%;
	}

	.youtube-text {
		float: right;
		width: 50%;
	}

}



/* TALK LISTS */

.talk-event {
	border-top: 1px solid #e3e3e3;
	padding-top: 1.5rem;
	margin-top: 3rem;
}

.talk-organizer {
	padding-top: 1.5rem;
	padding-bottom: 0;
	border-bottom: none;
}

.talk-subtitle {
	margin-top: -1.5rem;
	font-weight: bold;
	font-size: 1.25rem;
	color: #404040;
}

.talk-organizer-logo {
	margin-top: 1em;
	float: right;
	width: 38%;
}

/* CATEGORY / TAG DESCRIPTION */

.archive-description {
	margin: 0;
	padding: 0;
	border: 0;
	color: inherit;
	background: inherit;
}

/* NAVIGATION */

.navigation, .loop-nav {
	margin: 0;
	padding: 0;
	font-size: inherit;
	border: none;
}

.navigation, .loop-nav .prev::before {
	content: "« "
}
.navigation, .loop-nav .next {
	text-align: right;
}
.navigation, .loop-nav .next::after {
	content: " »"
}

/* Make iframe embed settings more sensible (at least for Piwik opt-out)
(Commented out as it does also apply to YouTube iframes.)
.embed-wrap {
	height: 160px;
	width: 500px;
	max-width: 100%;
	margin-top: 10px;
	margin-bottom: 20px;
	margin-left: 20px;
	padding-bottom: 0;
	padding-top: 0;
	overflow: hidden;
}
*/

/*
 * The changes to YARPP's layout of related posts are not done here because they are overwritten
 * by the css-file YARPP loads. This happens after this one and marking all rules as "!important"
 * did not help.
 * The rules are instead hardcoded into "yarpp-template-thumbnail.php".
 */