@import "reset.css";
html{ overflow-y: scroll; }
body{ background: #c1d0db url(../content/images/bg.png) repeat-x; font-family: arial, helvetica, san-serif; font-size: 12px;  }
#bodyContainer{
  background: transparent url(../content/images/sunBurst.jpg) center -15px no-repeat;

  margin: 0 auto;
  width: 939px;
}
/*MAIN NAVIGATION BEGIN*/
#mainNavContainer{ margin-top: 17px; height: 53px; width: 938px; }
#mainNavBar{
  background: transparent url(../content/images/logo.jpg) top no-repeat;
  height: 53px;
  position: absolute;
  width: 938px;
  z-index: 10; }
#mainNavBar div{ float: left; height: 41px; overflow: hidden; width: auto; }
#mainNavBar div.right{ float: right; }
#mainNavBar div a{
  color: #fff;
  display: block;
  float: left;
  font-weight: bold;
  font-size: 14px;
  height: 41px;
  padding-top: 14px;
  text-align: center;
}
#mainNavBar div.left a{ background: transparent url(../content/images/Lnav.png) no-repeat; }
#mainNavBar div.left a.home{ width: 83px; }
#mainNavBar div.left a.home:hover{ background-position: 0 -41px; }
#mainNavBar div.left a.homeActive{ background-position: 0 -82px; width: 83px;}

#mainNavBar div.left a.products{ background-position: -83px 0; width: 119px; }
#mainNavBar div.left a.products:hover{ background-position: -83px -41px; }
#mainNavBar div.left a.productsActive{ background-position: -83px -82px; width: 119px; }

#mainNavBar div.left a.why{ background-position: -202px 0; width: 150px; }
#mainNavBar div.left a.why:hover{ background-position: -202px -41px; }
#mainNavBar div.left a.whyActive{ background-position: -202px -82px; width: 150px; }

#mainNavBar div.right a{ background: transparent url(../content/images/Rnav.png) no-repeat; }
#mainNavBar div.right a.press{ width: 82px; }
#mainNavBar div.right a.press:hover{ background-position: 0 -41px; }
#mainNavBar div.right a.pressActive{ background-position: 0 -82px; width: 82px;}

#mainNavBar div.right a.about{ background-position: -82px 0; width: 140px; }
#mainNavBar div.right a.about:hover{ background-position: -82px -41px; }
#mainNavBar div.right a.aboutActive{ background-position: -82px -82px; width: 140px; }

#mainNavBar div.right a.contact{ background-position: -222px 0; width: 130px; }
#mainNavBar div.right a.contact:hover{ background-position: -222px -41px; }
#mainNavBar div.right a.contactActive{ background-position: -222px -82px; width: 130px; }
/*MAIN NAVIGATION END*/

/*FOOTER BEGIN*/
#footer{ background: transparent url(../content/images/footerBG.png) no-repeat; font-size: 11px; margin: 20px auto 20px auto; width: 942px; }
#footer .content .feedFade{ background: transparent url(../content/images/feedFade.png) repeat-x; height: 166px; margin: 84px auto 0 auto; position: absolute; width: 942px; }
#footer .content{ height: 250px; overflow: hidden; width: 940px; }

#footer .content .testimonials{ color: #fff; float: left; margin: 130px 0 0 0; text-align: left; width: 336px; }
#footer .content .testimonials p{ font-size: 14px; font-weight: bold; height: 70px; line-height: 18px; margin-left: 60px; overflow: hidden; width: 214px;}

#footer .content .tweets{ color: #ced2d7; float: left; margin: 38px 0 0 0; width: 306px; }
#footer .content .tweets .header{
  background: transparent url(../content/images/twitterHeader.png) no-repeat;
  display: block;
  height: 72px;
  margin: -38px 0 0 1px;
  position: absolute;
  width: 273px;
  z-index: 2;
}
#footer .content .tweets .footer{ position: absolute; margin: -75px 0 0 0; z-index: 2; }
#footer .content .tweets .footer .bg{ background: transparent url(../content/images/twitterFooter.png) no-repeat; display: block; height: 86px; position: relative; width: 273px; }
#footer .content .tweets .feedContainer { height: 200px; overflow: hidden; }
#footer .content .tweets .feedContainer .feed{ margin-left: 30px; padding: 35px 0; width: 235px; overflow: hidden;}
#footer .content .tweets .feedContainer .feed p{ border-bottom: 1px solid #20589e; line-height: 18px; margin: 0 0 10px 0; padding-bottom: 10px; display: block; width: 230px; }
#footer .content .tweets .feedContainer .feed p a{ color: #ffd001; display: block;}
#footer .content .tweets .feedContainer .feed p .date{ color: #327cd6; display: block; font-size: 10px; font-style: italic; }
#footer .content .tweets a.twitterButton{ display: block; text-align: center; padding: 45px 0 0 72px; width: 148px;}

#footer .content .fb{ color: #ced2d7; float: left; margin: 25px 0 0 0; width: 295px; }
  /*CUSTOM SCROLLBAR STYLES BEGIN*/
.jScrollPaneContainer { position: relative;	overflow: hidden; z-index: 1;}
.jScrollPaneTrack {cursor: pointer; position: absolute;	 right: 15px; height: 100%;	margin: 0 0 0 0; z-index: 3;}
.jScrollPaneDrag { background: transparent url(../content/images/scrollBar.png) 0px -20px no-repeat; cursor: pointer; overflow: hidden; position: absolute; width: 14px; z-index: 3; }
.jScrollPaneDragTop {	bottom: 0;  left: 0; position: absolute;overflow: hidden; }
.jScrollPaneDragBottom { position: absolute; bottom: 0;	left: 0; overflow: hidden; }
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 4;
  margin: 0 0 0 277px;
	text-indent: -2000px;
	overflow: hidden;
 background: transparent url(../content/images/scrollBar.png) 0 0 no-repeat;
	height: 10px;
	width: 14px;
}
a.jScrollArrowUp:hover { /*background-color: #f60;*/ }
a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 4;
	bottom: 0;
  margin: 0 0 0 277px;
	text-indent: -2000px;
	overflow: hidden;
 background: transparent url(../content/images/scrollBar.png) 0 -10px no-repeat;
	height: 10px;
}
a.jScrollArrowDown:hover { /*background-color: #f60;*/ }
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover { /*background-color: #f00;*/ }
  /*CUSTOM SCROLLBAR STYLES END*/

#footer .nav{ clear: both; display: block; margin-top: 23px; text-align: center; }
#footer .nav a{ color: #4e6381; }
#footer .nav span{ color: #4e6381; padding: 0 13px; }
#footer .disclaimer{ clear: both; color: #fff; display: block; margin-top: 10px; text-align: center; }
#footer .disclaimer a{ color:#fff; }
#footer .credits{ color:#fff; margin: 7px auto 0 auto; text-align: center; width: 220px;}
#footer .credits span{ float: left; padding-top: 10px; }
#footer .credits a img{ float: left; padding: 0 5px;}
#footer .credits a{ color: #4e6381; display: block;  overflow: hidden; }
/*FOOTER END*/

/*HOME BEGIN*/
#flashContainer{ height: 654px; width: 938px; margin-top: 50px;}
#flashContent{ position: absolute; z-index: 1; }
/*HOME END*/

/*PRODUCTS BEGIN*/
#productsContent{  overflow: auto; padding-top: 65px; }
#productsContent .left{ background: transparent url(../content/images/divider.png) right 10px no-repeat; float: left; width: 285px; }
#productsContent .left .productNav{ height: 193px; margin-bottom: 30px; width: 256px; }
#productsContent .left div.proade{ background: transparent url(../content/images/proade-navbg.png) no-repeat; }
#productsContent .left div.proh2o{ background: transparent url(../content/images/proh2o-navbg.png) no-repeat; }
#productsContent .left div.procream{ background: transparent url(../content/images/procream-navbg.png) left 20px no-repeat; }
#productsContent .left div.procream div{ height: 101px; padding-top: 52px; }

#productsContent .left .productNav div{ padding: 72px 0 0 130px; height: 70px; width: 120px; }
#productsContent .left .productNav div a{ color: #fff; display: block; }

#productsContent .left .proade div a{ background: transparent url(../content/images/proadeNav.png) no-repeat;  }
#productsContent .left .proh2o div a{ background: transparent url(../content/images/proh2oNav.png) no-repeat;  }
#productsContent .left .procream div a{ background: transparent url(../content/images/procreamNav.png) no-repeat;  }

#productsContent .left .productNav div a.first{ height: 35px; }
#productsContent .left .productNav div a.first:hover{ background-position: -120px 0; }
#productsContent .left .productNav div #fruitpunch.active{ background-position: -120px 0; }
#productsContent .left .productNav div #kiwi.active{ background-position: -120px 0; }
#productsContent .left .productNav div #strawberry.active{ background-position: -120px 0; }

#productsContent .left .productNav div a.second{ background-position: 0 -35px; height: 35px; }
#productsContent .left .productNav div a.second:hover{ background-position: -120px -35px; }
#productsContent .left .productNav div #orange.active{ background-position: -120px -35px; height: 35px; }
#productsContent .left .productNav div #black.active{ background-position: -120px -35px; height: 35px; }
#productsContent .left .productNav div #vanilla.active{ background-position: -120px -35px; height: 35px; }

#productsContent .left .productNav div a.third{ background-position: 0 -70px; height: 35px; }
#productsContent .left .productNav div a.third:hover{ background-position: -120px -70px; }
#productsContent .left .productNav div #chocolate.ctive{ background-position: -120px -70px; height: 35px; }


#productsContent .right{ float: left; overflow: auto; width: 650px; }
#productsContent .right .product .pType .productImage{ position: absolute; margin: 0 0 0 20px; }
#productsContent .right .product .pType .productImage img{ position: absolute; }
#productsContent .right .procream .pType .productImage{ position: absolute; margin: 100px 0 0 5px;  }
#productsContent .right .product .pType  .productLabel{ float: left; padding: 20px 0 0 20px; display: none;}
#productsContent .right .product .pType .info{ float: right; line-height: 20px; width: 391px; }

#productsContent .right .product .pType .info img{ display: block; margin-top: 20px; }
#productsContent .right .product .pType .info .bottleImage{ background: transparent url(../content/images/viewBottle.png) no-repeat; margin-top: 20px; }
#productsContent .right .product .pType .info .labelImage{ background: transparent url(../content/images/viewLabel.png) no-repeat; margin-top: 20px; }
#productsContent .right .product .pType .info div.labelButton{ cursor: pointer; display: block; width: 193px; height: 38px; margin-top: 20px; position: absolute;}
#productsContent .right .product .pType .info p{ color: #7d92a1; display: block; margin-top: 20px;}
#productsContent .right .product .pType .info p span{ color: #6c7c88; font-weight: bold; }


/*PRODUCTS END*/

/*PRIVACY BEGIN*/
#privacyContent{ background: transparent url(../content/images/about-us.png) 40px 75px no-repeat; color: #6c7c88; font-size: 12px; padding: 100px 0 0 306px; }
#privacyContent a{ color: #2661ad; }
#privacyContent h1{ background: transparent url(../content/images/privacyTitle.png) no-repeat; }
#privacyContent p{ line-height:20px;  margin: 0 0 20px 0; }
#privacyContent p span{ display: block; font-weight: bold; }
/*PRIVACY END*/

/*ABOUT BEGIN*/
#aboutContent{ background: transparent url(../content/images/about-us.png) 40px 75px no-repeat; color: #6c7c88; font-size: 12px; overflow: auto; padding: 100px 0 0 306px; }
#aboutContent a{ color: #2661ad; }
#aboutContent h1{ overflow: auto;  }
#aboutContent h1 a{ background: transparent url(../content/images/about-philosophy.png) no-repeat; margin: 0 20px 5px 0; }

#aboutContent h1 #aboutSub, #aboutContent h1 #aboutSub:link{ background-position: 0 -42px; display: block; float: left; height: 21px; width: 263px; }
#aboutContent h1 #aboutSub:hover{ background-position: 0 -21px; }
#aboutContent h1 #aboutSub.active, #aboutContent h1 #aboutSub.active:hover{ background-position: 0 0; display: block; float: left; height: 21px; width: 263px;  }


#aboutContent h1 #philosophySub, #aboutContent h1 #philosophySub:link{ background-position: -264px -42px; display: block; float: left; height: 21px; width: 244px; }
#aboutContent h1 #philosophySub:hover{ background-position: -264px -21px; display: block;}
#aboutContent h1 #philosophySub.active, #aboutContent h1 #philosophySub.active:hover{ background-position: -264px 0; display: block; float: left; height: 21px; width: 244px;  }

#aboutContent ul{ font-weight: bold; margin-bottom: 20px; }
#aboutContent ul li{ border-bottom: 1px solid #cacbcb; line-height: 20px; margin-bottom: 5px; padding-bottom: 5px; }
#aboutContent ul .nBdr{ border: 0; }

#aboutContent p{ line-height: 20px; margin: 0 0 20px 0; padding: 0; }
#aboutContent p span{ display: block; font-weight: bold; }
#aboutContent p img{ margin: 0 0 5px 0;}
#aboutContent p.aboutImg .nMrgn { margin: 0 0 20px 0; }
#aboutContent p.aboutImg img{ float: left; margin: 0 0 0 30px; }
#aboutContent #about{ float: left; padding-bottom: 140px; }
#aboutContent #philosophy{ display: none; padding-bottom: 200px; }
/*ABOUT END*/

/*PRESS BEGIN*/
#pressContent{ background: transparent url(../content/images/about-us.png) 40px 75px no-repeat; color: #6c7c88; font-size: 12px; padding: 100px 0 30px 306px; }
#pressContent a{ color: #2661ad; }

#pressContent ul{ font-weight: bold; margin-bottom: 20px; }
#pressContent ul li{ border-bottom: 1px solid #cacbcb; line-height: 20px; margin-bottom: 5px; padding-bottom: 5px; }
#pressContent ul .nBdr{ border: 0; }

#pressContent p{ clear: both; line-height: 20px; margin: 0 0 20px 0; }
#pressContent p span{ display: block; font-weight: bold; }
#pressContent p img{ margin: 0 0 5px 0;}
#pressContent p.pressImg .nMrgn { margin: 0 0 20px 0; }
#pressContent p.pressImg img{ float: left; margin: 0 0 0 30px; }
/*PRESS END*/

/*PRESS BEGIN*/
#whyContent{ background: transparent url(../content/images/fruitade.png) 40px 90px no-repeat; color: #6c7c88; font-size: 12px; padding: 100px 0 230px 306px; }
#whyContent a{ color: #2661ad; }

#whyContent ul{ font-weight: bold; margin-bottom: 20px; }
#whyContent ul li{ border-bottom: 1px solid #cacbcb; line-height: 20px; margin-bottom: 5px; padding-bottom: 5px; }
#whyContent ul .nBdr{ border: 0; }

#whyContent p{ clear: both; line-height: 20px; margin: 0 0 20px 0; }
#whyContent p span{ display: block; font-weight: bold; }
#whyContent p img{ margin: 0 0 5px 0;}
#whyContent p.whyImg .nMrgn { margin: 0 0 20px 0; }
#whyContent p.whyImg img{ float: left; margin: 0 0 0 30px; }
/*PRESS END*/

/*CONTACT BEGIN*/
#contactContent{ background: transparent url(../content/images/productsAndFruits.png) 85px 65px no-repeat; color: #6c7c88; font-size: 12px; overflow: auto; padding: 90px 0 0 306px; }
#contactContent a{ color: #2661ad; }
#contactContent div.right{ float: right;  line-height: 20px; margin: 0 50px 0 0; width: 346px; }
#contactContent div.right img{ margin: 0 0 40px 0;}
#contactContent div.right p{ margin: 0 0 0 10px;  }
#contactContent div.right div.thankyou{ display: none; font-size: 18px;  height: 560px; }
#contactForm div{ background: transparent url(../content/images/inputTextBG.png) no-repeat; height: 65px; width: 343px; }
#contactForm div label{ margin: 10px 0 0 5px; padding: 0; display: block; height: 10px;}
#contactForm div.textarea{  background: transparent url(../content/images/inputFieldBG.png) no-repeat; height: 174px; width: 343px; }
#contactForm div.submit{ background: transparent url(../content/images/submitButton.png) no-repeat; height: 50px; width: 95px; }
#contactForm div input{ background-color: transparent; border: 0; color: #7e8c97; font-size: 22px; margin: 10px 0 0 5px; padding: 0; width: 320px; }
#contactForm div textarea{ color: #7e8c97; border: 0; font-size: 22px; height: 135px; margin: 10px 0 0 5px; width: 320px; }
#contactForm div input.submitbutton{ color: #fff; cursor: pointer; margin: 6px 0 0 2px; width: 90px; }
/*CONTACT END*/