I would like the navigation item akin to the page the consumer is onto change color once the page is active. I can not appear to focus on the products properly though.

Link: http://www.cicadabooks.co.uk/new/distribution/

Style : .main-nav ul.main-nav li a, #widget li a.current-page-item {color:#F06;}

Any help could be great!

Maybe:

#widget li.current_page_item a {color: #F06;}

Or this:

.main-nav ul.main-nav li.current_page_item a, #widget li.current_page_item a {color: #f06; }

It is because, together with your code, you're stating that the course is designated towards the link (a), however with wordpress, the present-page-item class is designated towards the li tag.

I'd say:

#menu-main li.current_page_item a {color: #F06 !important;}

Avoid using important unless of course you need to.

This can solve it:

#sidebar .menu-main-container ul.menu li.current_page_item a{ color: #F06;}

Edit: The main reason this works is the fact that area of the inherited style also identifies ul, to override it you have to be just like specific (or even more specific).