@charset "utf-8";
@import url("/css/reset.css");
@import url("/css/typography.css");

html {
	overflow-y: scroll;
}

body {
	margin: 0;
	background: #000;
}

body, html {
	height: 100%;
}

img#bg_photo, img#bg_bottom, img#bg_top, img#bg_top2 {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}

span.linkedin {
	position: absolute;
	top: 22px;
	margin-left: 16px;
}

img#bg_photo {
	z-index: -2;
	max-height: 748px;
}

img#bg_bottom {
	z-index: -1;
	max-height: 750px;
}

img#bg_top, img#bg_top2 {
	z-index: -1;
}

img.photo_left {
	vertical-align: top;
}

img.photo-right {
	float: right;
	margin: 0 0 13px 13px;
}

div#wrapper {
	position: relative;
	min-height: 100%;
}

div#site_wrap {
	position: relative;
	margin: 0 auto;
	width: 850px;
}

div#header {
	text-align: left;
	width: 850px;
	position: relative;
	z-index: 2;
}

ul#lang {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
	margin: 0;
	padding: 6px 0;
}

	ul#lang li {
		float: left;
		overflow: hidden;
	}
	ul#lang li a {
		display: block;
		font-size: 1.1em;
		color: #666;
		text-decoration: none;
	}
	ul#lang li a:hover, ul#lang li.active a {
		color: #fff;
	}
	ul#lang li.first {
		background: url("/css/images/slash.gif") no-repeat right bottom;
	}
	ul#lang li.first a {
		margin: 0 1.364em 0 0;
	}

div#logo {
	position: absolute;
	top: 44px;
	left: 0;
	background: url("/css/images/logo.png") no-repeat;
	width: 210px;
	height: 15px;
	overflow: hidden;
	z-index: 3;
	text-indent: -999em;
}
#home #logo {
	background-image: none;
}
div#logo a {
	display: block;
	width: 210px;
	height: 15px;
	overflow: hidden;
}

ul#menu {
	list-style: none;
	position: absolute;
	top: 41px;
	right: 0;
	z-index: 3;
	margin: 0;
}

h3 {
	font-size: 1.7em;
	color: #888;
}

.menu_en {
	width: 485px;
}

	ul#menu li {
		float: left;
		display: inline;
		height: 28px;
		overflow: hidden;
	}
	
	ul#menu li a {
		display: block;
		height: 28px;
		text-indent: -999em;
		cursor: pointer;
	}
	
	ul#menu li.stripe {
		background: url(images/stripe.png) 0 0 no-repeat; 
		width: 23px;
		height: 28px;
		display: block; 
		text-indent: -999em;
	}
	
	ul#menu li.m_home a {
		background: url("/css/images/menu_home.png") 0 0 no-repeat; 
		width: 47px;
		cursor: pointer;
	}
	
	ul#menu li.m_over_livetime a {
		background: url("/css/images/menu_over_livetime.png") 0 0 no-repeat; 
		width: 66px;
		cursor: pointer;
	}
	
	ul#menu li.m_team a {
		background: url("/css/images/menu_team.png") 0 0 no-repeat; 
		width: 44px;
	}
	
	ul#menu li.m_producties a {
		background: url("/css/images/menu_producties.png") 0 0 no-repeat; 
		width: 85px;
	}
	
	ul#menu li.m_productions a {
		background: url("/css/images/menu_productions.png") 0 0 no-repeat; 
		width: 95px;
	}
	
	ul#menu li.m_klanten a {
		background: url("/css/images/menu_klanten.png") 0 0 no-repeat; 
		width: 60px;
	}
	
	ul#menu li.m_login a {
		background: url("/css/images/menu_login.png") 0 0 no-repeat; 
		width: 42px;
	}
	
	ul#menu li.m_contact a {
		background: url("/css/images/menu_contact.png") 0 0 no-repeat; 
		width: 61px;
	}
	
	ul#menu li.m_about_livetime a {
		background: url("/css/images/menu_about_livetime.png") 0 0 no-repeat; 
		width: 66px;
	}
	
	ul#menu li.m_clients a {
		background: url("/css/images/menu_clients.png") 0 0 no-repeat; 
		width: 54px;
	}
	
	
	ul#menu li.m_over_livetime a:hover, ul#menu li.m_team a:hover, ul#menu li.m_productions a:hover, ul#menu li.m_producties a:hover, ul#menu li.m_klanten a:hover, ul#menu li.m_login a:hover, ul#menu li.m_contact a:hover, ul#menu li.m_clients a:hover, ul#menu li.m_about_livetime a:hover, ul#menu li.m_home a:hover {
		background-position: bottom left;
	}
	
	ul#menu li#selected a {
		background-position: bottom left;
	}

div#container {
	margin: 0 auto;
	padding-top: 507px;
	width: 850px;
	position: relative;
}

#home div#container {
	padding-top: 135px;
}

div#container2 {
	margin: 0 auto;
	padding-top: 130px;
	position: relative;
	z-index: 2;
	overflow: hidden;
	width: 850px
}

div#flash_wrap {
	width: 850px;
	height: 371px;
}

div#flash_intro {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
	#flash_intro object {
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

a#flash_url {
	cursor: default;
	display: block;
	height: 372px;
}

div#content {
	margin: 0;
	padding: 30px;
	position: relative;
	z-index: 2;
	background: #96bf0d;
	overflow: hidden;
}

div#g-maps {
	background: #96bf0d;
}

div#detailwrap {
	overflow: hidden;
	width: 850px;
	margin: 0;
	background: #96bf0d;
}

div#live_wrap {
	width: 100%;
	overflow: hidden;
	background: #96bf0d; 
}

div#detail {
	float: left;
	padding: 27px 27px 0 27px;
	position: relative;
	z-index: 2;
	width: 656px;
	background: #96bf0d;
}

	div#detail span.mail a {
		color: #fff;
		font-size: 0.833em;
		font-weight: normal;
		margin-left: 15px;
		color: #cddf96;
	}

div#detail_photo {
	float: right;
	width: 140px;
	height: 104px;
}

div#cont {
	position: relative;
	z-index: 3;
	padding: 30px;
	overflow: hidden;
	width: 790px;
	background: #fff;
}

#about div.column {
	float: left;
	width: 380px;
}

div#cont p {
	font-size: 1.1em;
	font-family: "Arial";
	color: #595959;
	line-height: 1.364em;
	margin: 0 0 1.546em 0;
}

#about div.last {
	float: right;
}

#meer_livetime {
	float: right;
	width: 410px;
	height: 35px;
	overflow: hidden;
	padding-right: 38px;
	background: url("/css/images/meer_livetime.gif") no-repeat right center;
	font-size: 1.1em;
	text-align: right;
	line-height: 35px;
	color: #fff;
	text-decoration: none;
}
	#meer_livetime:hover {
		background-image: url("/css/images/meer_livetime_hover.gif");
	}
	

div.stripe {
	float: left;
}

div#bottom {
	height: 9px;
	width: 850px;
	background: #fff;
}

div#content p, div#content address {
	font-family: "Arial";
	font-size: 1.5em;
	color: #fff;
	font-weight: normal;
}
div#content p, div#content dt, div#content dd, div#content address {
	line-height: 1.467em;
}

div#detail p {
	font-family: "Arial";
	font-size: 1.5em;
	color: #fff;
	font-weight: normal;
	line-height: 1.467em;
	margin: 0 0 1.333em 0;
}

ul#footer_menu {
	float: left;
	margin: 0;
	display: inline;
}

	ul#footer_menu li {
		float: left;
		overflow: hidden;
		background: url("/css/images/slash.png") no-repeat right 1.8em;
		padding: 1.546em 1.364em 1.546em 0;
	}
	
	ul#footer_menu li.last{
		background: none;
	}
		
		ul#footer_menu li a {
			display: block;
			font-size: 1.1em;
			font-family: "Arial";
			color: #666;
			text-decoration: none;
			line-height: 1.364em;
		}
		
		ul#footer_menu li a:hover {
			color: #fff;
			text-decoration: none;
		}
		
		.byjust {
			font-size: 1.1em;
			float: right;
			padding: 1.546em 0 1.546em 1.364em;
			color: #666;
		}
		
		.byjust a:hover {
			color: #fff;
		}
	
	
ul#users {
	overflow: hidden;
	width: 100%;
	margin: 0;
	list-style: none;
}

	ul#users li {
		overflow: hidden;
		width: 100%;
		margin: 0 0 2em 0;
	}
	
	a.teamname {
		margin: 5px 0 0 0;
		float: right;
		width: /*177px*/120px;
	}

div.teampic {
	float: left;
	background: url("/css/images/team.gif") no-repeat;
	width: 36px;
	height: 37px;
	padding: 4px 0 0 4px;
}
		
	ul#users span {
		font-size: 0.867em;
		font-weight: normal;
		/*width: 225px;
		line-height: 2em;*/
	}
	
		ul#users li a:hover {
			color: #7aa300;
		}
	
		ul#users li a {
			font-family: "Arial";
			font-size: 13px;
			color: #888;
			text-decoration: none;
			font-weight: bold;
			display: block;
		}
		
		ul#users li a.active {
			color: #7aa300;
		}


ul#clients {
	overflow: hidden;
	margin: 0;
	background: repeat-y url("/css/images/grid.gif");
	border-top: 1px solid #ededed;
}
	
	ul#clients li {
		display: inline;
		float: left;
		overflow: hidden;
		width: 157px;
		height: 54px;
		margin: 0 0 0 1px;
	}
	
	ul#clients img {
		margin: 0;
	}

	
ul#years {
	overflow: hidden;
	margin: 0;
}

	ul#years li {
		float: left;
		display: inline;
		overflow: hidden;
		margin-right: 12px;
	}
	
		ul#years li a {
			font-family: "Arial";
			font-size: 1.7em;
			text-decoration: none;
			color: #7aa300;
		}
		
		ul#years li a:hover {
			color: #888;
		}
		
		ul#years li.active {
			color: #888;
			border-bottom: 1px solid #7aa300;
		}



ul#cases  {
	overflow: hidden;
	margin: 1.818em 0 0 0;
}

	#cases .column, #contact .column, #users .column {
		float: left;
		padding: 0 30px 0 20px;
		width: 219px;
		border-left: 1px solid #cbcbcb;
		overflow: hidden;
	}
	
	#users .column {
		width: 170px;
		padding: 0 35px 0 10px;
		word-wrap: break-word;

	}

	#contact .column {

		width: 239px;
		padding-right: 10px !important;
	}	
	#users .column {
		padding-left: 0;
	}
	#cases .first, #contact .first, #users .first {
		padding-left: 0;
	}
	#users .last {
		padding-right: 0;
	}
	#cases .first, #contact .first, #users .column {
		border-left: none;
	}
	ul#cases li {
		float: left;
		overflow: hidden;
		margin: 0;
		width: 219px;
		margin-bottom: 7px;
	}
		ul#cases li a {
			font-family: "Arial";
			font-size: 1.1em;
			color: #888;
			text-decoration: none;
			line-height: 1.273em;
		}
		ul#cases li a:hover {
			color: #96bf0d;
		}
		ul#cases li.active {
			color: #96bf0d;
		}
		
div.gal {
	position: relative;
	float: left;
	margin: 0.364em 1.546em 1.273em 0;
	width: 190px;
	height: 130px;
}

div.mag {
	position: absolute;
	height: 32px;
	width: 32px;
	bottom: 0;
	left: 0;
	background: url("/css/images/magnifier.png") left bottom no-repeat;
	z-index: 10;
}



ul#gallery1 {
	list-style: none;
	margin: 0;
}

ul#gallery2 {
	list-style: none;
	margin: 0;
}

ul#gallery3 {
	list-style: none;
	margin: 0;
}

div#toolTip  {
  position: absolute;
  z-index: 1000;
  width: 150px;
  background: #D5D5D5;
  border: 1px solid black;
  text-align: left;
  padding: 5px;
  min-height: 1em;
  
  color: #000000;
}

div#toolTip p { 
  margin: 0px;
  padding: 0px;
  color: #000000; 
  font-size: 11px; 
}

/*div#login{
	margin: 0 auto;
	padding-top: 130px;
	width: 850px;
}

	div#login-wrap {
		overflow: hidden;
		margin: 0 0 20px;
	}

	div#login p {
		font-family: "Arial";
		font-size: 1.1em;
		color: #fff;
		line-height: 1.5em;
	}
	
	div#login-top {
		background-color: #424242;
		width: 850px;
		height: 12px;
	}
	
	div#login-middle {
		background-color: #424242;
		padding: 37px;
	}
	
	div#login-bottom {
		background-color: #424242;
		width: 850px;
		height: 12px;
	}
	
	div#login div.login-line {
		height: 1px;
		background: #565656;
		width: 100%;
		margin: 0 0 20px;
	}
		
		div#login form {
			float: right;
		}
		
		div#login div.login_c {
			margin: 0;
			float: left;
			height: 21px;
			width: 128px;
			background: url("/css/images/klanten-login.gif") left bottom;
		}
		
		div#login div.login_k {
			margin: 0;
			float: left;
			height: 21px;
			width: 128px;
			background: url("/css/images/klanten-login.gif") left top;
		}
	
		div#login form span {
			position: relative;
			margin-bottom: 0 !important;
		}
	
		div#login form br {
			display: none;
		}
	
		label.overlabel-apply {
			position: absolute;
			font: 1.2em Arial, Times, Serif;
			color: #424242;
			cursor: text;
			margin: 6px 0 0 16px;
		}
	
		div#login .hidden {
			text-indent: -9999em;
		}
		
		div#login input.button {
			background-image: url("/css/images/login_btn.gif");
			width: 77px;
			height: 21px;
			font: 1.2em Arial, Times, Serif;
			font-weight: bold;
			color: #fff;
		}
		
		div#login input.button span {
			padding-left: 7px;
		}
		
		input, textarea {
			font: 1.2em Arial, Times, Serif;
			color: #424242;
			line-height: normal;
			padding:0.25em 5px;
			margin-left: 9px;
			background-color: #b7b7b7;
		}
		
		input:focus, input:hover, textarea:focus, textarea:hover {

		}
		
		input.button:focus, input.button:hover {

		}
		
			div#login img.logout {
				float: right;
			}
			
			div#login tr {
				font: 1.2em Arial, Times, Serif;
				color: #fff;
			}
			
			div#login tr a {
				font: 1.2em Arial, Times, Serif;
				color: #fff;
			}
*/

div#login {
	margin: 0 auto;
	padding-top: 130px;
	width: 850px;
}

	div#login-head ,div#login-head-tekst {
		background-color: #96bf0d;
		padding: 30px 0 30px 30px;
		width: 820px;
		position: relative;
	}
	
		div#login-foto {
			position: absolute;
			top: 0;
			right: 0;
			background-color: #fff;
		}
		
			a#logout {
				display: block;
				width: 130px;
				height: 19px;
				background: url("/css/images/logout.gif");
				padding: 9px 0 0 10px;
				font-size: 11px;
				font-weight: bold;
				color: #fff;
				text-decoration: none;
			}
			
				a#logout:hover {
					background: url("/css/images/logout-hover.gif");
				}
	
		div#login-head-tekst p {
			font-size: 15px;
			color: #fff;
			line-height: 20px;
			width: 600px;
		}
	
		fieldset#form {
			overflow: hidden;
			width: 100%;
		}
		
			fieldset#form p {
				float: left;
			}
			
				fieldset#form label {
					font-size: 15px;
					color: #fff;
					float: left;
					padding: 9px 0 0 0;
				}
				
					fieldset#form label.user {
						width: 127px;
					}
					
					fieldset#form label.pass {
						width: 102px;
					}
			
			fieldset#form legend {
				display: none;
			}
			
			fieldset#form input {
				width: 240px;
				height: 20px;
				background-color: #80a30b;
				margin-right:18px;
				
				font-size: 11px;
				color: #fff;
				padding: 8px 5px 0 5px;
			}
			
				fieldset#form input.tweetien {
					width: 200px;
					margin-right: 1px;
				}
			
				fieldset#form input.btn {
					width: 80px;
					height: 28px;
					background: url("/css/images/login-btn.gif");
					font-size: 11px;
					font-weight: bold;
					color: #fff;
					padding: 0 0 0 9px;
				}
	
	div#login-content {
		padding: 30px;
		background-color: #fff;
		overflow: hidden;
		width:790px;
	}
	
		div#login-content div.column {
			width: 365px;
			float: left;
		}
		
		div#login-content div.first {
			margin-right: 30px;
		}
	
		div#login-content p {
			font-size: 11px;
			color: #595959;
			line-height: 15px;
			overflow: hidden;
		}
		
			div#kruimel {
				margin-bottom: 14px;
				font-size: 13px;
				color: #666;
				font-weight: normal;
			}
			
				div#kruimel a {
					font-size: 13px;
					color: #666;
					font-weight: normal;
				}
		
		div#file a {
			display: block;
			cursor: pointer;
		}
		
			ul.files {
				overflow: hidden;
				margin: 0;
				list-style: none;
				background: #e5e5e5;
				position: relative;
			}
			
			div#file a:hover ul.files {
				background: #f4f4f4;
				text-decoration: none;
			}
			
			ul.link {
				background: #fff;
				border-bottom: 1px solid #e5e5e5;
			}
		
				ul.files li {
					float: left;
					padding: 12px 0;
				}	
						
					ul.files li.type {
						width: 23px;
						padding: 0 0 0 14px;
						margin-top: 13px;
					}
					
					ul.files li.name {
						width: 519px;
					}
					
						ul.files li.name {
							width: 519px;
							font-size: 14px;
							color: #595959;
							font-weight: normal;
						}
						
						ul.files li.size, ul.files li.place {
							font-size: 13px;
							color: #595959;
							font-weight: normal;
						}
			
					ul.files li.size {
						width: 125px;
					}
					
					ul.files li.place {
						width: 109px;
					}
	
div#contact {
	overflow: hidden;
	width: 100%;
	margin-top: 20px;
	color: #fff;
}
div#contact, div#contact p {
	font-size: 12px;
}
	div#contact .column {
		border-color: #c0d96e;
	}
		div#contact dt {
			float: left;
			width: 45px;
			clear: left;
		}
		div#contact dd {
			float: right;
			width: 184px;
		}
		div#contact .first dt {
			width: 15px;
		}
		div#contact .first dd {
			width: 204px;
		}
	div#contact a {
		color: #fff;
		text-decoration: none;
	}
	div#contact a:hover {
		color: #96bf0d;
		background: #fff;
	}
	
.login-logo {
	padding: 5px;
	background-color: #fff;
	float: right;
}
	
/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}

/* Login tabellen */
table.tab {
	width: 100%;
}

	table.tab tr {
		border: solid 1px #eee;
	}
	
	
.alpha80 {
	/* clear solid background for ie */
	background: transparent;
	/* RGBa with opacity */
	background: rgba(0, 0, 0, 0.8);
	/* required for the filters */
	zoom:1; 
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000, endColorstr=#CC000000);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000, endColorstr=#CC000000)";
}