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

* {
	margin: 0;
	padding: 0;
	}
	
html, body{	height: 100%;}
	
body{
	background-color: #e7e8f8;
	background-image: url(images/bg.jpg);
	background-repeat: no-repeat;	
	background-position: center top;
	}

ul{
	list-style-type: none;	
	text-decoration: none;
	}
	
li { list-style-type: none;}

#container{
	width: 1024px;
	height: 768px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}
	
	
	/*--------------------------------------------landing--------------------------------------*/
	
#contentlanding{
	background-image: url(images/landing/bg_landing.jpg);
	}
	
#mail_landing{
	width: 220px;
	height: 83px;
	top: 581px;
	left: 547px;
	position: absolute;
	background-repeat: no-repeat;
	background-image: url(images/landing/mail.jpg);
	}
	
#mail_landing a, #mail_intro a{
	width: 220px;
	height: 83px;
	float: left;
	text-indent: -9999px;
}

#nav_talen_landing{
	width: 240px;
	height: 200px;
	position: absolute;
	left: 229px;
	top: 242px;
	}	 

#nav_talen_landing a, #nav_talen_landing a:hover{
	display: block;
	width: 240px;
	height: 50px;
	background-repeat: no-repeat;
	}
	
	
#nav_talen_landing ul li{
	width: 240px;
	height: 50px;
	display: block;
	}

a#nederlands_landing:hover{
	background-image: url(images/landing/nederlands_act.jpg);
	} 	 
  
a#english_landing:hover{
	background-image: url(images/landing/english_act.jpg);
	} 	 
  
a#deutsch_landing:hover{
	background-image: url(images/landing/deutsch_act.jpg);
	} 	 
  	 
a#francais_landing:hover{
	background-image: url(images/landing/francais_act.jpg);
	}
	
#nav_talen a, #nav_talen a:link, #nav_intro a, #nav_intro a:link, #nav_talen_landing a, #nav_talen_landing a:link, #nav_contact a, #nav_contact a:link, #nav_portfolio a, #nav_portfolio a:link{ text-indent: -9999px; }

	
	/*-------------------------------------contenten-------------------------------------------------------------*/
	
#contentlanding, #content_intro_nl, #content_intro_engl, #content_intro_d, #content_intro_fr, #content_contact_nl, #content_contact_engl, #content_contact_d, #content_contact_fr, #content_ok_nl, #content_ok_engl, #content_ok_d, #content_ok_fr, #content_portfolio_nl, #content_portfolio_d, #content_portfolio_en, #content_portfolio_fr{
	width: 1024px;
	height: 768px;
	position: relative;
	background-repeat: no-repeat;
	}
	
	/*------------------------------------introductie-+nav-contact-----------------------------------------------*/
	
#content_intro_nl{
	background-image: url(images/introductie/introductie_nl.jpg);
}

#content_intro_engl{
	background-image: url(images/introductie/introductie_engl.jpg);
}

#content_intro_d{
	background-image: url(images/introductie/introductie_d.jpg);
}

#content_intro_fr{
	background-image: url(images/introductie/introductie_fr.jpg);
}

#mail_intro{
	width: 223px;
	height: 85px;
	top: 410px;
	left: 27px;
	position: absolute;
	background-repeat: no-repeat;
	background-image: url(images/introductie/mail.jpg);
	outline: none;
	}
	
#nav_intro{
	width: 260px;
	height: 245px;
	position: absolute;
	left: 760px;
	top: 175px;
	}	 
	
#nav_intro ul, #nav_contact ul, #nav_portfolio ul{
	position: relative;
	width: 260px;
	height: 245px;
	}

li#fijf, li#zes_nl, li#zes_engl, li#zes_d, li#zes_fr, li#zeven, li#acht_nl, li#acht_engl, li#acht_d, li#acht_fr, li#fijf a, li#zes_nl a, li#zes_engl a, li#zes_d a, li#zes_fr a, li#zeven a, li#acht_nl a, li#acht_engl a, li#acht_d a, li#acht_fr a, li#contact_fijf, li#portfolio_fijf, li#contact_zes_nl, li#contact_zes_engl, li#contact_zes_d, li#contact_zes_fr, li#portfolio_zes_nl, li#portfolio_zes_d, li#portfolio_zes_en, li#portfolio_zes_fr, li#contact_zeven, li#portfolio_zeven, li#contact_acht_nl, li#contact_acht_engl, li#contact_acht_d, li#contact_acht_fr, li#portfolio_acht_nl, li#portfolio_acht_en, li#portfolio_acht_d, li#portfolio_acht_fr, li#contact_fijf a, li#portfolio_fijf a, li#portfolio_zes_nl a, li#portfolio_zes_en a, li#portfolio_zes_d a, li#portfolio_zes_fr a, li#contact_zes_nl a, li#contact_zes_engl a, li#contact_zes_d a, li#contact_zes_fr a, li#contact_zeven a, li#portfolio_zeven a, li#contact_acht_nl a, li#contact_acht_engl a, li#contact_acht_d a, li#contact_acht_fr a, li#portfolio_acht_nl a, li#portfolio_acht_en a, li#portfolio_acht_d a, li#portfolio_acht_fr a{
	position: relative;
	display: block;
	float: left;
	height: 52px;
	width: 256px;
	}
	
li#fijf, li#fijf a{
	top: 0;
	left: 0;
}

li#zes_nl, li#zes_nl a, li#zes_engl, li#zes_engl a, li#zes_d, li#zes_d a, li#zes_fr, li#zes_fr a{
	top: 6px;
	left: 0;
}

li#zeven, li#zeven a{
	top: 13px;
	left: 0;
}

li#acht_nl, li#acht_nl a, li#acht_engl, li#acht_engl a, li#acht_d, li#acht_d a, li#acht_fr, li#acht_fr a{
	top: 18px;
	left: 0;
}

li#fijf a:hover{
	background-image: url(images/introductie/home_hover.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	} 	 
  
li#zeven a:hover{
	background-image: url(images/introductie/portfolio_hover.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	} 	 
  	 
li#acht_nl a:hover, li#acht_engl a:hover, li#acht_d a:hover, li#acht_fr a:hover{
	background-repeat: no-repeat;
	background-position: 0px 0px;
	}
	
li#acht_nl a:hover, li#acht_engl a:hover{
	background-image: url(images/introductie/contact_hover.jpg);	
	}
	
li#acht_d a:hover{
	background-image: url(images/introductie/kontakt_hover.jpg);
	}
	
li#acht_fr a:hover{
	background-image: url(images/introductie/contacte_hover.jpg);
}
	
#introtekst_nl, #introtekst_engl, #introtekst_d, #introtekst_fr{
	width: 392px;
	height: 550px;
	position: absolute;
	left: 277px;
	top: 177px;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	text-indent: -9999px;
}

#introtekst_nl{ 
	background-image: url(images/introductie/nl_intro.jpg);
	}

#introtekst_engl{
	background-image: url(images/introductie/engl_intro.jpg);
	}

#introtekst_d{
	background-image: url(images/introductie/d_intro.jpg);
	}
	
#introtekst_fr{
	background-image: url(images/introductie/fr_intro.jpg);
}
	
	/*-------------------------------------nav_talen-------------------------------------------*/
	
#nav_talen{
	width: 628px;
	height: 75px;
	position: absolute;
	left: 341px;
	top: 0px;
	}	 

#nav_talen ul {
	position: relative;
	width: 628px;
	height: 90px;
	}
	
li#een, li#twee, li#twee_contact, li#twee_portfolio, li#drie_contact, li#drie, li#vier{
	position: relative;
	display: inline;
	height: 90px;
	}
	
li#een a, li#twee a, li#twee_portfolio a, li#twee_contact a, li#drie_contact a, li#drie a, li#vier a{
	height: 90px;
}

li#een, li#een a{
	float: left;
	width: 171px;
}

li#twee, li#twee_portfolio, li#twee_contact, li#twee a, li#twee_portfolio a, li#twee_contact a{
	float: left;
	width: 152px;
}

li#drie, li#drie a, li#drie_contact, li#drie_contact a{
	float: left;
	width: 157px;
}

li#vier, li#vier a{
	float: left;
	width: 148px;
}

li#een a:hover{
	background-image: url(images/introductie/fleche_nl.jpg);
	background-repeat: no-repeat;
	background-position: 0px 42px;
	} 	 
  
li#twee a:hover{
	background-image: url(images/introductie/fleche_en.jpg);
	background-repeat: no-repeat;
	background-position: 0px 42px;	
	} 	 
	
li#twee_contact a:hover{
	background-image: url(images/contact/fleche_en.jpg);
	background-repeat: no-repeat;
	background-position: 0px 42px;
	} 	 
	
li#twee_portfolio a:hover{
	background-image: url(images/portfolio/fleche_en.jpg);
	background-repeat: no-repeat;
	background-position: 0px 42px;
}
	
li#drie_contact a:hover{
	background-image: url(images/contact/fleche_d.jpg);
	background-repeat: no-repeat;
	background-position: 0px 42px;
	} 	
  
li#drie a:hover{
	background-image: url(images/introductie/fleche_d.jpg);
	background-repeat: no-repeat;
	background-position: 0px 42px;	
	} 	 
  	 
li#vier a:hover{
	background-image: url(images/introductie/fleche_fr.jpg);
	background-repeat: no-repeat;
	background-position: 0px 42px;
	}
	
		


	/*------------------------------------contact pagina----------------------------------------*/
	
#content_contact_nl{
	background-image: url(images/contact/contact_nederlands.jpg);
	background-repeat:no-repeat;
}

#content_contact_engl{
	background-image: url(images/contact/contact_english.jpg);
	background-repeat:no-repeat;
}

#content_contact_d{
	background-image: url(images/contact/kontakt_deutsch.jpg);
	background-repeat:no-repeat;
}

#content_contact_fr{
	background-image: url(images/contact/contacte_francais.jpg);
	background-repeat:no-repeat;
}

#nav_contact{
	width: 256px;
	height: 245px;
	position: absolute;
	top: 172px;
	left: 779px;
	}	 	

li#contact_fijf, li#contact_fijf a{
	top: 0;
	left: 0;
}

li#contact_zes_nl, li#contact_zes_nl a, li#contact_zes_engl, li#contact_zes_engl a, li#contact_zes_d, li#contact_zes_d a, li#contact_zes_fr, li#contact_zes_fr a{
	top: 7px;
	left: 0;	
}

li#contact_zeven, li#contact_zeven a{
	top: 15px;
	left: 0;		
}

li#contact_acht_nl, li#contact_acht_nl a, li#contact_acht_engl, li#contact_acht_engl a, li#contact_acht_d, li#contact_acht_d a, li#contact_acht_fr, li#contact_acht_fr a{
	top: 22px;
	left: 0;		
}

li#contact_fijf a:hover, li#contact_zes_nl a:hover, li#contact_zes_engl a:hover, li#contact_zes_d a:hover, li#contact_zes_fr a:hover, li#contact_zeven a:hover, li#contact_acht_nl a:hover, li#contact_acht_engl a:hover, li#contact_acht_d a:hover, li#contact_acht_fr a:hover{
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

li#contact_fijf a:hover{
	background-image: url(images/contact/home.jpg);
	}

li#contact_zes_nl a:hover{
	background-image: url(images/contact/wat_doen_wij.jpg);	
	}

li#contact_zes_engl a:hover{
	background-image: url(images/contact/what_do_we_do.jpg);
	}

li#contact_zes_d a:hover{
	background-image: url(images/contact/was_machen_wir.jpg);
	}

li#contact_zes_fr a:hover{
	background-image: url(images/contact/que_fait_on.jpg);	
	}

li#contact_zeven a:hover{
	background-image: url(images/contact/portfolio.jpg);
	}

li#contact_acht_d a:hover{
	background-image: url(images/contact/kontakt.jpg);
	}

	/*------------------------------------------------------------------------------*/
	

form{
	width: 680px;
	height: 300px;
	position: absolute;
	top: 359px;
	left: 86px;
	border: none;
		}
	
#message{
	width: 302px;
	height: 246px;
	position: relative;
	top: 0;
	left: 0;
	scrollbar-arrow-color: #9c958e;
	scrollbar-face-color: #e0d7ce;
	scrollbar-highlight-color: #e0d7ce;
	scrollbar-3dlight-color: #e0d7ce;
	scrollbar-shadow-color: #e0d7ce;
	scrollbar-darkshadow-color: #e0d7ce;
	scrollbar-track-color: #e0d7ce;
	}

form #gegevens{
	width: 280px;
	height: 250px;
	position: absolute;
	top: 20px;
	left: 405px;
	}

#name{
	width: 270px;
	margin-bottom: 44px;
}

#last{
	width: 270px;
	margin-bottom: 44px;
}

#email{
	width: 270px;
	margin-bottom: 44px;
}

#sujet{
	width: 270px;
	margin-bottom: 44px;
}



label{
   	padding-left: 5px;
    }

input{
	font-size: small;
	color: #000;
	padding-top: 1px;
	border: none;
	float: right;
	width: 250px;
	height: 23px;
	font-size: 14px;
	font-style: normal;
	font-family: "Comic Sans MS", cursive;
	background-color: transparent;
	background-position: 1px 1px;
	font-weight: bold;
	} 

textarea{
	width: 290px;
	height: 244px;
	margin-left: 10px;
	float: left;
	background: transparent;
	border: none;
	font-size: 14px;
	font-style: normal;
	color: #000;
	font-family: "Comic Sans MS", cursive;
	font-weight: bold;
    } 
	
#send{
	width: 110px;
	height: 32px;
	position: absolute;
	/*top: 265px; dit is voor IE*/
	top: 245px;
	left: 95px;
}

input.verstuurknop_nl, input.verstuurknop_d, input.verstuurknop_en, input.verstuurknop_fr{
	float: left;
	width: 110px;
	height: 32px;
	outline: none;
	border: none;
	cursor: pointer;
	background-repeat: no-repeat;
	}
	
verstuurknop_nl{
	background-image: url(images/contact/knop.jpg);	
	}

input.verstuurknop_nl:hover {
	background-image: url(images/contact/knop_nl_hover.jpg);
	background-position: 1px 1px;
	}

verstuurknop_d{
	background-image: url(images/contact/knop_d.jpg);
	}

input.verstuurknop_d:hover {
	background-image: url(images/contact/knop_d_hover.jpg);
	background-position: 1px 1px;
	}
	
verstuurknop_en{
	background-image: url(images/contact/knop_engl.jpg);
	}

input.verstuurknop_en:hover {
	background-image: url(images/contact/knop_engl_hover.jpg);
	background-position: 1px 1px;
	}

verstuurknop_fr{
	background-image: url(images/contact/knop_fr.jpg);
	}

input.verstuurknop_fr:hover {
	background-image: url(images/contact/knop_fr_hover.jpg);
	background-position: 1px 1px;
	}
	/*-------------------------------------------ok-pagina-----------------------------------------------*/
	
#content_ok_nl{
	background-image: url(images/contact/ok_nederlands.jpg);	
}

#content_ok_engl{
	background-image: url(images/contact/ok_english.jpg);	
}

#content_ok_d{
	background-image: url(images/contact/ok_deutsch.jpg);	
}

#content_ok_fr{
	background-image: url(images/contact/ok_francais.jpg);
}
	
	/*--------------------------------------------portfolio--------------------------------------------------------*/
	
#content_portfolio_nl{
	background-image: url(images/portfolio/portfolio_nl.jpg);
	}
	
#content_portfolio_en{
	background-image: url(images/portfolio/portfolio_engl.jpg);
	}
	
#content_portfolio_d{
	background-image: url(images/portfolio/portfolio_d.jpg);
	}
	
#content_portfolio_fr{
	background-image: url(images/portfolio/portfolio_fr.jpg);
	}
	
#nav_portfolio{
	width: 256px;
	height: 245px;
	position: absolute;
	top: 118px;
	left: 769px;
	}	 	
	
li#portfolio_fijf, li#portfolio_fijf a{
	top: 0;
	left: 0;
}

li#portfolio_zes_nl, li#portfolio_zes_nl a, li#portfolio_zes_en, li#portfolio_zes_en a, li#portfolio_zes_d, li#portfolio_zes_d a, li#portfolio_zes_fr, li#portfolio_zes_fr a{
	top: 6px;
	left: 0;	
}

li#portfolio_zeven, li#portfolio_zeven a{
	top: 9px;
	left: 0;		
}

li#portfolio_acht_nl, li#portfolio_acht_nl a, li#portfolio_acht_en, li#portfolio_acht_en a, li#portfolio_acht_d, li#portfolio_acht_d a, li#portfolio_acht_fr, li#portfolio_acht_fr a{
	top: 21px;
	left: 0;		
}

li#portfolio_fijf a:hover, li#portfolio_zes_nl a:hover, li#portfolio_zes_en a:hover, li#portfolio_zes_d a:hover, li#portfolio_zes_fr a:hover, li#portfolio_zeven a:hover, li#portfolio_acht_nl a:hover, li#portfolio_acht_en a:hover, li#portfolio_acht_d a:hover, li#portfolio_acht_fr a:hover{
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

li#portfolio_fijf a:hover{
	background-image: url(images/portfolio/home.jpg);
	}

li#portfolio_zes_nl a:hover{
	background-image: url(images/portfolio/wat_doen_wij.jpg);
	}

li#portfolio_zes_en a:hover{
	background-image: url(images/portfolio/what_do_we_do.jpg);
	}

li#portfolio_zes_d a:hover{
	background-image: url(images/portfolio/was_machen_wir.jpg);
	}

li#portfolio_zes_fr a:hover{
	background-image: url(images/portfolio/que_fait_on.jpg);
	}

li#portfolio_acht_nl a:hover, li#portfolio_acht_en a:hover{
	background-image: url(images/portfolio/contact.jpg);
	}

li#portfolio_acht_d a:hover{
	background-image: url(images/portfolio/kontakt.jpg);
	}

li#portfolio_acht_fr a:hover{
	background-image: url(images/portfolio/contacte.jpg);
	}
	
#mail_portfolio{
	width: 223px;
	height: 85px;
	top: 408px;
	left: 36px;
	position: absolute;
	background-repeat: no-repeat;
	background-image: url(images/portfolio/mail.jpg);	
}

#mail_portfolio a{
	width: 223px;
	height: 85px;
	float: left;
	text-indent: -9999px;
}

    
/*----------------------------------------------facebook---------------------------------------------*/

                          /*--------------------landing--------------------*/
#contentlanding #facebook{
	width: 188px;
	height: 143px;
	top: 90px;
	left: 433px;
	position: absolute;
	background-repeat: no-repeat;
	background-image: url(/images/landing/ifyoulike.jpg);	
}

#contentlanding #facebook a{
	width: 188px;
	height: 143px;
	position: relative;
	float: left;
	text-indent: -9999px;
}
                          /*--------------------contact--------------------*/
						  
#content_contact_engl #facebook, #content_contact_nl #facebook, #content_contact_d #facebook, #content_contact_fr #facebook, #content_ok_nl #facebook, #content_ok_fr #facebook, #content_ok_engl #facebook, #content_ok_d #facebook{
	width: 153px;
	height: 121px;
	top: 89px;
	left: 386px;
	position: absolute;
	background-repeat: no-repeat;
}
	
#content_contact_engl #facebook, #content_ok_engl #facebook{
	background-image: url(/images/contact/shareit.jpg);	
}

#content_contact_nl #facebook, #content_ok_nl #facebook{
	background-image: url(/images/contact/delenop.jpg);	
}

#content_contact_d #facebook, #content_ok_d #facebook{
	background-image: url(/images/contact/teilensiees.jpg);	
}

#content_contact_fr #facebook, #content_ok_fr #facebook{
	background-image: url(/images/contact/partagezsur.jpg);	
}

#content_contact_engl #facebook a, #content_contact_nl #facebook a, #content_contact_d #facebook a, #content_contact_fr #facebook a, #content_ok_fr #facebook a, #content_ok_d #facebook a, #content_ok_nl #facebook a, #content_ok_engl #facebook a{
	width: 153px;
	height: 121px;
	position: relative;
	float: left;
	text-indent: -9999px;
}

                                    /*--------------------introductie--------------------*/

#content_intro_engl #facebook, #content_intro_fr #facebook, #content_intro_nl #facebook, #content_intro_d #facebook{
	width: 153px;
	height: 121px;
	top: 487px;
	left: 90px;
	position: absolute;
	background-repeat: no-repeat;
}
	
#content_intro_engl #facebook{
	background-image: url(/images/introductie/shareit.jpg);	
}

#content_intro_fr #facebook{
	background-image: url(/images/introductie/partagezsur.jpg);	
}

#content_intro_nl #facebook{
	background-image: url(/images/introductie/delenop.jpg);	
}

#content_intro_d #facebook{
	background-image: url(/images/introductie/teilensiees.jpg);	
}

#content_intro_engl #facebook a, #content_intro_fr #facebook a, #content_intro_nl #facebook a, #content_intro_d #facebook a{
	width: 153px;
	height: 121px;
	position: relative;
	float: left;
	text-indent: -9999px;
}

                    /*----------------------portfolio---------------------*/
					
					
#content_portfolio_d #facebook, #content_portfolio_en #facebook, #content_portfolio_fr #facebook, #content_portfolio_nl #facebook{
	width: 153px;
	height: 121px;
	top: 237px;
	left: 128px;
	position: absolute;
	background-repeat: no-repeat;
}
	
#content_portfolio_d #facebook{
	background-image: url(/images/portfolio/teilensieesauf.jpg);	
}

#content_portfolio_en #facebook{
	background-image: url(/images/portfolio/shareiton.jpg);	
}

#content_portfolio_fr #facebook{
	background-image: url(/images/portfolio/partagezsur.jpg);	
}

#content_portfolio_nl #facebook{
	background-image: url(/images/portfolio/delenop.jpg);	
}

#content_portfolio_nl #facebook a, #content_portfolio_fr #facebook a, #content_portfolio_en #facebook a, #content_portfolio_d #facebook a{
	width: 153px;
	height: 121px;
	position: relative;
	float: left;
	text-indent: -9999px;
}

/*----------------------------------------------------------------------------------------------------*/
#profilefoto{
	width: 176px;
	height: 192px;
	top: 558px;
	left: 276px;
	position: absolute;
	}
	
#mail{
	width: 220px;
	height: 83px;
	top: 581px;
	left: 547px;
	position: absolute;
	background-repeat: no-repeat;
	background-image: url(images/landing/mail.jpg);
	}
	
.clear {clear:both;}

a { outline: none;}