batharoy

.main-navigation li:hover > a {
    border-top: none;
}

#access {
    margin: 0 auto;
}
#secondary {
    margin-top: 20px;
}

As esmi said, use a child-theme or plugin.

Looks like a webkit user agent style:

:focus {
outline: -webkit-focus-ring-color auto 5px;
}

To remove it add none to the selectors attribute when focused:

.videowrapper:focus, .e4mwrapper:focus, {
outline: none;
}

etc…

<a href="<http://www.forestskillsltd.co.uk/shop/>" target="_blank">Click here for further details</a>
You have an extra open & close tag in link.

Should be:
<a href="http://www.forestskillsltd.co.uk/shop/" target="_blank">Click here for further details</a>

These are the default values.
You can change the rgba values (the part between parentheses) for different colors.You can play with rgba colors here.
The px values affect the size, depth & spread of the shadow.
You can play with those values here.

#access {
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
}

To remove completely replace the rgba & px values with the word none.

#access {
box-shadow: none;
}

#site-generator {
    border-top: none;
}

Try it this way.
The second part changes it to grey when hovered over since the background is light.

@media screen and (max-width: 650px) {
    .js .main-nav .menu li a {
        color: white;
    }

    .js .main-nav .menu li a:hover {
        color: grey;
    }
}

Try this code

.js .main-nav .menu li a {
color: white;
}