@media all{ 

/*
Zones Navigation - crumb navigation
------------------------------------------------------------------------------*/

/* Keywords related to tag */
#nav-bar #local-nav .related-to-crumb1 li a:focus,
#nav-bar #local-nav .related-to-crumb1 li a:active,
#nav-bar #local-nav .related-to-crumb1 li:hover,
#nav-bar #local-nav .related-to-crumb1 li a:hover
{
   	background-color: #4f4f4f; /* $zonePrimary */
   	color: #fff;
}  
#nav-bar #local-nav .related-to-crumb2 li a:focus,
#nav-bar #local-nav .related-to-crumb2 li a:active,
#nav-bar #local-nav .related-to-crumb2 li:hover,
#nav-bar #local-nav .related-to-crumb2 li a:hover
{
   	background-color: #666666; /* $zonePrimary */
   	color: #fff;
}
#nav-bar #local-nav .related-to-crumb3 li a:focus,
#nav-bar #local-nav .related-to-crumb3 li a:active,
#nav-bar #local-nav .related-to-crumb3 li:hover,
#nav-bar #local-nav .related-to-crumb3 li a:hover
{
   	background-color: #999999; /* $zonePrimary */
   	color: #fff;
}

/* Crumb colours */

#nav-bar #crumb-nav a
{
	color: #fff; /* $zonePrimary */
}
#nav-bar #crumb-nav #crumb1 a
{  
  	background-color: #4f4f4f; /* $zonePrimary */
  	background-image: url('images/crumb1.gif');
  	background-position: -50px -50px;
  	background-repeat: no-repeat;
}
#nav-bar #crumb-nav #crumb2 a
{
  	background: #666666; /* $zonePrimary */
  	background-image:  url('images/crumb2.gif');
  	background-position: -50px -50px;
  	background-repeat: no-repeat;
}
#nav-bar #crumb-nav #crumb3 a
{
  	background: #999999; /* $zonePrimary */
  	background-image:  url('images/crumb3.gif'); 
  	background-position: -50px -50px;
  	background-repeat: no-repeat;
}

#nav-bar #crumb-nav #crumb1 a:focus,
#nav-bar #crumb-nav #crumb1 a:active,
#nav-bar #crumb-nav #crumb1 a:hover,
#nav-bar #crumb-nav #crumb2 a:focus,
#nav-bar #crumb-nav #crumb2 a:active,
#nav-bar #crumb-nav #crumb2 a:hover,
#nav-bar #crumb-nav #crumb3 a:focus,
#nav-bar #crumb-nav #crumb3 a:active,
#nav-bar #crumb-nav #crumb3 a:hover
{
   	background-color: #000;
   	color: #fff;
}  

/* Position of background images (padding added in js-on.css)
If you change the values here you need to change the javascript in nav-sizer, this is because background-position can not 
be reliably returned for an element. The nav-resizer uses the class to decide how to manipulate the background once it has resized.
------------------------------------------------------*/

#nav-bar #crumb-nav #crumb1 a.first-hover-end,
#nav-bar #crumb-nav #crumb2 a.first-hover-end,
#nav-bar #crumb-nav #crumb3 a.first-hover-end
{
	background-position: 100% -114px;		
}
#nav-bar #crumb-nav #crumb1 a.first-end-hover,
#nav-bar #crumb-nav #crumb2 a.first-end-hover,
#nav-bar #crumb-nav #crumb3 a.first-end-hover
{
	background-position: 100% -215px;
}

#nav-bar #crumb-nav #crumb1 a.first-hover-second,
#nav-bar #crumb-nav #crumb2 a.first-hover-second
{
	background-position: 100% -417px;
}
#nav-bar #crumb-nav #crumb1 a.first-second-hover,
#nav-bar #crumb-nav #crumb2 a.first-second-hover
{
	background-position: 100% -518px;	
}


}