/*
Theme Name: Micro Daily
Theme URI: http://www.whereisjosh.com
Description: A highly simplified theme to provide for microblogging a daily diary.
Author: Joshua Ryan
Author URI: http://www.jdr.id.au/
Version: Feb 2019 now with Dark Mode
License: CC Attribution License
*/


/* Load fonts straight up
---------------------------------------------------------- */

/* Mostly done through Google Fonts and function.php now
	using Rock Salt for title and Lato for body text */

@font-face {
    font-family: 'Genericons';
    src: url('fonts/Genericons.eot');
    src: url('fonts/Genericons.woff') format('woff'),
         url('fonts/Genericons.ttf') format('truetype'),
         url('fonts/Genericons.svg#genericonsregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Genericons";
    src: url("fonts/Genericons.svg#Genericons") format("svg");
  }
}

/* WordPress Core Stuff / regrettable needed shit
---------------------------------------------------------- */
.alignnone,
a img.alignnone  {}
.aligncenter,
div.aligncenter {display: block;}
.alignright,
a img.alignright { float:right;}
.alignleft, a img.alignleft {float: left;}
a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto; }
.wp-caption {
    max-width: 96%; /* Image not overflow the content area */
    text-align: center;}
.wp-caption.alignnone {}
.wp-caption.alignleft {	text-align:left;}
.wp-caption.alignright {text-align:right;}
.wp-caption img {    max-width: 98.5%;}
/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	overflow: hidden;}

/* Layout
---------------------------------------------------------- */

body,
h1,
h2,
h3,
p {
	margin:0;
	padding:0;
}
body {
	position: absolute;
	width: 100%;
	min-height:100%; /* keeps footer at bottom on short pages */
	background-color: #f0f0f0;
}
#header {
	background-color:#03a9f4;
	padding: 2px;
	margin-bottom: 2em;
}
#content {
	width: auto;
	margin-left: 0px;
	margin-right: 0px;
	padding-bottom: 5em; /* Buffer for footer if vertical screen size too small*/
}
.post {
	background-color: #fff;
	padding: 2px 5px;
	margin-bottom: 1px;
	min-height: 3em;
}
#navi {
	position: relative;
	margin: 1em 0;
}
.navi {
	display: inline-block;
}
#naviBack,
#naviNext {
	width: 30%;
}
#naviUp {
	width: 40%;
}
#footer {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
}
#footerMenu {
	padding: 0;
}
#footerMenu li {
	display:inline;
}
#footerMenu li::before {
	margin: 0.8em;
}


/* Text formatting
---------------------------------------------------------- */

html{ /* Set font defaults */
	font-size: 62.5%;
	font-family: 'Lato', sans-serif;
	font-weight: normal;
}
#header h1 {
	color: #fff;
	font-family: 'Rock Salt', 'Brush Script MT' ,cursive; /* title font */
	font-size: 20px;
	font-size: 2rem;
	line-height: 30px;
	line-height: 4rem;
	text-align: center;
}
#pageTitle {
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: 900;
	line-height: 40px;
	line-height: 3.6rem;
	text-align: center;
}
/*sup {
	vertical-align: text-bottom;
}*/
.postTitle {
	color: #03a9f4;
	text-align: center;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 20px;
	line-height: 2rem;
	font-weight: 900;
}
.postContent {
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 15px;
	line-height: 1.5rem;
}
.postTags {
	font-style: italic;
	font-weight: lighter;
}
.postEdit {
	font-size: 12px;
	font-size: 1.2rem;
	text-align: right;
}
#navi {
	font-weight: normal;
	font-size: 12px;
	font-size: 1.2rem;
}
#naviBack {
	text-align: left;
}
#naviUp {
	text-align: center;
}
#naviNext {
	text-align: right;
}
#footer {
	font-size: 12px;
	font-size: 1.2rem;
	text-align: center;
}
#footerMenu {
	list-style-type: none;
}
#footerMenu li::before {
	content: " | ";
}
#footerMenu li:first-child::before {
	content: none;
}


/* Link formatting
---------------------------------------------------------- */



a {
	color: inherit;
	padding: 2px; /* increase the bgcolor region without affecting layout */
	margin: -2px;
	border-radius: 6px;
	text-decoration: none;
	transition: 0.25s ease;
}
#header a:hover {
	opacity: 0.7;
}
.navi a,
.postContent a {
	color: #03a9f4;
	text-decoration: none;
}
#navi a:hover {
	background-color:#bbb;
	box-shadow: inset 0px 0px 5px 2px #f0f0f0;
}
.postEdit a,
#footerMenu a,
#naviBack a:hover::before, /* set the navi arrows on hover */
#naviNext a:hover::after {
	color: #000;
	text-decoration: none;
}
.postEdit a:hover,
#footerMenu a:hover {
	opacity: 0.9;
	background-color: #bbb;
}
.postEdit a {
	opacity: 0.2;
}
.postEdit a:hover {
	box-shadow: inset 0px 0px 5px 2px rgba(255, 255, 255, 1);
}
#footerMenu a {
	opacity: 0.7;
}
#footerMenu a:hover {
	box-shadow: inset 0px 0px 3px 2px #f0f0f0;
}


/* Page specific layouts
---------------------------------------------------------- */


/* Search form  */
#searchBox {
	border: thin solid #bbb;
	border-radius:6px;
	box-shadow: inset 0px 0px 1px 0px rgba(200, 200, 200, 0.75);
	border: none;
	min-width: 300px;
	min-width: 30rem;
}
#searchForm {
	text-align: center;
	position: relative;
	width: 100%;
}
#searchForm input {
	height: 40px;
	height: 4rem;
	line-height: 40px;
	line-height: 4rem;
	width: 100%;
	padding: 0;
	vertical-align: middle;
	transition: 0.30s ease;
}
#searchForm input[type=text] {
	box-sizing: border-box;
	font-family: 'Lato', sans-serif;
	font-weight: 100;
	font-size: 16px;
	line-height: 24px;
	text-align: left;
	text-indent: 40px;
	text-indent: 4rem;
	border: 1px solid #bbb;
	border-radius:6px;
	padding: 1px;
}
#searchForm input[type=text]:focus {
	outline: none;
	box-shadow: inset 0px 0px 10px 0px rgba(200, 200, 200, 0.75);
}
#searchForm input[type=submit] {
	position: absolute;
	top: 0;
	right: 0;
	box-sizing: border-box;
	width: 40px;
	width: 4rem;
	cursor: pointer;
	border-radius: 6px;
	background: none;
	transition: 0.25s ease;
	border:0px solid rgba(0, 0, 0, 0.0);
}
#searchForm input[type=submit]:hover {
	background-color: rgba(3, 169, 244, 1);
	border: 0px dotted rgba(3, 169, 244, 0.5);
	box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.5);
}

/*Archives links */

body.home #postFrontPage div { /* override post box size on front page */
	padding: 2px 10px 5px 10px;
	padding: .2rem 1rem .5rem 1rem;
}

body.home #naviBack,
body.home #naviNext {
	width: 10%;
}
body.home #naviUp {
	width: 80%; /* this is a hack, should fix properly */
}

.postArchives .postContent a {
	color: #000;
}
.postArchives .postTitle a:hover {
	background-color: #bbb;
	box-shadow: inset 0px 0px 5px 2px rgba(255, 255, 255, 1);}

.postArchives a:hover {
	background-color: #03a9f4;
	box-shadow: inset 0px 0px 5px 2px rgba(255, 255, 255, 1);
}

.archiveList {
	-webkit-columns: 8em 4;
	-moz-columns: 8em 4;
	columns: 8em 4;
	margin: auto;
	padding: 0;
}
.archiveList li {
	list-style-type: none;
	text-align: center;
}
.archiveList span {
	display: inline-block;
}

.archiveList .archiveListMonth {
	text-align: left;
	width: 2.5em;
}
.archiveList .archiveListMonth:after {
	content: ':';
}
.archiveList .archiveListCount {
	text-align: right;
	width: 4em;
}

.page-id-28 .postContent {
	text-indent: 1em;
}

/* Annual calenders */
#calendars  {
	text-align: center;
	max-width: 60em;
	margin: auto;
}
#calendars table {
	display: inline-block;
	margin: 0.5em 1em;
	vertical-align: top;
}
#calendars caption {
	font-weight: 900;
}
#calendars thead {
	font-weight: 400;
}
#calendars tbody {
	font-weight: 100;
}
#calendars a:hover {
	background-color: #bbb;
	box-shadow: inset 0px 0px 5px 2px rgba(255, 255, 255, 1);
}

#tagCloud {
	text-align: justify;
	padding: 1em 0;
}

/* Font based icons
---------------------------------------------------------- */
/* First set the font for each element */
#pageTitle span:before,
.post-edit-link::before,
#searchForm input[type=submit],
#naviBack a::before,
#naviNext a::after,
#footerMenu li a::before {
	font-family:'Genericons';
	font-weight: normal;
	vertical-align: middle;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
#pageTitleDate:before {
	content: '\f307';
}
#pageTitleDay:before {
	content: '\f305';
}
#pageTitlePage:before {

}
#pageTitleSearch:before {
	content: '\f400';
}
#pageTitleTag:before {
	content: '\f302';
}
#pageTitleArchives:before {
	content: '\f444';
}
#pageTitleAbout:before {
	content: '\f475';
}
#pageTitleEmpty:before {
	content: '\f414';
}

#searchForm input[type=submit] {
	content: '\f030';
	font-size: 32px;
	font-size: 3.2rem;
}

.post-edit-link::before {
	content: '\f411';
}
#naviBack a::before {
	content: '\f430';
}
#naviNext a::after {
	content: '\f429';
}

#linkBlog a::before {
	content: '\f205';
}
#linkFlickr a::before {
	content: '\f211';
}
#linkFacebook a::before {
	content: '\f203';
}
#linkFoursquare a::before {
	content: '\f226';
}
#linkGoogle a::before {
	content: '\f206';
}
#linkInstagram a::before {
	content: '\f215';
}
#linkRSS a::before {
	content: '\f413';
}
#linkPath a::before {
	content: '\f209';
}
#linkPininterest a::before {
	content: '\f219';
}
#linkSkype a::before {
	content: '\f220';
}
#linkSpotify a::before {
	content: '\f515';
}
#linkTumblr a::before {
	content: '\f214';
}
#linkTwitter a::before {
	content: '\f202';
}
#linkVimeo a::before {
	content: '\f212';
}
#linkVine a::before {
	content: '';
}
#linkYoutube a::before {
	content: '\f213';
}


#footerMenuAbout a::before {
	content: '\f475'; /* 457/475 */
}
#footerMenuArchives a::before {
	content: '\f444';
}
#footerMenuRSS a::before {
	content: '\f413';
}
#footerMenuDashboard a::before {
	content: '\f205';
}
#footerMenuLogInOut a::before {
	content: '\f427';
}



  /* Pha/Tablet adjustment */
@media screen and (min-width: 560px) {
	#header{
	padding: 1em;
	}
	#header h1{
	font-size: 24px;
	font-size: 2.4rem;
	}
	#content {
	margin-top: 5%;
	margin-left: 5%;
	margin-right: 5%;
	}
	#pageTitle {
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: normal;
	text-align: left;
	text-indent: 24px;
	text-indent: 2.4rem;
	}
	.post {
	padding: 0.4rem 3rem;
	margin-bottom: 0.5em;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	justify-items: flex-start;
	border-radius: 4px;
	box-shadow: 0px 2px 4px #999, inset 0px 0px 5px 0px rgba(200, 200, 200, 0.75);
	}
	.post div {
	display: inline-block;
	vertical-align: middle;
	}
	/*exceptions */
	#searchBox {
	display: inline; /* otherwise won't stretch using flex */
	}
	#searchBox div {
	min-width: 330px; /* however without flex this keeps it reasonable */
	}
	#postFrontPage .post { /* override post box size on front page */
	padding: 3em 3em 4em 3em;
	}
	.postContent {
	/*margin-left: 5em; /* Sets it the same distance apart from the side */
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 15px;
	line-height: 1.5rem;
	/* set to auto expand with flex */
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	width: auto;
	height: auto;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	}
	.postTitle {
	width: 8em;
	text-align: left;
	}
	#postFrontPage .postTitle {
	min-width: 8em;
	}
	.postEdit {
	font-size: 14px;
	font-size: 1.4rem;
	}
	#navi {
	font-size: 14px;
	font-size: 1.4rem;
	}
	#footer {
	font-size: 14px;
	font-size: 1.4rem;
	}
}

  /* Desktop adjustment */
@media screen and (min-width: 960px) {
	#header h1 {
	font-size: 40px;
	font-size: 4rem;
	line-height: 60px;
	line-height: 6rem;
	}
	.post {
	padding: 10px 30px;
	padding: 1rem 3rem;
	vertical-align: middle;
	}
	.postTitle {
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 16px;
	line-height: 1.6rem;
	}
	.postContent {
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 20px;
	line-height: 2rem;
	}
	.archiveList {
	column-rule: 1px dotted #efefef;
	}
	#footer {
	width: auto;
	width: -moz-available;
	text-align: left;
	margin-left: 6em;
	}
}

  /* Light Mode */
@media (prefers-color-scheme: light) {
  body {
    background-color: #f0f0f0;
  }
}

  /* Dark Mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
  }
  /*dark text*/
  h1 a {
    color: #111;
  }
  /*light text*/
  .post, .postArchives .postContent a {
    color: #ccc;
    background-color: #333;
  }
  #footer {
    color: #333;
  }
  /*super dark dividers */
  .archiveList {
    column-rule-color: #666;
  }
  .postEdit a, #footerMenu a, #naviBack a:hover::before, #naviNext a:hover::after {
    color: #ccc;
  }
  .post {
  box-shadow: #333; 
  }
  .postArchives .postTitle a:hover {
  	background-color: #666;
  	box-shadow: inset 0px 0px 5px 2px rgba(51, 51, 51, 1);}

  .postArchives a:hover {
  	background-color: #03a9f4;
  	box-shadow: inset 0px 0px 5px 2px rgba(51, 51, 51, 1);
  }
  .postEdit a:hover,
  #footerMenu a:hover {
  	background-color: #333;
  	box-shadow: inset 0px 0px 5px 2px rgba(10, 10, 10, 1);
  }
  #searchForm input[type="text"] {
    background-color: #555;
    color: #eee;
  }

}