/* ----------------------------- Rollover Image Links for Home Page */
		  
#p-evans 
{
	position: relative;
	width: 990px;
	height: 663px;
	background: url(images/home.jpg) no-repeat;
	margin: 0px auto;
	padding: 0;
}

#p-evans li 
{
	display:block;
	position:absolute;
	list-style:none;
	margin:0;
	padding:0;
}

#p-evans a 
{
	display:block;
	text-indent:-9999px;
	text-decoration:none;
	outline:none;
	cursor:default;
}

/*
#p-evans a:hover {
opacity: 0.6;
filter: alpha(opacity=60);
-moz-opacity: 0.60;
-khtml-opacity: 0.6;
}
*/

/* Photo position & size
Stipulates the visible image position (from the left and top edges), along with the width & height of the photo. */

#home {left: 285px; top: 381px; width: 56px; height: 88px; z-index: 10;}
#about {left: 461px; top: 136px; width: 59px; height: 90px; z-index: 10;}
#studios {left: 62px; top: 416px; width: 102px; height: 75px; z-index: 10;}
#weddings {left: 65px; top: 157px; width: 86px; height: 148px; z-index: 10;}
#portraits {left: 268px; top: 40px; width: 77px; height: 79px; z-index: 10;}
#fashion {left: 439px; top: 322px; width: 91px; height: 152px; z-index: 10;}
#specialoffers {left: 249px; top: 201px; width: 104px; height: 76px; z-index: 10;}
#blog {left: 616px; top: 253px; width: 81px; height: 80px; z-index: 10;}
#peplogo {left: 714px; top: 17px; width: 262px; height: 86px; z-index: 10;}
#info {left: 770px; top: 135px; width: 195px; height: 20px; z-index: 10;}


/* Photo height
This is where you set the link height. This is not the same as the height stated above in 'Photo position & size'. */
#home a {height: 88px; cursor: pointer;}
#about a {height: 90px; cursor: pointer;}
#studios a {height: 75px; cursor: pointer;}
#weddings a {height: 148px; cursor: pointer;}
#portraits a {height: 81px; cursor: pointer;}
#fashion a {height: 152px; cursor: pointer;}
#specialoffers a {height: 76px; cursor: pointer;}
#blog a {height: 80px; cursor: pointer;}
#peplogo a {height: 86px; cursor: pointer;}
#info a {height: 20px; cursor: pointer;}

#home a:hover, #about a:hover, #studios a:hover, #weddings a:hover, #portraits a:hover, 
#fashion a:hover, #specialoffers a:hover, #blog a:hover
{	
	background: url(images/home.jpg); background-repeat:no-repeat;
}

/* Photo hover image position
And lastly you tell the browser where to look for the hover image (outside the visible image).*/
#home a:hover {background-position:-269px -665px;}
#about a:hover {background-position:-200px -665px;}
#studios a:hover {background-position:-550px -665px;}
#weddings a:hover {background-position:-10px -665px;}
#portraits a:hover {background-position:-340px -665px;}
#fashion a:hover {background-position:-100px -665px;}
#specialoffers a:hover {background-position:-430px -665px;}
#blog a:hover {background-position:-670px -665px;}