/*  
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
*/

/* Initial styles to minimize browser differences (inspired by Faruk Ates): */
html, body, form, fieldset {font:1em/1.5em /*"DejaVu Sans",*/ "Trebuchet MS", serif, georgia;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 */
p:hover ins, ins:hover { text-decoration:none}
/* Form field text-scaling */
input, select, textarea {font:1em/1.2em "Trebuchet MS", serif, georgia}
/* 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 url(images/background.jpg) no-repeat fixed top center;color:#333}
h1, h3, h4, h5, h6 {color:#090;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;margin:0 0 0 0;padding:110px 10px 20px 10px;color:#fff;text-align:right;}
h2 {color:#0a0;font-size:1.5em}
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;border:1px solid #ccc;}
	textarea {background:url(images/postcomment_bg1.jpg) no-repeat center;height:196px;padding:2px;width:100%;} /* the image is 200px, -2px padding on both sides makes 196px */
input:focus, textarea:focus, select:focus {background:#efd;border-color:#090}
	textarea:focus {background:url(images/postcomment_bg2.jpg) no-repeat center}
blockquote {background:#cf9 url(images/blockquote_bg.jpg) no-repeat bottom right;border-left: 5px solid #0b0;padding: 2px;}
	.blockquotesource {background:#eee;display: block;margin: 0 -2px -2px -2px;padding-left: 4px;}
	blockquote > h3 {margin-top:0;}
	blockquote > p {margin:-2px;padding:2px;}
pre {background:#eee;color:#000;font-family:Tahoma, courier, monospace;white-space:pre;border:1px solid #090;padding:2px;border-left-width: 5px;cursor: text;overflow: auto}
code {background:#eee;color:#000;font-family:Tahoma, courier, monospace;white-space:pre;}
.small {font-size:0.9em;color:#999;}

/* Layout */
#wrapper {position:relative;margin:0 auto;max-width:550px;background:#fff;border:1px solid #eee;border-width:0 1px}
	#header {background:#090 url(images/head.png);height:200px;}
		#nav {margin:0;padding:0;background:url(images/head_menu.png);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)}
	#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 {
}
.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 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}
		#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;}

.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;
}
.sidenote:before { content: '\2190' ' '; }
.sidenote:hover {
	background: #ff0;
}
/* enable usage of code in sidenotes without the layout breaking  */
.sidenote code {
	white-space: normal;
}
/* for bigger sidenotes */
.sidenote h1, .sidenote h2, .sidenote h3, .sidenote h4, .sidenote h5, .sidenote h6 {display: inline;font-size: 1em;}
.sidenote p {margin: 0}
/* sidenote2 for the Javascript */
.sidenote2 {
	border-right:1px;
	margin: 0;
	margin-right:-228px;
}
@media all and (max-width: 350px) {
	.sidenote {
		display: inline;
		float: none;
		border: 0;
		margin: 0;
	}
	.sidenote:before {content:"";}
}
@media all and (min-width: 750px) {
	#wrapper{margin-right:207px}
	.sidenote {
		border-right:1px;
		margin: 0;
		margin-right:-228px;
	}
}
@media all and (min-width: 980px) {
	#wrapper{margin-right:auto}
}

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

	abbr, acronym { border:0 }
	
	a, 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 {border-color:#000}
	
	#header{height:0}
	#wrapper{margin-right:auto;max-width:100%;border:0}
	
	.sidenote {margin-right: -20px;}
}