Rollover effects on links not displaying correctly

Question

Hi there,
I have added rollover effects to links on a website I am working on.  However, some of them do not display properly when uploaded.  Here is a link to the website:
http://www.southernprairierailway.com/
You will notice on the home page in the "News" column there is a "CLICK HERE to view our blog" link, but it is displaying in blue making it very hard to read. I have a class assigned to it so that it is the same color as the rest of the text in the column, but when you mouse over it changes to bold and underlined (which it does).
Also, on the history page, there is a link to the photo gallery and again, it is not displaying properly.
Thank you for any suggestions. 

Answer 1

Links have five states: link, visited, hover, active, focus.
You need to define CSS rules for all of them.
In the absence of a:visited, you're seeing an unstyled, browser default a:visited link.
Try
#clickhere a:link, #clickhere a:visited {
font-family: Helvetica, Verdana, Arial;
font-size: 14px;
color: #E7E0D3;
#clickhere a:hover, #clickhere a:active, #clickhere a:focus {
font-family: Helvetica, Verdana, Arial;
font-size: 14px;
font-weight: bold;
color: #E7E0D3;
text-decoration: underline;