div.speechbubbles{
background: url(../images/transparent.png);
/*background-color:#000000; background color of tooltip*/
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
border:1px solid black;
position:absolute;
top:0;
z-index:100;
visibility:hidden;
line-height:1.3em;
padding:8px;
width:68px; /*default width of tooltip*/
border-radius:6px; /*CSS3 border radius*/
-moz-border-radius:6px;
-webkit-border-radius:6px;
/*-moz-box-shadow: 2px 5px 10px #CCCCCC;
-webkit-box-shadow: 2px 5px 10px#CCCCCC;
box-shadow: 2px 5px 10px #CCCCCC; CSS3 shadow*/
}



div.speechbubbles div.speechbubbles-arrow{  /*shared CSS for arrow DIV (upwards pointing)*/
border-color: transparent transparent #000000 transparent; /*border color should be same as div.speechbubbles background color*/
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
top:-19px;
left:20px;
z-index:101;
display:none; /* _display:none; IE hack to hide arrow in IE6*/
}

div.speechbubbles div.speechbubbles-arrow-border{ /*shared CSS for arrow border DIV*/
border-color: transparent transparent black transparent; /*border color should be same as div.speechbubbles border color*/
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
top:-20px;
left:20px;
z-index:101;
display:none; /* _display:none; IE hack to hide arrow in IE6*/
}


div.downversion div.speechbubbles-arrow{ /*down arrow DIV specific CSS*/
border-color: #000000 transparent transparent transparent; /*border color should be same as div.speechbubbles background color*/
top:auto;
bottom:-19px;
}


div.downversion div.speechbubbles-arrow-border{ /*down arrow border DIV specific CSS*/
border-color: black transparent transparent transparent; /*border color should be same as div.speechbubbles border color*/
top:auto;
bottom:-20px;
}