/*
Project:		Online.nl Pakketkiezer
File:			css/pakketkiezer.css
Description:	Pakketkiezer css file
Author:			Frank Broersen - Pit Group
Created:		12/01/2010
Last update:	14/01/2010
*/

#pakketkiezer {
	background: url(http://www.online.nl/images/v2/pakketkiezer/bg-pakketkiezer.jpg) no-repeat 0 0;
	height: 518px;
	margin: 0;
	position: relative;
	text-align: left;
	width: 960px;
}
	#pakketkiezer #introduction { padding: 10px 0 52px; width: 717px; height: 109px;} /* intro paragraph */
	#pakketkiezer #introduction h1 { line-height: normal; color: #c821ac; font-weight: normal; font-size: 30px; margin-bottom: 0; }

/* product wrapper */
#products {
	float: left;
	height: 343px;
	width: 741px;
	position: relative;
}
	/* single product */
	.product {
		cursor: pointer;
		display: block;
		float: left;
		height: 120px;
		padding: 21px 10px 10px 10px;
		position: relative;
		width: 219px;
	}
		.product h2 {
			color: #50404d;
			font: bold 13px/15px Verdana;
			margin: 0 0 10px 35px;
		}
		.product ul { margin: 0; padding: 0; }
			.product ul li {
				background: none;
				color: #50404d;
				display: block;
				font: normal 11px/15px Verdana;
				line-height: 18px;
				padding: 0 0 5px 35px;
				position: relative;
			}
				.product ul li i { /* dashes to the left of the li */
					background: #50404d;
					display: block;
					height: 1px;
					left: 3px;
					width: 3px;
					position: absolute;
					top: 10px;
						_display: none;
				}

/* always usefull */
.clear { clear: left; }

/* ticks */
.tick {
	background: url(http://www.online.nl/images/landing/pakketkiezer/tick.png) no-repeat 0 0;
		_background: url(http://www.online.nl/images/landing/pakketkiezer/tick.gif) no-repeat 0 0; /* ie6 no need for png */
	display: none;
	height: 25px;
	left: 15px;
	position: absolute;
	top: 14px;
	width: 25px;
}
	/* different styling for different ticks */
	.b { background-position: 0 0; }
	.g { background-position: 0 -30px; }
	.p { background-position: 0 -60px; }

	/* for showing the default ticked ticks */
	.v { display: block; }

/* shoppingcart on the right */
#shoppingCart {
	float: left;
	width: 210px;
}
	/* products in the cart */
	#items {
		height: 186px;
		margin: 15px 0 0;
	}
		#items div { /* single item */
			padding: 0 0 4px 20px;
			position: relative;
		}
			#items div a {
				position: absolute;
				right: 3px;
				top: 1px;
			}
			#items div i { /* item tick */
				background: url(http://www.online.nl/images/landing/pakketkiezer/tick.png) no-repeat 0 0;
					_background: url(http://www.online.nl/images/landing/pakketkiezer/tick.gif) no-repeat 0 0; /* ie6 */
				display: block;
				height: 15px;
				left: 0;
					_left: -25px; /* ie6 */
				position: absolute;
				top: 0;
				width: 15px;
			}

			/* different styling for different ticks */
			#items #c-internet-4  i,
			#items #c-internet-20 i{ background-position: 0 -128px }
			#items #c-bellen-o i,
			#items #c-bellen-w i { background-position: 0 -113px }
			#items #c-hdtv-f i,
			#items #c-hdtv-e i { background-position: 0 -83px }
			
			
			/* default disabled */
			#items #g-mbi { display: none;}
			#items #g-bellen { display: none;}
			#items #g-bundelkorting { display: none;}
			#items #g-aansluitkosten { display: none;}
			#items #g-kodak { display: none;}
			/* different styling for different ticks */
			#items #g-mbi i { background-position: 0 -98px }
			#items #g-bellen i { background-position: 0 -98px }
			#items #g-wifi i { background-position: 0 -98px }
			#items #g-bundelkorting i { background-position: 0 -98px }
			#items #g-virusfilter i { background-position: 0 -98px }
			#items #g-aansluitkosten i { background-position: 0 -98px }
			#items #g-kodak i { background-position: 0 -98px }
			#items #g-cadeau i { background-position: 0 -98px }

			/* for hiding on startup */
			#items .h { display: none; }

	/* price display */
	.p-promo { /* promoprice */
		color: #50404d ;
		font: bold 13px/18px Verdana;
	}
		.p-promo .prijs {
			color: #c821ac;
			font: bold 25px/35px Verdana;
		}
	.p-list { /* listprice */
		margin: 0 0 8px;
	}
		.p-list .prijs {
			color: #c821ac;
			font-weight: bold;
		}
	.p-promo-prijs,
	.p-list .prijs {
		display: inline;
	}

/* The "bellen" overlay, is shown when the internet 4 product is selected */
#nb {
	background: #fff url(http://www.online.nl/images/landing/pakketkiezer/gradient.jpg) repeat-x 0 1px;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	display: none;
	height: 187px;
	left: 230px;
	padding-top: 155px;
	position: absolute;
	text-align: center;
	top: 0;
	width: 226px;
}

/* hide the second price display on startup */
#p-change { display: none; }

/* hide the lijnhuur display on startup */
#p-lijnhuur1 { visibility: hidden; }
#p-lijnhuur2 { visibility: hidden; }

/* Top right block */
#popular {
	width: 205px;
	position: absolute;
	right: 9px;
	top: 59px;
	line-height: 18px;
}
	#popular h2 {
		color: #2396e7;
		font: bold 13px/18px Verdana;
		margin: 0 0 5px;
	}
	#popular a {
		font: normal 11px/18px Verdana;
		text-decoration: none;
	}
		#popular a span {
			color: #559ad0;
			font-weight: bold;
		}
	#popular a:hover { color: #50404d; text-decoration: underline; }

/* "Bent u al klant " */
#klant {
	width: 231px;
	position: absolute;
	right: 0;
	top: 10px;
}

/* Adjust the default padding to fit the design */
div#contentwrap { padding: 0 0 0 0; }

div#footercontainer { margin-top: 0px; }


#vergelijk-buttons {
	width: 717px;
	height: 40px;
	clear: both;
}

#vergelijk-buttons .buttonholder {
	width: 239px;
	padding: 12px 0 0 0;
	text-align: center;
	float: left;
}

#p-link {
	display: block;
	text-align: center;
	margin-right: 7px;
}

img.highlight-button	{
	width: 231px;
	height: 109px;
	float: right;
}

div.kassabon-navigatie a    {
    float: left;
}