@charset "UTF-8";
/* CSS Document */
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	background:#f6f6f6;
}

a:visited {
	color:#573b1c;
	text-decoration:underline;
}
a:link {
	color:#573b1c;
	text-decoration:underline;
}
a:hover {
	color:#89b553;
	text-decoration:underline;
}	
#container {
	position:relative; 
	width:800px; 
	height:700px;
	background:#fff; 
	border:1px solid #89b553; 
	margin:3em auto;
}

#container img {
	text-align:center;
	margin:0px auto;
}

.map {
	padding:0; 
	margin:0; 
	list-style-type:none; 
	background:#fff url(../images/fraser/stuff/frasermap.jpg) no-repeat top;
	border:none; 
	width:300px; height:700px; 
	margin:0px; 
	position:relative; 
	z-index:100;}
	
/* move the text off screen */
.map li a {
	text-indent:-1210px;
	display:block;
	border:1px solid #b9b9b9;
	width:6px;
	height:6px;
	background: #573b1c;
	position:absolute;
	line-height:6px;
	left: 209px;
	top: 404px;
}
	
/* make the images and description invisible and an absolute position so that it does not take up any space */
.map li a em {
	visibility:hidden; 
	position:absolute;}

/* position the square markers */
.map li a.first {
	top:172px;
	left:277px;
	z-index:20;
}
.map li a.second {
	top:201px;
	left:276px;
	z-index:19;
}
.map li a.third {
	top:216px;
	left:275px;
	z-index:18;
}
.map li a.fourth {
	top:229px;
	left:258px;
	z-index:17;
}
.map li a.fifth {
	top:236px;
	left:240px;
	z-index:16;
}

.map li a.sixth {
	top:246px;
	left:255px;
	z-index:15;
}
.map li a.seventh {
	top:261px;
	left:254px;
	z-index:14;
}
.map li a.eight {
	top:281px;
	left:257px;
	z-index:13;
}
.map li a.ninth {
	top:300px;
	left:262px;
	z-index:12;
}
.map li a.tenth {
	top:308px;
	left:245px;
	z-index:11;
}
.map li a.eleventh {
	top:332px;
	left:219px;
	z-index:10;
}
.map li a.twelfth {
	top:341px;
	left:207px;
	z-index:9;
}
.map li a.thirteenth {
	top:359px;
	left:208px;
	z-index:8;
}
.map li a.fourteenth {
	top:432px;
	left:200px;
	z-index:7;
}
.map li a.fifteenth {
	top:442px;
	left:136px;
	z-index:6;
}
.map li a.sixteenth {
	top:381px;
	left:180px;
	z-index:5;
}
.map li a.seventeenth {
	top:406px;
	left:157px;
	z-index:4;
}
.map li a.eighteenth {
	top:361px;
	left:211px;
	z-index:3;
}
.map li a.nineteenth {
	top:440px;
	left:227px;
	z-index:2;
}
.map li a.twentieth {
	top:436px;
	left:262px;
	z-index:1;
}

/* move the text back into view on hover */
.map li a:hover {
background:#89b553; text-indent:0; height:1.2em; 
font-size:1em; color:#f6f6f6; line-height:1em; padding:2px 30px; width:580px;}

/* hack for IE5.x */
* html .map li a:hover {width:110px; height:1.5em; w\idth:90px; he\ight:1.2em;}

/* make the descriptive text visible, give it a size and position */
.map li a:hover em {
visibility:visible; margin-left:5px; 
background:#f6f6f6; 
border:1px solid #7cb5db;
width:550px; color:#7cb5db; padding:30px;
font-style:normal; top:-135px; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande", arial, sans-serif; 
letter-spacing:1px; line-height:1.5em;}

.map li a:hover em b {
	text-align:center;}
	
/* hack for IE5.x */
* html .map li a:hover em {width:200px; w\idth:200px;}

/* give the image a border and margin */
.map li a:hover em img {border:none; display:block; margin-bottom:10px;}

/* style the empty span (I know it's not semantically correct) into an arrow point */
.map li a:hover em span {display:block; width:0; height:0; overflow:hidden; 
border:10px solid #f6f6f6; border-width:15px 0 15px 15px; border-left-color:#89b553; position:absolute; left:0; top:128px;}

/* hack for IE5.x */
* html .map li a:hover em span {width:30px; height:30px; w\idth:0; he\ight:0;}
	
#container h5 {
	clear:both;
	position:absolute;
	left:615px;
	top:28px;
	margin:0;
	padding-top:20px;
	text-align:center;
	font-size:10px;
}
#container h5 a {
	color:#573b1c;
	font-weight:lighter;
}
#container h5 a:hover {
	color:#89b553;
}
#container h5 em {
	font-size:0.6em; 
	color:#573b1c;
	}

#back2	{
	font-size:1.1em;
	float:right;
	position:relative;
	top:-20px;
	color:#573b1c;
}