/* ---------------------
	Title: Newmarket International, Inc. - 2007 User Conference - screen stylesheet
	Filename: screen.css
	Author: One Pica Inc, Boston MA
	
	Table of Contents:
		Section Title (Searchstring)			Description
		
		General Styles(=General):				Set font sizes, Page backgrounds, etc
		Master #container Styles(=Master):		Placing, sizing, styling the main container
		Branding Styles(=Branding):				Logos, taglines, branding info
		Navigation Styles(=Nav):				The navigation bar; internal and external
		Content Styles(=Content):				The main content of the page
		Multi-Column Styles(=Multicol):			The cases where the content needs to be in multiple columns
		Credit/Footer Styles(=Footer):			The footer
		Universal Styles(=Uni):					Classes and elements that apply throughout ('clear', 'blue', etc)
	
	Common Color Table:
		White:									#FFFFFF;
		Header BG Dark Blue:					#00608F;
		Newmarket Orange:						#F49C12;
	
	Thanks To:
		CSS structure/commenting: 				http://www.huddletogether.com/2006/02/16/practical-web-development-tips/
		Markup Structure:						http://www.stuffandnonsense.co.uk/archives/whats_in_a_name_pt2.html
---------------------- */

/* =General
---------------------- 
	General Styles applied to 'normalize' things
	Notes:
		EM styling generally following (http://www.clagnut.com/blog/348/) from this point 10px=1em, 11px=1.1em, etc
---------------------- */
html {
	padding: 0;
	margin: 0;
	font-size: 100%; /* ensures font consistency across browsers */
	height: 100%; /* for footer-stick */
}
body {
	padding: 0;
	margin: 0;
	font-size: 62.5%; /* correct value for IE6 */
	line-height: 1.5;
	background-color: #fff;
	text-align: center;/* fix IE5 bug that doesn't honor margin auto */
	font-family: Arial, sans-serif;
	height: 100%; /* for footer-stick */
}
html > body {
	font-size: 10px; /* correct value for non-IE6 browsers */
}
p {
	padding: 0;
	margin: 0 0 1em 0;
}

INPUT, SELECT, TH, TD {font-size: 1em}
H1 {font-size: 2em}  /* displayed at 24px */
H2 {font-size: 1.5em}  /* displayed at 18px */
H3 {font-size: 1.25em}  /* displayed at 15px */
H4 {font-size: 1em}  /* displayed at 12px */

img, a img {
	border: none;
}
a {
	color:#005786;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
a.largeorange {
		font-size: 1.1em;
		color: #F49C12;
		padding: 0;
		margin: 0 0 0.5em 0;
	}
.orange { color: #F49C12; }

/* =Master
---------------------- 
	Master Container
	Notes:
		margin: 0px auto; centers the container horizontally except in IE5, which is fixed in the body tag
---------------------- */
#container {
	margin: 0;
	padding: 0;
	width: 100%;
	font-size: 1.2em; /* displayed at 12px */
	text-align: left; /* unfix all other browsers from the IE fix in the body tag above */
	background: transparent url(../images/bg/leftcol_bg.gif) 0 0 repeat-y;
	height: auto !important; /* for footer-stick */
	height: 100%; /* for footer-stick */
	min-height: 100%; /* for footer-stick */
}

	#wrapper {
		position: relative;
		width: 100%;
	}
/* =Branding
----------------------
	Branding styles: Usually the logo and tagline
	Notes:
		Image replacement: Usually Phark Method (http://www.mezzoblue.com/tests/revised-image-replacement/)
---------------------- */
#branding-outer {
	position: relative;
	height: 85px;
	background: #00608F url(../images/bg/branding_outer_bg.gif) 0 0 repeat;
	padding: 0;
	margin: 0 auto;
}
.home #branding-outer {
	background: #00608F url(../images/bg/branding_bg.gif) 0 0 repeat;
}

#branding {
	background: transparent;
	height: 77px;
	clear: none;
	margin-left: 237px;
}
.home #branding {
	/* height: 157px; */
}
	#branding-logo {
		/* cursor: pointer; */
		width: 229px;
		height: 56px; /* Set dimensions once here, and use 100% for all dimensions in both rules below */
		margin: 0;
		padding: 0;
		position: absolute;
		top: 0;
		left: 0;
		clear: none;
	}
		#branding-logo h1 {
			text-indent: -5000px;
			overflow: hidden;
			background: transparent url(../images/branding/newmarket_logo_web.gif) 0 0 no-repeat;
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0; /* Neutralize h1's default behavior */
			line-height: 1;
			clear: none;
		}
			#branding-logo h1 a {
				display: block;
				width: 100%;
				height: 100%;
				clear: none;
				color: #fff;
			}
	#branding-subbrand-outer {
		/* TODO: This needs a max-width! Or not. */
		min-width: 510px;
	}
	.home #branding-subbrand-outer {
		/* TODO: This needs a max-width! Or not. */
		min-width: 720px;
	}
		#branding-subbrand {
			height: 76px;
			clear: none;
			width: 535px;
			float: right;
			display: inline;
			margin-right: 0px;
		}
		.home #branding-subbrand {
			width: 567px;
			height: 85px;
		}
			#branding-subbrand h2 {
				text-indent: -5000px;
				text-align: left;
				overflow: hidden;
				background: transparent url(../images/branding/newmarketplus_logo_web.gif) 0 0 no-repeat;
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0; /* Neutralize h1's default behavior */
				line-height: 1;
				clear: none;
			}
			.home #branding-subbrand h2 {
				background: transparent url(../images/bg/home_nmpluslogo1.gif) 0 0 no-repeat;
			}
				#branding-subbrand h2 a {
					display: block;
					width: 100%;
					height: 100%;
					clear: none;
					color: #fff;
				}
	#branding-link {
		position: absolute;
		top: 56px;
		left: 0;
		height: 29px;
		width: 254px;
		background: transparent url(../images/bg/branding_link_bg.gif) 0 0 no-repeat;
	}
	.home #branding-link {
		width: 308px;
		background: transparent url(../images/bg/branding_link_bg_home.gif) 0 0 no-repeat;
	}
	
		#branding-link a {
			display: block;
			padding: 0;
			margin: 2px 0 0 13px;
			width: 114px;
		}
	
	/* Skip link(s) */
		#skiplink a {
			position : absolute;
			top : -1000px;
			left : -2000px;
		}
		
		#skiplink a:focus, #skiplink a:active {
			position : absolute;
			margin : 0;
			top : 0;
			left: 0;
			display : block;
			padding : 0;
			background: #000;
			color : #fff;
			font-weight: bold;
		}
		
		#skiplink a:hover { 
		}

/* =Nav
----------------------
	Navigation styles
	Notes:
		Navigation belongs in an UL tag with <ul><li><a></a></li></ul> as the markup scheme.
		Keep each of the below #elements as divs, and put the UL inside them
		If there's a Left-Hand navigation, use #nav-section, give it a width & float it left
---------------------- */
#nav {
	position: absolute;
	top: 0;
	left: 0;
	width: 237px;
	border-top: solid 2px #F49C12;
	padding: 0 0 40px 0;
}
	#nav-main { /* This is a UL */
		list-style: none outside;
		padding: 0 0 0 5px;
		margin: 0;
		font-size: 1.25em;
		font-weight: bold;
	}
		#nav-main li {
			padding: 0;
			margin: 0;
			border-bottom: solid 1px #4D8AAB;
		}
		#nav-main li.current, #nav-main li.firstcurrent {
			background-color: #003D5B;
		}
			#nav-main li a, #nav-main li a:link, #nav-main li a:visited {
				display: block;
				line-height: 1.1;
				padding: 5px 14px 4px 24px;
				color: #fff;
				text-decoration: none;
			}
			#nav-main li.current a, #nav-main li.current a:link, #nav-main li.current a:visited {
				background: transparent url(../images/bg/nav_plus_large_on.gif) 8px 0.5em no-repeat;
			}
			#nav-main li.firstcurrent a, #nav-main li.firstcurrent a:link, #nav-main li.firstcurrent a:visited {
				background: transparent url(../images/bg/nav_plus_large_on.gif) 8px 1.0em no-repeat;
			}
			#nav-main li.first a, #nav-main li.first a:link, #nav-main li.first a:visited {
				padding-top: 0.9em;
			}
			#nav-main li a:hover, #nav-main li a:active, #nav-main li.current a:hover, #nav-main li.current a:active {
				background: transparent url(../images/bg/nav_plus_large_roll.gif) 8px 0.5em no-repeat;
			}
			#nav-main li.first a:hover, #nav-main li.first a:active {
				background: transparent url(../images/bg/nav_plus_large_roll.gif) 8px 1.0em no-repeat ;
			}
				#nav-main li ul {
					list-style: none outside;
					margin: 0;
					padding: 0 0 0.3em 0;
					font-size: 0.73em;
					font-weight: normal;
					border-top: solid 1px #1A516C;
					background: #003D5B;
				}
					#nav-main li ul li {
						border-bottom: solid 1px #1A516C;
					}
						#nav-main li ul li a, #nav-main li ul li a:link, #nav-main li ul li a:visited {
							background-image: none !important;
						}
						#nav-main li.current ul li.currentpg a, #nav-main li.current ul li.currentpg a:link, #nav-main li.current ul li.currentpg a:visited {
							background: transparent url(../images/bg/nav_plus_small_on.gif) 10px 0.7em no-repeat !important;
						}
						#nav-main li ul li a:hover, #nav-main li ul li a:active, #nav-main li.current ul li a:hover, #nav-main li.current ul li a:active {
							background: transparent url(../images/bg/nav_plus_small_roll.gif) 10px 0.7em no-repeat !important;
						}
/* =Content
----------------------
	Main Content styles
	Notes:
		font-size: 1em makes the text inherit size from #container, and expandable in IE
		Remember: The font is inherited, so some math will be necessary to size children up or down correctly
---------------------- */
#content {
	font-size: 1em; /*12px*/
	position: relative;
	margin-left: 237px;
	top: 0;
	clear: none;
	background: transparent url(../images/bg/contentmain_bg_subpg.gif) right 0 no-repeat;
	min-width: 510px;
	margin-bottom: 40px;
}
.home #content {
	background: transparent url(../images/bg/content_bg_home.gif) 0 0 no-repeat;
	min-width: 720px;
}
	#content-main {
		padding: 2em 30px 40px 45px;
		margin: 0 0 0 0;
		max-width: 54em;
	}
	.home #content-main {
		padding-top: 0px;
		padding-right: 0px;
		background: transparent url(../images/bg/contentmain_bg_homepg.gif) right 72px no-repeat;
		max-width: none;
	}
		.home-logobar {
			height: 72px;
			margin-left: 96px;
			background: transparent url(../images/bg/home_logobar_bg.gif) 0 0 repeat-x;
		}
			.home-logobar a {
				float: right;
				display: inline;
				height: 72px;
			}
			.content-main-home {
				padding: 60px 30px 0 0;
				max-width: 54em;
			}
	
		#content .intro {
			font-size: 1.3em;
			line-height: 1.7;
		}
	
	#content h3 {
		font-size: 1.45em;
		color: #F49C12;
		padding: 0;
		margin: 0 0 0.5em 0;
	}
	#content h4 {
		font-size: 1.25em;
		color: #666666;
		color: #005786;
		padding: 0;
		margin: 0 0 0.5em 0;
	}
	#content ul, #content li {
		list-style-type:none;
		padding:0;
		margin:0;
	}
	#content ul {
		margin-left:10px;
		margin-bottom:15px;
	}
	#content li {
		padding-left:10px;
		background:url('../images/bg/bullet.gif') 0px 5px no-repeat;
	}
/* =Multicol
----------------------
	Multi-Column Content styles
	Notes:
		This is ONLY for content text. Navigation that goes on the left as a "column" is part of #nav-section
		If you need "pixel-perfect", you'll have to stop using percentages and use actual pixels
---------------------- */
#content div.twoColumnLayout {
	width: 47%;
	float: left;
	display: inline; /* Fix IE double-margin bug, Fx ignores it */
	clear: none;
}
	#content div.twoColumnLeft {
		margin-right: 5% !important;
		margin-right: 3%;
	}
#content div.threeColumnLayout {
	width: 30%;
	float: left;
	display: inline; /* Fix IE double-margin bug, Fx ignores it */
	clear: none;
}
	#content div.threeColumnLeft {
		margin-right: 4% !important; /* IE/Fx fix, IE views 3% the same way Fx does 4% */
		margin-right: 3%;
	}
	#content div.threeColumnMiddle {
		margin-right: 4% !important; /* IE/Fx fix, IE views 3% the same way Fx does 4% */
		margin-right: 3%;
	}
	#content div.threeColumnRight {
		margin-right: 0;
	}


/* =Footer
----------------------
	Credit/footer styles: Usually the copyright/company info
	Notes:
---------------------- */
#siteinfo {
	clear: both;
	height: 24px; /* for footer-stick */
	margin: -36px auto 0; /* negative margin makes footer-stick work */
	padding: 12px 62px 0 30px;
	background: #00709E url(../images/bg/siteinfo_bg_top.gif) 0 0 repeat-x;
	font-size: 1.1em;
	color: #C7E1EB;
	text-align: right;
}
.home #siteinfo {
	padding: 12px 68px 0 30px;
}
	#siteinfo a {
		color: #fff;
	}
	#siteinfo-legal {
	}
	#siteinfo-credits {
	}
	#siteinfo-accessibility {
	}

/* =Uni
----------------------
	Universal styles: Styles that apply to elements found throughout the site
	Notes:
		The best example of this is the "clear" div
---------------------- */
.clear {
	clear: left;
}
.bold {
	font-weight: bold;
}
.em {
	font-style: italic;
}
.message_error {
	background: #FFE3E6;
	border: solid 1px red;
	padding: 3px 5px;
	margin: 0.6em 0;
}
.backtotop {
	xbackground:url('../images/bg/backtotop.gif') 0px 3px no-repeat;
	xpadding-left:13px;
	text-decoration:none;
	color:#005786;
}
table {
	margin-top:15px;
	margin-bottom:15px;
	}
table th {
	background:#e8e8e8;
	padding:4px 5px 4px 5px;
	border-right:1px solid #FFFFFF;
	}
table td {
	padding:8px 5px 8px 5px;
}
table.fixed {
	width: 400px;
	margin-top:0;
}
table.fixed td{
	padding:0;
}
.divider {
	border-bottom:1px solid #cccccc;
	margin-bottom:15px;
	margin-top:15px;
	}
.footnote {
	font-size:.85em;
	color:#666666;
	}
.pdf {
	background:url('../images/icons/pdf.gif') top left no-repeat;
	padding-left:20px; padding-top:2px; padding-bottom:2px;
	color: #F49C12;
	font-size: 1.1em;
	}
.line-dark { 
	height:1px;
	border-bottom: 1px solid #999999;
	}
.line-light { 
	height:1px;
	border-bottom: 1px solid #cccccc;
	}