a {color: #603813; text-decoration: none}
a:hover {color: #b8451c}
img {border: 0}
.clear {clear: both}

body {margin: 0px; background-color: #FCF8F1; background-image: url(../images/back.gif); font-family: arial, helvetica, sans-serif; font-size: 12px; color: #603813}

#header {width: 860px; height: 120px; margin: 0 auto; position: relative}

#header .join {position: absolute; top: 0; right: 0}
#header .join a {display: block; width: 195px; height: 53px; background-image: url(../images/back_join.gif); background-position: 0 0; color: #ffffff; text-align: center; text-decoration: none; padding-top: 7px}
#header .join a b {font-family: georgia, times, times new roman, serif; font-weight: normal; font-size: 16px; color: #ffe371}
#header .join a:hover {background-position: 0 -60px}

#header #logo {float: left; margin: 50px 0 0 0}

#nav {float: right; width: 720px; margin: 70px 0 0 0; background-image: url(../images/border_nav.gif); background-repeat: no-repeat; background-position: 0 30px; height: 37px}
#nav ul {margin: 0; padding: 0; list-style: none}
#nav ul li {display: block; float: left; text-transform: uppercase}
#nav ul li a {display: block; float: left; padding: 8px 10px 7px 10px; height: 37px; font-weight: normal; font-size: 12px; background-repeat: no-repeat; background-position: 0 30px; color: #603813}
#nav ul li a.inactive {cursor: text}
#nav ul li a:hover {color: #b8451c}
#nav ul {position: relative; z-index: 21; float: right}
#nav ul li {float: left; line-height: 1.3em; vertical-align: middle; zoom: 1}
#nav ul li.hover, #nav ul li:hover {position: relative; z-index: 23; cursor: default}
#nav ul ul {visibility: hidden; position: absolute; margin: 0; top: 38px; left: 0; z-index: 22}
#nav ul ul li {float: left; display: block}
#nav ul li:hover > ul {visibility: visible}
#nav ul li:hover a {color: #b8451c}
#nav ul li ul {background-image: url(../images/dropdown.gif); background-position: center bottom; padding: 15px 1px 30px 1px}
#nav ul li ul li {height: 20px !important}
#nav ul li ul li a {float: left; display: block; background-image: none !important; width: 125px !important; height: auto !important; padding: 3px 10px 3px 10px; font-size: 11px; font-weight: normal; line-height: 1.3em; color: #603813 !important}
#nav ul li ul li a:hover {color: #b8451c !important}

#home #nav .navhome a,
#quality #nav .navquality a,
#products #nav .navproducts a,
#where #nav .navwhere a,
#story #nav .navstory a,
#events #nav .navevents a,
#contact #nav .navcontact a {color: #b8451c; background-image: url(../images/nav_on.gif)}

#headline {width: 860px; margin: 0 auto}
#headline h1 {width: 860px; margin: 20px 0 0 0}
#headline h1 b {display: none}
#home #headline h1 {height: 105px; background-image: url(../images/headline_home.gif)}

.wheremixables #headline {width: 890px; margin: 0 auto}
.wheremixables #headline h1 {width: 890px; height: 252px; margin: 20px 0 0 0; background-image: url(../images/headline_where_mixables.gif)}

.wheremixins #headline {width: 890px; margin: 0 auto}
.wheremixins #headline h1 {width: 890px; height: 252px; margin: 20px 0 0 0; background-image: url(../images/headline_where_mixins.gif)}

.wherehomestyle #headline {width: 890px; margin: 0 auto}
.wherehomestyle #headline h1 {width: 890px; height: 252px; margin: 20px 0 0 0; background-image: url(../images/headline_where_homestyle.gif)}

#events #headline h1 {width: 860px; height: 120px; margin: 20px 0 0 0; background-image: url(../images/headline_events.gif)}

#story #headline {width: 910px; margin: 0 auto}
#story #headline h1 {width: 910px; height: 241px; margin: 20px 0 0 0; background-image: url(../images/headline_story.gif); background-position: -4px 0}

#contact #headline h1 {width: 860px; height: 100px; margin: 20px 0 0 0; background-image: url(../images/headline_contact.gif)}

#home #flash {width: 900px}
#flash {width: 890px; margin: 0 auto}

#main {width: 860px; margin: 0 auto; padding-bottom: 20px; clear: both}
#text #main {width: 710px; padding: 0 0 60px 150px}
#home #main {background-image: url(../images/border_promos.gif); background-repeat: no-repeat; background-position: center top; padding-top: 20px}
#main h1 {font-family: georgia, times, times new roman, serif; color: #b8451c; font-weight: normal; font-size: 30px}
.blue #main h1 {color: #556a8a}
#main h1 sup {font-size: 14px}
#main h1 i {font-size: 14px; color: #603813}
#main p.first {font-family: georgia, times, times new roman, serif; font-size: 18px; line-height: 1.5em}
img.postit {float: right; margin: 0 0 10px 10px}

.promo {width: 251px; height: 115px; padding: 18px 30px 0px 130px; background-repeat: no-repeat; float: left; margin-right: 30px}
.last {margin-right: 0}
.promo h2 {font-family: georgia, times, times new roman, serif; font-weight: normal; font-size: 16px; margin: 0}
.promo p {margin: 5px 0 0 0; line-height: 18px}
.promo a h2, .promo a:hover h2 {color: #b8451c}
.promo a:hover p, .promo a p {color: #603813}
#doggydays {background-image: url(../images/home_promo_left.gif)}
#whymix {background-image: url(../images/home_promo_right.gif)}

#whymix2 {background-image: url(../images/home_promo_whymix.gif)}
#homestylerecipes {background-image: url(../images/home_promo_homestyle.gif)}

.listing {width: 860px; margin: 0 auto; background-image: url(../images/border_listing.gif); background-repeat: no-repeat; background-position: center top; padding: 30px 0 20px 0}
.row {clear: both; height: 100px; background-image: url(../images/border_column.gif); background-repeat: no-repeat; background-position: 415px 0}
.product {width: 400px; height: 100px; padding: 20px 20px 0 0; float: left; background-image: url(../images/border_row.gif); background-repeat: no-repeat; background-position: center top}
.first .product {background-image: none; padding-top: 0}
.product img {float: left; margin-right: 5px}
.product h3 {font-family: georgia, times, times new roman, serif; font-size: 15px; font-weight: normal; margin: 0}
.product h3 a {color: #b8451c}
.blue .product a {color: #556a8a}
.blue .product h3 a {color: #556a8a}
.product p {margin-top: 5px}

.variety p {width: 145px; float: left}
.variety ul {margin: 5px 0 0 10px; padding: 0; list-style: none; float: left}
.variety ul li a {color: #b8451c}

#quality #main {padding-top: 10px; padding-bottom: 40px}
#quality #primary {width: 600px; float: left; background-image: url(../images/quality_letter.gif); background-repeat: no-repeat; padding: 408px 0 0 0}
#quality #primary img {float: right; margin-right: 10px}
#quality #primary p {font-size: 14px; line-height: 1.7em; font-family: georgia, times, times new roman, serif; margin-left: 25px; margin-right: 160px}
#quality #sidebar {width: 220px; float: left; padding: 0 0 0 20px; background-image: url(../images/divider_sidebar.gif); background-repeat: no-repeat}
#quality #sidebar h3 {font-family: georgia, times, times new roman, serif; background-image: url(../images/border_sidebar.gif); background-repeat: no-repeat; font-weight: normal; font-size: 18px; background-position: 0 23px; padding-bottom: 20px; padding-left: 13px}
#quality #sidebar ul {margin: 0; padding: 0; list-style: none}
#quality #sidebar ul li {padding-bottom: 15px; font-size: 11px; padding: 0 0 15px 12px; background-image: url(../images/bullet.gif); background-repeat: no-repeat; background-position: 0 3px; line-height: 1.4em}

#where #main {padding-top: 20px; padding-bottom: 40px; background-image: url(../images/border_listing.gif); background-repeat: no-repeat; background-position: center top}
#where #headline p {margin: 15px 0 15px 360px}
#where #headline {padding-bottom: 15px}
.where {width: 264px; float: left; margin-right: 20px}
.where h3 {display: block; width: 264px; height: 60px}
.where h3 b {display: none}
.where h3#where_retail {background-image: url(../images/where_retail.gif)}
.where h3#where_online {background-image: url(../images/where_online.gif)}
.where h3#where_distributors {background-image: url(../images/where_distributors.gif)}
.blue .where h3#where_retail {background-image: url(../images/where_retail_blue.gif)}
.blue .where h3#where_online {background-image: url(../images/where_online_blue.gif)}
.blue .where h3#where_distributors {background-image: url(../images/where_distributors_blue.gif)}
.where ul {margin: 0 0 0 30px; padding: 0; list-style: none}
.where ul li {padding: 2px 0}

.event {clear: both; background-image: url(../images/border_events.gif); background-repeat: no-repeat; background-position: center top; padding: 50px 0 40px 0}
#events #main .first {background-image: none}
.event h2 {font-family: georgia, times, times new roman, serif; font-size: 24px; font-weight: normal; margin-top: 0; color: #b8451c}
.event h2 span {font-size: 18px; color: #603813}
.event img {float: left; margin: 0 20px 20px 0}
span.highlight {color: #b8451c}
.event h2, .event p {margin-left: 310px}

#story #main {padding: 40px 60px 0 42px; width: 758px; height: 648px; _padding-top: 20px; _height: 668px; background-image: url(../images/story_letter.gif); background-repeat: no-repeat}
#story #main p {font-family: georgia, times, times new roman, serif; font-size: 16px; line-height: 28px; padding: 28px 0 0 0; margin: 0}

#why #main {padding-top: 20px}

#products #why {width: 860px; margin: -10px auto 0 auto; padding-top: 45px; padding-bottom: 20px; padding-right: 30px; clear: both; background-image: url(../images/border_listing.gif); background-repeat: no-repeat}
#why #primary {width: 432px; float: left}
#why #sidebar {width: 348px; height: 573px; padding: 20px 20px 20px 60px; float: left; background-image: url(../images/why_paper.gif); background-repeat: no-repeat}
#why #sidebar h3 {font-family: georgia, times, times new roman, serif; font-size: 18px; font-weight: normal; color: #b8451c; border-top: 1px solid #C8C7C7; padding-top: 15px; margin-bottom: 5px}
#products #why #sidebar h3 {color: #3F506B}
#why #sidebar h3.first {margin-top: 0; padding-top: 0; border: 0}
#why #sidebar p {margin-top: 0}

#contact #headline p {margin: 15px 0 15px 3px}
#contact table td {vertical-align: top; padding: 2px 0}
#contact table td table td {vertical-align: middle}
#contact #main h3 {font-family: georgia, times, times new roman, serif; font-size: 18px; font-weight: normal; color: #3F506B}
#contact table td input, #contact table td select {padding: 5px; color: #603813}
#contact table td.wide input {width: 370px}
#contact table td.wide select {width: 267px}
#contact table td.wide input.zip {width: 100px}
#contact table td.narrow input {width: 210px}
#contact table td.narrow select {width: 221px}
#contact table td.wide {padding-right: 20px}
#contact table td.narrow table td {padding-right: 5px}
#contact table td.wide input.check {width: auto}
#contact table td.narrow input.submit {width: 109px; height: 34px; margin: 0 15px 0 0; padding: 0; vertical-align: middle}
#contact .address {background-image: url(../images/border_contact.gif); background-position: center top; background-repeat: no-repeat; padding-top: 20px; margin-top: 30px}

#footer {width: 860px; margin: 0 auto; height: 50px; background-image: url(../images/border_footer.gif); background-repeat: no-repeat; background-position: center top; font-size: 9px}
#footer p {float: left; margin: 0; padding: 10px 0}
#footer ul {float: right; margin: 0; padding: 0; list-style: none}
#footer ul li {display: block; float: left; padding: 10px 5px}
#footer a {color: #603813}
#footer a:hover {color: #b8451c}

#main ol li {padding-bottom: 15px}

input.reset {border: 0; background-color: transparent; width: auto !important; font-size: 13px; cursor: pointer}

div.success {border: 2px solid #79A935; border-left: 0; border-right: 0; padding: 5px; text-align: center; color: #608727; font-weight: bold; font-size: 14px}
div.error {border: 2px solid #BC5A2A; border-left: 0; border-right: 0; padding: 5px; text-align: center; color: #BC5A2A; font-weight: bold; font-size: 14px}

.bordered {padding-top: 15px; border-top: 1px solid #cfc3b5}