/*----------------------------------------------------------------------------
[Main navigation stylesheet]

This stylesheet should only contain Main navigation styles only. All styles
should be separated with a heading.

Project:	    	Lincolnshire 2010
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

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

#mainnav { position:relative; z-index:99; background:#B8D30B url(/magazine/graphics/decoration/bg.mainnav.png) repeat-x 0 100%; }
#mainnav ul { margin:0; }
#mainnav ul:after { content:"."; visibility:hidden; height:0; display:block; clear:both; }
#mainnav li { float:left; margin-right:3px; background:none; padding:0; }
#mainnav li.current { margin-top:-4px; }
#mainnav li a { padding-left:5px; float:left; font-weight:bold; font-size:1.077em; color:#fff; text-decoration:none; background:url(/magazine/graphics/decoration/mainnav.tab.png) 0 0; }
#mainnav li.over a, #mainnav.loading li:HOVER a { background-image:url(/magazine/graphics/decoration/mainnav.tab.over.png); color:#111; }
#mainnav li a span { display:block; padding:7px 9px 9px 4px; background:url(/magazine/graphics/decoration/mainnav.tab.png) 100% 0; }
#mainnav li.over a span, #mainnav.loading li:HOVER a span { background-image:url(/magazine/graphics/decoration/mainnav.tab.over.png); }
#mainnav li.current a { color:#111; background-image:url(/magazine/graphics/decoration/mainnav.tab.current.png); }
#mainnav li.current a span { padding-top:11px; background-image:url(/magazine/graphics/decoration/mainnav.tab.current.png); }
#mainnav li.current.over a, #mainnav li.current.over a span { background-image:url(/magazine/graphics/decoration/mainnav.tab.current.over.png); }
#mainnav li.first.current a:hover { background-image:url(/magazine/graphics/decoration/mainnav.tab.current.png); border-bottom:0; }
#mainnav li.first.current a:hover span { background-image:url(/magazine/graphics/decoration/mainnav.tab.current.home.png); border-bottom:0; }

/* Mega dropdown */
#mainnav li div { position:absolute; left:-9999px; top:37px; padding:0 7px 8px 0; width:864px; background:url(/magazine/graphics/decoration/bg.mainnav.dropdown.png) no-repeat 100% 100%; z-index:99; }
#mainnav li.current div { top:37px; }
#mainnav li.over > div, #mainnav.loading li:HOVER > div { left: auto; margin:0 0 0 -20px; }
#mainnav li div > ul { margin-left:3px; padding:4px 14px; border:2px solid #9AB915; border-top-width:1px; background:#FFF; }
#mainnav li div > ul > li { float:none; display:inline-block; vertical-align:top; margin:0 19px 3px 0; width:190px; }
#mainnav li div > ul > li.fourth, #mainnav li div > ul > li.last { margin-right:0; }
#mainnav li.threewide div { width: 651px; }
#mainnav li.threewide div > ul > li.fourth { margin-right:19px; }
#mainnav li.threewide div > ul > li.third { margin-right:0; }
#mainnav li div > ul > li > a { margin-bottom:4px;  }
#mainnav li div a, #mainnav li div a:hover { padding:0; background:none; font-size:.923em; line-height:16px; font-weight:normal; }
#mainnav li div ul li a, #mainnav li.over div ul li a, #mainnav.loading li:HOVER div ul li a, #mainnav li.current div ul li a { float:none; color:#EA6400 ; font-weight:bold; border-bottom:1px dotted #EA6400; background:none; }
#mainnav li div ul li a:hover { font-weight:bold; color:#EA6400; border-color:#FFF; }
#mainnav li div ul ul { width:100%; }
#mainnav li div ul ul li { margin:0; padding:0; width:100%; }
#mainnav li div ul ul li a, #mainnav li.over div ul ul li a, #mainnav.loading li:HOVER div ul ul li a { color:#111; font-weight:normal; border-color:#FFF; }
#mainnav li div ul ul li a:hover, #mainnav li.over div ul ul li a:hover { color:#111; font-weight:normal; border-color:#111; }
#mainnav li.current div ul li a:hover, #mainnav .current div ul .current a:hover { background:none; border-bottom:1px dotted #111; }
#mainnav li.current .current { margin-top:0; }
#mainnav li.current .current a, #mainnav li.current .current a:hover { font-weight:bold; }
#mainnav li.current .current li a, #mainnav li.current .current li a:hover { font-weight:normal; }
#mainnav li.current.over li a, #mainnav li.current.over li a span { background:none; }
/* So hover state joins seamlessly with dropmenu */
#mainnav li a { border-bottom:1px solid #E2E2E2; }
#mainnav li.over a { border-bottom:1px solid #FFF; z-index:100; position:relative; }

/* Your Lincs */
#mainnav .yourlincs div { width:323px; }
#mainnav .yourlincs div div { position:relative; left:auto; top:auto; margin-left:3px; padding:7px 13px 18px 19px; width:auto; border:2px solid #9AB915; border-top-width:1px; background:#FFF; z-index:99; }
#mainnav .yourlincs div .field { margin:0; padding:0; border:0; }
#mainnav .yourlincs div .fbox { margin-left:-9px; width:294px; height:43px; background:url(/magazine/graphics/decoration/yourlincs.input.bg.png) no-repeat 0 0; }
#mainnav .yourlincs div div ul { margin:0 0 18px; padding:0; border:0; }
#mainnav .yourlincs div div ul li { float:left; margin:0 5px 0 0; padding-left:13px; width:124px; font-weight:bold; background:url(/magazine/graphics/decoration/bullet.blue.png) no-repeat 0 9px; }
#mainnav .yourlincs label { position:absolute; left:-9999px; }
#mainnav .yourlincs .text { float:left; margin:12px 14px 0; padding:0; width:176px; border:0; }
#mainnav .yourlincs #locate { float:left; }

/* We are not showing mega dropdown on keyboard FOCUS - a:focus doesn't work in IE6+7 */
#mainnav li a:focus, #mainnav li a:focus span { background-image:url(/magazine/graphics/decoration/mainnav.tab.over.png); background-repeat:no-repeat; color:#111; }
#mainnav a:focus + div { display:none; }

/* Added instead of margin-left */
#mainnav li > div.rightAlign { right: 0; }
/* BLOODY IE */
#mainnav .main > li.forceLeftIE { position: relative; }
#mainnav.loading .main > li.forceLeftIE:HOVER > div, #mainnav .main > li.forceLeftIE.over > div { left: 0; }