/* Created: CU for HaySubs navigation across the site */

/* NOTE:
 * Styling in this file is split into three areas:
 * Header styling - logos, basket and dropdown, main nav and quickfinder
 * Sub col styling - promocode area and categories
 * Progress bars for renewal and checkout areas
 * Footer styling
 */

@media screen {
	
/* ------------------------------------ */
/* ---------- header styling ---------- */
/* ------------------------------------ */

/* styling for logos area */
#header #siteLogo {
	background-color: #fff;
	overflow: hidden;
}

	#header #siteLogo #haysubsLogo {
		float: left;
		margin:20px 0 0 24px;
	}
	
		#header #siteLogo #haysubsLogo a img {
			border: 0;	
		}

#header #siteLogo h2#haymarket {
	text-indent: -5000px;
	width:137px;
	height:34px;
	background: url(/_images/nav/haymarketLogo.gif) no-repeat top left;	
	float: right;
	margin: 10px 0 29px 0;
}


/* styling for basket and country dropdown */
#header #siteTools {
	float:right;
	background-color: #fff;
	padding-right:30px;
}

	#header #siteTools #basket {
		float: left;
		background: url(/_images/nav/topRtCnr.gif) no-repeat 100% 0;
		margin-right: 20px;
		width: 280px;
	}
	
	
	#header #siteTools #basket dl {
		overflow: hidden;
		background: url(/_images/nav/iconBasket.gif) no-repeat top left;
		padding: 0 0 0 45px;
	}
	
		#header #siteTools #basket dt,
		#header #siteTools #basket dd {
			margin-top: 5px;
			font-weight: 700;
			font-size: 1.2em;
			font-family: arial, helvetica, sans-serif;
			background: url(/_images/nav/greyBorder.gif) repeat-x #ededed top left;
		}
		
		#header #siteTools #basket dt {
			padding: 9px 0 7px 0;
			float: left;
			color: #211c70;
		}
			
			#header #siteTools #basket dt a {
				text-decoration: underline;
			}
						
		#header #siteTools #basket dd {
			padding: 9px 0 7px 0;
			float: right;
			margin-right: 15px;
			text-align: right;
		}

	
	#header #siteTools #countryDropdown {
		float: left;
		margin-top: 7px;
		
	}	

	/* fix a width for the country dropdown options
	 * as some country listings are long
	 */
	#header #siteTools #countrySelect option {
		width: 170px;
	}	
	
#header .siteTools {
	margin-top:33px;
}
/* site navigation area */
#mainNav {
	overflow: hidden;
	margin:0 16px;
	border: 1px solid #810808;
	background: url(/_images/nav/navBg.gif) repeat-x #e91f26 top left;
}

#mainNav ul {
	overflow:hidden;
	margin: 0 5px;
	background: url(/_images/nav/navLinkBg.gif) repeat-x top left;
}

	#mainNav li {
		float: left;
		font-weight: 700;
		font-size: 1.3em;
	}
	
		#mainNav li a {
			display: block;
			padding: 8px 9px;
			margin: 2px 4px 2px 4px;
			text-decoration: none;
		}

		#mainNav li a:link,
		#mainNav li a:visited {
			color: #fff;
		}
		
		#mainNav li a:hover, 
		#mainNav li a:focus,
		#mainNav li a.selected {
			color: #fff;
			background-color: #180f5e;
		}
		
/* quick finder styling */
#quickFinder {
	overflow: hidden;
	margin-left: 52px;
}

	#quickFinder label {
		text-indent: -5000px;
		display: block;
		background: url(/_images/nav/quickFinderLabel.gif) no-repeat top left;
		width: 171px;
		height: 52px;
		float: left;
	}
	
	#quickFinder #magSelectDropdown {
		float:left;
		padding: 5px 12px 15px 20px;
		background: url(/_images/nav/quickFinderBorder.gif) no-repeat top right;
	}


/* ------------------------------------ */
/* ---------- subcol styling ---------- */
/* ------------------------------------ */

/*promocode area */	
#subcol #promoCodeArea {
	margin: 0 28px 20px;
	background-color: #fff;
}	
			
	#subcol #promoCodeArea h2#promoCodeTitle {
		background: url(/_images/nav/promoCodeLabel.gif) no-repeat top left;
		height: 41px;
		text-indent: -5000px;
		width:184px;
	}	

	/* promo area form section */
	#subcol #promoCodeArea form {
		padding: 3px 0 0 0;
	}
	
		#subcol #promoCodeArea form label {
			font-size:1.2em;
			margin: 3px 0 7px 5px;
			display: block;
		}	

		#subcol #promoCodeArea form input.inputText {
			width: 100px;
			margin-left: 5px;
		}

/* categories area */
#subcol #categoriesArea {
	margin: 0 28px;
	background-color: #fff;
}	

	#subcol #categoriesArea h2 {
		height: 46px;
		width: 184px;
		text-indent: -5000px;
	}
	
		/* different id and image, dependent on whether the lists are expanded or not */
	
		#subcol #categoriesArea h2#categoriesTitle {
			background: url(/_images/nav/categoriesTitle.gif) no-repeat top left;
		}
		
		#subcol #categoriesArea h2#categoriesTitleExpand {
			background: url(/_images/nav/categoriesTitleExpand.gif) no-repeat top left;
		}
						
	#subcol #categoriesArea ul#categories {
		margin: 5px 0 20px 0;
	}
	
		#subcol #categoriesArea ul#categories li {
			border-bottom: 1px solid #e0e0e0;
			font-size: 1.2em;
			padding: 5px 0 5px 12px;
			background: url(/_images/nav/arrowRed.gif) no-repeat 0 9px;
			font-family: tahoma, arial, helvetica, sans-serif;
		}
		
			#subcol #categoriesArea ul#categories li a {
				font-weight: 700;
			}
			
				#subcol #categoriesArea ul#categories li a:link,
				#subcol #categoriesArea ul#categories li a:visited {
					text-decoration: none;
				}
				
				#subcol #categoriesArea ul#categories li a:hover {
					text-decoration: underline;
				}
		
				/* styling for nested list within each category list item */
				#subcol #categoriesArea ul#categories li ul {
					margin-bottom: 2px;
				}	
				
				
				#subcol #categoriesArea ul#categories li ul li {
					font-size: 1em;
					border: 0;
					padding: 6px 0 0 0;
					background: none;
				}	
				
					#subcol #categoriesArea ul#categories li ul li a {
						color: #000;
						font-weight:normal;
					}	

						#subcol #categoriesArea ul#categories li ul li a:link,
						#subcol #categoriesArea ul#categories li ul li a:visited {
							text-decoration: none;
						}
						
						#subcol #categoriesArea ul#categories li ul li a:hover {
							text-decoration: underline;
						}

/* ---------------- */						
/* promo items area */
/* ---------------- */
#subcol #promoItems {
	background-color: #fff;
	margin: 0 28px;
	float: left;
}	

#subcol #promoItems #subcolImg,
#subcol #promoItems #titleText,
#subcol #promoItems #titleTextImg,
#subcol #promoItems #titleImg {
	margin-bottom: 10px
}

	#subcol #promoItems h2 {
		font-weight: bold;
		font-family: tahoma, Arial, Helvetica, sans-serif;
		font-size:1.1em;
		margin-bottom: 3px;
	}	

		#subcol #promoItems h2 a {
			text-decoration: none;
		}	
	
	#subcol #promoItems p {
		font-size:1.1em;
		margin-bottom: 3px;
	}	

#subcol #promoItems #titleText {
	border: 1px solid #E0E0E0;
	background-color: #EFF4F7;
	margin-bottom: 10px;
	padding:4px;
}
	
#subcol #promoItems #titleTextImg {
	border: 1px solid #E0E0E0;
	background-color: #EFF4F7;
	margin-bottom: 10px;
	overflow: hidden;
	padding:4px;
}

	#subcol #promoItems #titleTextImg img {
		float: right;
		margin-left: 3px;
	}


/* ------------------------------------ */
/* ----------- progress bars ---------- */
/* ------------------------------------ */
/* styling for renewal and checkout progress */

#renewalProgress,
#checkoutProgress {
	position: relative;
	float: left;
	margin: 20px 0 15px 28px;
	background: url(/_images/darkGreyPixel.gif) #f6f6f6 repeat-y top left;
	padding-left:1px;
}

/* styling for the rounded corners for the progress bars */

.cnrTopLt, .cnrBotLt, .cnrTopRt, .cnrBotRt, .cnrTopRtComplete, .cnrBotRtComplete {
	position: absolute;
	height: 5px;
	width: 5px;
	}
	
.cnrTopLt {
	top:0;
	left:0;
	background: url(/_images/progressCorners.gif) no-repeat 0 0;
}

.cnrBotLt {
	background: url(/_images/progressCorners.gif) no-repeat 0 -5px;
	bottom:0;
	left:0;
}

.cnrTopRt {
	background: url(/_images/progressCorners.gif) no-repeat -5px 0;
	top:0;
	right:0;
}

.cnrBotRt {
	background: url(/_images/progressCorners.gif) no-repeat -5px -5px;
	bottom:0;
	right:0;
}

.cnrTopRtComplete {
	background: url(/_images/progressCorners.gif) no-repeat -5px -10px;
	top:0;
	right:0;
}

.cnrBotRtComplete {
	background: url(/_images/progressCorners.gif) no-repeat -5px -15px;
	bottom:0;
	right:0;
}

/* end styling for the progress bars rounded corners */

#renewalProgress ul#progressNav,
#checkoutProgress ul#progressNav {
	float:left;
	border-top: 1px solid #d1d1d1;
	border-bottom: 1px solid #d1d1d1;
	background: url(/_images/darkGreyPixel.gif) #f6f6f6 repeat-y top right;
	padding-right: 1px;
}

	#renewalProgress li,
	#checkoutProgress li {
		font-size: 1.1em;
		font-weight: normal;
		font-family: tahoma, verdana, arial, sans-serif;
		color: #000;
		background-color: #f6f6f6;
		float: left;
		padding: 4px 22px 20px 20px;
		color: #180f5e;
	}
	
	#renewalProgress li.completed,
	#checkoutProgress li.completed {
		background-color:#e0e0e0;
		color: #000;
	}
	
	#renewalProgress li.current,
	#checkoutProgress li.current {
		background:url(/_images/progressBg.gif) no-repeat 100% 50% #e0e0e0;
		color: #000;
	}
	
	#checkoutProgress li.doubleLine {
		padding: 4px 22px 9px 20px;	
	}

/* ------------------------------------ */
/* ---------- footer styling ---------- */
/* ------------------------------------ */
#footer p {
	float: left;
	color: #7f7f7f;
	font-size: 1.1em;
	margin-right: 5px;
	line-height: 1.5em;
}

	#footer p#smLogo a {
		background: url(/_images/haymarketLogoSm.gif) no-repeat top left;
		text-indent: -5000px;
		width:73px;
		height:18px;
		margin: 0 5px 5px 0;
		display: block;
		padding: 0;
	}

/* styling for footer links */
#footer #footerLinks {
	overflow: hidden;
}

	#footer #footerLinks ul {
		float: left;
		margin-bottom: 10px;
	}
	
		#footer #footerLinks ul li {
			float: left;
			margin-right: 5px;
			padding-right: 5px;
			font-size: 1.1em;
			border-right: 1px solid #7f7f7f;
		}
		
			/* style removes border and padding from last list item */
			#footer #footerLinks ul li.last {
				border: 0;
				padding: 0;
			}
			
			#footer #footerLinks ul li a {
				color: #7f7f7f;
				text-decoration: none;
			}

		#footer #footerLinks .partnerSites p {
			line-height: 1em;
		}
}