/* CSS Document */
/* ############### tales.be css framework  (by kvd) ###############  */
/* ############### c.016.products.css ############### */
/*
contains:
	specific rules for the following templates:
		products landingpage
		products detailpage
*/	


/* ##### PRODUCT LANDING #### */
#productlanding{
	display: block;
	width: 960px;
	text-align: center !important;
}

.productrow{   display: block; height: 205px; width: 960px; margin-bottom: 1em; padding-top: 3em;  }
	#IE7 .productrow{text-align: center }


.productcontainer{
	display: inline-block;
	/*float: left;*/
	width: 300px;
	height: 205px;
	text-align: center;
	color: #fff;
	margin-left: auto;
	margin-right: auto;
}

	#IE6 .productcontainer,
	#IE7 .productcontainer{
		/*float: left;*/
		display: inline;
		margin: auto;
	}

 #productlanding .panelproductlanding{
 		display: block;
		background-image: url(/websites/25/uploads/image/templates/basics/products.landing.panels.png);
		background-repeat: no-repeat;
		width: 187px;
		height: 35px;
		padding-top: 15px;
		margin-left: 55px;
		margin-top: -25px;
		position: relative;
		z-index: 10;
		text-decoration: none;
		color: #000;
		font-weight: bold;
 }
 	
 	#IE6 #productlanding .panelproductlanding{		background-image: url(/websites/25/uploads/image/templates/basics/products.landing.panels.gif);}
 	#IE6  #productlanding .panelproductlanding,
	#IE7  #productlanding .panelproductlanding{ margin-left: 0}
	
		#productlanding #young   {		background-position: 0 0; color: #fff;	}
		#productlanding #flavour {		background-position: 0 -100px; color: #fff;	}
		#productlanding #fitness {		background-position: 0 -200px; color: #fff;	}
		#productlanding #housecat{		background-position: 0 -300px; color: #fff;	}
		#productlanding #oldies  {		background-position: 0 -400px; color: #fff;	}
	
		 #productlanding .panelproductlanding:link,  #productlanding .panelproductlanding:visited{ color: #fff}
		 #productlanding .panelproductlanding:hover,  #productlanding .panelproductlanding:active{ color: #000 !important}
	
/* ##### PRODUCT DETAIL #### */

#productdetailcontent{
	color:  #fff;
}

#productdetailcontent .packshot{
	display: block;
	float: right;
}

#productdetailcontent #tabpanel{}


#tabscontainer{
	margin-left: 15px;

}
.tab{
	display: block;
	float: left;
	margin-right:  -15px;
	cursor: pointer;
	/*background-color: orange !important;
	border:  1px solid black;*/
}

.panelsubtab{
	display: block;
	width: 660px;
}




.tab .frontbumper{
		display: block;
		float: left;
		background: url(/websites/25/uploads/image/templates/basics/tabpanel.tabs.png) no-repeat -0px 0;
		font-size: 1em;
		font-weight: normal;
		color:  #fff;
		padding:9px 0 0 30px;	
		height: 21px;
}

	#IE6 .tab .frontbumper{	background-image: url(/websites/25/uploads/image/templates/basics/tabpanel.tabs.gif);}
	#IE7 .tab .frontbumper{	height: 18px; padding: 9px 0 3px 30px;}
		

	.blue   .tab .frontbumper{	background-position: 0 -100px;}	
	.green  .tab .frontbumper{	background-position: 0 0;}	
	.orange .tab .frontbumper{	background-position: 0 -200px;}	
	.purple .tab .frontbumper{	background-position: 0 -300px;}
	
	
	
	
	.tab:hover .frontbumper, #tabscontainer .selected .frontbumper{background-position: -1000px 0;}
		
		.blue   .tab:hover .frontbumper, .blue   #tabscontainer .selected .frontbumper{	background-position: -1000px -100px;}	
		.green  .tab:hover .frontbumper, .green  #tabscontainer .selected .frontbumper{	background-position: -1000px 0;}	
		.orange .tab:hover .frontbumper, .orange #tabscontainer .selected .frontbumper{	background-position: -1000px -200px;}	
		.purple .tab:hover .frontbumper, .purple #tabscontainer .selected .frontbumper{	background-position: -1000px -300px;}
	
	
	
	

.tab .backbumper{
	
		display: block;
		float: left;
		width:  20px;
		height: 20px;
		padding: 10px 0 0 10px;
		background: url(/websites/25/uploads/image/templates/basics/tabpanel.tabs.png) no-repeat -930px 0;
}

		#IE6 .tab .backbumper{		background-image: url(/websites/25/uploads/image/templates/basics/tabpanel.tabs.gif) !important;}


	.blue   .tab .backbumper{	background-position: -930px -100px;}	
	.green  .tab .backbumper{	background-position: -930px 0;}	
	.orange .tab .backbumper{	background-position: -930px -200px;}	
	.purple .tab .backbumper{	background-position: -930px -300px;}
	
	
	
		.tab:hover .backbumper, #tabscontainer .selected .backbumper{background-position: -1930px 0;}
		
		
				.blue   .tab:hover .backbumper, .blue   #tabscontainer .selected .backbumper{	background-position: -1930px -100px;}	
				.green  .tab:hover .backbumper, .green  #tabscontainer .selected .backbumper{	background-position: -1930px 0;}	
				.orange .tab:hover .backbumper, .orange #tabscontainer .selected .backbumper{	background-position: -1930px -200px;}	
				.purple .tab:hover .backbumper, .purple #tabscontainer .selected .backbumper{	background-position: -1930px -300px;}


.panelsubtab .tabpanelcontent{
	display: block;
	width: 620px;
	padding:  20px 20px 10px 20px;
	background: url(/websites/25/uploads/image/templates/basics/tabpanel.paneltop.png) no-repeat;
}
	#IE6 .panelsubtab .tabpanelcontent{background-image: url(/websites/25/uploads/image/templates/basics/tabpanel.paneltop.gif); }
	
	.blue   .panelsubtab .tabpanelcontent{	background-position: 0 -800px;}	
	.green  .panelsubtab .tabpanelcontent{	background-position: 0 0;}	
	.orange .panelsubtab .tabpanelcontent{	background-position: 0 -1600px;}	
	.purple .panelsubtab .tabpanelcontent{	background-position: 0 -2400px;}

.panelsubtab .tabpanelcontentstopper{
	display: block;
	width: 660px;
	height: 20px;
	background: url(/websites/25/uploads/image/templates/basics/tabpanel.panelbottom.png) no-repeat;
}

	#IE6 .panelsubtab .tabpanelcontentstopper{
		background-image: url(/websites/25/uploads/image/templates/basics/tabpanel.panelbottom.gif);
	}


	.blue   .panelsubtab .tabpanelcontentstopper{	background-position: 0 -100px;}	
	.green  .panelsubtab .tabpanelcontentstopper{	background-position: 0 0;}	
	.orange .panelsubtab .tabpanelcontentstopper{	background-position: 0 -200px;}	
	.purple .panelsubtab .tabpanelcontentstopper{	background-position: 0 -300px;}



.panelsubtab .tabpanelcontent h2{ color: #fff; margin-bottom: 1em;}

.tabpanelcontent table{
	margin-bottom: 1em;
}
.tabpanelcontent thead th{
	font-weight: bold;
}
.tabpanelcontent .row1{	background-color: #A2CE21;	color: #175B0D;}
.tabpanelcontent .row2{	background-color: #5C9D21;	color: #fff;}

	
		.blue   .tabpanelcontent .row1{	background-color: #75A8E7;	color: #16457A;}
		.blue   .tabpanelcontent .row2{	background-color: #527CAA;	color: #fff;}
		.green  .tabpanelcontent .row1{	background-color: #A2CE21;	color: #175B0D;}
		.green  .tabpanelcontent .row2{	background-color: #5C9D21;	color: #fff;}
		.orange .tabpanelcontent .row1{	background-color: #F7B227;	color: #7A1F16;}
		.orange .tabpanelcontent .row2{	background-color: #E25F07;	color: #fff;}
		.purple .tabpanelcontent .row1{	background-color: #AE94EB;	color: #3A236F;}
		.purple .tabpanelcontent .row2{	background-color: #6C52A9;	color: #fff;}