/* --- ! --- mega dropdown --- ! --------------------------------------------------------------- */
/* heavily modified version of http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/ */
/* which does not use background images (these have been removed)                                */
/* but does use customised subs (added the ability to make each sub look different)              */
/* ---- ! -------------------------------------------------------------------------------------- */

ul#mega-dropdown {
	width: 980px;
	height: 30px;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute; /* absolute */
	z-index: 10000;
}

	ul#mega-dropdown li {
		width: 97px;
		height: 48px;
		float: left;
		margin: 0;
		position: relative;
		text-align: center;
		border-right: 1px solid #524e80;
	}

		ul#mega-dropdown li a {
			width: 77px;
			height: 32px;
			color: #fff;
			float: left;
			text-align: center;
			font-size: 13px;
			line-height: 14px;
			/* text-indent: -9999px; */ /* disabled due to not using background images on the ul#mega-dropdown a.nb-x classes below */
			text-decoration: none;
			padding: 10px 10px 6px 10px;
			
		}

		ul#mega-dropdown li:hover {
			background-image:url(images/bg-nav-bar-active.gif);
			background-repeat: repeat-x;
			background-color: #716da0;
		}

			ul#mega-dropdown li:hover a, ul#mega-dropdown li a:hover {
				background-position: left bottom; /* not really needed due to "text-indent:" being disabled above and no BG images being used on the ul#mega-dropdown a.nb-x classes below */
			}

				/* make the ul li a transparent within all subs */

				ul#mega-dropdown li .sub ul li:hover { background: none; }

			ul#mega-dropdown li .sub {
				text-align: left;
				width: 400px;
				background-color: #716da0;
				border: 1px solid #524e80;
				border-top: none;
				position: absolute;
					top: 48px; /* the height of the ul#mega-dropdown li a */
					left: -1px;
				display: none;
				float: left;
				padding: 0px 0px 6px 0px; /* 6px bottom padding, stops hovers going over the rounded corners */
				margin: 0;
				/*--Bottom right rounded corner--*/
				-moz-border-radius-bottomright: 9px;
				-khtml-border-radius-bottomright: 9px;
				-webkit-border-bottom-right-radius: 9px;
				/*--Bottom left rounded corner--*/
				-moz-border-radius-bottomleft: 9px;
				-khtml-border-radius-bottomleft: 9px;
				-webkit-border-bottom-left-radius: 9px;
			}

			ul#mega-dropdown li .row {
				width: 100%;
				clear: both;
				float: left;
				margin-bottom: 10px;
			}

				ul#mega-dropdown li .sub ul {
					width: 221px;
					display: block;
					float: left;
					list-style: none;
					margin: 0;
					padding: 0;
				}

					ul#mega-dropdown li .sub ul li {
						height: 25px;
						border-right: none;
						border-top: 1px solid #666295;
						text-align: left;
					}

						ul#mega-dropdown li .sub ul li a  {
							width: 201px;
							height: 20px;
							background: none;
							color: white;
							padding: 5px 10px 0 10px;
							text-align: left;
						}

					ul#mega-dropdown .sub ul li {
						width: 100%;
						margin: 0;
						padding: 0;
						text-align: left;
					}

						ul#mega-dropdown .sub ul li a {
							height: auto;
							color: #fff;
							display: block;
							float: none;
							font-weight: normal;
							margin: 0;
							padding: 1px 0;
							text-decoration: none;
							/* text-indent: 0; */ /*-- Reset text indent, goes with "text-indent: -9999px;" at top --*/
						}

							ul#mega-dropdown .sub ul li a:hover {
								/* background-position: 5px 12px; */ /* disabled due to not using backgounds */
								background-color: #666295;
							}

			ul#mega-dropdown li#nb4 > a, ul#mega-dropdown li#nb5 > a, ul#mega-dropdown li#nb8 > a {
				padding-top: 17px;
				height: 25px;
			}

			ul#mega-dropdown li#nb8 .sub, ul#mega-dropdown li#nb9 .sub, ul#mega-dropdown li#nb10 .sub {
				left: -346px;
			}