/*	
	nav.css
	-	Navigation for Sickness & Health templates
	All rules for the main nav, including links
	
******************************************************************************/

/* @group Main nav */

#navigation{
	float: left;
	width: 703px;
	height: 38px;
	margin-top: 10px;
	padding: 2px 0 15px 2px;
	background: url('/images/hom/nav/bg_nav.png') repeat-x;
}
#navigation ul{
	list-style: none;
	height: 42px;
}
#navigation li{
	float: left;
	margin-right: 2px;
	line-height: 42px;
	height: 42px;	
}
#navigation li.home			{	width: 67px;	}
#navigation li.themes		{	width: 153px;	}
#navigation li.people		{	width: 78px;	}
#navigation li.objects		{	width: 86px;	}
#navigation li.techniques	{	width: 220px;	}
#navigation li.timeline		{
	width: 87px;
	margin-right: 0;
}
#navigation li a {
	display: block;
	height: 42px;	
	padding: 0;
	font-size: 1.3em;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	color: #fff;
	background: #27A4BC;
}
#navigation li a:hover{
	color: #fff;
	background: #1A748A;
}
#navigation li.active a,
#navigation li.active a:hover {
	color: #0A4F60;
	background: #fff;
	cursor: default;
}



/* @end */

/* @group Secondary nav */

/*	Secondary navigations including all links ----------------------------*/

#secondary ul.nav{
	font-size: 1.05em;
	margin-top: 25px;
	padding-top: 10px;
	background: url('/images/hom/common/bg_secondarynav.gif') repeat-x top left;
}
#secondary ul.nav li{
	clear : left;
	border-bottom: 2px dotted #27A4BC;
}

#secondary ul.nav li a{
	display: block;
	padding: 7px 0 7px 26px;
	text-decoration: none;
	background: url('/images/hom/common/arrow_block_blue.gif') no-repeat 0 0.5em;	
}
#secondary ul.nav li.active a,
#secondary ul.nav li.active a:hover{
	color: #fff;
	background-image: url('/images/hom/common/arrow_block_white.gif');
}
#secondary ul.nav li a:hover{
	text-decoration: underline;
	background-image: url('/images/hom/common/arrow_block_black.gif');	
}
#secondary ul.nav li.active{
	float: left;
	position: relative; 
	padding: 4px 0 7px 20px;
	margin: 2px 0 0 -20px;
	border-bottom: none;
	width: 165px;
	background: #27a4bc url('/images/hom/common/bg_secondarynav_active.gif') no-repeat bottom right;
}
#secondary ul.nav li.active ul{
	padding-left: 20px;
	border-top: 2px dotted #427e9a;
}
#secondary ul.nav li.active li{
	border-top: 2px dotted #427e9a;
	border-bottom: none;
	background: none;
}
#secondary ul.nav li.active li.first{
	border-top: none;
}
#secondary ul.nav li.active ul li a,
#secondary ul.nav li.active ul li a:hover{
	line-height: 1.2em;
	padding: 7px;
	background: url('/images/hom/common/bullet_white.gif') no-repeat 0 1em;	
}
#secondary ul.nav li.active.single{
	float: none;
	padding: 0;
	margin-left: 0;
	background: #fff url('/images/hom/common/bg_secondarynav_active.gif') no-repeat bottom right;
}
#secondary ul.nav li.active.single a,
#secondary ul.nav li.active.single a:hover {
	color: #0A4F60;
	cursor: default;
	background: url('/images/hom/common/arrow_block_white_blueborder.gif') no-repeat 0 0.6em;
}
#secondary ul.nav li.active li.active{
	width: 125px;
	margin-left:0;
	background: none;
	padding-left: 0;
}
#secondary ul.nav li.active li.active a{
	font-weight: bold;
	text-decoration: underline;
	width: 125px;
	
}

/* @end */

/* @group Secondary nav for timelines */

/*	Secondary navigation for timelines ----------------------------*/

#secondary ul.nav.timeline{
	margin-top: 0;
	padding-top: 0;
	background: none;	
}
#secondary ul.nav li a{
	display: block;
	padding: 7px 0 7px 26px;
	text-decoration: none;
	background-position: 0 0.5em;
	background-repeat: no-repeat;	
}
/*
	Colours should never be used as class names, but are used here 
	as the same colour may be used across multiple different 
	modules / eras, so naming the class after the era name is not practical
*/

#secondary ul.nav li.orange a		{	background-image: url('/images/hom/nav/timeline-sidenav/orange.gif');	}
#secondary ul.nav li.green a		{	background-image: url('/images/hom/nav/timeline-sidenav/green.gif');		}
#secondary ul.nav li.light-blue a	{	background-image: url('/images/hom/nav/timeline-sidenav/light-blue.gif');}
#secondary ul.nav li.red a			{	background-image: url('/images/hom/nav/timeline-sidenav/red.gif');		}
#secondary ul.nav li.navy a			{	background-image: url('/images/hom/nav/timeline-sidenav/navy.gif');		}
#secondary ul.nav li.dark-green a	{	background-image: url('/images/hom/nav/timeline-sidenav/dark-green.gif');}
#secondary ul.nav li.purple a		{	background-image: url('/images/hom/nav/timeline-sidenav/purple.gif');	}
#secondary ul.nav li.brown a		{	background-image: url('/images/hom/nav/timeline-sidenav/brown.gif');		}
#secondary ul.nav li.pink a			{	background-image: url('/images/hom/nav/timeline-sidenav/pink.gif');		}
#secondary ul.nav li.beige a		{	background-image: url('/images/hom/nav/timeline-sidenav/beige.gif');		}

#secondary ul.nav.timeline li.active a,
#secondary ul.nav.timeline li.active a:hover{
	color: #fff;
	background-image: url('/images/hom/common/arrow_block_white.gif');
}
#secondary ul.nav.timeline li a:hover{
	text-decoration: underline;
	background-image: url('/images/hom/common/arrow_block_black.gif');	
}

/* @end */