/*---------- bubble tooltip -----------*/
a.tt{
    position:relative;
    /*color:#3CA3FF;*/
    color: #00a4cf;
    font-weight:bold;
    text-decoration:none;
    overflow:hidden;
    z-index:24;
}

.tooltip { position:absolute; width:320px; left:0; top:30px; margin-left:-90px; display:none;}
  .tooltip .top { display: block; height:12px; background: url(tt_bg_tl.png) no-repeat; margin-right:11px; }
    .tooltip .top span { display: block; height:12px; background:url(tt_bg_tr.png) no-repeat right top; position:relative; right:-11px; } 
  .tooltip .middle { border:2px solid #00a4cf; border-width:0 2px; display:block; background:#fff; color:#4e4f4f; cursor:text; font-weight:bold; }
    .tooltip .middle .arrow { width:20px; height:11px; background:url(top_arrow.png) no-repeat; position:absolute; top:0; margin-top:-9px; left:120px; }
    .tooltip .middle .card { position: absolute; top:2px; }
    .tooltip .middle .inner { padding:0 10px; display: block; margin:-2px 0 -1px; }
    .tooltip.with-card .middle .inner { padding-left:90px; height:96px } 
  .tooltip .bottom { display: block; height:19px; background:url(tt_bg_bl.png) no-repeat; margin-right:12px; clear:left; }
    .tooltip .bottom span { display: block; height:19px; background:url(tt_bg_br.png) no-repeat right top; position:relative; right:-12px; }
    
.tooltip.tl { left:0; top:-26px; margin:0 0 0 -215px; width:200px; }
  .tooltip.tl .middle .arrow { width:11px; height:20px; background:url(left_arrow.png) no-repeat; right:-9px; left:auto; margin:0; top:25px; }
   
.tooltip.tr { left:100%; top:-26px; margin:0 0 0 10px; width:200px; }
  .tooltip.tr .middle .arrow { width:11px; height:20px; background:url(right_arrow.png) no-repeat; left:-9px; margin:0; top:25px; }
  
.tooltip.tt { top:auto; bottom:0; margin-bottom:20px; }
  .tooltip.tt .middle .arrow { width:20px; height:11px; background:url(bottom_arrow.png) no-repeat; top:auto; bottom:-2px; left:120px; } 

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover { z-index:25; background:; }
a.tt:hover .tooltip { display:block; }