li.enlarge{
display:inline-block; /*places the images in a line*/
position: relative;
z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
margin:2px 2px 2px 2px;
}
li.enlarge img{
background-color:#eae9d4;
padding: 0px;
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
li.enlarge span{
position:absolute;
left: -9999px;
background-color:#eae9d4;
padding: 1px;
font-family: 'Droid Sans', sans-serif;
font-size:.9em;
text-align: center;
color: #495a62;
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius:8px;
}
li.enlarge:hover{
z-index: 50;
cursor:pointer;
}
li.enlarge span img{
padding:2px;
background:#ccc;
}
li.enlarge:hover span{
top: -100px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: 50px; /*distance from the left of the thumbnail to the left of the popup image*/
}
li.enlarge:hover:nth-child(2) span{
left: -100px;
}
li.enlarge:hover:nth-child(3) span{
left: -200px;
}
/**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
li.enlarge img, li.enlarge span{
behavior: url(pie/PIE.htc);
}