/*@import url(jquery.jcarousel.css);*/
/* Max height and width of photos + 20px for border
================================================*/
.jcarousel-clip, #category-desc, #mycarousel ul li, #jcarousel-controller {
    height: 600px;
    width: 800px;
    }
#jcarousel-controller, .text {height: auto;}
#mycarousel ul li img {
    /*max-height: 360px;
    max-width: 534px;*/
    }
/*================================================*/

#mycarousel {padding: 0 0 5.5em 0;}
.jcarousel-clip, #category-desc, #jcarousel-controller, .text {
    position: relative;
    margin: 0 auto !important;
    text-align: justify;
    color: #cbc6b0;
    font-size: 75%;
    }
.jcarousel-clip {
    overflow: hidden;
    position: relative;
}
#category-desc {height: auto;}
#mycarousel ul li{
    display: block;
    margin: 0px auto;
    position: relative;
    text-align: center;
    display: inline; /* for better displaying with disabled javascript */
    }
#mycarousel ul li img {
    margin: 0% auto;
}
/* to center image horizontaly */
#mycarousel ul li.horizontal img {
    position: relative;
    top: 50%;
}

/**
 * Similar styles will be applied by jCarousel. But we additionally
 * add it here for better displaying with browsers having
 * javascript disabled.
 */
.jcarousel-list {
    overflow: hidden;
    margin: 0;
    padding: 0px;
    margin: 0px auto;
    overflow: hidden;
    position: relative;
    }
.jcarousel-list li {
    float: left;
    list-style: none;
    margin: 0px;
    background: transparent url(../../_images/photo-unavailable.gif) center center no-repeat;
    }

/* JCarousel navigation
================================================
 * The button-elements are added statically in the HTML document
 * to illustrate how to cutomize the prev/next controls.
 *
 * We set display:none to hide them from browsers having
 * javascript. jCarousel will show them automatically.
*/

#jcarousel-controller a {
    position: absolute;
    top: 10px;
    height: 15px; line-height: 13px;
    cursor: pointer; cursor: hand;
    text-transform: lowercase;
    z-index: 50;
    }
#mycarousel a:hover {color: #cbc6b0;}
.jcarousel-slide {
    left: 200px !important;
    padding: 0 26px 0 0;
    background: transparent url(../../_images/slide-arrow.gif) right -25px no-repeat;
    color: #9a9787;
    cursor: pointer; cursor: hand;
    }
a:hover.jcarousel-slide {background-position: right 0px;}
.jcarousel-prev {
    right: 256px !important;
    padding: 0 10px 0 20px;
    background: transparent url(../../_images/l-arrow.gif) 0 -25px no-repeat;
    color: #9a9787;
    }
a:hover.jcarousel-prev {background-position: 0 0px;}
.jcarousel-next {
    right: 200px !important;
    padding: 0 20px 0 10px;
    border-left: 1px solid;
    background: transparent url(../../_images/r-arrow.gif) right -25px no-repeat;
    color: #9a9787;
    }
a:hover.jcarousel-next {background-position: right 0px;}
.jcarousel-prev-disabled, .jcarousel-next-disabled {
    cursor: default !important;
    color: #777468;
    background-position: 0 25px;
    }
a:hover.jcarousel-prev-disabled, a:hover.jcarousel-next-disabled {
    color: #777468 !important;
    background-position: 0 25px;
    }