/*
  Sample tooltip code. Only works on grade A browsers (so no IE6, 7 or 8).
  
  See: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/ 
  for full info on how to style generated content & the associated pitfalls.  
*/

.fd-slider-handle:before,
.fd-slider-handle:after
        {
        content:"";
        /* Remove from screen */
        opacity:0;
        -webkit-transition-property: all;
           -moz-transition-property: all;
            -ms-transition-property: all;
             -o-transition-property: all;
                transition-property: all;        
        -webkit-transition-duration: 0.3s;
           -moz-transition-duration: 0.3s;
            -ms-transition-duration: 0.3s;
             -o-transition-duration: 0.3s;
                transition-duration: 0.3s;        
        -webkit-transition-delay: 0.2s;
           -moz-transition-delay: 0.2s;
            -ms-transition-delay: 0.2s;
             -o-transition-delay: 0.2s;
                transition-delay: 0.2s;
        }
/* 
   The tooltip body - as we position it above the slider and position the 
   tooltip arrow below it, we need to know the height of the body. This means 
   that multi-line tooltips are not supported.
   
   To support multi-line tooltips, you will need to position the tooltip below 
   the slider and the tooltip pointer above the tooltip body. Additionally, you 
   will have to set the tooltip body "height" to auto
*/
.fd-slider-handle:before
        {
        display:block;
        position:absolute;
        top:-30px;
        left:-25px;
        margin:0;
        width:60px;
        padding:5px;
        height:14px;
        line-height:12px;
        font-size:10px;
        text-shadow:0 1px 0 #000;
        color:#fff;
        background:#222;
        z-index:1;
        /* Use the ARIA valuetext property, set by the script, to generate the 
           tooltip content */    
        content:attr(aria-valuetext);  
        -webkit-border-radius:3px;
           -moz-border-radius:3px;
                border-radius:3px;
        -webkit-box-shadow: 0 0 4px #aaa;
           -moz-box-shadow: 0 0 4px #aaa;
                box-shadow: 0 0 4px #aaa; 
        }
.fd-slider-handle:after
        {
        outline:none;
        content:"";  
        display:block;        
        position:absolute;
        top:-14px;
        left:50%;
        margin:0 0 0 -5px;
        background:#222;
        z-index:2;
        width:10px;
        height:10px;
        overflow:hidden;
        /* Rotate element by 45 degress to get the "\/" pointer effect */
        -webkit-transform: rotate(45deg); 
           -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
             -o-transform: rotate(45deg);
        -webkit-box-shadow: 0 0 4px #aaa;
           -moz-box-shadow: 0 0 4px #aaa;
                box-shadow: 0 0 4px #aaa;
        clip:rect(4px, 14px, 14px, 4px); 
        }
/* Change opacity and position to kick in the transitions */ 
.fd-slider-focused .fd-slider-handle:before,
.fd-slider-hover   .fd-slider-handle:before,
.fd-slider-active  .fd-slider-handle:before
        {
        top:-25px;     
        opacity:1;             
        }
.fd-slider-focused .fd-slider-handle:after,
.fd-slider-hover   .fd-slider-handle:after,
.fd-slider-active  .fd-slider-handle:after
        {
        top:-9px;     
        opacity:1;             
        }
/* Remove completely for IE 6, 7 and 8 */
.oldie .fd-slider-handle:before,
.oldie .fd-slider-handle:after
        {
        display:none;
        }