<style type="text/css">


div.img
{
position:relative;
  margin: 4px;
  padding: 0px 20px 20px 0px;
  border: 0px;
  height: auto;
  width: auto;
  margin-left: 30px;
  float: left;
  text-align: center;
}	

div.img2 img2
{
  display: inline;
  margin: 9px;
}
div.desc
{
  text-align:left;
  position:relative;
  top:-20px;
  left:-10px;
  font-weight: bold;
  font-family: Arial;
  font-size:  155%;
  color: #FFFFFF;
  width: 520px;
  margin: 5px;
}




.p1{
position: relative;
z-index: 0;

}

.p1:hover{
background-color: transparent;
z-index: 5;
}

.p1 span{ /*CSS for enlarged image*/
position: absolute;
background-color: #8c97a3;
left: -1000px;
width:294px; 
height:221px;
visibility: hidden;
border-style:solid;
border-color:#8c97a3;
border-width:0px;
text-decoration: none;
}

.p1 span img{ /*CSS for enlarged image*/
padding: 0px;
}


.p1:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
width:200px; 
height:150px;
top:0px;
left:60px; 
margin:-320px 0 0 -225px; 
}


</style>

