/********************************/
/* In All Reality (Ryan's Site)	*/
/* Portfolio Stylesheet			*/

/********************************/
/* General Formatting			*/
#content h2.post_title {
	background: url(../images/img_portfolio.jpg) no-repeat;
	float: left;
	height: 62px;
	margin: 0 0 0 40px;
	text-indent: -999em;
	width: 398px;
}
#folio_header {
	background: url(../images/img_portfolio_arrow.gif) no-repeat left center;
	float: left;
	margin: 18px 0 0 8px;
	padding: 0 0 16px 232px;
}
#folio_header a {
	background: url(../images/img_portfolio_resume.jpg) no-repeat;
	display: block;
	height: 65px;
	text-indent: -999em;
	width: 241px;
}
#folio {
	background: url(../images/bkgrd_portfolio_top.jpg) no-repeat;
	padding: 102px 0 0 0;
}
#folio_wrap {
	background: url(../images/bkgrd_portfolio_btm.jpg) no-repeat bottom;
	padding: 0 0 149px 0;
}
#folio_content {
	background: url(../images/bkgrd_portfolio.jpg) repeat-y 0 50px;
	margin: -50px 0 0 0;
	padding: 0 51px;
}
#folio_showcase, #folio_info {
	float: left;
}
#folio_contact ul {
	list-style: none;
	margin: 3.50em 0 0 0;
}
#folio_contact ul li {
	font-size: 1.50em;
	margin: 0 0 0.75em 0;
}
#folio_contact a {
	color: #4D2D16;
}
#folio_contact a:hover {
	color: #B04622;
	text-decoration: none;
}

/********************************/
/* Portfolio Main				*/
.showcase #folio_showcase {
	padding: 0 60px 0 0;
	width: 420px;
}
.showcase #folio_info {
	width: 378px;
}
.showcase #folio_showcase h3 {
	background: url(../images/img_portfolio_showcase.gif) no-repeat;
	height: 19px;
	margin: 0 0 24px 6px;
	text-indent: -999em;
}
.showcase #folio_info h3 {
	background: url(../images/img_portfolio_services.gif) no-repeat;
	height: 19px;
	margin: 0 0 24px 0;
	text-indent: -999em;
}
.showcase #folio_info h4 {
	color: #48799B;
	font-size: 1.30em;
	font-weight: normal;
	line-height: 1.30em;
	min-height: 20px;
	padding: 0 0 0 36px;
}
.showcase #folio_info h4.design {
	background: url(../images/ico_portfolio_services_design.gif) no-repeat 0 2px;
}
.showcase #folio_info h4.dev {
	background: url(../images/ico_portfolio_services_dev.gif) no-repeat 0 4px;
}
.showcase #folio_info h4.consult {
	background: url(../images/ico_portfolio_services_strat.gif) no-repeat 0 4px;
}
.showcase #folio_contact ul li.cta {
	background: url(../images/img_portfolio_cta.jpg) no-repeat left bottom;
	font-size: 1.50em;
	margin: 0 0 30px 0;
	padding: 0 0 53px 0
}

/********************************/
/* Portfolio Entry				*/
.showcase-item #folio_showcase {
	padding: 0 18px 0 0;
	width: 550px;
}
#folio .showcase-item h3 {
	color: #42220C;
	font-size: 1.50em;
	margin: 0 0 0.50em 0;
}
.showcase-item #folio_info {
	width: 290px;
}
.showcase-item .navigation {
	font-size: 0.83em;
	padding: 6px 12px;
}
.showcase-item .navigation span {
	width: auto;
}
.showcase-item #folio_contact ul li.cta {
	background: url(../images/img_portfolio_ctacontact.gif) no-repeat 0 0.50em;
	margin: 0 0 18px 0;
	padding: 0 0 60px 0
}
	/* Folio Meta Info */
	#content .folio_meta {
		font-weight: bold;
		list-style: none;
		margin: 0;
		padding: 36px 0;
	}
	#content .folio_meta li {
		float: left;
		margin: 0 24px 0 12px;
	}
	#content .folio_meta span {
		display: block;
		font-size: 0.80em;
		font-weight: normal;
		margin: 0.35em 0 0 0;
	}
	#content .folio_meta .client {
		background: url(../images/ico_portfolio_client.jpg) no-repeat;
		padding: 6px 0 0 48px;
		width: 156px;
	}
	#content .folio_meta .tasks {
		background: url(../images/ico_portfolio_work.jpg) no-repeat;
		padding: 6px 0 0 48px;
		width: 226px;
	}
	#content .folio_meta .url {
		background: url(../images/ico_portfolio_url.jpg) no-repeat;
		margin-top: 1.50em;
		padding: 0 0 0 48px;
	}
	
	/* Image Scroller */
	div.scrollable { 
		/* required properties */
		overflow:hidden;
		position:relative;
		height: 260px;
		width: 550px; 
	}
	div.scrollable div.items {
		/* required properties */
		clear:both;
		position:absolute;
		/* this cannot be too large */
		width: 2000em;
	}
	div.scrollable div.items div {
		/* required properties */
		float:left;
	}
	div.navi {
		padding: 0.50em 8px;
	}
	#content div.navi a {
		background: #D8E9F3;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border: solid 1px #D8E9F3;
		color: #6D9BBD;
		display: block;
		float: left;
		margin: 0 0.15em 0 0;
		padding: 0.15em 0.65em;
	}
	#content div.navi a.active {
		background: #FDEDC9;
		border-color: #FDEDC9;
		color: #FFB208;
	}
	#content div.navi a:hover {
		color: #333;
		text-decoration: none;
	}
	#content div.navi a.active:hover {
		color: #FFB208;
	}