H1 {text-align:left; color:black; font: normal 20pt "Arial Black"} 
H2 {text-align:left; color:red; font: italic 14pt "Verdana"} 
P {text-align:left; color:black; font: normal 12pt "Verdana"} 
A:link {color: blue; text-decoration:none} 
A:visited {color: gray; text-decoration:none} 
A:hover {text-decoration:underline} 

#capybara { position: relative; }
#capybara a span { display: none; color: #FFFFFF; }
#capybara a:hover span { display: block; position: absolute; width: 150px; background: #aaa url(http://www.lovetolearn.co.nz/l2l_resources/images/capybara150x100.png); height: 100px; left: -10px; top: -100px; color: #FFFFFF; padding: 0 5px; }

#rodents { position: relative; }
#rodents a span { display: none; color: #FFFFFF; }
#rodents a:hover span { display: block; position: absolute; width: 90px; background: #aaa url(http://www.lovetolearn.co.nz/l2l_resources/images/rodents100x30.png); height: 30px; left: -10px; top: -10px; color: #FFFFFF; padding: 0 5px; }

#multi { position: relative; }
#multi a span { display: none; color: #FFFFFF; }
#multi a:hover span { display: block; position: absolute; width: 90px; background: #fff; height: 30px; left: 10px; top: -10px; color: #000; padding: 0 5px; }

.target {
  position:relative;
  color:purple;
  margin: 0px;
}
.target > span {
  background: white;
  color: white;
  white-space: nowrap;
  display:none;
}
.target:hover > span {
  display: inline;
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  overflow: visible;
}
#.syll0 { color: black; }
.syll0 { color: red; }
.syll1 { color: green; }
.syll2 { color: blue; }
.syll3 { color: yellow; }
.affix { color: white; } #for debugging - white in production