/*
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/landing/pakketkiezer/pakketkiezer.jpg) no-repeat 0 0;
	height: 517px;
	margin: 0;
	position: relative;
	text-align: left;
	width: 960px;
}
	#pakketkiezer p { padding: 72px 0 48px;  } /* intro paragraph */

/* product wrapper */
#products {
	float: left;
	height: 343px;
	width: 711px;
	position: relative;
}
	/* single product */
	.product {
		cursor: pointer;
		display: block;
		float: left;
		height: 141px;
		padding: 21px 10px 10px 10px;
		position: relative;
		width: 209px;
	}
		.product h2 {
			color: #50404d;
			font: bold 13px/15px Verdana;
			margin: 0 0 10px 35px;
		}
		.product ul { margin: 0; }
			.product ul li {
				background: none;
				color: #50404d;
				display: block;
				font: normal 11px/15px Verdana;
				line-height: 18px;
				padding: 0 0 5px 12px;
				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: 240px;
}
	/* products in the cart */
	#items {
		height: 200px;
		padding: 15px 0 0;
	}
		#items div { /* single item */
			padding: 0 0 9px 30px;
			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 }

			/* 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 }

			/* 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-noChange { display: none; }

/* Top right block */
#popular {
	width: 224px;
	position: absolute;
	right: 25px;
	top: 20px;
}
	#popular h2 {
		color: #559ad0;
		font: bold 13px/15px Verdana;
		margin: 0 0 5px;
	}
	#popular a {
		font: normal 11px/15px Verdana;
	}
		#popular a span {
			color: #559ad0;
		}
	#popular a:hover { color: #666; text-decoration: none; }

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

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

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