/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
#mycarousel li { list-style: none; margin: 1px;}

.jcarousel-container {
    position: relative;
}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 60px;
    height: 60px;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    display: none;
}

.jcarousel-prev {
    z-index: 3;
    display: none;
}


/* Custom Styles */
/* ============= */

/* Carousel */
.thumbs{ width: 100%; display: block; float: left; }

.thumbs.last {
  margin-right:0px;
}

.thumbs {
  background:none;
}


.jcarousel-clip-horizontal {
/*width: 100%;*/
width:211px;
}

ul#mycarousel li.thumbs {
overflow: hidden;
}



/* ============= */
/* = Gallery   = */
/* ============= */
#gallery{
clear:both;
float:none;
margin:0px;
}

#main_image {
margin-bottom:20px;
position:relative;
}
#main_image .preview {
position:absolute;
overflow: hidden;
}

#main_image, 
#main_image img {
height:300px;
}

#gallery #thumbslist {
width:300px;
display:block;
height:100%;overflow:hidden;
}

ul#mycarousel {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
ul#mycarousel li.thumbs {
margin:5px;
height:60px;
width:60px;
float:left;
}

li.thumbs.first {
margin-right:0;
clear:both;
}

.jcarousel-skin-tango li.thumbs.first {clear:none;}

ul#mycarousel li.thumbs img {
float: left;
height:60px;
width:60px;
}