html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,img,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;
 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;
}
table {
 /*border-collapse: collapse;*/
}
/*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 6px;
 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 {
 background: url("../Images/Layout/en/logo.jpg") no-repeat 0 0;
 height: 91px; /*the background image gets cut off deliberately*/
 margin: 33px 0 0 20px;
 text-indent: -999em;
 width: 216px;
}
#branding a { /*category and benefit pages*/
 display: block;
 height: 100%;
 width: 100%;  
}

#nav {
 position: absolute; 
 right:5px;
 top: 96px;
} 
#nav2 {
 position: absolute;
 right: 5px;
 top: 20px;
}
  
#main_top {
 background: #db2124 url("../Images/Layout/en/main_top_bg.png") repeat-y 0 0;
 border-top: 2px solid #000;
 border-bottom: 2px solid #000;
 min-height: 33px;
} 
#main_top h1 {
 font-weight: normal;
 margin: 0;
} 
#main {
 background: #fff url("../Images/Layout/en/multi_col_bg.gif") repeat-y 0 0;
 padding: 20px 10px 20px 20px;
 overflow: auto;
}  
#login #main {
 background: #fff url("../Images/Layout/en/people.jpg") no-repeat -10px 80%;
 height: 402px;
 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 {
 background: #fff url("../Images/Layout/en/people.jpg") no-repeat -10px 100px;
 height: 400px;
 padding-bottom: 0;
 position: relative; /*to position the boxes*/
}
#wrapper .shopping_cart {
 background-image: none;
 position: relative; /*position the savings calculator*/
}
#wrapper .checkout {
 background-image: none;
}
#wrapper .logged_out {
 background-image: none;
 padding: 50px 20px 150px;
}
  
#main td {
 vertical-align: top;
}
#main h1 {
 margin-top: 0;
}
#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 {
 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*/ }
  
#main.category_page #sidebar {
 width: 256px;
 
}
#main.benefit_page #sidebar {
 width: 174px;
} 
#cartcontent {
  border: 1px solid #990000;
  padding: 5px;
}

#siteinfo {  
 font-size: 11px;
 text-align: center;
}
#siteinfo ul {
 background: 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: #666666;
 text-decoration: none;
}
#siteinfo a:hover {
 text-decoration: underline;
}


/* =login ------------------ */
#login {}
#login #branding {
 height: 108px;
}
#login #tagline { 
 margin: -15px 0 0 20px; 
}
#login #tagline img {
 display: block; /*The layout has the plain text a few pixels beneath the image. I originally thought I could skip setting the img to display:block by simply putting a small line-height on #tagline, which worked in everything except (surprise) IE.*/
 margin-bottom: -3px;
}
#login_form {
 background: url("../Images/Layout/en/login_bg.png") no-repeat 0 100%;
 color: #9c917f;
 min-height: 152px; /*187-padding*/ 
 padding: 15px 30px 20px;
 position: absolute; 
 right: 0;
 top: 0; 
 width: 326px; /*386-padding*/
}
#login_form h2 {    
 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 {
 vertical-align: top;
}
#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 dicv*/
 color: #fff;
 font-size: 14px;
 margin-left: 20px;
 line-height: 33px;
}
#main.welcome #tagline {
 margin: 0; 
}
.benefit {
 bottom: 0;
 float: left;
 font-size: 11px;
 position: absolute; 
 width: 174px;
}
.benefit p {
 background: url("../Images/Layout/en/benefit_box.png") no-repeat 0 100%;
 line-height: normal;
 margin: 0;
 min-height: 58px;
 padding: 5px 10px 26px;
}
.benefit h2 {
 height: 29px;
 margin: 0;
 text-indent: -999em;
}
#b1 {
 left: 20px;
}
#b1 h2 {
 background: url("../Images/Layout/en/benefit_box.png") no-repeat 0 0;
}
#b2 {
 left: 200px;
}
#b2 h2 {
 background: url("../Images/Layout/en/benefit_box.png") no-repeat -181px 0;
}
#b3 {
 left: 380px;
}
#b3 h2 {
 background: url("../Images/Layout/en/benefit_box.png") no-repeat -362px 0;
}
#advisory {
 bottom:0; 
 left: 560px;
 position: absolute;
}
/* =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 th {
 text-align: right;
}
table.contact_us_form .note {
 display: block;
 font-size: 90%;
}
.callWrite {
 margin-top: 25px;
 width: 100%;
}
.lnkHome {
 margin-bottom: 150px;
}

/* shopping cart review page*/
.ShoppingCartList table { 
 margin-left: -8px; /*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 -8px; /*see .ShoppingCartList table for reason for negative right marging*/
 padding-left: 5px;
}
.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 {
 background-color: #EFEFEF;
 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;
}

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

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

/*= misc */
.logged_out {
  text-align: center;
}