/* 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:-28px;
}

.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.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;
	overflow:hidden;
	width: 658px;
	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;
	
	-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;
}

/* 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 -102px;}
#t1:hover 	{ background-position:0px 0px; border:none; }
#t1:active	{ background-position:0px 0px; border:none;}
#t1.active	{ background-position:0px 0px !important; border:none; }

#t2			{ background-position:-103px -102px;}
#t2:hover 	{ background-position:-103px 0px; border:none;}
#t2:active	{ background-position:-103px 0px; border:none; }
#t2.active	{ background-position:-103px 0px !important; border:none; }

#t3			{ background-position:-203px -102px;}
#t3:hover 	{ background-position:-203px 0px; border:none; }
#t3:active	{ background-position:-203px 0px; border:none; }
#t3.active	{ background-position:-203px 0px !important; border:none; }

#t4			{ background-position:-303px -102px;}
#t4:hover 	{ background-position:-303px 0px; border:none; }
#t4:active	{ background-position:-303px 0px; border:none; }
#t4.active	{ background-position:-303px 0px !important; border:none; }

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

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

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

#t8			{ background-position:-703px -102px;}
#t8:hover 	{ background-position:-703px 0px; border:none; }
#t8:active	{ background-position:-703px 0px; border:none; }
#t8.active	{ background-position:-703px 0px !important; border:none; }

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

#t10		{ background-position:-903px -102px;}
#t10:hover 	{ background-position:-903px 0px; border:none; }
#t10:active	{ background-position:-903px 0px; border:none; }
#t10.active	{ background-position:-903px 0px !important; border:none; }

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

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

#t13		{ background-position:-1220px -102px;}
#t13:hover 	{ background-position:-1220px 0px; border:none;}
#t13:active	{ background-position:-1220px 0px; border:none; }
#t13.active	{ background-position:-1220px 0px !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; 
}

/* 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: -20px auto;
	padding: 5px 0 0px 0;
	line-height:12px;
}

.footer2 span{
	font-size:10px;
	line-height:12px;
	color:#009964;
	margin-left:85px;
}