body {font-family:arial;}
a {color:000000;}




.eff {	
	width:136px; /* the image size is 126x126, it's adjusted to fit the border as well*/
	height:136px;
	position:relative;	/* important, allow the children object to move inside its parent obj */
	overflow:hidden;  /* important, it hides the moved image */
	float:left; /* with the clear class, make it into 3 x 3 layout */	
	display:inline; /* IE float bug fix */
	margin:8px;
	font-size:12px;
}

.eff img {
	display:block;
	width:126px;
	height:126px;	
	text-decoration:none;
	border:4px solid #ccc;
	background:#ddd;
	position:absolute; /* important, it allows this obj to move by jquery */
	z-index:500; /* make sure it appears above the caption */
	cursor:pointer; cursor:hand;
}

.eff .caption {
	/* should be the same size with the image */
	width:126px;
	height:126px;
	background:#ffffff;
	border:4px solid #ccc;
	color:#eee;
	/* set the position to 0, 0 and appear under the image */
	position:absolute;
	top:0; left:0;
	z-index:0;
}

/* extra styling*/
.eff .caption a.header1 {
	margin:40px 25px 25px 25px;
	display:block;
	font-size:14px;	
	font-weight:700;
	color:#000000;
}

.eff .caption p {
	margin:5px;
	color:#ffffff;	
}
.clear {clear:both}