/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */
        
        .jspContainer
        {
            overflow: hidden;
            position: relative;
            width: 684px !important;
        }
        
        .jspPane
        {
            position: absolute;  
        }
        
        .jspVerticalBar
        {
            background: none repeat scroll 0 0 #B5B5B5;
            height: 100%;
            position: absolute;
            right: 29px;
            top: 0;
            width: 4px;
        }
        
        .jspHorizontalBar
        {
            position: absolute;
            top: 2px;
            left: 0;
            width: 700px;
            height: 16px;
            background: url("../../Content/timelineScroll.png") no-repeat scroll 0 0 transparent;
        }
        
        .jspVerticalBar *, .jspHorizontalBar *
        {
            margin: 0;
            padding: 0;
        }
        
        .jspCap
        {
            display: none;
        }
        
        .jspHorizontalBar .jspCap
        {
            float: left;
        }
        
        .jspTrack
        {
            /*background: #dde;*/
            position: relative;
        }
        
        
        
        .jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag
        {
            float: left;
            height: 100%;
        }
        
        .jspDrag
        {
            background: url(../../Content/images/dragmidle.png) repeat-y scroll 0 0 transparent;
            cursor: pointer;
            height: auto;
            left: -9px;
            position: absolute;
            top: 1px;
            width: 24px;
        }
        
        .jspArrow
        {
            background: #50506d;
            text-indent: -20000px;
            display: block;
            cursor: pointer;
        }
        
        .jspDragTop
        {
            background: url(../../Content/images/dragTop.png) no-repeat;
            width: 24px;
            height: 4px;
            position: absolute;
            top: 0px;
        }
        
        .jspDragBottom
        {
            background: url(../../Content/images/dragBottom.png) no-repeat;
            width: 24px;
            height: 5px;
            position: absolute;
            bottom: 0px;
        }
        
        
        .heart
        {
            position: absolute;
            top: 30%;
            background: url(../../Content/images/scrolldashes.png) no-repeat;
            width: 11px;
            height: 18px;
            left: 5px;
        }
        
        .jspArrow.jspDisabled
        {
            cursor: default;
            background: #80808d;
        }
        
        .jspVerticalBar .jspArrow
        {
            height: 16px;
        }
        
        .jspHorizontalBar .jspArrow
        {
            width: 16px;
            float: left;
            height: 100%;
        }
        
        .jspVerticalBar .jspArrow:focus
        {
            outline: none;
        }
        
        .jspCorner
        {
            background: #eeeef4;
            float: left;
            height: 100%;
        }
        
        /* Yuk! CSS Hack for IE6 3 pixel bug :( */
        * html .jspCorner
        {
            margin: 0 -3px 0 0;
        }
        
        .jspDragLeft
        {
            width: 14px;
            height: 14px;
            background: url("../images/scrolling1.png") no-repeat scroll 0 0 transparent;
            left: 0;
            position: absolute;
        }
        
        .jspDragRight
        {
            position: absolute;
            right: 0px;
            height: 14px;
            width: 14px;
            background: url("../images/scrolling3.png") no-repeat scroll 0 0 transparent;
        }