/*
Theme Name: Joseph Jessen Custom Theme
Theme URI: http:/www.josephjessen.com
Description: A custom theme for <a href="http://www.josephjessen.com">josephjessen.com</a>
Version: 1.0
Author: Marc Nuijten
Author URI: http://www.birdseyedesign.be
Tags: polaroid, dirty

	Joseph Jessen
	 http://www.josephjessen.com

	This theme was built by Bird's Eye Design
	
	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

*/
/* general markup rules */

	.clear {clear: both;}
	#header, #content, #footer {clear: both;}
	
	.wrapper {width: 960px; margin: 0 auto;}
	.left {float: left;}
	.right {float: right;}
	strong {font-weight: bold;}
	
/* general typography */

	body {
		position: relative;
		font-size: 100%;
		font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
		background: url(images/body_bg.png);
	}
	
/* markup for the header */

#desk {
	z-index: 1;
	position: absolute;
	height: 1200px;
	width: 1655px;
	background: url(images/bg_big.jpg) -150px 0px no-repeat;
}

#header {position: relative; z-index: 2;}
#header h1 a {
	float: left;
	display: block;
	width: 508px;
	height: 89px;
	text-indent: -999%;
	margin-top: 10px;
	background: url(images/header_bg.png) no-repeat;
}

.contact a {
	float: left;
	display: block;
	width: 110px;
	height: 42px;
	text-indent: -999%;
	margin-top: 15px;
	background: url(images/contact.png) top no-repeat;
}
	.contact a:hover {background-position: bottom;}

.resume a {
	float: left;
	position: relative;
	display: block;
	width: 110px;
	height: 42px;
	text-indent: -999%;
	top: 35px;
	left: -50px;
	background: url(images/resume.png) top no-repeat;
}
	.resume a:hover {background-position: bottom;}
	
/* markup for the content */

#content {padding-top: 25px; position: relative; z-index: 3;}
#paintings {float: left; width: 600px; background: url(images/line.png) right no-repeat;}
#installations {float: right; width: 360px;}

#content h2 {margin-bottom: 20px;}
#paintings h2 {
	width: 171px;
	height: 66px;
	text-indent: -999%;
	background: url(images/paintings.png) no-repeat;
}
#installations h2 {
	width: 211px;
	height: 66px;
	text-indent: -999%;
	background: url(images/installations.png) no-repeat;
}

#content p {
	position: relative;
	float: left;
	margin: 0 20px 20px 0;
	
}
	#content p a {
		display: block;
		width: 143px;
		height: 175px;
		border: 1px #e7e2d9 solid;
		background: url(images/polaroid.png) no-repeat;
	}
	#content p a img {
		position: relative;
		left: 7px;
		top: 10px;
	}
	#content p a:hover {border: 1px #999999 dashed;}

	/* extra markup for page content */
	
	#content .post p {float: none; font-size: 80%; line-height: 120%;}
	#content .post a {display: inline; background: none; border: none; color: #b07f3a;}
		#content .post a:hover {border: none; color: #5b351b;}

/* markup for the footer */

#footer {color: #999999; font-size: 75%; padding-top: 20px; min-height: 50px; position: relative; z-index: 5;}

#footer a:link {color: #b07f3a; text-decoration: none;}
#footer a:visited {color: #b07f3a; text-decoration: none;}
#footer a:hover {color: #5b351b; text-decoration: none;}
#footer a:active {color: #b07f3a; text-decoration: none;}

#footer ul {margin: 0 auto; width: 850px; }
#footer li {position: relative; float: left; margin-right: 1em;}
#footer li img {position: absolute; top: -3px;}