/* Reset.css from http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
/* modifications: removed reseting of outline property. The default outline styles greatly benefit accessibility. */html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}body{line-height:1;color:black;background:white;}ol,ul{list-style:none;}table{border-collapse:separate;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}
/* end Reset.css */ 

body {
  background-color: #fff;
  color: #252525;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 12px;
  line-height: 18px;
}

/* elements ====================================== */
a:link, .affiliate h2 a:visited { color: #006E9D; }
a:visited { color: #002846; }
a:hover, a:active, a:focus { color: #EB7E35; }

h1 {
  color: #002846;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: bold;
  line-height: 34px;
  margin-top: 25px;
}
h2, h3 {
  font-size: 14px;
  font-weight: bold;
  line-height: 18px;
  margin: 20px 0 14px;
}
p, ul, ol, dl { margin: 14px 0; }

ul, ol {}
ol { list-style: decimal; padding-left: 46px; }
ul li { background: url("/images/layout-images/bullets.png") no-repeat -580px 4px; padding-left: 16px; }
li ul { margin-top: 0; }
/*#content_main h2 + ul { margin-top: -12px; }*/

em { font-style: italic; }
strong { color: #3e3e3e; font-weight: bold; }
sup { position: relative; top: -3px; vertical-align: top; font-size: 80%; }


h1 sup {font-size:30%;}
p.subhead sup {font-size:50%;}

/* helper styles ====================================== */
.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.subhead,
.product #content_main h2.subhead {
  color: #636363;
  display: block;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: bold;
  line-height: normal;
  margin-top: 5px;
}
.img_left { 
  float: left; 
  margin: 3px 12px 6px 0; 
}
.skiplink, 
.hide {
  left: -999em;
  position: absolute; 
  top: 0;
}
.col_left {
  float: left;
  width: 49%;
}
.col_right {
  float: right;
  width: 49%; 
}
.callout {
  clear: both;
  font-size: 14px;
  font-style: italic;
  font-weight: bold;
  margin-left: 60px;
  margin-right: 60px;
  text-align: center;
}
.offer_button {
  text-align: center;
}
strong.highlight {
  font-weight: bold;
}
a.item_more, 
a.more,
a.external,
a.pdf {
  background: url("/images/layout-images/icons.png") no-repeat;
} 
a.item_more {
  background-position: 0 -220px;
  padding-left: 10px;
}
a.more {
  background-position: 100% -170px;
  display: block;
  font-size: 10px;
  font-weight: bold;
  padding-right: 24px;
  padding-bottom: 1px; /*in some browsers the icon was getting cut off at the bottom, this was enough to fix it*/
  text-align: right;
}
a.external {
  background-position: 100% -272px;
  padding-right: 11px;
}
a.pdf {
  background-position: 100% -323px;
  padding-right: 14px;
}


/* page structure ====================================== */
#container {
  margin: 0 auto;
  width: 918px;  
}
#header {
  border-top: 9px solid #196A95;
}
#content {
  background: #fff url("/images/layout-images/content_bg.png") repeat-y 0 0;
}
#content_main {
  float: left;
  padding-bottom: 20px;
  width: 583px;  
}
#sidebar {
  float: right;
  padding-top: 40px;
  padding-left: 7px;
  padding-right: 8px;
  width: 297px; 
}
#footer {
  /*see ie6.css, trigger haslayout to fix pm logo not lining up correctly*/
  background: #fff url("/images/layout-images/logo_footer.png") no-repeat 16px 19px;
  border-top: 10px solid #196A95;
  clear: both;   
  font-size: 10px;
  line-height: normal;
}

/* componenets ====================================== */

/*forms ====================================== */
div.form_wrap {
  border: 1px solid #c2c2c2;  
  margin-bottom: 20px;
  width: 335px;
}
div.form {
  background-color: #f4f4f4;
  border: 5px solid #fff;  
  padding: 12px;  
}
.form div, 
.form fieldset {
  margin-bottom: 8px;
}
label, 
legend { 
  display: block;
  font-weight: bold; 
}
.form input,
.form select,
.form textarea {
  border: 1px solid #999999;
}
.form label, 
.form legend {
font-weight: normal;
color: #252525;
font-size:10px; 
}
#ContactUsFormUserControls1_subject, 
#ContactUsFormUserControls1_programName {width:132px;}

#submitbtn {
  margin-bottom: 0;
  margin-top: 20px;
}
.formErrors {
  color: red;
  display: block;
}
.formErrors strong {
  color: red;
}
.formErrors ul {
  margin-top:0;
}
.formErrors li {
  background: none;
  list-style-type: disc;
  padding-left: 0;
  margin-left: 20px;
}
#login .formErrors {
  color: #FCF1B8;
}

/* contact us form */
#contact_form {
  margin-left: 138px; 
  position: relative; /*to position the "secure server" badge*/
  width: 346px;
}
a#secure_badge {
  display: block;
  position: absolute;
  top: -1px;
  right: -1px;
}
fieldset#contact_info {
  background-color: #e5f5fe;
  display: block;
  margin: -12px -12px 12px -12px;
  padding: 14px 12px 4px 12px;
  width: 311px;
}
#contact_form div.group { 
  margin: 0; 
}
#contact_form input, 
#contact_form textarea { width: 98%; }
#contact_form #ContactUsFormUserControls1_city { width:138px; }
#contact_form #ContactUsFormUserControls1_state { width:70px; }
#contact_form #ContactUsFormUserControls1_zip { width:65px; }
#contact_form #ContactUsFormUserControls1_memberID { width:131px; }
#contact_form #ContactUsFormUserControls1_ph1, 
#contact_form #ContactUsFormUserControls1_ph2 { width: 30px; }
#contact_form #ContactUsFormUserControls1_ph3 { width: 40px; }

/*Using progressibe enhancement (via CSS3 selectors) to float the city, state and zip boxes side by side. In IE6 the boxes will not be floated, but instead stacked on top of each other. Not as pretty, but still quite functional. */
#contact_form div.group > div { 
  float: left; 
}
#contact_form #city + #state {
  padding: 0 12px;
}
#contact_form #state + #zipcode {
  float: right;
}

#contact_form div.formErrors {
  padding: 10px 0;
}

/* header components -----------------------------------------*/
/*for header, there is an image in the markup. This image is a lo-fi black and white version of the logo. It is for printing or people with inferior devices. Part of the following css is to cover the lofi image with a hifi full colored version of the logo. */
#header_logo {
  float: left;
  margin: 14px 0 0 13px;
  width: 250px;
}
#header_logo img {
  display: block;
  width: 0;
}
#header_logo span {
  background: #fff url("/images/layout-images/logo.png") no-repeat 0 0;
  display: block;
  height: 53px;
  width: 250px; 
}
#header_logo a {
  display: block;
  outline: none;
}

/* login box */
#login { 
  /*see ie6.css for fix for login box not overlapping #headers top border*/
  background: url("/images/layout-images/login_bg.png") no-repeat left bottom;  
  float: right;
  font-size: 11px;
  margin-top: -9px;
  padding: 12px 14px 8px 14px;  
  width: 285px;
}
#login, #login a:link, #login a:visited { color: #fff; }
#login a:hover, #login a:active, #login a:focus { text-decoration: none; }

/*In the markup, you'll notice that the form fields are wrapped in a div and the submit button sits outside that div. This was done to get around an IE issue. In all other browsers, the log in button correctly floated in the upper right. In IE6 and 7, the button floated to the lower right. Therefore, the extra div, #login_fields, is used to contain all the fields and float them as a whole to the left.*/
#login_fields {
  float: left;
  width: 232px;
}
#login_fields div {
  float: left;
  margin-right: 6px;
  position: relative; /*to position the label over the text box*/
  width: 110px; /*this width is needed or in FF3 and safari, if js is turned off, the login button will jump to the bottom*/
}
#login_fields label {
  font-weight: normal;
}
#login_fields input.text {
  /*see ie6.css and ie7.css for fix for IE seemingly adding more space beneath the text fields*/
  border: 1px solid #ccc;
  padding: 2px;
  margin-bottom: 8px;
  width: 97px;
}
#rememberMe input {
  margin: 0;
  vertical-align: middle;
}
.js label.overlabel {
  /*positions the label over the text box (when js is on) */
  color: #002846;
  font-size: 11px;
  left: 5px;
  position: absolute;
  top: 1px;
  z-index: 1;
}

/* main navigation */
#nav_main_wrap {
    border-bottom: 13px solid #323131;
}
ul#nav_main {
  clear: both;
  height: 29px; /*needed since anchors are floated*/
  left: 569px; /* was 465px; */
  margin: 6px 0 0 0;
  overflow:hidden; /*this prevents menu text from poking out the bottom of the navigation if a person has their font-size bumped up quite a bit*/
  padding: 0;  
  position: relative; /*to offset the navigation bar to appear on the right*/
  width: 349px; /* was 554px; */
}
#nav_main li {
  background: none;
  display: block;
  float: left;
  padding: 0;  
}
#nav_main a {  
  /* see ie6.css, fix cursor displaying as a hand instead of pointer*/
  display: block;
  height: 29px;
  outline: none;
  position: relative;
}
#nav_main span {
  background: url("/images/layout-images/nav.png") no-repeat 0 0;
  position: absolute;
  height: 100%;
  width: 100%;
}
#m1 a { width: 158px; }
#m1 a:hover span, #m1 a:focus span, .pm123 #m1 a span { background-position: 0 -29px; }
#m2 a { width: 104px; }
#m2 a span { background-position: -158px 0; }
#m2 a:hover span, #m2 a:focus span, .pmi #m2 a span { background-position: -158px -29px; }
#m3 a { width: 101px; }
#m3 a span { background-position: -262px 0; }
#m3 a:hover span, #m3 a:focus span, .fsr #m3 a span { background-position: -262px -29px; }
#m4 a { width: 116px; }
#m4 a span { background-position: -363px 0; }
#m4 a:hover span, #m4 a:focus span, .learningcenter #m4 a span { background-position: -363px -29px; }
#m5 a { width: 75px; }
#m5 a span { background-position: -479px 0; }
#m5 a:hover span, #m5 a:focus span { background-position: -479px -29px; }

/* footer components ----------------------------------------- */
#footer, #footer a { 
  color: #636363; 
}
#footer a:hover, #footer a:active, #footer a:focus { 
  color: #EB7E35; 
}

#footer_siteinfo { /*wrapper for about, links and security logo boxes*/
  border-bottom: 6px solid #E1E1E1;
  font-size: 12px;
  padding: 15px 0 15px 240px;  
}
#footer_siteinfo div {  
  border-left: 2px solid #E1E1E1;
  float: left;
}
#footer_siteinfo div.siteinfo {  
  padding: 4px 6px 4px 18px;
  width: 216px;
}
#footer_siteinfo div.security {
  text-align: center;
  width: 191px;  
}
#verisign, #mcafee, #trustwave, #truste {
  border: none !important;
  margin: 20px 0;
  width: 191px;
}

#verisign  {height: 72px;}
#mcafee    {height: 54px;}
#trustwave {height: 54px;}
#truste    {height: 35px;}

div.siteinfo h3 {
  background-color: #E1E1E1;
  color: #636363;
  font-size: 14px;
  font-family: /*"Myriad Pro", */Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight: normal;
  margin: 0 0 0 -14px;
  padding: 1px 14px;
}
div.siteinfo ul {
  margin-bottom: 0;
}
div.siteinfo li {
  background-position: 0 2px;
  padding-bottom: 6px;
}

/* page components ----------------------------------------- */

/* breadcrumbs */
#breadcrumb {
  margin: 9px 0 25px 0;
}
#breadcrumb a:visited { 
  color: #006E9D; 
}
#breadcrumb a:hover, #breadcrumb a:active, #breadcrumb a:focus { 
  color: #EB7E35; 
}

/* bookmark, print and top links */
ul.page_actions {
  background-color: #E1F5FE; 
  margin: 20px 0;
  padding: 4px 8px 0 8px;
  text-align: right; 
}
ul.page_actions_bottom {
  background-color: #fff;  
  margin-bottom: 0;
}
ul.page_actions li {
  background: none;
  display: inline; 
  margin-left: 8px; 
  padding: 0;
}

/* footnotes */
#footnotes {
  background-color: #f7f7f7;
  border-bottom: 1px solid #CCCCCC;
  border-top: 1px solid #CCCCCC;
  font-size: 10px;
  margin-top: 24px;
  padding: 1em;
}
#footnotes h2 {
  font-size: 12px;
  margin-top: 0;
  margin-bottom: -12px;
}
#footnotes ol {
  margin-bottom: 0;
  padding-left: 20px;
}

/* hero offer */
/* this section is the very basic styles used to set up the hero component. See override section for customizations made for each product page and the home page*/
#content_hero { 
  background-color: #fff;
  border: 10px solid #323131;
  border-top: none;
  padding: 8px;
  position: relative;
}
#content_hero .offer {
  margin: 0;
}
#content_hero .offer img {
  display: block;
}
#content_hero .button {
  bottom: 18px;  
  margin: 0;
  position: absolute;
  right: 25px;
}

/* features list, used on product pages and homepage */
/*see ie6.css, trigger haslayout to fix #product_benefits_list top margin issues*/
#product_benefits_list li {
  margin: 17px 0;
}
#product_benefits_list li.last {
  background-image: none;
}
#product_benefits_list span {
  font-weight: bold;
}
/* the following styles related to #product_benefits_list are only relevant if javascript is on*/
#product_benefits_list .li_container ul {
  /*margin-collapsing doesn't happen when the columns are floated so negative margins are used to remove the extra spacing*/
  margin-top: -14px; 
  margin-bottom: -17px;
}
#product_benefits_list .li_cont1 {
  /*add gutter between columns*/
  margin-right: 15px;
}

/* little boxes you find in the sidebar and on the homepage. These form the basic styles for the boxes. */
.box {
  background: url("/images/layout-images/box_default_bg.png") no-repeat 0 100%;
  border: 1px solid #323131;
  line-height: 15px;
  padding: 0 8px 6px 8px;
  width: 274px; /*292*/
}
.box p, .box h3, .box ul {
  font-size: 12px;
  margin: 0;
}
.box h3 {
  background: #0165b6 url("/images/layout-images/box_default_header_bg.png") repeat-x 0 0;
  color: #fff;
  font-size: 14px; 
  margin: 0 -8px 9px -8px;
  min-height: 21px;
  padding: 7px;
  position: relative;
  text-align: center;   
}
.box h3 span {
/* This element isn't actually used to style anything. It's for sIFR. The pmi and fsr boxes, when displayed on the homepage, feature a "new offer" image. When sIFR replaces the text this image disappears. The fix was to move the text into a span and instruct sIFR to replace ".box h2 span" instead of ".box h2". The only drawback is that because not all browsers understand the :not selector, I couldn't do something like ".box h2:not(:has(span))" which would of allowed me to target the h2 with and without the span. So, all ".box h2" elements get the extra span.*/
}
.box .more {
  margin-top: 12px;
}

/* customized boxes */
/* product boxes */
.product_box_wrap { /*adds the little drop shadow graphic to the boxes in the sidebar */
  background: transparent url("/images/layout-images/product_box_shadow.png") no-repeat 0 0;
  padding-left: 5px;
  width: 292px; /*297*/
}
div.product_box {
  padding-bottom: 45px;
  position: relative; /*to position the "try it free" button*/
}
div.product_box .btn {
  bottom: 6px;
  position: absolute;
  right: 12px;
}
#pm123_product_box {
  background-image: url("/images/layout-images/product_box_pm123_bg.png");
}
#pm123_product_box h3 { /*uses default*/ }
#pmi_product_box {
  background-image: url("/images/layout-images/product_box_pmi_bg.png");
}
#pmi_product_box h3 {
  background-color: #018100;
  background-image: url("/images/layout-images/product_box_pmi_header_bg.png");
}
#pmi_product_box h3 img {
  left: 0;
  position: absolute;
  top: 0;
}
#fsr_product_box {
  background-image: url("/images/layout-images/product_box_fsr_bg.png");
}
#fsr_product_box h3 {
  background-color: #f05a00;
  background-image: url("/images/layout-images/product_box_fsr_header_bg.png");
}
/* calculators list */
#nav_calculators.box {
  background: #fff;
  border: 1px solid #555555;
  width: 274px; /*292*/
}
#nav_calculators h3 {
  background-color: #373737;
  background-image: url("/images/layout-images/box_secondary_header_bg.png"); 
}
#nav_calculators li {
  background-position: -2916px 2px;
  padding-left: 12px;
}
#nav_calculators a {
  font-size: 10px;
}
#nav_calculators div {
  background-image: url("/images/layout-images/box_icons.png");
  background-repeat: no-repeat;
  margin: 12px 0;
  padding-left: 58px;
}
div#auto_calculators { 
  background-position: 14px 5px;
}
div#creditcard_calculators {
  background-position: -277px 6px;  
}
div#mortgage_calculators {
  background-position: -570px 6px;
}
/* valuable resources box*/
#resources_box li {
  background-image: url("/images/layout-images/box_icons.png");
  margin: 8px 0;
  padding-left: 34px;
}
#resources_box li a {
  font-weight: bold;
}
li#estimator {  
  background-position: -871px 2px; 
}
li#debt_analysis {
  background-position: -1167px 3px;  
}
/* article boxes */
div.article_box {
  background-image: url("/images/layout-images/box_secondary_bg.png");
  padding-bottom: 12px; 
}
div.article_box h3 {
  background-color: #373737;
  background-image: url("/images/layout-images/box_secondary_header_bg.png");
}
.article_box li {
  background-position: 0 5px;
  padding-top: 2px;
  padding-bottom: 2px;
}
.article_box a:link, .article_box .more:visited {
  color: #555;
}
.article_box a.more:hover, .article_box a.more:active, .article_box a.more:focus { 
  color: #EB7E35; 
}
.article_box a.more { 
  background-position: 100% -374px;
}

/* view report box (on home page) */
#sample_report_box h3 {
  background-color: #373737;
  background-image: url("/images/layout-images/box_secondary_header_bg.png");  
}

/* explanation component. intro text on calculator and learning center pages */
#explanation {
  background-repeat: no-repeat;
  background-position: 0 15px;
  padding-top: 1px; /*stop margin collasping. avoids some ie issues*/
  padding-bottom: 1px; /*stop margin collasping. avoids some ie issues*/
  margin-top: -14px; /*because we are not collapsing margins, we use negative margins to compensate for the extra spacing created */
}
/* overrides to change the image on each page*/
/* NOTE: when setting min-heights, always add 14px to it. This compensates for the negative margin applied to #explanation*/
/* NOTE: anywhere a min-height is set, see ie6.css for the min-height fix*/
.learningcenter #explanation {
  min-height: 109px;
  padding-left: 117px;
}
/*.lc_start #explanation {
  background-image: url("/images/layout-images/chalkboard.png");
  min-height: 139px;
  padding-left: 123px;
}*/
.lc_pm123 #explanation { 
  background-image: url("/images/layout-images/chalkboard_pm123.png");
}
.lc_pmi #explanation {
  background-image: url("/images/layout-images/chalkboard_pm-identity.png");
}
.lc_fsr #explanation {
  background-image: url("/images/layout-images/chalkboard_family-safety-report.png");
}
.calculator #explanation {
  min-height: 131px;
  padding-left: 110px
}
.calc_auto #explanation {
  background-image: url("/images/layout-images/calc_auto.png");
}
.calc_creditcard #explanation {
  background-image: url("/images/layout-images/calc_creditcard.png");
}
.calc_mortgage #explanation {
  background-image: url("/images/layout-images/calc_mortgage.png");
}
.calc_creditscore #explanation {
  background-image: url("/images/layout-images/calc_estimator.png");
}
.contact #explanation {
  background-image: url("/images/layout-images/contactus.jpg");  
  min-height: 143px;
  padding-left: 138px;  
}

/* Home page components ----------------------------------------- */

#alert {
	width: 300px; 
	float: right; 
	font-size: 9px; 
	color: #f00; 
	border: 1px solid #F90; 
	background: #ffc;
	margin: 6px 7px; 
	padding: 5px 9px 7px 9px; 
	line-height: 13px;
}
/* #offers is the three boxes beneath the hero offer */
#offers {
  /* in ie6.css, the bottom padding appears larger. see ie6.css for fix*/
  clear: both;
  border-top:4px solid #D9D9D9;
  padding: 12px 0;
}
#offers .box {
  float: left;
  margin: 0 10px;
}
#offers .new {
  left: 0;
  position: absolute;
  top: 0;
}
#offers #fsr_product_box {
  margin: 0 21px;/*sets up the spacing between the 3 boxes*/
}
#offer_boxes {
  margin: 0 auto;
  overflow: hidden;
  width: 624px;
}
/* side tools */
#sidebar_tools {
  background: url("/images/layout-images/sidebar_tools_bg.png") no-repeat 0 100%;
  float: right;
  width: 291px;   
  margin-top: 36px;
  padding: 12px 10px 12px;
  position: relative; /*to position the top portion of the box*/
}
#sidebar_tools_top {
  /*this item is a seperate div and absolutely positioned so it sits over the header.*/
  background: url("/images/layout-images/sidebar_tools_bg.png") no-repeat 0 0;
  height: 21px;
  position: absolute;
  top: 0;
  left: 0;
  width: 311px; 
}
.welcome #sidebar_tools .box {
  width: 276px; /*had to change the width because the borders were dropped*/
}

/* Learning Center components ----------------------------------------- */
/* products list within content area of Learning Center page */
#alt_product_list {
  padding-top: 85px;
  position: relative;
}
#alt_product_list li {
  background: none;  
  margin: 12px 0;
  padding-left: 3px;  
}
#alt_product_list span {
  background-color: #e0e0e0;
  display: block;
  font-weight: bold;
  font-style: italic;  
  padding: 3px 6px;
  width: 24em;
}
#alt_product_list p {
  background-color: #f4f4f4;
  margin: 0;
  padding: 6px 15px;
}
#alt_product_list li.pm123 {
  border-left: 4px solid #0072bc;
}
#alt_product_list li.pm123 span {
  color: #0072bc;
}
#alt_product_list li.pmi {
  border-left: 4px solid #0d8704;
}
#alt_product_list li.pmi span {
  color: #0d8704;
}
#alt_product_list li.fsr {
  border-left: 4px solid #e05100;
}
#alt_product_list li.fsr span {
  color: #e05100;
}
#alt_product_list li.map { 
  background: #fff url("/images/layout-images/learning_center_map.png") no-repeat 0 0;
  height: 60px;
  left: 0;
  margin: 0 0 0 196px;
  padding-left: 0;
  position: absolute;
  text-indent: -999em;
  top: 10px;
  width: 150px;
}
li.map a {
  /*see ie6.css for fix when images dissapear when user hovers mouse over anchor*/
  background-image: url("/images/layout-images/learning_center_map.png");
  display: block;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 104px;
}
li.map #map1 {
  background-position: -46px -60px;
  left: 46px;
}
li.map #map1:hover {
  background-position: -46px -120px;
}
li.map #map2 {
  background-position: -217px -60px;
  left: 217px;
}
li.map #map2:hover {
  background-position: -217px -120px;
}
li.map #map3 {
  background-position: -404px -60px;
  left: 404px;  
}
li.map #map3:hover {
  background-position: -404px -120px;
}

/* privacy & security and press room boxes */
#more_resources p, 
#more_resources ul {
  padding-left: 60px;
  padding-right: 10px;  
}
#protection_links p {
  background: url("/images/layout-images/box_icons.png") no-repeat -1454px 2px;
}
#press_room p {
  background: url("/images/layout-images/box_icons.png") no-repeat -1746px 4px;
}

/* header above each list of articles */
#article_list h2 {
  background-color: #ededed;
  color: #6e6e6e;
  font-size: 13px;
  padding: 1px 6px;
  text-align: center;
}
#article_list .col_left,
#article_list .col_right {
  width: 47%;
}

/* about page components ----------------------------------------- */
ul#product_list {}
#product_list li {
  /*see ie6.css, trigger haslayout to fix product logos not positioning correctly*/
  background: none;
  margin: 28px 0;
  padding-left: 167px;
  position: relative; /*to absolutely position the logos*/
}
#product_list img {
  position: absolute;
  left: 0;
  top: 2px;
}

/* calculator page components ----------------------------------------- */
#calculator {
  text-align: center;
}
body.calculator #calculator {
  border-top: 2px solid #d9d9d9;
  margin-top: 20px;
  padding-top: 25px;
}

/* product page components ----------------------------------------- */
img#bureau_logos {
  display: block;
  margin: 17px auto 27px auto;
}

/*the three boxes in the middle of the identity theft and family safety pages*/
ul#product_benefits {
  clear: both;
}
#product_benefits li {
  background: none;
  float: left;
  padding: 0 10px 10px 10px;  
}
.li_container li {
  line-height: 16px;
}
#product_benefits h3 {
  /*see ie6.css for min-height fix*/
  margin: 0 -10px;
  min-height: 22px; 
  padding: 10px;
  position: relative; /*for image/replacement*/
}
#product_benefits h3 span {
  /*using gilder/levin image replacement method*/
  /*in ie6, right side of the image gets cut off. see ie6.css for fix*/
  background-repeat: no-repeat; /*background-image set in overrides*/
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;  
  width: 100%; 
}
#product_benefits p {
  margin: 0;
}
/* overrides for the identity theft page middle 3 boxes in the main content*/
.pmi #product_benefits li {
  background: #efefef url("/images/layout-images/pmi_product_benefits_bg.png") no-repeat 0 100%;
  margin-left: 15px;
  width: 164px; /*184*/
}
.pmi #product_benefits h3 span {
  background-image: url("/images/layout-images/pmi_product_benefits_headers.png");
}
.pmi #product_benefits #b1 {
  margin-left: 0;
}
.pmi #b2 h3 span {
  background-position: -197px 0;
}
.pmi #b3 h3 span {
  background-position: -395px 0;
}
/* overrides for the family safety page middle bar with three columns in the main content*/
.fsr #product_benefits {
  background: #efefef url("/images/layout-images/fsr_product_benefits_bg.png") no-repeat 0 100%;
  width: 582px; /*need to shrink the box by one pixel because the width of three boxes equaled 582, not 583*/
}
.fsr #product_benefits li {
  width: 174px; /*194*/
}
.fsr #product_benefits h3 span {
  background-image: url("/images/layout-images/fsr_product_benefits_headers.png");
}
.fsr #b2 h3 {
  margin-left: -10px;
  width:174px;
}
.fsr #b2 h3 span {
  background-position: -194px 0;
}
.fsr #b3 span {
  background-position: -389px 0;
}

/*special offers page ----------------------------------------- */
div.affiliate { 
  float: left;
  background: #fff url("/images/layout-images/special_offers_icons.png") no-repeat 6px 6px;
  margin: 12px 0 12px -6px; 
  padding: 6px 6px 6px 76px;
  width: 205px;
}
div.affiliate.alt {
  margin-left: 14px;
}
.affiliate h2 a {
  font-size:16px; 
  text-decoration:none; 
}
.affiliate * {
  line-height: normal;
  margin: 0; 
}
#ao1 { background-position: -295px -592px; }
#ao2 { background-position: 6px 9px; }
#ao3 { background-position: -292px 6px; }
#ao4 { background-position: 7px -292px; }
#ao5 { background-position: -294px -291px; }
#ao6 { background-position: 7px -590px; }

/* facebox tweaks ----------------------------------------- */
a[rel="security"] img:hover,
a[rel$="sample_report"] img:hover {
  opacity: .7;  
}
#facebox h1 {
  margin-top: 0;
}
#facebox a.leave_popup {
  bottom: 24px;
  font-size: 10px;
  left: 20px;
  position: absolute;
}
#facebox .security {
  height: 300px;
  overflow: auto;
  padding-right: 5px;
  width: 500px;
}
#facebox .sample_report {
  height: 400px;
  overflow: auto;
  width: 555px; /*default to width of pm123 sample report +25px*/
}
#facebox .sample_report h1 {
  margin-bottom: 25px;
}
#facebox .pmi_sample_report {
  width: 812px; /*width of image +25px*/
}
#facebox .fsr_sample_report {
  width: 812px; /*width of image +25px*/
}


/* overrides ====================================== */
.single #content {
  background: none;
}
.single #content_main {
  width: 100%;
}

#sidebar .box {
  margin: 0 0 30px auto;  
}

/* learning center pages */
.lc_start #content_main h2 {
  background-color: #767676;
  color: #fff;
  font-size: 13px;
  padding: 4px 6px;
}

/* product pages */
.product #content_main h2 {
  font-size: 16px; /*22px;*/
}

/* pm123 product page */
.pm123 h1 {
  color: #002846;
}
.pm123 #content_main h2,
.pm123 #product_benefits_list span,
.pm123 .highlight {
  color: #005b85;
  font-weight: bold;
}

/* pmi product page */
.pmi h1 {
  color: #135400;
}
.pmi #content_main h2,
.pmi #content_main h3,
.pmi #product_benefits_list span,
.pmi .highlight {
  color: #2b6800;
}
.pmi #product_benefits_list li {
  background-position: -1749px 4px;
}
.pmi #product_benefits {
  margin-top: 22px; /*stylistic tweak because the sample report image extends past the two paragraphs a tad making it look like the thumbnail is on top of the view, monitor and restore boxes*/
}

/* fsr product page */
.fsr h1 {
  color: #ab2b00;
}
.fsr #content_main h2,
.fsr #content_main h3,
.fsr #product_benefits_list span,
.fsr .highlight {
  color: #c73a00;
}
.fsr #product_benefits_list li {
  background-position: -1166px 4px;
}

/* welcome page */
.welcome #content {
  background: none;
}
.welcome #content_main { 
  margin-top: 30px;
}
.welcome #content_hero a { 
  /*see ie6.css for min-height fix*/
  background-color: #bdedfe; 
  background-image: url("/images/layout-images/welcome_hero_bg.jpg"); 
  display: block;
  padding: 132px 0 0;
  min-height: 130px;
  text-decoration: none;
}
.welcome #content_hero .offer {
  padding: 26px 0 18px 313px;
}
.welcome #content_hero .button {
  bottom: 71px;
}
.welcome #content_hero ul {
  margin: 0;
  padding-left: 313px;
  padding-right: 280px;
}
.welcome #content_hero li {
  background-position: -3497px 3px;
  color: #013453;
  line-height: normal;
  padding-bottom: 12px;
}
.welcome #content_hero strong {
  color: #013453; 
}
.welcome #content_main h2,
.welcome #product_benefits_list span,
.welcome .highlight {
  color: #005b85;
}
.welcome #explanation {
  /* see ie6.css for min-height fix*/
  border-bottom: 4px solid #d9d9d9;
  margin-top: 0;
  min-height: 135px;
  padding: 0;  
}
.welcome #explanation p {
  padding-left: 150px;    
}
.welcome #explanation img {
  margin-left: -150px;
  margin-top: -10px;
}
.welcome #sidebar_tools .box {
  background: none;
  border: none;  
  margin: 0;  
}
.welcome #nav_calculators h3 {
  background-color: #0165B6;
  background-image: url(/images/layout-images/box_default_header_bg.png);  
}
.welcome #footnotes {
  background:none;
  border:none;
  margin-top:14px;
  padding:0;
}