/* ------------------------------------------------ */
/* slider slideshow */

#slider {
	width: 540px;
	/* important to be same as image width */
	height: 320px;
	/* important to be same as image height */
	position: relative;
	/* important */
	overflow: hidden;
	/* important */
}

.section ul#slider1Content { list-style: none; margin: 0; }

.section ul#slider1Content li { list-style: none; margin: 0; }

/* clientSlides ----------------------------------- */
#slider1 {
	width: 215px;
	/* important to be same as image width */
	height: 100px;
	/* important to be same as image height */
	position: relative;
	/* important */
	overflow: hidden;
	/* important */
	left: 80px;
}


#sliderContent {
	width: 540px;
	/* important to be same as image width or wider */
	position: absolute;
	/* important */
	top: 0;
	/* important */
	margin-left: 0;
	/* important */
}

#slider1Content {
	width: 400px;
	position: absolute;
	top: 0;
	margin-left: 0;
}


/* clientSlides ----------------------------------- */
.sliderImage, .slider1Image {
	float: left;
	position: relative;
	display: none;
}


/* to show images on clients page */

.clientsPage .slider1Image { display: block; }

.sliderImage img {
	width: 540px;
	height: 320px;
}

.slider1Image img {  }

.sliderImage a span { text-decoration: none; }

.sliderImage a:hover, 
.sliderImage a:hover span h1 { color: #0099CC; text-decoration: none; cursor: pointer; }

.sliderImage span {
	width: 540px;
	height: /*360px160px*/200px;
	background-color: #000;
	/* set the opacity of text box */
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	-khtml-opacity: 0.6;
	opacity: 0.6;
	color: #fff;
	display: none;
	/* important */
	bottom: 0;
	/*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
   position: absolute;
	/* important */
	left: 0px;
}

/* clientSlides ----------------------------------- */
.slider1Image span {
	background-color: transparent;
	display: none;
}

.sliderImage span h1 {
	color: #fff;
	padding: 20px 50px 8px 20px;
	font-family: 'Helvetica', 'Arial', 'Geneva', sans-serif;
	font-size: 1.6em;
	line-height: 1.2em;
	letter-spacing: 0;
	font-weight: lighter;
	/*text-shadow: 0 0 0.90em #000, 0 0 0.90em #000, 0 0 0.90em #000, 0 0 0.90em #000;*/
	
}

.sliderImage a h1 em { color: #86b7d7; font-size: 1.6em; text-shadow: 1px 1px 1px #000; }

.sliderImage span h2 { font-size: 1.3em; line-height: 1.1em; color: #ffffcc; padding: 8px 130px 0 20px; }	

.sliderImage span img.learnMore {
	width: 165px;
	height: 49px;
	position: absolute;
	left: 20px;
	bottom: 20px;
}

.learnMore { 
	width: 165px; 
	height: 49px; 
	position: absolute;
	left: 350px;
	bottom: 15px;
	background: url(images/learnMore-button.png) no-repeat 0 0; 
 }

.learnMore:hover { opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
}