Help with Basic JQuery slider - markers

Help with Basic JQuery slider - markers

Hi,
 
I am using the "Basic jQuery Slider plug-in v.1.3" to show rotating images in my aspx webpage. This works fine.
 
There are markers oval shaped in the left of the page. I want the currently active image marker to be highlighted and the rest be transparent.
 
There is a function as below in the plugin:
 
 
  1.   var conf_markers = function () {
  2.             // create a wrapper for our markers
                $m_wrapper = $('<ol class="bjqs-markers" style="position:absolute; width:31%; left:0px !important;bottom:10px !important;"></ol>');
  3.             // for every slide, create a marker
                $.each($slides, function (key, slide) {
  4.                 var slidenum = key + 1,
                        gotoslide = key + 1;
  5.                 if (settings.animtype === 'slide') {
                        // + 2 to account for clones
                        gotoslide = key + 2;
                    }
  6.              
                    var marker = $('<li><a style="border-radius: 10px !important;opacity:0.4 ; filter:alpha(opacity=40) ;height:5px !important;line-height:100%;background-color: white !important;color:white;font-size:15px;" href="#"></a></li>');
  7.                 // set the first marker to be active
                    if (slidenum === state.currentslide)
                    {                   
                        marker.addClass('active-marker');
                    }
  8.                 // bind the click event
                    marker.on('click', 'a', function (e) {
                        e.preventDefault();
                        if (!state.animating && state.currentslide !== gotoslide) {
                            go(false, gotoslide);
                        }
                    });
  9.                 // add the marker to the wrapper
                    marker.appendTo($m_wrapper);
  10.             });
  11.             $m_wrapper.appendTo($wrapper);
                $m_markers = $m_wrapper.find('li');
  12.             // center the markers
                if (settings.centermarkers) {
                    $m_wrapper.addClass('h-centered');
                    var offset = (settings.width - $m_wrapper.width()) / 2;
                    $m_wrapper.css('left', offset);
                }
  13.         };
 
These are some of the css available :
 
  1. ul.bjqs-controls.v-centered li a
    {
        display: block;
        padding: 10px;
        background: #fff;
        color: #000;
        text-decoration: none;
    }
  2.     ul.bjqs-controls.v-centered li a:hover
        {
            background: #000;
            color: #fff;
        }
  3. ol.bjqs-markers li a
    {
        padding: 5px 10px;
        background: #000;
        color: #fff;
        margin: 5px;
        text-decoration: none;
    }
  4.     ol.bjqs-markers li.active-marker a,
        ol.bjqs-markers li a:hover
        {
            background: #999;
           
        }
 
Currently all the oval images are of same kind - opacity less.
 
How to set the active one to be more brighter?
 
Thanks