/*
 * Version: 21-09-2008
 * JM.COM STYLESHEET - SCREEN
 * 
 * Media: all
 * Author: Jeroen Mulder ( me at jeroenmulder dot com )
 *
 * BROWSER TESTING 
 * ( + passed | - failed | ~ not yet tested ): 
 *		~ Microsoft Internet Explorer 5.01 SP2, 5.5 SP2, 6.0, 7.0/Windows
 * 		- Microsoft Internet Explorer 5.12/Mac (not supported)
 * 		+ Mozilla Firefox 2.0/3.0 (Gecko)
 * 		+ Opera 9
 * 		+ Safari 3 
 */
 
html, body, blockquote, form, fieldset,
p, pre, dl, dd, li, ul, ol,
h1, h2, h3, h4, h5, h6
{ margin: 0; padding: 0; }

/* --------------------
 * Default Styling
 * -------------------- */
html, input, select, table, th, td { font-size: 100%; }

body {
	background: #fff url("/images/body_bg.gif") repeat-x 50% 0;
	color: #78797b;
	font: 62.5%/1.5 "Lucida Grande", "Lucida Sans", Helvetica, Arial, sans-serif;
}

/* --------------------
 * General Styling
 * -------------------- */
a { 
	border-bottom: 2px solid #333;
	color: #333;
	text-decoration: none; 
}

h1, h2, h3 {
	color: #666;
}

ul, li { 
	list-style: none; 
}

/* --------------------
 * General Layout
 * -------------------- */
#container {
	margin: 0 auto;
	width: 760px;
}

#navigation {
	background: url("/images/body_bg.gif") repeat-x 50% 100%;
	height: 65px;
	margin-top: 100px;
	position: relative;
}

#navigation h1 {
	position: absolute;
	top: 0;
	left: 10px;
}

#navigation h1 a {
	border: none;
	background: url("/images/logo.gif") no-repeat;
	display: block;
	height: 32px;
	overflow: hidden;
	text-indent: -999em;
	width: 60px;
}

#navigation ul {
	position: absolute;
	top: 0;
	right: 5px;
	list-style: none;
}

#navigation li {
	float: left;
}

#navigation ul a {
	background-position: 0 0;
	background-repeat: no-repeat;
	border: none;
	display: block;
	float: left;
	height: 25px;
	overflow: hidden;
	text-indent: -999em;
	width: 25px;
}

#navigation ul a:focus, #navigation ul a:hover {
	background-position: 0 -25px;
}

#navigation ul li.disabled a {
	background-position: 0 -50px;
	cursor: default;
}

#nav-about a { background-image: url("/images/nav_about.gif"); }
#nav-home a { background-image: url("/images/nav_home.gif"); }
#nav-prev a { background-image: url("/images/nav_previous.gif"); }
#nav-next a { background-image: url("/images/nav_next.gif"); }

#nav-next {
	border-left: 1px solid #a6a7aa;
	height: 17px;
	margin-left: 12px;
	margin-top: 4px;
	padding-left: 12px;
}

#nav-next a {
	margin-top: -4px;
}

#main {
	padding: 35px 10px 0 10px;
}

.section {
	float: left;
	width: 50%;
}

/* --------------------
 * General Site Styling
 * -------------------- */

.site {
	font-size: 1.8em;
}

.site h2 {
	color: #a6a7aa;
	font-size: 0.8em;
	font-weight: normal;
	line-height: 1;
	margin-bottom: 25px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.site h2 strong {
	font-weight: bold;
}

.site-visit {
	color: #a6a7aa;
	font-size: 0.7em;
	margin-top: 25px;
}

.site-visit a {
	border: none;
	color: #a6a7aa;
}

.site-visit a:focus, .site-visit a:hover {
	color: #333;
}

/* --------------------
 * Site Specific Styling
 * -------------------- */

/* Google Reader */
#site-googlereader #content {
	background: url("/images/icn_link.gif") no-repeat 0 0.5em;
	margin: 0 -30px;
	padding: 0 30px;
}

/* Twitter */
#site-twitter #content {
	background: url("/images/icn_quote_open.gif") no-repeat 0 0.4em;
	margin: 0 -20px;
	padding: 0 20px;
}

#site-twitter #content p {
	background: url("/images/icn_quote_close.gif") no-repeat 100% 0.1em;
	display: inline;
	padding-right: 20px;
}

/* --------------------
 * About
 * -------------------- */
#about {
	font-size: 1.3em;
}

#about a {
	border-bottom: none;
	color: #78797b;
}

#about h2, #about h3 {
	color: #333;
	font-size: 1.4em;
	font-weight: bold;
	margin-bottom: 20px;
}

#about h3 {
	font-weight: normal;
}

#about ul {
	padding-bottom: 45px;
}

#about li {
	margin: 10px 0;
}

/* --------------------
 * Elsewhere / Work + Play
 * -------------------- */
#main a.ext-link {
	background-repeat: no-repeat;
	background-position: 0 0.15em;
	display: block;
	padding-left: 26px;
}

#main a.ext-link:focus, #main a.ext-link:hover {
	color: #333;
}

/* Per external icons */
.ext-crumbl { background-image: url("/images/icn_ext_crumbl.gif"); }
.ext-funda { background-image: url("/images/icn_ext_funda.gif"); }
.ext-linkedin { background-image: url("/images/icn_ext_linkedin.gif"); }
.ext-twitter { background-image: url("/images/icn_ext_twitter.gif"); }

/* Per external tweaking -- depends on the icon shape */
.ext-crumbl { background-position: 0 0.2em; }

/* --------------------
 * Error Documents
 * -------------------- */
.page-error {
	font-size: 1.6em;
}

.page-error h2 {
	background: url("/images/status_404.gif") no-repeat 33% 15px;
	color: #a6a7aa;
	font-size: 9em;
	height: 200px;
	line-height: 1;
	overflow: hidden;
	width: 380px;
	text-indent: -999em;
}

.page-error h3 {
	font-size: 1.6em;
	margin-bottom: 35px;
}

/* --------------------
 * Float Enclosing
 * -------------------- */
.section:after {
	content: ".";
	clear: both;
	display: block;
	height: 0;
	line-height: 0;
	overflow: hidden;
	visibility: hidden;
}