/*
	This design was inspired from an old design of Denis Defreyne's
	Stoneship blog. However, I havn't looked at that site for months,
	(since it was redesigned, on November 1st, 2005, actually, although
	I have a snapshop somewhere) so I only work by the memory of what I
	liked in that design, mainly its minimality, the absence of sidebar
	(in the new design) and the wide spacing. The red colour may or may
	not have been inspired by that same site, I cannot tell :-)
	
	<http://amonre.org/blog/2005/11/01/rebooted/>
	
	The grey code boxes with a dashed border were inspired from another
	site, although I cannot remember which one. And anyway, there is a
	finite number of ways to style a code box while retaining
	readability :-)
	
	Olivier Scherler, 31 May 2006
*/


/*

Sizes:

	x-large:	18 px /	1.4 em
	large:		16 px /	1.2 em
	normal:		13 px /	1 em
	small:		11 px / 0.85 em
	x-small:	 9 px / 0.7 em

Colours:

	white:			#fff		body bg
	black:			#000		text, pre code

	light grey:		#f4f4f4		pre bg, blockquote bg
	medium grey:	#888		pre border, date header, banner description
	dark grey:		#444		comment header

	dark red:		#b42517		banner, links, hover, blockquote border,
								entry header, bottombar separator
	light red:		#d96758		visited

*/

/* basic elements */

html
{
	margin: 0;
	padding: 0;
}

body
{
	color: #000;
	background: #fff;

	margin: 0;
	padding: 0;

	font-family: "lucida grande", verdana, sans-serif;
	font-size: 13px;
}

h1, h2, h3, h4, h5, h6, p, ol, ul, pre, blockquote
{
	margin-top: 10px;
	margin-bottom: 10px;
}

code
{
	font-family: monaco, monospace;
	font-size: 0.77em;
	padding: 0 0.2em;		/* Great idea. My idea. */

	color: #b42517;
	background: inherit;
}

pre code
{
	padding: 0;
	color: #000;
	background: inherit;
}

pre
{
	margin: 20px 0;
	padding: 10px;
	
	color: inherit;
	background: #f4f4f4;

	border: 1px solid #888;

	/* word wrap is better than a horitontal scroll bar */
	white-space: pre-wrap;			/* css-3 */
	white-space: -moz-pre-wrap;		/* Mozilla, since 1999 */
	white-space: -pre-wrap;			/* Opera 4-6 */
	white-space: -o-pre-wrap;		/* Opera 7 */
	word-wrap: break-word;			/* Internet Explorer 5.5+ */
}

blockquote
{
	margin: 20px;
	/*padding: 1px 10px;*/
	padding: 0 10px;

	color: inherit;
	background: #f4f4f4;

/*	(Clean) hack around IE creeping text bug
	http://www.positioniseverything.net/explorer/creep.html
	There has to be a bottom border if there's a bottom padding
	Otherwise the following elements are left shifted by left border width
	So we put a 1px bottom border the same colour as the background
	And increase the top padding by 1px to compensate the vertical centering
*/
	/*border-style: solid;
	border-width: 0 0 1px 2px;
	border-color: #f4f4f4 #f4f4f4 #f4f4f4 #b42517;
	padding-top: 2px;*/

	border-style: solid;
	border-width: 0 0 0 2px;
	border-color: #b42517;
}

em, strong
{
	color: #b42517;
	background: inherit;
}

a:link
{
	color: #b42517;
	background: inherit;
	text-decoration: none;
}

a:visited
{
	color: #d96758;
	background: inherit;
	text-decoration: none;
}

a:hover,
a:visited:hover
{
	color: #b42517;
	background: inherit;
	text-decoration: underline;
}

/* page layout */

body
{
	text-align: center;		/* center on ie */
}

#container
{
	/*position: relative;*/
	margin: 0 auto;			/* center on everything else */

	width: 55.4em;

	text-align: left;
}

/*#container-inner { position: static; width: auto; }*/


#pagebody
{
	/*position: relative;*/
	width: 49.2em;
	margin: auto;
}
/*#pagebody-inner { position: static; width: 100%; }*/

/* content */

.content-nav
{
	margin-top: 0;
	margin-bottom: 20px;

	text-align: center;
}

.date-header
{
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 0.85em;
	font-weight: bold;
	text-transform: uppercase;
}

.entry-header
{
	margin-top: 0px;
	margin-bottom: 20px;

	font-size: 1.6em;
}

.date-header a:link,
.date-header a:visited
{
	color: #888;
	background: inherit;
	text-decoration: none;
}

.entry-header a:link,
.entry-header a:visited
{
	color: #b42517;
	background: inherit;
	text-decoration: none;
}

.date-header a:hover,
.entry-header a:hover
{
	text-decoration: underline;
}

.entry,
.archive
{
	/*overflow: hidden;*/
	width: 100%;

	margin-bottom: 80px;
}

.trackback,
.comment,
.comment-open
{
	margin-bottom: 50px;
}

#trackbacks-info
{
	margin: 30px 0 30px 0;
	padding: 0 10px;
	
	border-left: 2px solid #b42517;
}

.entry-content,
.entry-tags,
.entry-footer,
.comment-content,
.comment-footer,
.comments-open-content,
#trackbacks-info,
.trackback-content,
.trackback-footer
{
	line-height: 160%;
}

.entry-content img
{
	display: block;
	margin: 20px auto;
}

.entry-content h2
{
	font-size: 1.4em;
	margin: 1.6em auto;
}

.entry-content h3
{
	font-size: 1.2em;
	margin: 1.4em auto;
}

.entry-content h4,
.entry-content h5,
.entry-content h6
{
	font-size: 1em;
	margin: 1.2em auto;
}

.footnotes
{
	margin-top: 2em;
	font-size: 0.85em;
}

.footnoteRef a:link,
.footnoteRef a:visited
{
	/*text-decoration: underline;*/
	padding: 0 0 0 2px;
	/*border-bottom: 1px solid;*/
}

.footnoteRef a:hover,
.footnoteRef a:active
{
	/*text-decoration: none;
	color: #fff;
	background-color: #b42517;*/
}

.gallery_thumb
{
	float:  left;
	border: 1px solid rgb(204, 204, 204);
	background-color: rgb(243, 243, 243);
	margin: 0px 20px 20px 0px !important;
	padding: 7px;
}

p.entry-tags
{
	margin: 0 0 0 0;
	font-size: 0.85em;
	padding-bottom: 2px;
	font-style: italic;

	color: #888;
	background: inherit;
}

.entry-footer,
.archive-content
{
	clear: left;

	margin: 0;
	font-size: 0.85em;

	color: #888;
	background: inherit;
}

.comment,
.trackback
{
	font-size: 0.85em;
}

.comment-footer,
.trackback-footer
{
	margin: 0;
	color: #888;
	background: inherit;

	padding: 5px 0;
	border-bottom: 1px solid #888;
}

.trackback-title
{
	margin-top: 5px;
	color: #888;
	background: inherit;
}

a.permalink
{
	padding-right: 0.3em;
}

.trackbacks-header,
.comments-header,
.comments-open-header
{
	margin-top: 0px;
	margin-bottom: 20px;

	font-size: 1.2em;
	color: #444;
	background: inherit;
}

.comments-open
{
	border: 1px solid #888;
	color: inherit;
	background: #f4f4f4;
	padding: 1.5em;
	margin-bottom: 40px;
}

.comments-open-content
{
	font-size: 0.85em;
}

.comments-open label { display: block; }

.comments-open-messages
{
	margin: 2em 0;
}

#comment-author, #comment-email, #comment-url, #comment-text
{
	width: 50%;
}

#comment-text
{
	width: 100%;
	height: 14em;
}

#comment-bake-cookie
{
	margin-left: 0;
	vertical-align: middle;
}

/* banner */

#banner
{
	font-family: "Hoefler Text", Georgia, serif;
	position: relative;
	margin: 40px 0 60px 0;
}

#banner-inner { position: static; }

#banner-header
{
	margin: 0;
	color: #b42517;
	background: inherit;
	font-size: 48px;
	font-weight: bold;
	position: relative;
	top: 0.25ex;
}

#banner-description
{
	margin: 0;
	color: #888;
	background: inherit;
	font-size: 20px;
	font-weight: bold;
	text-align: right;
	position: relative;
	top: -0.5ex;
}

#banner a
{
	text-decoration: none;
	color: #b42517;
	background: inherit;
}

/* Bottombar */

#bottombar form
{
	display: inline;
}

#bottombar .menu
{
	text-align: center;
	margin-bottom: 1.5em;
}

#bottombar .tagline
{
	text-align: center;
	font-style: italic;
	color: #666;
	background: inherit;
	margin-bottom: 1em;
}

#bottombar .copyright
{
	text-align: center;
	font-size: 0.85em;
	margin-bottom: 2em;
}

#bottombar .separator
{
	padding: 0 0.5em;
	color: #b42517;
	background: inherit;
}

#bottombar input
{
	margin-left: 0.5em;
}