#photo_frame {
	width: 450px;
	height: 330px;
	text-align:center;
	padding:10px;
	border:0px solid #fff;
	display: table-cell;
	vertical-align: middle;
}

/* Horizontal Carousel */
/* The main block for the carousel */
/* Width should include both next/prev buttons, and images in the center */
#horizontal_carousel {
	position: relative;
	margin:auto; /* centers the div */
	width: 450px;
	height: 50px;
	margin-bottom: 10px;
}

/* The area for image thumbnails */
#horizontal_carousel .container {
	top: 0px;
	left: 25px; /* space on the left for previous_button */
	width: 400px;
  height: 50px;
  overflow:hidden;
  background: #000;

}            

#horizontal_carousel .previous_button {
	position: absolute;
  top: 0px;
  left: 0px;
	width: 25px;
	height: 50px;
	background: url(../images/photo_prev.gif) no-repeat;
	z-index: 100;
	cursor:pointer;
}        

#horizontal_carousel .previous_button_disabled {
	background: url(../images/photo_prev-disabled.gif) no-repeat;
	cursor:default;
}

#horizontal_carousel .next_button {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 25px;
	height: 50px;
	background: url(../images/photo_next.gif) no-repeat;
	z-index: 100;
	cursor:pointer;
}   

#horizontal_carousel .next_button_disabled {
	background: url(../images/photo_next-disabled.gif) no-repeat;
	cursor:default;
}

/* Better don't change lah, except the height */
#horizontal_carousel ul {
	margin:0;
  padding:0;
  width: 100000px;
  position: relative;
  top: 0;
  left: 0;
  height: 50px;
}                      

/* The width should pieces that would fit into .container */
/* Eg: for a .container 500px in width, a li width of 100 can fit 5 images */
#horizontal_carousel ul li {
	font-family:verdana,arial,sans-serif;
	font-size:10px;
	color:#E3EDFA;
	width:50px;
	height:40px; /* Same as image height */
	list-style:none;   
	float:left;
	text-align:center;
	margin-top:5px;
}