@charset "utf-8";

/*	PROJECTNAAM STYLES
	Author:	Stephan van Opstal, Netvlies
	----------------------------------------------------*/

/*	Table of contents
	=GENERIC
	=FIXES
	=WRAPPERS
	=NAVIGATION
	=USER-CONTENT
	=PRODUCTS
	=HOW
 	----------------------------------------------------*/

/*	=GENERIC
	----------------------------------------------------*/
	* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; }
	img { border: 0; }
	a { outline: 0; }

/*	=FIXES
	----------------------------------------------------*/
	.clr { overflow: hidden; height: 100%; }
	
/*	=WRAPPERS
	----------------------------------------------------*/
	body { background-repeat: no-repeat; background-position: 727px 0;  }
	body.bg-a { background-image: url(../img/bg1.jpg); }
	body.bg-b { background-image: url(../img/bg2.jpg); }
	body.bg-c { background-image: url(../img/bg3.jpg); }
	body.bg-d { background-image: url(../img/bg4.jpg); }
	body.bg-e { background-image: url(../img/bg5.jpg); }
	body.bg-f { background-image: url(../img/bg6.jpg); }
	body.bg-g { background-image: url(../img/bg7.jpg); }
	body.bg-h { background-image: url(../img/bg8.jpg); }
	body.bg-i { background-image: url(../img/bg9.jpg); }
	body.bg-j { background-image: url(../img/bg10.jpg); }

	#home { background: url(../img/bg_home.jpg) no-repeat 550px 0; }
	
	#page-wrapper { width: 1004px; position: relative; }
	
	#col-a { width: 222px; float: left; }
	#col-a .inner { margin-top: 45px; border-right: 1px solid #d4d5db; /* height is calculated with javascript */ }
	#col-a .banner { margin: 30px 0 0 18px; }
	#col-b { width: 505px; position: absolute; top: 0; left: 220px; }
	
	#home #col-b { width: 355px !important; }
	
	.brand { margin: 34px 0 0 45px; }
	
/*	=NAVIGATION
	----------------------------------------------------*/
	#nav_main { list-style: none;}
	#nav_main li { font-size: 18px; line-height: 23px;  }
	#nav_main li a { color: #000; text-decoration: none; font-weight: bold; margin: 0 0 0 15px; padding: 0 0 0 30px; background: url(../img/nav_main_li_bg.gif) no-repeat 0 4px; }
	#nav_main li a.sub:hover, #nav_main li.active a.sub { background-image: url(../img/nav_main_li_bg_over.gif); }
	#nav_main li ul { display: none; }
	#nav_main li ul li { font-size: 14px; color: #009ee0; line-height: 18px; }
	#nav_main li ul li a { color: #009ee0;  background: 0; }
	#nav_main li.active ul { display: block; }
	#nav_main li a:hover, #nav_main li a.active { color: #e2007a; }
	
/*	=USER-CONTENT
	----------------------------------------------------*/
	.user-content { xborder-left: 1px solid #d4d5db; padding: 0 26px 26px 26px; margin: 45px 0 0 0; }
	h1 { font-size: 24px; color: #e2007a; font-weight: bold; margin: 89px 0 0 26px; }
	h2 { font-size: 18px; color: #009ee0; font-weight: bold; }
	
/*	=PRODUCTS
	----------------------------------------------------*/
	#products .products { float: left; width: 313px; margin: 45px 0 0 0; padding: 0 20px 20px 20px; xborder-left: 1px solid #d4d5db; border-right: 1px solid #d4d5db; }
	#products .brands { float: left; width: 130px; margin: 45px 0 0 0; padding: 0 10px 10px 10px; }
	#products .brands p { text-align: center; }
	#products .brands p img { margin: 0 0 20px 0; display: block; margin: 25px auto; }
	#products .product { border-bottom: 1px solid #d4d5db; padding: 0 0 15px 0; margin: 15px 0 0 0; }
	#products .product.first { margin-top: 0; }
	#products .product .vsl { position: relative; text-align: center; background: white; margin: 0 0 10px 0;}
	#products .product .vsl img { vertical-align: bottom; }
	#products .product .vsl .zoom { position: absolute; left: 0; bottom: 0; width: 10px; height: 10px; line-height: 0; font-size: 0; background: url(../img/zoom.gif) no-repeat top left; }
	#products .product .vsl .zoom a { display: block; height: 100%; }
	#products .product p { font-size: 11px; color: #000; }
	#products .brands h2 { position: absolute; top: 95px; left: 370px; width: 140px; }
	
/*	=HOW
	----------------------------------------------------*/
  #how .user-content h2 { color: #009ee0; }