a:link {
	color:				#485f86;
}
a:visited {
	color:				#667897;
}
a:hover, a:active {
	color:				#485f86;
	text-decoration:	underline;
}

body {
	background-color:	#ddd;
	background:			#ddd -webkit-gradient(linear, 0 0, 0 200, from(#ccc), to(#ddd)) no-repeat;
	margin:				0;
	padding:			0;
}

div#page {
	width:				750px;
	margin:				0 auto;
	padding:			50px;
	position:			relative;
}

h1, h2 {
	color:				#444;
	text-shadow:		0 1px 0 #fff;
}
section#archive h2 {
	text-shadow:		none;
}
blockquote {
	border-left:		2px solid #bbb;
}

section#content, section#archive {
	display:			block; /* Firefox 3 fix */
	width:				480px;
}

aside {
	position:			absolute;
	width:				200px;
	top:				60px;
	right:				40px;
	padding:			0 0 0 30px;
	border-left:		3px dashed #bbb;
}

figure img, div.hero img {
	border:				1px solid #555;
	box-shadow:			0 2px 3px rgba(0,0,0,0.2);
	border-radius:		5px;
	max-width:			100%;
}

code, .code, pre {
	background-color:	#d1d1d1;
	color:				#555;
	padding:			3px 5px;
	border-radius:		5px;
}
pre {
	padding:			5px;
	overflow-x:			scroll;
}
pre code, pre .code {
	background-color:	none;
	border-radius:		0;
}

div.details, #pages, footer, section#more li {
	color:				#888;
}

/* form */

#messageform {
	max-height:			25px;
}
#messageform.visible {
	min-height:			180px;
	max-height:			500px;
}
#messageform #message {
	height:				20px;
	transition:			height 300ms ease-out;
}
#messageform.visible #message {
	height:				100px;
}
#emaillabel, #email, #send {
	opacity:			0;
	-webkit-transition:	opacity 300ms ease-out;
}
#messageform.visible #emaillabel, #messageform.visible #email, 
#messageform.visible #send {
	opacity:			1;
}

#message, #email, #captcha {
	background-color:	#eee;
	border-top:			1px solid #bbb;
	border-right:		1px solid #ccc;
	border-bottom:		1px solid #fff;
	border-left:		1px solid #ccc;
	transition:			background-color 300ms ease-out;
}
#messageform.visible #message, #messageform.visible #email, 
#messageform.visible #captcha {
	background-color:	#fff;
}

img.captcha {
	border:				2px solid #bbb;
}

@media only screen and (max-width: 850px) {

	div#page {
		box-sizing:			border-box;
		-webkit-box-sizing:	border-box;
		-moz-box-sizing:	border-box;
		width:				100%;
	}
	section#content, section#archive {
		width:				100%;
	}
	aside {
		position:			relative;
		width:				100%;
		top:				auto;
		right:				auto;
		margin:				30px 0 0 0;
		padding:			30px 0 0 0;
		border-left:		none;
		border-top:			3px dashed #bbb;
	}
	footer {
		margin-top:			30px;
	}

}

@media only screen and (max-width: 450px) {

	div#page {
		padding:			30px;
	}
	h1 {
		font-size:			3.0em;
	}
	p, blockquote, ul, ol, pre {
		font-size:			1.0em;
	}
	#message, #email, #captcha {
		font-size:			1.0em;
	}

}