@charset "utf-8";

html {
	background-color: #333;
}

body {
	width: 100%;
	max-width: 720px;
	padding: 0;
	margin: 0 auto;
	background-color: #333;
}

/******************************************************************************
* Header
*/

#page-header {
	display: block;
	margin: 0;
	border: none;
	border-bottom: 1px solid #777;
	padding: 0;
	background-color: #333;
	width: 100%;
}

#page-header nav {
	max-width: 1024px;
	margin: 0 auto;
	padding: 8px;
}

#page-header .brand {
	display: inline-block;
	margin-right: 1em;
	padding: 0;
	font-family: sans-serif;
	font-size: 1.2em;
	color: white;
	text-align: left;
}

#page-header .brand img {
	width: 32px;
	margin: 0 8px;
	border-radius: 16px;
	vertical-align: middle;
}

#page-header .brand a {
	color: inherit;
}

#page-header .brand a:hover {
	text-decoration: none;
}

#page-header .brand-text {
	padding: 4px 0;
}

#page-header .brand-text:hover {
	border-bottom: 1px solid #999;
}

#page-header .brand mark {
	margin: 2px;
	color: #08c;
	background-color: inherit;
}

#page-header .main-menu {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 0.9em;
}

#page-header .main-menu li {
	display: inline-block;
	margin: 8px 16px;
}

#page-header .main-menu a {
	color: #999;
	vertical-align: middle;
	font-weight: normal;
}

#page-header .main-menu a:hover {
	color: white;
	text-decoration: none;
}

@media (max-width: 640px) {
	#page-header .brand {
		font-size: 1em;
	}

	#page-header nav {
		display: block;
		text-align: center;
	}
}

/******************************************************************************
* Footer
*/

#page-footer {
	display: block;
	width: 100%;
	padding: 5px;
	text-align: center;
	font-size: 0.7em;
	color: #999;
	background-color: #333;
	border: none;
	border-top: 1px solid #777;
}


/******************************************************************************
* Main
*/

form, label, input, textarea {
	text-align: left;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

label {
	padding-top: 10px;
}

abbr {
	color: red;
}

li {
	text-align: left;
}

section {
	color: black;
	background-color: #eef;
	margin: 0 0;
	padding: 0 0;
}

main {
	border: none;
	padding: 0;
	margin: 0;
	text-align: center;
	width: 100%;
	background-color: #eef;
}

main section {
	vertical-align: top;
	text-align: center;
}

#indexheader {
	background-color: black;
	position: relative;
	text-align: center;
	width: 100%;
	padding: 0;
	margin: 0;
}

#indexheader img {
	display: block;
	border: none;
	width: 100%;
	min-height: 220px;
	margin: 0 auto;
}

#indexheader blockquote {
	display: block;
	position: absolute;
	bottom: 20px;
	right: 0px;
	background-color: rgb(8,19,69,0.6);
	background: linear-gradient(to right, rgb(0,0,0,0), rgb(0,0,0,0.5) 50%);
	text-align: center;
	vertical-align: middle;
	width: 100%;
	min-width: 200px;
	max-width: 480px;
	color: #dadaad;
	font-family: cursive, serif;
	font-size: 1em;
	padding: 5px 20px;
	font-style: italic;
}

article {
	display: block;
	text-align: left;
	line-height: 1.6;
	margin: 0;
	padding: 0;
}

h1,h2,h3,h4,h5,h6 {
	display: block;
	color: #c45500;
	font-family: serif;
	margin-top: 1.5em;
/*
	xbox-shadow: 2px 2px 5px rgba(127,127,127,0.5);
	xtext-shadow: 1px 1px gray;
*/
}
h1 { font-size: 1.8em; }
h2 { font-size: 1.3125em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1.1em; }
h5 { font-size: 1.0em; }
h6 { font-size: 1.0em; }

a[href^='http']::after {
	content: url("../images/external-link-ltr-icon-b4b84.svg");
}

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}
.clearfix::after {
  clear: both;
}

article {
	padding: 2em;
	font-size: 1em;
}

article header {
	text-align: center;
	width: 100%;
	padding: 1em 0;
}

article header img {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	padding-bottom: 1em;
}
/*
article header .hgroup {
	display: block;
	position: absolute;
	bottom: 20px;
	left: 0;
	width: 100%;
	x-background-color: rgb(0,0,0,0.8);
	x-background-color: rgb(8,19,69,0.6);
	text-align: center;
	vertical-align: middle;
	padding: 20px;
	color: black;
	font-size: 2em;
	font-weight: normal;
	font-style: italic;
	line-height: 1.2;
}
*/
article header h1 {
	font-size: 2em;
	color: midnightblue;
	font-weight: normal;
	padding: 0;
	margin: 0;
	line-height: 1.2em;
}

article header p {
	font-size: 1.4em;
	color: orange;
	padding: 0;
	margin: 0;
	line-height: 1.2em;
	font-style: italic;
}

article b {
	font-weight: bold;
	color: #570b90;
}

article p {
	font-size: 1em;
	padding-bottom: 0em;
}

article p.tip {
	border: 1px solid #803636;
	background: #ffffdd;
	padding: 20px;
}

#postlist {
	list-style-type: none;
	margin: 0;
	padding: 0;
	color: black;
	background-color: #eef;
}

ul#postlist {
	margin: 0;
	padding: 0;
}

#postlist li {
	display: inline-block;
	width: 140px;
	min-height: 120px;
	border: 0px solid black;
	vertical-align: top;
	margin: 10px;
	padding: 0;
	text-align: left;
}

#postlist img {
	width: 100%;
}

#postlist h2 {
	font-size: 0.9em;
	margin: 0.3em 0;
}

#postlist p {
	font-size: 0.8em;
	color: black;
}

#postlist2 {
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-size: 0.9em;
}

#postlist2 li {
	display: block;
	width: 320px;
	min-height: 60px;
	border: 1px solid black;
	vertical-align: top;
	margin: 10px;
	padding: 0;
}

#postlist2 img {
	width: 120px;
	height: 90px;
	min-width: 90px;
	min-height: 60px;
	border-radius: 10px;
	margin-right: 10px;
	text-align: center;
	float: left;
}

#postlist2 p {
	color: black;
	font-size: 0.9em;
}

#related_posts {
	background-color: #eef;
	width: 100%;
	text-align: center;
	margin: 30px 0;
	padding: 5px 0;
}