/* extracted from CSS Mastery Advanced Web Standards Solutions by Andy Budd*/

/* :BUG: The example in the book uses an img element to display the image.
However IE6/7 seems to have problems displaying the anchors as block when over an image element
As such, I have updated the example to use background images instead */

body {
  font: 76%/1.8 "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
  background-color: #fff;
}

#pic {
  width: 550px;
  height: 350px;
  position: relative;
	background: url(../doctors/doctors.jpg) no-repeat;
}

#pic ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#pic a {
  position: absolute;
  width: 80px;
  height: 200px;
  color: #000;
  text-decoration: none;
 /* border: 0px solid transparent;*/
}


#pic a .outer {
  display: block;
  width: 78px;
  height: 98px;
}

#pic a .inner {
  display: block;
  width: 76px;
  height: 96px;
}

#pic a:hover {
  border-color: #d4d82d;
}

#pic:hover a .outer, #pic a:hover .outer {
  /*border: 0px solid #000;*/
}

#pic:hover a .inner, #pic a:hover .inner {
  /*border: 0px solid #fff;*/
}


#pic .kurt a {
  top: 35px;
  left: 33px;
}

#pic .karoline a {
  top: 45px;
  left: 122px;
}

#pic .thomas a {
  top: 35px;
  left: 200px;
}

#pic .mary a {
  top: 55px;
  left: 265px;
}

#pic .patrick a {
  top: 15px;
  left: 337px;
}

#pic .michael a {
  top: 17px;
  left: 407px;
}

#pic a .note {
  position: absolute;
  bottom: -3em;
  width: 9em;
  padding: 0.2em 0.5em;
  background-color:#ffc;
  text-align: center;
  left: -30000px;
  margin-left: -5em;
}

#pic a:hover .note {
  left: 50px;
}