div.navi { position: absolute; bottom: 40px; left: 25px; width:900px; height:20px; text-align: center; }
div.navi a {
	width:16px;
	height:16px;
	margin:3px;
	background:url(images/navigation.png) 0 0 no-repeat; _background:url(images/navigation.jpg) 0 0 no-repeat;
	display:inline-block;
	font-size:1px; cursor: pointer;
}

/* mouseover state */
div.navi a:hover {
	background-position:0 -16px;      
}

/* active state (current page state) */
div.navi a.active {
	background-position:0 -32px;     
} 	


div#portfolio { position: absolute; top: 72px; left: 28px; width: 907px; height: 342px; background: url(images/bg_portfolio.png) no-repeat top left; _background: url(images/bg_portfolio.gif) no-repeat top left; }
/* root element for horizontal scrollables */
.scrollable { position:relative; overflow:hidden; width: 900px; height: 270px; }
/* root element for scrollable items */
.scrollable .items { width:20000em; position:absolute; clear:both; }
/* single scrollable item */
.scrollable .items  .item { float:left; cursor:pointer;
	width:900px;
	height:268px;
	padding:0px; border-top: #3D3D3D; border-bottom: #3D3D3D
}

/*div#corner-left { position: absolute; top: 0px; left: 0px; width: 7px; height: 7px; background:url(images/corner-left.png)}*/

/* box styling */

/* 
	image is contained on the overlay background image. 
	the closing button is thus just a transparent container. 
*/

/* define background image for the expose mask */
#mask {
	background:#123 url(images/mask_gradient_1800.png) no-repeat;
	background-position:50% -200px;
}

/* box styling */
#box {
	background-image:url(images/black.png); _background-image:url(images/black.gif);
	width:656px;
	height:524px;
	position:absolute;
	display:none;
}
#box .close {
	position:absolute;
	left:8px;
	top:8px;
	cursor:pointer;
	height:35px;
	width:35px;
	text-decoration:none;
	z-index: 20000;
}

div#images { position: absolute; top: 50px; left: 50px; width: 560px; height: 400px; background: #FFF }
/* root element for horizontal scrollables */
div#images { position:relative; overflow:hidden; width: 557px; height: 400px; }
/* root element for scrollable items */
#images div.items { width:20000em; position:absolute; clear:both; }
/* single scrollable item */
#images div.items div { float:left; position: relative; width:557px; height:400px; padding:0px;}
#images div.items div img { position: absolute; left: 68px; top: 23px; }
#images div.items div div.info { float: none; position: absolute; top: 300px; left: 68px; width: 415px; height: 85px; color: #333; font-size: 10px; }
#images div.items div div.info h3 { font-size: 14px; color: #333; padding: 6px 0; margin: 0 0 5px 0 }
#images div.items div div.info a.view { position: absolute; top: 0px; left: 270px; }
#images div.items div div.info a.view img { top: 0px; left: 0px; }
#images div.items div div.info ul { position: absolute; top: 30px; list-style: none; margin: 0 0 0 5px; }
#images div.items div div.info ul li { background: url(images/bg_ul_li.gif) no-repeat 0 2px; padding: 0 0 0 15px;}
#images div.items div div.info p.more-info { position: absolute; top: 65px; right: 0px; font-style: italic }


/* override button style on the overlay */
#box div.navi {
	position:absolute;
	bottom:33px;
	left:50px;
}

#box div.nextPage {
	left:580px;
}

/* next/prev buttons */
div#box div.navi {
	background-image:url(images/hori_large.png); _background-image:url(images/hori_large.jpg);
	width:30px;
	height:30px;
	float:left;
	margin-top:55px;
}

div#box div.navi:hover  		{ background-position:-30px 0; }
div#box div.navi:active  		{ background-position:-60px 0; }
div#box div.nextPage 			{ background-position: 0 -30px; clear:right; }
div#box div.nextPage:hover 	{ background-position:-30px -30px; }
div#box div.nextPage:active 	{ background-position:-60px -30px; } 


div#box div.navi.disabled {
	visibility:hidden;		
}