/******************************************************\
*  Base TouchCarousel stylesheet
*  Contents:
*   1. Main containers
*   2. Carousel items
*   3. Arrows(direction) navigation
*   4. Paging navigation
*   5. Scrollbar
*   6. Cursors
\******************************************************/


/* 1. Main containers (carousel size, background) */

.touchcarousel {
position: relative;
overflow: hidden; /* style is removed after carousel is inited, use !important if you want to keep it */

}
.touchcarousel .touchcarousel-container {
position: relative;    
margin: 0;
padding: 0;
list-style: none;    
left: 0;
}
.touchcarousel .touchcarousel-wrapper {
position: relative;
overflow: hidden;
width: 830px;
margin: 0 auto;
height: 330px;
}


/* 2. Carousel items (item styling, spacing between items) */

.touchcarousel .touchcarousel-item  {
/* use margin-right for spacing between items */
margin: 0 !important;
padding: 0;	
float: left;
}
.touchcarousel .touchcarousel-item img {
margin: 0 !important; 
}

/* Last carousel item  */
.touchcarousel .touchcarousel-item.last {
margin-right: 0 !important;		
}




/* 3. Arrows(direction) navigation */

/* arrow hitstate and icon holder */
.touchcarousel .arrow-holder {
height: 100%;
width: 45px;
position: absolute;
top: 0;
display: block;
cursor: pointer;	
z-index: 25;	
}
.touchcarousel .arrow-holder.left {	
left: 0;	
}
.touchcarousel .arrow-holder.right {	
right: 0;
}

/* arrow icons */
.touchcarousel .arrow-icon{		
width: 45px;
height: 90px;
top: 75%;
margin-top: -45px;	
position: absolute;	
cursor: pointer;	
}
.touchcarousel .arrow-icon.left { }
.touchcarousel .arrow-icon.right { }
.touchcarousel .arrow-holder:hover .arrow-icon { }
.touchcarousel .arrow-holder.disabled { cursor: default; }
.touchcarousel .arrow-holder.disabled .arrow-icon { cursor: default; }



/* 4. Paging navigation */

.touchcarousel .tc-paging-container {
width:100%;
overflow:hidden;
position:absolute;
margin-top:-20px;
z-index:25;
}
.touchcarousel .tc-paging-centerer {	
float: left;
position: relative;
left: 50%;		
}
.touchcarousel .tc-paging-centerer-inside {
float: left;
position: relative;
left: -50%;
}

/* Paging items */
.touchcarousel .tc-paging-item {			
float:left;	
cursor:pointer;		
position:relative;
display:block;	
text-indent: -9999px;	
}
.touchcarousel .tc-paging-item.current { }
.touchcarousel .tc-paging-item:hover { }



/* 5. Scrollbar */
.touchcarousel .scrollbar-holder {
position: absolute;
z-index: 30;
left: 6px;
right: 6px;	
bottom: 5px;
height:4px;
overflow: hidden;
}
.touchcarousel .scrollbar {
position: absolute;
left:0;	
height:4px;
bottom: 0px;
}
.touchcarousel .scrollbar.dark {
background-color: rgb(130, 130, 130);	
background-color: rgba(0, 0, 0, 0.5);
}
.touchcarousel .scrollbar.light {
background-color: rgb(210, 210, 210);	
background-color: rgba(255, 255, 255, 0.5);	
}


/* 6. Cursors */

/* IE and Opera use "move", FF uses -moz-grab */
.touchcarousel .grab-cursor{ cursor:url(grab.png) 8 8, move; }
.touchcarousel .grabbing-cursor{ cursor:url(grabbing.png) 8 8, move; }

/* Cursor that used when mouse drag is disabled */
.touchcarousel .auto-cursor{ cursor:auto; }








/*** "Free-scroll" Gallery ***/
#carousel-gallery {
margin: 0 auto !important;
padding: 30px 0 0 0;
background: transparent;
overflow: hidden !important;
clear: both;
border-top: 1px solid #969696;
}		
#carousel-gallery .touchcarousel-wrapper {
overflow: hidden;
margin-left: 40px;
}
#carousel-gallery .touchcarousel-item {
margin-right: 10px !important;		
background: transparent;	
}

#carousel-gallery .arrow-icon.left {
left: 0px;				
}
#carousel-gallery .arrow-icon.right {
right: 0px;			
}
#carousel-gallery .arrow-holder {
width: 30px;	
}
#carousel-gallery  .scrollbar-holder {
bottom: 6px;
}


/*** Universal Sizes ***/

#carousel-gallery, .touchcarousel {
width: 900px;
height: 330px;
}
.touchcarousel .touchcarousel-item, .touchcarousel .touchcarousel-item img, #carousel-gallery .touchcarousel-item {
width: 157px;
height: 245px;
}