@charset "UTF-8";
/* CSS Document */

.logo {
	clear: both;
	position:relative;
	display:block;
	height: 162px;
	width: 630px;
	background:url(../images/logo.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}

.logo span.hover {
	position: absolute;
	display: block;
	height: 162px;
	width: 630px;
	background: url(../images/logo.png) no-repeat;
	background-position: bottom;
}


.up
	{
	background : #83b817 url(../images/up.gif) no-repeat scroll left 0px;
	position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
}

.up:hover
	{
	background : #83b817 url(../images/up.gif) bottom left no-repeat;
	position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
}


.up_orange
	{
	background : #ff9000 url(../images/up_orange.gif) no-repeat scroll left 0px;
	position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
}

.up_orange:hover
	{
	background : #ff9000 url(../images/up_orange.gif) bottom left no-repeat;
	position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
}

.back
	{
	background : #83b817 url(../images/back.gif) no-repeat scroll left 0px;
	position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
}

.back:hover
	{
	background : #83b817 url(../images/back.gif) bottom left no-repeat;
	position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
}


.back_orange
	{
	background : #ff9000 url(../images/back_orange.gif) no-repeat scroll left 0px;
	position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
}

.back_orange:hover
	{
	background : #ff9000 url(../images/back_orange.gif) bottom left no-repeat;
	position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
}

.forward
	{
	background : #83b817 url(../images/forward.gif) no-repeat scroll left 0px;
	position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
}

.forward:hover
	{
	background : #83b817 url(../images/forward.gif) bottom left no-repeat;
	position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
}


.forward_orange
	{
	background : #ff9000 url(../images/forward_orange.gif) no-repeat scroll left 0px;
	position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
}

.forward_orange:hover
	{
	background : #ff9000 url(../images/forward_orange.gif) bottom left no-repeat;
	position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
}

.linkedin {
	clear: both;
	position:relative;
	display:block;
	height: 30px;
	width: 30px;
	background:url(../images/button_linkedin.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}

.linkedin span.hover {
	position: absolute;
	display: block;
	height: 30px;
	width: 30px;
	background: url(../images/button_linkedin.png) no-repeat;
	background-position: bottom;
}

.twitter {
	clear: both;
	position:relative;
	display:block;
	height: 30px;
	width: 30px;
	background:url(../images/button_twitter.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}

.twitter span.hover {
	position: absolute;
	display: block;
	height: 30px;
	width: 30px;
	background: url(../images/button_twitter.png) no-repeat;
	background-position: bottom;
}

.mail {
	clear: both;
	position:relative;
	display:block;
	height: 24px;
	width: 30px;
	background:url(../images/button_mail.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}

.mail span.hover {
	position: absolute;
	display: block;
	height: 24px;
	width: 30px;
	background: url(../images/button_mail.png) no-repeat;
	background-position: bottom;
}


.appeltje_ytje {
	clear: both;
	position:relative;
	display:block;
	height: 34px;
	width: 30px;
	background:url(../images/appeltje_ytje.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}

.appeltje_ytje span.hover {
	position: absolute;
	display: block;
	height: 34px;
	width: 30px;
	background: url(../images/appeltje_ytje.png) no-repeat;
	background-position: bottom;
}




.work_next_button {
	clear: both;
	position:relative;
	display:block;
	height: 26px;
	width: 26px;
	background:url(../images/work_next_button.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}

.work_next_button span.hover {
	position: absolute;
	display: block;
	height: 26px;
	width: 26px;
	background: url(../images/work_next_button.png) no-repeat;
	background-position: bottom;
}



.work_nolenspleinnieuws {
	clear: both;
	position:relative;
	display:block;
	height: 160px;
	width: 205px;
	background:url(../images/work_nolenspleinnieuws.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}

.work_nolenspleinnieuws span.hover {
	position: absolute;
	display: block;
	height: 160px;
	width: 205px;
	background: url(../images/work_nolenspleinnieuws.png) no-repeat;
	background-position: bottom;
}

.work_12sip {
	clear: both;
	position:relative;
	display:block;
	height: 160px;
	width: 205px;
	background:url(../images/work_12sip.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}

.work_12sip span.hover {
	position: absolute;
	display: block;
	height: 160px;
	width: 205px;
	background: url(../images/work_12sip.png) no-repeat;
	background-position: bottom;
}





.work_logos {
	clear: both;
	position:relative;
	display:block;
	height: 160px;
	width: 205px;
	background:url(../images/work_logos.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}

.work_logos span.hover {
	position: absolute;
	display: block;
	height: 160px;
	width: 205px;
	background: url(../images/work_logos.png) no-repeat;
	background-position: bottom;
}

.work_cashhandling {
	clear: both;
	position:relative;
	display:block;
	height: 160px;
	width: 205px;
	background:url(../images/work_cashhandling.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}

.work_cashhandling span.hover {
	position: absolute;
	display: block;
	height: 160px;
	width: 205px;
	background: url(../images/work_cashhandling.png) no-repeat;
	background-position: bottom;
}

.work_boergroep_site {
	clear: both;
	position:relative;
	display:block;
	height: 160px;
	width: 205px;
	background:url(../images/work_boergroep_site.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}

.work_boergroep_site span.hover {
	position: absolute;
	display: block;
	height: 160px;
	width: 205px;
	background: url(../images/work_boergroep_site.png) no-repeat;
	background-position: bottom;
}

.work_edixhoven_concept {
	clear: both;
	position:relative;
	display:block;
	height: 160px;
	width: 205px;
	background:url(../images/work_edixhoven_concept.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}

.work_edixhoven_concept span.hover {
	position: absolute;
	display: block;
	height: 160px;
	width: 205px;
	background: url(../images/work_edixhoven_concept.png) no-repeat;
	background-position: bottom;
}




.work_fbvg {
	clear: both;
	position:relative;
	display:block;
	height: 160px;
	width: 205px;
	background:url(../images/work_fbvg.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}

.work_fbvg span.hover {
	position: absolute;
	display: block;
	height: 160px;
	width: 205px;
	background: url(../images/work_fbvg.png) no-repeat;
	background-position: bottom;
}

.work_heuvel_magazine {
	clear: both;
	position:relative;
	display:block;
	height: 160px;
	width: 205px;
	background:url(../images/work_heuvel_magazine.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}

.work_heuvel_magazine span.hover {
	position: absolute;
	display: block;
	height: 160px;
	width: 205px;
	background: url(../images/work_heuvel_magazine.png) no-repeat;
	background-position: bottom;
}

.work_edixhoven {
	clear: both;
	position:relative;
	display:block;
	height: 160px;
	width: 205px;
	background:url(../images/work_edixhoven.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}

.work_edixhoven span.hover {
	position: absolute;
	display: block;
	height: 160px;
	width: 205px;
	background: url(../images/work_edixhoven.png) no-repeat;
	background-position: bottom;
}

.work_kluisstore {
	clear: both;
	position:relative;
	display:block;
	height: 160px;
	width: 205px;
	background:url(../images/work_kluisstore.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}

.work_kluisstore span.hover {
	position: absolute;
	display: block;
	height: 160px;
	width: 205px;
	background: url(../images/work_kluisstore.png) no-repeat;
	background-position: bottom;
}

.work_reggaefer {
	clear: both;
	position:relative;
	display:block;
	height: 160px;
	width: 205px;
	background:url(../images/work_reggaefer.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}

.work_reggaefer span.hover {
	position: absolute;
	display: block;
	height: 160px;
	width: 205px;
	background: url(../images/work_reggaefer.png) no-repeat;
	background-position: bottom;
}

.work_radioaccess {
	clear: both;
	position:relative;
	display:block;
	height: 160px;
	width: 205px;
	background:url(../images/work_radioaccess.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}

.work_radioaccess span.hover {
	position: absolute;
	display: block;
	height: 160px;
	width: 205px;
	background: url(../images/work_radioaccess.png) no-repeat;
	background-position: bottom;
}


.work_verhildersum {
	clear: both;
	position:relative;
	display:block;
	height: 160px;
	width: 205px;
	background:url(../images/work_verhildersum.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}

.work_verhildersum span.hover {
	position: absolute;
	display: block;
	height: 160px;
	width: 205px;
	background: url(../images/work_verhildersum.png) no-repeat;
	background-position: bottom;
}

.work_gebotex {
	clear: both;
	position:relative;
	display:block;
	height: 160px;
	width: 205px;
	background:url(../images/work_gebotex.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}

.work_gebotex span.hover {
	position: absolute;
	display: block;
	height: 160px;
	width: 205px;
	background: url(../images/work_gebotex.png) no-repeat;
	background-position: bottom;
}

.work_12connect {
	clear: both;
	position:relative;
	display:block;
	height: 160px;
	width: 205px;
	background:url(../images/work_12connect.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}

.work_12connect span.hover {
	position: absolute;
	display: block;
	height: 160px;
	width: 205px;
	background: url(../images/work_12connect.png) no-repeat;
	background-position: bottom;
}


.work_het_is_wat_je_ziet {
	clear: both;
	position:relative;
	display:block;
	height: 160px;
	width: 205px;
	background:url(../images/work_het_is_wat_je_ziet.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}

.work_het_is_wat_je_ziet span.hover {
	position: absolute;
	display: block;
	height: 160px;
	width: 205px;
	background: url(../images/work_het_is_wat_je_ziet.png) no-repeat;
	background-position: bottom;
}



.logo {
	clear: both;
	position:relative;
	display:block;
	height: 162px;
	width: 630px;
	background:url(../images/logo.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}

.logo span.hover {
	position: absolute;
	display: block;
	height: 162px;
	width: 630px;
	background: url(../images/logo.png) no-repeat;
	background-position: bottom;
}


#wrapper, #wrapper_green, #wrapper_orange, #wrapper_blue { 
		 position: relative;
		 margin: 0 auto;
		 width: 980px;
		 border: 0px solid;
		}
		
#wrapper { 
		 background-color: #ffffff;
		 height: 1950px;	
		 overflow: hidden;
		}	

#wrapper_green { 
		 background-color: #83b817;
		}	
		
#wrapper_orange { 
		 background-color: #ff9000;
		 height: 1350px;		 
		}			

#logo { 
		position: absolute; top: 20px; bottom: 0px; left: 17px; right: 0px;
		width: 630px;
		height: 162px;
		margin: 0px;
		border: 0px solid;
		}
		
#up { 
		position: absolute; top: 20px; bottom: 0px; left: 411px; right: 0px;
		width: 158px;
		height: 158px;
		margin: 0px;
		border: 0px solid;
		}		

#back { 
		position: absolute; top: 100px; bottom: 0px; left: 20px; right: 0px;
		width: 79px;
		height: 79px;
		margin: 0px;
		border: 0px solid;
		}		
		
#forward { 
		position: absolute; top: 100px; bottom: 0px; left: 880px; right: 0px;
		width: 79px;
		height: 79px;
		margin: 0px;
		border: 0px solid;
		}				

#socialbox { 
		position: absolute; top: 1810px; bottom: 0px; left: 280px; right: 0px;
		width: 110px;
		height: 30px;
		margin: 0px;
		border: 0px solid;
		z-index:999;
		}		
		
#socialbutton_1, #socialbutton_2  { 
		position: relative;
		width: 30px;
		height: 30px;
		margin-right: 10px;
		border: 0px solid;
		float: left;
		}				

#socialbutton_3 { 
		position: relative;
		width: 30px;
		height: 24px;
		margin-top: 6px;
		border: 0px solid;
		float: left;
		}				

#line_1 { 
		position: absolute; top: 195px; bottom: 0px; left: 0px; right: 0px;
		width: 980px;
		height: 16px;
		margin: 0px;
		background : url(../images/line_1.gif) top left no-repeat;
		border: 0px solid;
		z-index: 1;
		}				
		
#line_2 { 
		position: absolute; top: 710px; bottom: 0px; left: 0px; right: 0px;
		width: 980px;
		height: 20px;
		margin: 0px;
		background : url(../images/line_2.gif) top left no-repeat;
		border: 0px solid;
		z-index: 1;		
		}

#line_3 { 
		position: absolute; top: 1410px; bottom: 0px; left: 0px; right: 0px;
		width: 980px;
		height: 16px;
		margin: 0px;
		background : url(../images/line_1.gif) top left no-repeat;
		border: 0px solid;
		z-index: 1;
		}

#line_green_1 { 
		position: absolute; top: 350px; bottom: 0px; left: 0px; right: 0px;
		width: 470px;
		height: 10px;
		margin-left: 10px;
		background : url(../images/line_green.gif) top left no-repeat;
		border: 0px solid;
		z-index: 1;
		}	
		
#line_green_2 { 
		position: absolute; top: 1575px; bottom: 0px; left: 482px; right: 0px;
		width: 470px;
		height: 10px;
		margin-left: 10px;
		background : url(../images/line_green.gif) top left no-repeat;
		border: 0px solid;
		z-index: 1;
		}		

#line_black_1 { 
		position: absolute; top: 350px; bottom: 0px; left: 482px; right: 0px;
		width: 470px;
		height: 10px;
		margin-left: 10px;
		background : url(../images/line_black.gif) top left no-repeat;
		border: 0px solid;
		z-index: 1;
		}			

#line_black_2 { 
		position: absolute; top: 1575px; bottom: 0px; left: -10px; right: 0px;
		width: 470px;
		height: 10px;
		margin-left: 15px;
		background : url(../images/line_black.gif) top left no-repeat;
		border: 0px solid;
		z-index: 1;
		}	
		
#white_1 { 
		position: absolute; top: 210px; bottom: 0px; left: 10px; right: 0px;
		width: 475px;
		height: 380px;
		margin: 0px;
		padding-left: 5px;
		padding-top: 165px;
		background : #ffffff url(../images/wie.gif) top left no-repeat;
		border: 0px solid;
		z-index: 0;		
		}
		
#white_2 { 
		position: absolute; top: 1420px; bottom: 0px; left: 505px; right: 0px;
		width: 450px;
		height: 340px;
		margin: 0px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 180px;				
		background : #ffffff url(../images/waarom.gif) top left no-repeat;
		border: 0px solid;
		z-index: 0;		
		}		
		
#green_1 { 
		position: absolute; top: 210px; bottom: 0px; left: 500px; right: 0px;
		width: 470px;
		height: 335px;
		margin: 0px;
		padding-left: 10px;
		padding-top: 165px;		
		background : #83b817 url(../images/wat.gif) top left no-repeat;
		border: 0px solid;
		z-index: 0;		
		}
		
#green_2 { 
		position: absolute; top: 1420px; bottom: 0px; left: 0px; right: 0px;
		width: 460px;
		height: 340px;
		margin: 0px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 180px;		
		background : #83b817 url(../images/waar.gif) top left no-repeat;
		border: 0px solid;
		z-index: 0;		
		}					

#recent_work { 
		position: absolute; top: 780px; bottom: 0px; left: -2px; right: 0px;
		width: 979px;
		height: 635px;
		padding-left: 1px;
		background : none;
		border: 0px solid;
		z-index: 0;		
		}
		
#heading_recent_werk { 
		position: absolute; top: 740px; bottom: 0px; left: 0px; right: 0px;
		width: 979px;
		height: 30px;
		padding-left: 0px;
		background : none;
		border: 1px solid;
		z-index: 0;		
		}
	
#carousel_back { 
		position: relative;
		width: 30px;
		height: 30px;
		margin-left: 200px;
		background : none;
		border: 1px solid;
		z-index: 0;		
		}
		



.work_container {
		position: relative;
		width: 225px;
		height: 290px;
		margin-left: 0px;
		margin-bottom: 20px;
		background: #ffffff;
		border: 1px solid;
		border-color: #a4a4a4;
		float: left;
		}
		
.work_image {
		position: relative;
		width: 205px;
		height: 160px;
		margin: 10px;
		background: #ababab;
		border: 0px solid;
		border-color: #a4a4a4;		
		}
		
.work_txt {
		position: relative;
		width: 205px;
		background: #ffffff;
		border: 0px solid;	
		}			
		
.work_skills {
		position: relative;
		width: 225px;
		margin-top: 10px;
		padding-top: 10px;
		background: #ffffff;
		border-top: 1px solid;
		border-color: #a4a4a4;		
		}					

.work_next {
		position: relative;
		float: right;
		width: 26px;
		height: 26px;
		margin-right: 10px;
		margin-top: -20px;
		background: #ffffff;
		border: 0px solid;
		z-index: 2;
		}			
		
/*  START Screen_Presentation */

#appeltje_ytje {
		position: absolute; top: 347px; bottom: 0px; left: 262px; right: 0px;
		width: 30px;
		height: 34px;
		margin: 0px;
		border: 0px solid;
		z-index: 2;
		}				

#screen { 
		position: absolute; top: 240px; bottom: 0px; left: 215px; right: 0px;
		background : url(../images/bg_screen_smaller.jpg) top left no-repeat;		
		width: 550px;
		height: 480px;
		margin: 0px;
		border: 0px solid;
		}		
		
#display_edixhoven { 
		position: absolute; top: 270px; bottom: 0px; left: 328px; right: 0px;
		width: 435px;
		height: 376px;
		margin: 0px;
		border: 0px solid;
		z-index: 1;
		}
		
#display_wide { 
		position: absolute; top: 270px; bottom: 0px; left: 242px; right: 0px;
		width: 435px;
		height: 376px;
		margin: 0px;
		border: 0px solid;
		z-index: 1;
		}		

/*  STop Screen_Presentation */

/*  START Gebotex_Presentation */

#gebotex { 
		position: absolute; top: 275px; bottom: 0px; left: 20px; right: 0px;
		background : url(../images/gebotex_pand.jpg) top left no-repeat;		
		width: 605px;
		height: 403px;
		margin: 0px;
		border: 0px solid;
		}	

#gebotex_flag { 
		position: absolute; top: 229px; bottom: 0px; left: 642px; right: 0px;
		background : url(../images/gebotex_flag.jpg) top left no-repeat;		
		width: 145px;
		height: 495px;
		margin: 0px;
		border: 0px solid;
		z-index: 1;
		}	
		
#gebotex_signing { 
		position: absolute; top: 275px; bottom: 0px; left: 809px; right: 0px;
		width: 150px;
		height: 450px;
		margin: 0px;
		border: 0px solid;
		z-index: 1;
		}			

/*  START Nolensplein */

#nolensplein { 
		position: absolute; top: 220px; bottom: 0px; left: 20px; right: 0px;
		width: 960px;
		height: 403px;
		margin: 0px;
		border: 0px solid;
		}	


/*  START iPhone_Presentation */

#iphone { 
		position: absolute; top: 275px; bottom: 0px; left: 360px; right: 0px;
		background : url(../images/iphone.jpg) top left no-repeat;		
		width: 743px;
		height: 647px;
		margin: 0px;
		border: 0px solid;
		}	

#display_12sip { 
		position: absolute; top: 381px; bottom: 0px; left: 398px; right: 0px;
		width: 229px;
		height: 437px;
		margin: 0px;
		border: 0px solid;
		z-index: 1;
		}	


#left {
		position: absolute; top: 750px; bottom: 0px; left: 20px; right: 0px;
		width: 280px;
		height: 300px;
		margin: 0px;
		border: 0px solid;
		}	
		
#middle {
		position: absolute; top: 750px; bottom: 0px; left: 360px; right: 0px;
		width: 280px;
		height: 300px;
		margin: 0px;
		border: 0px solid;
		}			
		
#right {
		position: absolute; top: 750px; bottom: 0px; left: 680px; right: 0px;
		width: 280px;
		height: 300px;
		margin: 0px;
		border: 0px solid;
		}