* { margin: 0; padding: 0; } /* Hard reset */

/* The following styles are essential to the slider's functionality */

	.plusslider { 
	overflow: hidden; 
	position: relative;
		padding: 0; /* The height / width of the slider should never be set via the CSS. The padding increases the slider box-model while keeping it dynamic */

	}

	.plusslider-container { position: relative; }
	
	/* Slides must have a set width - even though they may be dynamic. If no width is set on <img> slides, the default image size will be assumed */
	div.child { width: 500px; } /* div is specified here because images are used in this example and the default width should be used for those */

	.plusslider .child { float: left; }

	/* PlusFader Specific (not needed with .plustype-slider) */
		.plustype-fader .child { display: none; position: absolute; left: 0; top: 0; }
		.plustype-fader .current { z-index: 5; }
	/* End PlusFader Specific */

	/* No-javascript fallback -- change "#slider" and "#slider2" identifiers as needed for your html */
		.plusslider-container > * { display: none; }
		.plusslider-container > *:first-child { display: block; }
	/* End no-javascript fallback */
	.plusslider-container .child { display: block; } /* Counter no-js fallback for cloned elements. Necessary for infiniteSlide

/* End essential styles*/

/* The following styles are not essential for slider functionality. They are specific to the example content.
   It is important to 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).

	Slides to not have to be the same width or height, but if you'd like a consistent width and/or height, make sure to set that within the CSS! 
	#slider .slide1 { padding-left: 40px; padding-right: 40px; margin-left: 0; margin-right: 0; } 
	#slider .slide1 { height: 210px; padding-top: 20px; padding-bottom: 20px; margin-top: 0; margin-bottom: 0; } 

	.slide1 { background: url(../images/image1.jpg) no-repeat left top; height: 210px; 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 */

	.plusslider-pagination { position: absolute; left: 0; bottom: 0; }
	.plusslider-pagination li { float: left; list-style: none; margin-left: 5px; }
	/*////////////////////////////////////////////////////////*/
	/* Controls */
	.plusslider { 
			padding-bottom: 40px;
	}

.plusslider-pagination-wrapper {
background-color: #f1f1f1; /* fallback color */
height: 40px;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
z-index: 500;
}

.plusslider-pagination {
display: table;
margin: 0 auto;
padding: 15px 0;
}

.plusslider-pagination li {
background: url(../images/plus-sprite.png) no-repeat left top;
cursor: pointer;
display: block;
float: left;
font-size: 0;
height: 10px;
margin: 0 3px;
text-indent: -9999px; /*IE6 fix */
width: 10px;
position: relative;
}

.plusslider-pagination .current, .plusslider-pagination li:hover {
background-position: -10px 0;
}

.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; }

/* PlusFader Specific */
.plustype-fader .child { display: none; position: absolute; left: 0; top: 0; }
.plustype-fader .current { z-index: 2; }
.plustype-fader .plusslider-pagination { position: relative; z-index: 200; }

/* no-javascript fallback */
.plusslider-container > * { display: none; }
.plusslider-container > *:first-child { display: block; }
/* End no-javascript fallback */
.plusslider-container .child { display: block; } /* Counter no-js fallback for cloned elements. Necessary for infiniteSlide. Without this the DOM doesn't know the position of the element */