/* Main CSS */

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


a img {
	border:			0px;
}


br {
	clear:			left;
}

html, body {
	width: 			100%;
}

div { position: relative;}

body {
	font-family:	trebuchet ms;
	color: 			#979797;
	font-size: 		12px;
	text-align: 	center;
	line-height: 	18px;
	background: black url('../images/interface/bg-body.jpg') center top no-repeat;
	background-attachment: fixed;
}

/* End Main CSS */
/* Layout CSS */

div#container-header-bg {
	background:		url('../images/interface/bg-header-repeat.png') center top repeat-x;
	height:			auto;

}

div#container-footer-bg {
	background:		url('../images/interface/bg-footer-repeat.png') center bottom repeat-x;
	height:			auto;

}

div#container-content{
	width:			830px;
	height:			auto;
	text-align:		left;
	margin:			0px auto;

}

/* Header CSS */

div#header {
	height:			100px;
	width:			830px;
}

a#logo {
	float:			left;
	margin-left:	40px;
}

ul#menu {
	float: 			right;
}

ul#menu li {
	 float:			left;
	 list-style-type:none;
}

ul#menu li a {
	display: 		block;
	height: 		57px;
	padding:		0px 20px;
	background-position:	center 0px;
}

a#webdesign {
	width:				103px;
	background-image:	url('../images/interface/menu-webdesign.jpg');
}

a#graphics {
	width:				81px;
	background-image:	url('../images/interface/menu-graphics.jpg');
}

a#contact {
	width:				73px;
	background-image:	url('../images/interface/menu-contact.jpg');
}

ul#menu li a:hover {
	background-position:	center -57px;
}

/* End Header CSS */

/* Item CSS */

div.item {
	background:		url('../images/interface/bg-item.png') center top no-repeat;
	width:			830px;
	height:			340px;
}

div.item-bage-webdesign,
div.item-bage-graphis {
	z-index:		20;
	position:		absolute;
	top:			28px;
	left:			28px;
	width:			100px;
	height:			100px;
}

div.item-bage-webdesign {
	background:		url('../images/interface/overlay-webdesign-bage.png') no-repeat;
}

div.item-bage-graphics {
	background:		url('../images/interface/overlay-graphics-bage.png') no-repeat;
}

div.item-thumnail {
	position:		absolute;
	top:			40px;
	left:			40px;
}

img.thumbnail {
	position: absolute;
}

div.item-content {
	position:		absolute;
	top:			40px;
	left:			591px;
	width:			190px;
}

div.item-content img.title {
	margin:			2px 0px 8px 0px;
}

a.bezoek-de-website {
	background-image:	url('../images/interface/button-bezoek-de-website.gif');
	position:		absolute;
	top:			250px;
	left:			591px;
	width:			135px;
}

/* End Item CSS */

div#footer {
	width:			830px;
	clear:			both;
	padding-top:	50px;
	height:			240px;
}

div#footer img.title {
	display:		block;
	margin-bottom:	8px;
	clear:			both;
}

/* Contact CSS */

div#contact {
	background: 	url('../images/interface/iphone.png');
	position:		absolute;
	top: 			-15px;
	left: 			0px;
	padding-left:	40px;
	width: 			345px;
	height: 		109px;
	padding-top:	196px;
}

form label { 
	float:			left;
	height:			32px;
	width: 			60px;
}


form input, form textarea {
	border: 		1px solid #565656;
	background:		#1a1a1a
}

form input {
	width: 			154px;
	height:			14px;
	color:			#979797;
	padding:		3px;
}

form textarea {
	width: 			284px;
	height:			64px;
	color:			#979797;
	padding:		3px;
}

/* End Contact CSS */

.formulier-button {
	position:				absolute;
	top:					182px;
	left:					60px;
	background-image:		url('../images/interface/button-verzend-bericht.gif');
	background-position:	center top;
	border:					1px solid #373737;
	width:					145px;
	height:					30px;
	cursor: 				pointer;
}

.formulier-button:hover {
	background-position:	center -30px;
}

.formulier-button:focus {
	border:					none;
}

a.button, a.ibutton {
	display:				block;
	height:					30px;
	background-position:	center top;
	border:					1px solid #373737;
	padding:				0px 10px;
}

a.ibutton {
	height:					36px;
	width:					179px;
	background-position:	-9px top;
	border:					0px;
	padding:				0px 0px;
}

a.button:hover {
	background-position:	center -30px;
}

a.ibutton:hover {
	background-position:	-9px -36px;
}

a.button-footer {
	position:		absolute;
	top:			170px;
}

a.download-cv {
	background-image:	url('../images/interface/button-download-cv.gif');
	width:				103px;
	left:				0px;
}

a.mail {
	background-image:	url('../images/interface/button-mail.gif');
}

a.twitter {
	background-image:	url('../images/interface/button-twitter.gif');
}

a.linkedin {
	background-image:	url('../images/interface/button-linkedin.gif');
}

a.download-vcard {
	background-image:	url('../images/interface/button-download-vcard.gif');
	width:				133px;
	left:				145px;
}

div#informatie {
	position:		absolute;
	right: 			40px;
	width: 			350px;
}

img#pasfoto {
	position: absolute;
	left: 220px;
	top: -10px;
}

div#informatie-content {
	width: 			220px;
	top: 
}


/* End Layout CSS */