﻿/* set the size of the definition list <dl> and add the background image */
#imap {
	display:block; 
	width:593px; 
	height:264px; 
	background-image: url(images/wheretobuy/world-map.png);
	background-repeat: no-repeat;
	position:relative;
	background-position:center;
}

/* set up the definition list <dt><a> to hold the background image for the hover state */
#imap a#title {
	display:block;
	width:593px;
	height:0;
	padding-top:264px;
	overflow:hidden;
	position:absolute;
	left:0;
	top:0;
	background:transparent url(images/wheretobuy/world-map.png) no-repeat 593px 264px;
	cursor:default;
}

/* the hack for IE pre IE6 */
* html #imap a#title {
	height:264px;
	he\ight:0;
}

/* the <dt><a> hover style to move the background image to position 0 0 */
#imap a#title:hover {
	background-position: 0 0;
	z-index:10;
}

/* place the <dd>s in the correct absolute position */
#imap dd {
	position:absolute;
	padding:0;
	margin:0;
}


/* STYLE FOR NORTH AMERICA */
/* style the <dd><a> links physical size and the background image for the hover */
#imap a#North-America:hover span {
	left:0px; 
	top:240px;
}

#imap #picNorth-America {
	left:19px;
	top:19px;
	z-index:20;
}

#imap a#North-America {
	display:block;
	width:251px;
	height:127px;
	text-decoration:none;
	z-index:20;
}

#imap a#North-America:hover {
	display:block;
	width:251px;
	height:127px;
	background:transparent url(images/wheretobuy/North-America.png) 0px 0px no-repeat;
	text-decoration:none;
	z-index:20;
}

/* STYLE FOR SOUTH AMERICA */
#imap a#South-America:hover span {
	left:-182px; 
	top:151px;
}

#imap #picSouth-America {
	left:157px;
	top:132px;
	z-index:20;
}

#imap a#South-America {
	display:block;
	width:79px;
	height:112px;
	text-decoration:none;
	z-index:20;
}

#imap a#South-America:hover {
	display:block;
	width:79px;
	height:112px;
	background:transparent url(images/wheretobuy/South-America.png) 0px 0px no-repeat;
	text-decoration:none;
	z-index:20;
}

/* STYLE FOR Europe*/
#imap a#Europe:hover span {
	left:-330px; 
	top:274px;
}
#imap #picEurope {
	left:270px;
	top:40px;
	z-index:20;
}

#imap a#Europe {
	display:block;
	width:74px;
	height:64px;
	text-decoration:none;
	z-index:20;
}

#imap a#Europe:hover {
	display:block;
	width:74px;
	height:64px;
	background:transparent url(images/wheretobuy/Europe.png) 0px 0px no-repeat;
	text-decoration:none;
	z-index:20;
}

/* STYLE FOR Africa*/
#imap a#Africa:hover span {
	left:-308px; 
	top:202px;
}
#imap #picAfrica {
	left:252px;
	top:93px;
	z-index:20;
}

#imap a#Africa {
	display:block;
	width:119px;
	height:124px;
	text-decoration:none;
	z-index:20;
}

#imap a#Africa:hover {
	display:block;
	width:119px;
	height:124px;
	background:transparent url(images/wheretobuy/Africa.png) 0px 0px no-repeat;
	text-decoration:none;
	z-index:20;
}

/* STYLE FOR Australasia*/
#imap a#Australasia:hover span {
	left:-585px; 
	top:116px;
}

#imap #picAustralasia {
	left:463px;
	top:158px;
	z-index:20;
}

#imap a#Australasia {
	display:block;
	width:109px;
	height:73px;
	text-decoration:none;
	z-index:20;
}

#imap a#Australasia:hover {
	display:block;
	width:109px;
	height:73px;
	background:transparent url(images/wheretobuy/Australasia.png) 0px 0px no-repeat;
	text-decoration:none;
	z-index:20;
}

/* STYLE FOR Asia*/
#imap a#Asia:hover span {
	left:-404px; 
	top:289px;
}

#imap #picAsia {
	left:326px;
	top:29px;
	z-index:20;
}

#imap a#Asia {
	display:block;
	width:249px;
	height:142px;
	text-decoration:none;
	z-index:20;
}

#imap a#Asia:hover {
	display:block;
	width:249px;
	height:142px;
	background:transparent url(images/wheretobuy/Asia.png) 0px 0px no-repeat;
	text-decoration:none;
	z-index:20;
}

/* style the span text so that it is not initially displayed */
#imap a span, #imap a:visited span {
	display:none;
}

/* define the common styling for the span text */
#imap a:hover span {
	position:absolute;  
	width:740px; 
	display:block; 
	font-family:arial; 
	font-size:12px; 
	background:#fff; 
	color:#000; 
	border:0px solid #000; 
	padding:5px;
}

/* the hack for IE pre IE6 */
* html #imap a:hover span {
	width:780px; 
	w\idth:780px;
}

#imap a:hover span {
	left:0px; 
	top:240px;
}

