/* navigation styles */

/* the horizontal menu starts here */

div#navbar {
	width: 588px; /* makes the div full width */
	position: absolute;
	top: 68px;
	left: 195px;
	line-height: 32px; /* specifies the height of the menu */
	border-left: 1px solid #003b5a;
	}

div#navbar li {
	float: left;	/* causes the list to align horizontally instead of stack */
	position: relative; /* positioning context for the absolutely positioned drop-down */
	list-style-type: none;	/* removes the bullet off each list item */
	width: 94px;
	text-align: center;
	border-right: 1px solid #003b5a; /* creates dividing lines between the li elements */
	}

div#navbar li.home {
	background-image: url(../img/li_lime_bg.gif);
	background-repeat: repeat-x;
	}
	
div#navbar li.home:hover { 
	background-color: #97bf0d;
	}
	
div#navbar li.business {
	background-image: url(../img/li_green_bg.gif);
	background-repeat: repeat-x;
	}
	
div#navbar li.business:hover { 
	background-color: #008c36;
	}
	
div#navbar li.casestudies {
	background-image: url(../img/li_blue_bg.gif);
	background-repeat: repeat-x;
	width: 111px;
	}
	
div#navbar li.casestudies:hover { 
	background-color: #0089a5;
	}
	
div#navbar li.products {
	background-image: url(../img/li_red_bg.gif);
	background-repeat: repeat-x;
	}
	
div#navbar li.products:hover { 
	background-color: #a90230;
	}
	
div#navbar li.partners {
	background-image: url(../img/li_pink_bg.gif);
	background-repeat: repeat-x;
	}
	
div#navbar li.partners:hover { 
	background-color: #cd007b;
	}
	
div#navbar li.contact {
	background-image: url(../img/li_orange_bg.gif);
	background-repeat: repeat-x;
	}
	
div#navbar li.contact:hover { 
	background-color: #dc672a;
	}

div#navbar a {
	display: block;
	padding: 0 10px; /*creates space around the main menu items text */
	text-decoration: none;	 /* removes the underlining of the link */
	font-size: 11px;
	font-weight: normal;
	color: #eee;	/* sets the type coluor */
	}
	
div#navbar a:hover {
	color: #fff; /* sets the rollover type colour */
	}

/* the menu ends here */

/* the drop-down starts here */

div#navbar ul li ul {
	margin: 0; 
	z-index: 10; /* puts drop-down on top of div - safari needs this as menu is 1px higher */
	position: absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
	width: 20em; /*sets the width of the menu - in combo with the lis 100% width, makes the menu stack note changed this from 10em */
	line-height: 16px;
	border-right: 0; /* stops scbs drops having two right borders - they inherit the border, ie doesnt */
	left: -1px; /*aligns the drop exactly under the menu */
	}

div#navbar ul li ul li {
	padding: 0;
	width: 100%; /* makes the list items fill the list container (ul) */
	text-align: left;
	background-color: #003b5a;
	border: 0;
	}
	
div#navbar ul li ul li.home {
	background-color: #97bf0d;
	background-image: none;
	}
	
div#navbar ul li ul li.home:hover {
	background-color: #b6d255;
	}
	
div#navbar ul li ul li.business { 
	background-color: #008c36;
	background-image: none;
	}
	
div#navbar ul li ul li.business:hover { 
	background-color: #4cae72;
	}
	
div#navbar ul li ul li.casestudies { 
	background-color: #0089a5;
	background-image: none;
	width: 100%;
	}
	
div#navbar ul li ul li.casestudies:hover { 
	background-color: #4cacc0;
	}
	
div#navbar ul li ul li.products { 
	background-color: #a90230;
	background-image: none;
	}
	
div#navbar ul li ul li.products:hover { 
	background-color: #c34d6e;
	}
	
div#navbar ul li ul li.partners { 
	background-color: #cd007b;
	background-image: none;
	}
	
div#navbar ul li ul li.partners:hover { 
	background-color: #dc4ca2;
	}
	
div#navbar ul li ul li.contact { 
	background-color: #dc672a;
	background-image: none;
	}
	
div#navbar ul li ul li.contact:hover { 
	background-color: #e69469;
	}

div#navbar ul li ul li a {
	padding: 6px 10px; /*creates space around the drop-down menu items text */
	}

div#navbar ul li ul li:first-child {
	border-left: 0; /* stops inherit of parent uls first-child left border! */
	border-right: 0;
	}

/* make the drop-down display as the menu is rolled over */

div#navbar ul li ul {
	display: none; /* conceals the drop-down when menu not hovered */
	}

div#navbar ul li:hover ul {
	display: block; /* shows the drop-down when the menu is hovered */
	}

/* pop-out starts here */

body div#navbar ul li ul li ul  {
	position: absolute; 
	visibility: hidden; /* same effect as display:none in this situation */
	top: -1px;
	left: 10em;
	}

div#navbar ul li ul li ul a {
	background: none;
	}

div#navbar ul li ul li:hover ul {
	visibility: visible; /* same effect as display:block in this situation */
	}

/* second level popouts start here*/

div#navbar ul li ul li:hover ul li ul {
	visibility: hidden;
	}

div#navbar ul li ul li ul li:hover ul {
	visibility: visible; /* same effect as display:block in this situation */
	}

/* THE HACK ZONE - */

/* add a top line to drops and pops in ie browsers - cant read :first-child */

* html div#navbar ul li ul {
	border-left: 0px; /* stops the drop inheriting the ul border */
	}

/* the tantek hack to feed ie win 5.5-5.0 a lower value to get the pop-out to touch the drop-down */

* html div#navbar ul li ul li ul { 
  left: 9.85em; 
  voice-family: "\"}\""; 
  voice-family: inherit;
  left: 10em;
  }

/* and the be nice to opera rule */

html>body div#navbar ul li ul li ul {
  left: 10em;
} 

/* an opera-only hack to fix a redraw problem by invisibly extending the ul */
/* the first-level drop stays open for 100px below the bottom but at least it works */
/* this can be reduced to as little as 22px if you dont have pop-outs */
/* the pop-out menu stays open for 22px below the bottom but at least it works */

@media all and (min-width: 0px){
   body div#navbar ul li ul {padding-bottom:100px;}
   body div#navbar ul li ul li ul {padding-bottom:22px;}
   ul li ul li ul li ul li:hover {visibility:visible;} /* same effect as display:block in this situation */
   }

/*end opera hack */

/* end of hack zone */

/* the drop-down ends here */

/* end of list-based menu */