@charset "UTF-8";
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: url(images/bg.jpg) fixed;

	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin-top:-6px;
	line-height:16px;
}
.midden #container {
	width:849px;  /* this will create a container 80% of the browser width */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	position: relative;
}

.midden #top {
	height:109px;
	display:block;
	padding-top:40px;
	position: relative;

}
.midden #logo {
	margin-left:2px;
	position: relative;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.midden #menu  {
	text-align:right;
	margin-top:-31px;
	color:#FFF;
	font-family:"Myriad Pro", Tahoma, Arial;
	font-size:13px;
	margin-right:-15px;
	color:#FFF;
	position: relative;s

}
.midden #menu a  {
	text-align:right;
	margin-top:-30px;
	color:#FFF;
	font-family:"Myriad Pro", Tahoma, Arial;
	font-size:13px;
	color:#FFF;
	text-decoration:none;
	

}
.midden #menu a:hover {
	color:#ff6000;
	text-decoration:none;
}
	
.midden #header {
	background-image:url(images/mid-bg-top.png);
	background-repeat:no-repeat;
	height:10px;
	display:block;
	margin-top:-5px;
	position: relative;

}



/*---------------- content------------------- */
.midden #mainContent {
padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background-image:url(images/mid-bg-mid.png);
background-repeat:repeat-y;
margin-top:-21px;
height:relative;
position: relative;

}
.midden #auto {
	background-image:url(images/auto.gif);
	width:825px;
	height:285px;
	display:block;
	margin-top:0px;
	margin-left:2px;
	margin-top:-30px;
	position: relative;
}

.middentekst {
	height:336px;
	display:block;
	position: relative;
	padding-bottom:0px;
}

#links {
	
	width:531px;
	display:block;
	padding-left:0px;
	margin-left:-1px;
	padding-top:8px;
	position: relative;
	min-height:306px;
	padding-right:4px;
}

#links #linksboven{
	background-color:#2a292c;
	color:#FFF;
	width:520px;
	display:block;
	padding-top:8px;
	padding-bottom:2px;
	padding-left:10px;
	font-family:"Myriad Pro",Tahoma;
	font-size:13px;
	height:18px;
	position: relative;
	text-transform:uppercase;
}
#links #linksmidden {
	width:510px;
	display:block;
	background-color:#dcdcdc;
	color:#262528;
	font-family: Helvetica, Tahoma;
	font-size:12px;
	padding-top:2px;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:10px;
	position: relative;
	
	min-height:306px;
	text-align:left;
	
}

#rechts {
	
	width:285px;
	display:block;
	padding-left:1px;
	padding-top:8px;
	padding-right:2px;
	min-height:306px;
}

#rechts #rechtsboven{
	background-color:#2a292c;
	color:#FFF;
	width:275px;
	display:block;
	padding-top:8px;
	padding-bottom:2px;
	padding-left:10px;
	font-family:"Myriad Pro",Tahoma;
	font-size:13px;
	height:18px;
	position: relative;
}
#rechts #rechtsmidden {
	width:265px;
	display:block;
	background-color:#dcdcdc;
	color:262528;
	font-family: Helvetica, Tahoma;
	font-size:12px;
	padding-top:2px;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:10px;
	position: relative;
	
	min-height:306px;
	text-align:left;
	
}

#rechts #rechtsboven2{
	background-color:#2a292c;
	color:#FFF;
	width:815px;
	display:block;
	padding-top:8px;
	padding-bottom:2px;
	padding-left:10px;
	font-family:"Myriad Pro",Tahoma;
	font-size:13px;
	height:18px;
	position: relative;
}

#rechts #rechtsmidden2 {
	width:805px;
	display:block;
	background-color:#dcdcdc;
	color:262528;
	font-family: Helvetica, Tahoma;
	font-size:12px;
	padding-top:2px;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:10px;
	position: relative;
	
	min-height:306px;
	text-align:left;
	
}


#rechts #rechtsmidden #projecten{
	width:250px;
	display:block;
	margin:7px;
	margin-left:-4px;
	
}


#tweet {
	display:block;
	padding-top:55px;
	padding-left:15px;
	
}

#tweetboven {
	background-image:url(images/tweetboven.png);
	background-repeat:no-repeat;
	height:49px;
	width:250px;
}
#tweetmidden {
	background-image:url(images/tweetmidden.png);
	background-repeat:repeat-y;
	width:240px;
	padding:10px;
	color:#333;
	padding-top:4px;
	padding-bottom:1px;}

#tweetonder {
	background-image:url(images/tweetonder.png);
	background-repeat:no-repeat;
	width:250px;
	height:29px;
}



.midden #footer { 
	background-image:url(images/mid-bg-bottom.png);
	background-repeat:no-repeat;
	height:10px;
	display:block;
	margin-top:0px;
	position: relative;
} 
.midden #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

.midden #copyright {
	font-family:Helvetica, Tahoma;
	font-size:10px;
	color:#b6b6b7;
	position: relative;
}

.midden #copyright .tabel2 {
	margin-top:-17px;
	
}


.midden #copyright a, a:hover {
	color:#b6b6b7;
	text-decoration:none;
	
}

#menu1{
	background-image:url(images/home-over-popup.png);
	width:142px;
	height:81px;
	position:absolute;
	left:44%;
	top:-72px;
}
#menu2{
	background-image:url(images/about-over-popup.png);
	width:105px;
	height:77px;
	position:absolute;
	left:58%;
	top:-70px;
}
#menu3{
	background-image:url(images/portfolio-over-popup.png);
	width:112px;
	height:92px;
	position:absolute;
	left:70%;
	top:-82px;
}
#menu4{
	background-image:url(images/contact-over-popup.png);
	width:89px;
	height:93px;
	position:absolute;
	left:94%;
	top:-82px;
}
#menu5{
	background-image:url(images/diensten-over-popup.png);
	width:107px;
	height:77px;
	position:absolute;
	left:81%;
	top:-65px;
}

.oranjekick {
	color:#ff6000;
}


li {
	list-style:none;
	list-style-type:none;
	padding:2px;
	padding-bottom:5px;
}
ul {
	padding:5px;
}

input {
	background-color:#FFF;
	padding-left:10px;
	width:220px;
	height:23px;
	border:none;
	font-size:12px;
	font-family:helvetica,Tahoma;
	margin-top:2px;
	color:#C63;
}

.textarea {
	height:80px;
	width:400px;
	border:none;
	font-size:12px;
	font-family:helvetica,Tahoma;
	padding:10px;
	margin-top:2px;
	color:C63;
	
}

.submit {
	height:25px;
	width:100px;
	border:none;
	font-family:"Myriad Pro", Tahoma, Arial;
	font-size:13px;
	padding:6px;
	background-color:#2a292c;
	color:#ff6000;
	text-transform:uppercase;
	margin-top:5px;
}

#cu3er-container {
	width:600px; outline:0;
	margin-top:-30px;
	width:825px;
	height:285px;
	margin-left:2px;
	}

/* Easy Slider */

		
    /* image replacement */
        .graphic, #prevBtn, #nextBtn{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */
	
	

	#slider{
		margin-top:-30px;
		margin-left:2px;
		}	
	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:825px;
		height:285px;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn{ 
		display:block;
		width:30px;
		height:77px;
		position:absolute;
		left:15px;
		top:100px;
		}	
	#nextBtn{ 
		left:796px;
		}														
	#prevBtn a, #nextBtn a{  
		display:block;
		width:30px;
		height:77px;
		background:url(images/btn_prev.png) no-repeat 0 0;	
		}	
	#nextBtn a{ 
		background:url(images/btn_next.png) no-repeat 0 0;	
		}												

/* // Easy Slider */



img {
	border:none;
}

#projecten2 {
	display:block;
	padding-right:9px;
	padding-top:7px;
	padding-top:7px;
	position:relative;
	width:258px;
}




/*      dienstenitems    */

div#fancy_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	display: none;
	z-index: 30;
}

* html div#fancy_overlay {
	position: absolute;
	height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

div#fancy_wrap {
	text-align: left;
}

div#fancy_loading {
	position: absolute;
	height: 40px;
	width: 40px;
	cursor: pointer;
	display: none;
	overflow: hidden;
	background: transparent;
	z-index: 100;
}

div#fancy_loading div {
	position: absolute;
	top: 0;
	left: 0;
	width: 257px; 
	height: 117px;
	background: transparent url('fancy_progress.png') no-repeat;
}

div#fancy_loading_overlay {
	position: absolute;
	background-color: #FFF;
	z-index: 30;
}

div#fancy_loading_icon {
	position: absolute;
	background: url('fancy_loading.gif') no-repeat;
	z-index: 35;
	width: 16px;
	height: 16px;
}

div#fancy_outer {
	position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    padding: 18px 18px 33px 18px;
    margin: 0;
    overflow: hidden;
    background: transparent;
    display: none;
}

div#fancy_inner {
	position: relative;
	width:100%;
	height:100%;
	background: #000;
}

div#fancy_content {
	margin: 0;
	z-index: 100;
	position: absolute;
	font-size:11px;
}

div#fancy_div {
	background: #000;
	color: #FFF;
	height: 100%;
	width: 100%;
	z-index: 100;
}

img#fancy_img {
	position: absolute;
	top: 0;
	left: 0;
	border:0; 
	padding: 0; 
	margin: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
}

/*div#fancy_close {
	position: absolute;
	top: 12px;
	right: 15px;
	height: 30px;
	width: 30px;
	background: url('fancy_closebox.png') top left no-repeat;
	cursor: pointer;
	z-index: 181;
	display: none;
}
*/
#fancy_frame {
	position: relative;
	width: 100%;
	height: 100%;
	display: none;
}

#fancy_ajax {
	width: 100%;
	height: 100%;
	overflow: auto;
}

a#fancy_left, a#fancy_right {
	position: absolute; 
	bottom: 0px; 
	height: 100%; 
	width: 35%; 
	cursor: pointer;
	z-index: 111; 
	display: none;
	background-image: url(data:image/gif;base64,AAAA);
	outline: none;
}

a#fancy_left {
	left: 0px; 
}

a#fancy_right {
	right: 0px; 
}

span.fancy_ico {
	position: absolute; 
	top: 50%;
	margin-top: -15px;
	width: 30px;
	height: 30px;
	z-index: 112; 
	cursor: pointer;
	display: block;
}

span#fancy_left_ico {
	left: -9999px;
	background: transparent url('fancy_left.png') no-repeat;
}

span#fancy_right_ico {
	right: -9999px;
	background: transparent url('fancy_right.png') no-repeat;
}

a#fancy_left:hover {
  visibility: visible;
}

a#fancy_right:hover {
  visibility: visible;
}

a#fancy_left:hover span {
	left: 20px; 
}

a#fancy_right:hover span {
	right: 20px; 
}

.fancy_bigIframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
}

div#fancy_bg {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	z-index: 70;
	border: 0;
	padding: 0;
	margin: 0;
}
	
div.fancy_bg {
	position: absolute;
	display: block;
	z-index: 70;
	border: 0;
	padding: 0;
	margin: 0;
}





.mydiv {
	float: left;
	position: relative;
	width: 257px; 
	height: 117px; 
	margin-bottom:26px;
	margin:9px;
	}

 
.mydiv span {
	height: 0px;
	overflow: hidden;
	display: block;
	position: absolute;
	bottom: 0px; left: 0px; width: 100%; z-index: 10; background: #000; opacity: 0.8; 
	filter: alpha(opacity=80);
	margin-bottom:-2px;
	}

.mydiv img {
	z-index: 5; 
	position: absolute;
	top: 0px;
	left: 0px;}
		
		.margin{margin-right:26px;}



.mydiv h3 {
	font-size:12px;
	font-weight:bold;
	padding:0px;
	padding-left:10px;
	padding-top:-1px;
	text-transform:uppercase;
	color:#FFF;
	font-family:Helvetica, Tahoma, Verdana;
}

.mydiv a {
	color:#C63;
}





a.vorige, a.vorige:hover {
	font-size:11px;
	text-decoration:none;
	color:#333;
	text-align:left;

}
a.volgende, a.vorige:hover {
	font-size:11px;
	text-decoration:none;
	color:#333;
	text-align:right;
}
.portfoliotabel {
	width:100%;
}



p.home {
	background-image:url(images/home.png);
	background-repeat:no-repeat;
	display:block;
	width:35px;
	height:11px;
	margin:0;
	padding:0;
	
}

p.home:hover {
	background-image:url(images/home-hover.png);
	background-repeat:no-repeat;
	display:block;
	width:35px;
	height:11px;
	margin:0;
	padding:0;
}


p.about {
	background-image:url(images/about.png);
	background-repeat:no-repeat;
	display:block;
	width:40px;
	height:11px;
	margin:0;
	padding:0;
	
}

p.about:hover {
	background-image:url(images/about-hover.png);
	background-repeat:no-repeat;
	display:block;
	width:40px;
	height:11px;
	margin:0;
	padding:0;
}

p.portfolio {
	background-image:url(images/portfolio.png);
	background-repeat:no-repeat;
	display:block;
	width:64px;
	height:11px;
	margin:0;
	padding:0;
	
}

p.portfolio:hover {
	background-image:url(images/portfolio-hover.png);
	background-repeat:no-repeat;
	display:block;
	width:64px;
	height:11px;
	margin:0;
	padding:0;
}


p.diensten{
	background-image:url(images/diensten.png);
	background-repeat:no-repeat;
	display:block;
	width:56px;
	height:11px;
	margin:0;
	padding:0;
	
}

p.diensten:hover {
	background-image:url(images/diensten-hover.png);
	background-repeat:no-repeat;
	display:block;
	width:56px;
	height:11px;
	margin:0;
	padding:0;
}

p.contact{
	background-image:url(images/contact.png);
	background-repeat:no-repeat;
	display:block;
	width:52px;
	height:11px;
	margin:0;
	padding:0;
	
}

p.contact:hover {
	background-image:url(images/contact-hover.png);
	background-repeat:no-repeat;
	display:block;
	width:52px;
	height:11px;
	margin:0;
	padding:0;
}

a.bread {
	text-decoration:none;
	color:#FFF;
}
a.bread:hover {
	text-decoration:none;
	color:#FFF;
	font-weight:normal;
}

a{
	color:#F60;
	text-decoration:none;
}
a:hover {
	text-decoration:none;
	font-weight:bold;
		color:#F60;
}


.folio_block {
	width:514px;
	height:395px;
}


/*--Main Container--*/
.main_view {
	float: left;
	position: relative;
}
/*--Window/Masking Styles--*/
.window {
	width:517px;
	height:395px;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
}
.image_reel {
	position: absolute;
	top: 0; left: 0;
}
.image_reel img {}

/*--Paging Styles--*/
.paging {
	position: absolute;
	bottom: 40px; right: -7px;
	width: 30px; 
	z-index: 100; /*--Assures the paging stays on the top layer--*/
	text-align: center;
	line-height: 40px;
	background: url(paging_bg2.png) no-repeat;
	background-color:#FFF;
	color:#F60;
	display: none; /*--Hidden by default, will be later shown with jQuery--*/
	margin-right:15px;
}
.paging a {
	padding: 7px;
	text-decoration: none;
	color:#333;
	margin:4px;
}
.paging a.active {
	background-color:#999;
	font-weight: bold; 

	border: 1px solid #555555;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	color:#FFF;
}
.paging a:hover {font-weight: bold;}

h1 {
	color:#F60;
	font-size:14px;
}