Footer hover state not working

Hi there,

Here is a link to a dev site I am working on

If you look at the footer, I have 4 hyperlinks. However, the trouble I am having is when you mouse over, the hover state is not changing.

This is based on the Grid Focus theme, and this is what I have in footer.php

<?php
/**
 *	@package WordPress
 *	@subpackage Grid_Focus
 */
?>
	<?php include (TEMPLATEPATH . '/footer.strip.php'); ?>
	<div id="footer" class="fix">

		<p class="left"> Design by<a href="https://visualcontinuity.co.uk/" title="Graphic Design based in London and Glasgow"> Visual Continuity</a> based on <a href="https://5thirtyone.com/grid-focus"> Grid Focus</a><br>Secure hosting by <a href="https://www.betterbrief.co.uk" title="Better Brief is a web agency in London which specialises in website development and design">Better Brief</a></p>

		<p class="right">An<a href="https://alfanar.org.uk/" title="Arab venture philanthropy"> Alfanar</a> project </p>

	</div>
</div>
<?php wp_footer(); ?>
<script src="<?php bloginfo('template_url') ?>/js/functions.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

this is what I have in my style.css under footer

/* =----------------------------------- footer */
#footer {
	border-top: 1px solid #E3460B;
	margin: 35px 0;

#footer p
a:hover
	{
	color: #E3460B;
	}

}
#footer p {
	padding: 14px 3px 0;
}

Any ideas what’s wrong here? It should be really straightforward, but I just can’t work it out.

Thanks!