.az {
	padding:0; 
	list-style-type:none; 
	background: url(images/map.jpg) no-repeat; 
	width:650px; 
	height:725px; 
	margin:0 auto; 
	position:relative;
	z-index:100;
	}
	
/* move the text off screen */
.az li a {
	text-indent:-9999px;
	display:block;
	width:20px;
	height:20px;
	background: url(images/spacer.gif);
	position:absolute;
	left: 474px;
	top: -452px;
	text-decoration:none;
	}


	
/* make the images and description invisible and an absolute position so that it does not take up any space */
.az li a em {
	visibility:hidden; 
	position:absolute;
	}
	
/* position the square markers */
/*city co-ordinates*/
.az li a.kingman {top:233px; left:91px;}
.az li a.flagstaff {top:252px; left:348px;}
.az li a.prescott {top:330px; left:254px;}
.az li a.phoenix {top:473px; left:292px;}
.az li a.yuma {top:580px; left:10px;}
.az li a.tucson {top:650px; left:430px;}

/*River co-ordinates*/
.az li a.virginRI {top:32px; left:125px;}
.az li a.coloradoRI {top:125px; left:184px;}
.az li a.coloradoaltRI {top:457px; left:38px;}
.az li a.littlecoloradoRI {top:170px; left:372px;}
.az li a.verdeRI {top:355px; left:340px;}
.az li a.saltRI {top:477px; left:326px;}
.az li a.gilaRI {top:551px; left:98px;}
.az li a.gilaltRI {top:538px; left:377px;}
.az li a.sanpedroRI {top:570px; left:443px;}
.az li a.satacruzRI {top:585px; left:335px;}

/* move the text back into view on hover */
.az li a:hover {
	background:#9b532a; 
	text-indent:0; 
	height:0.90em; 
	font-size:10px; 
	color:#dcc7b3; 
	line-height:1em; 
	padding:7px; 
	width:20px;
	text-decoration:none;

	}
	

	
/* hack for IE5.x */
* html .az li a:hover {
	width:auto; 
	height:1.5em; 
	w\idth:auto; 
	he\ight:1.2em;
	}
	
/* make the descriptive text visible, give it a size and position */
.az li a:hover em {
text-align:center;
	visibility:visible; 
	margin-left:5px; 
	background:#dcc7b3; 
	border:1px solid #9b532a;
	width:160px; 
	color:#600; 
	padding:10px;
	padding-left:23px;
	font-style:normal; 
	top:-135px; 
	left:8px;
	font-family:tahoma, geneva, "lucida sans unicode", "lucida grande", arial, sans-serif; 	
	letter-spacing:1px; 
	line-height:1.3em;
	text-decoration:none;
	}
	
	
	
/* hack for IE5.x */
* html .az li a:hover em {width:200px; w\idth:160px;}

/* give the image a border and margin */
.az li a:hover em img {
	border:1px solid #000; 
	display:block; 
	margin-bottom:10px;
	}

/* style the empty span (I know it's not semantically correct) into an arrow point */
.az li a:hover em span {
	display:block; 
	width:0; 
	height:0; 
	overflow:hidden; 
	border:13px solid #dcc7b3; 
	border-width:13px 13px 13px 13px; 
	border-left-color:#9b532a; 
	position:absolute; 
	left:0; 
	top:132px;

	}

/* hack for IE5.x */
* html .az li a:hover em span {
	width:auto; 
	height:30px; 
	w\idth:0; 
	he\ight:0;
	}