@charset "UTF-8";
/* CSS Document */


img {border: none;}

/*----------------------------------- Outer layer of slider effect - don't change this -------------------*/

#portfolioSection{ 
position: absolute; top: 342px; left: 409px; z-index: 100;
height:440px; width:480px; overflow: hidden; 
margin:0px; padding:0px 0;
color:#666666;
font-size:11px; line-height:1.6em; border-top: 2px solid #F6921E;
/* border-bottom: 2px solid #F6921E; */
}

*html body #portfolioSection {
width: 490px;}


#portfolioSection h3 {margin: 0 0 0 49px}
#portfolioSection h2 {margin: 0 0 4px 52px}

#portfolioHeader {position: absolute; z-index:100; top:312px; left: 409px; }
#portfolioHeader h3 {font-size: 1.5em}
#portfolioNav {position: absolute; z-index:100; top:323px; left: 602px; text-align: right; width: 292px}
#portfolioNav a {text-decoration:none; color: #333333; padding: 3px; }
#portfolioNav a:hover {color:#F6921E}

/* ----- portfolio nav----- */

#portfolioSection ul.controls {height: 300px; width: 32px ; float: left ; list-style:none; margin: 0 17px 0 0; padding:0; clear: left }
ul.controls li {height: 150px; width: 32px;}
ul.controls li a {display: block; height: 100%; width: 100%; text-indent: -9999px}
ul.controls li.previous {background:url(../images/portfolioNav_previous.gif) no-repeat;}
ul.controls li.next {background:url(../images/portfolioNav_next.gif) no-repeat;}

ul.controls li.previous a:hover {background:url(../images/portfolioNav_previous_over.gif) no-repeat;}
ul.controls li.next a:hover {background:url(../images/portfolioNav_next_over.gif) no-repeat;}

ul.controls li.topBlank {background:url(../images/portfolioNav_previous_blank.gif) no-repeat;}
ul.controls li.bottomBlank {background:url(../images/portfolioNav_next_blank.gif) no-repeat;}

/*----------------------------------- Inner layer of slider effect - you can make this wider to 
accomodate more portfolio divs, otherwise, don't change  -------------------*/

#work_images  { height:150000px; width:480px;  position: relative;  margin:0px; padding:0px; z-index:10;}

#work_images p { margin:0 0 5px 49px;}

#work_images img {margin-bottom:7px;}

/*----------------------------------- This class separates the portfolio pieces -------------------*/
div.port_piece { width:580px; height:435px; position:absolute; padding:10px 0px; line-height:1.4em; }
*html body div.port_piece {width: 490px}
div.port_piece h1 {margin:0 0 9px 0px;}
div.port_piece h2 {font-size:14px; margin:4px 0 4px 0px; float: left}
div.port_piece p {margin:0 0 0px 10px; line-height:1.8em; width: 430px }

#portfolioSection p a {text-decoration:none; color: #F6921E; }
#portfolioSection p a:hover {color:#F6921E; text-decoration: underline}
/*-----------------------------------Use id of intro and closing for the first div in each section - don't change -------------------*/

#intro, #closing {top:0px; left:0px; }