/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
description: Full width (content) with minimal sidebar (blogposts) based on 'Twenty Fifteen Theme'
Author: X
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Main content inner box (hompage and blogpost) bg */
.hentry {
    background-color: #ffffff;
}

/* Make site 100% ratehr than just middle (causing that giant sidebar extend) */
.site {
	margin: 0 auto;
	max-width: 100%;
	background-color: #eeeeee; /* Content outer box color, also must be set in .site-content */
    overflow-x: hidden; /* fixes mobile post menu - from showing that right gap*/
}

/* Default link colour, affects all visited colour in sidebar,footer,content link */ 
a {
    color: #444;
    text-decoration: none;
}

/* ----------- Bullet points on all monitor screens ----------- */

@media screen and (min-width: 38.75em) {
	ul, ol {
		margin: 0 0 1.6em 1.3333em;
	}
}

/* ------------------------- Sidebar ------------------------- */
/* Top Right Bottom Left */
/* Sidebar - just background (monitors >1400px)
   N.B. does nto affect content */
@media screen and (min-width: 87.6875em) {
	body:before {
		width: 280px; /* Force 300px sidebar bg colour */
		background-color: #000;
	}
}

/* Sidebar - background settings for zoomed in (125%) or small screen*/
@media screen and (min-width: 59.6875em) {
	body:before {
		background-color: #000;
		width: 280px;
		z-index: 0; /* Fixes flashing bug with scrolling on Safari */
	}

	/* Sidebar content settings - max width*/
	.sidebar {
		float: left;
		margin-right: -100%;
		max-width: 280px; 
		position: relative;
	}

	/* Sidebar/Recent Posts - make margin left, font size, of all */ 
	.widget {
		font-size: 14px;
		font-size: 1.4rem;
		margin: 0 0 10%;
		padding: 0 5%;
	}

	/* Sidebar/Systems Research - margins */
	.site-header {
		background-color: transparent;
		border-bottom: 0;
		margin: 20px 0 20px 0; /* Margin from top/bottom */
		padding: 0 5%; /* Small padding from left*/
	}

	/* Title 'Systems research'*/
	.site-title a{
		color:#FFFFFF;
		font-family: Helvetica;
		font-weight: 100;
	}
	.site-title{
		padding-bottom: 10px;
	}
	
	/* Long description font */
	.site-description {
		font-size: 14px;
		font-size: 1.4rem;
		font-family: Helvetica;
		color: #666;
		line-height: 1.5;
		margin: 0.5em 0 0;
		opacity: 1;
	}

	/* 'Recent posts' title itself*/ 
	.widget-title {
		color: #fff;
		margin: 0 0 0.8em;
		letter-spacing: 0.04em;
		text-transform: capitalize;
		font-family: Helvetica;
		font-size: 15px;
		font-size: 1.5rem;
	}
	/* Recent posts blog titles */
	.widget_recent_entries a{
		color:#eee;
		font-family: Helvetica;
	}
	/* Recent post dates */
	.post-date {
		color:#555;
		font-family: Helvetica;
		font-size: 80%;
	}
	/* Recent post entries line splits and spacing*/
	.widget_recent_entries li {
		border-top: 1px solid #333;
		padding: 5px 0;
	}


	/* ------------------------- Blog post content ------------------------- */
	/* Main content */
	.site-content {
		display: block;
		float: left;
		margin-left: 300px; /* margin left of all inner blog content (but no sidebar bg) */
		width: calc(100% - 301px); /* width of inner blog content */
		background-color: #eeeeee; /* Content outer box color, also must be set in .site */
	}

	.hentry,
	.page-header,
	.page-content {
		box-shadow: 0 0 0 0; /* get rid of border around inner content box*/
		margin: 0 5%; /* blog post box - more margin left */
		padding-top: 3% /* blog post title - padding from top in inner box*/
	}

	.site-main {
		padding: 5% 0; /* blog post box - padding from top */
	}

	.entry-header {
	   padding: 0 0; /* Blog post title - how close from left inner box */
	}

	/* Blog post title - spacing below */
	.entry-title, .widecolumn h2 {
	   margin: 0 0 20px 5%;
	}

	/* Blog post content - padding from inner box*/
	.entry-content, .entry-summary {
	   padding: 0 4% 4% 5%;
	}
	
	/* Footer - "Previous", "Next"*/
	.post-navigation {
		margin: 0 5% 0 5%;
	}
	.post-navigation .nav-next,
	.post-navigation .nav-previous {
		width: 50%;
		float: left;
	}
	.post-navigation {
		box-shadow: 0 0 0 0; /* get rid of border on prev button*/
		background-color: #e6e6e6;
	}
	.post-navigation div + div {
		border-top: 0; /* get rid of it on next button*/
		background-color: #dedede;
	}

	/* Mid the footer copyright (now hiding)*/
	.site-footer {
		float: left;
		margin: 0 0 0 0;
		padding: 0;
		width: 100%;
		background-color: #eee;		/* same bg colour as around */
		border-top: 0;
		box-shadow: 0 0 0 0;
		margin: 0;
		padding: 0;
	}
	.site-info {
		/*padding: 20px 0 20px 300px;*/
		padding: 1px
	}
	.site-info a {
		border-bottom: 0;
		color: #111; /* Just hide it... */
	}

	/* Fix comment section */
	.comments-area {
		margin: 5%;
		padding: 50px;
	}
	.comments-area {
		border-top: 0;
		box-shadow: 0 0 0 0;
	}
	
	/* Homepage title, also affects blogpsot title of all pages :) */
	.entry-title, .widecolumn h2 {
		color: #fff;
		width: 90%;
		background-image: url("https://astralvx.com/wp-content/uploads/2020/11/moonripple-posttitle-bg.png");
		background-size: cover;
		text-align: center;
		padding: 10% 15%; /* Controls size of image and padding of text */
		margin-bottom: 5%; 
	}

}


/* --------------------------- Mobile < 860px --------------------------- */

@media screen and (max-width: 59.6875em) {
	/* Sidebar */
	.site-header {
		background-color: #000000;
		border-bottom: 0;
		padding: 8%;
	}
	.site-title a{
		color:#FFFFFF;
		font-family: Helvetica;
		font-weight: 600;
	}

	/* 'Recent posts' title itself*/ 
	.widget-title {
		color: #fff;
		margin: 0 0 1.6em;
		letter-spacing: 0.04em;
		text-transform: capitalize;
		font-family: Helvetica;
		font-size: 15px;
		font-size: 1.5rem;
	}
	/* Recent posts blog titles */
	.widget_recent_entries a{
		color:#eee;
		font-family: Helvetica;
	}
	/* Recent post dates */
	.post-date {
		color:#555;
		font-family: Helvetica;
		font-size: 80%;
	}
	/* Recent post entries line splits and spacing*/
	.widget_recent_entries li {
		border-top: 1px solid #333;
		padding: 5px 0;
	}
	.secondary {
		background-color: #000;
	}
	.widget-area {
		margin: 0;
	}

	/* Content */
	.entry-header {
		padding: 0 8%;
	}	
	.entry-content, .entry-summary {
		padding: 0 1% 1%;
	}
	
	/* Hide footer */
	.site-footer {
		background-color: #eee;
		border-top: 0;
		padding: 0;
	}
	.site-info a {
		border-bottom: 0;
		color: #eee;
	}

}

/* Dont word wrap <code> but then no scrollbar */
/*code, kbd, tt, var, samp, pre {
    white-space: pre;
}*/

/* Enlighter source code - don't wrap on small screen */
pre {
    white-space: pre;
}