.balloonstyle{
position: absolute;
top: -500px;
margin-top:-40px;
visibility: hidden;
font:normal 12px Verdana;
line-height: 18px;
z-index: 100;
background:url(ttbg.png);
width: 200px;
color: white;
padding: 5px 0;
}

.balloonstyle p, .legend p {border: none; padding:0; margin:0; text-align:left;} 

p.lvl {width: 25%; float:left; text-align:center; border-bottom:2px solid #000; border-top:0;margin-top:-18px;}
.norm {color:green;}
.cruel{color:yellow;}
.ruth{color:orange;}
.merc{color:red;}

h3{border-bottom: 2px solid #000;line-height:18pt;text-align:center;}
h4{font-size: 16px; line-height: 16pt; margin:0; padding: 0; text-align:center;}
.town {margin-top:-18px;}

p.mobs,p.note {
border-top: 2px solid #000;
border-bottom:0;
-moz-border-image:url(borderh.png) 2 repeat; /* Firefox */
-webkit-border-image:url(borderh.png) 2 repeat; /* Safari and Chrome */
-o-border-image:url(borderh.png) 2 repeat; /* Opera */
border-image:url(borderh.png) 2 repeat;
border-left:0;
border-right:0;
padding-left:5px;
padding-right:5px;
}

span.rare {
color:yellow;
}

p.lvl, h3 {
-moz-border-image:url(borderh.png) 2 repeat; /* Firefox */
-webkit-border-image:url(borderh.png) 2 repeat; /* Safari and Chrome */
-o-border-image:url(borderh.png) 2 repeat; /* Opera */
border-image:url(borderh.png) 2 repeat;
border-left:0;
border-right:0;
}

.balloonstyle{
border: 5px solid black;
-moz-border-image:url(border.png) 5 repeat; /* Firefox */
-webkit-border-image:url(border.png) 5 repeat; /* Safari and Chrome */
-o-border-image:url(border.png) 5 repeat; /* Opera */
border-image:url(border.png) 5 repeat;
}

#arrowhead{
z-index: 99;
position:absolute;
top: -500px;
left: 0;
visibility: hidden;
}