@charset "utf-8";
/* CSS Document */
/* Styles for the entire LavaLamp menu */

#lavaLampHolder {
	background: url("../images/icon/lavabg.png") no-repeat top;
	height:48px; /* added */
}

ul.lavaLamp {
    position: relative;
    /*height: 44px;*/ /* was 44 - sets the HEIGHT of the LavaLamp section. Note, total height really = Height + Padding */
		width: 930px; /* note, if I do specify width, check that width + margins does not equal more than the Container Width! */
    padding: 4px 0 0 0; /* Allows to position text vertically, on top of the lavabg.gif image */
		margin: 0 0 0 40px;  /* MENU FORMATING - this sets the start point of first list item. Ie Left Margin */
    /*overflow: hidden;*/
}

	/* Force the list to flow horizontally */
	ul.lavaLamp li {
			float: left;
			list-style: none;
			/*width:135px;*/
			margin: 0 16px 0 0;  /* MENU FORMATING - this spaces the list items out */
	}
	
	/* Represents the background of the highlighted menu-item. */
	ul.lavaLamp .back {
			background: url("../images/icon/lava.gif") no-repeat right -40px;
			width: 9px; height: 40px;
			z-index: 8;
			position: absolute;	
	}
	ul.lavaLamp .back .left {
			background: url("../images/icon/lava.gif") no-repeat left top;
			height: 40px;
			margin-right: 9px;		
	}
	
/*	ul.lavaLamp li.sub ul li .back {
			background: url("../icon/lava.gif") no-repeat right -40px;
			width: 9px; height: 40px;
			z-index: 8;
			position: relative;
			top: 50px;
	}
	ul.lavaLamp li.sub ul li .back .left {
			background: url("../icon/lava.gif") no-repeat left top;
			width: 9px; height: 40px;
			z-index: 8;
			position: relative;
			top: 50px;
	}	*/
	
/* Styles for each menu-item. */
.lavaLamp li a {
		position: relative;
		overflow: hidden;
		outline:none;
		text-decoration: none;
		font: normal 14px Verdana, Geneva, sans-serif;
		color: #fff; outline: none;
		text-align: center;
		height: 40px;
		top:3px; /* This allows me to position the text relative to the lava.gif hover image. Allows to centre text in middle of lava */
		z-index: 10; letter-spacing: 0;
		float: left; display: block;
		margin: auto 10px;	
}

.lavaLamp li b {font-weight:normal;}

/*.lavaLamp li a .lavaLampSubText{font: bold 10px Verdana, Geneva, sans-serif;}*/

.lavaLamp li a:hover {color:#003366;}
.lavaLamp li.current a {color:#003366;}
				
/*.lavaLamp li a.nav1 {
	background:url(lava_nav_home.gif) no-repeat 35px 6px;
	padding:28px 0 0 35px;
	width:90px;
}
.lavaLamp li a.nav2 {
	background:url(NavMarketing.gif) no-repeat 23px 6px;
	padding:28px 0 0 24px;
	width:110px;
}	*/


/* -------------------------------------------------------------------------------------------------------- */

/* Copyright (c) 2008 Stu Nicholls - stunicholls.com - http://www.stunicholls.com/menu/jquery-dropline-dropdown-fly-4.html */

/*#SubNavContainer {width:700px; height:30px; position:relative; background:url(list-back2.gif);}*/

/*#nav, #nav ul {padding:0; margin:0; list-style:none; width:700px;}*/

/*#nav li {float:left;}*/
/*#nav li a {float:left; text-decoration:none; font-family:georgia, serif; font-size:14px; color:#000;}*/
/*#nav li a b {display:block; float:left; height:30px; line-height:28px; padding:0 20px 0 10px; font-weight:normal; cursor:pointer;}*/

/*#nav li.sub {background:url(../icon/droplinemenu_arrow.gif) no-repeat 5px bottom; position:relative;z-index:15;}*/ /* This does kinda wonk, but I've disabled it. Was originally " #nav li.sub a b " */

/*#nav b.hover {color:#ccc;}*/
/*#nav i.hover {color:#009;}*/
/*#nav em.hover {color:#fff;}*/
/*#nav ul ul ul a:hover {color:#080;}*/

#nav ul {display:none; position:absolute; left:35px;  top:53px; height:24px; background:#80B735;border:1px solid #80B735;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; filter:alpha(opacity=85); opacity:0.85; -moz-border-radius:7px;   	-webkit-border-radius: 7px;
	}
#nav ul#sitemap {left:800px;}

#nav ul li {float:left; position:relative; }
#nav ul li a {display:block; /*padding:1px 8px 0 8px;*/ margin-right:0;margin-left:0; font-size:12px; /*line-height:30px;*/ cursor:pointer; height:20px;} /* height added by Steve, for the :hover effect */

#nav ul li a i:hover {background-color:#9DCF5A; color:#009; -moz-border-radius:5px;	-webkit-border-radius: 5px;}

/* I am not sure why display:block is relevent - it does not seem to do anything */
#nav ul li a i {display:block; font-style:normal; cursor:pointer; color:#FFF; padding:2px 8px 2px 8px;} /* Steve added padding */
#nav ul li a.sub {background:url(../images/icon/droplinemenu_arrow.gif) no-repeat right 3px;}

#nav ul ul {width:130px; left:-1px; top:30px;}
#nav ul ul li a {display:block; line-height:20px; padding:0 0 0 10px; width:120px;}
/*#nav ul ul li a.fly {background:url(right.gif) no-repeat right center;}*/
#nav ul ul li a em {font-style:normal; display:block; width:120px; cursor:pointer;}

/*#nav ul ul ul {left:135px; top:0;}*/