/*  
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.5em "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+p, p+aside+p {text-indent:2em}
/* Form field text-scaling */
input, select, textarea {font:1em/1.5em "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}
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}
	a:link {text-decoration:underline}
	a:visited {color: #c60}
	a:hover, a:active {color: #6c0}
	.foreign: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;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;tab-size: 2}
	.poetry {font-family: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 */
#wrapper {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;margin:0;padding:0}
		#nav a {-moz-border-radius:1.5em;border-radius:1.5em;padding:1em;color:#000;text-decoration:none}
		#nav a:hover {color:#000;background:url(images/head_menu_hover.png);background:rgba(255,255,255,.7)}
	#content {padding: 0 20px;}
	#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;width: 100%;color:#fff;overflow:auto;/* Width and overflow to clear '.posttitle a' */}
	.posttitle a {float:left;padding:0 10px;background:#0b0 url(images/posttitle.gif) no-repeat top right;overflow:hidden;}/*overflow:hidden for Webkit which insists on adding some kind of margin*/
	.posttitle a:link, .posttitle a:visited {color:#fff;text-decoration:none}
	.posttitle a:hover, .posttitle a:active {background:#6c0 url(images/posttitle.gif) no-repeat 100% -91px;}
.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 {
}
	/* 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}

/* Comments */
#commentlist {margin: 1.2em 0;padding:0;list-style-type: none;}
#commentlist li {margin:0;padding:0;background:url(images/comment_bg.gif) no-repeat bottom right;}
	.alt {background:#efd url(images/comment_alt_bg.gif) no-repeat bottom right !important}
	.comment {margin:0; padding:1em; border:1px solid #090; border-width:1px 1px 0 1px; border-radius:1em 1em 0 0;}
		#commentlist li:hover .comment {border-color:#ddd}
		#commentlist li:hover .commentmeta, #commentlist li:hover .commentmeta img {border-color:#ccc}
		.comment p {margin:1em 0 0;}
		.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, .sidenote {
	background: #efd;
	display: block;
	float: right;
	clear: right;
	width: 200px;
	border: 1px solid #eee;
	border-right: 0;
	margin: 2px;
	margin-right: -20px;
	padding: 3px;
	text-indent: 0;
	cursor: help;
	font-size:0.8em;
}
aside:before, .sidenote:before { content: '\2190' ' '; }
aside:hover, .sidenote:hover {
	background: #ff0;
}
/* enable usage of code in sidenotes without the layout breaking  */
aside code, .sidenote code {
	white-space: normal;
}
/* for bigger sidenotes */
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6,
.sidenote h1, .sidenote h2, .sidenote h3, .sidenote h4, .sidenote h5, .sidenote h6 {display: inline;font-size: 1em;}
aside p, .sidenote p {margin: 0}

@media all and (max-width: 350px) {
	#header{height:auto; background-image:none}
	aside, .sidenote {
		display: inline;
		float: none;
		border: 0;
		margin: 0;
	}
	aside:before, .sidenote:before {content:"";}
}
@media all and (min-width: 350px) {
	h1 {margin:0 0 0 0;padding:110px 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;}
}
@media all and (min-height: 600px) {
	textarea {height:300px}
}
@media all and (min-height: 800px) {
	#header{height:300px;}
		h1{padding-top:210px;}
	textarea {height:400px}
}
@media all and (min-width: 800px) {
	html {background:url(images/background.jpg) no-repeat fixed top center}
	#wrapper{margin-right:207px;}
	aside, .sidenote {
		border-right:1px;
		margin: 0;
		margin-right:-228px;
	}
}
@media all and (min-width: 1212px) {
	#wrapper{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, ul#nav, h2#respond, h2#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::after { content:" ("attr(href)")"; font-size:.9em }
	a[href^="/"]::after { content:" (http://fransdejonge.com"attr(href)")"; font-size:.9em }
	blockquote, pre, table, tr, th, td {border-color:#000}
	pre, code {white-space:pre-wrap}
	
	#header{height:auto; background:transparent none}
	#wrapper{margin-right:auto; max-width:100%}
	#wrapper, .post, #copyright {border:none}
	
	aside, .sidenote {margin-right: -20px;}
	
	@page {
		@top { content: flow(header) }
		@bottom {content: "Page " counter(page) " of " counter(pages)}
	}
	h1 { flow: static(header) }
}