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

* {
	margin:				0px;
	padding:			0px;
}

html {
	overflow:			scroll;
}

img {
	border:				none;
}

body {
	background-image:	url(../../images/body.png);
	background-repeat:	repeat-x;
	background-color:	#121212;
	color: 				#e6e6e6;
	font:				normal 62.5% Arial;
}

/* Structuur */
#wrapper {
	margin: 			0 auto;
	width: 				1024px;
}

/* Header */
#header {
	float:				left;
	height:				60px;
	width:				317px;
}

#header h1 {
	font-size:			33px;
	font-weight:		normal;
	color:				#aaaaaa;
}

#header h1 a {
	text-decoration: 	none;
	font-size:			33px;
	font-weight:		normal;
	color:				#aaaaaa;
}

#header h1 a:hover {
	text-decoration: 	none;
	font-size:			33px;
	font-weight:		normal;
	color:				#aaaaaa;
}

#header h2 {
	font-size:			15px;
	color:				#aaaaaa;
	font-weight:		normal;
	float:				right;
}

.blue {
	color:				#d9623a;
}

/* Menu */
#menu {
	height:				60px;
	margin-right:		7px;
	float:				right;
}

#hmenu {
	float:				left;
	width:				360px;
}

#hmenu ul {
	width:				360px;
	list-style:			none;
}

#hmenu li {
	float:				left;
	margin-right:		10px;
	width: 				80px;
	height: 			60px;
}

#hmenu li img {
	margin:				5px;
}

#hmenu li a {
	border:				none;
	display:			block;
	width: 				80px;
	height: 			60px;
}

#hmenu li a:hover {
	border:				none;
	border-bottom:		2px solid #d9623a;
}

#search {
	height:				60px;
	display:none;
	width: 				50px;
	padding-left:		55px;
	float:				right;
}

#search img {
	margin: 			5px;
}

#search a {
	border:				none;
	display:			block;
	height:				30px;
	width:				30px;
}

#search a:hover {
	border:				none;
	background-color:	#333333;
}

/* content kader */
#content {
	margin-top:			15px;
	background-color:	#6d6d6d;
	width:				1008px;
}

/* Stappenplan */
#steps {
	margin-left:		15px;
	display:			block;
}

#steps a {
	color:				#d9623a;
	font-weight:	 	bold;
}

#step1 {
	margin-top:			10px;
	float:				left;
	display:			block;
	width:				318px;
	height:				220px;
	background-image:	url(../../images/kader1.gif);
	margin-right:		10px;
	color:				#6d6d6d;
}

#step2 {
	margin-top:			10px;
	float:				left;
	display:			block;
	width:				318px;
	height:				220px;
	background-image:	url(../../images/kader2.gif);
	margin-right:		10px;
	color:				#6d6d6d;
}

#step3 {
	margin-top:			10px;
	float:				left;
	display:			block;
	width:				318px;
	height:				220px;
	background-image:	url(../../images/kader3.gif);
	margin-right:		10px;
	color:				#6d6d6d;
}

.stepnumber h3 {
	text-indent:		-2000px;	
}

.steptext {
	font-size:			12px;
	width:				180px;
	margin-left:		130px;
}

#step2 .steptext {
	font-size:			12px;
	width:				170px;
	margin-left:		140px;
}

#step1 .steptext {
	font-size:			12px;
	width:				210px;
	margin-left:		90px;
}

.steptext p {
	margin-bottom:		5px;
}

.steptext ul {
	margin-top:			5px;
	margin-left: 		50px;
}

/* Omschrijving service */
#description {
	float:				left;
	margin-left:		15px;
	width:				318px;
	font-size:			12px;
}

#description h3 {
	font-size:			14px;
	margin-bottom:		5px;
	float:				left;
}

#description h2 {
	font-size:			14px;
	margin-bottom:		5px;
	margin-left: 		5px;
	float:				left;
	color:				#d9623a;
}

#description p {
	margin-bottom:		10px;
}

/* Nieuwste */
#newest {
	float:				left;
	margin-left:		23px;
}

#newest h3 {
	font-size:			14px;
	margin-bottom:		5px;
}

#proj {
	margin-left:		15px;
	margin-top:			10px;
}

#proj #naam {
	display:			block;
	width:				270px;
	height:				27px;
	background-color:	#999999;
}

#proj #naam h3 {
	margin-top:			5px;
	margin-bottom:		5px;
	margin-left:		10px;
	margin-right:		10px;
	font-size:			14px;
	color:				#FFFFFF;
	float:				left;
}

#proj #naam p {
	float:				right;
	font-size:			13px;
	margin-top:			6px;
	margin-bottom:		5px;
	margin-left:		10px;
	margin-right:		10px;
	color:				#333333;
}

#proj a {
	display:			block;
	border:				none;
	background-color:	#cacaca;
	width:				270px;
	height:				220px;
}

#proj img {
	margin:				10px;
}

#proj a:hover {

	display:			block;
	border:				none;
	background-color:	#d9623a;
	width:				270px;
	height:				220px;
}

/* Ik wil ... */
#wantto {
	float:				left;
	margin-left:		40px;
}

#wantto h3 {
	font-size:			14px;
	margin-bottom:		5px;
}

#wantto ul {
	margin-top:			15px;
	margin-left:		25px;
	margin-bottom:		15px;
	list-style:		 	square;
}

#wantto ul li {
	margin-bottom:		5px;
}

#wantto ul li a {
	font-size:			14px;
	color:				#FFFFFF;
	text-decoration: 	none;
}

#wantto ul li a:hover {
	font-size:			14px;
	color:				#d9623a;
	text-decoration: 	underline;
}

/* footer */
#footer p {
	text-indent:		-5000px;
}

#shine {
	width:				1008px;
	height:				71px;
	display:			block;
	background-image:	url(../../images/shine.gif);
	background-position:bottom;
	background-repeat:	none;
}

/* portfolio */
.portfolio {
	padding:			5px;
	font-size:			12px;
}

.project {
	float:				left;
	margin:				30px;
}

.projnaam {
	display:			block;
	width:				270px;
	height:				27px;
	background-color:	#999999;
}

.projnaam h3 {
	margin-top:			5px;
	margin-bottom:		5px;
	margin-left:		10px;
	margin-right:		10px;
	font-size:			14px;
	color:				#FFFFFF;
	float:				left;
}

.projnaam p {
	float:				right;
	font-size:			13px;
	margin-top:			6px;
	margin-bottom:		5px;
	margin-left:		10px;
	margin-right:		10px;
	color:				#333333;
}

.project a {
	display:			block;
	border:				none;
	background-color:	#cacaca;
	width:				270px;
	height:				220px;
}

.project img {
	margin:				10px;
}

.project a:hover {
	display:			block;
	border:				none;
	background-color:	#d9623a;
	width:				270px;
	height:				220px;
}

/* Curriculum vitae */
.cv {
	padding-top:		10px;
	margin-left:		10px;
}

.cv a {
	color:				#FFFFFF;
}

.cv a:hover {
	color:				#d9623a;
}

.personal {
	margin:				10px;
}

.personal h3 {
	margin-bottom:		5px;
	font-size:			15px;
}


.personal dl {
	margin-left:		10px;
}

.personal dd {
	font-size:			12px;
	margin-bottom:		1px;
	margin-left:		5px;
}

.personal dt {
	width:				150px;
	font-size:			12px;
	float:				left;
}

.education {
	margin:				10px;
}

.education h3 {
	margin-bottom:		5px;
	font-size:			15px;
}

.education dl {
	margin-left:		10px;
}

.education dd {
	font-size:			12px;
	margin-bottom:		1px;
}

.education dt {
	width:				150px;
	font-size:			12px;
	float:				left;
}

.education h4 {
	margin-top:			10px;
	font-size:			12px;
	margin-bottom:		5px;
}

.education ul {
	font-size:			12px;
	margin-bottom:		1px;
	margin-left:		30px;
}

.education table {
	margin-left:		10px;
	font-size:			12px;
	background-color:	#666666;
}

.education tr {
	background-color:	#999999;
	height:				20px;
}

.education td, th {
	width:				75px;
	text-align:			center;
}

.experience {
	margin-top:			10px;
	margin-left:		10px;
}

.experience h3 {
	margin-bottom:		5px;
	font-size:			15px;
}

.experience dl {
	margin-left:		10px;
}

.experience dd {
	font-size:			12px;
	margin-bottom:		1px;
}

.experience dt {
	width:				200px;
	font-size:			12px;
	float:				left;
}

.experience h4 {
	margin-top:			10px;
	font-size:			12px;
	margin-bottom:		5px;
}

.experience ul {
	font-size:			12px;
	margin-left:		30px;
}

/* opmaak contact */
.contactform {
	padding-top:		5px;
	margin-left:		10px;
}

.contactform dl dt {
	margin-top:			5px;
}

.sendbut {
	margin-top:			10px;
}

/* projectview */
#projectview h2 {
	margin-top:			10px;
	margin-left:		10px;
	font-size:			14px;
	float:				left;
	color:				#FFFFFF;
	margin-bottom:		20px;
}

#projectview h3 {
	font-size:			14px;
	margin-bottom:		20px;
	margin-top:			10px;
	margin-left: 		5px;
	float:				left;
	color:				#d9623a;
} 


#projectview #pics {
	float:				left;
}

#projectview #stdpic {
	display:			block;
	border:				none;
	background-color:	#d9623a;
	width:				260px;
	height:				210px;
	margin:				20px;
	margin-bottom:		0px;
}

#projectview #omschrijving p {
	font-size:			12px;
	margin-bottom:		5px;
}

#projectview #omschrijving a {
	color:				#FFFFFF;
	font-size:			13px;
}

#projectview #omschrijving a:hover {
	color:				#d9623a;
	font-size:			13px;
}

#projectview #stdpic img {
	margin-left:		5px;
	margin-top:			5px;
}

#projectview #omschrijving {
	margin-top:			20px;
	float:				left;
	display:			block;
	width:				500px;
}

#projectview #thumbs {
	clear:				both;
	margin-left:		20px;
}

#projectview #thumbs a {
	float:				left;
	margin-right:		7px;
	margin-top:			7px;
	display:			block;
	border:				none;
	background-color:	#cacaca;
	width:				126px;
	height:				106px;
}

#projectview #thumbs img {
	margin:				3px;
}

#projectview #thumbs a:hover {
	float:				left;
	margin-right:		7px;
	margin-top:			7px;
	display:			block;
	border:				none;
	background-color:	#d9623a;
	width:				126px;
	height:				106px;
}

/* U bevindt zich hier ... */
#here {
	margin-left:		10px;
	font-size:			11px;
}

#here p {
	color:				#FFFFFF;
}

#here a {
	color:				#FFFFFF;
}

#here a:hover {
	color:				#d9623a;
} 

/* contact formulier */
.contactform {
	margin-bottom:		10px;
	width:				980px;
	float:				left;
	font-size:			13px;
	margin-left:		15px;
	margin-top:			10px;
	color:				#FFFFFF;
}

.contactform dl dt {
	margin-top:			5px;
}

.mailpic {
	float:				left;
	margin-top:			20px;
	margin-right:		205px;
	margin-left:		190px;
}

.formup {
	border-bottom: 		thin solid #d9623a;
	height:				130px;
	margin:				20px;
	margin-bottom:		10px;
	margin-top:			20px;
}

.formup p {
	margin-bottom:		15px;
}

.formup dd {
	font-size:			12px;
	margin-bottom:		10px;
	margin-left:		5px;
}

.formup dt {
	width:				160px;
	font-size:			12px;
	float:				left;
}

.formleft {
	border-bottom: 		thin solid #d9623a;
	width:				500px;
	display:			block;
	float:				left;
	margin-left:		20px;
	margin-top:			10px;
	margin-bottom:		20px;
	height:				100px;
}

.formleft dl {
	margin-left:		60px;
}

.formleft p {
	margin-bottom:		15px;
}

.formleft dd {
	font-size:			12px;
	margin-bottom:		10px;
	margin-left:		5px;
}

.formleft dt {
	width:				160px;
	font-size:			12px;
	float:				left;
}

.formright {
	border-bottom: 		thin solid #d9623a;
	display:			block;
	float:				left;
	margin-top:			10px;
	height:				100px;
	width:				460px;
}

.formright p {
	margin-bottom:		15px;
}

.formright dd {
	font-size:			12px;
	margin-bottom:		10px;
	margin-left:		5px;
}

.formright dt {
	width:				160px;
	font-size:			12px;
	float:				left;
}

.formdown {
	margin-bottom:		20px;
	margin-left:		20px;
}

.formdown dl {
	margin-left:		60px;
}

.formdown p {
	margin-bottom:		15px;
}

.formdown dd {
	font-size:			12px;
	margin-bottom:		10px;
	margin-left:		5px;
}

.formdown dt {
	width:				160px;
	font-size:			12px;
	float:				left;
}

.sendbut {
	margin-top:			5px;
	margin-bottom:		10px;
	margin-left:		870px;
}

.verzonden {
	margin-top:			60px;
}

/* index kleurenkiezer */

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

#wrapper #blue {
	float:				left;
	margin:				10px;
	margin-left:		25px;
}

#wrapper #blue a {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/blue.gif);
}

#wrapper #blue a:hover {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/blue_over.gif);
}

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

#wrapper #pink {
	float:				left;
	margin:				10px;
}

#wrapper #pink a {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/pink.gif);
}

#wrapper #pink a:hover {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/pink_over.gif);
}

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

#wrapper #darkgreen {
	float:				left;
	margin:				10px;
}

#wrapper #darkgreen a {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/darkgreen.gif);
}

#wrapper #darkgreen a:hover {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/darkgreen_over.gif);
}

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

#wrapper #yellow {
	margin:				10px;
	float:				left;
}

#wrapper #yellow a {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/yellow.gif);
}

#wrapper #yellow a:hover {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/yellow_over.gif);
}

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

#wrapper #orange {
	margin:				10px;
	float:				left;
	margin-left:		25px;
}

#wrapper #orange a {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/orange.gif);
}

#wrapper #orange a:hover {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/orange_over.gif);
}

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

#wrapper #white {
	margin:				10px;
	float:				left;
}

#wrapper #white a {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/white.gif);
}

#wrapper #white a:hover {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/white_over.gif);
}

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

#wrapper #red {
	margin:				10px;
	float:				left;
}

#wrapper #red a {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/red.gif);
}

#wrapper #red a:hover {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/red_over.gif);
}

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

#wrapper #gray {
	margin:				10px;
	float:				left;
}

#wrapper #gray a {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/gray.gif);
}

#wrapper #gray a:hover {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/gray_over.gif);
}

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

#wrapper #purple {
	float:				left;
	margin:				10px;
	margin-left:		25px;
}

#wrapper #purple a {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/purple.gif);
}

#wrapper #purple a:hover {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/purple_over.gif);
}

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

#wrapper #brown {
	float:				left;
	margin:				10px;
}

#wrapper #brown a {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/brown.gif);
}

#wrapper #brown a:hover {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/brown_over.gif);
}

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

#wrapper #green {
	float:				left;
	margin:				10px;
}

#wrapper #green a {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/green.gif);
}

#wrapper #green a:hover {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/green_over.gif);
}

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

#wrapper #darkblue {
	float:				left;
	margin:				10px;
}

#wrapper #darkblue a {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/darkblue.gif);
}

#wrapper #darkblue a:hover {
	color:				#121212;
	height:				25px;
	width:				25px;
	text-decoration: 	none;
	display:			block;
	background-image: 	url(../../images/darkblue_over.gif);
}
 
/* Andere */
.clear,.clearer {
	clear: 				both;
}
 
.clear,.clearer {
	font-size: 			0;
}

/* Extra : Lightbox */
#lightbox{
	color:				#FFFFFF;
	font-size: 			15px;
	background-color:	#d9623a;
	padding: 			10px;
	border-bottom: 		2px solid #d9623a;
	border-right: 		2px solid #d9623a;
}

#lightboxDetails{
	font-size: 			0.8em;
	padding-top: 		0.4em;
}	

#lightboxCaption{ 		
	float: 				left; 
}

#keyboardMsg{ 
	float:				right;
}

#lightbox img{ 
	border: 			none;
} 

#overlay img{ 
	border: 			none;
}

#overlay{ 
	background-image: 	url(../../images/overlay.png); 
}

* html #overlay{
	background-color: 	#000;
	back\ground-color: 	transparent;
	background-image: 	url(../../images/blank.gif);
	filter: 			progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../images/overlay.png", sizingMethod="scale");
}