/*  
Theme Name: Moss
Theme URI: http://nothing/yet/
Description: A simple HTML 4.01 Strict theme. Loosely based upon Almost Spring.
Version: 1.0 Beta
Author: Frans de Jonge
Author URI: http://frans.lowter.us
*/

@font-face {
    font-family: 'DeutschGothicNormal';
    src: url('Deutsch-webfont.eot');
    src: url('Deutsch-webfont.eot?#iefix') format('embedded-opentype'),
         url('Deutsch-webfont.woff') format('woff'),
         url('Deutsch-webfont.ttf') format('truetype'),
         url('Deutsch-webfont.svg#DeutschGothicNormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Initial styles to minimize browser differences (inspired by Faruk Ates): */
html, body, form, fieldset {font:1em/1.5 "DejaVu Sans", "Trebuchet MS", sans-serif;text-align:left; margin:0; padding:0}
/* Neutralize styling: Elements with a vertical margin: */
h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address {margin:1em 0;padding:0}
/* Nested lists don't get a (vertical) margin */
ol ol, ol ul, ol dl, ul ul, ul ol, ul dl, dl ol, dl ul, dl dl {margin:0}
/* Unifying display of nested unordered lists: 2 deep uses a circle (like Fx) */
ul ul, ol ul {list-style-type: circle}
/* Unifying display of nested unordered lists: 3 deep (& more) uses a square (like Fx) */
ul ul ul, ul ol ul, ol ol ul, ol ul ul {list-style-type: square}
/* Apply left margin: Only to the few elements that need it: */
li, dd, blockquote {margin-left:1em}
/* Miscellaneous conveniences: */
form label {cursor:pointer}
fieldset {border:none}
abbr, acronym {font-variant:small-caps}
/* neutralize Gecko border around linked images */
a img, a:hover img {border:none;}
/*q { quotes: '\201C' '\201D' '\2018' '\2019'; }*/ /* nice en-us quotes in all browsers that support this, rather than just Gecko */
q { quotes: none } /* Changed my mind, I'd rather have hard-coded quotes in Links2, IE, etc. than generated content. */
p:hover ins, ins:hover { text-decoration:none}
p {margin:0}
p+p, p+aside+p {text-indent:2em}
/* Form field text-scaling */
input, select, textarea {font:1em/1.5 "DejaVu Sans", "Trebuchet MS", sans-serif}
/* Trebuchet MS and many other fonts don't have proper IPA characters, this should work on most Linux, Mac, and Windows systems to display them in one consistent manner */
.IPA{font-family: "DejaVu Sans", "Lucida Grande", "Lucida Sans Unicode"}

/* actual page styling*/
html {background:#fff; color:#333; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto;}
h1, h3, h4, h5, h6 {color:#090; font-family:"DejaVu Serif", Georgia, sans; font-variant:small-caps}
h1, h2, h3, h4, h5, h6 {margin-bottom:0}
h1+*, h2+*, h3+*, h4+*, h5+*, h6+* {margin-top:0}
h1 {font-size:1.8em; color:#fff;}
h2 {font-size:1.5em; color:#0a0;}
h3 {font-size:1.2em}
h4 {font-size:1.1em}

a {color: #c30; -o-transition:.2s; -moz-transition:.2s; -webkit-transition:.2s; transition:.2s}
	a:link {text-decoration:underline}
	a:visited {color: #c60}
	a:hover, a:active {color: #6c0}
	a:link[href^=http]:not([href*="fransdejonge.com"]):not([href^="#"])::after {color:#6cf; content:"\21D7"}
abbr, acronym {border-bottom:1px dotted #c30}
input, textarea, select {color:#333; background:#eee; background:rgba(230,230,230,.6);border:1px solid #ccc; border-radius:1em;}
	#textarea-container {background:url(images/post-comment.jpg) no-repeat center; border-radius:1em; padding:0;}
	textarea {display:block; height:200px; width:100%; box-sizing:border-box; padding:.5em; -o-transition:height 1s;-moz-transition:height 1s;-webkit-transition:height 1s;transition:height 1s;}
input:focus, textarea:focus, select:focus {background-color:#efd;background-color:hsla(90,100%,93%,.6);border-color:#090}
blockquote {background:#cf9 url(images/blockquote_bg.jpg) no-repeat bottom right; background-size:cover; border-left:.5em solid #0b0; padding:.5em;}
	.blockquotesource {background:#eee; display:block; margin:0 -.5em -.5em -.5em; padding-left:.5em;}
	blockquote > h3 {margin-top:0;}
	blockquote > p {margin:-.5em;padding:.5em;}
pre, code {background:#eee; color:#000; font-family:"DejaVu Sans Mono", Tahoma, courier, monospace; white-space:pre-wrap; -o-tab-size:2;-moz-tab-size:2;tab-size:2; -moz-hyphens:none;-webkit-hyphens:none;hyphens:none}
	.poetry {font-family:inherit}
	/* selectors and some values based on the PrismJS stylesheet by Lea Verou; pending further customization */
	.token.comment, .token.prolog, .token.doctype, .token.cdata {color:darkslategray}
	.token.punctuation {color:#999}
	.namespace {opacity:.7}
	.token.property, .token.tag, .token.boolean, .token.number {color:#905}
	.token.selector, .token.attr-name, .token.string {color: #690}
	.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string {color:#a67f59; background: hsla(0,0%,100%,.5)}
	.token.atrule, .token.attr-value, .token.keyword {color:#07a}
	.token.regex, .token.important {color:#e90}
	.token.important {font-weight:bold}
	.token.entity {cursor:help}
	pre[data-line] {position:relative; padding:1em 0 1em 3em;}
	.line-highlight {position:absolute; left:0; right:0; padding:inherit 0; margin-top:1em; /* Same as .prism's padding-top */ background: hsla(24, 20%, 50%,.08); background: -moz-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); background: -webkit-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); background: -o-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); background: linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));line-height: inherit;}
	.line-highlight:before, .line-highlight[data-end]:after {content: attr(data-start); position: absolute; top: .4em; left: .6em; min-width: 1em; padding: 0 .5em; background-color: hsla(24, 20%, 50%,.4); color: hsl(24, 20%, 95%); font: bold 65%/1.5 sans-serif; text-align: center; vertical-align: .3em; border-radius: 999px; text-shadow: none; box-shadow: 0 1px white}
	.line-highlight[data-end]:after {content: attr(data-end); top: auto; bottom: .4em}	
	.token.tab:not(:empty):before, .token.cr:before, .token.lf:before {color:hsl(24, 20%, 85%)}
	.token.tab:not(:empty):before {content: '?'}
	.token.cr:before {content: 'CR'}
	.token.lf:before {content: 'LF'}
	.token a {color: inherit}
pre {border:1px solid #090; padding:.5em; border-left-width:.5em; border-bottom-left-radius:2em; border-top-right-radius:1em; cursor: text; overflow: auto}
.small {font-size:0.9em;color:#999;}
table {border-collapse:collapse;}
	th,td {border:1px solid #0b0;}
	th, td {padding:.3em}
	th {background:#0d0}
	tr {background:#cf9}
	tr:nth-child(odd) {background:#efd}
	tr:hover {background:transparent}

/* Layout */
body {position:relative;margin:0 auto;max-width:800px;background:#fff;border:1px solid #eee;border-width:0 1px}
	#header {background:#090 url(images/head.jpg);height:200px;-o-transition: height 1s;-moz-transition: height 1s;-webkit-transition: height 1s;transition: height 1s;}
		h1 {-o-transition: padding-top 1s; -moz-transition:padding-top 1s; -webkit-transition:padding-top 1s; transition:padding-top 1s;}
		#nav {margin:0;padding:0;background:#ccc url(images/head_menu.png);background:rgba(228,228,228,.7);width:100%;text-align:center;border:1px solid #eee;border-width:1px 0;}
		#nav li {display:inline;display:inline-block;margin:0;padding:0;border-left:1px solid #eee; font-style:italic; vertical-align:middle}
		#nav li:first-child {border:0}
		#nav a {-moz-border-radius:1.5em;border-radius:1.5em;padding:1em;color:#000;text-decoration:none}
		#nav a:hover {background:#eee url(images/head_menu_hover.png);background:rgba(255,255,255,.7);transform:scale(1.1)}
		#feed_link {float:right}
			#feed_link svg {vertical-align:middle}
	#content {padding:0 1em}
	#copyright {margin:0;padding:0;border:1px solid #eee;border-width:1px 0;clear:both;font-size:0.9em;text-align:center}

/* Blog */
.post {margin:0 -20px; padding:0 20px; border-bottom:1px solid #eee;}
	.post img, .comment img {max-width:100%}
.posttitle {font-variant:small-caps;margin-bottom: 0;margin-left:-10px;color:#fff;}
	.posttitle a {padding:0 10px; display:inline-block; background:#0b0; background:linear-gradient(225deg, transparent 8px, #0b0 8px)}
	.posttitle a:link, .posttitle a:visited {color:#fff;text-decoration:none}
	.posttitle a:hover, .posttitle a:active {background:#6c0; background:linear-gradient(225deg, transparent 8px, #6c0 8px)}
.postmeta {margin-top:0;margin-left:-10px;padding-left:10px;padding-top:1px;color:#999;background:url(images/postmeta.gif) no-repeat top left;}
.postentry {text-align:justify}
	/* Commented out the situation before trying webfonts.*/
	/*.postentry:first-letter{font-size:3em;line-height:1em;margin-right:.1em;float:left}*/
	.postentry > p:first-child::first-line{font-variant:small-caps;}
	.postentry > p:first-child::first-letter{font-family: "DeutschGothicNormal";font-size:4em;line-height:1em;margin-top:.1em;margin-right:.1em;float:left}
	/* There are some interesting inconsistencies in first-line and first-letter handling across browsers. This seems to take care of displaying consistently in most. */
	/*.postentry p:first-child:first-letter{font-size:3em;line-height:1em;margin-right:.1em;float:left}*/
.permalink {margin: 0 1.8em 0 0; padding:0 0 0 14px; background:url(images/permalink.gif) no-repeat center left;}
.commentslink {padding:0 0 0 17px; background:url(images/commentslink.gif) no-repeat center left;}

.conv {background:#efd; border: 2px solid #0b0; border-width: 2px 0}

/* list of pictures with commentary */
ol.photos {list-style:none}
	.photos li {margin-left:0;margin-bottom:1em;padding:3px;background:#cf9;border:2px solid #0b0;border-bottom-width:5px}
	.photos img {display:block; margin:auto}
	.photos li p:first-child {margin-top:0}
	.photos li p:last-child {margin-bottom:0}
/* new HTML 5 picture display, replicating the old one 2013-07-14 */
figure {margin: 1em 0; padding: 1em; background: #cf9; border: 2px solid #0b0; border-bottom-width: 5px; border-radius: 0 1em 0 2em}
	figure img, figure object, figure svg {display:block; margin: auto}
	figure svg {width:100%/*what follows is because Webkit/Blink is broken https://bugs.webkit.org/show_bug.cgi?id=68995*/;height:100%}
	figure figcaption {margin-top: 1em}

/* Comments */
#commentlist {margin: 1.2em 0;padding:0;list-style-type: none;}
#commentlist li {margin:1em 0;padding:0;}
	#commentlist div.comment {background: url(images/comment_bg.gif) no-repeat bottom right; background-size: cover}
	#commentlist .alt {background-image: url(images/comment_alt_bg.gif)}
	#commentlist div.comment {margin:0; padding:1em; border:1px solid #090; border-width:1px 1px 0 1px; border-radius:1em 1em 0 0;}
		#commentlist li:hover div.comment {border-color:#ddd}
		#commentlist li:hover .commentmeta, #commentlist li:hover .commentmeta img {border-color:#ccc}
		#commentlist .comment p {margin:1em 0 0;}
		#commentlist .comment p:first-child {margin-top:0;}
		.update {padding:0 .5em;margin:1em;background:#cf9;border:1px solid #eee}
		.update:before {content:"Update: ";font-weight:bold}
	.commentmeta {margin-top:0;padding-left:65px;color:#999;background:#fff;border:1px solid #090;}
		.commentmeta img {margin-left:-65px;background:#eee url(images/no_grav.gif);position:absolute;height:48px;width:48px;border:1px solid #090;border-width:0 1px 0 9px}
		.commentmeta .permalink {margin-right:.4em;background:none;float:right;text-align:right}

.required input, .required textarea, input.error:focus {background:#fc3}
.error, input.error {padding-left:0;background: #f3a36d;}
	/*.required input:focus, .required textarea:focus {background: #fc3;}*/
	.error {padding-left:.2em;font-weight:bold}
		textarea.error {background:url(images/postcomment_error_bg1.jpg) no-repeat center;}
		textarea.error:focus {background:url(images/postcomment_error_bg2.jpg) no-repeat center;}
label.required {color: #f00}

aside {
	background: #efd;
	display: block;
	float: right;
	clear: right;
	width: 200px;
	border: 1px solid #eee;
	border-right: 0;
	border-radius:1em;
	margin: .5em;
	margin-right: -20px;
	padding: .5em;
	text-indent: 0;
	cursor: help;
	font-size:0.8em;
}
aside:before {content: '\2190' ' '}
aside:hover {background: #ff0}
/* enable usage of code in sidenotes without the layout breaking  */
aside code {white-space: normal}
/* for bigger sidenotes */
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6 {display: inline;font-size: 1em;}
aside p {margin: 0}

/* not ready yet, use meta viewport attribute */
/*@-o-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}*/

@media all and (max-width: 350px) {
	#header{height:auto; background-image:none}
	aside {
		display: inline;
		float: none;
		border: 0;
		margin: 0;
	}
	aside:before {content:"";}
}
@media all and (min-width: 350px) {
	h1 {margin:0 0 0 0;padding:90px 10px 20px 10px;text-align:right;
	/* text-stroke emulation */
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;}
/*aside {position:relative; top:-1.5em}*/
}
@media all and (min-height: 600px) {
	textarea {height:300px}
}
@media all and (min-height: 800px) {
	#header{height:300px;}
		h1{padding-top:190px;}
	textarea {height:400px}
}
@media all and (min-width: 600px) {
	#content {padding:0 2em}
	figure svg {width:80%/*what follows is because Webkit/Blink is broken https://bugs.webkit.org/show_bug.cgi?id=68995*/;height:80%}
}
@media all and (min-width: 800px) {
	html {background:url(images/background.jpg) no-repeat fixed top center}
	body{margin-left:1em; margin-right:207px}
	aside {
		border-right:1px;
		margin: 0;
		margin-right: -228px;
	}
}
@media all and (min-width: 1039px) {
	body {margin-left:auto}
}
@media all and (min-width: 1212px) {
	body{margin-right:auto}
}

/* still working on print stylesheet, but better than nothing */
@media print {
	* {background:none !important}
	html, body {font:12pt "DejaVu Serif", Georgia, serif; color:#000}
	form, #nav, #respond, #respond+p {display:none}
	
	h1 { font-size:1.4em; color:#000; text-shadow:none; margin:1em 0; padding:0}
	h2 { font-size:1.3em; }

	abbr, acronym { border:0 }
	
	a, a:visited, .posttitle a:link, .posttitle a:visited {color:#000}
	a:link::after { content:" ("attr(href)")"; font-size:.9em }
	a:link[href^="/"]::after { content:" (http://fransdejonge.com"attr(href)")"; }
	blockquote, figure, pre, table, tr, th, td {border-color:#000}
	pre, code {white-space:pre-wrap}
	
	#header{height:auto; background:transparent none}
	body{margin-right:auto; max-width:100%}
	body, .post, #copyright {border:none}
	
	aside {margin-right: -20px;}
	
	@page {
		@top { content: flow(header) }
		@bottom {content: "Page " counter(page) " of " counter(pages)}
	}
	h1 { flow: static(header) }
}