@charset "UTF-8";
/* CSS Document */

* {
	padding: 0;
	margin: 0;
	}

body {
	text-align: center;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	color: #333;
	font-size: small;
	background: #fff url("../images/background.jpg");
	}

* html body {
	font-size: x-small;
	f\ont-size: small;
	}

img {
	border: none;
	}

hr {display: none;}

a {color: #036; font-weight: bold;}

a:hover {color: #06C;}

h1 {font-size: 150%;}

h2 {font-size: 140%;}

h3 {font-size: 130%;}

h4 {font-size: 120%;}

h5 {font-size: 110%;}

ul li {font-size: 95%; line-height: 1.5em;}

ol li {font-size: 95%; line-height: 1.5em; padding-bottom: 1em;}

.note {font-size: 85%;}

.inline {display: inline; vertical-align: middle;}

ul {
	margin-left: 1.2em;
	padding-bottom: 1em;
}

ol {
	margin-left: 2.3em;
	padding-bottom: 1em;
}

* html ol {
	margin-left: 2.3em;
	padding-bottom: 1em;
}

p {
	line-height: 1.5em;
	padding-bottom: 1.5em;
}

/* Structure */

#container {
	text-align: left;
	margin: 0 auto;
	width: 960px;
	position: relative;
	padding-left:10px;
}

.row {
	width: 100%;
	margin: 0;
	padding: 0;
	clear: both;
}

.row:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}
	
.one-column, .two-column, .three-column, .four-column, .five-column, .six-column, .seven-column, .eight-column, .nine-column, .ten-column, .eleven-column, .full-row, .nav, .main-feature {
	float: left; margin: 0 10px 0 0; padding: 0;}
	
.one-column {width: 60px;}
.two-column {width: 140px;}
.three-column {width: 220px;}
.four-column {width: 300px;}
.five-column {width: 380px;}
.six-column {width: 460px;}
.seven-column {width: 540px;}
.eight-column {width: 620px;}
.nine-column {width: 700px;}
.ten-column {width: 780px;}
.eleven-column {width: 860px;}
.full-row {width: 940px;}

/* Styles */

.label {
	padding-right: 10px;
	font-weight: bold;
	text-align: right
	}

.error
{
    color: #ff0000
}

.highlight
{
    border-color: #ff0000
}

.highlightCheckBox
{
    background-color: #ff0000
}

.nav {width: 940px; margin-bottom:20px;}
.nav ul{
	list-style: none;
	margin: 0; padding: 0;
	}
.nav li {float: left;}

.hp-feature {
	width: 940px;
	margin-bottom:20px;
	height: 344px;
	}
	
.hp-slideshow {
	width: 540px;
	float: left;
	height: 344px;
	}
	
.hp-content {
	float: left;
	background: url("../images/feature-background.jpg") top left no-repeat;
	width: 400px;
	padding-top: 45px;
	color: #fff;
	font-size: 120%;
	height: 344px;
	}
	
.hp-content h2 {
	font-size: 160%;
	padding-right: 20px; padding-left: 20px;
	}
	
.hp-content p {
	padding-right: 20px; padding-left: 20px;
	padding-bottom: 10px;
	}


.main-content h2 {
	font-size: 220%;
	color: #0079c1;
	margin-bottom: 0.25em;
	}

h3 {
	font-size: 150%;
	color: #5d9732
	}

.answer-column {
	padding-left: 5px;
	width: 460px;
	float: left
	}

.how-steps img {
	float: left;
	margin-right: 20px;
	}
	
.how-steps {margin-bottom: 20px;}
	
.heading, .breadcrumb {
	font-size: 80%;
	font-weight: bold;
	color: #036;
	text-transform: uppercase;
	padding: 0;
	margin: 5px 0 15px 0;
	}
	
.how-headers {
	font-size: 220%;
	color: #5d9732;
	margin-bottom: 0.25em;
	}
	
.sidebar {
	background: url("../images/sidebar.gif") bottom left no-repeat;
	margin-bottom: 20px;
	color: #fff;
	}
	
.sidebar img {display: block; margin: 0 auto 10px auto;}

.sidebar p {padding: 0 20px 20px 20px;}

.sidebar a {color: #fff;}
.sidebar a:hover {color: #003399;}
	
.sidebar ul {
	list-style: none;
	padding: 10px 0;
	}
	
.sidebar ul li {
	margin: 0 5px;
	padding: 3px 0 15px 30px;
	background: url("../images/recycle-bullet.gif") top left no-repeat;
	}
	
.subhead {
	color: #036;
	font-size: 120%;
	font-weight: bold;
	}
	
.news h3 {
	font-size: 210%;
	color: #0079c1;
	margin-bottom: 25px;
	}

.footer {
	background: url('../images/footer-logo.gif') 0px 5px no-repeat;
	padding: 25px 0;
	font-size: 90%;
	height: 100px;
	}
	
.footer ul {
	list-style: none;
	padding: 0; margin: 0 0 0 100px;
}

.footer ul li {
	float: left;
	border-left: 1px solid #036;
	padding: 0 10px;
	margin: 0;
	}
	
.footer ul li.first {
	border-left: 0; padding-left: 0;
	}
	
.hp-offer {
	font-size: 80%;
	text-align: center;
	border: 1px solid #fff;
	width: 300px;
	margin: 0 auto;
	}

/* Image Replacement */

#logo {
	float: left;
	width: 380px;
	height: 136px;
	position: relative;
	font-size: 10%;
	color: transparent;
	padding: 0;
	margin: 0;
	background: url(../images/logo.gif) top left no-repeat;
}

#logo span {display: none;} 

#logo a {
	background: url(../images/logo.gif) top left no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
}

#login {
	width: 300px;
	height: 94px;
	position: relative;
	font-size: 10%;
	color: transparent;
	padding: 0;
	margin: 0;
	background: url(../images/login.gif) top left no-repeat;
}

#login span {display: none;} 

#login a {
	background: url(../images/login.gif) top left no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
}

#learmore {
    float: left;
	width: 129px;
	height: 39px;
	position: relative;
	font-size: 10%;
	color: transparent;
	padding: 0;
	margin: 0 11px 0 0;
	background: url(../images/learnmore-button-v2.gif) top left no-repeat;
}

#learmore span {display: none;} 

#learmore a {
	background: url(../images/learnmore-button-v2.gif) top left no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
}

#sign-up-header {
    float: left;
	width: 160px;
	height: 39px;
	position: relative;
	font-size: 10%;
	color: transparent;
	padding: 0;
	margin: 0;
	background: url(../images/signup-header-button.gif) top left no-repeat;
}

#sign-up-header span {display: none;} 

#sign-up-header a {
	background: url(../images/signup-header-button.gif) top left no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
}

#request-header {
    float: left;
	width: 160px;
	height: 39px;
	position: relative;
	font-size: 10%;
	color: transparent;
	padding: 0;
	margin: 0;
	background: url(../images/request-header-button.gif) top left no-repeat;
}

#request-header span {display: none;} 

#request-header a {
	background: url(../images/request-header-button.gif) top left no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
}

#header-buttons {
	width: 300px;
	margin: 2px 0;
	}

#signup {
	width: 238px;
	height: 69px;
	position: relative;
	font-size: 10%;
	color: transparent;
	padding: 0;
	margin: 0 auto;
}

* html #signup {background: url(../images/signup-button.gif) top left no-repeat;}

#signup span {display: none;} 

#signup a {
	background: url(../images/signup-button.png) top left no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
}

* html #signup a {
	background: url(../images/signup-button.gif) top left no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
}

.rewards-text {float:left; width: 316px;}
.rewards-ad {float: left; width: 144px;}

#adspot2 {
	width: 316px;
	height: 140px;
	position: relative;
	font-size: 10%;
	color: transparent;
	padding: 0;
	margin: 0;
}

#adspot1 {
	width: 460px;
	height: 140px;
	position: relative;
	font-size: 10%;
	color: transparent;
	padding: 0;
	margin: 0;
}

#adspot1 {
	background: url("../images/ess-adspot.jpg") top left no-repeat;}

#adspot2 {
	background: url("../images/hyvee-adspot.jpg") top left no-repeat;}

#adspot1 span, #adspot2 span {display: none;} 

#adspot1 a {
	background: url("../images/ess-adspot.jpg") top left no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
}

#adspot2 a {
	background: url("../images/adspot2-text.gif") top left no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
}

#nav-home, #nav-how, #nav-rewards, #nav-news, #nav-faqs, #nav-signup, #nav-contact, #nav-tellafriend, #nav-enews {
	height: 40px;
	position: relative;
	font-size: 10%;
	color: transparent;
	padding: 0;
	margin: 0;
	}
	
#nav-home {width: 77px; background: url("../images/nav-home.gif") top left no-repeat;}
#nav-how {width: 132px; background: url("../images/nav-how.gif") top left no-repeat;}
#nav-rewards {width: 92px; background: url("../images/nav-rewards.gif") top left no-repeat;}
#nav-news {width: 137px; background: url("../images/nav-news.gif") top left no-repeat;}
#nav-faqs {width: 60px; background: url("../images/nav-faqs.gif") top left no-repeat;}
#nav-signup {width: 82px; background: url("../images/nav-signup.gif") top left no-repeat;}
#nav-contact {width: 115px; background: url("../images/nav-contact.gif") top left no-repeat;}
#nav-tellafriend {width: 123px; background: url("../images/nav-tellafriend.gif") top left no-repeat;}
#nav-enews {width: 204px; background: url("../images/nav-enews.gif") top left no-repeat;}
	
#nav-home span, #nav-how span, #nav-rewards span, #nav-news span, #nav-faqs span, #nav-signup span, #nav-contact span, #nav-tellafriend span, #nav-enews span {
	display: none;
	}
	
#nav-home a, #nav-how a, #nav-rewards a, #nav-news a, #nav-faqs a, #nav-signup a, #nav-contact a, #nav-tellafriend a, #nav-enews a, #nav-home a:hover, #nav-how a:hover, #nav-rewards a:hover, #nav-news a:hover, #nav-faqs a:hover, #nav-signup a:hover, #nav-contact a:hover, #nav-tellafriend a:hover, #nav-enews a:hover {
	position: absolute;
	width: 100%;
	height: 100%;
}

#nav-home a {background: url("../images/nav-home.gif") top left no-repeat;}
#nav-how a {background: url("../images/nav-how.gif") top left no-repeat;}
#nav-rewards a {background: url("../images/nav-rewards.gif") top left no-repeat;}
#nav-news a {background: url("../images/nav-news.gif") top left no-repeat;}
#nav-faqs a {background: url("../images/nav-faqs.gif") top left no-repeat;}
#nav-signup a {background: url("../images/nav-signup.gif") top left no-repeat;}
#nav-contact a {background: url("../images/nav-contact.gif") top left no-repeat;}
#nav-tellafriend a {background: url("../images/nav-tellafriend.gif") top left no-repeat;}
#nav-enews a {background: url("../images/nav-enews.gif") top left no-repeat;}
#nav-home a:hover {background: url("../images/nav-home.gif") bottom left no-repeat;}
#nav-how a:hover {background: url("../images/nav-how.gif") bottom left no-repeat;}
#nav-rewards a:hover {background: url("../images/nav-rewards.gif") bottom left no-repeat;}
#nav-news a:hover {background: url("../images/nav-news.gif") bottom left no-repeat;}
#nav-faqs a:hover {background: url("../images/nav-faqs.gif") bottom left no-repeat;}
#nav-signup a:hover {background: url("../images/nav-signup.gif") bottom left no-repeat;}
#nav-contact a:hover {background: url("../images/nav-contact.gif") bottom left no-repeat;}
#nav-tellafriend a:hover {background: url("../images/nav-tellafriend.gif") bottom left no-repeat;}
#nav-enews a:hover {background: url("../images/nav-enews.gif") bottom left no-repeat;}

* html #nav-home a:hover {background: url("../images/nav-home.gif") top left no-repeat;}
* html #nav-how a:hover {background: url("../images/nav-how.gif") top left no-repeat;}
* html #nav-rewards a:hover {background: url("../images/nav-rewards.gif") top left no-repeat;}
* html #nav-news a:hover {background: url("../images/nav-news.gif") top left no-repeat;}
* html #nav-faqs a:hover {background: url("../images/nav-faqs.gif") top left no-repeat;}
* html #nav-signup a:hover {background: url("../images/nav-signup.gif") top left no-repeat;}
* html #nav-contact a:hover {background: url("../images/nav-contact.gif") top left no-repeat;}
* html #nav-tellafriend a:hover {background: url("../images/nav-tellafriend.gif") top left no-repeat;}
* html #nav-enews a:hover {background: url("../images/nav-enews.gif") top left no-repeat;}
	

	
#recycle-all-header {
	width: 300px;
	height: 44px;
	position: relative;
	font-size: 10%;
	color: transparent;
	padding: 0;
	margin: 0 auto;
	background: url(../images/recycle-all-this_header.gif) top left no-repeat;
	}

#recycle-all-header span {
	display: none;
}

#reward-partners {
margin-bottom: 20px;
}

.hp-offer-hiw {
	font-size: 90%;
	text-align: center;
	border: 1px solid #000;
	width: 300px;
	margin: 0 auto;
	}

/* New - 9/8/09 */

#see-us_header {
	width: 168px;
	height: 38px;
	position: relative;
	margin: 0;
	padding: 0;
	font-size: 10%;
	color: #f0f0ec;
}

#see-us_header span {
	background: url(../images/see-us_header.gif) top left no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
	}
.see-us_body {
	background: url(../images/see-us_body.gif) bottom left no-repeat;
	width: 168px;
}

.see-us_body p {
	padding-left: 15px;
	padding-right: 15px;
	}
.contact-callout_header {
	background: url(../images/contact-callout_header.gif) top left no-repeat;
	width: 542px;
	height: 16px;
	}
.contact-callout_body {
	color: #3f7d12;
	width: 542px;
	background: url(../images/contact-callout_body.gif) bottom left no-repeat;
	}

.contact-callout_body p {
	color: #3f7d12;
	padding: 0px 15px 20px 15px;
	margin: 0;
	}
	
.contact-callout_body p.subhead {
	padding-bottom: 0px; 
	}
	
.contact-callout_body a {color: #3f7d12;}
.contact-callout_body a:hover {color: #030;}

/* Tell a Friend */
#tell-a-friend label {
	display: block;
	width: 200px;
	margin: 17px 0 0 0;
	padding-bottom: 2px;
	}
	
#tell-a-friend input {padding: 2px; width: 250px;}
	
.tell-a-friend_yourinfo label {color: #fff;}
	
#tell-a-friend p{
	color: #fff;
	font-size: 85%;
	margin: 150px 0 0 0;
	padding: 0;
	}
	
input#tell-a-friend_button {
	margin: 10px 0 0 50px;
	width: 185px;
	padding: 0;
	}

#contact td {
	vertical-align: top
	}

#contact .left {
	font-weight: bold;
	text-align: right;
	padding-right: 5px
	}

#contact td {
	padding-bottom: 10px
	}

label {
	float: left;
	width: 150px;
	font-weight: bold
	}

#contact label {
	float: right;
	width: inherit
	}

.button {
	background: #ddd;
	padding: 0 2px;
	font: bold 13px Tahoma, Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px
	}