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

html, body {
	height: 100%;
}

body {
	margin: 0px;
	background: url(../images/background.gif) 0px 0px repeat-x #fafafa;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	line-height: 20px;
	color: #5c707c;
}

img {
	border: none;
}

a {
	text-decoration: none;
}

* {
	outline: none;
}

#container {
	position: relative;
	margin: 0px auto;
	width: 100%;
	min-height: 100%;
	height: auto !important; /* voor moderne browsers */
	height: 100%; /* voor IE */
	z-index: 25;
}

#site {
	width: 100%;
	height: auto;
	position: relative;
	padding: 0px 0px 75px 0px;
	text-align: left;
	margin: 0px auto;
}

#site:after {
	clear: both;
	display: block;
	font: 1px/0px serif;
	content: ".";
	height: 0;
	visibility: hidden;
}

#header {
	position: relative;
	margin: 50px auto 0px auto;
	width: 900px;
	height: 202px;
	z-index: 25;
	background: url(../images/header.gif) 500px 1px no-repeat;
}

#luters {
	position: relative;
	margin: 0px auto;
	width: 900px;
}

#topbar {
	position: relative;
	float: left;
	width: 900px;
	height: 50px;
	z-index: 25;
	top: -50px;
}

#topbar #inloggen {
	position: relative;
	float: right;
	padding: 0px 20px;
	line-height: 50px;
	font-weight: bold;
	background: url(../images/inloggen.png) 12px 14px no-repeat;
	text-indent: 25px;
	cursor: pointer;
}

#topbar #inloggen a {	
	color: #5c707c;
	color: #d4d9dc;
	display: block;
}

#topbar #items {
	position: relative;
	float: left;
	width: 700px;
	height: 50px;
	color: #d4d9dc;
	line-height: 50px;
	padding: 0px 0px 0px 20px;
	overflow: hidden;
}

#topbar #items a {
	color: #d4d9dc;
}

#topbar #items span {
	padding: 0px 10px;
}

#topbar #items .fb {
	position: relative;
	float: left;
	width: 90px;
	height: 40px;
	padding: 3px 0px 0px 0px;
}

#topbar #items .twitter {
	position: relative;
	float: left;
	width: 100px;
	height: 30px;
	padding: 15px 0px 0px 0px;
}

#logo {
	position: absolute;
	left: 20px;
	top: 35px;
	z-index: 25;
}

#showcase, #quote {
	position: relative;
	float: right;
	width: 550px;
	height: 223px;
	margin: 20px 0px;
	border: 1px #ebebeb solid;
	background: #fafafa;	
	z-index: 25;
}

#quote {
	border: 1px #fff solid;
	background: none;
	text-align: center;
}

#showcase #projects {
	position: relative;
	float: left;
	width: 550px;
	height: 223px;
	overflow: hidden;
	z-index: 15;
}

#showcase #projects #slider {
	position: relative;
	float: left;
}

#showcase #projects img {
	position: relative;
	float: left;
	top: 0px;
}

#showcase #paging {
	position: absolute;
	right: 0px;
	bottom: 0px;
	padding: 5px;
	z-index: 25;
}

#showcase #paging span {
	position: relative;
	float: left;
	width: 18px;
	height: 18px;
	line-height: 17px;
	text-align: center;
	border: 1px #CCC solid;
	font-weight: bold;
	margin: 5px 5px;
	cursor: pointer;
	background: #fafafa;
}

#showcase #paging span.active {
	background: #CCC;
}

#showcase #scrollUp {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 111px;
	z-index: 20;
}

#showcase #scrollDown {
	position: absolute;
	left: 0px;
	top: 111px;
	width: 100%;
	height: 112px;
	z-index: 20;
}

#menu {
	width: 900px;
	height: 35px;
	position: absolute;
	left: 0px;
	bottom: 2px;
}

#menu .item {
	position: relative;
	float: left;
	height: 35px;
	line-height: 35px;
	padding: 0px 15px;
	border: 1px transparent solid;
	border-bottom: 0px;
}

#menu .item a {
	display: block;
	font-weight: bold;
	font-size: 13px;
	color: #5c707c;
}

#menu .item.active {
	height: 36px;
	border: 1px #ebebeb solid;
	border-bottom: 0px;
	background: #fafafa;
}

#menu .item.active a {
	color: #0083a9;
}

#menu .item .submenu {
	position: absolute;
	left: -2px;
	top: 35px;
	width: 100%;
	border: 1px #ebebeb solid;
	border-top: none;
	line-height: 25px;
	text-indent: 15px;
	padding: 0px 2px 5px 0px;
	background: #fff;
	display: none;
}

#menu .item.active .submenu {
	left: -1px;
	background: #fafafa;
	padding: 0px 0px 5px 0px;
}

#menu .item .submenu a {
	position: relative;
	float: left;
	width: 100%;
	font-size: 11px;
	font-weight: normal;
	color: #5c707c;
	white-space: nowrap;
}

#menu .item .submenu a:hover {
	font-weight: bold;
}

#presentatie {
	position: relative;
	float: left;
	width: 100%;
	height: 0px;
	background: url(../images/presentatie.jpg) center bottom;
	overflow: hidden;
	z-index: 50;
}

#presentatie #middle {
	position: relative;
	margin: 0px auto;
	width: 900px;
	height: 250px;
	z-index: 50;
	display: none;
}

#presentatie #wt {
	position: absolute;
	left: -200px;
	top: 0px;
	width: 370px;
	height: 250px;
	background: url(../images/presentatie/luters.png);
	z-index: 30;
}

#presentatie #sluiten {
	position: absolute;
	right: 15px;
	bottom: 216px;
	width: 56px;
	height: 19px;
	background: url(../images/presentatie/sluiten.png) no-repeat;
	cursor: pointer;
	z-index: 50;
}

#presentatie #projecten {
	position: relative;
	float: left;
	width: 100%;
	text-align: center;
	z-index: 40;
}

#presentatie #projecten .group {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 900px;
}

#presentatie #projecten div .presTitle {
	position: relative;
	float: left;
	padding: 101px 295px;
	width: 310px;
	height: 48px;
	margin: 0px auto;
}

#presentatie #projecten div .show {
	position: relative;
	float: left;
	width: 350px;
	height: 203px;
	overflow: hidden;
	z-index: 30;
	background: #fff;
}

#presentatie #projecten div .imgLeft {
	position: absolute;
	left: 74px;
	top: 24px;	
	width: 350px;
	height: 203px;
}

#presentatie #projecten div .tip {
	position: absolute;
	left: 0px;
	bottom: 0px;
	height: 30px;
	line-height: 30px;
	width: 350px;
	text-indent: 8px;
	font-family: Verdana, Geneva, sans-serif;
	text-align: left;
	font-size: 11px;
	color: #000;
	z-index: 40;
	display: none;
	background: url(../images/presentatie/tip.png) left bottom no-repeat;
}

#presentatie #projecten div .tip a {
	color: #000;
}

#presentatie #projecten div .prj {
	position: relative;
	float: left;
	width: 900px;
	height: 250px;
}

#presentatie #projecten div .nieuwsbrief {
	background: url(../images/presentatie/projecten/nieuwsbrief.png);
}

#presentatie #projecten div .profielnorm {
	background: url(../images/presentatie/projecten/profielnorm.png);
}

#presentatie #projecten div .tegelgalerie {
	background: url(../images/presentatie/projecten/tegelgalerie.png);
}

#presentatie #projecten div .yourmonitor {
	background: url(../images/presentatie/projecten/yourmonitor.png);
}

#presentatie #projecten .social div {
	position: absolute;
	left: 0px;
	top: 0px;
	display: none;
}

#presentatie #projecten .social .twitter {
	left: 150px;
	top: 50px;
}

#presentatie #projecten .social .linkedin {
	left: 387px;
	top: 100px;
}

#presentatie #projecten .social .facebook {
	left: 600px;
	top: 50px;
}

#sitepath {
	position: relative;
	float: left;
	width: 890px;
	padding: 20px 5px;
	font-size: 10px;
	color: #9d9d9d;
	z-index: 20;
}

#sitepath a {
	text-decoration: underline;
	color: #9d9d9d;
}

#sitepath a:hover {
	text-decoration: none;
}

#sitepath span {
	padding: 0px 10px;
}

#sitepath #impressie {
	position: absolute;
	top: 6px;
	right: -4px;
	cursor: pointer;
	height: 47px;
	width: 94px;
	display: none;
	background: url(../images/presentatie/impressie.png);
}

#content {
	position: relative;
	float: left;
	width: 860px;
	border: 1px #ebebeb solid;
	background: #fff;
	padding: 20px;
	z-index: 20;
	color: #858585;
}

#content a {
	color: #0083a9;
}

#content #projecten, #content #tekst {
	position: relative;
	float: left;
	width: 860px;
}
#content #projecten {
	margin: 10px 0px -10px 0px;
}

#content #projecten .project {
	position: relative;
	float: left;
	width: 378px;
	height: 128px;
	border: 1px #ededed solid;
	margin: 10px 10px 10px 0px;
	padding: 15px 20px;
}

#content #projecten .project img {
	position: absolute;
	right: 0px;
	top: 0px;
	border-left: 1px #ebebeb solid;
}

#content #projecten .project.last {
	margin: 10px 0px 10px 10px;
}

#content #projecten .project .titel {
	color: #0083a9;
	font-weight: bold;
}

#content #projecten .project .tekst {
	position: relative;
	float: left;
	width: 220px;
	padding: 10px 0px 0px 0px;
}

#content #projecten .project a {
	position: absolute;
	left: 20px;
	bottom: 10px;
	color: #0083a9;
}

#content strong, #content b {
	font-size: 12px;
	color: #5c707c;
}

#content h1 {
	position: relative;
	float: left;
	width: 100%;
	font-size: 14px;
	font-weight: bold;
	padding: 0px 0px 15px 0px;
	margin: 0px;
	color: #0083a9;
}

#content .kolom {
	position: relative;
	float: left;
	width: 430px;
}

#content ul {
	padding: 0px 0px 0px 20px;
	list-style-type: inherit;
}

#content form {
	position: relative;
	float: left;
}

#content form .caption {
	width: 150px;
}

#content .melding.fout {
	position: relative;
	float: left;
	width: 100%;
	font-weight: bold;
	padding: 0px 0px 10px 30px;
	background: url(../images/fout.jpg) 0px 0px no-repeat;
}

#content form .text, #content form textarea {	
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	color: #858585;
	border: 1px #546873 solid;
	padding: 3px;
	margin: 2px 0px;
	width: 225px;
}

#content form .submit {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	color: #99a7a9;
	border: 1px #546873 solid;
	background: #546873;
	padding: 3px;
	margin: 2px 0px;
	width: 233px;
	cursor: pointer;
}

#content form .required {
	width: 20px;
	text-align: right;
}

#content .faq li {
	cursor: pointer;
}

#content .faq li div {
	display: none;
}

#app {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 175px;
	border: 1px #dedede solid;
	background: #fafafa;
	padding: 0px 0px 10px 0px;
}

#app a {
	position: relative;
	float: left;
	width: 200px;
	font-size: 18px;
	line-height: 50px;
	color: #666;
	text-indent: 15px;
}

.projecten {
	position: relative;
	float: left;
	padding: 20px;
	width: 185px;
}

.projecten .titel {
	position: relative;
	float: left;
	width: 100%;
	color: #0083a9;
	font-weight: bold;
	padding: 0px 0px 8px 0px;
}

.projecten span {
	position: relative;
	float: left;
	width: 100%;
	font-size: 10px;
}

#footer {
	position: absolute;
	left: 0px;
	bottom: 0px;
	height: 50px;
	width: 100%;
	background: #fff;
	border-top: 1px #ededed solid;
	background: url(../images/footer.gif);
}

#footer .content {
	position: relative;
	margin: 0px auto;
	width: 860px;
	font-size: 10px;
	line-height: 50px;
	color: #d4d9dc;
}

#footer .content .left {
	position: relative;
	float: left;
	width: 50%;
	color: #d4d9dc;
}

#footer .content .right {
	position: relative;
	float: left;
	width: 50%;
	text-align: right;
}

#footer .content a {
	color: #9d9d9d;
	color: #d4d9dc;
}

#footer .content span {
	color: #9d9d9d;
	padding: 0px 5px;
}