StackOverflow Question: Cufon and jScrollPane

for StackOverflow question: http://stackoverflow.com/questions/4909253/jscrollpane-and-cufon-togheter-someone-can-make-it-work/4909560#4909560

HTML

<link rel="stylesheet" href="http://www.timersys.com/demos/flatbrook/wp-content/themes/flatbrook/css/jquery.jscrollpane.css">
<script src="http://www.timersys.com/demos/flatbrook/wp-content/themes/flatbrook/js/jquery.jscrollpane.min.js"></script>
<script src="http://www.timersys.com/demos/flatbrook/wp-content/themes/flatbrook/js/jquery.mousewheel.js"></script>
<script src="http://www.timersys.com/demos/flatbrook/wp-content/themes/flatbrook/js/cufon-yui.js"></script>
<script src="http://www.timersys.com/demos/flatbrook/wp-content/themes/flatbrook/js/BlackBeard_500.font.js"></script>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
<ul id="mainmenu">
    <li>
        <a href="#">Alex</a>
    </li>
    <li class="active">
        <a href="#">James</a>
    </li> 
    <li>
        <a href="#">Thomas</a>
    </li>
</ul>

</body>

</html>

JavaScript

$(document).ready(function() {

Cufon('ul#mainmenu li.active a', {
hover: { color: '#3e3e3e'},
    color: '#af1217',
    fontFamily: 'BlackBeard',
    fontSize: '15px',
    textShadow: '0 2px 0.1em #fff',
});
    
Cufon('ul#mainmenu li a', {
    hover: { color: '#3e3e3e'},
    color: '#868686',
    fontFamily: 'BlackBeard',
    fontSize: '15px',
    textShadow: '0 2px 0.1em #fff',
});
    
Cufon.replace('ul#mainmenu li', {
    color: '#868686',
    fontFamily: 'BlackBeard',
    fontSize: '15px',
    textShadow: '0 2px 0.1em #fff',
});
    
Cufon.replace('ul#mainmenu li.active a', {
    color: '#af1217',
    fontFamily: 'BlackBeard',
    fontSize: '15px',
    textShadow: '0 2px 0.1em #fff',
});    
   
});