/* ---- TOP NAVIGATION ---- */  
#topnav {
  margin: 0 auto;
  padding: 0;
  width: 762px; height: 123px;
  background:   url("images/topnav_logo.gif") top left no-repeat;
}
#nav {
  position: relative;
  top: 0px;
  height: 30px;
  margin: 0; padding: 0; 
}
#nav a { text-decoration: none;  }
#nav li { /*float the main list items*/
  margin:0; padding:0; 
  float: left;
  display: block;
  }
#nav li ul { display: none; margin:0; padding:0;  }
#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
  position: absolute;
  top: 30px;
  left: 186px;
  background: #005BB3;
  height: 30px;
  margin:0; padding:0; 
  width:576px;
  }
#nav li.on ul {  background: #f90;}
#nav li.on:hover ul, #nav li.over ul {   background: #005BB3;} /*for ie*/
#nav li a {
  color: #005BB3;
  font-weight: 600;
  display: block;
  margin: 0; padding: 0; 
}
#nav li.on ul a, #nav li.off ul a {
  border: 0;
  margin: 0; padding: 0; 
  float: left; /*ie doesn't inherit the float*/
  color: #f90;
  width: auto;
}
#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
  background: #005BB3;
}
#nav li.on ul {  display: block;  }
#nav li.off:hover ul, #nav li.over ul {
  display: block;
  z-index: 6000;
}

/*do the image replacement */
#nav li span {
display:none;
/* \*/
display:inline;
/* */
position: absolute;
left: -9384px;
}
#nav-home a, #nav-products a, #nav-about a, #nav-contact a, #nav-media a, #nav-faq a {
display: block;
position: relative;
height:25px;
/* \*/
height: 30px;
/* */
background:   url("images/topnav_full.gif") no-repeat; /*contains all hover states*/
}

/*first, put the initial states in place*/
#nav-logo a { width:222px; height:123px; background-position: 0 0; background:   url("images/spacer.gif") no-repeat}
#nav-home a { width:79px; background-position: 0 0; }
#nav-products a { width:103px; background-position: -79px 0; }
#nav-about a { width:86px; background-position: -182px 0; }
#nav-contact a { width:93px; background-position: -268px 0; }
#nav-media a { width:68px; background-position: -361px 0; }
#nav-faq a { width:75px; background-position: -429px 0; }

/*active area - for this demo - the code could be based on a body class, and probably work better.*/

#nav-products.on a {  background-position: -100px -30px; } 
/*add selectors for the other li's and background-positions*/

/*hover states*/
#nav-home a:hover, #nav-home:hover a, #nav-home.over a { background-position: 0 -30px; }
#nav-products a:hover, #nav-products:hover a, #nav-products.over a { background-position: -79px -30px; }
#nav-about a:hover, #nav-about:hover a, #nav-about.over a {  background-position: -182px -30px; }
#nav-contact a:hover, #nav-contact:hover a, #nav-contact.over a { background-position: -268px -30px; }
#nav-media a:hover, #nav-media:hover a, #nav-media.over a { background-position: -361px -30px; }
#nav-faq a:hover, #nav-faq:hover a, #nav-faq.over a { background-position: -429px -30px; }

/*subnav formatting*/
#nav li.off ul a, #nav li.on ul a {
display: block;
background: #005BB3;
color: #fff;
font-family: arial, verdana, sans-serif;
font-size: small;
}    
#nav li.on ul a { background: #f90; }

/* END NAV */

body {
  background-color: #025bb4;
  margin: 0 auto;
}
#coupons-content {
  background: url("images/content_bg.jpg") no-repeat;
  width: 762px;
  height: 399px;
  margin: 0 auto;
}
#coupons-content-main {
  background: url("images/content_main_bg.jpg") no-repeat;
  width: 762px;
  height: 1060px;
  margin: 0 auto;
}
body.email-marketing #form-wrapper {
  position: relative; top: -30px;
}
body.email-marketing #form-wrapper p {
  width: 365px;
  margin: 10px 0 0 0;
}

p, ul, li, a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #01559e;
}
em {
  font-style: italic;
}
h2 {
  font-family: Arial, Helvetica, sans-serif;
  color: #ed1b22;
  font-size: 14px;
  font-weight: 600;
}
#form-wrapper {
  margin-left: 328px;
}
#form-wrapper p {
  margin-top: 4px;
  width: 328px;
}
#form-wrapper div {
  margin-top: 4px;
}
body.email-marketing #form-wrapper label {
  line-height: 19px;
}
body.email-marketing label#interested {
  height: 15px;
  margin: 0; padding: 0;
  display: none;
}
.two-col-chkboxes {
  float: left; width: 150px;
  margin: 0; padding: 0;
  position: relative; top: 0;
}
label {
  font-family: Arial, Helvetica, sans-serif;
  color: #01559e;
  font-size: 11px;
}
div.chkbox p {
  font-size: 11px;
  height: 15px !important;
}
div.chkbox label {
  color: #388dd7;
}
input[type="text"], input[name="email_1"] {
  width: 236px;
}
textarea {
  width: 240px;
}
select[name="product"] {
  width: 259px;  
}
#button-wrapper {
  width: 200px;
  margin-left: -16px;
}
div.opt-in-button {
  clear: both;
  position: relative; top: -10px;
  width: 300px;
  margin: 0;
}
body#confirm-and-send div.opt-in-button {
  top: 10px;
}
body#confirm-and-send div#cancel {
  float: left;
  top: -37px; left: 70px;
}
body.email-marketing div.opt-in-button p {
  margin: 0;
}
body#confirm-and-send h2#confirmation,
body#confirm h2#confirmation {
  color: #d2000a; /* red */
  width: 300px;
  text-align: center;
  padding: 80px 0 0 25px;
  font-weight: 400;
}

input[type="submit"] {
  font-family: Arial, Helvetica, sans-serif;
  background: url("images/button_submit.gif") repeat-x;
  width: 63px; height: 23px;
  border: 1px solid #468ecc;
  color: #fff;
  font-weight: 600;
  font-size: 11px;
}
.submit-shadow {
  background: url("images/button_submit_shadow.gif") no-repeat;
  width: 90px; height: 49px;
  float: left;
}

.submit-shadow input[type="submit"] {
  margin-top: 10px;
  margin-left: 17px;
}

.submit-shadow1 {
  background: url("images/button_submit_shadow1.gif") no-repeat;
  width: 90px; height: 49px;
  float: left;
}
input[type="button"] {
  background: url("images/button_submit.gif") repeat-x;
  width: 81px; height: 23px;
  border: 1px solid #468ecc;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 11px;
  margin-top: 10px;
  margin-left: 7px;
}
.submit-shadow2 {
  background: url("images/button_submit_shadow2.gif") no-repeat;
  width: 105px;
  height: 49px;
  float: left;
}
#bottomnav {
  background: url("images/bottomnav_bg.jpg") no-repeat;
  margin: 0 auto;
  width: 762px;
  height: 51px;
}
#bottomnav p {
  float: right;
  margin: 13px 32px 0 0;
}
#bottomnav a, #bottomnav a:visited, #bottomnav a:hover {
  text-decoration: none;
  color: #025cb4;
  font-size: 11px;
  font-weight: 600;
}

/** FOOTER ***/
#footer {
  width: 352px;
  margin: 0 auto;
  text-align: center;
}
#footer p, #footer a, #footer a:visited, #footer a:hover {
  color: #fff;
}
#footer a:link, #footer a:visited {
  text-decoration: none;
}
#footer a:hover {
  text-decoration: underline;
}
#footer ul {
  list-style: none;
  margin-top: 4px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
}
#footer ul li {
  display: inline;
  margin: 0 5px 0 5px;
}
#footer p {
  margin-top: 12px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
}