/**************************************************
*
*
Portfolio Scroll Stucture
**************************************************/

#portfolio-wrapper {
	position: relative;
	overflow: hidden;
}

#portfolio-inner {
	position: relative;
	background: url(../images/woodx.jpg);
	width: 7200px;
	height: 658px;
}



/**************************************************
Portfolio Typograffiti
**************************************************/

#portfolio-wrapper h1 {
	position: absolute;
	top: 0px;
	left: 150px;
	margin: 0;
	padding-left: 35px;
	width: 173px;
}

#portfolio-wrapper h1 span {
	position: absolute;
	top: 0px;
	left: 0px;
	background: url(../images/headings/portfolio.gif) no-repeat;
	width: 208px;
	height: 53px;
	z-index: 1;
}

#portfolio-window h2, #portfolio-window h2:first-letter {
	font-family: georgia, garamond, "times new roman", serif;
	font-size: 50px;
	font-style: normal;
	font-variant: small-caps;
	color: #aea528;
	margin: 0;
}

#portfolio-window h3 {
	font: normal 16px sans-serif;
	font-variant: small-caps;
	line-height: 1em;
	padding: 5px 0;
	margin-bottom: 5px;
	border-bottom: 1px solid #ece9c1;
	width: 225px;
}

#portfolio-window, #portfolio-window p {
	font-size: 11px;
	line-height: 140%;
}

#portfolio-window strong {
	color: #ee145b;
	text-transform: uppercase;
	font-size: 9px;
}

ul.info {
	list-style: none;
	margin-top: -5px;
	width: 225px;
}

ul.info li {
	margin: 2px 0;
	border-top: 1px dotted #e6e6e6;
	border-top: 1px dashed #ece9c1;
}

ul.info li:first-child { border-top: none; }

.preview {
	color: #ee145b;
	text-transform: uppercase;
	font-size: 9px;
	font-weight: bold;
	margin-left: 10px;
	margin-right: 3px;
}

p.preview-description, p.on  {
	background: url(../images/portfolio/timeline-bkgd.png) top right no-repeat;
	padding: 3px 0px 3px 10px;
	margin-top: -2px;
	width: 180px;
	height: 15px;
}

p.preview-description  { color: #ddd; }

p.on { color: #fff; }



/**************************************************
Project Window
**************************************************/

ul#portfolio-window {
	list-style: none;
	padding-top: 50px;
}

ul#portfolio-window > li {
	float: left;
}

.scrolling-content {
	position: relative;
	padding: 20px 10px;
	width: 880px;
}


/*
	Stamps & Objects
**************************************************/

#live-fast {
	position: absolute;
	background: url(../images/office/stamp-livefast.gif) no-repeat;
	width: 145px;
	height: 111px;
	z-index: 1;
}

#vengeance-sea {
	position: relative;
	top: 376px;
	left: 743px;
	background: url(../images/office/stamp-vengeancesea.gif) no-repeat;
	width: 318px;
	height: 135px;
}

#pencil {
	position: relative;
	top: -130px;
	left: 650px;
	background: url(../images/office/pencil.gif) no-repeat;
	width: 377px;
	height: 76px;	
}

#buttons {
	position: relative;
	top: 387px;
	left: 770px;
	background: url(../images/office/buttons.gif) no-repeat;
	width: 227px;
	height: 124px;
}

#honor {
	position: relative;
	top: -147px;
	left: 755px;
	background: url(../images/office/stamp-honor.gif) no-repeat;
	width: 229px;
	height: 148px;
}

#black-book {
	position: relative;
	top: 372px;
	left: 547px;
	background: url(../images/office/stamp-blackbook.gif) no-repeat;
	width: 352px;
	height: 139px;
}


/*
	Project Navigation
**************************************************/

.portfolio-navigation, #filler {
	float: left;
	position: relative;
	top: 75px;
	width: 36px;
	height: 156px;
}

.previous, #filler { top: 140px; margin: 10px;}
.previous:hover { background: url(../images/portfolio/previous.png) no-repeat; }
.next { top: 90px; margin: 10px; }
.next:hover { background: url(../images/portfolio/next.png) no-repeat; }


/*
	Project Image
**************************************************/

.project-image {
	float: left;
	background: url(../images/portfolio/project-frame.png) no-repeat;
	padding: 20px 0 0 21px;
	margin-right: -21px;
	width: 481px;
	height: 342px;
}


/*
	Project Description
**************************************************/

.project-information {
	float: left;
	position: relative;
	background: url(../images/portfolio/project-description.gif) no-repeat;
	padding: 30px 0px 0px 10px;
	width: 270px;
	height: 342px;
}

.swap-preview {
	position: absolute;
	top: 274px;
	left: 0px;
}

.swap-preview a {
	padding: 0px 4px 2px 4px;
	margin: 0px -2px;
}

.swap-preview a:hover {
	background: url(../images/portfolio/preview-hover.png);
}

a.there, a.there:hover {
	background: url(../images/portfolio/timeline-bkgd.png);
}

.swap-preview img {
	vertical-align: middle;
	padding: 3px 2px;
}



/**************************************************
Portfolio Navigation Timeline
**************************************************/

#portfolio-timeline {
	text-align: center;
	position: absolute;
	top: 600px;
	left: 41px;
	background: url(../images/portfolio/timeline-bkgd2.png) no-repeat;
	padding: 10px 10px;
	width: 800px;
	height: 90px;
}

#portfolio-timeline div {
	float: left;
	display: inline;
	position: relative;
	overflow: hidden;
	margin: 0 5px;
	width: 90px;
	height: 90px;
}

span.timeline-thumb {
	position: absolute;
	top: 0;
	left: 0;
	background-position: top left;
	border: 3px solid #111;
	width: 84px;
	height: 84px;
	z-index: 1;
}

#zippyjobs-thumb { background: url(../images/projects/zippyjobs/zippyjobs.png) no-repeat; }
#structurehub-thumb { background: url(../images/projects/structurehub/structurehub.png) no-repeat; }
#app2you-thumb { background: url(../images/projects/app2you/app2you.png) no-repeat; }
#mathclub-thumb { background: url(../images/projects/mathclub/mathclub.png) no-repeat; }
#earthkam-thumb { background: url(../images/projects/earthkam/earthkam.png) no-repeat; }
#cogsci-thumb { background: url(../images/projects/cogsci/cogsci.png) no-repeat; }
#snippity-thumb { background: url(../images/projects/snippity/snippity.png) no-repeat; }
#coffee-thumb { background: url(../images/projects/coffee/coffee.png) no-repeat; }

#zippyjobs-thumb, #structurehub-thumb, #app2you-thumb, #mathclub-thumb, #earthkam-thumb, #cogsci-thumb, #snippity-thumb, #coffee-thumb {
	background-position: top left;
}

#zippyjobs-thumb:hover, #structurehub-thumb:hover, #app2you-thumb:hover, #mathclub-thumb:hover, #earthkam-thumb:hover, #cogsci-thumb:hover, #snippity-thumb:hover, #coffee-thumb:hover {
	background-position: top right;
	border-color: #ddd;
}

#zippyjobs-thumb.selected, #structurehub-thumb.selected, #app2you-thumb.selected, #mathclub-thumb.selected, #earthkam-thumb.selected, #cogsci-thumb.selected, #snippity-thumb.selected, #coffee-thumb.selected {
	background-position: top right;
	border-color: #aea528;
}