/* Rhino */
#main {
	position:relative;
	height:440px;
	overflow:hidden;
	border:1px solid #ddd;
	width:900px;
	margin:auto;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

#pages {
	width:9999em;
	position:absolute;
	height:400px;
}

.splash {
	float:left;
	width:1000px;
	height:500px;
	background-repeat:no-repeat;
	background-position:0;
	margin-left:-50px;
	margin-top:-32px;
}

.page {
	float:left;
	width:1000px;
	height:500px;
	background-repeat:no-repeat;
	background-position:0;
	margin-left:0px;
	margin-top:-35px;
}

.details {
	color:#666;
	float:left;
	font-size:12px;
	margin:440px 0 0 100px;
	padding:10px 60px;

}

.navi_blue_chews {
	float:right;
	padding:90px 215px 0 0;
	width:355px;
	margin-top:-35px;
}

.navi_blue_chews h2 {
	color:#0072BC;
	font-size:22px;
	display:block;
	padding:10px 0;
	margin-bottom:-2px;
}

.navi_blue_chews a {
	color:#666;
	font-size:12px;
	text-decoration:none;
}

.navi_blue_chews p {
	font-size:12px;
	margin-bottom:10px;
}

.navi_blue_chews span {
	color:#0072BC;
	font-weight:800;
}

.navi_blue {
	float:right;
	padding:90px 215px 0 0;
	width:355px;
	margin-top:-35px;
}

.navi_blue h2 {
	color:#0072BC;
	font-size:22px;
	display:block;
	padding:10px 0;
	margin-bottom:-2px;
}

.navi_blue a {
	color:#666;
	font-size:12px;
	text-decoration:none;
}

.navi_blue p {
	font-size:12px;
	margin-bottom:10px;
}

.navi_blue span {
	color:#0072BC;
	font-weight:800;
}

.navi_green {
	float:right;
	padding:120px 215px 0 0;
	width:355px;
	margin-top:-65px;
}

.navi_green h2 {
	color:#009C60;
	font-size:22px;
	display:block;
	padding:10px 0;
	margin-bottom:-2px;
}

.navi_green a {
	color:#666;
	font-size:12px;
	text-decoration:none;
}

.navi_green p {
	font-size:12px;
	margin-bottom:10px;
}

.navi_green span {
	color:#009C60;
	font-weight:800;
}

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/


/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.prevPage {
	background:url(images/left-arrow.gif) no-repeat;
	display:block;
	width:30px;
	height:30px;
	float:left;
	margin:40px 10px;
	cursor:pointer;
	font-size:1px;
}
a.nextPage {
	background:url(images/right-arrow.gif) no-repeat;
	display:block;
	width:30px;
	height:30px;
	float:left;
	margin:40px 10px;
	cursor:pointer;
	font-size:1px;
}
/*a.browse {
	background:url(../images/hori_large2.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	float:left;
	margin:40px 10px;
	cursor:pointer;
	font-size:1px;
}*/

/* right */
/*a.right 				{ background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover 		{ background-position:-30px -30px; }
a.right:active 	{ background-position:-60px -30px; } */


/* left */
/*a.left				{ margin-left: 0px; } 
a.left:hover  		{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }*/

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 	

.scrollable {

	/* required settings */
	position:relative;
	margin:20px auto 3px;
	overflow:hidden;
	width: 700px;
	height:120px;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .main_nav {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
	padding-top:5px;
}

/* single scrollable item */
.scrollable a {
	float:left;
	margin:;
	background-image:url(images/prod_nav2.jpg);
	padding:2px;
	cursor:pointer;
	width:75px;
	height:100px;
	background-repeat: no-repeat;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

/* active item */
.scrollable .active {
	border:2px solid #000;
	z-index:9999;
	position:relative;
}

#thumbs {
	margin:auto;
	width:900px;
	border:1px solid #ddd;
	background:url(images/prod_nav_bottom_bg2.jpg) no-repeat;
	height:218px;
}

#t1, #t2{ width:100px;}
#t3, #t4, #t5, #t6, #t7, #t8, #t9{ width:100px;}
#t10, #t11, #t12{ width: 100px;}

/* CSS sprite for the navigation */

#t0.active { background-position:-21px 0 !important; } 
#t0:hover  { background-position:-21px -180px; } 
#t0:active { background-position:-21px -270px; }

#t1			{ background-position:0px -113px;}
#t1:hover 	{ background-position:0px -2px; border:none; }
#t1:active	{ background-position:0px -2px; border:none;}
#t1.active	{ background-position:0px -2px !important; border:none; }

#t2			{ background-position:-123px -113px;}
#t2:hover 	{ background-position:-123px -2px; border:none;}
#t2:active	{ background-position:-123px -2px; border:none; }
#t2.active	{ background-position:-123px -2px !important; border:none; }

#t3			{ background-position:-239px -112px;}
#t3:hover 	{ background-position:-239px -1px; border:none; }
#t3:active	{ background-position:-239px -1px; border:none; }
#t3.active	{ background-position:-239px -1px !important; border:none; }

#t4			{ background-position:-352px -110px;}
#t4:hover 	{ background-position:-352px 1px; border:none; }
#t4:active	{ background-position:-352px 1px; border:none; }
#t4.active	{ background-position:-352px 1px !important; border:none; }

#t5			{ background-position:-466px -111px;}
#t5:hover 	{ background-position:-466px 0; border:none; }
#t5:active	{ background-position:-466px 0; border:none; }
#t5.active	{ background-position:-466px 0 !important; border:none; }

#t6			{ background-position:-574px -111px;}
#t6:hover 	{ background-position:-574px 0; border:none; }
#t6:active	{ background-position:-574px 0; border:none; }
#t6.active	{ background-position:-574px 0 !important; border:none; }

#t7			{ background-position:-681px -111px;}
#t7:hover 	{ background-position:-681px 0; border:none; }
#t7:active	{ background-position:-681px 0; border:none; }
#t7.active	{ background-position:-681px 0 !important; border:none; }

#t8			{ background-position: -791px -109px; }
#t8:hover 	{ background-position:-791px 2px; border:none; }
#t8:active	{ background-position:-791px 2px; border:none; }
#t8.active	{ background-position:-791px 2px !important; border:none; }

#t9			{ background-position:-901px -111px;}
#t9:hover 	{ background-position:-901px 0; border:none; }
#t9:active	{ background-position:-901px 0; border:none; }
#t9.active	{ background-position:-901px 0 !important; border:none; }

#t10		{ background-position:-1004px -110px;}
#t10:hover 	{ background-position:-1004px 1px; border:none; }
#t10:active	{ background-position:-1004px 1px; border:none; }
#t10.active	{ background-position:-1004px 1px !important; border:none; }

#t11		{ background-position:-1106px -111px;}
#t11:hover 	{ background-position:-1106px 0; border:none; }
#t11:active	{ background-position:-1106px 0; border:none; }
#t11.active	{ background-position:-1106px 0 !important; border:none; }

#t12		{ background-position:-1210px -111px;}
#t12:hover 	{ background-position:-1210px 0; border:none; }
#t12:active	{ background-position:-1210px 0; border:none; }
#t12.active	{ background-position:-1210px 0 !important; border:none; }


/* use a semi-transparent image for the overlay */ 
#overlay {
     background-image:url(../images/white_overlay.png);     
	 color:#ffffff;
	 
}  

/* container for external content. uses vertical scrollbar, if needed */ 
.contentWrap {
    
	 /*overflow-y:auto; */
	 overflow:hidden;
}

/* the overlayed element */
.apple_overlay {
	
	/* initially overlay is hidden */
	display:none;
	
	/* growing background image */
	background-image:url(../images/white_overlay.png);
	
	/* 
		width after the growing animation finishes
		height is automatically calculated
	*/
	width:425px;	
	
	/* some padding to layout nested elements nicely  */
	padding:35px;

	/* a little styling */	
	font-size:11px;
}

/* default close button positioned on upper right corner */
.apple_overlay div.close {
	background-image:url(../images/close.png);
	position:absolute; right:5px; top:5px;
	cursor:pointer;
	height:35px;
	width:35px;
}

.footer2{
	width: 895px;
	margin: -28px auto;
	padding: 5px 0 0px 0;
	line-height:12px;
}

.footer2 span{
	font-size:9px;
	line-height:12px;
	/*color:#009964;*/
	color:#000;
	padding:2px;
}

#splash img{
	bottom: -40px;
    left: 680px;
    position: absolute;
	border: 0 !important;
}

.product_sub_text{
	color:#009c60;
}

.prod_sub_text{
	color:#009c60;	
	clear:both;
	font-size:14px;
}

.main_nav .inner_link{
	display:none;	
}

.chef_multi{
	margin-top:127px;
}

.chef_veggie{
	margin-top:6px;
}

.chef_omega3{
	margin-top:121px;
}

.chef_calci{
	margin-top:149px;
}

.chef_chewyc{
	margin-top:148px;
}

.chef_veggiefruit{
	margin-top:149px;
}

.chef_d3{
	margin-top:169px;
}

.chef{
	font-size:12px;
	color:#009C60;
	line-height:12px;	
}

.d3{
	 bottom: 2px;
    color: #000000 !important;
    font-size: 9px;
    font-weight: normal !important;
    position: relative;
}

.d3_main{
	 bottom: 7px;
    font-size: 12px;
    position: relative;
}

.chef_mark{
	bottom: 2px;
    font-size: 9px;
    position: relative;
	color: #009C60 !important;
}

img#veggie-icons{
	margin-top:21px;
}

.sf-popup{

}