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

* reset

* tools

* headers (h1, h2, h3)

* links

* body
	+ Header / #header
	+ Navigation / #navigation
	+ Main
		- Introduction / #introduction
		- Sidebar / #sidebar
			- Tooltips / #tooltips
			- Badges / #badges
			- Form / form
		- Information / #information
			- Left column / #leftcolumn
			- Right column / #rightcolumn
		- Portfolio / #portfolio
			- portfolio item /#portfolio-item
		- Parners / #partners
			- partner / #partner
		- Contact / #contact
	+ Footer / #footer

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

/* reset */

* {
	margin: 0;
	padding: 0;
}

a {
	outline: 0;
	}
	a img {
		border: 0;
	}

/* tools */

.clear {
	clear:both;
}

.floatleft {
	float: left;
}

.floatright {
	float: right;
}

/* headers (h1 and h2 are used for the company name and slogan) */

h2 {
	color: #10182a;
	font-size: 20px;
	font-weight: normal;
	margin-bottom: 3px;
	letter-spacing: 1px;
}

h3 {
	color: #10182a;
	font-size: 15px;
	padding: 2px 0 0 14px;
}

h4 {
	color: #3d3a38;
	font-size: 13px;
	font-weight: normal;
	padding: 3px 0 0 14px;
}

/* links */

a:link, a:visited, a:hover, a:active {
	color: #ffffff;
}

a:hover {
	background: #111f3d;
}

/* body */

html {
	overflow-y: scroll;
}

html, body {
	height: 100%;
}

body {
	background: #E99A58 url(background.jpg) repeat;
	font: 13px/19px Arial, sans-serif;
}

::-moz-selection {
	color: #ffffff;
	background: #111f3d;
}

::selection {
	color: #ffffff;
	background: #111f3d;
}

/* header */

div#header {
	background: url(headerbg.png) repeat-x;
	height: 111px;
	min-width: 840px;
	}
	div#header h1 {
		margin: 0 auto;
		position: relative;
		text-indent: -9999px;
		width: 650px;
		background: url(header.png) no-repeat;
		height: 35px;
		top: 28px;
		}
		div#header h1 a {
			display: block;
			height: 32px;
			width: 440px;
		}
		div#header h1 a:hover {
			background: none;
		}
	div#header h1.subheader {
		background: url(subheader.png) no-repeat;
		left: 1px;
		top: 25px;
	}

/* navigation */

div#navigation {
	background: url(navbg.png) 0 -1px repeat-x;
	min-width: 840px;
}

div#navigation ul {
	height: 30px;
	margin: 0 auto;
	width: 650px;
	}
	div#navigation ul li {
		display: inline;
		}
		div#navigation ul li a {
			background: url(navigation.png) no-repeat;
			display: block;
			float: left;
			height: 30px;
			margin-right: 5px;
			text-indent: -9999px;
			}
			div#navigation ul li a#nav-home {
				background-position: 0 -28px;
				width: 58px;
			}
			div#navigation ul li a#nav-informatie {
				background-position: -61px -28px;
				width: 78px;
			}
			div#navigation ul li a#nav-portfolio {
				background-position: -146px -28px;
				width: 73px;
			}
			div#navigation ul li a#nav-partners {
				background-position: -226px -28px;
				width: 75px;
			}
			div#navigation ul li a#nav-contact {
				background-position: -308px -28px;
				width: 63px;
			}
			div#navigation ul li a#nav-home:hover, div#navigation ul li a#nav-home.active {
				background-position: 0 0;
			}
			div#navigation ul li a#nav-informatie:hover, div#navigation ul li a#nav-informatie.active {
				background-position: -61px 0;
			}
			div#navigation ul li a#nav-portfolio:hover, div#navigation ul li a#nav-portfolio.active {
				background-position: -146px 0;
			}
			div#navigation ul li a#nav-partners:hover, div#navigation ul li a#nav-partners.active {
				background-position: -226px 0;
			}
			div#navigation ul li a#nav-contact:hover, div#navigation ul li a#nav-contact.active {
				background-position: -308px 0;
			}

/* main */

div#main {
	background: url(logo.png) no-repeat 0 99%;
	clear: both;
	margin:	40px auto 0;
	padding: 0 92px 55px;
	width: 650px;
	}
	div#main p {
		margin-bottom: 25px;
	}

	/* introduction */

	div#main div#introduction {
		color: #f6f0e9;
		float: left;
		width: 330px;
		}

	/* sidebar */

	div#main div#sidebar {
		background: url(transparantbg.png) repeat;
		border: 1px solid #b3825a;
		float: left;
		margin: 2px 0 20px 30px;
		position: relative;
		width: 285px;
		}
		div#main div#sidebar div#tooltips {
			background: url(tooltip.png) no-repeat;
			display: none;
			height: 45px;
			left: 0px;
			position: absolute;
			top: -40px;
			width: 285px;
			}
			div#main div#sidebar div#tooltips p {
				color: #f1f1f1;
				font-size: 11px;
				line-height: 12px;
				margin: 6px 6px 0 8px;
				text-indent: 0;
			}
		div#main div#sidebar dl#badges {
			padding: 3px 0 5px 14px;
			}
			div#main div#sidebar dl#badges dd {
				background: url(badges.png) no-repeat;
				float: left;
				height: 15px;
				margin: 0px 9px 9px 0;
				text-indent: -9999px;
				width: 80px;
				}
				div#main div#sidebar dl#badges dd.xhtml {
					background-position: 0 0;
				}
				div#main div#sidebar dl#badges dd.css {
					background-position: -90px 0;
				}
				div#main div#sidebar dl#badges dd.codebyhand {
					background-position: -179px 0;
				}
				div#main div#sidebar dl#badges dd.apache {
					background-position: 0 -24px;
				}
				div#main div#sidebar dl#badges dd.php {
					background-position: -90px -24px;
				}
				div#main div#sidebar dl#badges dd.mysql {
					background-position: -179px -24px;
				}
				div#main div#sidebar dl#badges dd.jquery {
					background-position: 0 -49px;
				}
				div#main div#sidebar dl#badges dd.netherland {
					background-position: -90px -49px;
				}
				div#main div#sidebar dl#badges dd.getfirefox {
					background-position: -179px -49px;
				}
				div#main div#sidebar dl#badges dd.email {
					background-position: 0 -73px;
				}
				div#main div#sidebar dl#badges dd.msn {
					background-position: -90px -73px;
				}
				div#main div#sidebar dl#badges dd.twitter {
					background-position: -179px -73px;
				}
		div#main div#sidebar hr {
			clear: both;
			border: 0;
			border-top: 1px solid #8d745d;
			height: 0;
			margin: 0 auto 2px;
			width: 258px;
		}
		div#main div#sidebar blockquote {
			background: url(blockquote.png) no-repeat;
			height: 90px;
			margin: 8px auto 7px;
			width: 258px;
			}
			div#main div#sidebar blockquote p{
				display: none;
			}
		div#main div#sidebar form#loginform {
			height: 6.1em;
			margin: 0 auto;
			text-align: center;
			width: 258px;
			}
			div#main div#sidebar form#loginform label {
				clear: left;
				color: #3d3a38;
				display: block;
				float: left;
				font-size: 11px;
				margin-top: 5px;
				margin-right: 5px;
				text-align: right;
				width: 7.7em;
			}
			div#main div#sidebar form#loginform input {
				color: #3d3a38;
				background: #f7e7d8;
				border: 1px solid #6d5d4d;
				font-size: 11px;
				height: 15px;
				width: 140px;
				margin: 6px 0 1px;
			}
			div#main div#sidebar form#loginform button#login {
				background: url(login.png) 0 -15px;
				border: 0;
				display: block;
				cursor: pointer;
				height: 15px;
				margin: 5px 0 0 90px;
				text-indent: -9999px;
				width: 56px;
				}
				div#main div#sidebar form#loginform p {
					margin-bottom: 10px;
					text-align: left;
				}
				div#main div#sidebar form#loginform img#loading {
					margin-top: 20px;
				}
				div#main div#sidebar form#loginform p#loginmessage {
					color: #222222;
					font-weight: bold;
					padding: 20px 0 0 0;
					text-align: center;
				}

	/* information */

	div#main div#information, div#main div#partners, div#main div#contact {
		background: url(transparantbg.png) repeat;
		border: 1px solid #b3825a;
		display: block;
		overflow: hidden;
		width: 655px;
		}
		div#main div#information div#leftcolumn {
			float: left;
			padding: 20px 0 0 20px;
			width: 44.6%;
		}
		div#main div#information div#rightcolumn {
			float: right;
			padding: 20px 20px 0 0;
			width: 45%;
		}

	/* portfolio */

	div#main div#portfolio {
	}

	div#main div#portfolio div.portfolio-item {
		background: url(transparantbg.png) repeat;
		border: 1px solid #b3825a;
		height: 128px;
		margin-bottom: 15px;
		position: relative;
		width: 650px;
		}
		div#main div#portfolio div.portfolio-item ul {
			float: left;
			margin: 0 0 12px 14px ;
		}
		div#main div#portfolio div.portfolio-item ul li {
			list-style: inside url(check.png);
		}
		div#main div#portfolio div.portfolio-item ul li.cross {
			list-style: inside url(cross.png);
		}
		div#main div#portfolio div.portfolio-item ul li.clock {
			list-style: inside url(clock.png);
		}
		div#main div#portfolio div.portfolio-item ul li.nrc {
			list-style: inside url(nrc.png);
		}
		div#main div#portfolio div.portfolio-item ul li.empty {
			list-style: inside url(empty.png);
		}
		div#main div#portfolio div.portfolio-item img {
			border: 1px solid #b3825a;
			height: 115px;
			position: absolute;
			top: 5px;
			right: 5px;
			width: 425px;
		}

	/* partners */

	div#main div#partners {
		}
		div#main div#partners h2 {
			padding: 15px 0 0 20px;
		}
		div#main div#partners p {
			margin-bottom: 10px;
			padding: 0 20px 0 20px;
		}
		div#main div#partners div.partner {
			border: 1px solid #b3825a;
			display: block;
			margin: 0 20px 10px 20px;
			overflow: hidden;

			}
			div#main div#partners div.partner h3 {
				color: #000000;
				font-weight: normal;
				padding: 5px 0 0 5px;
			}
			div#main div#partners div.partner img {
				border: 1px solid #b3825a;
				float: left;
				font-weight: normal;
				margin: 5px;
			}
			div#main div#partners div.partner p {
				margin: 0;
			}

	/* contact */

	div#main div#contact {
		}
		div#main div#contact h2 {
			padding: 15px 0 0 20px;
		}
		div#main div#contact p, div#main div#contact dl {
			margin-bottom: 10px;
			padding: 0 20px 0 20px;
		}
		div#main div#contact div#makecontact {
			clear: both;
			}
			div#main div#makecontact form, div#mailsend {
				float: left;
				text-align: left;
				margin-left: 20px;
				width: 22.2em;
				}
				div#main div#makecontact form label {
					clear: left;
					color: #3d3a38;
					display: block;
					float: left;
					padding: 2px 5px 0 0;
					vertical-align: top;
					width: 6.2em;
				}
				div#main div#makecontact form input, div#main div#makecontact form textarea {
					background: #f7e7d8;
					border: 1px solid #6d5d4d;
					color: #3d3a38;
					font: 12px Arial, sans-serif;
					margin-bottom: 2px;
					max-height: 200px;
					max-width: 200px;
					overflow: auto;
					width: 200px;
				}
				div#main div#makecontact form input {
					height: 18px;
					padding: 3px 0 0 2px;
					width: 198px;
				}
				div#main div#makecontact form button#send {
					background: url(send.png) 0 -80px;
					border: 0;
					cursor: pointer;
					height: 20px;
					outline: none;
					margin: 0 0 10px 86px;
					text-indent: -9999px;
					width: 202px;
					}
				div#main div#makecontact dl {
					float: left;
					margin-bottom: 10px;
					padding: 0 20px 0 20px;
				}
				div#main div#makecontact div#mailsend {
					color: #333333;
					padding-top: 20px;
					text-align: center;
				}
				div#main div#makecontact form .firstline {
					display: none;
					font-size: 0;
					height: 0;
				}

/* footer */

div#footer {
	clear: both;
	margin:	-45px auto;
	padding: 0 92px;
	width: 650px;
	}
	div#footer p {
		background: url(copyright.png) no-repeat;
		margin-left	: 160px;
		text-indent: -9999px;
		width: 305px;
	}