/******** hover zoom in 1 ************************/

.thumbnailWrapper ul {
	list-style-type: none; /* remove the default style for list items (the circles) */
	margin:0px; /* remove default margin */
	padding:0px; /* remove default padding */
}
.thumbnailWrapper ul li {
	 /* important: left float */
	position:relative; /* so we can use top and left positioning */
	/* hide the content outside the boundaries (ZOOM) */
	margin: auto;
}
.thumbnailWrapper ul li a img {
	width:150px; /* not important, the pics we use here are too big */
	position:relative; /* so we can use top and left positioning */
	/*border:none;*/ /* remove the default blue border */
	border-width: 1px;
	border-style: solid;
	border-color: #CAB08C;
}
.caption{
	position:absolute; /* needed for positioning */
	bottom:0px; /* bottom of the list item (container) */
	left:0px; /* start from left of the list item (container) */
	width:100%; /* stretch to the whole width of container */
	display:none; /* hide by default */
	/* styling bellow */
	background:#0c4b62;
	color:white;
	opacity:0.8;
}
.caption .captionInside{
	/* just styling */
	padding:10px;
	margin:0px;
}
.clear { clear:both; } /* to clear the float after the last item */