/*  ###########################################################################
    Author:     C. Egor Kloos
    date:       February 2011
    ########################################################################### */

@media screen {
	/* float value: left, right, none */
	.box {
		margin: 0 0 1.4000000000000001em;
		padding: 1.4000000000000001em 19.2px;
	}
	.box-inset {
		margin: -1.4000000000000001em -19.2px;
		padding: 0.7000000000000001em 19.2px;
	}
	/*  Font elements ------------------------------------------------------------- */
	@font-face {
		font-family: 'SourceSansPro';
		src: url('../fonts/SourceSansPro-Regular-webfont.woff') format('woff');
		font-weight: normal;
		font-style: normal;
	}
	@font-face {
		font-family: 'SourceSansPro';
		src: url('../fonts/SourceSansPro-It-webfont.woff') format('woff');
		font-weight: normal;
		font-style: italic;
	}
	@font-face {
		font-family: 'SourceSansPro';
		src: url('../fonts/SourceSansPro-Bold-webfont.woff') format('woff');
		font-weight: bold;
		font-style: normal;
	}
	@font-face {
		font-family: 'SourceSansPro';
		src: url('../fonts/SourceSansPro-BoldIt-webfont.woff') format('woff');
		font-weight: bold;
		font-style: italic;
	}
	@font-face {
		font-family: 'SourceSansPro';
		src: url('../fonts/SourceSansPro-Light-webfont.woff') format('woff');
		font-weight: lighter;
		font-style: normal;
	}
	@font-face {
		font-family: 'SourceSansPro';
		src: url('../fonts/SourceSansPro-LightIt-webfont.woff') format('woff');
		font-weight: lighter;
		font-style: italic;
	}
	/*  TYPOGRAPHIC FONT SCALE ---------------------------------------------------- */
	.background-clip {
		-moz-background-clip: padding;
		-webkit-background-clip: padding-box;
		background-clip: padding-box;
	}
	.clear-fix {
		content: '\0020';
		display: block;
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 0;
	}
	/*  HTML5 display-role reset for older browsers ------------------------------- */
	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	menu,
	nav,
	section {
		display: block;
	}
	audio,
	canvas,
	video {
		display: inline-block;
	}
	/*  Basic front-end patterns  ------------------------------------------------- */
	body {
		margin: 0;
		font-style: normal;
		font-weight: normal;
		font-family: 'SourceSansPro', Helvetica, Arial, sans-serif;
	}
	ul,
	ol {
		margin-left: 0;
		padding: 0;
	}
	li ul,
	li ol {
		margin-left: 1.4000000000000001em;
	}
	ol ol {
		margin-left: 1.4000000000000001em;
		list-style-type: lower-alpha;
	}
	ol ol ol {
		margin-left: 1.4000000000000001em;
		list-style-type: lower-roman;
	}
	dl {
		margin-left: 0;
		padding: 0;
	}
	dt {
		margin-left: 0;
		font-weight: bold;
	}
	dd {
		margin-left: 0;
		display: list-item;
		list-style-type: disc;
		font-style: italic;
	}
	img {
		border: 0;
		-ms-interpolation-mode: bicubic;
	}
	code {
		white-space: pre;
	}
	hgroup {
		padding: 0 0 1.4000000000000001em 0;
		line-height: 1;
	}
	blockquote {
		text-align: right;
		font-style: italic;
	}
	blockquote:before,
	blockquote:after,
	q:before,
	q:after {
		content: '';
	}
	blockquote,
	q {
		quotes: '' '';
	}
	[hidden] {
		display: none;
	}
	/*  Headings ------------------------------------------------------------------     
                  
      1.  Added OO CSS classes to enable consistant and interchangable headings
          These can be used internally via LESS to extend more cleanly 
      2.  Setting margin to zero seems to be more usefull across typograhpic patterns
      
      */
	.h0 {
		margin: 1.4000000000000001em 0 0 0;
		font-style: normal;
		font-weight: lighter;
		font-size: 3.6em;
		line-height: 1;
		font-family: 'SourceSansProLight', Helvetica, Arial, sans-serif;
	}
	h1,
	.h1 {
		margin: 1.4000000000000001em 0 0 0;
		font-style: normal;
		font-weight: normal;
		font-size: 2.6em;
		line-height: 1;
		font-family: 'SourceSansPro', Helvetica, Arial, sans-serif;
	}
	h2,
	.h2 {
		margin: 1.4000000000000001em 0 0 0;
		font-style: normal;
		font-weight: lighter;
		font-size: 2.1em;
		line-height: 1;
		font-family: 'SourceSansPro', Helvetica, Arial, sans-serif;
	}
	h3,
	.h3 {
		margin: 1.4000000000000001em 0 0 0;
		font-style: normal;
		font-weight: lighter;
		font-size: 1.8em;
		line-height: 1;
		font-family: 'SourceSansPro', Helvetica, Arial, sans-serif;
	}
	h4,
	.h4 {
		margin: 1.4000000000000001em 0 0 0;
		font-style: normal;
		font-weight: normal;
		font-size: 1.4em;
		line-height: 1;
		font-family: 'SourceSansPro', Helvetica, Arial, sans-serif;
	}
	h5,
	.h5 {
		margin: 1.4000000000000001em 0 0 0;
		font-style: normal;
		font-weight: normal;
		font-size: 1.2em;
		line-height: 1;
		font-family: 'SourceSansPro', Helvetica, Arial, sans-serif;
	}
	h6,
	.h6 {
		margin: 1.4000000000000001em 0 0 0;
		font-style: normal;
		font-weight: normal;
		font-size: 1.1em;
		line-height: 1;
		font-family: 'SourceSansPro', Helvetica, Arial, sans-serif;
	}
	/*  tables still need 'cellspacing="0"' in the markup ------------------------- */
	table {
		border-collapse: separate;
		border-spacing: 0;
	}
	caption,
	th,
	td {
		padding: 0.2em 9.6px;
		text-align: left;
		vertical-align: top;
		line-height: 1.2;
		background: inherit;
	}
	th {
		font-weight: bold;
	}
	/*  links --------------------------------------------------------------------- */
	a {
		text-decoration: none;
		color: #6093c8;
		background-repeat: no-repeat;
	}
	a:visited {
		color: #6093c8;
	}
	a:hover {
		text-decoration: none;
		color: #222222;
		outline: 0;
	}
	a:active {
		text-decoration: none;
		color: #222222;
		outline: 0;
	}
	a:focus {
		outline: thin dotted;
	}

	/*  ###########################################################################
      company:    Dutch Celt Design
      date:       April 2009 - 2012
      author:     C. Egor Kloos
      ########################################################################### */
	/*  LAYOUT -------------------------------------------------------------------- */
	body {
		display: flex;
		flex-direction: column;
		align-items: center;
		line-height: 1.6;
		color: #4d6071;
		background-color: #ffffff;
	}
	header {
		position: relative;
		display: block;
		background: #ff9a00;
		color: #ffffff;
	}
	main {
		padding-block: 2rem;
		padding-inline: 4rem;
		max-width: 100ch;
	}
	/*  HEADER ------------------------------------------------------------------- */
	header h2 {
		margin: 0;
		padding: 1.2em 0 0 0;
		text-align: right;
		font-size: 1em;
	}
	#pull-view {
		position: absolute;
		left: 20px;
		bottom: 0;
		z-index: 42;
		width: 12px;
		height: 12px;
		text-align: center;
		font-size: 0.6em;
		background: #4782bc;
		color: #c4d0de;
		text-shadow: none;
		cursor: pointer;
	}
	/*  HEADERS ------------------------------------------------------------------- */
	#tagline {
		text-align: left;
		line-height: 2;
		max-width: 960px;
		margin: 0 auto;
		-webkit-box-sizing: border-box;
		/* content-box */

		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	#tagline span {
		display: inline-block;
		margin-left: 40%;
		padding: 0 0.5em;
	}
	/*  CONTENT ------------------------------------------------------------------- */
	#content {
		margin: 1em auto;
		padding: 1.4000000000000001em 0 3em;
		overflow: hidden;
		max-width: 960px;
	}
	#content article {
		position: relative;
		display: block;
		margin: 0 0 2em 0;
		padding: 0 0 0 40%;
		width: 60%;
		color: #4d6071;
	}
	#content article ~ article {
		margin: 2em 0;
	}
	#content article h1 {
		position: absolute;
		left: 0;
		float: left;
		padding: 0;
		width: 38%;
		text-align: right;
		font-size: 3em;
		color: #4d6071;
	}
	/* article h2 {
		position: absolute;
		left: 0;
		float: left;
		padding: 0;
		width: 38%;
		text-align: right;
		font-size: 2em;
		line-height: 1;
		color: #4d6071;
	} */
	#content article code {
		color: #57c26c;
	}
	#content article p img {
		float: right;
		margin: 0 0 0.5em 15px;
		max-width: 550px;
	}
	#content article .byline {
		text-transform: uppercase;
		font-size: 0.7em;
	}
	#content article .comments {
		border-bottom: 1px solid #414a4e;
	}
	/*  HOMEPAGE ------------------------------------------------------------------ */
	#home header {
		position: static;
		display: block;
		background-size: cover;
	}
	/*  OTHER --------------------------------------------------------------------- */
	.timestamp {
		--border-color: color(display-p3 0.698 0.698 0.698);
		border-top: 1px var(--border-color, gray) solid;
		border-bottom: 1px var(--border-color, gray) solid;
		padding-block: 0.5rem;
	}
	.timestamp::before {
		content: 'Posted on: ';
	}
	.trackback {
		margin: 2em 0 -0.5em 0;
		border-top: 1px dotted DarkGrey;
		padding: 0.5em 0 0 15px;
		font-size: 0.8em;
		background: transparent url(/images/site/bullit-arrow-link-ie.gif) no-repeat 0 50%;
	}
	.todo {
		color: Silver;
	}
	.done {
		color: LightGreen;
	}
	.footnote {
		margin-top: 2em;
		border-top: 1px dotted DarkGrey;
		font-size: 0.8em;
		color: DarkGrey;
	}
	.logo {
		position: absolute;
		top: 0.7em;
		left: 1em;
		z-index: 4242;
		text-transform: lowercase;
		font-size: 1.6em;
	}
	.logo:before {
		display: inline-block;
		content: '\2605';
		font-family: Arial, sans-serif;
		color: #ff9a00;
		-moz-transform: rotate(15deg);
		-webkit-transform: rotate(15deg);
		-ms-transform: rotate(15deg);
		transform: rotate(15deg);
	}
	.mirror {
		display: inline-block;
		-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
		-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
		-o-transform: matrix(-1, 0, 0, 1, 0, 0);
		transform: matrix(-1, 0, 0, 1, 0, 0);
	}
	/*  FOOTER -------------------------------------------------------------------- */
	footer {
		position: absolute;
		z-index: 42;
		top: 120px;
		left: 0;
		display: block;
		margin: 0;
		padding: 0;
		width: 100%;
		height: 25px;
		text-align: left;
	}
	h6#copyright {
		margin: 0;
		padding: 0;
		font-size: 0.6em;
		line-height: 3;
	}
	.page-walker {
		padding: 1em 0;
	}

	/*  ###########################################################################
      Author:     Dutchcelt Design
      ########################################################################### */
}
@media screen and (max-width: 42em) {
	body {
		padding: 0;
	}
	main {
		padding-block: 0;
		padding-inline: 1rem;
	}
	nav {
		margin: 0;
	}
	nav ul {
		margin: 4em 0 0.5em 1em;
	}
	nav li {
		margin: 0;
	}
	#content article {
		padding: 0.5em 4% 0.5em 4%;
		width: 92%;
		font-size: 1.2em;
	}
	article h2,
	#content article h1 {
		position: static;
		float: none;
		width: 100%;
		text-align: left;
	}
	article h2,
	article h3 {
		font-size: 1.6em;
	}
	#content article h1 {
		font-size: 2.4em;
	}
	#tagline {
		line-height: 1;
	}
	#tagline span {
		margin-left: 0;
		padding: 0 1em;
	}
}
@media screen and (min-width: 42em) and (max-width: 1024) {
	body {
		padding: 0 4% 0 4%;
	}
	main {
		padding-block: 1rem;
		padding-inline: 2rem;
	}
	nav {
		margin-left: 4%;
		margin-right: 4%;
	}
}