Chrome overriding stylesheet suddenly

Question

Not sure what I did last night but now I get up this morning and chrome seems to be overriding my anchor and input styles. I wish there was a snippet of code I could post here but I have no idea what code could possibly be causing it. i don't want to put !mportant all over the place to fix it so I am hoping someone can look at the test site and figure out what chrome doesn't like. The headerWidgets at the top of the page (email, phone, and search) should not have decoration and should change color on hover. I can't even place the cursor in the search input anymore. And the nav menu shouldn't have decoration, but the hover works. Go figure. chrome dev tools shows me this:

a:-webkit-any-link {        user agent stylesheet
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
}

and a bunch of user style sheet entries for input

Answer 1

a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
}

is the default styles of webkit for the a tag.

Add a css selector #email a,#phone a and put the styles you want inside. Like this:

#email a,#phone a{
    text-decoration:none;
}

and for the hover:

#email a:hover,#phone a:hover{
    color:red;
}

A better selector to target all anchor tags inside #headerWidgets

#headerWidgets a {
    color: #F00;
}

#headerWidgets a:hvoer {
    color: #CCC;
}

And the reason why you cant click on your search box anymore is that div#headerMenuWrapper is blocking the way. On dev tools hover on this element <div id="headerMenuWrapper" class="clearfix"> you will see it covering #headerWidgets