@charset "utf-8";
/* 
                 Site:  http://www.speedwongracing.com/
          Site Design:  Applied Creative Inc.
                  URL:  http://www.appliedcreative.com
   Designer+Developer:  Alana Marxen
*/

body {
  background: #fff url(/images/layout/strip-repeat.gif) repeat-x left top;
  padding: 0;
  margin: 0;
  font: 14px/23px helvetica, arial, sans-serif;
  color: #666;
  }

p {
  margin: 0 0 20px 0;
  padding: 0;
  }
  
a {
  color: #3e80b8;
  text-decoration: none;
  }
  
a:hover {
  text-decoration: underline;
  }

h1 {
  margin: 0;
  padding: 0;
  }
  
h2 {
  margin: 0;
  padding: 0;
  }
  
h3 {
  font-size: 20px;
  line-height: 28px;
  font-weight: normal;
  color: #3e80b8;
  margin: 0 0 20px 0;
  padding: 0;
  }
  
h4 {
  font-size: 16px;
  font-weight: bold;
  color: #3e80b8;
  margin: 0;
  padding: 0;
  }
  
h5 {
  font-size: 16px;
  font-weight: bold;
  color: #666;
  margin: 0;
  padding: 0;
  }

ul {
  margin: 10px 0 0 40px;
  padding: 0;
  }
  
li {
  font-size: 15px;
  letter-spacing: 1px;
  list-style-image: url(/images/layout/arrow.gif);
  color: #3e80b8;
  margin: 0 0 0 10px;
  padding: 0;
  }
  
*html li {
  list-style-image: url(/images/layout/arrow2.gif);
  }
  
*:first-child+html li {
  list-style-image: url(/images/layout/arrow2.gif);  
  }
  
/**** CLASSES ****/

.clearfix1 {display:inline-block;}

.clearfix {display:block;}
  
.clearfix:after {
  display:block;
  clear:both;
  height:0;
  visibility:hidden;
  content:".";
  }
  
.small-txt {
  font-size: 10px;
  }

.content_div {display:none;}
   
p.flav {
  margin: -8px 0 14px 0;
  }
  
.flavors {
  padding: 0 0 0 39px;
  clear: both;
  }
  
.crave-racing {
  padding: 5px 10px 0 5px;
  }
  
/**** TITLES ****/

#title-go-crunch {
  width: 345px;
  height: 49px;
  background: url(/images/layout/titles/go-forth-and-crunch.gif) no-repeat left top;
  text-indent: -9000px;
  }

#title-live-healthy {
  width: 268px;
  height: 46px;
  background: url(/images/layout/titles/live-healthy.gif) no-repeat left top;
  text-indent: -9000px;
  margin: 0 0 15px -18px;
  padding: 0;
  }

#title-flavors {
  width: 206px;
  height: 57px;
  background: url(/images/layout/titles/flavors.gif) no-repeat left top;
  text-indent: -9000px;
  margin: 0 0 15px -15px;
  padding: 0;
  }

#title-our-story {
  width: 199px;
  height: 43px;
  background: url(/images/layout/titles/our-story.gif) no-repeat left top;
  text-indent: -9000px;
  margin: 5px 0 15px -18px;
  padding: 0;
  }
  
#title-crave-debut {
  width: 198px;
  height: 54px;
  background: url(/images/layout/titles/crave-debut.gif) no-repeat left top;
  text-indent: -9000px;
  margin: -13px 0 15px -3px;
  padding: 0;
  }

#title-contact-us {
  width: 217px;
  height: 39px;
  background: url(/images/layout/titles/contact-us.gif) no-repeat left top;
  text-indent: -9000px;
  margin: 0 0 15px -10px;
  padding: 0;
  }
  
#title-sassy {
  width: 186px;
  height: 15px;
  background: url(/images/layout/titles/subtitle-sassy-spuds.gif) no-repeat left top;
  text-indent: -9000px;
  margin: 0 0 10px 0;
  padding: 0;
  }
  
#title-hickory {
  width: 184px;
  height: 15px;
  background: url(/images/layout/titles/subtitle-hickory-bbq.gif) no-repeat left top;
  text-indent: -9000px;
  margin: 0 0 10px 0;
  padding: 0;
  }

#title-pepper {
  width: 401px;
  height: 15px;
  background: url(/images/layout/titles/subtitle-sea-salt.gif) no-repeat left top;
  text-indent: -9000px;
  margin: 0 0 10px 0;
  padding: 0;
  }
  
#title-vinegar {
  width: 369px;
  height: 15px;
  background: url(/images/layout/titles/subtitle-malt-vinegar.gif) no-repeat left top;
  text-indent: -9000px;
  margin: 0 0 10px 0;
  padding: 0;
  }
  
/**** HEADER ****/

#header-container {
  width: 998px;
  margin: 0 auto;
  }
  
#header-wrapper {
  width: 998px;
  margin: 0 auto;
  padding: 16px 0 0 0;
  float: left;
  }
  
#header-left {
  width: 271px;
  float: left;
  }
  
#header-right {
  width: 727px;
  float: left;
  }
  
#logo {
  width: 191px;
  height: 40px;
  float: left;
  background: url(/images/layout/crave-the-crunch.gif) no-repeat left top;
  text-indent: -9000px;
  margin: 37px 0 0 43px;
  padding: 0;
  position: relative;
  top: 0;
  z-index: 20;
  }
  
/**** MAIN NAV ****/

#main-navigation {
  width: 727px;
  height: 43px;
  list-style: none;
  float: left;
  margin: 29px 0 0 0;
  padding: 0;
  background: url(/images/layout/dotted-line.gif) no-repeat left top;
  position: relative;
  top: 0;
  z-index: 20;
  }
  
#main-navigation li {
  float: left;
  margin: 0;
  list-style: none;
  padding: 1px 43px 0 0;
  text-indent: -9000px;
  }
  
#main-navigation li a {
  display: block;
  height: 41px;
  color: #3e80b8;
  text-decoration: none;
  }
  
#main-navigation li a:hover {
  color: #666;
  }

#main-navigation li#flavors.on a, #main-navigation li#our-story.on a, #main-navigation li#live-healthy.on a, #main-navigation li#crave-debut.on a, #main-navigation li#contact-us.on a{
  background-position: 0 -41px;
  }

/**** FLAVORS ****/
#main-navigation li#flavors a {
  width: 71px;
  margin: 0 0 0 33px;
  padding: 0;
  background: url(/images/layout/nav/flavors.gif) top left;
  }

#main-navigation li#flavors a:hover {
  background-position: 0 -41px;
  }
  
/**** OUR STORY ****/
#main-navigation li#our-story a {
  width: 89px;
  background: url(/images/layout/nav/our-story.gif) top left;
  }

#main-navigation li#our-story a:hover {
  background-position: 0 -41px;
  }

/**** LIVE HEALTHY ****/
#main-navigation li#live-healthy a {
  width: 105px;
  background: url(/images/layout/nav/live-healthy.gif) top left;
  }

#main-navigation li#live-healthy a:hover {
  background-position: 0 -41px;
  }

/**** CRAVE DEBUT ****/
#main-navigation li#crave-debut a {
  width: 116px;
  background: url(/images/layout/nav/crave-debut.gif) top left;
  }

#main-navigation li#crave-debut a:hover {
  background-position: 0 -41px;
  }
  
/**** CONTACT US ****/
#main-navigation li#contact-us a {
  width: 97px;
  background: url(/images/layout/nav/contact-us.gif) top left;
  padding: 0;
  }

#main-navigation li#contact-us a:hover {
  background-position: 0 -41px;
  }

/**** MESSAGE CONTAINER ****/

#message-container {
  width: 998px;
  margin: 0 auto;
  }

#message-wrapper {
  width: 998px;
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
  top: -23px;
  }
  
#shadow-container {
  width: 100%;
  height: 73px;
  margin: 0;
  background: url(/images/layout/background-shadow.gif) no-repeat center top;
  position: relative;
  top: 369px;
  }
  
/**** MAIN CONTAINER ****/

#main-container {
  width: 806px;
  margin: 0 auto;
  }
  
#main-wrapper {
  width: 806px;
  margin: -48px 0 0 0;
  padding: 0 0 90px 0;
  float: left;
  }
  
#main-left {
  width: 388px;
  float: left;
  }
  
*html #main-left {
  width: 388px;
  float: left;
  position: relative;
  top: 0;
  }
  
#main-right {
  width: 393px;
  float: left;
  padding: 47px 0 0 25px;
  }
  
#main-column-one {
  width: 76px;
  float: left;
  }
  
#main-column-two {
  width: 317px;
  float: left;
  }

#main-column-two ul {
  margin: 0 0 0 20px;
  padding: 0;
  }
  
/**** SUBPAGE CONTAINER ****/

#sub-container {
  width: 998px;
  margin: 0 auto;
  }
  
#sub-wrapper {
  width: 998px;
  margin: 0 auto;
  padding: 80px 0 0 0;
  float: left;
  }
  
#sub-left {
  width: 271px;
  float: left;
  }
  
#sub-right {
  width: 669px;
  float: left;
  padding: 0 26px 0 32px;
  }
  
/**** LIST ****/

#sub-left ul {
  width: 270px;
  float: left;
  margin: 0;
  padding: 3px 0 0 0;
  background: url(/images/layout/left-list-repeat.gif) repeat-y left top;
  }
  
#healthy li {
  font-size: 13px;
  letter-spacing: 0;
  line-height: 16px;
  margin: 0 30px 8px 49px;
  list-style-image: url(/images/layout/runner.gif);
  color: #3e80b8;
  }
  
#debut li {
  font-size: 13px;
  letter-spacing: 0;
  line-height: 16px;
  margin: 0 40px 8px 55px;
  list-style-image: url(/images/layout/truck.gif);
  color: #3e80b8;
  }
  
#story li {
  font-size: 13px;
  letter-spacing: 0;
  line-height: 16px;
  margin: 0 36px 8px 55px;
  list-style-image: url(/images/layout/kitchen.gif);
  color: #3e80b8;
  }

#contact li {
  font-size: 25px;
  letter-spacing: 0;
  line-height: 16px;
  margin: 3px 0 0 45px;
  list-style: none;
  color: #3e80b8;
  }
  
.left-list-top {
  width: 270px;
  height: 31px;
  float: left;
  margin: 13px 0 0 0;
  background: url(/images/layout/left-list-top.gif) no-repeat left top;
  }
  
.left-list-bottom {
  width: 270px;
  height: 31px;
  float: left;
  background: url(/images/layout/left-list-bottom.gif) no-repeat left top;
  }  
  
/**** SUBPAGE CONTAINER ****/
  
#flav-container {
  width: 998px;
  margin: 0 auto;
  }
  
#flav-wrapper {
  width: 998px;
  margin: 0 auto;
  padding: 50px 0 0 0;
  float: left;
  position: relative;
  left:-100px;
  }
  
#flav-right {
  width: 998px;
  float: right;
  padding: 0 50px 0 -130px;
  position: relative;
  left: 0;
  overflow: hidden;
  }
  
#flav-content {
  width: 446px;
  float: right;
  }
  
#flavors-content {
  margin: 0 0 0 5px;
  position: relative;
  top: -305px;
  }

.chip-bag {
  float: left;
  margin: -225px 0 0 -413px;
  position: relative;
  top: 0;
  left: 0;
  }  

/**** SMALL BAGS ****/

#small-bags {
  width: 413px;
  height: 186px;
  list-style: none;
  float: left;
  margin: 0;
  padding: 0;
  }
  
#small-bags li {
  float: left;
  margin: 0;
  list-style: none;
  padding: 0 0 0 11px;
  text-indent: -9000px;
  }
  
#small-bags li.first {
  margin: 0;
  padding: 0 0 0 4px;
  }  
  
#small-bags li a {
  display: block;
  height: 186px;
  }
  
/**** FOOTER ****/

#footer-container {
  width: 998px;
  margin: 0 auto;
  clear: both;
  }
  
#footer-wrapper {
  width: 998px;
  margin: 0 auto;
  font-size: 11px;
  color: #acacac;
  padding: 0 0 90px 0;
  }
  
#footer-wrapper a {
  color: #acacac;
  text-decoration: none;
  }
  
#footer-wrapper a:hover {
  color: #3e80b8;
  }
  
#footer-left {
  width: 62%;
  float: left;
  text-align: right;
  padding: 10px 0 0 0;
  }
  
#footer-right {
  width: 37%;
  float: left;
  text-align: left;
  margin-left: 1%;
  }
  
/**** SUB FOOTER ****/

#sub-footer {
  padding: 90px 0 50px 0;
  text-align: center;
  font-size: 11px;
  color: #acacac;
  }
  
#sub-footer a {
  color: #acacac;
  text-decoration: none;
  }
  
#sub-footer a:hover {
  color: #3e80b8;
  }
  
/**** FLAVOR FOOTER ****/

#flav-footer-container {
  width: 998px;
  margin: 0 auto;  
  position: relative;
  top: 0;
  z-index: 10;
  }
  
#flav-footer-wrapper {
  width: 998px;
  margin: 0 auto;
  text-align: center;
  font-size: 11px;
  color: #acacac;
  position: relative;
  top: 660px;
  }
  
#flav-footer-wrapper a {
  color: #acacac;
  text-decoration: none;
  position: relative;
  top: 0;
  }
  
#flav-footer-wrapper a:hover {
  color: #3e80b8;
  }

:focus {
  -moz-outline-style: none;
  outline-style: none;
  }