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;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}:focus{outline:0;}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:"" "";}

body {
 font: 12px/18px "Helvetica Neue", Helvetica, Arial,Verdana, Geneva, Tahoma, sans-serif;
}
p, ul, ol {
 margin: 12px 0;
}
h1 {
 font-size: 18px;
 font-weight: bold;
 line-height: 21px;
 margin: 20px 0;
}
h2 {
 font-size: 16px;
 font-weight: bold;
 margin: 16px 0;
}
ul {
 list-style-type: disc;
 padding-left: 1.5em;
}
ol {
 list-style-type: decimal;
 padding-left: 2em;
}
sup { position: relative; top: -3px; vertical-align: top; font-size: 80%; }

/*the "content" class is used to enable styling of tables within the main content without blowing out all of the layout tables*/
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;*/
}
label { 
  font-weight: bold; 
}
small {
 font-size:7px;
}

#wrapper {
 margin: 0 auto;
 padding-top: 1px; /*prevents margin collapsing between #branding and  #wrapper*/ 
 position: relative; /*so far used on the homepage to absolutely position the login form, also on inner page to position the navs*/
 width: 910px;
}

/* =branding (header) ----- */
#branding {
 background: url("../Images/Layout/en/logo.jpg") no-repeat 0 0;
 height: 89px;
 margin: 33px 0 0 20px;
 text-indent: -999em;
 width: 449px;
}
#branding a { /*category and benefit pages*/
 display: block;
 height: 100%;
 width: 100%;  
}

/* =navigations ----- */
#nav {
 position: absolute; 
 right:5px;
 top: 96px;
} 
#nav2 {
 position: absolute;
 right: 5px;
 top: 20px;
}

/* =main_top (bar above content) ----- */  
#main_top {
 background: #1b4171 url("../Images/Layout/en/main_top_bg.png") repeat-y 0 0;
 border-top: 2px solid #22272d;
 border-bottom: 2px solid #22272d;
 min-height: 30px;
} 

/* =main (main content area) ----- */
#main {
 background: #fff url("../Images/Layout/en/multi_col_bg.gif") repeat-y 0 0;
 min-height: 300px;
 padding: 20px 10px 20px 20px;
 overflow: auto;
}  
#login #main {
  background: none;
  padding: 0;
}
/* The following classes would make the most sense in the form of #main.classname, 
 * but IE6 is stupid and doesn't recognize that #main.welcome has a higher specifiity 
 * than #main. Probably related to IE6's multi-class bug. So, #wrapper is used 
 * in order to properly bump up the specificity of the overrides. Roll over and die IE6.*/
#wrapper .welcome /*#main.welcome*/ {
 background: #fff url("../Images/Layout/en/welcome_splash.jpg") no-repeat 0 0;
 height: 579px; /*619*/
}
#wrapper .shopping_cart {
 background-image: none;
 position: relative; /*position the savings calculator*/
}
#wrapper .checkout {
 background-image: none;
}
#wrapper .logged_out {
 background-image: none;
 min-height: 0; /*reseting min-height*/
 padding: 50px 20px 150px;
}
#wrapper .savings_story {
  background-image: none;
  width: 75%; /*shrink the width so that line-lengths are huge*/
}
  
#main td, #main th {
 vertical-align: top;
}
#main h1 {
 margin-top: 0;
}

/* =sidenav (left navigation, left table cell) ----- */
#sidenav {
 width: 189px;
}
#sidenav td {
 padding: 2px 0;
}
#sidenav td.LeftMenuHeader {      
 font-weight: bold;
 padding: 3px 6px 9px; 
}
.LeftMenuNotSelected {}
.LeftMenuSelected {}    
#sidenav a {
 color: #000;
 padding: 3px 6px;    
 text-decoration: none;  
}
#sidenav a:hover, 
.LeftMenuSelected {
 background-color: #fff;
 text-decoration: underline;
}

/* =main_content (middle table cell) ----- */
#main_content {
 padding: 0 25px 0 35px;  
}
#main.category_page #main_content {    
 width: 375px;
}
#main.benefit_page #main_content { /*no need to define width since we're sadly using a table*/ }

/* =sidebar (right table cell) ----- */  
#main.category_page #sidebar {
 width: 256px; 
}
#main.benefit_page #sidebar {
 width: 174px;
} 

#cartcontent {
  border: 1px solid #1B4171;
  padding: 5px;
}

/* =siteinfo (footer) ----- */
#siteinfo {  
 font-size: 11px;
 text-align: center;
}
#siteinfo ul {
 background: #eaa72a url("../Images/Layout/en/footer_bg.png") repeat-x 0 50%;
 font-size: 10px;
 margin: 0;
}
#siteinfo li { 
 display: inline;
 line-height: 26px;
 padding: 0 20px;
}
#siteinfo a {
 color: #fcf1ca;
 text-decoration: none;
}
#siteinfo a:hover {
 text-decoration: underline;
}


/* =login ------------------ */
p#main_top { /*no need for specific page targeting because this is the only page that has a p in this div*/
  background: #f5bc53 url("../Images/Layout/en/home_main_top_bg.png") repeat-x 0 100%;
  border: none;
  color: #fff;
  font-size: 18px;
  font-weight: bold;  
  line-height: 50px;
  margin-bottom: 0;
  min-height: 50px; 
  padding-left: 20px; 
}
#login #branding {
  height: 115px;
}
#login #tagline {
  color: #7d4f06;
  font-size: 15px;
  padding-left: 20px;
}
#login #main img {
  display: block;
}
#login_form {
 background: url("../Images/Layout/en/login_bg.png") no-repeat 0 100%;
 color: #7d4f06;
 min-height: 152px; /*187-padding*/ 
 padding: 15px 30px 20px;
 position: absolute; 
 right: 0;
 top: 0; 
 width: 326px; /*386-padding*/
}
#login_form h2 {    
 color: #a27225;
 font: bold 22px "Helvetica Neue", Helvetica, Arial,Verdana, Geneva, Tahoma, sans-serif;
 margin-top: 0;
 margin-bottom: 20px;
}
#login_form label {
 font-weight: normal;
}
#login_form input {
 margin-left: 5px;
 vertical-align: bottom;
}
#login_form .c1 {
 font-size: 16px; 
 float: left;
 letter-spacing: -1px;
 width: 174px;
}
#login_form .c1 label {
 display: block;   
 margin-bottom: 5px; 
 text-align: right;    
}
#login_form .c1 input {
 width:80px;
}
#login_form .c2 {
 font-size: 14px;
 float: right;
 letter-spacing:-1px;
 text-align: center;
 width: 130px;
}
#login_form .c2 a {
 color: #0d56a5;
 display: block;
 margin: 7px 0 23px;
}
.LoginError {
 display: block;
 font-size: 90%;
 line-height: normal;
 margin: -10px 0 14px;
}
.LoginError ul { margin-top: 0; }
  
/* =welcome ------------------ */
#main_top h1 { /*no need for specific page targeting because this is the only page that has an h1 in this div*/
 color: #fcf1ca;
 font-size: 14px;
 margin: 0 0 0 20px;
 line-height: 30px;
}
#main.welcome #tagline {
 margin: 0; 
}
#advisory {
  margin-top: 30px;
}
/* =category page ------------------ */
.category_page #sidebar img {
 display: block;
 margin: 0 16px 16px 0;
}

/* =benefit page ------------------ */
.benefit_page .BenefitLogo {
 float: left;
}
.benefit_page .content_column {
 min-height: 243px;
 padding-left: 136px;  
}
.disclaimer {
 border-top: 1px dotted #ccc;
 display: block;
 font-size: 10px;
 font-style: italic;
 line-height: 16px;
 margin-top: 30px;
}
.benefit_page #sidebar li {
 line-height: normal;
 padding: 6px 0;
}

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

/* =shopping cart (sidebar) ------------------*/
.ShoppingCartControlTitleLayout {
 font-weight: bold;
}
.ShoppingCartControlAddedItems {
 /* the "you placed ... from this page" message*/
 font-size: 90%;
 padding: 4px;
 color:#F00;
}
#_ctl0__ctl1__ctl2_addToCartControlsRow td { 
 /* the select box and "add to cart" button */
 padding: 25px 0 0 0;
}
#_ctl0__ctl1__ctl2_addToCartControlsRow select {
 display: block;
 margin-left: 6px;
}
#_ctl0__ctl1__ctl2_addToCartMessageCell {
 padding: 12px 0;
 font-size: 90%;
}
.ShoppingCartFooterLayout {
 /* the "you have a grand total ..." message*/
 font-size: 90%;
 font-weight:bold;
}

/* =membership ------------------*/
.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 {
 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; /*compensates for the 6px padding in the table cells*/
}
table.contact_us_form th {
 text-align: right;
}
.callWrite {
 margin-top: 25px;
 width: 100%;
}
.lnkHome {
 margin-bottom: 150px;
}
#_ctl0__ctl1_imgSubmit {
  margin-right: 30px;
}

/* shopping cart review page*/
.ShoppingCartList table { 
 margin-left: -6px; /*moves the table over to compensate for the padding given to the table cells*/
 width: 600px;
}
.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 -6px; /*see .ShoppingCartList table for reason for negative right marging*/
}
.checkout_actions input {
 margin-right: 25px;
}
.tableSavingsCalculator {
 border: 1px solid #ccc;
 padding: 6px;
 position: absolute;
 right: 10px;
 top: 22px;
 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 td.use_other_card {
 padding-top: 30px;
}
.OESOrderList {
 margin: 20px 0 20px -25px;
}
.OESOrderList .ShoppingCartList table { margin-left: 0; }
.OESOrderList .ShoppingCartList td { border:1px solid #000; }
.checkout_actions span {
 display: block;
}
#savings_story {
  float: right;
  margin-right: 75px;
}

/* =forms*/
div.form div { margin:12px 0; }
div.form input { display:block; }
.Error {
 color: #CC0000;
 display: block;
 margin-top: 24px;
}
.Error ul { margin-top: 0; }

div.form span.EmailUpdateSuccess {
 color:#F00;
}

/*=savings stories page */
table.savings_story_form .instructions {
  padding-bottom: 10px;
}
table.savings_story_form td {
  padding-left: 0;
}

/*= misc */
.logged_out {
  text-align: center;
}
table.content .note {
 display: block;
 font-size: 90%;
}