/* common styling */
div.balloon {
}

.balloon ul {
padding:0; 
margin:0;
border:0;
list-style-type: none;
}
.balloon ul li {
display:inline;
}
.balloon ul li a, .balloon ul li a:visited {
color: #000;
text-decoration:none; 
}


.balloon ul li a img, .balloon ul li a:visited img {
display:block;
border:0;
}

.balloon ul li dl {
  position:absolute;
  visibility:hidden;
  overflow:none;
  overflow-x:none;
  overflow-y:none;
  width:0px; 
  height:0px; 
  line-height:0px;
  cursor:default;
  
}

.balloon dd { 
  position:absolute;
  z-index:10;
  top:-150px;

  text-align:left; 
  width:195px; 
  height:115px; 
  overflow:none; 
  left:-30px;
  margin:0; 
  border: none; 
  background:transparent url(./images/balloon-bg.gif) no-repeat 0px 0px; 
}
html>body .balloon dd { 
  top:-150px;
}


.balloon dd p{ 
  padding:10px 10px 10px 10px; 

  text-align:left; 
  font-size:10px; 
  font-weight:normal; 
  color:#444444; 
  line-height:14px; 
  margin:0; 
}

/* specific to non IE browsers and IE7 first with IE5.5 and IE6 second */
.balloon ul li:hover,
.balloon ul li a:hover {
color:#000; 
position:relative;
cursor: pointer;
cursor:hand;
}

.balloon ul li:hover dl,
.balloon ul li a:hover dl {
visibility:visible;
}

.balloon ul li:hover dl em,
.balloon ul li a:hover dl em {

z-index:100;
display:block;
position:absolute;
left:30px;
top:113px;
width:52px; 
height:32px;
background:transparent url(./images/pointer1.gif);
}

html>body .balloon ul li:hover dl em,
html>body .balloon ul li a:hover dl em {
  top:113px;
}


.balloon ul li:hover dl em.left,
.balloon ul li a:hover dl em.left {
display:block;
position:absolute;
left:188px;
top:106px;
width:32px; 
height:40px;
background:transparent url(./images/pointer.gif);
}

html>body .balloon ul li:hover dl em.left,
html>body .balloon ul li a:hover dl em.left {
  left:190px;
  top:108px;
}


.balloon ul li dl#dl1 {left:115px; top:5px;}
html>body .balloon ul li dl#dl1 {left:112px; top:-14px;}

.balloon ul li dl#dl2 {left:117px; top:5px;}
html>body .balloon ul li dl#dl2 {left:117px; top:-14px;}

.balloon ul li dl#dl3 {left:115px; top:5px;}
html>body .balloon ul li dl#dl3 {left:115px; top:-14px;}



.balloon ul li dl#dl11 {left:40px; top:10px;}
html>body .balloon ul li dl#dl11 {left:40px; top:-80px;}

.balloon ul li dl#dl12 {left:40px; top:10px;}
html>body .balloon ul li dl#dl12 {left:40px; top:-80px;}


.balloon ul li dl#dl13 {left:40px; top:10px;}
html>body .balloon ul li dl#dl13 {left:40px; top:-80px;}

.balloon ul li dl#dl14 {left:-200px; top:10px;}
html>body .balloon ul li dl#dl14 {left:-200px; top:-80px;}

.balloon ul li dl#dl15 {left:-200px; top:10px;}
html>body .balloon ul li dl#dl15 {left:-200px; top:-80px;}



<!--!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->
 /* common styling */
div.balloon2 {
}

.balloon2 ul {
padding:0; 
margin:0;
border:0;
list-style-type: none;
}
.balloon2 ul li {
display:inline;
}
.balloon2 ul li a, .balloon2 ul li a:visited {
color: #000;
text-decoration:none; 
}


.balloon2 ul li a img, .balloon2 ul li a:visited img {
display:block;
border:0;
}

.balloon2 ul li dl {
  position:absolute;
  visibility:hidden;
  overflow:none;
  overflow-x:none;
  overflow-y:none;
  width:0px; 
  height:0px; 
  line-height:0px;
  cursor:default;
  
}

.balloon2 dd { 
  position:absolute;
  z-index:10;
  top:-150px;

  text-align:left; 
  width:195px; 
  height:115px; 
  overflow:none; 
  left:-180px;
  margin:0; 
  border: none; 
  background:transparent url(./images/balloon-bg.gif) no-repeat 0px 0px; 
}
html>body .balloon2 dd { 
  top:-150px;
}


.balloon2 dd p{ 
  padding:10px 10px 10px 10px; 

  text-align:left; 
  font-size:10px; 
  font-weight:normal; 
  color:#444444; 
  line-height:14px; 
  margin:0; 
}

/* specific to non IE browsers and IE7 first with IE5.5 and IE6 second */
.balloon2 ul li:hover,
.balloon2 ul li a:hover {
color:#000; 
position:relative;
cursor: pointer;
cursor:hand;
}

.balloon2 ul li:hover dl,
.balloon2 ul li a:hover dl {
visibility:visible;
}

.balloon2 ul li:hover dl em,
.balloon2 ul li a:hover dl em {

z-index:100;
display:block;
position:absolute;
left:80px;
top:113px;
width:52px; 
height:32px;
background:transparent url(./images/pointer2.gif);
}

html>body .balloon2 ul li:hover dl em,
html>body .balloon2 ul li a:hover dl em {
  top:113px;
}


.balloon2 ul li:hover dl em.left,
.balloon2 ul li a:hover dl em.left {
display:block;
position:absolute;
left:188px;
top:106px;
width:32px; 
height:40px;
background:transparent url(./images/pointer.gif);
}

html>body .balloon2 ul li:hover dl em.left,
html>body .balloon2 ul li a:hover dl em.left {
  left:190px;
  top:108px;
}


.balloon2 ul li dl#dl1 {left:115px; top:5px;}
html>body .balloon2 ul li dl#dl1 {left:112px; top:-14px;}

.balloon2 ul li dl#dl2 {left:117px; top:5px;}
html>body .balloon2 ul li dl#dl2 {left:117px; top:-14px;}

.balloon2 ul li dl#dl3 {left:115px; top:5px;}
html>body .balloon2 ul li dl#dl3 {left:115px; top:-14px;}



.balloon2 ul li dl#dl11 {left:40px; top:10px;}
html>body .balloon2 ul li dl#dl11 {left:40px; top:-80px;}

.balloon2 ul li dl#dl12 {left:40px; top:10px;}
html>body .balloon2 ul li dl#dl12 {left:40px; top:-80px;}


.balloon2 ul li dl#dl13 {left:40px; top:10px;}
html>body .balloon2 ul li dl#dl13 {left:40px; top:-80px;}

.balloon2 ul li dl#dl14 {left:-200px; top:10px;}
html>body .balloon2 ul li dl#dl14 {left:-200px; top:-80px;}

.balloon2 ul li dl#dl15 {left:-200px; top:10px;}
html>body .balloon2 ul li dl#dl15 {left:-200px; top:-80px;}