#mainHeader { }

/*-------------------------------------------
  TOP BLACK BAR
-------------------------------------------*/

div.black span {
	position: relative;
	left: 150px;
}

	#topBlackBar {
		width: 974px;
		background: #000;
		padding: 5px 0;
		font: 11px Verdana, Arial, Helvetica, sans-serif;
		color: #fff;
		}

		#topBlackBar a {
			font: 11px Verdana, Arial, Helvetica, sans-serif;
			color: #fff;
			text-decoration: none;
			margin: 0 5px;
			}
		
		#topBlackBar a:hover { text-decoration: underline; }
		
		/* DIVIDED INTO 3 SECTIONS, LEFT, MIDDLE AND RIGHT, AS BELOW */
		
		.mainHeaderBBLeft {
			padding-top: 2px 0 0 2px;
			float: left;
			width: 290px;
			}

		.mainHeaderBBMiddle {
			float: left;
			width: 374px;
			text-align: center;
			font: normal 17px verdana, Helvetica, sans-serif;
			}

		.mainHeaderBBRight {
			padding: 2px 2px 0 0;
			text-align: right;
			float: right;
			width: 290px;
			}

	/*-------------------------------------------
	  MIDDLE SECTION (the grey backgrounded area)
	-------------------------------------------*/

	#mainHeaderMidMain {
		width: 974px;
		height: 106px;
		background: url(../images/bnnr_gradient_bg.jpg) top left repeat-x;
		}
		
		#mainHeaderMMInternalWrap {
			/* THIS IS SO THE LOGO WILL DISPLAY AS A BG */
			width: 974px; /* width set to fix IE bugs */
			background: url(../images/logo.jpg) top left no-repeat;
			}
			
			#mainHeaderMMTop {
				float: right;
				height: 52px;
				width: 790px;
				margin: 8px 8px 0 0;
				display: inline;
				}
				
				/* ----SEARCH---- */
				
				#MHSearch {
					width: 299px;
					height: 44px;
					margin: 5px 0 0 0;
					background: url(../images/MBsrch_bg.jpg) top left no-repeat;
					}
					
					#MHSearch form, #MHSearch fieldset {
						margin: 0;
						padding: 0;
						border: 0;
						}
						
						.MBsearchInput {
							width: 215px;
							height: 29px;
							margin: 6px 0 0 5px;
							border-top: 1px solid #cac9c5;
							border-right: none;
							border-bottom: 1px solid #cac9c5;
							border-left: 1px solid #cac9c5;
							}
						
						.MBsearchButton {
							border: 0;
							margin: 3px 0 0 -10px;
							padding: 0;
							position: absolute;
							}
				
				/* ----Ad Banner---- */
				
				#MHBannerAd {
					float: right;
					width: 474px;
					height: 52px;
					}
					
					#MHBannerAd img {
						border: 0;
						display: block;
						}
						
			/*-------------------------------------------
			  BOTTOM AREA - the nav
			-------------------------------------------*/
							
			#mainHeaderMMBottom {
				float: right;
				height: 46px;
				width: 974px;
				margin: 8px 0 0 0;
				}
	
			/*-------------------------------------------
			  IMG NAV
			-------------------------------------------*/
			
				#MHnav, #MHnav ul {
					list-style: none;
					display: block; height: 40px;
					padding: 0;
					margin: 0;
					}
				
				#MHnav li {
					cursor: pointer;
					float: right;
					padding: 0;
					}
					
				#MHnav li:hover, #MHnav li.sfhover { position: static; }
				
				#MHnav li a {
					display: block;
					padding: 0;
					height: 40px;
					margin: 6px 3px 0 0;
					}

				#MHnav li a#rd {
					background: url(/files/resources/images/nav_images/tab_readers.gif) top left no-repeat;
					width: 87px;
					}

				#MHnav li a#handyman {
					background: url(/files/resources/images/nav_images/tab_handyman.gif) top left no-repeat;
					width: 120px;
					}

				#MHnav li a#hlthsmrt {
					background: url(/files/resources/images/nav_images/tab_healthsmart.gif) top left no-repeat;
					width: 107px;
					}

				#MHnav li a#discmag {
					background: url(/files/resources/images/nav_images/tab_disc_chan.gif) top left no-repeat;
					width: 102px;
					}

				#MHnav li a#sweepstks {
					background: url(/files/resources/images/nav_images/tab_sweeps.gif) top left no-repeat;
					width: 124px;
					}

				#MHnav li a#arecipes {
					background: url(/files/resources/images/nav_images/tab_allrecipes.gif) top left no-repeat;
					width: 84px;
					}

				#MHnav li a#MST {
					background: url(/files/resources/images/nav_images/tab_myshop.gif) top left no-repeat;
					width: 78px;
					}

				#MHnav li a#rdi {
					background: url(/files/resources/images/nav_images/tab_arena.gif) top left no-repeat;
					width: 79px;
					}
					
				#MHnav li a#hometab {
					background: url(/files/resources/images/nav_images/tab_home.gif) top left no-repeat;
					width: 157px;
					padding: 0; margin-top: 20px;
					}
					
				#MHnav li a:hover { 
					padding: 6px 0 0 0;
					margin-top: 0px;
					text-decoration: none;
					}

					#MHnav li:hover #blckNav ,
					#MHnav li li:hover #blckNav,
					#MHnav li li li:hover #blckNav,
					#MHnav li.sfhover #blckNav,
					#MHnav li li.sfhover #blckNav {
						/* -------------------------------------
						this is the styling for the div that wraps the second level <ul>
						to make sure it's positioned properly
						---------------------------------------- */
						left: auto;
						z-index: 500;
						width: 974px;
						background: #000;						
						position: absolute;
						/*padding: 0;*/
						/*float: right;*/
						height: 29px;
						border-top: 1px solid #fff;
						}
						
						.rd  { margin: 0px 0 0 -168px; }
						.handyman  { margin: 0px 0 0 -258px; }
						.hlthsmrt  { margin: 0px 0 0 -381px; }
						.discmag  { margin: 0px 0 0 -491px; }
						.sweepstks  { margin: 0px 0 0 -596px; }
						.arecipes  { margin: 0px 0 0 -723px; }
						.MST { margin: 0px 0 0 -810px; }
						.rdi  { margin: 0px 0 0 -891px; }
						
						.homeTabSubNav  { margin: -14px 0 0 -8px; }

						#MHnav li ul, #MHnav li li {
							list-style: none;
							margin: 0;
							padding: 0;
							}
	
						#MHnav li ul {
							position: absolute;
							left: -999em;
							margin: 0 0 0 174px;
							/* floating the <ul> as a block element doesn't work,
							due to the absolute positioning necessary for the 'drop down' to work.
							I've used margin to position it properly.*/
							width: 800px;
							}
							
							#MHnav li li { float: left; }
							#MHnav li ul li:hover, #MHnav li ul li.sfhover {}
						
								#MHnav li li a, #MHnav li li a:hover {
									/* Hover styles are being defined to overwrite parent (logo nav) styles */
									padding: 5px 7px;
									margin: 0;
									height: 19px;
									float: left;
									display: block;
									font: bold 13px Verdana, Arial, Helvetica, sans-serif;
									text-transform: uppercase;
									text-decoration: none;
									color: #fff;
									border-left: 1px solid #999;
									}
								
								.rd li a#activeItem { background: #5bd2e4; }								
								.handyman li a#activeItem { background: #f88510; }								
								.hlthsmrt li a#activeItem { background: #a0242f; }								
								.discmag li a#activeItem { background: #0f71b7; }								
								.sweepstks li a#activeItem { background: #fb2b11; }								
								.arecipes li a#activeItem { background: #9a3636; }								
								.MST li a#activeItem { background: #fb2b11; }								
								.rdi li a#activeItem { background: #f2f200; }								
								.homeTabSubNav li a#activeItem { background: #fb2b11; }

								a.rdLink:hover { background: #5bd2e4; }								
								a.handymanLink:hover { background: #f88510; }								
								a.hlthsmrtLink:hover { background: #a0242f; }								
								a.discmagLink:hover { background: #0f71b7; }								
								a.sweepstksLink:hover { background: #fb2b11; }								
								a.arecipesLink:hover { background: #9a3636; }								
								a.MSTLink:hover { background: #fb2b11; }								
								a.rdiLink:hover { background: #f2f200; }

					#MHnav li:hover ul,
					#MHnav li.sfhover ul,
					#MHnav li li:hover ul,
					#MHnav li li.sfhover ul{
						left: auto;
						z-index: 500;
						}

						/* -------------------------------------
						CONSTANT BLACK NAV
						This is the black nav that shows up CONSTANTLY - regardless of whether
						or not an item in the nav is highlighted
						---------------------------------------- */

						#blckNavConstant {
							width: 974px;
							background: #000;
							height: 29px;
							display: block;
							margin: -16px 0 0 1px;
							}

							#blckNavConstant ul, #blckNavConstant li {
								list-style: none;
								margin: 0;
								padding: 0;
								}
		
							#blckNavConstant ul {
								margin: 0 0 0 174px; /* please see not next to '#MHnav li ul' for explanation on why margin as been used for positioning */
								width: 800px;
								display: block;
								}
								
								#blckNavConstant li { float: left; }
								#blckNavConstant li:hover, #blckNavConstant ul li.sfhover {}
							
									#blckNavConstant li a, #blckNavConstant li a:hover {
										/* Hover styles ar being defined to overwrite parent (logo nav) styles */
										padding: 5px 7px;
										margin: 0;
										height: 19px;
										float: left;
										display: block;
										font: bold 13px Verdana, Arial, Helvetica, sans-serif;
										text-transform: uppercase;
										text-decoration: none;
										color: #fff;
										border-left: 1px solid #999;
										}