html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	font-weight: normal;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remove textarea resize at Safari */
textarea { 
	resize: none;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.clear { clear: both; display: block; }



/* loading */

#loading {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 100;
	background:#cfeef7;
	overflow:hidden; }

#loading div {
	margin: 0 auto;
	width: 900px;
	height: 229px;
	padding-top: 15%; }



#main-nav {
	position: absolute;
	top: 0;
	z-index:50;
	background:url(../images/navigation/nav-bg.png) no-repeat 0 0;
	width:915px;
	height:67px;
	margin:0;
	padding:0 0 0 9px; }
	
#main-nav ul {
	margin:0; padding:0;
	width:910px;
	height:54px; }
	
#main-nav ul li {
	margin:0; padding:0;
	display:inline; }
	
#main-nav a.home {
	display: block;
	float:left;
	width: 184px;
	height: 54px;
	margin:0; padding:0;
	background:url(../images/all-buttons.png) no-repeat 0 0;
	text-indent:-99999px; }
	
#main-nav a.contact {
	display: block;
	float:left;
	margin:0; padding:0;
	width: 183px;
	height: 54px;
	background:url(../images/navigation/button-contact-off.gif) no-repeat 0 0;
	text-indent:-99999px; }
	
#main-nav a.contact:hover {
	background:url(../images/navigation/button-contact-on.gif) no-repeat 0 0; }	
	

a.nav-button { 
	float:left;
	display:block;
	width:181px;
	height:54px;
	margin:0; padding:0; }
	
/* remove extra button width in IE */
.nav-button { width:auto; overflow:visible; }	
.fg-buttonset { float:left; }
.fg-buttonset .fg-button { float:left; }
.fg-buttonset-single .nav-button, 
.fg-buttonset-multi .nav-button { margin-right:-1px;}


/* site */
body {
	background:#fff;
	overflow:hidden;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px; }
	
a {
	cursor: pointer;
	text-decoration: none;
	outline: 0; }
	
#site {
	display: block;
	overflow:hidden;
	position:relative; }
	
#container {
	width:13000px;
	height:1050px;
	background:#d7edf6;
	position:relative;
	overflow:hidden;
	margin:0; padding:0; }
	
#container .square {
	height:1050px;
	float:left;
	position:relative; }
	
.square-1 {
	width:3360px;
	background:url(../images/large-bg2.jpg) no-repeat 0 0; }
	
.square-2 {
	width:3360px;
	background:url(../images/large-bg2.jpg) no-repeat -3360px 0; }
	
.square-3 {
	width:3360px;
	background:url(../images/large-bg2.jpg) no-repeat -6720px 0; } 
	
.square-4 {
	width:2920px;
	background:url(../images/large-bg2.jpg) no-repeat -10080px 0; }
	
#block-1-content {
	position: absolute;
	top: 80px;
	z-index:49;
	width:880px;
	height:680px;
	margin:0; padding:20px 0 0 0; }
	
#block-2-content {
	position: absolute;
	top: 77px;
	z-index:49;
	width:1100px;
	height:224px;
	overflow:visible;
	margin:0; padding:0; }

#block-3-content {
	position: absolute;
	top: 60px;
	z-index:49;
	width:960px;
	height:700px;
	overflow:visible;
	margin:0; padding:0; }
	
#block-4-content {
	position: absolute;
	top: 60px;
	z-index:49;
	width:960px;
	height:700px;
	overflow:visible;
	margin:0; padding:0; }
	
#block-2-content img.about-badge {
	float:left; margin-left:102px; }
	
.about-text {
	float:left; 
	width:560px; 
	height:300px; 
	margin:0 0 0 65px;
	padding:25px 0 0 0; }

p {
	font-size:12px;
	margin:0 0 10px 0;
	line-height:20px; }
	
p.about-large {
	font-size:15px;
	margin:0 0 10px 0;
	line-height:20px; }
	
a.bio-button {
	padding:0; 
	background: rgb(255, 255, 255) none repeat scroll 0% 0%; 
	-moz-background-clip: -moz-initial; 
	-moz-background-origin: -moz-initial; 
	-moz-background-inline-policy: -moz-initial; }
	
a.dave-bio,
a.etienne-bio,
a.sven-bio {
	width:116px;
	height:23px;
	display:block;
	background: url(../images/all-buttons.png) no-repeat 0 -565px;
	float:left;
	clear:both;  }
	
a.dave-bio:hover,
a.etienne-bio:hover,
a.sven-bio:hover {
	background: url(../images/all-buttons.png) no-repeat 0 -589px; }
	
a.view-gallery {
	width:200px;
	height:34px;
	display:block;
	background:url(../images/all-buttons.png) no-repeat 0 -495px; }	
	
a.view-gallery:hover {
	background:url(../images/all-buttons.png) no-repeat 0 -530px; }	
	

/* remove the list style */
#nav {
margin:0; 
padding:0; 
list-style:none; }	

/* make the LI display inline */
/* it's position relative so that position absolute */
/* can be used in submenu */
#nav li.contact {
	float:left; 
	display:block; 
	background:#000; 
	position:relative;
	z-index:500; 
	margin:0 1px; }

/* this is the parent menu */
#nav li.contact a.contact-button {
	display:block; 
	padding:0; 
	width:181px; 
	height:54px;
	color:blue;
	background:url(../images/all-buttons.png) no-repeat 0 -385px;
	text-indent:-99999px; }
	
#nav li.contact a.contact-button:hover {
	background:url(../images/all-buttons.png) no-repeat 0 -440px !important;
	text-indent:-99999px; }

/* you can make a different style for default selected value */
#nav a.selected {
	color:#f00;
}

/* submenu, it's hidden by default */
#nav li.contact ul {
	position:absolute; 
	left:0; 
	height:180px;
	width:176px;
	display:none; 
	margin:0 0 0 -8px; 
	padding:7px 0 0 20px; 
	background:url(../images/all-buttons.png) no-repeat 0 -660px;
	list-style:none; }

#nav li.contact ul li {
	width:181px;
	height:190px; 
	float:left; }
	
#nav li.contact ul li p {
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	color:#fff !important;
	line-height:14px;
	margin-bottom:5px; }
	
#nav li.contact ul li a.herman {
	font-size:12px !important;
	text-decoration:none !important;
	color:#3da4dc!important;
	background:none !important; }

#nav li.contact ul li a.herman:hover {
	text-decoration:underline !important; }
	
#nav li.contact ul li p span.eerste {
	color:#3da4dc!important; }
	
#nav li.contact ul li p.tel { margin-bottom:5px; }
#nav li.contact ul li p.address {
	font-size:10px; 
	font-weight:normal; 
	margin-bottom:5px; }
	
#nav li.contact ul li p.postal {
	font-size:10px; 
	font-weight:normal; }



/* fix ie6 small issue */
/* we should always avoid using hack like this */
/* should put it into separate file : ) */
*html #nav li.contact ul {
	margin:0 0 0 -2px;
}




/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .tabs-hide {
        display: none;
    }
}

/* Skin */
.tabs-nav {
    list-style: none;
    margin:0;
    padding:0;
	width:787px;
	float:left; }
	
.tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " "; }
	
.tabs-nav li {
	height:34px;
	width:187px;
	display:inline;
	padding:0;
	margin:0;
    min-width: 175px; /* be nice to Opera */ }
	
.tabs-nav a, .tabs-nav a span {
    display:block;
    padding:0;
	font-size:15px;
	font-weight:bold; }
	
.tabs-nav a {
	width:186px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:15px;
	height:50px;
	padding:10px 0;
	text-align:center;
	margin:4px 0 0 0;
	display:block;
	float:left;
	color:#000 !important;
	text-decoration:none !important; }
	
li.divider {
	background: url(../images/divider.gif) no-repeat 0 0; }
	
.tabs-nav .tabs-selected a {
    color: #28bae2 !important;
	background: url(../images/tab-arrow.png) no-repeat center 35px; }

.tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active {
    outline: 0; /* prevent dotted border in Firefox */
	color:#28bae2 !important; }

.tabs-container {
	float:left;
	padding:none;
	margin-left:0px;
	width:662px;/* declare background color for container to avoid distorted fonts in IE while fading */ }
	
.tabs-loading em {
    padding: 0 0 0 20px; }
	
	
#tabber {
	margin:0 auto; 
	width:960px; 
	height:700px; 
	position:relative; padding:0; }
	
#tabber ul {
	background:url(../images/sub-nav-bg.png) no-repeat 0 0; 
	height:60px; 
	border:none; 
	margin:0 0 0 27px; 
	width:920px; }
	
#tabber ul li.home-tab a.home,
#tabber2 ul li.home-tab a.home {
	width:25px !important; height:41px !important;
	display:block !important;
	margin:0 25px 0 0;
	background:url(../images/button-tab-home.png) no-repeat 0 11px; float:right; }
	
#tabber ul li.home-tab a.home:hover,
#tabber2 ul li.home-tab a.home:hover {
	width:25px !important; height:41px !important;
	display:block !important;
	margin:0 25px 0 0;
	background:url(../images/button-tab-home-on.png) no-repeat 0 10px; float:right; }
	
.tabs-nav .tabs-selected a.home {
    color: #28bae2 !important;
	background:url(../images/button-tab-home-on.png) no-repeat 0 10px !important; }
	
#tabber #tab1 { 
	width:960px; 
	height:660px; 
	background:url(../images/pilot-bg.gif) no-repeat 0 0; }
	
#tabber #tab2 {
	width:840px; 
	height:580px; 
	padding:20px 70px 0 70px; }
	
#tabber #tab3 {
	width:840px; 
	height:580px; 
	padding:20px 70px 0 70px; }
	
#tabber #tab4 {
	width:840px; 
	height:580px; 
	padding:20px 70px 0 70px; }
	
#tabber2 {
	margin:0 auto; 
	width:960px; 
	height:700px; 
	padding:0; }
	
#tabber2 ul {
	background:url(../images/sub-nav-bg.png) no-repeat 0 0; 
	height:60px; 
	border:none; 
	margin:0 0 0 27px; 
	width:920px; }
	
#tabber2 #tab1a {
	width:960px; 
	height:660px; 
	background:url(../images/showreel-quote.gif) no-repeat 53px 50px; }
	
#tabber2 #tab1b {
	width:840px; 
	height:580px; 
	padding:20px 70px 0 70px; }
	
 #tabber2 #tab1c {
 	width:840px; 
	height:580px; 
	padding:20px 70px 0 70px; }
	
 #tabber2 #tab1c div.social-project-left {
 	width:410px; 
	height:600px; 
	float:left; 
	margin-right:12px; }
	
#tabber2 #tab1c div.social-project-left div.first,
#tabber2 #tab1c div.social-project-right div.first { margin-left:20px; }
	
 #tabber2 #tab1c div.social-project-right {
 	width:410px; 
	height:600px; 
	float:left; }
	
#tabber2 .social-box {
	width:370px; 
	height:380px; 
	background: url(../images/social-projects-bg.png) no-repeat 0 0; 
	padding:20px 20px 0 20px; }
	
#tabber2 .social-box h1 { 
	font-size:18px; 
	font-weight:normal;
	margin:0 0 10px 0; }