/* Styles just for portfolio.php */

/*  PortfolioContents contains the main body of all of the Portfolio pages.
	It floats to push down the navbar.
	Use a vspacer div to position it vertically relative to LogoWrapper.
*/
div#PortfolioContents {
	margin:0 20px 0 0;
	width:500px;
	padding:0;
	overflow:visible;
}

div#PortfolioDescriptionWrapper {
	float:left;
	width:500px;
}

div#PortfolioDescriptionWrapper h1 {
	width:160px;
	font-size:14px;
	font-weight:bold;
	margin:0; padding:0;
}

div#PortfolioDescriptionWrapper p {
	margin:.5em 0 0 0; padding:0;
	color:#333333;
}

div#PortfolioDescriptionWrapper p#DesignBy {
	width:160px;
	margin-top:.25em;
}

div#PortfolioDescriptionWrapper p#Scope {
	width:160px;
	margin:2px 0 2px 0;
	font-size:0;
	color:#e6e5d7;
}

div#PortfolioDescriptionWrapper p#ByOthers {
	width:160px;
	margin:.25em 0 1em 0;
}

div#PortfolioDescriptionWrapper p.Comment {
	margin-top:.5em;
}

div#PortfolioDescriptionWrapper p.Quote {
	margin-top:.25em;
	font-style:italic;
}

#PortfolioDescriptionWrapper ul {
	margin:0; padding:0;
}

#PortfolioDescriptionWrapper ul li {
	list-style:outside url(../images/ListBullet.gif);
	margin:.2em 0 0 1.5em;
}

#PortfolioDescriptionWrapper ul li.hl {
	color:#CC3300;
}

/*
	PortfolioThumbWrapper contains the row of four thumbnail photos of the projects
	in the selected category.

	<div id="PortfolioThumbWrapper">
		<div class="PortfolioThumbs">
			<a>
				<img>
			</a>
			<a><img class="arrow"></a>
		</div>
		
		<div class="PortfolioThumbs">
		... etc.

	</div>
*/

div#PortfolioThumbWrapper {
	width:360px; height:130px;
	position:relative; top:0; left:0; /* ref for arrow positioning */
	margin-bottom:20px;
	overflow:visible;
}

div.PortfolioThumbs {
	float:left;
	width: 79px; height:129px;
	margin:0 6px 0px 0;
	padding:1px 1px 1px 1px;
}

/*
div.PortfolioThumbs#selected {
	background-image:url(../images/ArrowUpLight.gif);
 */}

div.PortfolioThumbs a {
	height: 112px; width:75px; /* same as img */
}

div.PortfolioThumbs a img { /* the thumbnail image */
	height: 112px; width:75px;
	margin-left:auto; margin-right:auto;
	overflow:hidden;
	border:1px solid gray;
}

div.PortfolioThumbs a img.arrow { /* the marker arrow under the thumbnail */
	width:10px; height:9px;
	margin-top:1px;
	float:left;
	border:0;
}

/* for the next and previous arrows */
div.PortfolioThumbArrow { /* positioned relative to PortfolioThumbWrapper */
	position:absolute;
	top:70px;
}

div.PortfolioThumbArrow a img {
	border:0;
	width:9px; height:10px;
}
/*
	PortfolioPhoto contains the big selected photo for the current project.
*/

div#PortfolioPhoto {
	position:absolute;
	top:255px; right:15px;
	width:310px;
}

div#PortfolioPhoto img {
	border: 1px solid gray;
}

div#PortfolioPhoto p {
	text-align:left;
	margin: 5px 0 0 0;
}

div#PortfolioPhoto p img {
	border:0;
}

/* for the next and previous arrows */
div.PortfolioPhotoArrow {
	position:absolute;
	top:75px;
}

div.PortfolioPhotoArrow a {
	border:0;
}

div#PortfolioPhoto div.PortfolioPhotoArrow img {
	border:0;
	width:9px; height:10px;
}

div#PortfolioPhoto div.PortfolioPhotoArrow a img {
	border:0;
	width:9px; height:10px;
}