#content #portfolio{
	width:535px;
	}
	#content #portfolio #sample{
		width:247px;
		height:156px;
		float:left;
		margin:20px 40px 0 0;
		}
		#content #portfolio #sample.s2{
			margin:20px 0 0 0;
			}
		#content #portfolio #sample img{
			border:1px solid #cce1f4;
			cursor:pointer;
			}
			#content #portfolio #sample img:hover{
				border:1px solid #87a3bb;
			}
		#content #portfolio #sample p{
			color:#FFF;
			font-size:12px;
			text-align:center;
			width:auto;
			margin:3px 0;
			cursor:pointer;
			}
			#content #portfolio #sample p.url{
				color:#FFF;
				text-decoration:underline;
				}
			#content #portfolio #sample p.url:hover{
				color:#FFF;
				text-decoration:none;
				}
	
	/** OVERLAY (LIGHTBOX) EFFECT **/	
	#content #portfolio .overlay { 		 
		/* must be initially hidden */
		display:none;
		
		/* place overlay on top of other elements */
		z-index:10000;
		
		/* styling */
		background-color:#333;
		background-image:url(../img/overlay/clear.png) !important;	/* ADD THIS TO HAVE NO BACKGROUND AND AVOID WEIRD BROKEN IMAGE THING */ 
		
		width:640px;	
		min-height:200px;						/* IE6 MIN-HEIGHT TRICK */ 	
		height:auto !important;					/* IE6 MIN-HEIGHT TRICK */ 	
		height:200px; 							/* IE6 MIN-HEIGHT TRICK */
		border:1px solid #666;
		
		/* CSS3 styling for latest browsers */
		-moz-box-shadow:0 0 90px 5px #000;
		-webkit-box-shadow: 0 0 90px #000;     	 
	} 
	 
	/* "next image" and "prev image" links */
	#content .next, #content .prev {
		
		/* absolute positioning relative to the overlay */
		position:absolute;
		top:40%;	
		border:1px solid #666;	
		cursor:pointer;
		display:block;
		padding:10px 20px;
		color:#fff;
		font-size:11px;
		text-transform:uppercase;
		font-weight:bold;
		
		/* upcoming CSS3 features */
		-moz-border-radius:5px;
		-webkit-border-radius:5px;	
	}
	
	#content .prev {
		left:0;
		border-left:0;
		-moz-border-radius-topleft:0;
		-moz-border-radius-bottomleft:0;
		-webkit-border-bottom-left-radius:0;
		-webkit-border-top-left-radius:0;
	}
	
	#content .next {
		right:0;
		border-right:0;
		-moz-border-radius-topright:0;
		-moz-border-radius-bottomright:0;
		-webkit-border-bottom-right-radius:0;
		-webkit-border-top-right-radius:0;	
	}
	
	#content .next:hover, #content .prev:hover {
		text-decoration:underline;
		background-color:#000;
	}

	 
	/* the "information box" */
	.info {
		position:absolute;
		bottom:0;
		left:0;	
		padding:10px 15px;
		color:#fff;
		font-size:11px;
		border-top:1px solid #666;
	}
	
	.info strong {
		display:block;	
	}
	
	/* progress indicator (animated gif). should be initially hidden */
	.progress {
		position:absolute;
		top:45%;
		left:50%;
		display:none;
	}
	
	#content .next, #content .prev{
		background:#13283B !important;
		background:rgba(0, 0, 0, 0.6) url(../img/overlay/h80.png) repeat-x;		
	}
	
	.info {
		background:#13283B !important;
		background:rgba(0, 0, 0, 0.6) url(../img/overlay/h80.png) repeat-x;		
	}

	#content #portfolio .overlay .close { 
		background-image:url(../img/overlay/close.png);
		position:absolute;
		right:-15px;
		top:-15px;
		cursor:pointer;
		height:30px;
		width:30px;
	}
	
	/* when there is no next or previous link available this class is added */
	.disabled {
		visibility:hidden;		
	}