#portfolio  {
	margin: 0;
	border: 0;
	padding: 30px 20px 30px;
	background-color: #fff;	
	width: 683px;	
	overflow: hidden;
	}


/* general settings for both scrollables */
div.items {	
	clear: both;
	width: 20000em;	
	position: absolute;
	}
	

/* the thumbnail scrollable */
#thumbnails {
	margin: 0;
	border: 0;
	padding: 0;
	position: relative;
	overflow: hidden;	
	width: 681px;	
	height: 145px;
	}

#thumbnails div.items div {
	margin: 0 5px;
	border: 1px solid #ccc;
	padding: 0;
	background: #fff;
	float: left;
	width: 215px;		
	}	

div.navi {
	margin: 0;
	border: 0;
	padding: 5px 20px 0;
	font:  bold 12px Optima, "Trebuchet MS", sans-serif;
	color: #400099;
	}
	
div.prevPage  {
	float: left;
	width: 100px;
	}
	
div.nextPage  {
	float: right;
	width: 100px;
	}
	
div.navi:hover  		{ color: #999; }
div.navi:active  		{ color: #999; }	
		

div.navi.disabled {
	visibility: hidden;		
	}


/* box is the overlay */
#box { 
	width: 700px;
	height: 625px;
	position: absolute;
	display: none;
	/*   z-index: 10000;	*/
	background-image: url(../assets/white.png); 	
	}


/* overlay scrollable */
#images {	
	margin: 50px;	
	position: absolute;
	overflow: hidden;	
	width: 600px;
	height: 500px;	
	}

/* single image */
#images div.items div {
	margin-right: 30px;
	float: left;
	width: 600px;
	height: 500px;
	}

/* the tooltip */
#images div.items div.info {
	float: none;
	margin-top: -100px; 
	padding: 5px 90px;
	width: 510px;
	height: 100px;	
	background-color: #ebebeb;  
	display:none;	
	}

#images div.items div.info h3 {
	margin: 5px 0 3px;
	border: 0;
	padding: 0;
	font:  bold 1.2em Optima, "Trebuchet MS", sans-serif;
	color: #000;	
	}
	
#images div.items div.info p {
	margin: 0;
	border: 0;
	padding: 3px 0 0 0;
	font:  normal 1em "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	color: #000;	
	}	
	
	
/*   overlay nav   */

#box div.prevPage  {
	position: absolute;
	bottom: 30px;
	left: 30px;
	}
	
#box div.nextPage  {
	position: absolute;
	bottom: 30px;
	left: 600px;
	}
	

#box .close {
	position: absolute;
	font:  bold 12px Optima, "Trebuchet MS", sans-serif;
	color: #400099;
	bottom: 30px;
	left: 330px;	
	cursor: pointer;
	}	

#box .close :hover  		{ color: #999; }
#box .close :active  		{ color: #999; }