/**
 * Copyright (c) 2006, Bill W. Scott
 * All rights reserved.
 *
 * This work is licensed under the Creative Commons Attribution 2.5 License. To view a copy 
 * of this license, visit http://creativecommons.org/licenses/by/2.5/ or send a letter to 
 * Creative Commons, 543 Howard Street, 5th Floor, San Francisco, California, 94105, USA.
 *
 * This work was created by Bill Scott (billwscott.com, looksgoodworkswell.com).
 * 
 * The only attribution I require is to keep this notice of copyright & license 
 * in this original source file.
 */

/**
 * Standard Configuration. It is advised that this section NOT be modified as the
 * carousel.js expects the behavior outlined below.
 **/
.carousel-component { 
	position:relative;
	overflow:hidden;
	margin-left: 10px;
	visibility:visible; /* component turns it on when first item is rendered */
}

.carousel-component ul.carousel-list { 
	width:10000000px;
	/**position:relative;**/
	z-index:1;
	float:left;
	padding-left:0;
}

.carousel-component .carousel-list li { 
	float:left;
	list-style:none;
	overflow:hidden;
}
.carousel-component .carousel-vertical li { 
	float:left;
	margin-bottom:0px;
}

.carousel-component ul.carousel-vertical { 
	width:auto;
}

.carousel-component .carousel-clip-region { 
	overflow:hidden;
	margin-left:10px;
	position:relative;
}
/**
 * Safe to override. It is safe to override background, padding, margin, color,
 * text alignment, fonts, etc. Define a separate CSS file and override your style
 * preferences.
 **/

/*
.carousel-component { 
	background:#3F3F3F;
	padding:0px;
	color:#618cbe;
}
.carousel-component ul.carousel-list { 
	margin:0px;
	padding:0px 0px 0px 0px;
}
.carousel-component .carousel-list li { 
	text-align:center;
	margin:0px 0px 0px 0px;
	padding:0px;
	font:10px verdana,arial,sans-serif;
	color:#666;
}
.carousel-component .carousel-vertical li { 
}
.carousel-component ul.carousel-vertical { 
}
*/

/** Extra for Version 2 **/
.carousel-wrapper {
	margin-left: 136px;
	width: 600px;
	display: block;
}

.carousel-wrapper .carousel-clip-region {
	height: 75px;
}

.carousel-wrapper .previous, .carousel-wrapper .next, .carousel-wrapper .carousel-component, .carousel-clip-region {
	float: left;
	display: block;
}

.carousel-wrapper .next, .carousel-wrapper .previous {
	margin-top: 24px;
	width: 9px;
}

.carousel-wrapper .carousel-component, .carousel-wrapper .carousel-component .carousel-clip-region {
	width: 489px;
	margin-left: 8px;
}

.carousel-wrapper .carousel-component ul li {
	margin-right: 4px;
	margin-left: 4px;
}

.overlay {
  width: 158px;
  height: 64px;
  background-color:  #FFF;
  position: absolute;
  margin-left: 11px;
	margin-top: 0px;
  padding-top: 10px;
  z-index: 100;
  color: #000;
  border:1px dotted #000;	
	text-align: center;
	font-size: 24px;
  filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.6;
	font-size: 16px;
	text-align: center;
}



/** FOR CAROUSEL GALLERY **/
#carouselGallery {
	width:765px;
	height:445px;
	background-color:#F4F4F4;
	float:left;
	border: 1px;
	border-style: solid;
	border-color: #CCCCCC;
}

#carouselGallery ul {
	width:725px;
	height:465px;
	float:left;
}

#carouselGallery ul li {
	float:left;
	padding: 12px;
	width:154px;
	height:124px;
	border-right:1px;
	border-bottom:1px;
	border-top:0px;
	border-left:0px;
	border-style:dashed;
	border-color:#999999;
}

#carouselGallery .last {
	border-bottom: 0px;
}

#carouselGallery #scrollArea {
	float:left;
}

#carouselGallery #scrollArea #scroller {
	margin-top:80px;
	margin-left:8px;
}

#carouselGallery #scrollArea #scroller #creationTrack {
	height:200px;
	background-color:#D7D7D7;
	width:9px;
	margin-left:2px;
}

#carouselGallery #scrollArea #scroller #creationTrack #creationHandle {
	width:9px;
	height:10px;
	background-color:#898989;
	cursor:move;
}