/*----------------------------------------------------------------------------
[Main navigation stylesheet]

This stylesheet should only contain Main navigation styles only. All styles
should be separated with a heading.

Project:	    	Webstructure.NET
Version:	    	1.0.0 [http://semver.org/]
Primary use:		For use of styling the MAIN NAVIGATION
Original Author: 	Qasim Alyas
Last change:		01/Mar/10 []
Last Assigned to:	Qasim Alyas

-----------------------------------------------------------------------------*/

/* Main Navigation */
#mainnav {
	position:relative;
	z-index:99;
	background:#27446E url(/magazine/graphics/decoration/mainnav.style.jpg) no-repeat;
	height:35px;
	padding:7px 0 3px;
}
	#mainnav ul {
		margin:0;
		padding: 0 10px;
	}
	#mainnav .main {
		overflow: visible;
	}
	#mainnav ul:after {
		content:".";
		visibility:hidden;
		height:0;
		display:block;
		clear:both;
	}
		#mainnav li {
			float:left;
			background:none;
			padding:0;
		}
			#mainnav li a {
				float:left;
				font-size:1.154em;
				color:#FFF;
				padding: 9px 10px 7px;
				text-decoration:none;
				background:url(/magazine/graphics/decoration/opaqueLine.png) repeat-y right;
			}
				#mainnav li a:hover,
				#mainnav li.over a,
				#mainnav li.current a {
					background:url(/magazine/graphics/decoration/mainNavTabOver.png) no-repeat;
					color:#27446E;
					margin:-7px 10px -4px 0;
					padding: 15px 0 4px 10px;
				}
					#mainnav li a:hover span,
					#mainnav li.over a span,
					#mainnav li.current a span {
						cursor:pointer;
						float:left;
						background:url(/magazine/graphics/decoration/mainNavTabOver.png) no-repeat 100% 0;
						margin:-15px -12px -4px 0;
						padding: 15px 12px 12px 0;
					}

/* Mega dropdown */
#mainnav li div {
	position:absolute;
	left:-9999px;
	top:45px;
	margin-left:-2px;
	padding:0 30px 0 0;
	background-image:url(/magazine/graphics/decoration/bg.mainnav.dropdown.right.png);
	background-position: right bottom;
	background-repeat:no-repeat;
	z-index:99;
	width:632px;
}
#mainnav li.threewide div {
	width:472px;
}
#mainnav.loading li:hover div,
#mainnav li.over div {
	left:auto;
	#zoom:1;
}
#mainnav.loading li:hover div.rightAlign,
#mainnav li.over div.rightAlign {
	left: auto;
	right: 0;
}
	#mainnav li div ul {
		font-size:.8em;
		line-height:1.333;
		padding:0 0 20px 15px;
		background:url(/magazine/graphics/decoration/bg.mainnav.dropdown.png) no-repeat left bottom;
	}
		#mainnav li div ul li {
			display:inline-block;
			float:none;
			vertical-align:top;
			padding:14px 20px 0 0;
			width:137px;
		}
		#mainnav li.threewide div ul li.third,
		#mainnav li div ul li.fourth,
		#mainnav li div ul li.last {
			padding-right:0;
		}
		#mainnav li.threewide div ul li.fourth {
			padding-right:20px;
		}
			#mainnav li div a,
			#mainnav li div a:visited,
			#mainnav li.over div a,
			#mainnav li.current div a {
				display:block;
				float:none;
				padding:0;
				margin:0 0 7px;
				background:none;
				font-weight:bold;
				color:#6A9728;
			}
				#mainnav li ul ul li a,
				#mainnav li ul ul li a:visited,
				#mainnav li.over ul ul li a,
				#mainnav li.current ul ul li a {
					margin:0;
					font-weight:normal;
					color:#333;
				}
			#mainnav li div a:hover {
				text-decoration:underline;
				background:0;
				padding:0;
				margin:0 0 7px;
			}
				#mainnav li ul ul li a:hover{
					margin:0;
				}
					#mainnav li div ul ul {
						padding:0;
						font-size:0.917em;
						line-height:1.182;
						background:0;
					}
						#mainnav li div ul ul li {
							margin:0;
							padding:0 0 5px;
							float:none;
						}
							#mainnav li div ul ul li a,
							#mainnav li.over div ul ul li a {
								color:#333;
								font-weight:normal;
							}
/*#mainnav .main > li.forceLeftIE {
	position: relative;
}
#mainnav.loading .main > li.forceLeftIE:hover > div,
#mainnav .main > li.forceLeftIE.over > div {
	left: 0;
	top: 38px;
}
#mainnav.loading {
	opacity: 1;
}*/