body { background-color:#292929; color:white;text-align:center; font-family: 'georgia'; font-size: 13px; } /* not important */
.thumbnailWrapper { width:600px; margin:0px auto; } /* not important */

.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 {
float:left; /* important: left float */
position:relative; /* so we can use top and left positioning */
overflow:hidden; /* hide the content outside the boundaries (ZOOM) */
}
.thumbnailWrapper ul li a img {
width:200px; /* 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 */
}
.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:rgba(0,0,0,0.8);
color:white;
}
.caption .captionInside{
/* just styling */
padding:10px;
margin:0px;
}
.caption p{
text-align:center;
font-size:110%;
}
.clear { clear:both; } /* to clear the float after the last item */