/*  SELECTION
 *
 */

::selection {
	background-color: #398ee7;
	color: #fff;
}

/*  ELEMENTS
 *
 */

p, ol, ul, dl, blockquote, pre, table {
	margin-bottom: 1.3em;
	line-height: 1.8em;
}

a {
	text-decoration: none;
	color: #2c82dd;
	border-bottom: 1px solid transparent;
	transition: color 0.3s ease-in-out, border 0.3s ease-in-out;
}
	a:hover,
	a:active,
	a:focus {
		color: #13385e;
		border-bottom: 1px solid #3c3c3c;
	}
	#header a {
		border-bottom: none;
	}
	#sidebar ul li a {
		display: block;
		border: none;
	}

	#footer a {
		color: #333;
		border-bottom: none;
		transition: none;
	}
		#footer a:hover,
		#footer a:active,
		#footer a:focus {
			color: #2c82dd;
			text-decoration: underline;
		}

blockquote {
	display: inline-block;
	font-weight: normal;

	background-color: #fff;

	padding: 0.6em 1.2em 0.7em 1em;
	border-radius: 3px;
	box-shadow: 0 0 5px rgba( 0, 0, 0, 0.05 );
}
	blockquote p:last-child { margin-bottom: 0; }

code {
	font-size: 105%;
	background-color: #d8d8d8;
	background-color: rgba( 0, 0, 0, 0.1 );
	color: #2c82dd;
	padding: 0.2em 0.4em;
	margin: 0 0.2em;

	border-radius: 4px;
}
	code.block {
		display: block;
		margin: 0 !important;
	}

figcaption { font-size: 85%; }

h1, h2, h3, h4, h5, h6 {
	clear: both;

	font-weight: normal;
	text-align: left;
	margin: 1.3em 0 0.6em 0;
	line-height: 1.4em;
}

h1 {
	margin-top: 0;
	margin-bottom: 0.5em;
	font-weight: 400;
	font-size: 200%;
	line-height: 1.3em;

	color: #1c50a1;
}
	h1.post-title { margin-bottom: 0; }
	h1.post-title a { border-bottom: none; color: #1c50a1; }
	body.archive h1.post-title,
	body.search h1.post-title {
		margin-bottom: 0.5em;
	}

h2 { font-size: 160%; }
	.post-post h2,
	#sidebar h2 {
		border-top: 1px dotted #ccc;
		padding-top: 0.5em;
	}
	.post-post h2:first-child,
	.post-post .hb + h2,
	.post-post .hb h2 {
		border-top: none; padding-top: 0;
	}
	.widgets h2 {
		margin-top: 0;
	}
h3 { font-size: 140%; color: #444; }
h4 { font-size: 130%; color: #555; }
h5 { font-size: 120%; color: #888; }
h6 { font-size: 105%; color: #aaa; }

hr {
	margin: 1em 0;
	border-bottom: 1px solid #dadada;
}

li { list-style-position: inside; }
	#main li { margin-bottom: 0.2em; list-style-position: outside; margin-left: 1.2em; }
	#main ul li { list-style-type: disc; }
	#main .post-post ul li {
		list-style-type: none;
		margin-left: 1em;
	}
		#main .post-post ul li:before {
			display: block;
			float: left;

			width: 0.7em;
			margin-left: -0.7em;
			margin-top: -0.12em;
			content: "›";
			font-weight: 300;
			font-size: 140%;
			color: #555;
		}
	#main ol li { list-style-type: decimal; margin-left: 1.6em; }
	#archive-posts ul li { list-style-type: none; margin-left: 0; }
	#archive-posts ul li .post-time { display: inline-block; width: 25%; margin-right: 5px; }
	#sidebar ul li {
		list-style-type: none;
		margin-left: 1em;
	}
		#sidebar ul li:before {
			display: block;
			float: left;

			width: 0.7em;
			margin-left: -0.7em;
			margin-top: -0.12em;
			content: "›";
			font-weight: 300;
			font-size: 140%;
			color: #555;
		}


p { }

table {
	width: 100%;
}
table td {
	border: 1px solid #ccc;
	background-color: #f6f6f6;
	padding: 3px;
}
table th {
	text-align: left;
}

/*  TEMPLATES
 *
 */

/*  Aligned images
 *  Usage: TinyMCE
 *
 */

.alignright { float: right; margin: 0 0 0 20px; }
.alignleft { float: left; margin: 0 20px 0 0; }

.alignright a, .alignleft a, .aligncenter a {
	border-bottom: none;
}

img.alignright, img.alignleft, img.aligncenter,
.alignright img, .alignleft img, .aligncenter img {
	border-radius: 3px;
}

.wp-caption-text {
	text-align: center;
	color: #999;
	padding-bottom: 0.3em;
}

.aligncenter {
	display: block;
	margin: 0 auto;
}

/*  Gallery styling
 *  Usage: WordPress
 *
 */
div.gallery {
	width: 100%;
}

div.gallery:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

div.gallery figure {
	float: left;
	margin: 0 0 1em 0;

	text-align: center;
}
	div.gallery-columns-2 figure { width: 48%; margin-right: 2%; }
	div.gallery-columns-3 figure { width: 31%; margin-right: 2%; }
	div.gallery-columns-4 figure { width: 23%; margin-right: 2%; }

	/* The CSS3 way */
	div.gallery-columns-2 figure:nth-child(odd) { width: 49%; margin-right: 1%; }
	div.gallery-columns-2 figure:nth-child(even) { width: 49%; margin-left: 1%; margin-right: 0; }

	div.gallery-columns-3 figure:nth-child(1n+1) { width: 32%; margin-left: 0; margin-right: 0; }
	div.gallery-columns-3 figure:nth-child(3n+2) { margin-left: 2%; margin-right: 2%; }

	div.gallery-columns-4 figure:nth-child(1n+1) { width: 23.5%; margin-right: 0; }
	div.gallery-columns-4 figure:nth-child(4n+2) { margin-left: 2%; margin-right: 1%; }
	div.gallery-columns-4 figure:nth-child(4n+3) { margin-left: 1%; margin-right: 2%; }

div.gallery figure img {
	max-width: 100%;
	height: auto;

	border-radius: 3px;
	box-shadow: 1px 1px 5px rgba( 0, 0, 0, 0.2 );
}

div.gallery a {
	border-bottom: none;
}

/*  Preface
 *  Usage: manual
 *
 */
p.preface {
	margin: 2em 0;
	padding: 1.5em 0;

	word-spacing: 0.2em;
	line-height: 1.8em;

	font-size: 90%;
	font-weight: 600;
	border-top: 1px solid #d2d2d2;
	border-bottom: 1px solid #d2d2d2;
}


/*  Section highlighting
 *  Usage: TinyMCE
 *
 */
.hb {
	margin: 1em -35px 1em -35px;
	padding: 1em 35px 1em 35px;

	color: #222;
	color: rgba( 0, 0, 0, 0.8 );

	border-top: 0.5em solid rgba( 255, 255, 255, 0.2 );

	font-size: 100%;
}
	.hb + .hb {
		margin-top: -1.5em;
		border-top: none;
	}

	.hb + h2,
	.hb + * > h2 {
		border-top: none;
	}

	/* Links */
	.hb a {
		color: #fafafa;
		color: rgba( 255, 255, 255, 0.9 );
	}
		.hb a:hover,
		.hb a:active,
		.hb a:focus {
			border-bottom: 1px solid #eee;
			border-bottom: 1px solid rgba( 255, 255, 255, 0.9 );
		}

	/* Code blocks */
	.hb.black code { background-color: #0a0a0a; }
 	.hb.blue code { background-color: #295d94; }
	.hb.green code { background-color: #5b8c33; }
	.hb.pink code { background-color: #b45e82; }

	.hb.blue code,
	.hb.green code,
	.hb.pink code {
		color: #eee;
		color: rgba( 255, 255, 255, 0.9 );
	}

	/* Header */
	.hb h2 {
		margin-top: 0.4em;
	 	margin-bottom: 0.4em;

		color: #fff;
		color: rgba( 255, 255, 255, 0.9 );

		font-size: 150%;
	}
		.hb h2:first-child {
			margin-top: 0;
		}

	/* Images */
	.hb .alignright,
	.hb .alignleft {
		margin-top: 2em;
	}
		.hb .alignright img,
		.hb .alignleft img {
			border-bottom: 7px solid rgba( 255, 255, 255, 0.5 );
		}

	.hb .wp-caption-text {
		background-color: #fafafa;
		background-color: rgba( 255, 255, 255, 0.5 );
		color: #111;
		color: rgba( 0, 0, 0, 0.8 );
		font-size: 80%;
	}

	/* Colors */
	.hb.black {
		background-color: #222;
		background-color: rgba( 0, 0, 0, 0.9 );
		color: #fafafa;
		color: rgba( 255, 255, 255, 0.8 );
	}
		.hb.black a {
			color: #286db6;
			color: rgba( 44, 130, 221, 0.8 );
		}
	.hb.blue {
		background-color: #2f6cad;
		background-color: rgba( 0, 77, 158, 0.8 );
		color: #fafafa;
		color: rgba( 255, 255, 255, 0.8 );
	}
	.hb.green {
		background-color: #6ba43c;
		background-color: rgba( 74, 145, 15, 0.8 );
	}
	.hb.pink {
		background-color: #d36e99;	
		background-color: rgba( 204, 78, 131, 0.8 );
	}
	.hb.white {
		background-color: #fff;
		background-color: rgba( 255, 255, 255, 0.95 );
		border-top: 0.5em solid rgba( 0, 0, 0, 0.03 );
	}
		.hb.white a {
			color: #286db6;
			color: rgba( 44, 130, 221, 0.85 );
		}
			.hb.white a:hover,
			.hb.white a:active,
			.hb.white a:focus {
				border-bottom: 1px solid #111;
				border-bottom: 1px solid rgba( 0, 0, 0, 0.9 );
			}
		.hb.white h2 {
			color: #4c4c4c;
			color: rgba( 0, 0, 0, 0.7 );
		}
		.hb.white + .hb {
			border-top: 0.5em solid rgba( 255, 255, 255, 0.2 );
		}


/*  Button styles
 *  Usage: TinyMCE, manual
 *
 */

a.button {
	display: inline-block;

	margin: 0 1em 0.5em 0;
	padding: 0.5em 0.75em;

	background-color: #fff;
	box-shadow: 0 0 5px rgba( 0, 0, 0, 0.1 );

	border: none;
	border-bottom: 2px solid #ccc;
}
	a.button:hover, a.button:active, a.button:focus {
		box-shadow: 0 0 5px rgba( 0, 0, 0, 0.3 );
		border-bottom: 2px solid #999;
	}
	a.button:after {
		display: block;
		float: right;

		content: "›";
		font-weight: 300;
		font-size: 140%;
		margin: -0.1em 0 0 0.5em;
		color: #555;
	}
	a.button.primary {
		border-bottom: 2px solid #7cb8f7;
	}
		a.button.primary:hover, a.button.primary:active, a.button.primary:focus {
			border-bottom: 2px solid #2c82dd;
		}
	a.button.back:after {
		float: left;
		content: "‹";
		margin: -0.1em 0.5em 0 0;
	}
	a.button.clean:after {
		margin: 0;
		content: "";
	}

/*  List in columns
 *  Usage: TinyMCE
 *
 */
ul.columnlist {
	-moz-column-gap: 1em;
	-webkit-column-gap: 1em;
	column-gap: 1em;

	-moz-column-count: 3;
	-webkit-column-count: 3;
	column-count: 3;
}

/*  Classes for menus
 *  Usage: manual
 *
 */
.menu .strong {
	font-weight: 600;
}

/*  Boxed content
 *  Usage: template_blank.php, TinyMCE, (template_gallery.php)
 *
 */
.boxed {
	margin-bottom: 1em;

	background-color: #fff;
	border-radius: 3px;
	box-shadow: 0 0 5px rgba( 0, 0, 0, 0.05 );
}
	.boxed h2 {
		margin-top: 0;
	}
	h1.boxed {
		padding: 0.3em 35px;
	}
	div.boxed {
		padding: 35px;
	}
		div.boxed *:last-child {
			margin-bottom: 0;
		}

/*  Featured image
 *  Usage: content.php
 *
 */
.post-thumbnail {
	float: right;
	margin: -1em 0 2em 2em;

	max-width: 400px;
	height: auto;
}
	body.home .post-thumbnail {
		margin-top: 0;
	}
	/* Adjust the inline header on the front page to allow the floating image */
	body.home .post-post h1 {
		display: inline;
	}
		body.home .post-post h1:after {
			display: block;
			content: "";
			margin-bottom: 1em;
		}

/*  Featured image alignment in a gallery
 *  Usage: template_featured-gallery.php
 *
 */
.featured {
	margin-bottom: 2em;
}

	.featured .image {
		float: left;

		width: 50%;
	}
		.featured .image img {
			max-width: 100%;
			float: right;
			height: auto;

			border-radius: 3px;
			box-shadow: 1px 1px 5px rgba( 0, 0, 0, 0.2 );
		}

	.featured .description {
		float: right;
		width: 45%;
	}

		.featured .description h2:first-child {
			margin-top: 0;
		}

/*  Information boxes (in two columns)
 *  Usage: manual
 *
 */
.infoboxes {
	display: flex;
	flex-wrap: wrap;
	justify-content:
	space-between;
}
	.infoboxes div.box {
		flex-grow: 1;
		width: 33.3%;
		line-height: 1.8em;
		padding: 1em 1.5em;
		background-color: #fff;
		border-top: 0.5em solid rgba( 0, 0, 0, 0.075 );
	}
		.infoboxes div.box:nth-child(odd) { margin: 0 1em 2em 0; }
		.infoboxes div.box:nth-child(even) { margin: 0 0 2em 1em; }
		.infoboxes h3 { margin-top: 0; }

	h2 + .infoboxes { margin-top: 2em; }

@media screen and (max-width: 800px) {
	.infoboxes {
		display: block;
	}
	.infoboxes div.box {
		width: auto;
		margin: 0 0 1em 0 !important;
	}
}
@media screen and (max-width: 600px) {
	.infoboxes div.box {
		padding: 0.7em 1em;
	}
}