/*
Content-Type: multipart/related; boundary="_BASE64_SEPARATOR"
--_BASE64_SEPARATOR
Content-Location:handlenormal
Content-Transfer-Encoding:base64
iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAKeSURBVHjaYvz//z8DNQFAADExUBkABBDVDQQIIKobCBBALNgEGYGAYek5OQYhcW8Gdk5bBjZ2DbDEr583GH5+P8zw7uVWhmijR/+xRABAADGiiwHNYuZZdclaQkKiUEeY19aIm4FdkZ2RhYOJkfHHf4Z/J778/7ni4Yc9b1++mMgQZXAcqP8vsn6AAGLBcFnbCmUhIaESa1EeWyue/5wCLIzAYAGa9O8/AxsDA5MdDyOzoBK/+4w/v1jftK0oA2q5jexSgABC9zIbg4xSkKQQv5UQ01+2d78ZGN7+YvgHUg3CjFDMxcjE6iEnbL/vk3rkMwaGDqDQT5gBAAGEbiAXAzefA+Pv36wPvzEwPGFk+PfnPwNGOLEwMjD+ZWBiURYTcgMaOAnZQIAAQjeQB2ig6oPvvxkefWP4izc6GYEW/eeQButhYHgPEwYIIEwv//vH9OIHmE04C/0DhwYbshBAAGEmm1dPXgjIKAjzsTAysgKj4x8WY5mAAfn7HwPD1+fPXr9FkwMIIHQDfzHcuXyVQVZRi5uZkZEXaChI859/iEhhgVry+S/Dv18Pb9wA60ECAAGEbuAXhr1r9v2UUzL6p6mrKsDCxCjACjKUkYEZKAkK1H/AFPLh9///3x/devT7wMa9YD1IACCA0LPeN4bjO89937J04+PLF+4//PH337e////zMjMySAFTNogG8Z/duvb48Yal69/uWH0SrAcJAAQQSk4BJ2wGBl4gVmHQs7RjsPNzZtAwUmGQUhAGK3j24C3DjXN3GA5t2stw6fghoMgdIP6MnLABAghr1gNS3EAsBcQKUJoXKv0ZZCwQP4DSX9GzHkAAMWIrYKEuZQMndEg6Y4NHGiTMQN78ha1wAAggRmqX2AABRPXyECDAAK8q7HNsZWwXAAAAAElFTkSuQmCC==
--_BASE64_SEPARATOR
Content-Location:handleglow
Content-Transfer-Encoding:base64
iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAPcSURBVHjaYvz//z8DGmBEohmR+DDwHwkzINFgABBALFgMYoKyWaBsZiQ5kOa/QPwPiP9A+f+QDQYIIBY0w5ihmBWI2aCYBSrGADUMZNAvKP4NFfsLNeM/QAAhu5AZqpkdiDmhmAvKh6kDGfYTiL8B8Xco/olkGQNAALFATYZ5DaSZ+9evX/zLn/9QW/2B0enuH2bDNwwsMiDFIgx/niiz/D0fKvB/X6Qkxy02NjYmtHD9BxBAjMBIYYQaxgHEPO/evRPufvbP8dwf9hghbg5tAy5GVnl2BiYORkbG7/8Z/p/+8v/3ibffLliz/VxaKc18UEhI6C1Q3xcg/gFyJUAAsSBFANvPnz+5Vj79onXyJ2+cqiC7jgUPI6sgCwMj0Gog/s/Aycjw35aXgU2QmdNo+/M/zEC1r5O4uc+ys7P/ggbHP4AAYkLyMtuLFy/4N3xgcGfk4NIUZv7P8vHPP8YHP/4zAPH/+xAMZP9j5Gb6z6ItxKO7/yuTD0gPNPLAZgEEEMyF4Ah5/vw5/4N/CkZy//8xP/vJyPDyN8P/fwygIEGkmn/AMAIq/v/7PwMTIzun2fPnt/nl5eVfw5IXQAAhJxvmN2/e8L4T0JBi/PGX8cVvxv/MjEwMwKD7j5x2QRnh7/9////+A5r4j1UYpAc5rQIEEHKyYfj69SsrA/8/ple//jEwMzMBDQQ5g4EROVmDXPgXhP8C1fz7A9GDBAACiAU5B/z+/fuPwNf3734JiPIKsTEysgIdCPQwI8xEUMSAc+p/Joaff/8zsH/8+AGkB5oGwd4ACCAWpOz0B+i9rxLvntx/KCAqxw4U5mMBeRsoCfU0JPYY//8Buu4jMHDFPzx/CNIDjWGwoQABxIKUH39xc3O/1bx/49gHXhG1P1JyUjyMDMyCrIwgbzOADf7HCDT8P+N7oHq2ty9eKb24eYxbWvAtNBuCzPgPEEBMUAPB+VNWVvad6p9PZxVvnzzw8+mDlw+///n75c/f/5zAsBQFpkcQ/eXPv//fXzx5w3vtxH7Zb29OgvRADQQXFgABhByGv5WVlT/du3fv7qdLl7Zyn37x6Z6MtsUZMUWZj3yifCBF/J9efxJ5df+J0pOrJ1QYvh9W0NO7C9IDLSTAYQgQQMhe/isgIPBDW1v7NTCgLzNcv/5J6NKuG8DcIwWMVB5w2mJk/ALMFc+A2e2upqbmQ6DatyA9SEXaf4AAYoQWsCjFFzBtsZ09e5bn6dOnfKDE/ufPHw6w7SwsPyQlJT9KS0t/MjY2/iIiIvILqfgC+xQggBiRSmyqFLAAAcSCVrQzICn4R04VABBgAIVgtDIhSVTgAAAAAElFTkSuQmCC==
--_BASE64_SEPARATOR
Content-Location:handledisabled
Content-Transfer-Encoding:base64
iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJSSURBVHjaYvz//z8DNQFAADExUBkABBDVDQQIIKobCBBALNgEGYHA1dVVjp2d3ZuZmdkWiDVA4n///r0BxId//vy5dffu3Y/+Y4kAgABiRBcDmsXs4eFhJSQklCcqKmoLpNm4ubmZWVhYQAb+f/Pmza87d+7s+/DhwxSgoceB+v8i6wcIIBZ0l1lYWCjz8fEVSUpK2gAN5GBjY2MCamIEGgaS/w8UYwaKuV6+fJkVqPYVUOw2sksBAgjdyyDXBAENtAZqYgd6jen79+8gcWRvMAENYVNQULD7/ft3GJDfDcQ/YZIAAYRuIBcrK6sD0ELWz58/M3758uUftnQKNBBEsQoLCzsD6anIBgIEELqBPEADVYGGMQENI5TiQaYqgPQA8XuYIEAAYXgZ6CJs3sQKoK5nQxYDCCCMZAM07AU/P78Q0KWMUK/hNAzok1fo4gABhG7gr48fP14FGqgJTHuMoKQCMhQ5HGH8P3/+/AcaeA2kB9kAgABCN/DLkydP9vHy8hoBk40KMKYZgRjFILCtv34xANPhvUePHu0F6UE2ACCA0A389uLFi3OcnJwbgexgoKEKTExMjBwcHAygIAAmk/8/fvxgAKp5CEzcGx8+fHgGpAfZAIAAYkTzDijQeIFYBZgk7KSkpJwFBQVVuLi4hMG2ffv29v3793eePXu29+3bt4eAQneA+DNywgYIIKxZD0hxA7EUNFlIQS0Bgc9A/AyIH0Dpr+hZDyCAGHEkXEZocuCCpjNY0vgFDTOQN39hKxwAAoiR2iU2QABRvTwECDAAxcXwW8Zw7FoAAAAASUVORK5CYII==
--_BASE64_SEPARATOR
Content-Location:blank
Content-Transfer-Encoding:base64
R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw==
--_BASE64_SEPARATOR
Content-Location:handlenovalue
Content-Transfer-Encoding:base64
iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAjVJREFUeNrMVE1PE0EYfmZ32a1ugXVrS0FsoKWKxBps4kFNOBnjybPR/8Nv8A+Y1K+DxgMeIMYLngiBxGyQKK1NWxq3VpGW7tc4O25C024rBw5MMpnknXmfeeZ9nncIpRSnOQSc8jj7gFJYkLCBZxs69IkclHNzkJUk37A6NXTau2jsb+NJvkFDBCC9MYYlRF9sZZLJ5L3rsdFsXoU0qxAhIhByREE//aF2odg0zP3aKh4vfmX53kCGnNlyIa7r+v278ejcnSiVNYnFQOF5FDI7shQl8oX0+MJTxxJ/LBdes5R6N9PeJ4uYTt+c1MczuuBKDRswLfDT/iTBPE8E8UEqll37ffVWBVhhIWcQoAx17AqxbbHYAsoE1KHoq5NEQFwIYiahLzDAtWGACgOc2GvbKLXgDZXTp0ojGs8BWoMAJVYsUjs6oUc8rw+j3zb18i9tekYdY2KMMJd6IZ0pMHY2wzqsVg7M//jQwe52FZdnp1SRYJQVy092vGNRpOCSAxfUKhq17vqFAXaw+sropNIp71ouoUkC0UaYMZlzRLbp+q9kmjdtStulHdP+8MbgOUMALay/L7Xjlza/O4/yyC1elAURkwoH9oFQ7Xi0svP5Z/nd883mystvPGdQp3Bj/1MtgRu3s1h6OI/5fAJTMyo/UNk7hLFRx8e3BrbWv/gV9xl2Gzu09bgfAd8SsWCNBNu+/k02zWC1eluPhH2wAVMxAFa6SuMENfOf6Z7oczhz/+FfAQYATvji+0cdRCAAAAAASUVORK5CYII==
--_BASE64_SEPARATOR--
*/
/*
Quick notes:
- This file is heavily commented, run it through a CSS minifier before putting into production but don't remove the MHTML comment at the start. http://www.google.com/search?q=css+minifier
- The file requires CRLF (Windows) line endings in order for the MHTML images to work
- The script automagically adds the classname "oldie" to IE 6, 7 & 8
- A combination of the .oldie class and "safe css hacks" are used to target specific IE versions. See http://mathiasbynens.be/notes/safe-css-hacks
- MSHTML has been used to BASE 64 encode the various png images used for the drag handle states in IE6 and IE7. See http://www.phpied.com/the-proper-mhtml-syntax/
- All browsers except IE6 and IE7 get one regular base 64 encoded image sprite.
- The drag handle is only 20px in width & height and not suitable for touch screen devices. You will have to change the image etc if targeting a touch screen. 44px is the Apple norm.
- It's painless to BASE 64 your own image, use an online encoder. http://www.google.com/search?q=base+64+encoder - the only problem is that IE needs each frame of the handle sprite to be encoded individually.
- Remember to find and replace all occurences of "the_absolute_path_to_this_file" with an absolute path to this file on your server (no trailing slash required)
e.g. if your file is positioned at
http://www.mysite.com/css/fd-slider.css
Then you would run a find/replace, replacing the_absolute_path_to_this_file by
http://www.mysite.com/css
Remember, don't include the trailing slash on the directory path.
******
SoftMoon's Spectral Color-Picker package has replaced the_absolute_path_to_this_file with JS_toolbucket
You should add-to (or replace) the paths listed within this file with the absolute path as shown above...
******
*/
/* The styles given to the associated form element in order to hide it */
.fd-form-element-hidden
{
display:none;
}
/* Horizontal Outer wrapper - all other DOM elements added as children to this top level wrapper */
.fd-slider
{
width:100%;
/* The height of the slider handle */
height:20px;
/* Set a 10 pixel bottom margin */
margin:0 0 10px 0;
}
/* Vertical Outer wrapper - all other DOM elements added as children to this top level wrapper */
.fd-slider-vertical
{
/* The width of the slider handle */
width:20px;
/* Fill the available space */
height:100%;
/* Set a 10 pixel right and bottom margin */
margin:0 10px 10px 0;
/* You may wish to float the vertical sliders left or display:inline-block */
/* float:left; */
}
/* Shared rules - both horizontal & vertical sliders */
.fd-slider,
.fd-slider-vertical
{
text-align:center;
/* display:block required as the wrapper element is a span */
display:block;
/* This lets us absolutely position the drag handle */
position:relative;
/* Change the cursor */
cursor:pointer;
cursor:hand;
text-decoration:none;
border:0 none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-touch-callout:none;
user-select:none;
}
.fd-slider-inner
{
/* Used only by IE for the onfocus blur effect */
display:none;
}
/* IE 6, 7 & 8 onfocus blur effect */
.oldie .fd-slider-inner
{
display:none;
position:absolute;
height:2px;
border:1px solid #bbf;
background:#88f;
top:4px;
bottom:none;
left:4px;
right:12px;
z-index:2;
margin:0;
padding:0;
overflow:hidden;
line-height:4px;
/* IE 6 can't absolutely position on 4 sides so we reset the right to "auto" and use a nasty expression to calculate the width */
_right:auto;
_width:expression((this.parentNode.offsetWidth - 8) + "px");
/* Use the "blur" filter to simulate the box-shadow - not brilliant but the best we can do for IE */
filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=3.5);
}
/* Reposition for the vertical slider for IE 6, 7 & 8 */
.oldie .fd-slider-vertical .fd-slider-inner
{
width:2px;
height:auto;
top:4px;
bottom:12px;
left:4px;
right:auto;
/* IE 6 can't absolutely position on 4 sides so we reset the bottom to "auto" and use a nasty expression to calculate the height */
_bottom:auto;
_height:expression((this.parentNode.offsetHeight - 8) + "px");
/* Note: The "blur" filter rule cascades from the rule above */
}
/* Display the "blurred" div for IE 6, 7 & 8 when the slider gains focus */
.oldie .fd-slider-focused .fd-slider-inner
{
display:block;
}
/* The inner track bar */
.fd-slider-bar
{
position:absolute;
display:block;
z-index:2;
height:2px;
width:auto;
/* Fallback rules for non rgba aware browsers */
border:1px solid #bbb;
border-bottom:1px solid #aaa;
border-right:1px solid #aaa;
/* rgba versions */
border:1px solid rgba(187, 187, 187, .8);
border-bottom:1px solid rgba(170, 170, 170, .8);
border-right:1px solid rgba(170, 170, 170, .8);
margin:0;
padding:0;
overflow:hidden;
line-height:4px;
top:8px;
right:10px;
left:10px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background-color: #ddd;
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(#ececec, #ccc);
/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ececec), to(#ccc));
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(#ececec, #ccc);
/* Opera 11.10+ */
background-image: -o-linear-gradient(#ececec, #ccc);
}
.oldie .fd-slider-bar
{
/* IE6 does not recognise absolute positioning on four sides (top, right, bottom & left) so we use an expression
to dynamically calculate the track bar size. Yes, it is horrible - you don't need to remind me. */
_left:10px;
_right:auto;
_width:expression((this.parentNode.offsetWidth - 20) + "px");
/* Using the gradient filter for IE 6, 7 & 8. Colour strings in AARRGGBB format */
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffececec',endColorstr='#ffcccccc');
-ms-filter:"filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffececec',endColorstr='#ffcccccc')";
}
/* The animated range bar */
.fd-slider-range
{
position:absolute;
display:block;
z-index:3;
height:2px;
margin:0;
padding:0;
overflow:hidden;
line-height:2px;
top:9px;
left:11px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background-color: #4cc;
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(left, #6cc, #3cf);
/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#6cc), to(#3cf));
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(left, #6cc, #3cf);
/* Opera 11.10+ */
background-image: -o-linear-gradient(left, #6cc, #3cf);
}
.oldie .fd-slider-range
{
/* IE6 - is this needed? To test... */
_left:10px;
/* IE 6, 7 & 8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff66cccc',endColorstr='#ff33ccff');
-ms-filter:"filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff66cccc',endColorstr='#ff33ccff')";
}
/* Styles for the vertical sliders range bar */
.fd-slider-vertical .fd-slider-range
{
height:auto;
width:2px;
top:auto;
right:auto;
bottom:11px;
left:9px;
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, #3cf, #6cc);
/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, left top, left bottom, from(#3cf), to(#6cc));
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(top, #3cf, #6cc);
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #3cf, #6cc);
}
.oldie .fd-slider-vertical .fd-slider-range
{
/* IE 6, 7 & 8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff33ccff',endColorstr='#ff66cccc');
-ms-filter:"filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff33ccff',endColorstr='#ff66cccc')";
}
.fd-slider-vertical .fd-slider-bar
{
width:2px;
top:10px;
right:auto;
bottom:10px;
left:8px;
height:auto;
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(left, #ececec, #ccc);
/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, left top, right top, from(#ececec), to(#ccc));
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(left, #ececec, #ccc);
/* Opera 11.10+ */
background-image: -o-linear-gradient(left, #ececec, #ccc);
}
.oldie .fd-slider-vertical .fd-slider-bar
{
/* Again, we use an expression to calculate the vertical track bar size for IE 6 */
_top:10px;
_bottom:auto;
_right:auto;
_left:8px;
_height:expression((this.parentNode.offsetHeight - 20) + "px");
/* Using the gradient filter for IE 6, 7 & 8. Colour strings in AARRGGBB format */
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffececec',endColorstr='#ffcccccc');
-ms-filter"filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffececec',endColorstr='#ffcccccc')";
}
.fd-slider-vertical .fd-slider-handle,
.fd-slider-vertical .fd-slider-handle:link,
.fd-slider-vertical .fd-slider-handle:visited
{
cursor:N-resize;
}
/* The drag handle */
.fd-slider-handle,
.fd-slider-handle:link,
.fd-slider-handle:visited
{
position:absolute;
display:block;
padding:0;
border:0 none;
margin:0;
z-index:3;
top:0;
left:0;
width:20px;
height:20px;
outline:0 none;
background-color:transparent;
text-decoration:none;
/* Using a BASE64 encoded image sprite for the drag handle */
background-image:url(data:image/png;base64,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);
background-position:0 0;
cursor:W-resize;
line-height:20px;
font-size:10px;
-webkit-user-select: none;
-webkit-touch-callout:none;
-moz-user-select:none;
-moz-user-focus:none;
-moz-outline:0 none;
user-select:none;
}
.oldie .fd-slider-handle
{
/*
IE6 and IE7
-----------
Should not render the image above as they do not understand regular base 64 encoded images
but will render the MHTML image within the AlphaImageLoader filter below
IE8 in IE7 compat mode
----------------------
Will render the image declared above (as it suddenly appears to understand regular base64 encoded images)
but not the MHTML base 64 encoded image below (as it suddenly appears to forget what MHTML is)
IE8
---
Renders the regular base64 encoded image above but does not render the filter below
*/
*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:JS_toolbucket/freqdec-fd-slider-01084d3/css/fd-slider.css!handlenormal');
/*
IE6, IE7 and IE8
----------------
A nasty expression is used to not draw focus outline on drag handle.
Feel free to remove the rule if you prefer the outline.
*/
outline:expression(hideFocus='true');
}
/* Focus styles */
.fd-slider-handle:focus
{
outline:0 none;
border:0 none;
-moz-user-focus:normal;
}
a.fd-slider-handle:focus::-moz-focus-inner
{
border-color: transparent;
}
/* Glowing slider handle when focused or when hovered */
.fd-slider-focused .fd-slider-handle,
.fd-slider-hover .fd-slider-handle
{
/* Move the background sprite into position */
background-position:0 -20px;
}
.oldie .fd-slider-focused .fd-slider-handle,
.oldie .fd-slider-hover .fd-slider-handle
{
/*
IE6 and IE7
-----------
Should not render the base64 encoded image sprite declared within the
.fd-slider-handle ruleset above but will render the MHTML image within
the AlphaImageLoader filter below
IE8 in IE7 compat mode
----------------------
Will render the the base64 encoded image sprite declared within the
.fd-slider-handle ruleset (as it suddenly appears to understand regular
base64 encoded images) but not the MHTML base 64 encoded image below
(as it suddenly appears to forget what MHTML is)
IE8
---
Will render the the base64 encoded image sprite declared within the
.fd-slider-handle ruleset but does not render the AlphaImageLoader
filter below
*/
*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:JS_toolbucket/freqdec-fd-slider-01084d3/css/fd-slider.css!handleglow');
}
/* The slider is given this class whenever no value has been set by the user.
Opacity & png images won't work in IE though so the .oldie class is used to
pass a BASE64 encoded image to IE 6, 7 & 8
This does mean that IE doesn't get the :hover + :focus effect
*/
.fd-slider-no-value .fd-slider-handle
{
opacity:.6;
}
/* IE 6, 7 & 8 - uses a BASE64 encoded image as the opacity & png mix doesn't work */
.oldie .fd-slider-no-value .fd-slider-handle
{
/* Reset opacity for IE8 as we are using png images */
opacity:1;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAjVJREFUeNrMVE1PE0EYfmZ32a1ugXVrS0FsoKWKxBps4kFNOBnjybPR/8Nv8A+Y1K+DxgMeIMYLngiBxGyQKK1NWxq3VpGW7tc4O25C024rBw5MMpnknXmfeeZ9nncIpRSnOQSc8jj7gFJYkLCBZxs69IkclHNzkJUk37A6NXTau2jsb+NJvkFDBCC9MYYlRF9sZZLJ5L3rsdFsXoU0qxAhIhByREE//aF2odg0zP3aKh4vfmX53kCGnNlyIa7r+v278ejcnSiVNYnFQOF5FDI7shQl8oX0+MJTxxJ/LBdes5R6N9PeJ4uYTt+c1MczuuBKDRswLfDT/iTBPE8E8UEqll37ffVWBVhhIWcQoAx17AqxbbHYAsoE1KHoq5NEQFwIYiahLzDAtWGACgOc2GvbKLXgDZXTp0ojGs8BWoMAJVYsUjs6oUc8rw+j3zb18i9tekYdY2KMMJd6IZ0pMHY2wzqsVg7M//jQwe52FZdnp1SRYJQVy092vGNRpOCSAxfUKhq17vqFAXaw+sropNIp71ouoUkC0UaYMZlzRLbp+q9kmjdtStulHdP+8MbgOUMALay/L7Xjlza/O4/yyC1elAURkwoH9oFQ7Xi0svP5Z/nd883mystvPGdQp3Bj/1MtgRu3s1h6OI/5fAJTMyo/UNk7hLFRx8e3BrbWv/gV9xl2Gzu09bgfAd8SsWCNBNu+/k02zWC1eluPhH2wAVMxAFa6SuMENfOf6Z7oczhz/+FfAQYATvji+0cdRCAAAAAASUVORK5CYII==);
/*
IE6 and IE7
-----------
Should not render the image above as they do not understand regular base 64 encoded images
but will render the MHTML image within the AlphaImageLoader filter below
IE8 in IE7 compat mode
----------------------
Will render the image declared above (as it suddenly appears to understand regular base64 encoded images)
but not the MHTML base 64 encoded image below (as it suddenly appears to forget what MHTML is)
IE8
---
Renders the regular base64 encoded image above but does not render the filter below
*/
*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:JS_toolbucket/freqdec-fd-slider-01084d3/css/fd-slider.css!handleglow');
}
.oldie .fd-slider,
.oldie .fd-slider-vertical
{
/*
IE6 and IE7
-----------
Require either a solid background colour or a background image in order
for mouse hover events to work. We are using a MHTML base64 encoded
transparent gif image to get it to work
IE8 in IE7 compat mode
----------------------
Setting the background image below seems to do the trick, even if the
image is not rendered. It just works - don't ask me why.
IE8
---
Does not need the background hack to get mouse hover events to work so
we keep the following rule from being noticed by using the star hack
*/
*background:transparent url(mhtml:JS_toolbucket/freqdec-fd-slider-01084d3/css/fd-slider.css!blank) repeat;
}
/* Drop shadow on the inner bar when focused - IE gets a "Blur" filter on an inner SPAN instead */
.fd-slider-focused .fd-slider-bar
{
-moz-box-shadow: 0 0 4px #aaf;
-webkit-box-shadow: 0 0 4px #aaf;
box-shadow: 0 0 4px #aaf;
}
/* Class given to body to change cursor when dragging */
.fd-slider-drag-vertical,
.fd-slider-drag-vertical *
{
/* Set the cursor to the correct resize cursor */
cursor:N-resize !important;
/* Stop text selection */
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
}
.fd-slider-drag-horizontal,
.fd-slider-drag-horizontal *
{
cursor:W-resize !important;
/* Stop text selection */
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
}
/* Disabled Sliders */
.fd-slider-disabled
{
/* Lower opacity - No IE 6, 7 or 8 though */
opacity:0.8;
/* Remove the pointer */
cursor:default;
}
/* Change the handle image */
.fd-slider-disabled .fd-slider-handle
{
/* Default cursor & black handle image */
cursor:default !important;
/* Move the image sprite to appropriate position */
background-position:0 -40px;
}
.oldie .fd-slider-disabled .fd-slider-handle
{
/*
IE8
---
Need to reset the opacity as opacity + png images don't mix
*/
opacity:1;
/*
IE6 and IE7
-----------
Should not render the image above as they do not understand regular base 64 encoded images
but will render the MHTML image within the AlphaImageLoader filter below
IE8 in IE7 compat mode
----------------------
Will render the image declared above (as it suddenly appears to understand regular base64 encoded images)
but not the MHTML base 64 encoded image below (as it suddenly appears to forget what MHTML is)
*/
*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:JS_toolbucket/freqdec-fd-slider-01084d3/css/fd-slider.css!handledisabled');
}
/* Disable the track bar */
.fd-slider-disabled .fd-slider-bar
{
/* Default cursor */
cursor:auto !important;
/* non rgba aware browsers fallback to the following border rules */
border:1px solid #888;
border-bottom:1px solid #999;
border-right:1px solid #999;
/* rgba aware browsers get the following border rules */
border:1px solid rgba(136,136,136,.8);
border-bottom:1px solid rgba(153,153,153,.8);
border-right:1px solid rgba(153,153,153,.8);
/* Black background */
background-color: #222;
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(left, #222, #000);
/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, left top, right top, from(#222), to(#000));
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(left, #222, #000);
/* Opera 11.10+ */
background-image: -o-linear-gradient(left, #222, #000);
}
/* Vertical disabled track bar */
.fd-slider-vertical.fd-slider-disabled .fd-slider-bar
{
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, #000, #222);
/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, left top, right bottom, from(#000), to(#222));
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(top, #000, #222);
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #000, #222);
}
/*
IE6
---
IE6 sees this rule as being ".oldie .fd-slider-disabled .fd-slider-bar"
*/
.oldie .fd-slider-vertical.fd-slider-disabled .fd-slider-bar
{
/* IE 6 + 7 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff222222',endColorstr='#ff000000');
/* IE8 */
-ms-filter"filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff222222',endColorstr='#ff000000')";
}
/*
IE6
---
The following rule rewrites the above rule as IE6 doesn't understand
chained classes. This limits us to serving the same rule to IE6 for
both horizontal and vertical sliders
*/
.oldie .fd-slider-disabled .fd-slider-bar
{
/* IE 6 + 7 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff222222',endColorstr='#ff000000');
/* IE8 */
-ms-filter"filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff222222',endColorstr='#ff000000')";
}
/* Disabled range bar */
.fd-slider-disabled .fd-slider-range
{
cursor:auto !important;
background-color: #555;
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(left, #666, #333);
/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, left top, right top, from(#666), to(#333));
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(left, #666, #333);
/* Opera 11.10+ */
background-image: -o-linear-gradient(left, #666, #333);
}
/* Vertical disabled range bar */
.fd-slider-vertical.fd-slider-disabled .fd-slider-range
{
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, #333, #666);
/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, left top, right bottom, from(#333), to(#666));
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(top, #333, #666);
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #333, #666);
}
.oldie .fd-slider-vertical.fd-slider-disabled .fd-slider-range
{
/* IE 6 + 7 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff666666',endColorstr='#ff333333');
/* IE8 */
-ms-filter:"filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff666666',endColorstr='#ff333333')";
}
.oldie .fd-slider-disabled .fd-slider-range
{
/* IE 6 + 7 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff666666',endColorstr='#ff333333');
/* IE8 */
-ms-filter:"filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff666666',endColorstr='#ff333333')";
} |
Stumble It!
Bookmark in del.icio.us
Download
