@charset "utf-8";

/* portfolio.css */

/* TYPOOGRAPHY & BACKGROUNDS & COLORS */
/* font-family */
body#P-portfolio {font-family:Arial, Helvetica, sans-serif;}


/* font-weight */
#projItemsList li,
#catList li,
#extList li,
#desc h3{font-weight:700;}


/* letter-spacing */
#projItemsList li,
#catList li,
#extList li,
#desc h3{letter-spacing:0.1em;}


/* text-decoration */
#projItemsList li a,
#catList li a,
#extList li a{text-decoration:none;}


/* text-transform */
#projItemsList li,
#catList li,
#extList li,
#desc h3{text-transform:uppercase;}


/* background */
body#P-portfolio {
	background-color:#ADCFF2;
	background-image: url(../images/portfolio/080821-070316-leaf-resized.jpg);
	background-position:0px -500px;
	background-repeat:no-repeat;
	}
@media handheld{
body#P-portfolio{background-image:none;}	
}
#nav-list{background-position:0px 25px;}
body#P-portfolio * #screen{
	background-color:none;
	background-image:url(../images/portfolio/081102-screenTrans.png);
	background-position:0px 0px;
	}
#hideShow{
	background-image:url('../images/portfolio/080907-hideShowBoth.png');
	background-position:0px -50px; /* "0px 0px"=show "0px -50px"=hide */
	}
li#prevLi{
	background-image:url('../images/portfolio/080907-prev.png');
	background-position:0 -50px;
	}
li#nextLi{background-image:url('../images/portfolio/080907-next.png');}
#projItems{background-image:url('../images/portfolio/080907-2ColumnTransTop.png');}
#projItemsList li{
	background-image:url('../images/portfolio/080907-projItemTransArrow.png');
	background-position:0px 20px;
	}
#projItemsList li.pI-selected{background-position:0px 0px;}
#cat{background-image:url('../images/portfolio/080907-1ColumnTransTop.png');}
#catList li{
	background-image:url('../images/portfolio/080907-catExtTransArrow.png');
	background-position:0px 20px;
	}
#catList li.cL-selected{background-position:0px 0px;}
#ext{background-image:url('../images/portfolio/080907-1ColumnTransTop.png');}
#extList li{
	background-image:url('../images/portfolio/080907-catExtTransArrow.png');
	background-position:0px 20px;
	}
#extList li#eL-resume{background-position:0px 0px;}
#desc{background-image:url('../images/portfolio/080907-2ColumnTransTop.png');}

/* background-repeat */
body#P-portfolio * #screen,
#projItemsList li,
#catList li,
#extList li{background-repeat:no-repeat;}


/* color */
body#P-portfolio {color:#1A1A1A;}

#projItemsList li a:link, #projItemsList li a:visited,
#catList li a:link, #catList li a:visited,
#extList li a:link, #extList li a:visited{color:#fff;}

#projItemsList li a:hover, #projItemsList li a:active,
#projItemsList li:hover a,
#projItemsList li.pI-selected a,
#catList li a:hover, #catList li a:active,
#catList li:hover a,
#catList li.cL-selected a,
#extList li a:hover, #extList li a:active,
#extList li:hover a{color:#1a1a1a;}

/* FONT-SIZE AND LINE-HEIGHT */
body#P-portfolio ,
#projItemsList li,
#catList li,
#extList li,
#desc p, #desc ul, #desc ul li{font-size:10px;}

#desc h3{font-size:11px;}
#desc * sup{font-size:.75em;}

/* line-height */
#desc * sup{line-height:0;}

#projItemsList li,
#catList li,
#extList li,
#desc p, #desc ul, #desc ul li,
#desc h3,
#desc * a{line-height:20px;}

/* MARGINS AND PADDINGS */
body#P-portfolio * #screen{
	padding:0;
	margin:10px 0 10px 10px;
	}
body#P-portfolio * #screen #screenItem{margin:15px 15px 10px 15px;}
#hideShow{
	margin-left:15px;
	margin-top:0px;
	}
ul#prevNext{
	margin:-3px 0 0 0;
	padding:0px;
	}
ul#prevNext li{padding:0;}
li#prevLi{margin:0 0 0 0;}
li#nextLi{margin:0 0 0 10px;}
#panels{margin:0 0 50px 260px;}
#projItems{margin:0 10px 0 0;}
#projItemsBottom{margin-top:225px;}
#projItemsList{margin:5px 0 0 5px;}
#projItemsList li{padding-left:20px;}
#catExt{margin:0 10px 0 0;}
#cat{margin:0 0 25px 0; /* 25px = 10px (panel gap) + 15px (additional gap covered by transparency bottom)*/}
#catBottom{margin-top:155px;}
#catList{margin:5px 0 0 5px;}
#catList li{padding-left:20px;}
#extBottom{margin-top:45px;}
#extList{margin:5px 0 0 5px;}
#extList li{padding-left:20px;}
#desc{
	padding-top:5px;
	margin:0 0 0 0;
	}
#descBottom{margin-top:220px; /* should be same as #desc height */}
#desc p, #desc ul, #desc ul li{margin:0 10px;}
#desc h3{margin:0 10px;}
#desc ul li{margin-left:15px;}
#desc ul.desc-aboutPieceList{padding-bottom:20px;}

/* BORDERS */
#hideShowImg,
ul#prevNext li,
ul#prevNext li img{border:0;}


/* WIDTHS AND HEIGHTS */
body#P-portfolio * #screen{width:615px;height:495px;}
#hideShow,
#hideShowImg{width:120px;height:20px;}
ul#prevNext{width:210px;height:20px;}
ul#prevNext li,
ul#prevNext li img{width:100px;height:20px;}
#panels{width:615px;height:240px;}
#projItems{width:240px;height:225px;}
#projItemsList{width:230px;}
#catExt,
#cat,
#ext{width:115px;}

#catExt{height:225px;}
#cat{height:155px;}
#ext{height:45px;}

#catList,
#extList{width:105px;}
#desc{width:240px;height:220px; /* 220px=225px (desired height)-5px (padding-top offset) */}
#desc * a{height:20px;}

/* FLOATS */
body#P-portfolio * #screen,
#hideShow,
ul#prevNext li,
#projItems,
#catExt,
#cat,
#ext,
#desc{float:left;}

ul#prevNext{float:right;}

#panels{clear:both;}

/* POSITIONING */
body#P-portfolio * #screen,
#hideShow,
ul#prevNext,
#projItemsBottom,
#catBottom,
#extBottom{position:relative;}

#projItemsBottom,
#catBottom,
#extBottom,
#descBottom{position:absolute;}

ul#prevNext{
	right:15px;
	top:462px; /* #screen height minus 33 */
	}

/* OTHER STUFF */
body#P-portfolio #jumpToContent{display:none;}
.inline{display:inline;}

/*JS will reverse this.*/
a#prevAnchor,
a#nextAnchor{display:none;}
a#prevAnchorNoScript,
a#nextAnchorNoScript{display:inline;}


ul#prevNext li:hover,
#projItemsList li:hover,
#catList li:hover{cursor:pointer;}

#desc ul li{
	list-style-type:disc;
	list-style-position:outside;
	}