#jCarouselLiteDemo .carousel { padding: 10px 0 0 0; margin: 0 0 20px 10px; position: relative; }
#jCarouselLiteDemo .digg { position: absolute; left: 610px; top: 110px; }
#jCarouselLiteDemo .main { margin-left: 40px; }
#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: 30px; height: 143px; text-decoration: none; background: url("/images/imageNavLeft.gif") left 60px no-repeat; }
#jCarouselLiteDemo .carousel a.next { background: url("/images/imageNavRight.gif") right 60px no-repeat; }
#jCarouselLiteDemo .carousel a.next:hover { background-image: url("/images/imageNavRightHover.gif"); }
#jCarouselLiteDemo .carousel a.prev:hover { background-image: url("/images/imageNavLeftHover.gif"); }
#jCarouselLiteDemo .carousel a:hover, #jCarouselLiteDemo .carousel a:active { border: none; outline: none; }
#jCarouselLiteDemo .carousel .jCarouselLite { border: 1px solid black; float: left; background-color: #dfdfdf; /* Needed for rendering without flicker */
        position: relative; visibility: hidden; left: -5000px; }
#jCarouselLiteDemo .carousel ul { margin: 0; }
#jCarouselLiteDemo .carousel li img,  #jCarouselLiteDemo .carousel li p { background-color: #fff; width: 150px; height: 118px; margin: 10px; }
#jCarouselLiteDemo .widget img { cursor: pointer; }
#jCarouselLiteDemo .mid { margin-left: 80px; width: 400px; height: 300px; }
#jCarouselLiteDemo .vertical { margin-left: 170px; }
#jCarouselLiteDemo .vertical .jCarouselLite {   /* so that in IE 6, the carousel div doesnt expand to fill the space */ width: 170px; }
#jCarouselLiteDemo .imageSlider li img,  #jCarouselLiteDemo .imageSlider li p,  #jCarouselLiteDemo .imageSliderExt li img,  #jCarouselLiteDemo .imageSliderExt li p { width: 400px; height: 300px; }
/* Default classes for clearing float, also clearing the end without presentational markup*/
.clear { clear: both; }
.cLeft { clear: left; }
.cRight { clear: right; }
.cEnd { /* clear fix without presentational markup. Mostly use .cEnd class for the float container. But when lotta containers
    in one selector, add it directly here like #propertyEntry div */
        display: inline-table; /* Hides from IE-mac \*/
        height: 1%; display: block;/* End hide from IE-mac */
    }
html>body .cEnd { height: auto; }
.cEnd:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
/* Default classes for floating elements left or right */    
.fNone { float: none; }
.fLeft { float: left; }
.fRight { float: right; }
/* Default classes for hiding and showing elements */    
.hide { display: none; }
.block { display: block; }
.inline { display: inline; }
/* For loading divup that comes up when some ajax request is executed */   
.p-shadow { width: 90%; float:left; background: url(/image/shadowAlpha.png) no-repeat bottom right !important; background: url(/image/shadow.gif) no-repeat bottom right; margin: 10px 0 0 10px !important; margin: 10px 0 0 5px; }
.p-shadow div { background: none !important; background: url(/image/shadow2.gif) no-repeat left top; padding: 0 !important; padding: 0 6px 6px 0; }
.p-shadow p { color: #777; background-color: #fff; font: italic 1em georgia, serif; border: 1px solid #a9a9a9; padding: 4px; margin: -6px 6px 6px -6px !important; margin: 0; }
#loadingDemo { display: none; position: absolute; width: 150px; left: 150px; top: 200px; }
.disabled { color: green; }