#carousel {
    width:100%;
    height:400px;  
    margin:0 auto;
	position: relative;
}
 
#slides {
    overflow:hidden;
    /* fix ie overflow issue */
    position:relative;
    width:100%;
    height:400px;
}
 
/* remove the list styles, width : item width * total items */ 
#slides ul {
    position:relative;
    left:0;
    top:0;
    list-style:none;
    margin:0;
    padding:0; 
    width:300%;           
}
 
/* width of the item, in this case I put 250x250x gif */
#slides li {
    width:100%;
    height:400px;  
    float:left;
	text-align: center;
}
 
#slides li img {
    padding:5px;
}
.slide-guts {width: 90%; max-width: 1100px; margin: 0 auto;}

#slides li.stretch {
	background-size: 1500px auto; background-position: center center;
}
@media only screen and (min-width: 1600px) {
	#slides li.stretch {
		background-size: 34% auto; background-position: center center;
	}
}
 
/* Styling for prev and next buttons */
#buttons {
    position: absolute;
	width: 100%;
	text-align: center;
	top: 170px;
}
.button-guts { width: 98%; max-width: 1100px; margin: 0 auto;}
 
#buttons a {
    display:block;
    width:40px;
    height:40px;
    text-indent:-999em;
    outline:0;
	border: 0;
}
 
a#prev {
    background:url(images/arrows.png) -40px -40px no-repeat; float: left;
}
 
a#prev:hover {
    background:url(images/arrows.png) -40px 0 no-repeat;
}
 
a#next {
    background:url(images/arrows.png) -0 -40px no-repeat; float: right;
}
 
a#next:hover {
    background:url(images/arrows.png) 0 0 no-repeat;
}
 
.clear {clear:both}

@media only screen and (max-width: 880px) {
	#slides li.stretch { background-size: 100% auto; }
	#slides { width: 86%; margin: 15px 7%; }
	.slide-guts {width: 600px; }
	.hh-brand { width: 90%; padding: 40px 2%; }
	.banner-books img { height: 120px; }
}
@media only screen and (max-width: 660px) {
	.slide-guts { width: 400px;}
	#carousel, #slides, #slides li { height: 500px; }  
}