/* 
CSS Document
Navigation styles for site  
Designer: Matt Bentley
Email: matt.bentley@guardian.co.uk
===========================================================================================================================
=========================================================================================================================== */

#nav ul {
	float: right;
}

#nav ul li {
	float: left;
	min-height: 29px;
}

#nav ul li a {
	display: block;
	line-height: 31px;
	padding: 0px 20px 0px 0px;
	color: #333;
	text-decoration: none;
	font-weight: bold;
	background: url(../images/css-images/nav-border.gif) no-repeat left 7px;
}

#nav ul li a span {
	display: block;
	padding: 0px 0px 0px 20px;
	line-height: 31px;
}

#nav ul li.first a {
	background: none;
}

#nav ul li a:hover {
	background: url(../images/css-images/nav-over-right.jpg) no-repeat right top;
}

#nav ul li.first a:hover span {
	background: url(../images/css-images/nav-over-left2.jpg) no-repeat left top;
}

#nav ul li a:hover span {
	background: url(../images/css-images/nav-over-left.jpg) no-repeat left top;
}

#nav ul li.selected a {
	color: #fff;
	background: url(../images/css-images/nav-right.jpg) no-repeat right top;
}

#nav ul li.selected a span {
	background: url(../images/css-images/nav-left.jpg) no-repeat left top;
}

#nav ul li.selected.first a span {
	background: url(../images/css-images/nav-left2.jpg) no-repeat left top;
}

#nav-footer {
	height: 13px;
	clear: both;
	background: url(../images/css-images/nav-footer-bg.gif) repeat-x left top;
}

#nav ul li a:focus,
#nav ul li a:active {
	outline: #333 dotted thin;
}

/* Side navigation
===========================================================================================================================
=========================================================================================================================== */

.sub-nav {
	margin-top: 5px;
	padding-top: 30px;
	background: url(../images/css-images/subnav-bg.png) no-repeat left top;
}

.sub-nav li {
	width: 175px;
	background: #4d4d4d;
}

#content-wrapper .sub-nav li a {
	display: block;
	min-height: 2em; /* ie6 fix */
	width: 160px;
	padding: 5px 0 0 15px;
	color: #fff;
	background: #4d4d4d url(../images/css-images/sub-nav-border.gif) repeat-x left bottom;
	text-decoration: none;
}

#container #content-wrapper .sub-nav li a:focus,
#container #content-wrapper .sub-nav li a:active {
	outline: thin dotted #fff;
	background: #232323;
}

#content-wrapper .sub-nav li span,
#content-wrapper .sub-nav li.selected a {
	display: block;
	line-height: 1.8em;
	width: 160px;
	padding: 5px 0 0 15px;
	color: #FCEE21;
	background: #4d4d4d;
	padding-top:  3px;
	padding-bottom: 1px;
}

#content-wrapper .sub-nav li span {
	padding-top:  3px;
	padding-bottom: 4px;
	background: #4d4d4d url(../images/css-images/sub-nav-border.gif) repeat-x left bottom;
}

#content-wrapper .sub-nav li a:hover {
	color: #FCEE21;
}

#content-wrapper .sub-nav li.first  {
	background: #4d4d4d url(../images/css-images/subnav-top.gif) no-repeat -11px top;
	padding-top: 4px;
}

#content-wrapper .sub-nav li.last a,
#content-wrapper .sub-nav li.last span {
	background: #4d4d4d url(../images/css-images/subnav-bot.gif) no-repeat -11px bottom;
}

#content-wrapper .sub-nav li.last ul li a {
	background: #4d4d4d;
}

#content-wrapper .sub-nav li.last ul li span {
	background: #4D4D4D url(../images/css-images/nav-icon-on.gif) no-repeat 25px 6px
}

#content-wrapper .sub-nav li ul {
	position: relative;
	top: -3px;
	left: 0px;
	padding-bottom: 3px;
	background: #4d4d4d url(../images/css-images/sub-nav-border.gif) repeat-x left bottom;
}
	
#container #content-wrapper .sub-nav li ul li a,
#content-wrapper .sub-nav li ul li span {
	width: 140px;
	padding: 0px 0 1px 35px;
	font-size: 0.8em; /* ie6 and ie7 fix */
	xxheight: 1.6em;
	background: #4d4d4d url(../images/css-images/nav-icon.gif) no-repeat 25px 6px;
	color: #FBB03B;
}

#content-wrapper .sub-nav li ul li span {
	padding: 0px 0 3px 35px;
	color: #FCEE21;
	background: #4d4d4d url(../images/css-images/nav-icon-on.gif) no-repeat 25px 6px;
}

#content-wrapper .sub-nav li ul li a:hover,
#content-wrapper .sub-nav li ul li span:hover {
	background: #4d4d4d url(../images/css-images/nav-icon-on.gif) no-repeat 25px 6px;
}

#content-wrapper .sub-nav li.last ul {
	background: none;
	padding-bottom: 0px;
}

.sub-nav-footer {
	height: 28px;
	background: url(../images/css-images/subnav-footer.png) no-repeat -10px bottom;
}

/* LinKs
===========================================================================================================================
=========================================================================================================================== */

/* Will need to edit these styles if this becomes more than one link */

#links {
	width: 125px;
	padding: 20px 60px 0 10px;
	background: url(../images/css-images/links-bg.png) no-repeat -10px top;
}

#links-footer {
	width: 195px;
	height: 31px;
	background: url(../images/css-images/links-footer-bg.png) no-repeat -10px top;
}

#links a {
	color: #fff;
	text-decoration: none;
	font-size: 1.3em;
	line-height: 1.4em;
}

#links a:hover {
	text-decoration: none;
	color: #FCEE21;
}

#links a:active,
#links a:focus {
	outline: thin dotted #fff;
	background: #232323;
}

































































































/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */