.content {
	background:url(../img/bg.png) top center no-repeat;
}
p {
	margin:0;
	padding:0;
}
img {
	border:none;
	display:block;
}
form, p, h1, h2, h3, h4, h5, h6, ul {
	padding:0;
	margin:0;
}

small {
	font-size:12px;
}

#portfolio-wrapper {
	overflow:hidden;
	padding-left:10px;
	padding-right:10px;
	text-shadow:0px 1px 0px #fff;
}
/* horizontal scrolling div */
#scrollable-container{
	position:relative;
	float:left;
	height: 439px;
	width:100%;
	overflow: auto;
	margin: 0 auto;

	margin-top:48px;

	/**
	left:-999999em; /* This hides the scrollable content until it is turned back on by the JavaScript code */
/**
	background:#EFEFEF url(../img/container.gif) no-repeat;
	background-position:left top;
	background-attachment: scroll;
/**/
}

/* list of elements */
#timeline {
	float:left;
	width: 3000px; /* The width is recalculated by the the js depending on the number of elements inside, but just in case */
	padding-left:20px;
	position:relative;
	margin: 0 25px 0 25px;	
	padding:0;
	font-size:12px;
	line-height:14px;
	margin-top:30px;
}

/* the elements */
#timeline li.showcased-element {
	float:left;
	width:297px;
	position: relative;
	margin-right:-100px;
	z-index:2;
	list-style:none;
}
#timeline li.even {
	z-index:1;
}
#timeline li.showcased-element:hover h2 {
	color:#990000;
}

/* titles */
#timeline li.showcased-element h2 {
	font-size:15px;
	text-align:center;
	background:url(../img/vertical-line.gif) top center no-repeat;
	padding-bottom:50px;
	margin:0 10px 10px 10px;
}
/* More padding for the even h2s */
#timeline li.even h2 {
/**
	padding-bottom:170px;
/**/
	padding-bottom:220px;
/**/
}
#timeline li.showcased-element p {
	width:184px;
	float:right;
	padding:0 0 10px 0;
	margin:0;
}
#timeline .readmore{
	float:right;
	white-space:nowrap;
}
/* Anything with a .more class shouldn't be visible in the scroller */
#timeline .more {display:none;}

/*
	Expandable Thumbnails
*/

#timeline .thumbnail {
	border: 2px solid #fff;
	display:block;
	float:left;
	clear:left;
	overflow:hidden;
	position:relative;
	margin-left:14px;
	width:80px;
	height:80px;
	line-height:80px;
	margin-bottom:10px;
}

#timeline .thumbnail img {
	position:absolute;
	top:-50px;
	left:-30px;	
	z-index:3;
	padding:2px;
	background:#fff;
	max-width:150px;
	max-height:150px;

	border:1px solid #DFDFDF;
	padding:4px;
}
* html #timeline .thumbnail img {
	/* This is a max-width fix for IE6. This makes the CSS not W3C standard compliant. If valid css is a requirement, comment or remove it. */
	/**/
	width: expression(document.body.clientWidth > 152? "150px" : "auto");
	height: expression(document.body.clientHeight > 152? "150px" : "auto");
	/**/
}
	/* 
	Thumbnail hover state
	*/
	#timeline .thumbnail:hover {
		overflow:visible;
		z-index:1000;
	}
	#timeline .thumbnail:hover img{
		box-shadow: 		2px 2px 2px #ddd;
		-moz-box-shadow: 	2px 2px 2px #ddd;
		-webkit-box-shadow: 2px 2px 2px #ddd;
	}







/*
Div below that displays more content
*/

#large{
	float:left;
	padding-top:2em;
	padding-bottom:2em;
	width:100%;
}

/* For the message displayed if user has JavaScript disabled */
#large .js-disabled{
	text-align:center;
	font-size: 24px;
	text-align: center;
	font-weight: bold;
	padding:20px;
	display:block;
	color: #990000;
}
#large .portfolio-info {
	display:none;
}
.portfolio-info {
}

/* title */
#large h2 {
	text-align:center;
	margin:15px;
	font-size:30px;
	line-height:30px;
}

/* the .more class should be visible if in the #large div */
#large .more {display:inline;	}

/** the .readmore link shouldn't /**
#large .readmore {display:none;}
/**/

/* #large a.thumbnail{cursor: default;} */

/* some more elements in the #large div */
#large img{
	margin:auto;
	margin:15px;
	margin-top:0;
	display: inline;
	float:left;
}
.image-holder {
	width:100%;
	float:left;
}
.image-holder img, .bordered-image {
	border:solid 1px #dfdfdf;
}

#large div {

}
#large p {
	margin-top:0.5em;
}
#large ul {
	list-style:inside;
}
#large .what-i-did {
	margin:0;
	float:right;
	background:#dfdfdf;
}
#large .what-i-did li {
	float: left;
	margin:0 10px;
	color: #999;
	list-style:none;
}


/*
Other page refinements
*/
.footer {
	padding-top:40px;
}

#post-5 .posttitle {
	display:none;
}