#carousel {  
    width:420px;  
    height:250px;     
    margin:0 auto; 
	margin-top:-20px; 
}  
  
#slides {  
    overflow:hidden;  
    /* fix ie overflow issue */  
    position:relative;  
    width:420px;  
    height:200px;  
    border:1px solid #ccc;  
	margin-left:-6px;
}  
  
/* 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:800px;
	margin-left:90px;             
}  
  
/* width of the item, in this case I put 250x250x gif */  
#slides li {  
    width:241px;  
    height:200px;     
    float:left;  
}  
  
#slides li img {  
    padding:5px;
}  

#slides p {
	 text-align:center;width:350px;position:relative;margin-left:-85px;
}  

/* Styling for prev and next buttons */  
#buttons {  
    padding:0 0 5px 0;    
    float:right;  
}  
  
#buttons a {  
    display:block;   
    width:31px;   
    height:32px;  
    text-indent:-999em;  
    float:left;  
    outline:0;  
}  
  
a#prev {  
    background:url(arrow.gif) 0 -31px no-repeat;   
}  
  
a#prev:hover {  
    background:url(arrow.gif) 0 0 no-repeat;  
}  
  
a#next {  
    background:url(arrow.gif) -32px -31px no-repeat;   
}  
  
a#next:hover {  
    background:url(arrow.gif) -32px 0 no-repeat;  
}  
  
.clear {clear:both}