Slots margins problem

HI just purchased the hot designation module and I would like it to look more like the demo.
link to mine:  hairdetective .co.uk (currently in test mode)

I would like the slot areas to be neater & closer together and not overlap the image at the bottom - like the demo. Also I was wondering how to achieve the border which is between the boxes see image.

Thanks

open
modules/mod_hot_designation/tmpl/hot_designation.css

.hjt-gallery-list-item-sppliter {
height: 30px;
background-image: url('../images/hjt_splitter.png');
background-position: 0 13px;
background-repeat: repeat-x;
}

remove height: 30px;

Hi I tried that but I don't think it looks much better. Also, is there a set size size that the small and large images should be to look best?I was just looking on the template for hot destinations and I like the way that the extension is styled and would like to know how to get my slider looking like that one (just with different colours).I like the way the whole background is highlighted when current.Thanks for any help!Here is the link to my site: hairdetective .co.ukSarah

Add this :

.hjt-gallery-list-item-content h3 .hjt-item-arrow{
float:right;
}

.hjt-gallery-list-item-content p{
margin:0!important;
}

Thanks. I have done that and it still looks nothing like the image. Any idea why?

Here are images and style file from that version of module in attachment.Bu backup first before you overwrite,I'am not sure they will be compatible.Path to that files is:\modules\mod_hot_designation\