<script>
var docked = false;
var menu = jQuery('#dw__toc');
var init = menu.offset().top;
            menu.css({
                position : "fixed",
                top: 50,
            });
            menu.addClass("toc_docked");
jQuery(window).scroll(function() 
{       
        if (!docked && (menu.offset().top - jQuery("body").scrollTop() < 0)) 
        {
            menu.css({
                position : "fixed",
                top: 50,
            });
            menu.addClass("toc_docked");
            docked = true;
        } 
        else if(docked && jQuery("body").scrollTop() <= init)
        {
            menu.css({
                position : "inherit",
                top: init + 'px',
            });
            menu.removeClass("toc_docked");
            docked = false;
        }
});
</script>

  /******************* TOC ***********************/  
#dw__toc  {
 
    border:1px solid #e5e5e5;
    padding: 0.5em; 
    border-radius:7px;
    margin:1em 0.5em;   max-width:300px; float:right;
    h3 { padding-top:0; margin: 0; font-size:18px; line-height:20px;vertical-align:middle;text-align: center  }
    ul {list-style:square; margin:0 0 0 1em;padding:0;color:#aaa;}
    li  { padding-left: 0.7em;     text-indent: -1em;}
}
 
.toc_docked { margin:0!important; padding:0!important;right:15px;
     border:none!important;
     border-radius:0!important;
    background: no-repeat   right top url(images/icon-bookmark.png);
} 
.toc_docked h3 { margin:0; padding:0px; width:44px; height:48px; overflow:hidden; font-size:12px!important;   }
.toc_docked div{display:none;}
.toc_docked:hover h3 ,.toc_docked:active h3 {color:#333; width:auto; height:auto;}
.toc_docked:hover div,.toc_docked:active div {display:block;}
.toc_docked:hover,.toc_docked:active  {background-color:#F5F5F5; padding:0.5em!important;     border:1px solid #e5e5e5!important;
    border-top-left-radius:0em!important;
    border-top-right-radius:0em!important;
    border-bottom-left-radius:1em!important;
    border-bottom-right-radius:1em!important;}