div#header {clear:both;overflow:hidden;}
div#sub-header {}
div#sub-header div#topslot {border-bottom:1px solid #bebebe;padding:8px}

div#guardian-logo {
   float: left;
   border: 0;
   display: block;
  
   margin: 10px 0 15px 0; /* space between logo and nav is 20px */
}

#guardian-logo a {   display: block;}
#guardian-logo img {border:none;padding:0px}

form#search {float: right;padding-top: 10px;width: 450px;}
form#search fieldset {border:none}

div#zones-nav {font-family: georgia,serif; font-weight: normal; font-size: 1.333em; padding-bottom: 10px; width: 940px; line-height: 1em; display: block; clear: both;}


div#zones-nav div#global-nav,div#zones-nav div#nav-bar {clear: both;width: 100%;overflow:hidden;}

#zones-nav #global-nav ul, #zones-nav #crumb-nav ul, #zones-nav #local-nav ul {	margin: 0; 	padding: 0; }
#zones-nav #global-nav ul li a, #zones-nav #crumb-nav ul li a, #zones-nav #local-nav ul li a {display: block; padding: 4px 5px ; margin: 0px; width: auto;}
#zones-nav #global-nav ul li.first a, #zones-nav #local-nav ul li.first a, #zones-nav #crumb-nav ul li#crumb1 a {padding-left: 5px;}
#zones-nav #global-nav ul li, #zones-nav #crumb-nav ul li, #zones-nav #local-nav ul li { float: left; padding: 0; margin: 0; width: auto; white-space: nowrap; display: block; }

#zones-nav #global-nav ul li a, #zones-nav #crumb-nav ul li a, #zones-nav #local-nav ul li a { display: block; padding: 4px 5px 4px 5px; margin: 0; text-decoration: none; width: auto; }


#zones-nav #global-nav ul li.first a, #zones-nav #local-nav ul li.first a, #zones-nav #crumb-nav ul li#crumb1 a { 	padding-left: 5px;}
#zones-nav #global-nav ul li.last a, #zones-nav #local-nav ul li.last a { 	border: none;}


div#zones-nav div#global-nav {margin-bottom: 10px;}


#nav-bar a
{
  	 background-color: #ededed;
}
#zones-nav #local-nav ul li a
{
    color: #005689;
}

#zones-nav #nav-bar #crumb-nav ul,
#zones-nav #nav-bar #local-nav ul,
#zones-nav #nav-bar
{
  background-color: #ededed;
}

#zones-nav #global-nav ul li a,

#zones-nav #local-nav ul li a
{
	border-right:1px solid #bebebe;
}

/* Global link colours */
#header #wrapper #zones-nav #global-nav li a
{
    color: #333;
    background-color: #fff;
}

#header #wrapper #zones-nav #global-nav li a:focus,
#header #wrapper #zones-nav #global-nav li a:active,
#header #wrapper #zones-nav #global-nav li:hover,
#header #wrapper #zones-nav #global-nav li a:hover
{
    color: #fff;
    background-color: #333;
}

#global-nav li.news a
{
	color:#d61d00;
}

#global-nav li.news a:focus,
#global-nav li.news a:active,
#global-nav li.news:hover,
#global-nav li.news a:hover
{
	color: #fff;
	background-color:#d61d00;
}
#global-nav li.sport a
{
	color:#008000;
}

#global-nav li.sport a:focus,
#global-nav li.sport a:active,
#global-nav li.sport:hover,
#global-nav li.sport a:hover
{
 	color: #fff;
	background-color:#008000;
}

#global-nav li.comment a
{
	color:#0061a6;
}

#global-nav li.comment a:focus,
#global-nav li.comment a:active,
#global-nav li.comment:hover,
#global-nav li.comment a:hover
{
	color: #fff;
	background-color:#0061a6;
}
#global-nav li.culture a
{
	color:#d1008b;
}

#global-nav li.culture a:focus,
#global-nav li.culture a:active,
#global-nav li.culture:hover,
#global-nav li.culture a:hover
{
	color: #fff;
	background-color:#d1008b;
}
#global-nav li.business a
{
	color:#3246ab;
}

#global-nav li.business a:focus,
#global-nav li.business a:active,
#global-nav li.business:hover,
#global-nav li.business a:hover
{
	color: #fff;
	background-color:#3246ab;
}

#global-nav li.money a
{
	color:#8f1ab6;
}

#global-nav li.money a:focus,
#global-nav li.money a:active,
#global-nav li.money:hover,
#global-nav li.money a:hover
{
	color: #fff;
	background-color:#8f1ab6;
}
#global-nav li.life-style a
{
	color:#ad532f;
}

#global-nav li.life-style a:focus,
#global-nav li.life-style a:active,
#global-nav li.life-style:hover,
#global-nav li.life-style a:hover
{
	color: #fff;
	background-color:#ad532f;
}
#global-nav li.travel a
{
	color:#066ec9;
}

#global-nav li.travel a:focus,
#global-nav li.travel a:active,
#global-nav li.travel:hover,
#global-nav li.travel a:hover
{
	color: #fff;
	background-color:#066ec9;
}
#global-nav li.environment a
{
	color:#4a7801;
}

#global-nav li.environment a:focus,
#global-nav li.environment a:active,
#global-nav li.environment:hover,
#global-nav li.environment a:hover
{
	color: #fff;
	background-color:#4a7801;
}

#global-nav li.blogs a,
#global-nav li.jobs a,
#global-nav li.a-z a
{
	color:#333;
}

#global-nav li.blogs a:focus,
#global-nav li.blogs a:active,
#global-nav li.blogs:hover,
#global-nav li.blogs a:hover,
#global-nav li.jobs a:focus,
#global-nav li.jobs a:active,
#global-nav li.jobs:hover,
#global-nav li.jobs a:hover,
#global-nav li.a-z a:focus,
#global-nav li.a-z a:active,
#global-nav li.a-z:hover,
#global-nav li.a-z a:hover
{
	color: #fff;
	background-color:#333;
}


div#zones-nav div#nav-bar {background-color: #ededed;background-repeat:no-repeat;}

div#zones-nav div#nav-bar div#crumb-nav {}

#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: #008000; /* $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: #0d3d00; /* $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: #3a7d00; /* $zonePrimary */
   	color: #fff;
}

/* Crumb colours */

#nav-bar #crumb-nav a
{
	color: #fff; /* $zonePrimary */
}
#nav-bar #crumb-nav #crumb1 a
{  
  	background-color: #008000; /* $zonePrimary */
  	background-image: url('/Images/Guardian/Racing/crumb1.gif');
  	background-position: -50px -50px;
  	background-repeat: no-repeat;
}
#nav-bar #crumb-nav #crumb2 a
{
  	background: #0d3d00; /* $zonePrimary */
  	background-image:  url('/Images/Guardian/Racing/crumb2.gif');
  	background-position: -50px -50px;
  	background-repeat: no-repeat;
}
#nav-bar #crumb-nav #crumb3 a
{
  	background: #3a7d00; /* $zonePrimary */
  	background-image:  url('/Images/Guardian/Racing/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;	
}