/*** 
set the width and height to match your images 
**/

#slideshow {
    position:relative;
    height:600px;
	z-index:-1;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

#slideshow img {
	/* Set rules to fill background */
	min-height:600px;
	min-width: 100%;
			
	/* Set up proportionate scaling */
	width: 100%;
	height: 600px;
			
}
		

		
#page-wrap { 
	position: relative;
	width: 400px; 
	margin: 50px auto; 
	padding: 20px; 
	background: #fff; 
	-moz-box-shadow: 0 0 20px black; 
	-webkit-box-shadow: 0 0 20px black; 
	box-shadow: 0 0 20px black; 
}

/*p { 
	font: 15px/2 Arial; 
	margin: 0 0 30px 0; 
	color: #fff;
}*/




@media only screen and (max-width:1024px) {

#slideshow {
    position:relative;
    height:500px;
	z-index:-1;
}


#slideshow img {
	/* Set rules to fill background */
	min-height: 500px;
	min-width: 100%;
			
	/* Set up proportionate scaling */
	width: 100%;
	height: 500px;
			
}

}
@media only screen and (min-width:800px) and (max-width:1023px) {

#slideshow {
    position:relative;
    height:460px;
	z-index:-1;
}


#slideshow img {
	/* Set rules to fill background */
	min-height: 460px;
	min-width: 100%;
			
	/* Set up proportionate scaling */
	width: 100%;
	height: 460px;
			
}

}



@media only screen and (min-width:640px) and (max-width:799px) {

#slideshow {
    position:relative;
    height:360px;
	z-index:-1;
}


#slideshow img {
	/* Set rules to fill background */
	min-height: 360px;
	min-width: 100%;
			
	/* Set up proportionate scaling */
	width: 100%;
	height: 360px;
			
}

}

@media only screen and (min-width:480px) and (max-width:639px) {

#slideshow {
    position:relative;
    height:300px;
	z-index:-1;
}


#slideshow img {
	/* Set rules to fill background */
	min-height: 300px;
	min-width: 100%;
			
	/* Set up proportionate scaling */
	width: 100%;
	height: 300px;
			
}

}



@media only screen and (min-width:320px) and (max-width:479px) {

#slideshow {
    position:relative;
    height:200px;
	z-index:-1;
}


#slideshow img {
	/* Set rules to fill background */
	min-height: 200px;
	min-width: 100%;
			
	/* Set up proportionate scaling */
	width: 100%;
	height: 200px;
			
}

}