/* --- ! step2uk 2010 - 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: 960px;
	height: 30px;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	z-index: 10000;
}

	ul#mega-dropdown li {
		float: left;
		font-size: 0.7em;
		font-weight: bold;
		line-height: 30px;
		margin: 0;
		padding: 0;
		position: relative;
		text-align: center;
	}

		ul#mega-dropdown li a {
			height: 30px;
			background-color: #01b1b0;
			color: #fff;
			float: left;
			margin-right: 1px;
			/* text-indent: -9999px; */ /* disabled due to not using background images on the ul#mega-dropdown a.tn-x classes below */
			text-decoration: none;
		}

			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.tn-x classes below */
				text-decoration: underline;
			}

			ul#mega-dropdown a.tn-1 { width: 191px; }
			ul#mega-dropdown a.tn-2 { width: 191px; }
			ul#mega-dropdown a.tn-3 { width: 191px; }
			ul#mega-dropdown a.tn-4 { width: 191px; }
			ul#mega-dropdown a.tn-5 { width: 192px; margin-right: 0; }

				/* bg colours added, to compensate for no background images on ul#mega-dropdown a.tn-x classes above */
				ul#mega-dropdown a.tn-1:hover, ul#mega-dropdown a.tn-1:active { background-color: #b18fc2; }
				ul#mega-dropdown a.tn-2:hover, ul#mega-dropdown a.tn-2:active { background-color: #0082c8; }
				ul#mega-dropdown a.tn-3:hover, ul#mega-dropdown a.tn-3:active { background-color: #71c167; }
				ul#mega-dropdown a.tn-4:hover, ul#mega-dropdown a.tn-4:active { background-color: #ef3f35; }
				ul#mega-dropdown a.tn-5:hover, ul#mega-dropdown a.tn-5:active { background-color: #fdbb31; }

				/* customise the background colour of subs, depending on parent (as above) */
				ul li#tn-1:hover a, ul#mega-dropdown li .sub-tn-1 { background-color: #b18fc2; }
				ul li#tn-2:hover a, ul#mega-dropdown li .sub-tn-2 { background-color: #0082c8; }

				/* make the ul li a transparent within all subs */
				ul#mega-dropdown li .sub ul li a { background: none; }


			ul#mega-dropdown li .sub {
				/* background: #cc0000; */ /* disabled here due to customisation above */
				position: absolute;
					top: 30px; /* the height of the ul#mega-dropdown li a */
					left: 0;
				display: none;
				float: left;
				padding: 0 10px 10px 10px;
				margin: 0;
				/*--Bottom right rounded corner--*/
				-moz-border-radius-bottomright: 5px;
				-khtml-border-radius-bottomright: 5px;
				-webkit-border-bottom-right-radius: 5px;
				/*--Bottom left rounded corner--*/
				-moz-border-radius-bottomleft: 5px;
				-khtml-border-radius-bottomleft: 5px;
				-webkit-border-bottom-left-radius: 5px;
			}

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

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

					ul#mega-dropdown .sub ul li {
						width: 100%;
						color: #fff;
						font-size: 1.0em;
						margin: 0;
						padding: 0;
						text-align: left;
					}

						ul#mega-dropdown .sub ul li strong.mdd-sub-title {
							color: #fdb825;
							font-weight: bold;
							margin: 0;
							padding: 0;
						}

							ul#mega-dropdown .sub ul li strong.mdd-sub-title a {
								background-image: none;
								color: #fdb825;
								font-weight: bold;
								padding: 5px 0;
							}

						ul#mega-dropdown .sub ul li a {
							height: auto;
							color: #fff;
							display: block;
							float: none;
							font-weight: normal;
							line-height: 1.5em;
							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 */
							color: #fdb825;
						}