/*
------------------------------------------------
Caddyhome style sheet products
Author:   Sibran Lens
Version:  5 september 2005
Overview: - Products
------------------------------------------------ */

/*	  PRODUCTS
		- bevat alles voor productweergave:
			~ general
			~ duo
			~ trio
			~ quatro
			~ ppFestival
			~ chalc promotions
------------------------------------------------ */


/*    GENERAL
------------------------------------------------ */

table.productsGeneral, table.productsGeneral tr {  /* algemene stijl van gehele tabel */
	font-family: "Tahoma", Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
}

table.productsGeneral {
	width: 432px;
}

table.productOrder { /* tabel met winkelmandje, aantal te bestellen */
	margin-top: 6px;
	width: 100px;
}

td.productsImg {
	width: 96px;
	height: 96px;
	text-align: left;
}

td.productsSeperator { /* lijn tussen productblokken */
	width: 1px;
	background-color:#999999;
	background-image:url(/_images/general/pixel_999.gif);
	background-repeat:repeat-x;
	vertical-align: top;
}

input.products {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	width: 17px;
	border: 1px solid #666;
	padding: 1px 2px 1px 2px;
}

.prodPrice {
	font-size: 11px;
	color: #CC0000;
	font-weight: bold;
	padding: 0 0 3px 0;
}

.prodPriceCorrection { /* prijs doorstreept */
	font-size: 11px;
	color: #666;
	font-weight: bold;
	padding: 0 5px 3px 0;
	text-decoration: line-through;
	float: left;
}

.promoLeft { /* promoblokje, linkerboog */
	background-image: url(/_images/general/bg_promo_left.gif);
	background-repeat: no-repeat;
	width: 2px;
	height: 18px;
	float: left;
}

.promoCenter { /* promoblokje, midden, veel uitz. onderaan op quatro, trio, ... */
	font-size: 11px;
	color: #FFFFFF;
	font-weight: bold;
	background-color: #CC0000;
	height: 16px;
	padding: 1px 25px 0 8px;
	float: left;
}

.promoRight { /* promoblokje, rechterboog */
	background-image: url(/_images/general/bg_promo_right.gif);
	background-repeat: no-repeat;
	width: 2px;
	height: 18px;
	float: left;
}

.promoInfo { /*  infoblokje waar afb. in komt te staan  */ 
	padding: 2px 2px 0px 10px;
	float: left;
	background-color: #CC0000;
	height: 15px;
	cursor:pointer;
	cursor:hand;
}

.promoDummy { /* wordt gebruikt om andere cellen evenhoog te houden als diegene met promo */
	height: 18px;
	width: 100px;
}

.ppLeft { /* center wordt per aantal van producten apart bepaald, bijv. .duoppCenter */
	background-image:  url(/_images/general/bg_pp_left.gif);
	background-repeat: no-repeat;
	width: 19px;
	height: 18px;
	float: left;
}

.ppRight {
	background-image: url(/_images/general/bg_pp_right.gif);
	background-repeat: no-repeat;
	height: 18px;
	width: 2px;
	float: left;
}

.ppPromoLeft { /* promoties pluspunten met extra uitleg adv overliggende div, center apart bepaald */
	background-image:  url(/_images/general/bg_pp_promo_left.gif);
	background-repeat: no-repeat;
	width: 25px;
	height: 18px;
	float: left;
}

.ppPromoRight {
	background-image: url(/_images/general/bg_pp_promo_right.gif);
	background-repeat: no-repeat;
	height: 18px;
	width: 2px;
	float: left;
}

.promoWinesLeft { /* promoties wijn */
	background-image: url(/_images/general/bg_winepromo_left.gif);
	background-repeat: no-repeat;
	width: 2px;
	height: 18px;
	float: left;
}

.promoWinesRight {
	background-image: url(/_images/general/bg_winepromo_right.gif);
	background-repeat: no-repeat;
	width: 2px;
	height: 18px;
	float: left;
}

.promoPurpleLeft { /* promoties wijn */
	background-image: url(/_images/general/bg_purplepromo_left.gif);
	background-repeat: no-repeat;
	width: 2px;
	height: 18px;
	float: left;
}

.promoPurpleRight {
	background-image: url(/_images/general/bg_purplepromo_right.gif);
	background-repeat: no-repeat;
	width: 2px;
	height: 18px;
	float: left;
}

/*    DUO
------------------------------------------------ */

td.duo {
	width: 215px;
	vertical-align: top;
}

table.duo {
	width: 215px;
}

td.duoDescription { /* td met prijs en winkelmandje enzo */
	width: 114px;
	padding: 15px 0 0 5px;
	vertical-align: top;
}

.duoTitle {
	height: 25px;
	width: 208px;
	padding: 2px 2px 2px 5px;
}

.duoPromo {
	background-color: #F6CCCC;
	padding: 2px 0 0 3px;
}

.duoExtra {
	width: 100%;
	height: 16px;
	padding: 5px 0 0 6px;
}

.duoPromoLayerRed {
	font-size: 11px;
	position: absolute;
	z-index: 2;
	background-color:#F6CCCC;
	width: 205px;
	height: 75px;
	padding: 5px;
	visibility:hidden;
}

.duoPromoLayerRed img {
	padding-right: 10px;
}

.duoPromoLayerGrey {
	font-size: 11px;
	position: absolute;
	z-index: 100;
	background-color:#E2E2E2;
	width: 205px;
	height: 75px;
	padding: 5px;
	visibility:hidden;
}

.duoppCenter { /* .duoppLeft en .duoppRight bovenaan, deze wordt apart gehouden om ev. width te kunnen geven */
	background-color: #666;
	height: 16px;
	float: left;
	font-size: 12px;
	color: #FFF;
	padding: 2px 6px 0 6px;
}

.duoppPromoCenter { /* pp promo met div-uitleg, deze wordt apart gehouden om ev. width te kunnen geven */
	float: left;
	background-color: #CC0000;
	height: 16px;
	font-size: 12px;
	color: #FFF;
	font-weight: bold;
	padding: 2px 6px 0 6px;
}

.duoPromoWinesCenter { /* wines promo met div-uitleg, deze wordt apart gehouden om ev. width te kunnen geven */
	font-size: 12px;
	color: #FFF;
	font-weight: bold;
	background-color: #73A600;
	height: 16px;
	padding: 2px 4px 0 4px;
	float: left;	
}

.duoPromoWinesCenter img { /* voor info icoontje */
	padding: 1px 6px 0 0;
	float: left;
}

.duoPromoPurpleCenter { /* wines promo met div-uitleg, deze wordt apart gehouden om ev. width te kunnen geven */
	font-size: 12px;
	color: #FFF;
	font-weight: bold;
	background-color: #9966CC;
	height: 16px;
	padding: 2px 4px 0 4px;
	float: left;	
}

.duoPromoPurpleCenter img { /* voor info icoontje */
	padding: 1px 6px 0 0;
	float: left;
}


/*    TRIO
------------------------------------------------ */

td.trio {
	width: 143px;
	vertical-align: top;
	padding: 0;
}

td.trioDescription {
	width: 114px;
	padding: 15px 0 0 5px;
	vertical-align: top;
}

.trioImg {
	width: 143px;
	height: 96px;
	text-align: left;
	padding: 0;
}

.trioTitle {
	width: 138px;
	padding: 2px 1px 5px 3px;
	height: 32px
}

.trioProdPrice {
	font-size: 11px;
	color: #CC0000;
	font-weight: bold;
	padding: 3px 0 3px 3px;
}

.trioProdPriceCorrection {
	font-size: 11px;
	color: #666;
	text-decoration: line-through;
	font-weight: bold;
	padding: 3px 8px 3px 3px;
	float: left;
}

.trioPromo {
	background-color: #F6CCCC;
	padding: 0 0 0 3px;
}

.trioExtra {
	width: 131px;
	height: 16px;
	padding: 5px 0 0 0px;
}

.trioPromoLayerRed {
	font-size: 11px;
	position: absolute;
	z-index: 100;
	background-color:#F6CCCC;
	width: 133px;
	height: 180px;
	padding: 5px;
	visibility:hidden;
}

.trioPromoLayerRed img {
	padding-bottom: 5px;
}

.trioPromoLayerGrey {
	font-size: 11px;
	position: absolute;
	z-index: 100;
	background-color:#E2E2E2;
	width: 133px;
	height: 180px;
	padding: 5px;
    visibility:hidden;
}

.trioPromoCenter {
	font-size: 11px;
	color: #FFFFFF;
	font-weight: bold;
	background-color: #CC0000;
	height: 16px;
	width: 99px;
	padding: 1px 8px 0 8px;
	float: left;
}

.trioppCenter {
	background-color: #666;
	height: 16px;
	width: 110px;
	float: left;
	font-size: 12px;
	color: #FFF;
	padding: 2px 6px 0 6px;
}

.trioppPromoCenter { /* pp promo met div-uitleg, deze wordt apart gehouden om ev. width te kunnen geven */
	float: left;
	background-color: #CC0000;
	height: 16px;
	font-size: 12px;
	width: 104px;
	color: #FFF;
	font-weight: bold;
	padding: 2px 6px 0 6px;
}

.trioPromoWinesCenter { /* wines promo met div-uitleg, deze wordt apart gehouden om ev. width te kunnen geven */
	float: left;
	background-color: #73A600;
	height: 16px;
	font-size: 12px;
	width: 127px;
	color: #FFF;
	font-weight: bold;
	padding: 2px 6px 0 6px;
}

.trioPromoWinesCenter img { /* voor info icoontje */
	padding: 1px 6px 0 0;
	float: left;
}

.trioPromoPurpleCenter { /* wines promo met div-uitleg, deze wordt apart gehouden om ev. width te kunnen geven */
	float: left;
	background-color: #9966CC;
	height: 16px;
	font-size: 12px;
	width: 127px;
	color: #FFF;
	font-weight: bold;
	padding: 2px 6px 0 6px;
}

.trioPromoPurpleCenter img { /* voor info icoontje */
	padding: 1px 6px 0 0;
	float: left;
}


/*    QUATRO
------------------------------------------------ */

td.quatro {
	width: 107px;
	vertical-align: top;
	padding: 0;
}

td.quatroDescription {
	width: 114px;
	padding: 15px 0 0 5px;
	vertical-align: top;
}

.quatroImg {
	width: 107px;
	height: 96px;
	text-align: center;
	vertical-align: middle;
	padding: 0;
}

.quatroTitle {
	width: 103px;
	padding: 2px 1px 8px 3px;
	height: 32px
}

.quatroProdPrice {
	font-size: 11px;
	color: #CC0000;
	font-weight: bold;
	padding: 3px 0 2px 3px;
}

.quatroProdPriceCorrection {
	font-size: 11px;
	color: #666;
	text-decoration: line-through;
	font-weight: bold;
	padding: 3px 2px 2px 3px;
	float: left;
}

.quatroPromo {
	background-color: #F6CCCC;
	padding: 0 0 1px 3px;
	margin-bottom: -1px;
}

.quatroExtra {
	width: 107px;
	height: 16px;
	padding: 6px 0 3px 0px;
}

.quatroPromoLayerRed {
	font-size: 11px;
	position: absolute;
	z-index: 100;
	background-color:#F6CCCC;
	width: 97px;
	height: 193px;
	padding: 5px;
	visibility:hidden;
}

.quatroPromoLayerRed img {
	padding-bottom: 5px;
}

.quatroPromoLayerGrey {
	font-size: 11px;
	position: absolute;
	z-index: 100;
	background-color:#E2E2E2;
	width: 97px;
	height: 110px;
	padding: 5px;
    visibility:hidden;
}

.quatroPromoDummy { /* wordt gebruikt om andere cellen evenhoog te houden als diegene met promo */
	height: 34px;
	width: 107px;
}

.quatroPromoLeft {
	background-image: url(/_images/general/bg_promo_left.gif);
	background-repeat: no-repeat;
	width: 2px;
	height: 18px;
	float: left;
	margin-top: 16px;
}

.quatroPromoCenter {
	font-size: 11px;
	color: #FFFFFF;
	font-weight: bold;
	background-color: #CC0000;
	height: 16px;
	width: 87px;
	padding: 1px 8px 0 8px;
	float: left;
	margin-top: 16px;
}

.quatroPromoRight {
	background-image: url(/_images/general/bg_promo_right.gif);
	background-repeat: no-repeat;
	width: 2px;
	height: 18px;
	float: left;
	margin-top: 16px;
}

.quatroPromoGadget { /*voor de promo met dubbel lijn */
	font-size: 11px;
	color: #FFFFFF;
	font-weight: bold;
	background-image: url(/_images/general/bg_promo_quatro_special.gif);
	background-repeat: no-repeat;
	background-position: right top;
	height: 31px;
	width: 91px;
	padding: 2px 8px 0 8px;
}

.quatroPP {	/*   pluspunten blokje   */
	z-index:120;
	width: 107px;
	text-align:right;
	position:absolute;
	color: #FFFFFF;
}

.quatroPPExtra {
	width: 107px;
	height:31px;
	background-image:url(/_images/general/bg_pp_promo_quatro.gif);
	background-repeat:no-repeat;
	color:#FFF;
	font-size:12px;
	font-weight:bold;
	text-align: center;
	background-position:bottom;
	padding-top: 2px;
}

.quatroPPGrey {	/*   pluspunten blokje gedeelte met aantal pluspunten in (grijze achtergrond) */
	background-color: #666666;
	height: 30px;
	text-align:center;
	width: 34px;
	float: right;
	padding: 1px 3px 2px 3px;
}

.quatroPPRed {	/*   pluspunten blokje gedeelte met "plus" in (rode achtergrond)  */
	background-color: #CC0000;
	height: 13px;
	text-align: center;
	width: 20px;
	float: right;
	padding: 18px 3px 2px 3px;
}

.quatroPromoWinesCenter { /* wines promo met div-uitleg, deze wordt apart gehouden om ev. width te kunnen geven */
	float: left;
	background-color: #73A600;
	height: 16px;
	font-size: 12px;
	text-align: center;
	width: 97px;
	color: #FFF;
	font-weight: bold;
	padding: 2px 3px 0 3px;
	margin-top: 16px;
}

.quatroPromoWinesLeft { /* promoties wijn */
	background-image: url(/_images/general/bg_winepromo_left.gif);
	background-repeat: no-repeat;
	width: 2px;
	height: 18px;
	float: left;
	margin-top: 16px;
}

.quatroPromoWinesRight {
	background-image: url(/_images/general/bg_winepromo_right.gif);
	background-repeat: no-repeat;
	height: 18px;
	width: 2px;
	float: left;
	margin-top: 16px;
}

.quatroPromoWinesCenter img { /* voor info icoontje */
	padding: 1px 6px 0 0;
	float: left;
}

.quatroPromoPurpleCenter { /* wines promo met div-uitleg, deze wordt apart gehouden om ev. width te kunnen geven */
	float: left;
	background-color: #9966CC;
	height: 16px;
	font-size: 12px;
	text-align: center;
	width: 97px;
	color: #FFF;
	font-weight: bold;
	padding: 2px 3px 0 3px;
	margin-top: 16px;
}

.quatroPromoPurpleLeft { /* promoties wijn */
	background-image: url(/_images/general/bg_purplepromo_left.gif);
	background-repeat: no-repeat;
	width: 2px;
	height: 18px;
	float: left;
	margin-top: 16px;
}

.quatroPromoPurpleRight {
	background-image: url(/_images/general/bg_purplepromo_right.gif);
	background-repeat: no-repeat;
	height: 18px;
	width: 2px;
	float: left;
	margin-top: 16px;
}

.quatroPromoPurpleCenter img { /* voor info icoontje */
	padding: 1px 6px 0 0;
	float: left;
}

/*    PPFESTIVAL
------------------------------------------------ */

.ppfestivalPromoDummy { /* wordt gebruikt om andere cellen evenhoog te houden als diegene met promo */
	height: 40px;
	width: 107px;
}

.ppfestival {
	display:none;
	z-index:120;
	width: 107px;
	text-align:right;
	position:absolute;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
	margin: 0;
}

.ppfestivalContent {
	background-image:url(/_images/general/bg_ppFestival.gif);
	background-position: right;
	width: 27px;
	height: 16px;
	text-align: left;
	padding: 2px 0 0 23px;
	margin-top: 0px;
	float: right;
}

#ppFestivalBottom {
	width: 350px;
	height: 39px;
	margin-top: 15px;
	background-image:url(/_images/general/bg_ppFestivalBottom.gif);
	background-repeat:no-repeat;
	font-weight: bold;
	padding: 13px 0px 0px 82px;
}

/*    CHALC PROMOTIONS
------------------------------------------------ */

.chalc {
	width: 432px;
	/* height: 109px; /* hoogte bepalen nodig voor firefox om grijze achtergrond te krijgen bij content, mag aangepast worden */
	background-color:#F2F2F2;
	background-image:url(/_images/general/bg_pp_chalc_promo.gif);
	background-repeat:no-repeat;
	background-position:top;
}

.chalcBG {
	background-color:#F2F2F2;
}

.chalcHeaderLeft {
	width: 286px;
	float:left;
	font-weight:bold;
	color:#666;
	padding:4px 0 0 0;
	font-size:11px;
}

.chalcHeaderRight {
	width: 110px;
	float:left;
	color:#CC0000;
	font-weight:bold;
	padding:4px 0 0 0;
}

.chalcContentLeft {
	width: 270px;
	float:left;
	color:#333;
	padding:8px 16px 10px 36px;
	font-size:11px;
}

.chalcContentRight {
	width: 110px;
	float:right;
	padding:15px 0 10px 0;
}

/*    CHALC HOMEPAGE
------------------------------------------------ */

table.chalcHomepage {
	width: 432px;
	font-family:Arial, Helvetica, sans-serif;
}

table.chalcHomepage td {
	vertical-align: top;
}

table.chalcHomepage p {
	margin: 0;
	padding: 0;
}

.chalcHomepageTitle {
	font-size: 12px;
	color: #636363;
	font-weight:bold;
	padding: 0 0 3px 0;
}

.chalcHomepagePrice {
	font-size: 12px;
	color: #E40026;
	font-weight:bold;
	padding: 0 0 3px 0;
}

.chalcHomepageRef {
	font-size: 10px;
	color: #757575;
	font-weight:bold;
}