CSS help needed

Since yesterday I am user of Hikashop. I've done several tutorials to learn Hikashop better so I already created different product and category modules. Thank you for the clear descriptions. Now I have a challenge with my limited knowledge of web design.
On my website http://www.tasmanvakantie.nl I use a Leotheme template and I would like to show my Hikeshop products the same way as you can see on the mainpage (the mouseover effect included). Menu-item HikaShop leads you to my Hikashop module menu item.
Ofcourse I do not expect you to tell me exactly what I have to customize. But can you tell me which files (css?) I need to adjust? Where should I look around in css files for those syntax? What is the easiest way?
I hope you can give me some good advice to get me on track. Or maybe someone couId help me with this. I really look forward to your answers.

Best regards,

Lennart

Hi Lennart,

The best way to do CSS customization for Hikashop is to do it by editing the Hikashop CSS file through "Hikashop->System->Configuration->Display->Front-end CSS File"

Thanks for your reply. I've read the documentation and tried to put the syntax below in different places in css and also tried to find out where with mozzilla element inspect.

Can you tell me where to place this syntax in css so it had effect on the whole container? I tried everything..

width:27.8%;
float:left;
padding: 10px!important;
margin: 15px !important;
background: #fff !important;
box-shadow: 0px 0px 3px #aaa;
-moz-transition:0.7s ease-in-out;
-webkit-transition:0.7s ease-in-out;
height:346px;

Best regards,

Lennart

I think that you can use this kind of CSS code :

#leo-page {
width: 27.8%;
float: left;
padding: 10px!important;
margin: 15px !important;
background: #fff !important;
box-shadow: 0px 0px 3px #aaa;
-moz-transition: 0.7s ease-in-out;
-webkit-transition: 0.7s ease-in-out;
height: 346px;
}