/*Overall CSS for each Horizontal Accordion.
	Most settings should be kept as it.
	Customize each Accordion by styling each Accordion's ID attribute instead.
*/

.haccordion{
padding: 0;
    height: 470px;
    margin: 40px auto;
    padding: 0;
    width: 800px;
overflow:hidden;
    position:relative;
}

.haccordion ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden; /*leave as is*/
}


.haccordion li{
margin: 0;
padding: 0;
display: block; /*leave as is*/
width: 100%; /*For users with JS disabled: Width of each content*/
height: 200px; /*For users with JS disabled: Height of each content*/
overflow: hidden; /*leave as is*/
float: left; /*leave as is*/
}

.haccordion li .hpanel{
width: 100%; /*For users with JS disabled: Width of each content*/
height: 200px;  /*For users with JS disabled: Height of each content*/
}

.hpanelimage {
    float: right;
}
.hpanelcaption {
    background: none repeat scroll 0 0 #111111;
    color: #FFFFFF !important;
    float: right;
    font-size: 12px;
    line-height: 18px;
    padding: 15px;
    width: 500px;
    position:absolute;
    bottom:0;
    right:0;

#hc1 li {
    position:relative;
}