/******************************************************************************/
/******************************************************************************
File: yellowbook_common.css
Comments: Common classes, IDs and elements needed throughout the site.

Notes: We have set the default font to 62.5% which is equal to 10px.  to increase
by 1px JUST CHANGE THE EM NUMBER.  EXAMPLES BELOW:
1em == 10px
1.1em == 11px
1.2em == 12px
1.3em == 13px                    
This is scalable and accessible and works in IE6, IE7 and FireFox 1.5+

DO NOT USE  TO SET A PX FONT SIZE...EVER.  IT IS NOT NEEDED.  
*******************************************************************************/

/***RESET STYLESHEET NEEDED ONLY IN THIS FILE**********************************/
/*@import 'reset.css';*/
/***GLOBAL ELEMENTS************************************************************/
html, body
{
	background: #1a1a1a;
	color: #1a1a1a;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.7em;
}


textarea
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
}
h1
{
	font-size: 2.5em;
}

h2
{
	font-size: 1.7em;
	line-height: normal;
	padding: 0 0 7px 0;
}

h3
{
	font-size: 1.3em;
	line-height: normal;
	padding: 7px 0 2px 0;
}

h3.sub
{
	font-size: 1.1em;
	padding: 0 0 1px 0;
	font-weight: bold;
}
h4
{
	font-size: 1.4em;
	padding: 7px 0 2px 0;
}

h5
{
	font-size: .7em;
}

h6
{
	font-size: .5em;
}

p
{
	padding: 5px 0;
}

a
{
	text-decoration: none;
}



legend
{
	font-weight: bold;
}
ol
{
	list-style-type: decimal;
}
ol li
{
	margin: 0 0 7px 20px;
}
.readOnly
{
	display: block;
	height: 0px;
	overflow: hidden;
}
.indicator
{
	color: #f00;
}
.note
{
	font-size: .9em;
	font-style: italic;
}
.brandColor
{
	color: #d6af01;
	font-weight: bold;
}
.brandColor2
{
	color: #d6af01;
	font-weight: bold;
}
.align
{
	float: left;
	width: 25%;
}
.alignLeft
{
	float: left;
}
.alignRight
{
	float: right;
}
.footnote
{
	padding: 10px 0 0 0;
	font-size: .8em;
}
#frame
{
	background: #e2c400 url(/images/common/container_background.jpg) left top repeat-x;
	margin: 0 auto;
	width: 800px;
}


/***BRANDING ELEMENTS**********************************************************/
#branding
{
	background: transparent url(/images/common/branding_header_background.jpg) left top no-repeat;
	height: 77px;
	width: 100%;
}
#branding a
{
	color: #2b2b2b;
	font-size: .9em;
}
#branding a#logo
{
	background: transparent url(/images/common/yellowbook_logo.jpg) 20px 25px no-repeat;
	display: block;
	float: left;
	height: 82px;
	text-indent: -9999px;
	width: 350px;
	_padding-bottom: 5px;
}
#branding ul#zero_navigation
{
	float: right;
	padding: 0 0 45px 0;
	width: 300px;
}
#branding ul#zero_navigation li
{
	float: left;
	padding: 0 0 0 10px;
}
#branding ul#zero_navigation li a
{
	padding: 0 10px 0 0;
}
#branding ul#main_navigation
{
	float: right;
	width: 410px;
}
#branding ul#main_navigation li
{
	display: inline;
	padding: 2px 3px 0 3px;
}
#branding ul#main_navigation li a
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: .9em;
	text-transform: uppercase;
}
#branding ul#main_navigation li a:hover, #branding ul#main_navigation li a.selected
{
	border-top: 2px solid #e2c400;
	color: #e2c400;
}
/***CONTAINER AND CONTENT ELEMENTS*********************************************/
#container
{
	margin: 0 auto;
	width: 775px;
}
#message h1.about, #message h1.careers, #message h1.products, #message h1.faqs, #message h1.advisory, #message h1.generic
{
	text-indent: -9999px;
	width: 800px;
	height: 123px;
	display: block;
	background: transparent url(/images/common/headers_aboutyb.jpg) left top no-repeat;
}
#message h1.careers
{
	background: transparent url(/images/common/headers_careers.jpg) left top no-repeat;
}
#message h1.products
{
	background: transparent url(/images/common/headers_ybproducts.jpg) left top no-repeat;
}
#message h1.generic
{
	background: transparent url(/images/common/header_generic_tc.jpg) left top no-repeat;
}
#message h1.faqs
{
	background: transparent url(/images/common/headers_faqs.jpg) left top no-repeat;
}

#message h1.advisory
{
	background: transparent url(/images/common/headers_ybadvisorycouncil.jpg) left top no-repeat;
}
.two_column #section_information, .three_column #section_information
{
	background: #838784 url(/images/common/two_column_header.jpg) left top no-repeat;
	color: #fff;
	font-size: .9em;
	padding: 4px 11px;
	height: 16px;
	text-transform: uppercase;
}
#content_text_block
{
	padding: 7px 15px 7px 20px;
}
#secondary_content
{
	float: left;
	width: 149px;
}
/***THREE COLUMN CONTENT ELEMENTS**********************************************/
.three_column #section_information
{
	background: transparent url(/images/common/three_column_header.jpg) left top no-repeat;
}
.three_column #content
{
	margin: 0 auto;
	background: transparent url(/images/common/three_column_background.jpg) left top repeat-y;
}
.three_column #major_content
{
	float: left;
	width: 497px;
	margin: 5px 0 20px 0;
}
.three_column #tertiary_content
{
	float: right;
	width: 121px;
	text-align: right;
}
ul#smallCallouts
{
	background: transparent url(/images/common/inner_three_col_back_small.jpg) center top repeat-y;
	border-top: 1px solid #cfd2cd;
	border-bottom: 1px solid #cfd2cd;
	width: 467px;
}
ul#smallCallouts li
{
	float: left;
	width: 155px;
}
.element_heading
{
	padding: 5px 0 0 12px;
}
ul#smallCallouts li h3, ul#smallCallouts li a
{
	padding: 10px 15px;
}

ul#smallCallouts li p
{
	/*height: 180px;*/
	padding: 2px 15px 5px 15px;
}
ul#smallCallouts li.second
{
	padding: 0 1px;
}
ul#two_feature_cols
{
	background: transparent url(/images/common/inner_two-three_col_back.jpg) left top repeat-y;
	border-top: 1px solid #cfd2cd;
	border-bottom: 1px solid #cfd2cd;
	width: 466px;
}
ul#two_feature_cols li
{
	float: left;
	width: 232px;
}
/***TWO COLUMN CONTENT ELEMENTS************************************************/
.two_column #content
{
	background: #fff url(/images/common/two_column_background.jpg) left top repeat-y;
}
.two_column #major_content
{
	float: left;
	width: 618px;
	margin: 1px 0 20px 0;
}
.two_column #tertiary_content
{
	display: none;
}
ul#largeCallouts
{
	background: transparent url(/images/common/inner_three_col_background.jpg) left top repeat-y;
	border-bottom: 1px solid #cfd2cd;
	width: 626px;
}
ul#largeCallouts li
{
	float: left;
	padding: 0 0 5px 0;
}
ul#largeCallouts li a, ul#largeCallouts li h3
{
	/*font-size: 1.3em;*/
	padding: 10px 15px;
}
ul#largeCallouts li p
{
	height: 60px;
	padding: 2px 15px;
}
ul#largeCallouts li.first
{
	width: 209px;
}
ul#largeCallouts li.second
{
	padding: 0 0 5px 2px;
	width: 211px;
}
ul#largeCallouts li.third
{
	width: 204px;
}
ul#largeCallouts.productLandingPage li p
{
	height: 110px;
}
/***SECONDARY AND TERTIARY NAVIGATIONAL ELEMENTS*******************************/
ul#secondary_navigation
{
	background: #fff;
	border-top: 2px solid #e2c400;
	text-transform: uppercase;
	width: 147px;
}
ul#secondary_navigation li a
{
	background: #fff;
	border-bottom: 1px solid #ccc;
	color: #292929;
	display: block;
	font-size: .9em;
	padding: 10px 2px 10px 11px;
	background: transparent url(/images/common/down_arrow.gif) 130px 85% no-repeat;
}
ul#secondary_navigation li a:hover
{
	background: #fbfdcc url(/images/common/down_arrow.gif) 130px 85% no-repeat;
}
ul#secondary_navigation li ul
{
	margin: 0 auto;
	width: 125px;
	text-transform: none;
}
ul#secondary_navigation li ul li a
{
	background: transparent url(/images/common/ltr_arrow.gif) center left no-repeat;
}
ul#secondary_navigation li ul li a:hover
{
	background: #fbfdcc url(/images/common/ltr_arrow.gif) center left no-repeat;
}
ul#secondary_navigation li ul li ul li a
{
	margin: 0 0 0 11px;
}

a.selected
{
	font-weight: bold;
}

/***SITE INFO AND COPYRIGHT ELEMENTS*******************************************/
#siteInfo, #copyrightInformation
{
	background: #242424;
	color: #878787;
	padding: 10px 0;
	font-size: .9em;
	margin: 0 auto;
}
#copyrightInformation
{
	background: #1a1a1a;
}
#siteInfo ul
{
	padding: 0 10px 0 11px;
}
#siteInfo ul li
{
	display: inline;
	line-height: 1.9em;
}
#siteInfo ul li a
{
	color: #878787;
	padding: 0 4px 0 4px;
}

#siteInfo ul li a:hover
{
	color: #878787;
	padding: 0 4px 0 4px;
	text-decoration: underline;
}

#siteInfo ul li a.selected
{
	font-weight: bold;
	text-decoration: underline;
}
#copyrightInformation
{
	padding: 7px 27px;
	width: 746px;
	margin: 0 auto;
}
/***FORM ELEMENTS**************************************************************/
p.form_elements, fieldset.form_elements
{
	float: left;
	padding: 5px 0;
	display: block;
	width: 450px;
	_width: 400px;
}
p.form_elements label
{
	width: 150px;
	display: block;
	padding: 2px;
	float: left;
}
p.form_elements input, p.form_elements select
{
	float: left;
	width: 200px;
}
p.form_elements select
{
	width: 205px;
}
p.form_elements label.comments
{
	/*width: 450px;*/
}
#frm_comments
{
	width: 200px;
}
#frm_orderDirectorySubmit
{
	width: auto;
}
fieldset.form_elements
{
	margin: 15px 0;
	width: 460px;
}
.validation-advice
{
	display: block;
	clear: left;
	color: #f00;
	padding: 5px 0;
	width: 350px;
}
.validation-passed
{
	background: #fff;
	border: 1px solid #18b304;
	padding: 2px 2px 2px 0;
}
.validation-failed
{
	background: #fffe9e;
	border: 1px solid #f00;
	padding: 2px 2px 2px 0;
	width: 350px;
}
/***DID YOU KNOW ELEMENTS******************************************************/
#didYouKnow, #didYouKnowStatic
{
	border: 1px solid #cfd2cd;
	background: #fbfce7;
	padding: 0 10px 10px 10px;
	width: 445px;
	height: 175px;
}
#didYouKnow ul, #didYouKnowStatic ul
{
	text-align: right;
	border-top: 4px solid #d6af01;
}
#didYouKnow ul li, #didYouKnowStatic ul li
{
	display: inline;
}
#didYouKnow p, #didYouKnowStatic p
{
	padding: 5px 9px;
}

div.comm_sb_cont {
	color:#555;
	float:left;
	font-size:11px;
	margin:20px 0 4px 0;
	width:150px;
	text-align:center;
	}

div.comm_sb_cont_wide {
	color:#555;
	float:left;
	font-size:11px;
	margin:20px 0 4px 0;
	width:205px;
	text-align:center;
	}

div.comm_sb_cont a, div.comm_sb_cont_wide a {
	display:block;
	color:#333;
	font-size:11px;
	text-decoration:none;
	padding:0 22px;
	}



/**
 * Ad samples (/products/print/ad_samples..) 
 */
/*
div#ad_main {
	float: left;
	border: solid 1px #000;
	width: 100%;
	padding: 0px;
}



.adRollover_selected {
	background-color: #FFD700;
}

div#ad_img {
	float: left;
	width: 65%;
}

div#img img#ad {
	border: solid 1px #F00;
}

div.ad_img_lg_container_hidden {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -50;
	display: none;
}

div.ad_img_lg_container_display {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 50;
	display: block;
	padding:50px;
	background-color: #FFF;
	border: solid 2px #000;
	text-align:center;
}
*/
div#ad_main
{
	float: left;
	border: solid 1px #000;
	width: 100%;
	padding: 0px;
}
.adRollover_selected
{
	background-color: #FFD700;
}

div#ad_img
{
	float: left;
	width: 65%;
}

div#img img#ad
{
	border: solid 1px #F00;
}

div.ad_img_lg_container_hidden
{
	position: absolute;
	width: 50%;
	z-index: -50;
	display: none;
}

div.ad_img_lg_container_display
{
	position: absolute;
	top: 0;
	width: 50%;
	z-index: 50;
	display: block;
	background-color: #FFF;
	border: solid 2px #000;
	text-align: center;
}


h1.faq
{
	font-size: 1.6em;
	line-height: normal;
	padding: 0 0 7px 0;
}

td.productButton
{
	vertical-align: middle;
}


div.contactUs
{
	margin-top: 20px;
	border: 1px solid #A1A1A1;
	border-top: 3px solid #E2C400;
	padding: 0px 10px 10px 10px;
	clear: both;
}
div.contactUs h3, div.contactUs h3 a
{
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	font-size: 13px;
	font-weight: bold;
	color: #000000;
}

div.contactUs p
{
	margin-top: -4px;
	margin-bottom: 10px;
}
div.contactUs p a.goto:link {padding:0 10px 3px 7px; margin:0; border:1px solid #ffffff;}
div.contactUs p a.goto:hover {padding:0 10px 3px 7px; margin:0; border:1px solid #d5af02; }

div.contactUs div.imageRunner
{
	float: left;
	width: 36px;
	padding-top: 10px;
}

