/* Reset.css from http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ */
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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
  /*outline: 0; -- do not zero, outline aids usability*/
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
} 
blockquote, q {
	quotes: none;
}
/*:focus {
  outline: 0; -- not needed since we are not zeroing out the outline above.
}*/
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* end Reset.css */

body {
  background:#FFF url("/DPA/Images/Layout/en/bg.png") repeat-x 0 130px;
  color:#555;
  font-size:14px;
  font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
  line-height:1.4;
}

/* elements ============= */
p, ul, ol, h2, h3 {
  margin:12px 0;
}

a:link, a:visited {
  color:#005cb3;
}
a:hover, a:focus, 
.LeftMenuNotSelected:hover, .LeftMenuNotSelected:focus, 
.LeftMenuSelected:hover, .LeftMenuSelected:focus {
  color:#002A6E;
}

h1, h2 {
 color:#c4002c;
}
h1 {
  font-size:22px;
  line-height:1.2; 
  margin-top: 37px; 
}
h2 {
 font-size: 16px;
 margin-top: 22px;
}
h2 + ul { 
  margin-top:-12px; 
}
ul {
 list-style-type:disc;
 padding-left:1.5em;
}
ol {
 list-style-type:decimal;
 padding-left:2em;
}
sup { position:relative; top:-.5em; font-size:80%; }


/* helper styles ====================================== */
.group:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.skip { position:absolute;left:-999em; }
.c1 { float:left; width:50%; }
.c2 { float:right; width:50%; }
.fl { float:left; }
.fr { float:right; }
img.fl { margin:0 12px 12px 0; }
.box { background-color:#f0f0f0; border:1px solid #cecece; color:#838383; margin:25px 0; padding:0 12px;}
.secondary { font-size:90%; }

table.content td {
  padding:6px;
  text-align:left;
}
table.content th {
  font-weight:bold;
  padding:6px 16px 6px 0;
  text-align:left;
}
table.content tr.alt { /*background-color: #efefef;*/ }
table.content .note {
 display:block;
 font-size:90%;
}
.disclaimer {
  display:block;
  font-size:10px;
  font-style:italic;
  line-height:1.3;
}
div.disclaimer {
  border-top:1px dotted #ccc;
  border-bottom:1px dotted #ccc;  
  margin-top:36px;
}

/*forms common*/
.form div, 
.form fieldset { 
  margin:12px 0; 
}
.form input, 
.form textarea { 
  display:block; 
}
.radio input { 
  display:inline; 
}
.radio label { 
  font-weight:normal; 
}
span.Error, 
div.formErrors {
 color: #CC0000;
 display: block;
 margin-top: 24px;
}
span.Error ul, 
.formErrors ul { 
  margin-top: 0; 
}
div.form span.EmailUpdateSuccess {
 color:#F00;
}

/* page structure ====================================== */
#wrapper {
  background-color:#fff;
  margin:0 auto;
  position:relative; /*positions #nav2*/
  width:901px;
}

#header_wrap {
  background:#FFEEE7 url("../Images/Layout/en/header_bg.png") repeat-x 0 0;
  border-bottom:4px solid #C4002C;
}
#header {
  /*ie6.css, ie7.css, margin-bottom not working*/
  margin:0 auto;
  width:901px;  
}

#main {
  /*ie6.css, ie7.css, haslayout trigger*/
  padding:1px 37px; /*the 1px top and bottom margin is to prevent margin collapsing*/
}
/*the following overrides would make more sense written like, for example, #main.category, but IE6 sucks.*/
#wrapper .welcome {
  padding:0;
}
#wrapper .category {
  /*ie6.css, min-height fix*/
  min-height:587px;
  padding-left:272px;
  position:relative;/*for positioning the sidebar, which only contains the category detail image*/
}
#wrapper .benefit {
  padding-left:255px;
  position:relative;/*for positioning the sidebar, which only contains the benefit logo and detail image*/
}
#wrapper .premium {
  padding-right:280px;
  position:relative;/*for positioning the sidebar, which only contains the premium detail image*/
}
#wrapper .logged_out {
  text-align: center;
  padding:35px 35px 150px 35px;
}
#wrapper .shopping_cart {
  position:relative; /*for positioning the savings calculator*/
}

#main_content {
  float:left;
  margin-right:20px;
  width:630px;
}

#sidenav { 
  float:right;
  margin-bottom:75px;
  width:175px;  
}
#sidenav td {
  padding:2px 0;
}
#sidenav .LeftMenuHeader { /*#sidenav needed to up specificity*/   
  font-weight:bold;
  padding:37px 6px 9px 16px; 
}
.LeftMenuNotSelected {}
.LeftMenuSelected { font-weight:bold; }    
#sidenav a {
  padding:3px 6px;    
  text-decoration:none;  
}
#sidenav a:hover, 
.LeftMenuSelected {
  text-decoration:underline;
}

#sidebar { 
  position:absolute;  
}
.category #sidebar {
  left:8px;
  top:26px;
  width:239px;
}
.benefit #sidebar {
  left:0;
  top:25px;
  width:255px;
}
.premium #sidebar {
  right:22px;
  top:25px;
  width:250px;
}
#sidebar img {
  display:block;
  margin:0 auto;
}

#footer {
  clear:both;
  font-size:12px;
  line-height:1;
  margin:26px 0;
  text-align:center;
}


/* page components ==================================== */
#logo {
  /*ie6.css, double float margin bug fix*/
  display:block;
  float:left;
  margin:6px 0 25px 16px;
}
a#logo span {
  background:url("../Images/Layout/en/logo.png") no-repeat; 
  display:block;
  height:69px;
  width:452px; 
}
#logo img {
  display:block;
}
a#logo img {
  width:0;
}

#nav { 
  clear:both; 
}
#nav a, 
#nav img { 
  display:block; 
}
#nav td {
	vertical-align:bottom;
} 
#nav .palink { /*personal assistant link*/
  background:url("../Images/Layout/en/nav-personal-assistant.png") no-repeat 0 0;
	height:29px;
	margin-left:12px;
	overflow:hidden;/*prevents outline from expanding all the way to the left edge of the browser*/
	text-indent:-9999em;
	width:145px;
}
#nav .palink:hover, .palink:focus, .palink:active {
	background-position:0 -29px;
}

#nav2 { 
  float:right;
  margin-top:10px;
}

#greeting, 
.quick_cart { 
  /*ie6.css, ie7.css, fix where these two elements widths appeared to be halved*/
  /*ie6.css, float double margin fix on #quick_cart*/
  clear:right;
  float:right;
  font-weight:500; /*this appears to only work correctly in FF and Safari4, can live with the other browsers doing full on bolding*/
  line-height:1;
  margin:6px 8px 0 0;
  text-align:right;
}
.quick_cart { 
  background:url("../Images/Layout/en/icon_shoppingcart.png") no-repeat 0 50%;
  margin-top:0;
  padding:14px 0 4px 33px;
}
.quick_cart,
.quick_cart a {
  color:#FF4D0C;  
}
.quick_cart a:focus, 
.quick_cart a:hover {
  color: #8B2907;  
}

#footer p, 
#footer ul, 
#footer li {
  display:inline;
}
#footer a:link, #footer a:visited {
  color:#555;
}
#footer a:hover, #footer a:focus {
  color:#e96a33;
}
#footer ul {
  list-style:none;
  margin-right:14px;
  padding-left:0;
}
#footer li {
  background: url("../Images/Layout/en/red_bullet.gif") no-repeat 0 50%;
  padding-left:14px;
  margin-left:8px;
}
#footer img {
  vertical-align:middle;
}

/*welcome page*/
#hero {
  border-bottom:2px solid #b3b4b4;  
  margin-bottom:5px;
  padding-bottom:2px;
}
#specials { 
  float:left; 
}
#nav_savings { 
  /*i6.css, min-height fix*/
  background-color:#E5E5E5;
  float:right;
  min-height:284px;
  width:227px;
}
#nav_savings h2 {
  background:url("../Images/Layout/en/findnav_header.png") no-repeat 10px 14px;
  height:38px;
  margin:0;
  padding:14px 0 16px 10px;
  text-indent:-999em;
  width:179px;
}
#nav_savings a {
  display: block;
  font-size:12px;
  line-height:1.1;
}
#nav_savings ul,
#nav_savings li {
  list-style:none;
  margin:0;
  padding:0;
}
#nav_savings .item {
  /*ie6.css, ie7.css, haslayout fix*/
  background:#e3e3e3 url("../Images/Layout/en/findnav_item_bg.gif") repeat-x 0 0;
  color:#000;
  padding:4px 0 4px 10px;
  position:relative; /*To help in the anchoring of the ".statusicon" icon image*/
  text-decoration:none;
  width:auto;
}
#nav_savings .item:hover, 
#nav_savings .item:focus, 
#nav_savings .expanded {
  background-position: 0 -24px;
  color:#fff;
}
#nav_savings .subitems {
  /*see ie6.css, ie7.css for haslayout fix*/
  background-color:#fff;
  padding:4px 0;
}
#nav_savings .subitems li {
  float:left;
  width:45%;
}
#nav_savings .subitems a {
  color:#a40f0f;
  padding:2px 0 2px 10px;
  text-decoration:none;
}
#nav_savings .subitems a:hover, 
#nav_savings .subitems a:focus {
  text-decoration:underline;
}
#nav_savings .statusicon { 
  position:absolute;
  right:5px;
  top:5px;
}

.welcome .tile {
  display:inline;
}
.welcome .premiumoffer table,
.welcome .testimonial table {
  display:inline; /*nested tables used in premium control*/   
}
.welcome .xselloffer {
  margin-left:5px;
  margin-right:5px;
}

/*category page*/
#top_vendors {
  list-style:none;
  margin:37px 0;
  padding-left:0;
  text-align:center;
}
#top_vendors li {
  display:inline;
  margin:0 1em;
}
#top_vendors img {
  vertical-align:middle;
}
.benefits_list {
  margin:0 auto;
}
.benefits_list td {
  width:200px;  
}

/*benefit page*/
.benefit strong {
  text-transform:uppercase;
}
.benefit .disclaimer {
  border:none;
  margin-top:0;
}
#benefit_box {
  /*background-color:#f0f0f0;  
  border:1px solid #cecece;
  color:#838383;*/
  line-height:1;
  /*margin:25px 0;*/
  padding:50px 35px;
}
#benefit_savings {
  color:#37a1f3;
  float:left;
  width:280px;
}
#benefit_savings th { 
  font-weight:bold;
  padding-bottom:6px;
  text-align:left;
  text-transform:uppercase;
  width:224px;
}
#benefit_savings td {
  text-align:right;
}
#benefit_savings .redemption {
  color:#838383; 
  line-height: 16px;
  padding-top:35px;
  text-align:left;
}
.redemption span {
  font-weight:bold;
  text-transform:uppercase;
}
#benefit_cart {
  float:right;
  width:185px;
}
#howto_toggle {
  font-weight:bold;
}
#howto_content { 
  border-left:5px solid #ccc;
  margin-top:0;
  padding-left:.5em;
 font-size:11px;
}

/* faq */
.faq_page h2 + p {
 margin-top:-12px;
}
.faq_page .top {
 font-size:80%;
}
#faq_list {
  list-style:none;
  padding-left:0;
}
#faq_list li {
  padding-bottom:12px;
}

/* shopping cart (sidebar) */
#ShoppingCartHead {
  margin-top:-26px;
}
.ShoppingCartControlTitleLayout {
  font-weight:bold;
}
.ShoppingCartControlAddedItems {
  /* the "you placed ... from this page" message*/
  color:#F00;
  font-size:90%;
  padding-top:26px;
}
.ShoppingCartBody {
  margin:12px 0 24px 0;
  width:100%; /*keeps button from dropping down in IE6 and Safari4*/
}
.ShoppingCartBody label {
  display:block;
  font-size:90%;
  margin-bottom:3px;
}
.ShoppingCartBody select {
  float:left; /*floating the dropdown was the only way to get it to line up properly with the add to cart button. We're in a table cell so no need to worry about clearing the float.*/
  margin:2px 6px 0 0;
}
.ShoppingCartFooterLayout {
  /* the "you have a grand total ..." message*/  
  font-size:90%;
  font-weight:bold;
  padding-bottom:12px;
}
.ShoppingCartListHeaderLayout a img {
  margin-left:-4px;
}

/* cancel page */
.cancel_form {
  margin:25px 0 10px 0;
  width:585px; /*the width of the "make your selection below" image*/
}
.cancel_form p {
  text-align: center;
}
.cancel_form img,
.cancel_form input {
  display:block;
  margin:0 auto;
}
.cancel_form table {
  width:585px; /*the width of the "make your selection below" image*/
}
.cancel_form td {
  width:50%;
}
.cancel_form td p {
  /*ie6.css, min-height fix*/
  min-height:97px;
  padding:0 35px;
}
.cancel_form td img {
  margin-top:12px;
  margin-bottom:12px;
}

/* contact us */
table.contact_us_form { 
  margin-left:-6px; 
}
table.contact_us_form th {
  text-align:right;
}
table.contact_us_form .note {
  display:block;
  font-size:90%;
}
table.contact_us_form td b { font-weight:bold; }
.callWrite {
  margin-top:25px;
  width:100%;
}
.lnkHome {
  margin-bottom:150px;
}

/* shopping cart review page */
.shopping_cart h1 {
  margin-bottom:24px;
}
.ShoppingCartList {
  width:600px;	
}
.ShoppingCartList table { 
  margin-left:-8px; /*moves the table over to compensate for the padding given to the table cells*/
}
.ShoppingCartList td {
  padding:3px 8px; /*table is built using backend-code, so I can't attach my special "content" class to it*/
}
.ShoppingCartListHeaderLayout td {
  font-weight:bold;
}
.checkout_actions {
  margin:30px 0 15px 0;
}
.checkout_actions input, .checkout_actions img { vertical-align:middle; }
.checkout_actions input {
  margin-right:25px;
}
.checkout_actions span {
  display:block;
}
.tableSavingsCalculator {
  border: 1px solid #ccc;
  font-size: 12px;
  line-height: 1;
  padding: 6px;
  position: absolute;
  right: 37px;
  top: 40px;
  width: 188px;
}
.tableSavingsCalculator h2 {
  margin-top: 0;
  text-align: center;
}
.tableSavingsCalculator th {
  font-weight:normal;
}
.tableSavingsCalculator .total th,
.tableSavingsCalculator .total td {
  border-top:1px solid #000;
  font-weight:bold;
}
.checkout .disclaimer {
  border-bottom:1px dotted #CCCCCC;
  margin-top:0;
}
.checkout .same_card,
.checkout .new_card {
  margin-left:-8px;     
}
.checkout td.use_other_card {
  padding-top:30px;
}
.checkout td.ccards td {
  padding-left:0;
}
.OESOrderList {
  margin:20px 0 20px -25px;
}
.OESOrderList .ShoppingCartList table { 
  margin-left:0; 
}
.OESOrderList .ShoppingCartList td { 
  border:1px solid #000; 
}
#feedback_btn {
  float:right;
  margin-right:35px;
}

/* feedback */
#submit_feedback {
  margin-top:24px;
}
#submit_feedback input {
  left:-6px;
  /*using position:relative instead of a simple negative left margin because form is unfortunately sitting inside of a table. So in IE7 and below, a negative margin would cause the button to get cut off.*/
  position:relative;
}

/* login page */
.login #main_wrap {
  background:#dbebf5 url("/DPA/Images/Layout/en/login_content_bg.png") repeat-x 0 0;
}
.login #main {
  /*ie6.css, min-height fix*/
  background:url("/DPA/Images/Layout/en/login_splash.jpg") no-repeat center top;
  line-height:1.3;
  margin-left:auto;
  margin-right:auto;
  min-height:520px;
  padding:1px 0 10px 0;
  width:901px;
}
#login_form,
#login_form h2 {
  /*ie6.css, ie6 gets a background image without the drop shadow*/
  background-image:url("/DPA/Images/Layout/en/login_box.png"); 
}
#login_form {
  background-position:0 100%;
  float:right;
  padding:0 49px 31px 49px;
  margin-right:17px;
  text-align:right;
  margin-top:190px;
  width:194px;
}
#login_form h2 {
  background-color:#fff;
  height:82px;
  margin:0 -49px 24px -49px;
  text-align:left;/*needed for text-indent to work*/
  text-indent:-999em;
}
#memberid, 
#zipcode {
  margin-bottom:7px;
}
#memberid label,
#zipcode label {
  font-size:16px;
  margin-right:18px;
}
#submit {
  margin-top:20px;
}
#login_form .Error {
  margin-bottom:24px;
  margin-left:-20px;
  margin-right:-20px;
  text-align:left;
}
#savings {
  float:left;
  margin-left:17px;
  margin-top:86px;
  /*margin-bottom:10px;*/
  width:222px;
}
#savings h2,
#savings p {
  /*ie7.css, bg image on h2 is darker than it should be, bottom shadow on p getting slightly cut off*/
  /*ie6.css, ie6 gets a background image without the drop shadow*/
  background:url("/DPA/Images/Layout/en/login_info_box.png");
  margin:0;
  padding-left:40px;
  padding-right:18px;
}
#savings h2 {
  font-size:14px;
  padding-top:14px;
  padding-bottom:6px;  
}
#savings p {
  background-position:0 100%;
  margin-bottom:-4px;
  padding-top:0;
  padding-bottom:24px;   
}

/*premiums page*/
.premium input { 
  vertical-align:middle; 
}
.premium a.secondary {
  margin-left:15px;
}

/*bonus rewards page*/
.bonusrewards_intro {
  text-align:center;
}
.bonusrewards_intro h1 {
  font-size:24px;
  margin:11px 0 0 0 ;
}
.bonusrewards_intro .subhead {
  font-size:18px;
  margin-top:0;
}
.bonusrewards_intro span {
  color:#c4002c;
  display:block;
  font-size:21px;
}

/*css for bonus rewards section until it is redesigned*/
.MyOfferDetailsOfferValue { color:#FFFFFF; font-size:18px; font-weight:bold; }
.MyOfferDetailsOfferValueSubHead { color:#FFFFFF; font-size:10px; }
.MyOfferDetailsCopy { color:#000000; font-size:11px; margin:0; }
.MyOfferDetailsDisclaimersTD { background-color:#FFFFFF; }
.MyOfferDetailsDisclaimers { color:#000000; font-size:10px; margin:0; }
a.MyOffersHereLink { font-size:10px; text-decoration:none; }
.MyOfferDetailsHead { background-color:#cc0000; }
.DealOfTheMonthOfferPrimaryImage { display:block; }
.MyOfferDetails { background-color:#fff; border:1px solid #000; margin:24px auto; }
.MyOfferDetails td { vertical-align:middle; }
.MyOffersList table { margin:24px auto; position:relative; left:40px; }
.MyOffersList td { padding:6px 2px; vertical-align:middle; }
#Table7 td { padding:10px; }
#Table8 td { padding:5px; }