/* ================================================================================ */
/* 360 Partners Style sheet 														*/
/* October 2006 																  	*/
/* Authored for 360Partners by Rick Ligas/PantheonDesign.com					  	*/
/* These are old sites. Be kind														*/
/* ================================================================================ */




/* ================================================================================ */
/* Table of Contents 																*/
/* ================================================================================ */
/*
	Setup (set all browsers' assumptions)
	Navigation
	Site structure 
		the pagewrapper
		general page structures

	Navigation
		general
		main links (upper right)

	Specific page styles
		usable on any page
		homepage 
		article pages
		form pages (page 1 and 2)
		suppliers page
		portal pages
		help page 
		terms
		about

	Tool tip system 

	note: if you are taking a look at this file set your editor to 4 spaces per tab
	      and use a monospaced font

*/
/* =============================================================================== */




/* ================================================================================ */
/* Setup 																			*/
/* ================================================================================ */
* {
	margin:			0;
	padding:		0;
	font-family:	Verdana, Arial, Helvetica, sans-serif;
	font-size:		12px;}
	/*	Be very careful with this Universal selector. EVERYTHING, even a simple
		<span></span> will take on ALL the above characteristics. rl */




/* ================================================================================ */
/* Site structure																	*/
/* ================================================================================ */
/* Note that with a site design like this there is a less clear distinction  
   between structure and content. Consider this section GENERAL structures,  
   page level structures. But, there is a lot of "structure" in the specific 
   content sections below too. */

#pagewrapper {
	width:				882px;
	padding:			1em;
	margin-left:		auto;
	margin-right:		auto;}


/* General page structure. These selectors effect every page on the site */

#logoanduppernav {
	/* 	Note that this selector is ONLY used on the home page. There is another 
			version, logoanduppernavcontent, for all other pages. */
	width:				882px;
	height:				62px;
	background:			url(logoanduppernav.jpg);}

#logoanduppernavcontent {
	/* this is used on content pages instead of the logoanduppernav */
	width:				882px;
	height:				66px;
	background:			url(logoanduppernav-secondary.jpg);}

#LogoPlaceholder {
	/*	This is a clickable transparent gif overlaid on the logo 
		inside the logoanduppernavcontent div */
	float:				left;
	margin-left:		12px;}

#banner {
	/* 	banner is only used on the homepage. On all other pages 
		the banner is removed and the graphics are made 
		part of the contentwrappers */
	width:				882px;
	height:				140px;
	background:			url(banner.jpg);}

#pagewrapper {position:relative;}
a#supplierLoginInBanner {position:absolute; top:14px; left:780px; width:112px; font-size:11px; text-align:right; text-decoration:none;}
a#supplierLoginInBanner:link	{color:rgb(22, 55, 118);}
a#supplierLoginInBanner:visited	{color:rgb(22, 55, 118);}
a#supplierLoginInBanner:focus	{color:rgb(22, 55, 118);}
a#supplierLoginInBanner:hover	{color:rgb(228, 100, 21);}
a#supplierLoginInBanner:active	{color:rgb(22, 55, 118);}

#contentwrapper {
	/* this is only used on the homepage. Content pages have their own wrapper */
	overflow:			auto;	/* makes the wrapper contain its floats */
	width:				882px;
	margin-bottom:		12px;}

#contentwrapper.hasSupplierWidget {
	margin-bottom:		0px;}

#contentlefthomepage {
	/*	the entire div's width must equal 662px */
	float:				left;
	width:				552px;
	padding-left:		110px;
	padding-right:		0px;
	padding-top:		18px;
	line-height:		1.75em;}

#contentleft {
	/*	the entire div's width must equal 662px */
	float:				left;
	width:				542px;
	padding-left:		110px;
	padding-right:		10px;
	padding-top:		18px;
	line-height:		1.75em;}

#contentright {
	float:				left;
	width:				219px;	/* why? still researching. rl */
	height:				298px;
	background:			url(contentright.jpg);
	background-repeat:	no-repeat;}

div#contentright.hasSupplierWidget {height: 381px;}

#footer {
	/*	the entire div's width must equal 882px */
	clear:				both;
	width:				772px;
	padding-left:		110px;
	height:				20px;
	padding-top:		8px; 	/* this might have to be tweaked on some pages */
	color:				#999;
	font-size:			11px;}

/* if the following declarations are not present then the font size of links in 
	the footer will default to 12px and we want 11px. Why? The Universal selector
	at the beginning of this document. */

	#footer p {font-size: 11px;}
	#footer a {font-size: 11px;color: #999;}


/* ================================================================================ */
/* End of site structure															*/
/* ================================================================================ */




/* ================================================================================ */
/* Navigation																		*/
/* ================================================================================ */
/* This system for handling the navigation tabs is very complex because of the 
	requirements: text links and rounded corners. It is easy to add or delete a 
	link but it is NOT easy to change the look or the interactions styles.
	Be careful. rl */


/* general use text link styles */

a:link {
	text-decoration:	none;
	color:				#0033FF;}

a:visited {
	text-decoration:	none;
	color:				#0033FF;}

a:focus {
	text-decoration:	underline;}

a:hover {
	text-decoration:	underline;
	color:				#0033FF;}

/* 
	you could have:
	a.someClass:hover {...}
	if you wanted some links to have special effects or colors rl;-)
*/

a:active {
	text-decoration:	underline;
	color:				#0033FF;}


/* special home page link styles */

a.homepage:link {
	text-decoration:	none;
	color:				#000;}

a.homepage:visited {
	text-decoration:	none;
	color:				#000;}

a.homepage:focus {
	text-decoration:	underline;}

a.homepage:hover {
	text-decoration:	underline;
	color:				#000;}

a.homepage:active {
	text-decoration:	underline;
	color:				#0033FF;}



/*	==========================================
	main links (the menu in the upper right) 
	- text with graphic backgrounds ug. RL 
	==========================================
*/

/* ===================== */
/* general menu settings */
/* ===================== */

#navigation ul {
	float: 				right;
	clear: 				both;
	/* 	width: 			100%; */
	/* margin-top:			18px; */
	/* 	The above rule sets the tricky vertical position of the main menu.
		It is overridden by js_CSS_overrides.js for specific browsers. */
	margin-right:		0px;
	margin-bottom:		0px;
	margin-left:		0px;
	padding:			0px;}

/* 	The following two rules set the tricky vertical position of the main menu.
	The homepage needs a different placement of the main menu and different 
	browsers need different measurements.
	These rules are overridden by js_CSS_overrides.js for specific browsers. */ 

#navigation ul.navHomePage {
	margin-top:			39px;
	/* 	Only used on the home page. */ }

#navigation ul.navOtherPage {
	margin-top:			24px;
	/* 	Used on every page except the home page. */ }

/*	If you are trying to adjust the menu position you need to 
	remember that these two rules are ONLY DEFAULTS. They "actual" rules
	are in the CSS broswer overrides files. 
	The defults are here in case the browser tests fail to figure out
	which browser the visitor is using. The default is set for IE. RL */

#navigation ul li { 
	display: 			inline;
	text-transform:		uppercase;}


/* ==================== */
/* leftmost tab styles  */
/* ==================== */

/* this is the leftmost tab when it is unselected */
#navigation ul li.leftmost a {
	float: 				left;
	background-image:	url(nav-background-left-unsel.jpg);
	background-repeat:	no-repeat;
	padding: 			0.5em 1.2em;
	color: 				#000;
	font-size:			11px;
	font-weight:		bold;
	text-decoration: 	none;}

/* this is the leftmost tab when it is  hovered */
#navigation ul li.leftmost a:hover {
	float: 				left;
	background-image:	url(nav-background-left-sel.jpg);
	background-repeat:	no-repeat;
	padding: 			0.5em 1.2em;
	color: 				#fff;
	text-decoration: 	none;}

/* this is the leftmost tab when it is selected */
#navigation ul li.leftmostyouarehere a {
	float: 				left;
	background-image:	url(nav-background-left-sel.jpg);
	background-repeat:	no-repeat;
	padding: 			0.5em 1.2em;
	color: 				#fff;
	font-size:			11px;
	text-decoration: 	none;}

/* this is the leftmost tab when it is selected AND hovered */
#navigation ul li.leftmostyouarehere a:hover {
	float: 				left;
	background-image:	url(nav-background-left-sel.jpg);
	background-repeat:	no-repeat;
	padding: 			0.5em 1.2em;
	color: 				#fff;
	text-decoration: 	none;}


/* ===================== */
/* rightmost tab styles  */
/* ===================== */

/* this is the rightmost tab when it is unselected */
#navigation ul li.rightmost a {
	float: 					left;

	background-image:		url(nav-background-right-unsel.jpg);
	background-repeat:		no-repeat;
	background-position:	top right;
	/*	the above setting positions the right edge of the graphic */
	padding: 				0.5em 1.2em;
	color: 					#000;
	font-size:				11px;
	font-weight:			bold;
	text-decoration: 		none;}

/* this is the rightmost tab when it is hovered */
#navigation ul li.rightmost a:hover {
	float: 					left;

	background-image:		url(nav-background-right-sel.jpg);
	background-repeat:		no-repeat;
	background-position:	top right;
	padding: 				0.5em 1.2em;
	color: 					#fff;
	text-decoration: 		none;}

/* this is the rightmost tab when it is selected */
#navigation ul li.rightmostyouarehere a {
	float: 					left;
	background-image:		url(nav-background-right-sel.jpg);
	background-repeat:		no-repeat;
	background-position:	top right;
	padding: 				0.5em 1.2em;
	color: 					#fff;
	font-size:				11px;
	text-decoration: 		none;}

/* this is the rightmost tab when it is selected AND hovered */
#navigation ul li.rightmostyouarehere a:hover {
	float: 					left;
	background-image:		url(nav-background-right-sel.jpg);
	background-repeat:		no-repeat;
	background-position:	top right;
	padding: 				0.5em 1.2em;
	color: 					#fff;
	text-decoration: 		none;}
/* the background positioning of the images is really something else isn't it? rl */


/* ================= */
/* middle tab styles */
/* ================= */

#navigation ul li a {
	float: 				left;
	background:			#ACD4FB;
	padding: 			0.5em 1.2em;
	color: 				#000;
	font-size:			11px;
	font-weight:		bold;
	text-decoration: 	none;}

#navigation ul li a:hover {
	background:			#3B81C9;
	color: 				#fff;}

#navigation ul li.middleyouarehere a {
	background:			#3B81C9;
	color: 				#fff;}

#navigation ul li.middleyouarehere a:hover {
	background:			#3B81C9;
	color: 				#fff;}

/* ================================================================================ */
/* end of navigation																*/
/* ================================================================================ */




/* ================================================================================ */
/* used on any page																	*/
/* ================================================================================ */

.helptag {
	cursor:				help;
	color:				#0033FF;
	font-weight:		normal;}

.emphasizedtext {
	font-weight:		bold;
	font-style:			italic;
	color:				#293999;}

.prespace {
	margin-top:			.75em;}

.postpace {
	margin-bottom:		.75em;}

img {
	border: 			none;}

p#comingSoon {
	background-color:	#F9F9FF;
	padding:			6px;
	border:				1px solid #ccc;}


/* ================================================================================ */
/* home pages 																		*/
/* ================================================================================ */

#banner p {
	margin-right:		15px;
	padding-top:		100px;
	text-align:			right;
	font-weight:		bold;
	font-size:			16px;}

#contentlefthomepage h1 {text-transform: uppercase;}

#contentright h2 {
	margin-top:			45px;
	margin-right:		20px;
	text-align:			right;
	font-weight:		bold;
	font-size:			16px;}

#contentright h3 {
	margin-left:		38px;
	margin-right:		20px;
	margin-bottom:		27px;
	font-weight:		normal;
	font-size:			14px;}

#HomePageMainParagraph {
	position:			relative; 	/* positioning context for the HomePageGetQuotesBtn */
	margin-right:		1.25em;
	margin-bottom:		0px;
	height:				106px;}

.HomePageGetQuotesBtn {
	position:			absolute;
	right:				2px;
	bottom:				16px;}

ul.homepagesupplierslist {
	margin-top:			12px;
	margin-left:		22px;
	list-style-type:	none;}

ul.homepagesupplierslist li {
	background-image: 		url(bullet.gif);
	background-repeat: 		no-repeat;
	background-position:	0px 6px;
	padding-left:			14px;
	line-height:			175%;}

h3#firstH3inContentRight {margin-top: 14px;}



/* Two services */
div.twoservices {
	float:					left;
	width:					267px;
	height:					166px;
	background-repeat:		no-repeat;
	margin-top:				9px;
	margin-bottom:			7px;	/* tweaked to be 16 pixels */
	margin-right:			9px;}

	div#service21, 
	div#service22 {
		background-image:	url(divlette_2services.jpg);}

	div#service22 {margin-right: 0px;}	/* for ie6 */

	div.twoservices h1 {
		margin-top:			2px;
		margin-right:		1em;
		text-align:			right;}

	div.twoservices h1 a:link {
		color:				#333333;}

	div.twoservices p {
		margin-top:			6px;
		margin-right:		8px;
		margin-left:		12px;
		height:				108px;
		font-size:			12px;
		line-height:		150%;
		color:				#666666;}		

	div.twoservices .SmallServicesButton {
		margin-left:		144px;}		



/* Three services */
div.threeservices {
	float:					left;
	width:					174px;
	width:					174px;
	height:					174px;
	background-repeat:		no-repeat;
	margin-top:				-1px;
	margin-bottom:			7px;	/* tweaked to be 16 pixels */
	margin-right:			10px;}

	div#service31, 
	div#service32,
	div#service33 {
		background-image:	url(divlette_3services.jpg);}

	div#service33 {margin-right: 0px;}	/* for ie6 */

	div.threeservices h1 {
		margin-top:			2px;
		margin-right:		1em;
		text-align:			right;}

	div.threeservices h1 a:link {
		color:				#333333;}

	div.threeservices p {
		margin-top:			6px;
		margin-right:		8px;
		margin-left:		12px;
		height:				117px;
		font-size:			12px;
		line-height:		150%;
		color:				#666666;}		

	div.threeservices .SmallServicesButton {
		margin-left:		52px;}		



/* Four services */
div.fourservices {
	float:					left;
	width:					130px;
	height:					174px;
	background-repeat:		no-repeat;
	margin-top:				7px;	/* tweaked to be 16 pixels */
	margin-right:			8px;}

	div#service41, 
	div#service42,
	div#service43,
	div#service44 {
		background-image:	url(divlette_4services.jpg);}

	div#service44 {margin-right: 0px;}	/* for ie6 */

	div.fourservices h1 {
		margin-top:			2px;
		margin-right:		1em;
		text-align:			right;}

	div.fourservices h1 a:link {
		color:				#333333;}

	div.fourservices p {
		margin-top:			6px;
		margin-right:		12px;
		margin-left:		12px;
		height:				109px;
		font-size:			11px;
		line-height:		150%;
		color:				#666666;}		

	div.fourservices .SmallServicesButton {
		margin-left:		7px;}		



/* Five services */
div.fiveservices {
	height:					69px;
	background-repeat:		no-repeat;
	margin-bottom:			6px;	/* tweaked */
	margin-right:			9px;}

	div#service51 {
		background-image:	url(divlette_5services_1.jpg);}

	div#service52 {
		background-image:	url(divlette_5services_2.jpg);}

	div#service53 {
		background-image:	url(divlette_5services_3.jpg);}

	div#service54 {
		background-image:	url(divlette_5services_4.jpg);}

	div#service55 {
		background-image:	url(divlette_5services_5.jpg);}

	div#service56 {
		background-image:	url(divlette_5services_5.jpg);}

	div#service57 {
		background-image:	url(divlette_5services_5.jpg);}

	div#service58 {
		background-image:	url(divlette_5services_5.jpg);}

	div#service59 {
		background-image:	url(divlette_5services_5.jpg);}

div.fiveservices h1 {
	margin-right:			1em;
	text-align:				right;}

div.fiveservices h1 a:link {
		color:				#333333;}

div.fiveservices p {
	margin-right:			8px;
	margin-left:			96px;}

div.fiveservices img {
	float:					right;
	margin-top:				-22px;}



/* ================================================================================ */
/* Article pages 																	*/
/* ================================================================================ */


#contentwrapperarticlepage {
	overflow:			auto;		/* This makes the contentwrapperarticlepage div wrap all of its contents all the way down to the footer. */
	width:				882px;
	margin-bottom:		14px;		/* Generates 25px from the bottom of contentwrapperarticlepage to the baseline of the first line of the footer text. */
	background-image:	url(contentpagebackground.jpg);
	background-repeat:	no-repeat;}

#contentwrapperarticlepage h1 {
	background:			#fff;
	margin-right: 		220px;
	margin-left: 		110px;
	padding-top:		3px;
	font-size:			18px;}

body#supplierArticle #contentwrapperarticlepage h1	{margin-right: 220px;}
#contentwrapperarticlepage p.articleindexlist		{margin-bottom: 0px;}

#contentwrapperarticlepage h3 {
	margin-top:			2em;
	border-bottom:		1px solid #7F9DB9;}

#contentwrapperarticlepage h3.indexpage {
	/* this margin give the h3 some stand off from the Get Free Quotes box - rl */
	margin-right:		12px;}

#contentwrapperarticlepage p {
	margin-bottom:		.5em;}

#contentwrapperarticlepage p.indexpage {
	/* this margin give the p some stand off from the Get Free Quotes box - rl */
	margin-right:		12px;}

#contentwrapperarticlepage li {
	margin-left:		2em;}

.articlepageheadingaslink {
	margin:				0px;
	/* 	h4's have a margin on other pages
		and when they are used as links it needs to be removed. */ }

/* leftside content */

/* creates an EXpandble DIVlette, used as a table of contents for the article pages */

.exdivwrapper {
	float:				left;
	margin-right:		14px;
	margin-bottom:		4px;}

.exdivtop {
	background-image:	url(divlette_article_background_top.jpg);
	background-repeat:	no-repeat;}

.exdivtop h2 {
	margin-bottom:		8px;
	padding-top:		7px;
	padding-right:		16px;
	font-size:			16px;
	font-weight:		normal;
	text-align:			right;}

.exdivtop p {
	padding-bottom:		5px;
	padding-left:		15px;}

.exdivbottom {
	/* 	height:			43px; */
	height:				36px;
	padding-top:		7px;
	/* 	width:			219px; */
	width:				203px;
	padding-right:		16px;
	background-image:	url(divlette_article_background_bottom.jpg);
	background-repeat:	no-repeat;
	text-align:			right;
	line-height:		normal;}

p.articlenavigation {
	margin-top:			14px;
	margin-right:		30px;
	text-align:			right;}	


/* rightside content article pages */

#contentrightarticlepage {
	/* formats the rightside sidebar on article pages */
	float:				left;
	width:				219px;
	zzzheight:			298px;
	padding-bottom: 	17px;
	background-image:	url(contentrightarticlepage.jpg);
	background-repeat:	no-repeat;
	margin-top:			18px;}

#contentrightarticlepage div#suppplierInfoWidget {margin-top: 50px;}


#contentrightarticlepage h2 {
	margin-top:			12px;
	margin-right:		18px;
	margin-bottom:		12px;
	font-size:			16px;
	font-weight:		bold;
	text-align:			right;}

#contentrightarticlepage p {
	margin-right:		14px;
	margin-left:		3em;
	line-height:		21px;
	text-indent:		-1em;}

div#contentrightarticlepage.contentRightNoBackground {background-image: none;}

#contentrightarticlepage p#signUpNowBtnParagraph 		{padding-top: 12px;}
#contentrightarticlepage p#getFreeQuotesBtnParagraph	{padding-top: 12px;}
img#getFreeQuotesBtn, img#signUpNowBtn					{cursor: pointer;}		/* make everyone (Opera) happy */

#contentrightarticlepage p img {
	float:				right;}

	

/* used in the article pages and Supplier article pages */

div#articlebottomnav div#left  {float: left}
div#articlebottomnav div#right {float: right}


/* ================================================================================ */
/* 	form page IDs and classes 
		I really hope you like descendent selectors... rl
   ================================================================================ */


/* form page 1 styles ============================================================= */
/* (follows, in general, the html layout) ========================================= */

#contentwrapperformpage {
	width:				882px;
	margin-bottom:		12px;		/* Generates 25px from the bottom of contentwrapperarticlepage to the baseline of the first line of the footer text. */
	background-image:	url(contentpagebackground.jpg);
	background-repeat:	no-repeat;}

#contentwrapperformpage h1 {
	/* 	note that this duplicates the headline formatting 
		in #contentwrapperarticlepage h1 */
	background:			#fff;
	margin-right: 		220px;
	margin-left: 		110px;
	padding-top:		3px;
	font-size:			18px;}

	/* the 1-2-3 graphic */
	img#statusIndicatorSurvey			 {margin-bottom:13px;}	
	img#statusIndicatorContactInto		 {margin-top:6px;margin-bottom:13px;}	
	img#statusIndicatorThankYou			 {margin-top:13px;margin-left:106px;}	
	img#statusIndicatorThankYouAlternate {margin-top:0px; margin-bottom:10px; margin-left:0px;}

	#contentwrapperformpage h1 span.theTheme,
	#contentwrapperformpage h1 span.TheTheme {
		/* The span is used on the theme system pages to allow for replacing the theme.
			Since EVERYTHING in this system has a default font size we need the line below.
			And the staff uses both capitalizations.
			See the * rule at line 48. */
		font-size:			18px;}

/*	Sidebar that can appear on page one of the surveys.
	Note that the #divlette_formpageheader NEEDS its width
	set to 537 pixels or IE 6 will push the content below this sidebar 
*/

div#sidebarsurveypage {
	float:				right;
	width:				210px;
	margin-top:			24px;}

div#ReserveTopSpace {
	/* This reserves the space at the top of the sidebar */
	height:					208px;}


#divlette_formpageheader {
	background-image: 	url(divlette_formpage.jpg);
	background-repeat: 	no-repeat;
	width:				537px;
	height:				134px;
	margin-top:			24px;
	margin-left:		106px;
	padding-top:		8px;
	padding-left:		19px;}

	#divlette_formpageheader h2 {
		font-size:			16px;
		font-weight:		bold;}

	#divlette_formpageheader ul {
		margin-top:			7px;
		margin-left:		20px;
		line-height:		22px;}

	#divlette_formpageheader p {
		margin-top:			8px;
		margin-left:		4px;}


	/*	The formpageheader with an image on the left. */

	#FormPageHeaderImgLeft {
		width:				537px; 
		height:				154px;
		margin-top:			24px;
		margin-left:		106px;
		padding-top:		8px;
		padding-left:		19px;}

	#FormPageHeaderImgLeft h2,
	#FormPageHeaderImgLeft h2 span.theTheme,
	#FormPageHeaderImgLeft h2 span.TheTheme {
		/* staff uses both capitalizations! */
		font-size:			16px;
		font-weight:		bold;}

	#FormPageHeaderImgLeft ul {
		margin-top:			10px;
		margin-right:		10px;
		margin-left:		135px;
		line-height:		18px;}

	#FormPageHeaderImgLeft li {
		font-size:			12px;}

	#FormPageHeaderImgLeft p {
		margin-top:			8px;
		margin-right:		10px;
		margin-left:		118px;
		font-size:			12px;}

	/*	show particular images 
		IE 6 on w2000 refuses to properly recognize the descendent selectors
		so old school classes are used instead. */

	.Category1 {
		background-image: 	url(Formpageheader-Category1.jpg);
		background-repeat: 	no-repeat;}

	.Category2 {
		background-image: 	url(Formpageheader-Category2.jpg);
		background-repeat: 	no-repeat;}

	.Category3 {
		background-image: 	url(Formpageheader-Category3.jpg);
		background-repeat: 	no-repeat;}

	.Category4 {
		background-image: 	url(Formpageheader-Category4.jpg);
		background-repeat: 	no-repeat;}

	.Category5 {
		background-image: 	url(Formpageheader-Category5.jpg);
		background-repeat: 	no-repeat;}

	.Category6 {
		background-image: 	url(Formpageheader-Category6.jpg);
		background-repeat: 	no-repeat;}

	.Category7 {
		background-image: 	url(Formpageheader-Category7.jpg);
		background-repeat: 	no-repeat;}

	.Category8 {
		background-image: 	url(Formpageheader-Category8.jpg);
		background-repeat: 	no-repeat;}

	.Category9 {
		background-image: 	url(Formpageheader-Category9.jpg);
		background-repeat: 	no-repeat;}

	.Category10 {
		background-image: 	url(Formpageheader-Category10.jpg);
		background-repeat: 	no-repeat;}


#contentwrapperformpage form {
	width:				662px;
	width:				660px;
	margin-top:			4px;
	margin-left:		0px;
	padding-left:		0px;}

#blueliner {
	margin-left:		106px;
	padding-left:		20px;
	border-left: 		 1px solid #9DBFE4;}

#contentwrapperformpage form h2 {
	margin-bottom:		1em;
	font-size:			16px;
	font-weight:		bold;}

#contentwrapperformpage form h3 {
	margin-bottom:		1em;
	font-size:			12px;
	font-weight:		bold;}

#contentwrapperformpage form p {
	margin-bottom:		1em;}

#contentwrapperformpage form p.buyerquestion {
	margin-bottom:		1em;
	font-weight:		bold;}

.formatradiobuttons {
	margin-top:			-10px;
	margin-left:		60px;
	margin-bottom:		1em;
	line-height:		24px;}

.formatradiobuttons input {
	/* get some standoff from the radio button and its text */
	margin-right:		4px;}

/* adjust the radio buttons so they are properly aligned
   most browsers get their own mini tweaks. */
.formatradiobuttons			{position: relative;}
.formatradiobuttons input	{position: relative; top: 2px;}

.formatZipCode {
	margin-top:			-10px;
	margin-left:		60px;
	margin-bottom:		4px;
	line-height:		24px;}

#contentwrapperformpage form p.additionalComments {margin-bottom: 0px;}

#contentwrapperformpage form p#containsTexarea {padding-left: 63px}		/* ie 7 is forcing this unusual method of indention */

#contentwrapperformpage form p textarea#txtAdditionalComments {
	/* this is used for the html textareas */
	width:				354px;
	margin-top:			6px;
	padding:			3px;
	border:				1px solid #9DBFE4;}

#contentwrapperformpage form select {
	width:				204px;
	margin-top:			8px;
	margin-left:		54px;
	border:				1px solid #9DBFE4;}

#contentwrapperformpage form div.formattextbox {
	margin-top:			6px;
	margin-left:		80px;
	margin-bottom:		12px;}

#contentwrapperformpage form div.formattextbox input {
	/* this sets a general use single line text box */
	width:				140px;
	padding:			3px;
	margin-bottom:		8px;
	border:				1px solid #9DBFE4;}

#contentwrapperformpage form div.formattextbox input.othertext {
	/* this sets a "other" single line text box */
	width:				260px;
	padding:			3px;
	margin-bottom:		8px;
	border:				1px solid #9DBFE4;}

#contentwrapperformpage form p.zipinfo {
	margin-left:		49px;}

#contentwrapperformpage form p.zipinfo input {
	width:				35px;
	margin-bottom:		3px;
	border:				1px solid #9DBFE4;}

#contentwrapperformpage #wrapperforformpage2 p#onScreenHelpUnderInput {
	/*	Formats the help text under an input like the zip code on page 1 of the forms. */
	color:				#999;
	line-height:		1.25em;}

.questionText {font-weight: bold;}

.txtOther {
	/* this sets an "other" single line text box when used after a list of radios */
	width:				241px;
	padding:			3px;
	margin-bottom:		8px;
	margin-left:		21px;
	border:				1px solid #9DBFE4;}

#txtZipCode {
	width:				354px;
	margin-top:			3px;
	margin-left:		3px;
	margin-bottom:		15px;	/* tightened up for the validation experiements */
	border:				1px solid #9DBFE4;
	padding:			3px;}

.numberinput {
	width:				3em;
	padding:			3px;
	border:				1px solid #9DBFE4;}

#contentwrapperformpage form p.additionalcomments {
	margin-bottom:		0px;}

#formfooter {
	background-image: 	url(formfooterbackground.jpg);
	background-repeat: 	no-repeat;
	width:				550px;
	height:				28px;
	margin-left:		-21px;
	padding-top:		21px;
	text-align:			right;}

/* position the Get Started Now arrow in its paragraph */
p#PositionTheGetStartedArrow {position:relative;}

img#GetStartedNowArrow {
	position:			absolute;
	top:				-55px;
	left:				-130px;}


/* for the Submit style validation, validation that starts after the submit */
div#contentwrapperformpage.validationAfterSubmit #blueliner p 			{position:relative;}
div#contentwrapperformpage.validationAfterSubmit img.ValidationFeedback	{display:none;position:absolute;top:-3px;left:-29px;}
div#contentwrapperformpage.validationAfterSubmit span.ValidationNote	{display:none;position:absolute;top:0px;left:-96px;font-weight:bold;color:#F64019;}

/* for the Inline style validation, validation that works inline as the user fills out the form */
div#contentwrapperformpage.validationInline #blueliner p 				{position:relative;}
div#contentwrapperformpage.validationInline img.ValidationFeedback		{position:absolute;top:-3px;left:-29px;}
div#contentwrapperformpage.validationInline span.ValidationNote			{display:none;position:absolute;top:0px;left:-96px;font-weight:bold;color:#F64019;}



/* form page 2 styles ============================================================= */
/* (follows, in general, the html layout) ========================================= */

#wrapperforformpage2 table {
	border-collapse:	collapse;}

	#wrapperforformpage2 td {
		padding:			4px 2px 4px 2px ;}

	.formpage2column1 {
		width:				120px;}

	.formpage2column2 {}

/* other page 2 rules */

#contentwrapperformpage form #wrapperforformpage2 p {
	/*	this id is used to adjust the vertical spacing on the 2nd page of forms */
	margin-bottom:		0em;}

#contentwrapperformpage form #wrapperforformpage2 div.formattextbox {
	/* this id is used to adjust the vertical spacing on the 2nd page of forms */
	margin-top:			4px;
	margin-bottom:		2px;}

#contentwrapperformpage form  #wrapperforformpage2 select {
	/* tweaked to be as wide as the zip code input */
	width:				200px;}

#contentwrapperformpage form  #wrapperforformpage2 input {
	/* Note that this WILL format the aspx controls.
		You might not think that the selector would select an aspx
		control and it won't - except that the aspx control is only
		seen by the SERVER and not the BROWSER. The browser sees
		an INPUT were the server sees the asp:TextBox. This can lead
		to a LOT OF CONFUSION so be careful. rl. */
	width:				241px;
	padding:			3px;
	border:				1px solid #9DBFE4;}

#contentwrapperformpage form  #wrapperforformpage2 input.pndigits {
	width:				40px;
	padding:			3px;
	border:				1px solid #9DBFE4;}

#contentwrapperformpage form  #wrapperforformpage2 input#ext {width: 41px;}


#contentwrapperformpage form  #wrapperforformpage2 input.zip {
	width:				241px;
	padding:			3px;
	border:				1px solid #9DBFE4;}

#contentwrapperformpage form  #wrapperforformpage2  td.zipTDadjustments {
	/* Used on page 2 of the forms to deal with the zip code label */
	vertical-align:		top;
	padding-top:		8px;}

img#privacyAssured {
	margin-right:		6px;
	vertical-align:		-7px;}

#contentwrapperformpage form #wrapperforformpage2 input#getQuotesNowBtn {border:none; width:159px; height:26px; }


/* validation for form page 2 */

div#wrapperforformpage2.validationAfterSubmitPage2 {position:relative;} /* setup a positioning context for the validation marks */
div#wrapperforformpage2 table {
	table-layout:		fixed;
	border-collapse:	collapse;
	border-spacing:		0px;
	width:				680px;}
div#wrapperforformpage2 table td#col1 	{width:120px;}
div#wrapperforformpage2 select#StateId 	{width:249px; margin:0em;}
/* this is really specific, and it needs to be. */

/* careful there is an id = ValidationMark and a class = validationMark !!! */
img.validationMark 						{display:none;position:absolute;top:39px;left:-29px;}
span.ValidationHint						{display:none;color:#F64019;}

img#BBBAccreditedBusinessSeal {position:absolute;top:80px;left:535px;}


/* ================================================================================ */
/* Thank you page 																	*/
/* ================================================================================ */

	body.thankYou #contentwrapperarticlepage h1 {margin-right:0px;}

	div#contentleft.thankYou ul {
		margin-bottom:			.5em;
		list-style-type:		decimal;}

	div#contentleft.thankYou h3 {	/* not needed in the new design with the three column table. */
		margin-bottom:			1em;}

	div#contentleft.thankYou ul {
		margin-bottom:			24px;
		list-style-type:		disc;
		color:					#477ec4; }

	div#contentleft.thankYou ul li span {
		color:					#000; }

	table.thankYou	{
		table-layout: 		fixed; 
		border-collapse:	collapse; 
		border-spacing: 	0;
		margin-top:			16px;}

	table.thankYou th {width:150px;}

	table.thankYou td {
		padding-bottom:		10px;
		vertical-align:		top;
		font-size:			12px; 
		line-height:		16px; 
		text-align:			center;}

	table.thankYou td a img {margin-bottom:9px;} 

	table.thankYou tr.TRWithLists td {
		line-height:	24px; 
		text-align:		left;}

	div.thankYouPageSidebar {float:right; width:220px;}

	div#contentwrapperarticlepage div.thankYouPageSidebar h3 {
		border:			0;
		margin:			0;
		margin-top:		24px;
		background:		url(divlette_1_top.jpg) no-repeat;
		padding-right:	20px;
		font-size:		16px; 
		line-height:	33px;
		text-align:		right;}

	div#contentwrapperarticlepage div.thankYouPageSidebar p {
		background: 	url(divlette_1_bottom.jpg) left bottom no-repeat;
		padding:		10px 0px 20px 10px ;
		line-height:	24px;}

	div#contentwrapperarticlepage div.thankYouPageSidebar p span {color: white;}


/* ================================================================================ */
/* quotes page 																		*/
/* ================================================================================ */

	p.serviceslist 					{margin-top:.5em;line-height:140%;}


/* ================================================================================ */
/* Suppliers sidebar widget															*/
/* ================================================================================ */

	div#suppplierInfoWidget {margin-top: 36px;}
	
	a#supplierInfo			{
		display: 			block; 
		width: 				209px; 
		height:				153px; 
		padding-top: 		39px; 
		padding-left: 		10px;
		font-size:			12px;
		line-height:		18px;}
		
	a#supplierInfo:link		{background: url(Supplier-info-background.jpg) 	no-repeat top left; color: #163776;}
	a#supplierInfo:visited	{background: url(Supplier-info-background.jpg) 	no-repeat top left; color: #163776;}
	a#supplierInfo:focus	{background: url(Supplier-info-background.jpg)	no-repeat top left; color: #163776;}
	a#supplierInfo:hover	{background: url(Supplier-info-background.jpg)	no-repeat bottom left; color: #163776;}
	a#supplierInfo:active	{background: url(Supplier-info-background.jpg)	no-repeat top left; color: #163776;}
	


/* ================================================================================ */
/* Suppliers page																*/
/* ================================================================================ */

	body#Suppliers #pagewrapper {
		background: url(Supplier-banner.jpg) no-repeat 114px 120px; }

	body#Suppliers #contentwrapperarticlepage h1 {margin-right: 0px;}

	/* the banner */

	div#SupplierBanner {
		position:				relative;
		margin-top:				52px;
		margin-top:				33px;
		margin-left:			112px;
		height: 				367px;}

		body#Suppliers div#SupplierBanner h2 {
			margin-right:			390px;
			margin-left:			0px;
			padding-top:			0px;
			padding-top:			19px;
			font-size: 				20px; 
			line-height: 			28px; 
			font-weight: 			bold; 
			color: 					#e46415;}

			div#SupplierBanner h2 span.notBold {
				font-size: 				20px; 
				line-height: 			28px; 
				font-weight: 			normal;
				/* never forget line 54 */	}
				
		div#SupplierBanner h3 {
			margin-top:				25px;
			margin-right:			390px;
			border-bottom:			0px;
			font-size: 				14px; 
			line-height: 			18px; 
			color: 					#163776;}

		body#Suppliers div#SupplierBanner ul {
			margin-right:			390px;
			margin-left:			0px;
			font-size: 				14px; 
			line-height: 			18px; 
			color: 					#e46415;}

			body#Suppliers div#SupplierBanner ul li {margin-left: 16px;}

		div#SupplierBanner ul span {
			font-size: 				14px; 
			line-height: 			18px; 
			color: 					#163776;}

		div#SupplierBanner img#ViewSampleLead {
			position:				absolute;
			top:					270px;
			left:					23px;
			cursor:					pointer;}

		/* the sign up form */

		div#SignUpForm {
			float:					right;
			margin-top:				0px;}
	 
			body#Suppliers table#SignUpFormTable {
				table-layout:		fixed;
				border-collapse:	collapse;
				border-spacing:		0px;
				line-height: 		20px; 
				color:				#163776; }

				table#SignUpFormTable th#column1 {width: 134px;}
				table#SignUpFormTable th#column2 {width: 237px;}

				table#SignUpFormTable th {
					padding-bottom:	16px;
					font-size:		14px;
					line-height:	20px;
					font-weight:	normal;
					text-align:		left;
					color:			#333c44; }

				table#SignUpFormTable th strong {
					font-size:		14px;
					line-height:	20px;
					font-weight:	bold;}
				
				td.theLabel {
					padding-top:	6px;	/* be sure to test this is ie carefully!!! */
					padding-right:	16px;
					text-align: 	right;
					vertical-align:	top;}
				
				td.theInput {text-align: left;}

				table#SignUpFormTable input {
					width: 			185px; 
					margin-bottom:	11px;
					padding: 		5px;}
					
				table#SignUpFormTable input#JoinNowButton {
					width: 			122px;
					height: 		48px;
					margin-top:		8px;
					padding:		0px;}

				div#oneMomentPlease {
					display:		none;
					position:		absolute;
					top:			316px;
					left:			658px;
					width:			110px;}

				table#SignUpFormTable input.phoneDigits3 {width: 25px;}
				table#SignUpFormTable input.phoneDigits4 {width: 35px;}
				table#SignUpFormTable input.phoneDigits6 {width: 45px;}

				table#SignUpFormTable input.notValid {background-color: #fcece3}
				table#SignUpFormTable label.notValid {color: #e46415;}



	/* the body text */

	body#Suppliers h2 {
		margin-top:					16px;
		margin-right:				20px;
		margin-left:				112px;
		padding-top:				5px;
		font-size: 					14px; 
		line-height: 				22px; 
		color: 						#163776; }

		body#Suppliers h2.noTopSpace {margin-top: 0px; padding-top: 0px;}
		.overlined {border-top: 1px solid #163776}
		.positioningContext {position: relative;}
		body#Suppliers #contentwrapperarticlepage .endOfSection {margin-bottom: 36px;}

		img#SupplierSellQualifiedLeads {
			position:				absolute;
			top:					0px;
			left:					600px;}

		img#SupplierPhoneVerifyLeads {
			position:				absolute;
			top:					122px;
			left:					600px;}

		img#Supplier360PartnersLogo {
			position:				absolute;
			top:					10px;
			left:					560px;}

		img#SupplierHowItWorks {
			float:					right;
			margin-top:				3px;
			margin-right:			-215px;}

		img#SupplierStaffIsAvailable {
			position:				absolute;
			bottom:					0px;
			left:					622px;}

		img.SupplierJoinNow {
			position:				absolute;
			top:					9px;
			left:					597px;}

	body#Suppliers #contentwrapperarticlepage p {
		position: 					relative;
		margin-right:				235px;
		margin-left:				112px;
		font-size: 					12px; 
		line-height: 				20px; }

	body#Suppliers #contentwrapperarticlepage ul {
		margin-right:				235px;
		margin-left:				112px;
		font-size: 					12px; 
		line-height: 				20px; }


	body#Suppliers table#FeaturesAndBenefits {
		width: 						550px;
		margin-top:					18px;
		margin-bottom:				29px;
		margin-left:				112px;
		table-layout:				fixed;
		border-collapse:			collapse;
		border-spacing:				0px;
		font-size: 					12px; 
		line-height: 				20px; 
		color:						#163776; }

		body#Suppliers table#FeaturesAndBenefits #column1 {width: 50%;}
		body#Suppliers table#FeaturesAndBenefits #column2 {width: 50%;}

		body#Suppliers table#FeaturesAndBenefits th,
		body#Suppliers table#FeaturesAndBenefits td {
			padding:				4px 4px 4px 14px;
			vertical-align:			top;}

		body#Suppliers table#FeaturesAndBenefits tr.odd  {
			border-top:					1px solid #aac3da;
			background-color:			#ebf3fa;}

		body#Suppliers table#FeaturesAndBenefits th {
			text-align:					left;
			text-transform:				uppercase;}

		body#Suppliers table#FeaturesAndBenefits tr#lastTR {
			border-bottom:				1px solid #aac3da;}

		h2#moreDetailsActuator {cursor: pointer;}
		h2#moreDetailsActuator.hover {cursor: pointer; color:#e46415; }

		div#moreDetails {margin-top:11px}

	/* the sample lead */

	div#SampleLead {
		display:				none;
		position:				absolute;
		top:					110px;
		left:					114px;
		overflow:				auto;
		width: 					500px;
		height:					428px;
		background-color:		#fefdfa;
		border:					1px solid #e46415;
		padding:				28px 14px ;
		padding:				14px 14px 14px 14px ;
		cursor:					pointer;}

		div#SampleLeadCloseBox {
			position:				absolute;
			top:					10px;
			right:					10px;
			width:					120px;
			font-size:				10px;
			text-align:				right;
			color:					#777}
	
		div#SampleLead h2 {
			margin-top:				0px;
			margin-right:			0px;
			margin-bottom:			18px;
			margin-left:			0px;
			border-bottom:			0px solid #c9c9c9;
			padding-bottom:			5px;
			font-size:				11px;
			font-weight:			bold;
			text-transform:			uppercase;
			color:					rgb(22, 55, 118);}
	
		div#SampleLead h3 {
			margin-bottom:			2px;
			border-bottom:			1px solid #c9c9c9;
			padding-bottom:			5px;
			font-size:				11px;
			font-weight:			normal;
			text-transform:			uppercase;
			color:					#333333;}
	
		div#SampleLead table {
			table-layout:			fixed;
			border-collapse:		collapse;
			border-spacing:			0px;
			width:					100%;
			margin-bottom:			23px;
			font-size:				11px;}
	
			div#SampleLead table tr 			{border-top: 1px solid #dfdfdf;}
			div#SampleLead table tr.noTopBorder {border-top: 0px;}
			div#SampleLead table td 			{padding-top: 5px; padding-bottom: 5px; color: #000;}
	
			div#SampleLead td.label {
				width:				124px;
				padding-left:		20px;
				color: 				#777;}
	
		div#SampleLead p {
			margin-bottom:			25px;
			margin-left:			20px;
			font-size:				11px;
			line-height:			18px;
			color:					#000;}
	
		div#SampleLead ol {
			margin-left:			40px;}
	
		div#SampleLead ol li {
			margin-bottom:			8px;
			font-weight:			bold;
			line-height:			18px;}
	
		div#SampleLead ol li span {font-weight: normal;}
	
		div#SampleLead table td,
		div#SampleLead ol li,
		div#SampleLead ol li span {
			font-size:				11px;}
	



/* ================================================================================ */
/* help page 																		*/
/* ================================================================================ */

	div#contentleft.help ol {margin-bottom:1em;}
	
	h4 {margin-top:			1em;}
	
	p.callToAction {
		background-color:	#f3f4f8;
		margin-top:			.75em;
		border:				1px solid #e7d9ed;
		padding:			.5em;}



/* ================================================================================ */
/* terms page 																		*/
/* ================================================================================ */

	div#contentleft.terms h2 {}
	div#contentleft.terms p, 
	div#contentleft.terms p a {
		font-size:			10px;
		line-height:		15px;}



/* ================================================================================ */
/* about page 																		*/
/* ================================================================================ */

	div#contentleft.about h2 {
		margin-top:			2em; 
		margin-bottom:		1em;}
	
	div#contentleft.about h3 {
		margin-top:			0em;
		margin-bottom:		.5em; 
		border:				0px solid;
		line-height: 		normal;}

	div#contentleft.about ul {margin-bottom: 8px;}

	div#contentleft.about p.callToAction {margin-bottom:2em;}



/* ================================================================================ */
/* Tool tip system																	*/
/* ================================================================================ */

	span.tip {
		background-color:	#eef0f4; }
	
	div#tipDiv {
		position:			absolute; 
		visibility:			hidden; 
		left:				0; 
		top:				0; 
		z-index:			10000;
		width:				240px; 
		background-color:	#F9F9FF; 
		border:				1px solid #0033FF; 
		padding-top:		6px; 
		padding-right:		4px; 
		padding-bottom:		10px; 
		padding-left:		10px; 
		font-size:			11px; 
		line-height:		1.3;
		color:				#000; }
	
	div#tipDiv div.img {
		text-align:			left; }
	
	div#tipDiv div.txt {
		text-align:			left; 
		margin-top:			0px; }
	
	/* for when the tooltip only displays text */
	div#tipDiv div.otxt {
		text-align:			left;
		margin-top:			-4px; }
	
	div#tipDiv .alt {
		text-align:			center; 
		color:				#336; 
		font-weight:		bolder;
		font-style:			italic; }



/* ================================================================================ */
/* end of styles																	*/
/* ================================================================================ */