/* default link styling needed for IE6 to work */
.buttons a {color:#000000;} 
.buttons a:active {color:#FFF;}
.buttons a:hover {text-decoration:none;} 

/* remove the margin and bullets, set the padding for this demo only*/ 
.buttons {margin:0px; padding:0px; list-style:none;font:11px Arial, Verdana, Helvetica, sans-serif;width:949px; background:#F0F0F0 url(../images/menubg.jpg) repeat-x;border:1px solid #818181;border-top:2px solid #000;border-bottom:none;} 

/* display the list items inline with a right margin to space the buttons. Use this to pre-load the hover image */  
.buttons li {display:inline; float:left; padding-right:2px; background:url(../images/menuseperator.jpg) right top no-repeat; height:32px;}    

/* style the links and place the background image to start from left edge */
.buttons li a {display:block; height:32px; float:left; background:url(../images/menubg.jpg) repeat-x; text-decoration:none;letter-spacing:1px; line-height:32px;padding:0px 7px}    



/* style the link hover and the link hover b to replace the background image - border:0 needed for IE6 to work */
.buttons li a:hover, .buttons li a:hover b {border:0; background:url(../images/menubg_hover.jpg) repeat-x; cursor:pointer;color:#FFF}

/* style the active state to replace the background image. This can also be used for a 'current' tab if you wish */
.buttons li a:active, .buttons li a:active b, .buttons li a.current, .buttons li a.current b {background: url(../images/menubg_hover.jpg) repeat-x;color:#FFF;}

/* move the text down by 3 pixels, and to the right by 2 pixels */
.buttons li a:active b, .buttons li a.current b { line-height:32px; margin-left:21px; padding-right:19px;}

.buttons li.nobg{background:none;padding-right:0px;} 

.tooltip {
    display: inline-block;    
}
.tooltip .tooltiptext {
    margin-left:9px;
    width : 320px;
    visibility: hidden;
    background-color: #FFF;
    border-radius:4px;
    border: 1px solid #aeaeae;
    position: absolute;
    z-index: 1;
    padding: 5px;
    margin-top : -15px; /* according to application */ 
    opacity: 0;
    transition: opacity 1s;
}
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 5%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #aeaeae transparent transparent;
}


.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.tooltip{
    font-size: 12pt;
}