/* The following styles are essential to the slider's functionality, and never need to be changed */
	.plusslider { overflow: hidden; position: relative; }
	.plusslider-container { position: relative; }
	.plusslider .child { float: left; height: 680px;}
	.plustype-fader .child { display: none; position: absolute; left: 0; top: 0; } /* only applies to fader type (not slider) */
	.plustype-fader .current { z-index: 5; } /* only applies to fader type (not slider) */

	/* Slides that are just <img> tags should *not* have an explicit width set in CSS
	 * (the js code will figure out the width from the image itself). If you set it here in CSS
	 * the slider will still work okay, but the slide effect will not look as cool.
	 *
	 * All other slides (<div>, <li>, <a>... anything other than <img>) MUST have
	 * an explicit width declared in CSS -- even though they may be dynamic
	 * (different from each other or responsive/fluid).
	 * 
	 * TODO: WHAT ABOUT RESPONSIVE IMAGES THAT DON'T HAVE W/H ATTRIBUTES SET? HOW DOES JS CODE KNOW ITS WIDTH?
	 *
	 * NOTE that while non-<img> slides need explicit widths set in CSS,
	 * the slide container (the one wrapper around *all* the slides)
	 * does *not* need an explicit width (or height) to be set.
	 * If you do, it will cause problems for slides of different sizes or responsive slides.
	 */
	.plusslider .child { /* Keep in mind this will resize <img /> slides too */
		height: 490px;
		width: 630px;
	}
	
	/* No-javascript fallback... */
		.plusslider-container > * { display: none; }
		.plusslider-container > *:first-child { display: block; }
		.plusslider-container .child { display: block; height: 450px; } /* Necesary for slides to display: DO NOT REMOVE */


/* The following styles are NOT ESSENTIAL for slider functionality. They are specific to the example content.
   Note that the fading effect does not work correctly with non-image content unless that content area
   has a solid background (either a background image or a background-color, but not transparent). */
	
	/* { margin: 0; padding: 0; }  Hard reset */
	
	#slider .child img { width: 100%; }
	.slide1 { background: url(../images/image1.jpg) no-repeat left top; height: 210px; margin: 0; padding: 20px 40px; } 
	.slide1 h2 { color: #fff; font-size: 20px; margin: 0 0 20px 0; text-align: left; }
	.slide1 p { border-left: 3px solid #fff; color: #fff; padding: 0 0 0 10px; }
		
	.quote, .quote2, .quote3 { height: 170px; padding: 20px 0; width: 580px; font: 24px Georgia, serif; text-align: center; width: 100%; position: relative; }
	.quote { background: #f1f1f1; color: #333; }
	.quote2 { background: #333; color: #f1f1f1; }
	.quote3 { background: #666; color: #f1f1f1; }

	.plusslider a img { border: none; } /* Prevent blue borders in IE (not only does it look ugly, but it messes up spacing which breaks the "slider" type */

	/* Pagination controls styles... */
	.plusslider {
		padding: 0px 0; /* Create some space above and below the slides for the pagination controls */
	}
	.plusslider-pagination { position: absolute; left: 0; bottom: 0; display: none; }
	.plusslider-pagination li { float: left; list-style: none; margin-left: 5px;  display: none;}

.plusslider-arrows li {
	background: url(../images/plus-sprite.png) no-repeat left top;
	cursor: pointer;
	display: block;
	height: 32px;
	margin-top: -16px;
	opacity: 0;
	width: 32px;
	position: absolute;
	top: 50%;
	z-index: 200;
	text-indent: -9999px;

	/* Fade in/out .arrows on hover */
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-in;
	   -moz-transition-property: opacity;
	   -moz-transition-duration: 0.2s;
	   -moz-transition-timing-function: ease-in;
		-ms-transition-property: opacity;
		-ms-transition-duration: 0.2s;
		-ms-transition-timing-function: ease-in;
		 -o-transition-property: opacity;
		 -o-transition-duration: 0.2s;
		 -o-transition-timing-function: ease-in;
			transition-property: opacity;
			transition-duration: 0.2s;
			transition-timing-function: ease-in;
}

.plusslider:hover .plusslider-arrows li {opacity: 1; }
.plusslider-arrows .prev {background-position: 0 -10px; left: 10px; }
.plusslider-arrows .prev:hover {background-position: 0 -42px; left: 10px; }
.plusslider-arrows .next {background-position: -33px -10px; right: 10px; }
.plusslider-arrows .next:hover {background-position: -33px -42px; }