/* 
   This file uses much from the MS book of dark arts. You may want to remove some of the gradient filters
   and just use solid background colours instead if you feel the U.I. is sluggish. 
*/

/* The slider is given this class whenever the value has not been set by the user */
.fd-slider-no-value .fd-slider-handle
        {
        /*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='//img.ezinearticles.com/spriting/fd-slider-sprite.png');*/
        }           
.fd-slider-handle
        {
        /* Remove the background image set within the main fd-slider.css file */
        /*background:none;*/
        /* 
        
        The .png images used for the drag handle states have been base64 encoded at the top of this file.
        
        Remember: Change the URL to the CSS file within the filter statements to suit your installation. 
        
        See: http://www.phpied.com/the-proper-mhtml-syntax/ for an overview of using MHTML         
        
        */
        /*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='//img.ezinearticles.com/spriting/fd-slider-sprite.png');*/
                
        /* Nasty - using an expression to not draw focus outline on drag handle */
        outline:expression(hideFocus='true');
        }
.fd-slider-focused .fd-slider-handle,
.fd-slider-hover   .fd-slider-handle
        {
        /* Remove the background image set within the main fd-slider.css file */
        /*background:none;*/
        /* Use the AlphaImageLoader filter to display the .png image that has been base64 encoded at the top of this file */ 
        /*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='//img.ezinearticles.com/spriting/fd-slider-sprite.png');*/
        }
.fd-slider,
.fd-slider-vertical
        {        
        /* We have to set the slider background to have either a solid colour or a background image in order for the :hover
           events to work in IE. Without a solid background colour or background image, the mouse pointer will never display
           the "hand" state - which limits the "clickable" area of the slider be the dimensions of the inner "track bar"
           that sits below the drag handle (the inner track bar has been given a background colour so :hover events work). 
           
           To counter this problem, I've set the background to be a 20px x 20px transparent .gif which has been base64
           encoded at the top of this file (along with the three .png images used for the drag handle states).
        */             
        /*background:transparent url(mhtml:https://ezinearticles.com/css/fd-slider/fd-slider-ie6.css!blank) repeat;*/
        }
.fd-slider-bar
        {  
        left:10px;
        right:auto;
        /* IE6 does not recognise absolute positioning on four sides (top, left, right, bottom) so we use an expression
           to dynamically calculate the track bar size. Yes, it is horrible - you don't need to remind me. */  
        width:expression((this.parentNode.offsetWidth - 20) + "px");
        /* Using the gradient filter for IE. Colour strings in AARRGGBB format */
        filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffececec',endColorstr='#ffcccccc');
        }
.fd-slider-vertical .fd-slider-bar
        {  
        top:10px;
        bottom:auto;
        left:8px;        
        /* Again, we use an expression to calculate the vertical track bar size */
        height:expression((this.parentNode.offsetHeight - 20) + "px");
        /* Using the gradient filter for IE. Colour strings in AARRGGBB format */
        filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffececec',endColorstr='#ffcccccc');
        }
.fd-slider-range
        { 
        left:10px;        
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff66cccc',endColorstr='#ff33ccff');
        }
.fd-slider-vertical .fd-slider-range
        {  
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff66cccc',endColorstr='#ff33ccff');
        }
.fd-slider-inner
        {  
        display:none;      
        position:absolute;        
        height:2px;
        border:1px solid #bbf;
        background:#bbf;      
        top:4px;        
        bottom:none;
        left:4px;
        right:12px;              
        z-index:2;       
        margin:0;
        padding:0;
        overflow:hidden;
        line-height:4px;        
        filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=3.5); 
        }
/* Reposition the "blur" filter for the vertical slider */
.fd-slider-vertical .fd-slider-inner
        {        
        width:2px;
        height:auto;     
        top:4px;
        bottom:12px;
        left:4px;
        right:auto;
        }
.fd-slider-focused .fd-slider-inner
        {        
        display:block;
        }       
/* Disabled slider styles */
.fd-slider-disabled .fd-slider-handle
        {
        /*background:none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='//img.ezinearticles.com/spriting/fd-slider-sprite.png');*/
        }
.fd-slider-disabled .fd-slider-bar
        {
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff222222',endColorstr='#ff000000');
        }
.fd-slider-disabled .fd-slider-range
        {
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff666666',endColorstr='#ff333333');
        }