#pic {
  width: 532px;
  height: 425px;
  position: relative;
  padding-bottom:10em;
}

#pic ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.8em;
}
#pic li {
	list-style:none;
}

#pic a {
  text-decoration: none;
  color: #039;
}

#pic a .hotspot {
  width: 65px;
  height: 22px;
  position: absolute;
}


/* :BUG: This rule on it's own does not work in IE  */
#pic a:hover .hotspot {
  border: 1px solid #000;
}

/* :BUG: Neither does this rule  */
#pic a:hover .link {
  color: #0066FF;
}

/* :KLUDGE: However if you add this rule, both the previous rules now work. Weird*/
#pic a:hover {
  border: none;
}
#pic .partick a .hotspot {
  width: 50px;
  top: 146px;
  left: 124px;}

#pic .easterhouse a .hotspot {
  width: 90px;
  top: 165px;
  left: 403px;
}

#pic .cranhill a .hotspot {
  width: 55px;
  top: 147px;
  left: 341px;
}

#pic .maryhill a .hotspot {
  width: 55px;
  top: 82px;
  left: 147px;
}
#pic .govan a .hotspot {
  width: 50px;
  top: 196px;
  left: 99px;
}
/*****************/
#pic .partick a .link {
  bottom: -2em;
  left: 0;
}
#pic .maryhill a .link {
  bottom: 1.2em;
  left: 0;  
}
#pic .cranhill a .link {
  bottom: -4.4em;
left: 0;
}
#pic .easterhouse a .link {
  bottom: -5.6em;
  left: 0;
}

#pic .govan a .link {
  bottom: 0em;
 left: 0;
}