/*####################
	FONT FACE
####################*/

@font-face {
    font-family: 'ITCAvantGardeGothicStdDemi';
    src: url('fonts/itcavantgardestd-demi-webfont.eot'); /* IE9 Compat Modes */
    src: url('fonts/itcavantgardestd-demi-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/itcavantgardestd-demi-webfont.woff') format('woff'), /* Modern Browsers */
         url('fonts/itcavantgardestd-demi-webfont.ttf') format('truetype'),/* Safari, Android, iOS */
         url('fonts/itcavantgardestd-demi-webfont.svg#ITCAvantGardeGothicStdDemi') format('svg');/* Legacy iOS */
}


/*####################
	GENERAL STYLING
####################*/

body {font: 62.5% Arial, sans-serif; color:#333333; overflow-x:hidden;}

#header-wrapper{
	width:100%;
	border-top:solid 5px #d60059;
}

a {color:#d60059; outline: none;}

a img{border:0;}

.bold{font-weight:bold;}

section{
	margin:0 auto;
	width:960px;
}

article header h1{
	font-size:1.8em;
	font-weight:normal;
	margin-bottom:20px;
	color:#333333;
}	
	
article p{
	margin-bottom:1em;
	font-size:1.3em;
	line-height:1.6em;
	color:#666666;
}

article ul{
	list-style: disc outside;
	margin-left:18px;
	margin-bottom:1em;
}

article li{
	font-size:1.3em;
	list-style: disc outside;
	color:#666666;
	line-height:1.6em;
}

/*####################
	HEADER STYLING
####################*/

#header{
	display:block;
	position:relative;
	margin:0 auto;
	width:960px;
	height:91px;
}

	#header #logo{
		position:absolute;
		top:15px;
	}

	#header nav{
		position:absolute;
		top:38px;
		left:306px;
	}
	
	#header nav ul{
	}	
	
	#header nav li{
		position:relative;
		float:left;
		border-left:solid 1px #cccccc;
	}
	
	#header nav li:first-child{
		border:none;
	}
	
	#header nav li a, #header nav li span{
		display:block;
		padding:3px 14px 7px 14px;
		font-size:1.4em;
		font-weight:bold;
		text-decoration:none;
		color:#333333;
	}

	#header nav li a:hover, #header nav li span:hover{ color:#d60059; }
	#header nav li a:active{ color:#d60059; }
	
	#header #phone-number{
		position:absolute;
		top:34px;
		left:807px;
		padding-left:30px;
		background:url(images/icon-phone.gif) no-repeat left 3px;
		font-size:1.4em;
	}
	
	#header #phone-number h2{font-weight:normal;}
	
	#header .expand{
		display:none;
		position:absolute;
		left:-1px;
		background:url(images/expand-arrow.gif) no-repeat 40px 15px;
		padding-top:27px;
		z-index:30;
	}
	
	#header .expand .submenu{
		width:536px;
		height:255px;
		padding:10px 20px;
		border:solid 1px #cdcdcd;
		background: rgba(255, 255, 255, 0.95);
	}
	#header .over-ons .expand .submenu{ width:360px;}
	
	#header nav li:hover .expand, #header nav li.hovered .expand{display:block;}
	
	#header nav li .expand ul{
		float:left;
		width:170px;
		height:233px;
	}
	
	#header nav li .expand ul li{
		border:none;
	}
	
	#header nav li .expand ul li a{
		width:168px;
		text-decoration:none;
		color:#333333;
		font-size:1.2em;
		font-weight:normal;
		padding:4px 0px;
	}
	
	#header nav li .expand ul li:first-child{
		font-size:1.4em;
		color:#d60059;
	}
	
	#header nav li .expand li a:hover{ color:#d60059; }
 	#header nav li .expand li a:active{ color:#d60059; }
	#header nav li .expand li:first-child{font-size:1.4em;}
	


/*####################
	SLIDER STYLING
####################*/

#slider{
	position:relative;
	width:100%;
	height:400px;
	background:#f5f5f5; 
	z-index:10;
}

	#slider #slider-content{
		width:100%;
		margin:0;
		padding:0;
	}
	
	#slider #slider-content li{
		position:absolute;
		display:none;
		width:100%;
		height:400px;
		text-align:center;		
	}
	
	#slider #slider-content li:first-child{
		display:block;
	}
	
#slider-nav{
	position:absolute;
	height:48px;
	width:100%;
	border-bottom:solid 1px #fff;
	background:rgba(214, 0, 89, 0.90);
	margin:0;
}
	#slider-nav ul{
		position:relative;
		margin:0 auto;
		width:960px;
	}
	
	#slider-nav li{
		float:left;
		background: rgba(255, 255, 255, 0.40);
		margin:17px 5px;
		padding:0px 4px;
		cursor:pointer;
		color:#333333;
		font-size:1.2em;
	}
	
	#slider-nav li:first-child{
		margin-left:0px;
	}
	
	#slider-nav li.active {
		color:#fff;
		background: rgba(0, 0, 0, 0.40);
	}
	
	#slider-nav li#slider-title{
		font-family:ITCAvantGardeGothicStdDemi, Arial;
		font-size:1.4em;
		color:#fff;
		background:none;
		padding:0 0;
		margin-left:15px;
	}
	
	#slider-nav li.active .title{
		display:block;

	}
	
#site-nav{
	position:absolute;
	top:407px;
	width:100%;
	z-index:20;
}	
	#site-nav ul{
		position:relative;
		margin:0 auto;
		width:960px;
	}
	
	#site-nav li, #subheader #title span{
		float:left;
		margin-right:7px;
		background:url(images/btn-site-nav-background.png);
	}
	
	#site-nav li a, #subheader #title a{
		display:block;
		width:228px;
		padding:20px 0px 28px 85px;
	
		font-family:ITCAvantGardeGothicStdDemi, Arial;
		font-size:1.9em;
		text-decoration:none;
		color:#333333;
	}
	
	#site-nav .rtc, #subheader .retailcommunicatie{background:url(images/barcode-rtc.png) no-repeat 2px 1px;}
	#site-nav .atm, #subheader .actiemarketing{background:url(images/barcode-atm.png) no-repeat 2px 1px;}
	#site-nav .ecm, #subheader .e-commerce{background:url(images/barcode-ecm.png) no-repeat 2px 1px;}

	#site-nav li .teaser{
		position:absolute;
		display:none;
		top:-150px;
		left:0px;
		width:890px;
		height:75px;
		padding:29px 20px;
		border:solid 1px #cdcdcd;
		background: rgba(255, 255, 255, 0.95);
		margin-left:1px;
	}
	
	#site-nav li:hover .teaser{
		display:block;
	}
	
	#site-nav li .teaser img{
		float:left;
		margin-right:30px;
		margin-bottom:30px;
	}
	
	#site-nav li .teaser h2{
		color:#d60059;
		font-size:1.8em;
		margin-bottom:4px;
	}
	
	#site-nav li .teaser p{
		color:#333333;
		font-size:1.3em;
	}

/*####################
	CONTENT STYLING
####################*/
	
#content{
	position:relative;
	min-height:241px;
}
	#content.vacatures{
 		min-height:500px;
	}
   

	#content #articles{
		position:relative;
		margin-top:44px;
		margin-left:0px;
		width:560px;
		min-height:300px;
	}

	#content #articles p{
		position:relative;
		width:100%;
		font-size:1.3em;
		line-height:1.6em;
		color:#666666;
	}
	
	#content #articles img{
		margin:10px;
	}
	
	#content #articles .art-img{
		float:left;
		margin:60px 40px 60px 0px;
	}
	

	#content #articles article{
		position:relative;
		display:none;
		margin-bottom:30px;
	}
	
	#content #articles article.active{
		display:block;
	}

	#content aside{
		position:absolute;
		right:0px;
		top:45px;
		width:320px;
	}

	#content aside li span{
		display:block;
		width:280px;
		height:16px;
		background:#f2f2f2;
		padding:12px 10px;
		font-size:1.4em;
	}
	
	#content aside li{
		width:280px;
		height:40px;
		margin-bottom:5px;
		padding-left:10px;
		cursor:pointer;
	}
	
	#content1 aside li:hover span, #content aside li.active span{
		background:#d60059;
		color:#fff;
	}
	
	#content1 aside li:hover, #content aside li.active{
		background:url(images/home-content-nav-arrow.gif) no-repeat;
	}
	

	
#subheader{
	position:relative;
	width:100%;
	min-height:284px;
	background:#f5f5f5 no-repeat top center;
}

#clients-subheader{
	position:relative;
	width:100%;
	height:49px;
}

	breadcrumb ul, #clients-subheader ul, #breadcrumb ul{
		position:relative;
		margin:0 auto;
		width:960px;
	}
	
	#subheader li, #clients-subheader li, #breadcrumb li{
		float:left;
	}
	
	#subheader li a, #clients-subheader li a, #breadcrumb li a{
		display:block;
		font-size:1.2em;
		color:#ffffff;
		text-decoration:none;
		padding:10px 5px 10px 0px;
		margin:6px 0px;
	} 
	
	#subheader #title{
		position:relative;
		margin:0 auto;
		top:198px;
		width:960px;
	}
	
#breadcrumb{
	position:absolute;
	height:48px;
	width:100%;
	border-bottom:solid 1px #fff;
	background:rgba(214, 0, 89, 0.90);
	margin:0;
	z-index:10;
}

#subcontent{
	position:relative;
	width:640px;
	min-height:400px;
	padding:31px 0px 0px 320px;
}

#submenu{
	position:absolute;
	top:22px;
	left:0px;
	width:310px;
}

	#submenu a{
		display:block;
		text-decoration:none;
		color:#333333;
	}
	#submenu a:hover, #submenu a:active, #submenu .active{ color:#d60059; }
 	
	#submenu ul li{
		display:block;
		border-bottom:solid 1px #e8e8e8;
	}
	
	#submenu ul li ul li{
		border:none;
	}
	
	#submenu ul li a {
		font-weight:bold;
		padding:8px 0px;
		font-size:1.4em;
	}
	
	#submenu ul li ul{
		margin-bottom:10px;
	}
	
	#submenu ul li ul li a {
		font-weight:normal;
		color:#666666;
		font-size:1.2em;
		padding:8px 11px;
		background:url(images/submenu-arrow.gif) no-repeat left center;
	}
	
#address{
	position:absolute;
	top:22px;
	left:0px;
	width:310px;
	font-size:1.4em;
	line-height:1.8em;
}
	#address .title{font-weight:bold;}
	#address .adr{margin-bottom:30px;}
	#address a{
		text-decoration:none;
		color:#333333;
	}

	
#plan-route{
	width:209px;
	height:75px;
	border:solid 1px #c6c6c6;
	margin-top:30px;
	padding:5px 10px;
}
 
	#plan-route .title{
		background:url(images/icon-map.jpg) no-repeat left 4px;
		padding-left:25px;
		margin-bottom:5px;
	}
 
#route-form input{
	display:block;
	line-height:32px;
	background:#f2f2f2;
	border:solid 1px #c6c6c6;
	padding:0 5px;
	height:31px;
	width:196px;
	margin:0;
}

#route-form p {
	dispaly:block;
	float:left;
}

#route-form button{
	display:block;
	width:40px;
	height:33px;
	background:#d60059;
	text-indent:-99999px;
	border:none;
	margin:0;
}

#map{
	position:relative; 
	width:100%; 
	z-index:5;
	width:100%; 
	height:284px;
}

#directions{
	position:relative; 
	display:none;
	width:100%;
}

.form{
	float:left;
}
	.form p{
		float:left;
		width:100%;
		margin-bottom:10px;
	}
	.form p.col2{width:50%;}
	
	.form label{
		float:left;
		width:125px;
		height:15px;
		font-weight:bold;
		margin-bottom:3px;
	}
	
	.form p input{
		float:left;
		border:solid 1px #717174;
		height:18px;
		width:500px;
		padding-top:2px;
	}
	
	.form p.col2 input{width:180px;}
	
	.form textarea{
		width:500px;
		height:130px;
		border:solid 1px #717174;
	}
	
	.form button{
		vertical-align:top;
		margin-left:125px;
		height:40px;
		width:174px;
		padding:0px 15px;
		background:url(images/button-background.png) no-repeat left 3px;
		border:none;
		color:#fff;
		cursor:pointer;
		text-align:center;
	}
	.form .ast{color:#d21111;}
	.form .error{
		border:solid 2px #d21111;
	}
	
	.form #errormsg{
		display:none;
		color:#d21111;
		font-weight:bold;
	}

#clients{
	width:100%;
	height:71px;
	border-top:solid 1px #e8e8e8;
	border-bottom:solid 2px #e8e8e8;
	overflow:hidden;
}
	#client-bar{
		width:960px;
		margin:0 auto;
		
	}

	#clients ul{
		float:left;
		width:90px;
		margin-right:60px;
		margin-top:5px;
	}
	
	#clients li{
		margin-bottom:60px;
	}
/*


	#client-bar ul{
		position:relative;
		width:8000px;
	}
	
	#client-bar li{
		float:left;
		margin-right:60px;
	}
*/
#logos{
	position:relative;
	padding:30px 0px;
}

	#logos ul{
		display:block;
	} 
	
	#logos li{
		float:left;
		padding:0;
		margin:0;
		border:solid 1px #e8e8e8;
		margin:0px 8px 8px 0px;
	}
	
	#logos ul:after {
	    content: ".";
	    display: block;
	    height: 0;
	    clear: both;
	    visibility: hidden;
    }
    
    
    #logos header h1{
		font-size:1.8em;
		font-weight:normal;
		margin-bottom:20px;
		color:#333333;
	}	
	
	#logos #nav{
		background:url(images/clients-filter-background.png) no-repeat;
		height:30px;
		padding:12px 0px 0px 20px;
		margin-bottom:10px;
	}
	
	#logos form p{
		display:block;
		float:left;
		width:310px;
	}
	
	#logos form label{
		color:#fff;
		font-size:1.5em;
	}
	
	#logos form input{
		margin-top:-3px;
		margin-right:5px;
	}
	
	#logos .fo{
		font-size:1.5em;
		font-style:italic;
		color:#666666;
		margin-bottom:5px;
	}


#cases{
	/*border:solid 1px #a7a7a7;*/
}
	
	#cases ul, #cases li{
		margin:0;
		padding:0;
		list-style:none;
	}
	
	#cases, #cases li{ 
		position:relative;
		width:630px;
		height:440px;
		overflow:hidden; 
	}
	
	#cases li{ 
		float:left;
	}
	
	#cases .button{
		display:block;
		position:absolute;
		top:195px;
		width:30px;
		height:40px;
		cursor:pointer;
	}
	
	#cases #btn-prev{
		background:url(images/btn-cases-prev.png);
		left:-1px;
	}
	
	#cases #btn-next{
		background:url(images/btn-cases-next.png);
		right:-1px;
	}
	
	#cases .intro{
		position:absolute;
		left:21px;
		top:310px;
		width:548px;
		height:73px;
		padding:21px 20px;
		background:url(images/cases-intro-background.png);
	}
	
	#cases .intro h2{
		line-height:1.6em;
	}
	
	#cases .intro p{
		font-size:0.9em;
		line-height:1.2em;
		position:relative;
		margin:4px 0;
	}
	
	#cases .intro a{
		font-size:0.9em;
	}
	
	
	#cases .intro img{
		float:left;
	}
	
	#cases .intro .line{
		float:left;
		border-right:solid 1px #333333;
		padding:5px 10px 5px 0px;
		margin-right:10px;
		margin-top:2px;
	}

#nav-wrapper{
	position:relative;
	width:630px;
}

#nav-wrapper:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#cases-nav{
	float:right;
	margin:5px 0;
	padding:0;
	list-style:none;
}

	#cases-nav li{
		display:block;
		float:left;
		width:20px;
		height:17px;
		padding:4px 0px;
		margin-left:5px;
		font-size:1.1em;
		cursor:pointer;
		text-align:center;
	}
	
	#cases-nav li.active{
		background:url(images/btn-cases-nav-hover-background.png) no-repeat center center;
		color:#fff;
	}
	

	
/*####################
	FOOTER STYLING
####################*/
	
footer{
	width:100%;
	height:100px;
	background:#f2f2f2;
	border-top:solid 5px #d60059;
}

	footer nav{
		margin:0 auto;
		width:950px;
		height:60px;
		padding-left:10px;
		padding-top:27px;
	}
	
	footer nav ul{
		float:right;
		width:155px;
		height:133px;
		border-left:solid 1px #e2e2e2;
	}
	
	footer nav ul:first-child{border:none;}
	
	footer nav ul li{
		padding:0px 10px;
	}
	
	footer nav ul li a{
		text-decoration:none;
		color:#333333;
		line-height:24px;
		font-size:1.1em;
	}
	
	footer nav ul li h2{
		line-height:24px;
	}
	
	footer nav ul li:first-child{
		font-size:1.4em;
	}
	
	footer nav li a:hover{ color:#d60059; }
	footer nav li a:active{ color:#d60059; }
	
	footer #winkelfocus{
		display:block;
		width:139px;
		height:21px;
		background:url(images/btn-winkelfocus.gif);
		text-indent:-9999px;
		margin:10px 0px 20px 0px;
	}
	
	footer #promotionalpartners{
		display:block;
		width:139px;
		height:50px;
		background:url(images/btn-promotional-partners.gif);
		text-indent:-9999px;
		margin:10px 0px;
	}
	
	footer .address{
		font-size:1.2em;
		font-style:normal;
		color:#fff;
		line-height:52px;
		padding:0px 10px;
		background:#d60059;
	}
	
	footer #adress-wrapper{
		height:95px;
		background:url(images/barcode-background.png) no-repeat bottom center;
	}
	
	footer #products{
		/*height:133px;*/

	}
	
	footer #social{
		display:block;
		/*height:100px;*/
		width:425px;
	}
	
	footer #social li:first-child{
		width:105px;
	}
	
	footer #social li{
		display:block;
		float:left;
		width:65px;
		height:25px;
		padding:0;
		margin-bottom:10px;
		margin-left:10px;
	}
	
	footer .vcard{
		margin:0 auto;
		width:960px;
	}

	footer .twitter{
		display:block;
		width:60px;
		height:25px;
		background:url(images/btn-twitter.jpg);
		text-indent:-99999px;
	}
	
	footer .facebook{
		display:block;
		width:62px;
		height:25px;
		background:url(images/btn-facebook.jpg);
		text-indent:-99999px;
	}
	
	footer .kiss{
		display:block;
		width:62px;
		height:25px;
		background:url(images/btn-kiss.jpg);
		text-indent:-99999px;
	}
	
	footer .linkedin{
		display:block;
		width:61px;
		height:25px;
		background:url(images/btn-linkedin.jpg);
		text-indent:-99999px;
	}
	
	footer .flicker{
		display:block;
		width:63px;
		width:63px;
		height:25px;
		background:url(images/btn-flicker.jpg);
		text-indent:-99999px;
	}
	
	
/*####################
	MAPS STYLING
####################*/

.adp-placemark{
	width:100%;
	background:#f2f2f2;
	border:solid 1px #c6c6c6;
}

.adp-directions{width:100%;}

.adp-placemark img{
	display:none;
}

.adp-text{
	width:100%;
	line-height:32px;
	padding:0 5px;
	color: #666666;
    font-size: 1.3em;
    font-weight:bold;
}

.adp-substep, .adp-summary{
 	color: #666666;
    font-size: 1.2em;
    line-height: 1.4em;
    margin-bottom: 1em;
}

#content-404{
	position:relative;
	min-height:241px;
	padding-top:40px;
}

#youtube{
	text-align:center;
	padding:120px 0 80px 0;
	margin-top:40px:
}


/*####################
	BROWSER FIXES
####################*/

.ie #slider-nav{background:url(images/ie-slider-nav-background.png);}
.ie header .expand .submenu{background:url(images/ie-expand-background.png);}
.ie #site-nav li .teaser{background:url(images/ie-expand-background.png);}
.ie #breadcrumb{background:url(images/ie-slider-nav-background.png);}
.ie #logos form input{margin-top:-5px;}

.ie6 #slider-nav{background:#d60059;}
.ie6 header .expand .submenu{background:#fff;}
.ie6 #site-nav li .teaser{background:#fff;}

::-webkit-input-placeholder {color:#333333;}
input:-moz-placeholder{color:#333333;}