/*_____________________________________________ Start - Projects - jCarouselLite _____________________________________________*/

#jCarouselLiteDemo .carousel  {
    padding: 0px 0 0 0;
    margin: 0 0 0px 0px;
    position: relative;
	float:left;

}

    #jCarouselLiteDemo .main {
    		margin-left:20px;
		_margin-left:10px;
    }

    #jCarouselLiteDemo .demo em {
        color: #FF3300;
        font-weight: bold;
        font-size: 60%;        
        font-style: normal;
    }
    #jCarouselLiteDemo .carousel button { /*Don't remove this. we still use this for individual demos. only the front pages use images as of now*/
        float: left;
    }              
    #jCarouselLiteDemo .carousel a.prev, #jCarouselLiteDemo .carousel a.next {
        display: block;
        float: left;
        width: 37px;
        height: 133px;
		margin-left:17px;
        text-decoration: none;
        background: url("/image/imageNavLeft.gif") left 0px no-repeat;
    }
        #jCarouselLiteDemo .carousel a.next {
            background: url("../images/next.jpg") right 10px no-repeat;
        }
            #jCarouselLiteDemo .carousel a.next:hover {
                background-image: url("../images/next.jpg");
            }
            #jCarouselLiteDemo .carousel a.prev:hover {
                background-image: url("/image/imageNavLeftHover.gif");
            }    
            #jCarouselLiteDemo .carousel a:hover, #jCarouselLiteDemo .carousel a:active {
                border: none;
                outline: none;
            }                 
    #jCarouselLiteDemo .carousel .jCarouselLite {
        border: 0px solid black;
        float: left;
        background-color: transparent;
        
        /* Needed for rendering without flicker */
        position: relative;
        visibility: hidden;
        left: 500px;
    }
        #jCarouselLiteDemo .carousel ul {
            margin: 0;
        }
        #jCarouselLiteDemo .carousel li img, 
        #jCarouselLiteDemo .carousel li p {
            background-color: #fff;
            width: 140px;
            height: 118px;
            margin:5px;
        }
        
        #jCarouselLiteDemo .widget img {
            cursor: pointer;
        }
            #jCarouselLiteDemo .mid {
                margin-left: 0px;
                width: 200px;
                height:100px;
            }
            #jCarouselLiteDemo .vertical {
                margin-left: 170px;
            }
                #jCarouselLiteDemo .vertical .jCarouselLite {   /* so that in IE 6, the carousel div doesnt expand to fill the space */
                    width: 10px;
                }
            #jCarouselLiteDemo .imageSlider li img, 
            #jCarouselLiteDemo .imageSlider li p, 
            #jCarouselLiteDemo .imageSliderExt li img , 
            #jCarouselLiteDemo .imageSliderExt li p {
                width: 200px;
                height: 100px;
            }
            
/*_____________________________________________ End - Projects - jCarouselLiteDemo _____________________________________________*/

.stepcarousel{
position: relative; /*leave this value alone*/
border: 0px solid black;
overflow: scroll; /*leave this value alone*/
width: 481px; /*Width of Carousel Viewer itself*/
height: 120px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 150px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}