/* ============================================================================== */
/* 360Telecommunications Style sheet 											  */
/* May/June 2006 																  */
/* Authored for 360Telecommunications by Rick Ligas/PantheonDesign.com			  */
/* ============================================================================== */




/* ============================================================================== */
/* 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 (also called content pages)
		form pages 
		suppliers pages
		portal pages
		help page 
		
	Tool tip system 
*/
/* ============================================================================== */




/* ============================================================================== */
/* Setup */
/* ============================================================================== */
* {
	margin:			0;
	/* border:			none; removed - spoils form fields in FF - RL */
	padding:		0;
	font-family:	Verdana, Arial, Helvetica, sans-serif;
	font-size:		12px;}
	/* notice 12px set on font-size.... 
		get used to pixels, old school alignment. ;-) rl */

a img {border:none;} 
	/* removes the default image border some browsers display. Note that this rule
		has a specificity of 0,0,0,2. If you actually want a border you will need 
		to write a rule with at least that much specificity. */



/* ================================================================================ */
/* 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 {
	/* 	this keeps the page centered when the browser window is wide,  */
	/* 	and gives it a small margin all around */
	width:			882px;
	padding:		1em;
	margin-left:	auto;
	margin-right:	auto;}

	#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);}


/* 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);}

#logolink {
	/* this is in this section because it appears on every page */
	/* it is what makes the "logo" clickable */
	/* there is a special version for the home page because of the banner size */
	float:			left;
	width:			330px;
	height:			46px;
	cursor:			pointer;}

#logolinkhomepage {
	float:			left;
	width:			330px;
	height:			62px;
	cursor:			pointer;}

#banner {
	/* 	banner is only used on 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);}

#contentwrapper {
	/* this is only used on the homepage. Content pages have their own wrapper */
	width:			882px;}

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

#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);}

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:	0px;
	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 */
	#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;}

a:visited {
	text-decoration:	none;}

a:focus {
	text-decoration:	underline;}
	
a:hover {
	text-decoration:	underline;}
	
a:active {
	text-decoration:	underline;}





/* main links (upper right) - text with graphic backgrounds ug. rl */

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

#navigation ul {
	float: 				right;
	clear: 				both;
	/* 	width: 			100%; */
	margin-top:			23px;
	/* 	note that the home page overrides this. it needs the nav in a different
		vertical position. So, if you are playing with this to move the navigation
		vertically, and you are wondering why it won't move. You might be trying
		to adjust the homepage with this setting ;-) rl */
	/* note also that Safari needs 24px but we are ignoring that */
	margin-right:		0px;
	margin-bottom:		0px;
	margin-left:		0px;
	padding:			0px;}
	
#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-color:	#fff;
	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-color:	#fff;
	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-color:	#fff;
	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-color:	#fff;
	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-color:		#fff;
	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 help 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-color:		#fff;
	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:			#ADD3FA;
	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																*/
/* ================================================================================ */




/* ================================================================================ */
/* begin specific page styles.														*/
/* ================================================================================ */

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

.helptag {
	cursor:				help;
	color:				#3B81C9;}


/* ================================================================================ */
/* home page 																*/
/* ================================================================================ */

#banner p {
	margin-right:	15px;
	padding-top:	100px;
	text-align:		right;
	font-weight:	bold;
	font-size:		16px;}
	
#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;}

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%;}

.divlette_small {
	/* the divlette is 166px tall counting the header, body and footer */
	/* header =  23px tall */
	/* body   = 115px tall */
	/* footer =  28px tall */
	float:				left;
	width:				130px;
	margin-top:			0px;
	margin-right:		4px;}
	
.divlette_small h3 {
	/* the graphic background is 23px tall */
	background-image: 	url(divlette_small_head.jpg);
	background-repeat: 	no-repeat;
	height:				23px;
	padding-top:		6px;
	padding-right:		12px;
	font-size:			12px;
	font-weight:		bold;
	text-align:			right;
	vertical-align:		middle}
	
.divlette_small p {
	/* 	total height must be 115px */
	background-image: 	url(divlette_small_body.jpg);
	background-repeat: 	repeat-y;
	height:				97px;
	padding:			6px 12px 12px 12px;
	text-align:			left;
	font-size:			11px;
	font-weight:		normal;
	line-height:		16px;
	color:				#666; }
	
.divlette_small h4 {
	/* 	total height must be 28 */
	height:				28px;
	margin:				0px;
	/* 	h4's have a margin on other pages ;-) rl */}




/* ================================================================================ */
/* Article pages, also called content pages. 										*/
/* ================================================================================ */


#contentwrapperarticlepage {
	overflow:			auto;
	width:				882px;
	margin-bottom:		14px;	/* 25px from bottom of this container to first baseline in the footer */
	background-image:	url(contentpagebackground.jpg);
	background-repeat:	no-repeat;}

#contentwrapperarticlepage h1 {
	background:			#fff;
	margin-right: 		20px;
	/* 	the above 2 tweaks hide just enough of the gray underline. 
		The intent was to let the page authors manage this page by page 
		by overriding it in a style block in every page. */
	margin-left: 		110px;
	padding-top:		3px;
	font-size:			18px;}

#contentwrapperarticlepage h2 {
	line-height:		1.5em;}

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

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

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

#articleindex {
	font-weight:		bold;}

.articleindexgrey {
	color:				#666;}
	
p.articleindexlist {
	line-height:		1.5em;}
	
#articlebottomnav {
	margin-top:			.25em;
	margin-bottom:		2em;}
	
/* 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, content pages */
	float:				left;
	width:				219px;
	height:				298px;
	background-image:	url(contentrightarticlepage.jpg);
	background-repeat:	no-repeat;
	margin-top:			18px;}
	
.divlette_contentpageright {
	float:				left;
	background-image: 	url(divlette_article_right_background.jpg);
	background-repeat: 	no-repeat;
	width:				219px;
	height:				229px;
	margin-right:		1em; }

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

#contentrightarticlepage p {
	margin-right:		14px;
	margin-left:		22px;
	line-height:		21px;
	}

#contentrightarticlepage p img {
	float:				right;}




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

#contentwrapperformpage {
	width:				882px;
	margin-bottom:		12px;
	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: 		450px;
	/* 	the above 2 tweaks hide just enough of the gray underline. 
		Note that each content based page can override the margin-right
		to show a precise amount of the gray line and to
		prevent the title from wrapping. */
	margin-left: 		110px;
	padding-top:		3px;
	font-size:			18px;}

#contentwrapperformpage h1 span.TheTheme {
	font-size:			18px;}
	
/* The formpageheader without an image. */
#divlette_formpageheader {
	background-image: 	url(divlette_formpage.jpg);
	background-repeat: 	no-repeat;
	width:				556px;
	height:				134px;
	margin-top:			24px;
	margin-left:		106px;
	padding-top:		8px;
	padding-left:		19px;}

#divlette_formpageheader h2, 
#divlette_formpageheader h2 span.TheTheme {
	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:				544px; /* this is actually wider than the image */
	height:				154px;
	margin-top:			24px;
	margin-left:		106px;
	padding-top:		8px;
	padding-left:		19px;}

#FormPageHeaderImgLeft h2,
#FormPageHeaderImgLeft h2 span.TheTheme {
	font-size:			16px;
	font-weight:		bold;}

#FormPageHeaderImgLeft ul {
	margin-top:			7px;
	margin-left:		130px;
	line-height:		22px;}

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

#FormPageHeaderImgLeft p {
	margin-top:			8px;
	margin-right:		20px;
	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. */
	
.VoIP {
	background-image: 	url(FormpageheaderVoIPLeft.jpg);
	background-repeat: 	no-repeat;}

.Integrated {
	background-image: 	url(FormpageheaderIntegratedLeft.jpg);
	background-repeat: 	no-repeat;}
	
.Dedicated {
	background-image: 	url(FormpageheaderDedicatedLeft.jpg);
	background-repeat: 	no-repeat;}
	
.Internet {
	background-image: 	url(FormpageheaderInternetLeft.jpg);
	background-repeat: 	no-repeat;}
	
.Conferencing {
	background-image: 	url(FormpageheaderConferencingLeft.jpg);
	background-repeat: 	no-repeat;}

.VoIPSystems {
	background-image: 	url(Formpageheader-VoIP-systems.jpg);
	background-repeat: 	no-repeat;}

.VoIPSystems2 {
	background-image: 	url(Formpageheader-VoIP-systems2.jpg);
	background-repeat: 	no-repeat;}

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

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

#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:		17px;}



	/* the following naming convention for selectors is an experiement attempting  
		to avoid some of the complexities of the the descendent selectors RL */

	.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 {
		/* this sets a zip code single line text box when used on a services page
			it inherits formatting from txtOther above. Both are applied. The id is 
			automatically set by George on a txtZipCode input. */
			width:354px;
		margin-left:		3px;}
		
	.formatradiobuttons {
		margin-top:			-10px;
		margin-left:		60px;
		margin-bottom:		1em;
		line-height:		24px;}

	/* adjust the radio buttons so they are properly aligned vertically with the label
	   most browsers get their own mini tweaks. */
	.formatradiobuttons			{position: relative;}
	.formatradiobuttons input	{
		position: 			relative; 
		top: 				2px;
		/* get some standoff from the radio button and its text */
		margin-right:		4px; }

	.txtNoRadios {
		/* this sets an "other" single line text box when used after a list of radios */
		width:				241px;
		padding:			3px;
		border:				1px solid #9DBFE4;}
		
	.numberinput {
		width:				3em;
		padding:			3px;
		border:				1px solid #9DBFE4;}

	.noteToVisitor {
		/* This formats the gray text displayed below answers */
		margin-left:		60px;
		color:				#999;}

#contentwrapperformpage form p textarea {
	width:				360px;
	height:				60px;
	margin-top:			6px;
	zzzmargin-left:		78px;	/* conflicts with #contentwrapperformpage form p.additionalcomments textarea */
	border:				1px solid #7F9DB9;}

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

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

div.onScreenHelpUnderInput {
	/*	Formats the help text under an input like the zip code on page 1 of the forms.
		Do you like the name? It's pretty descriptive... RL */
	margin-top:			-.75em;
	margin-left:		2px;
	color:				#999;}

#contentwrapperformpage form div.formattextbox input {
	width:				180px;
	margin-bottom:		8px;
	border:				1px solid #7F9DB9;}

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

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

div.onScreenHelpUnderInput {
	/*	formats the help text under an input like the zip code on page 1 of the forms.
		Like the name? It's pretty descriptive... RL */
	margin-top:			-3px;
	margin-left:		2px;
	color:				#999;
	line-height:		1.25em;}

div.onScreenHelpUnderInputPage2 {
	/*	Does the same as the rule above but on page 2 of the forms. RL */
	margin-top:			3px;
	margin-left:		0px;
	color:				#999;
	line-height:		1.25em;}

#contentwrapperformpage form p.additionalcomments textarea {
	width:				360px;
	height:				60px;
	margin-left:		63px;
	border:				1px solid #9DBFE4;}

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


/* 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:-90px;font-weight:normal;color:#3b81c9;}

/* 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:-90px;font-weight:normal;color:#3b81c9}

/* Form page right sidebar  */
#contentrightformpage {
	float:				right;
	width:				208px;
	margin-top:			210px;
	margin-right:		1px;}


/* Form 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;}

/* tweak the little table that helps layout the 2nd form page */

#wrapperforformpage2 table {
	border-collapse:	collapse;}

.formpage2column1 {
	width:				120px;}

.formpage2column2 {}

#wrapperforformpage2 td {
	padding:			2px;}

#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 very careful with your 
		aspx understanding. 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 select {
	/* tweaked to be as wide as the zip code input */
	width:				142px;}

#contentwrapperformpage form  #wrapperforformpage2 input.zip {
	width:				134px;
	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;}

#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;}

div.onScreenHelpUnderInputPage2 {
	/*	Does the same as the similar rule for page 1 of the forms.
		Page 2 needs some minor adjustments. RL */
	margin-top:			3px;
	margin-left:		0px;
	color:				#999;
	line-height:		1.25em;}

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


/* 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:224px; 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:#0033FF;}

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

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


/* ================================================================================ */
/* 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 pages																	*/
/* ================================================================================ */

td.suppliersignupheader {
	font-weight:		bold;}

td.suppliersignupcheckboxes {
	line-height:		1.5em;}




/* ================================================================================ */
/* Portal pages 																	*/
/* ================================================================================ */
/* Note that these two are currently clones of classes for article pages... rl		*/

#contentwrapperportalepage {
	width:				882px;
	background-image:	url(contentpagebackground.jpg);
	background-repeat:	no-repeat;
	}

#contentwrapperportalepage h1 {
	background:			#fff;
	margin-right: 		635px;
	/* 	the above 2 tweaks hide just enough of the gray underline. 
		Note that each content based page can override the margin-right
		to show a precise amount of the gray line and to
		prevent the title from wrapping. There must be a better way. */
	margin-left: 		110px;
	padding-top:		3px;
	font-size:			18px;}

#portalwrapper {
	margin-left:		103px;}




/* ================================================================================ */
/* 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 6px ;
		line-height:	24px;}

	div#contentwrapperarticlepage div.thankYouPageSidebar p span {color: white;}
	div.thankYouPageSidebar .contactEmail {font-size:9px;}


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

h4 {
	margin-top:			1em;}



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

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


/* ================================================================================ */
/* 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:	#fff; 
	border:				1px solid #7F9DB9; 
	padding-top:		6px; 
	padding-right:		8px; 
	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; }


.black 
{
	color: #333333; font-family: Verdana; font-size: 10px;
}

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