@charset "utf-8";
/* CSS Document */

/*
The Golden Ratio (GR)
---------------------
Art etc looks best to the human eye when things are proportioned using the Golden Ratio.
see: http://en.wikipedia.org/wiki/Golden_ratio
Value: 1.6180339887 ...
As a percent: 100/GR = 61.80339887
Notice, the interesting play on the numbers when using the ratio.
Thus, if our width is 770, then the ratio would give us a content width of: 770 * .618033 = 476px.
The current design doesn't use this ratio.

Color Scheme
------------
#Hex (Similar color name)
#D1D7DB (Light Gray) - Body Background bleed, light borders between content
#2D5046 (Dark gray) - solid bkgrnd color for tabs; text color for normal text on white bkgrnd
#96A7A2 (Light Gray2) - Page Title text color; right header bkgrnd for normal pages w/o anything in the left header

#8C551B (Green) - Links in text
#EB5A32 (Orange) - Link hover color; when in text, this is the hover text color; when in a tab, this is the tab bkgrnd color on hover.

#8C551B - Buyer solid bkgrnd
#B4B178 - Supplier solid-bkgrnd

#C5C4C4 - Border color for TextBox form fields

#F7EE80 - Confirmation message boxes background

#C2C4A9 - Right Bleed for top header buttons
#6F8682 - Left Bleed from header separator
#B3BFBE - Right Bleed from header separator

-- Exceptions
#94612B - Header Home/Benifits/Company/Contact link/menu text color
#B4AF6E - default link color for Brand_Message.
#95A6A1 - text color for definition of Buyer and Supplier on the left
#C6AA8D - Home Page - Border around Buyer Benifits
#C7C59A - Home Page - Border around Supplier Benifits

*/


body { background: #d1d7db; color: #2d5046; margin: 0px; font: normal 11px Arial, sans-serif; line-height: 14px; }
img { border: 0px none; }
a { text-decoration: none; color: #8c551b; }
a:hover, a.sfhover { color:#eb5a32; text-decoration: none; cursor:pointer;}

hr { background-color:#d1d7db; height: 5px; color:#d1d7db; margin-right: -3px; border: none; margin-top: 5px; margin-bottom: 10px; clear: both; width: 493px; float:right;}

/*
Lets make sure that we don't use a FORM element to facilitate layout.
Also, setting margin to 0px prevents the FORM element from using more space
when the form validators show up; I don't understand why it happens only on the Contact Us page.
*/
FORM { margin: 0px; padding: 0px; }

ul
{
	/*border: 1px solid red;*/
	padding-left: 16px;
	display: inline-block;
	list-style-position: outside;
	list-style-image: url(/img/t3_bullet.gif);
}
ul li { padding-left: 3px; }
ul.LinkList { list-style-image: url(/img/arrow_orange.gif); }

ol
{
	/*border: 1px solid red;*/
	padding-left: 20px;
	display: inline-block;
	list-style-position: outside;
	list-style-type: decimal;
}


#container { width: 770px; position: relative; margin: 0px auto; z-index: 5;}

#header { width: 770px; height: 90px; float: left; margin: 0px auto; background: #fff; }
	#logo { width: 770px; height: 23px; float: left; margin: 0px; padding: 10px 0px 0px 40px; }
	
#brand_canvas { width: 770px; height: 250px; float: left; margin: 0px auto; background: #fff; }
	#brand_message { width: 217px; height: 210px; float: left; margin: 0px 10px 0px 0px; padding: 20px 18px; background: #2d5046; color: #fff; }
		#brand_message h2 { margin: 0px; font-weight: normal; font-size: 17px; line-height: 21px; }
		#brand_message a { float: right; padding-top: 5px; font-weight: bold; font-size: 12px; color: #b4af6e; }
		#brand_message a:hover, #brand_message a.sfhover { color:#eb5a32; }
	#home_flash { width: 507px; height: 250px; float: left; }

#subpage_top{ width: 770px; height: 130px; float: left; margin: 0px auto; background: #fff; }
	#top_img { width: 765px; height:130px; margin:0px; float: left;}
	
	#definition {width:210px; float:left; padding:5px; margin-left:10px; color:#95a6a1; font-size:12px; text-align:left;}
	
	#t3_top {width: 770px; height: 30px; float: left; margin: 0px auto; background: #ffffff; }
		#t3_lheader { height:25px; width:265px; background-color:#2d5046; float:left; }
		#t3_rheader_buyer{ height:25px; width:500px; background-color:#8c551b; float:right;}
		#t3_rheader_supplier{ height:25px; width:500px; background-color:#b4b178; float:right;}
		#t3_rheader_other{ height:25px; width:500px; background-color:#96a7a2; float:right;}
		
#home_body { width: 770px; min-height: 240px; float: left; margin: 0px auto; background: #ffffff; }
	#resources { width: 253px; float: left; height: 65px;}
	.documents
	{
		margin-left: 10px;
		margin-top: 10px;
		min-height: 108px;
		height: 102px;
		border-bottom: 4px solid #d1d7db;
	}
		.documents DIV.document
		{
			min-height: 51px;
			height: 51px;
			padding-bottom: 3px;
		}
		.documents DIV.document .header{ font-weight: bold; text-transform:uppercase; }
	#benefits{ width: 507px; float: right;  margin-top: 10px; margin-bottom: 20px;}
		#benefits h3 { letter-spacing:1px; line-height: 5px;}
		#benefits p { color:#ffffff; font-size:11px;}
		#benefits_left { background-color:#8c551b; width: 220px; min-height: 110px; float: left; padding:10px; padding-top: 0px; padding-bottom: 0px; margin-right: 10px; border: 1px solid #c6aa8d; }
		#benefits_left:hover, #benefits_left.sfhover { background-color: #eb5a32; text-decoration:none;}
			#benefits_left h3 { color: #b4b178; text-transform:uppercase; font-size: 11px; }
			#benefits_left:hover h3, #benefits_left.sfhover h3 { color: #2d5046; }
		#benefits_right { background-color:#b4b178; width: 220px; min-height: 110px; float: right; padding:10px; padding-top: 0px; padding-bottom: 0px;margin-right: 10px; border: solid 1px #c7c59a;}
			#benefits_right:hover, #benefits_left.sfhover { background-color: #eb5a32; text-decoration:none;}
			#benefits_right h3 { color: #8c551b; text-transform:uppercase; font-size: 11px;}
			#benefits_right:hover h3, #benefits_right.sfhover h3{ color: #2d5046; }
			
#portal_body { width: 770px; float: left; margin: 0px auto; background: #ffffff; }
	#portal_navhead { font-size:11px; line-height:12.5px;}
	#mini_title{ font-size:10px; font-weight:bold; text-transform:uppercase;}
	#content{ width: 490px; float: right;  margin: -3px 2px 20px 5px; line-height: 21px; }
		/* TODO: Make the id="content" default to the subcontent styles and make the first paragraph the special exception style */
		#content p { color:#2d5046; font-size:17px; padding-right: 20px;}
		#portal_subcontent p { color:#2d5046; font-size:11px; line-height:normal; padding: 0px 0px 10px 0px; margin:0px;}
	#t3_content{ width: 490px; float: right;  float: right;  margin: -3px 2px 20px 0px; min-height: 200px;}
		#t3_content p { padding-right: 20px;}
		#t3_content ul { margin-right: 20px; }
		#t3_content ol { margin-right: 20px; }
		#t3_content h3 { color:#96a7a2; text-transform:uppercase; font-size:11px; letter-spacing:1.5px;}
		#t3_content h4 { color:#2d5046; font-size:16px;}
	#content_text { width: 235px; float: left; margin: 0px; }
		#content_text p{ padding-right: 0px;}
	#subnav { width: 220px; float: right; margin: -7px 10px 0px 5px; padding: 5px 0px 0px 0px; }
	#footernav { width:770px; margin-bottom: 20px; margin-top: 30px; clear:both; float: right; text-align:center; vertical-align:text-bottom; font-size:10px; color:#95a6a1; }
		#footernav a { color:#95a6a1;}
		#footernav a:hover, #footernav a.sfhover { color:#eb5a32; text-decoration: none;}

/*Header bleeds for the different pages */	
#hdr_bleed { width: 50%; height: 26px; position: absolute; top: 0px; right: 0px; background: #c2c4a9; z-index: 0; }
#home_bleed { width: 100%; height: 250px; position: absolute; top: 90px; left: 0px; background: #6f8682; z-index: 0; }

#t2_left_bleed { width: 50%; height: 125px; position: absolute; top: 90px; left: 0px; background: #6f8682; z-index: 0; }
#t2_right_buyer_bleed { width: 50%; height: 125px; position: absolute; top: 90px; right: 0px; background: #a88968; z-index: 0; }
#t2_right_supplier_bleed { width: 50%; height: 125px; position: absolute; top: 90px; right: 0px; background: #c2c4a9; z-index: 0; }
#t2_right_other_bleed{ width: 50%; height: 125px; position: absolute; top: 90px; right: 0px; background: #b3bfbe; z-index: 0; }

#t3_left_bleed { width: 50%; height: 25px; position: absolute; top: 90px; left: 0px; background: #6f8682; z-index: 0; }
#t3_right_buyer_bleed { width: 50%; height: 25px; position: absolute; top: 90px; right: 0px; background: #a88968; z-index: 0; }
#t3_right_supplier_bleed { width: 50%; height: 25px; position: absolute; top: 90px; right: 0px; background: #c2c4a9; z-index: 0; }
#t3_right_other_bleed { width: 50%; height: 25px; position: absolute; top: 90px; right: 0px; background: #b3bfbe; z-index: 0; }

/*Left Navigation Styles */
#left_nav { width: 253px; float: left; min-height: 100px;}
	#left_nav li:hover a, #left_nav li a.sfhover{ text-decoration: none; color:#ffffff;}
		#left_nav ul { float:left; text-indent: 0px; margin-left:-16px; }
		#left_nav a { min-width:245px; min-height:27px; }
		#lnav_click {width:245px; height:27px; }
		#left_nav li { font-weight: bold; font-size:10px; margin-top: 5px; height: 20px; width:245px; list-style:none; vertical-align: middle; padding-left:16px; text-transform:uppercase; letter-spacing:1px; padding-top:7px;}
			li.lnav_on{ background:url(/img/lnav_company_on.gif) no-repeat; color:#ffffff; }
			#left_nav li.lnav_on a {color: #ffffff;}
			li.lnav_off{ background:url(/img/lnav_company_off.gif) no-repeat; color:#ffffff; }
			#left_nav li.lnav_off a {color: #ffffff;}
			li.lnav_buyer{ background:url(/img/lnav_buyer.gif) no-repeat; color:#b4b178;}
			a.lnav_buyer { color:#b4b178; min-width:245px; min-height:27px;}
			li.lnav_supplier{ background:url(/img/lnav_supplier.gif) no-repeat; color:#8c551b;}
			a.lnav_supplier{ color:#8c551b; min-width:245px; min-height:27px;}
			#left_nav li.lnav_buyer:hover,#left_nav li.lnav_supplier:hover,#left_nav li.lnav_off:hover, #left_nav li.lnav_off.sfhover { background:url(/img/lnav_orange.gif) no-repeat; text-decoration:none; color:#ffffff;}

/* Top Navigation Dropdown styles */
	#topnav_buttons { width: 770px; height: 26px; float: left; text-align: right; }
	#menu, #menu ul { padding: 0px; list-style: none; width: 770px; float: right; margin: 0px; text-align: left; margin-top: 10px; letter-spacing: 1px; margin-right:-25px;}
	#menu a { display: block; width: 85px; text-decoration: none; color: #94612b; }
	#menu a:hover, #menu a.sfhover{ color: #eb5a32; }
	#menu li { float: right; min-width: 30px; list-style: none none; display: inline; font-size: 10px; font-weight: bold; text-transform: uppercase; font-weight:bold; line-height: 12px; color: #94612b; margin-right:10px;}
	#menu li ul { padding: 5px; padding-top: 8px; position: absolute; margin-top: 0px; margin-left: 12px; width: 85px; text-align: left; left: -50000px; }
	#menu li ul li {letter-spacing:0px;}
	#menu li ul li a{ border: solid 1px #FFFFFF; background: #2d5046; padding: 5px; color:#ffffff; text-transform:none; width:95px;}
	#menu li ul li a:hover, #menu li ul li a.sfhover{ color: #ffffff; background: #eb5a32; }
	#menu li:hover ul, #menu li.sfhover ul {left: auto;}
	
	/*#contact_form {color:#2d5046; font-size:10px; font-weight:bold; letter-spacing:1px; text-transform: uppercase;}*/
	
	.button {height: 25px; border: 0px none; background-repeat:no-repeat; }
	#m_btnLogin, #m_buttonRegister, #submit, INPUT.submitBtn { background-image:url(/img/btn_submit.gif); width:70px; }
	#clear, INPUT.clearBtn { background-image:url(/img/btn_clear.gif); width:58px; }
	
	#management_image { width: 100px; float:left; padding-top: 14px; padding-bottom: 15px;}
	#management_text { width: 345px; float: right;}
	#management_profile { float: left;  }



DIV.ConfirmationMsg
{
	border: 1px solid #2d5046;
	background-color: #F7EE80;
	padding: 3px 5px;
}
#t3_content DIV.ConfirmationMsg { margin-right: 20px; }

DIV.ErrorMsg
{
	border: 1px solid #2d5046;
	background-color: #F7EE80;
	padding: 3px 5px;
	color: Red;
}
#t3_content DIV.ErrorMsg { margin-right: 20px; }



/* General Form Elements */
TABLE.FormFields
{
	border: none;
	color: #2d5046;
	font-size: 8pt;
	text-transform: none;
	letter-spacing: normal;
}

TABLE.FormFields COL.FldNameCol
{
	/* Provides general layout only; no font stuff */
	white-space: nowrap;
}

SPAN.FldName,
LABEL.FldName
{
	color: #000000;
	font-weight: bold;
	text-transform: none;
}

SPAN.RequiredFld
{
	color: red;
}

SPAN.FldValidationErr
{
	color: red;
}

INPUT.TextBox,
TEXTAREA
{
	border: inset 2px #c5c4c4;
	border-right: none;
	border-bottom: none;
	width: 200px;
}

INPUT.BtnSubmit
{
	/* These are the common styles for our image buttons */
	height: 25px;
	border: 0px none;
	background-repeat: no-repeat;
}

INPUT.BtnSubmit
{
	width: 70px;
	background-image: url(/img/btn_submit.gif);
}