@import url(defaultZend.css);
@import url(formZend.css);



html, body {		
	width: 100%; height: 100%;
	overflow: hidden;
}

body {	
	position: relative;	
}

.defaultTextActive {
	color: #BFBFBF;
	font-style: italic;
}


/****** (  css )****************************/

	


#supersize {	
	position: absolute;
	top: 0px;	left: 0px;
	width: 100%; height: 100%;
	background: grey;
	z-index: 1;
}


#menu_main {	
	position: relative;	
	width: 100%;	height: 22px;
	background: url(/img/bg_menu_main.gif) repeat-x center top;	
	z-index: 70;
	}
	#logo { 
		
		}
		#logo a { 
			display: block;		
			height: 22px;	
			text-indent: -999em;	
		}
		#logo .apple a { 
			width: 48px;		
			background: url(/img/logo_menu_apple.gif) no-repeat left top;
		}
		#logo .cb {
			position: relative;
			}
			#logo .cb a {
				width: 141px;	
				background: url(/img/logo_menu_cb.gif) no-repeat left top;
				}
				#logo .cb ul  {
					background:url("/img/bg_menu_ul_ul.png") no-repeat scroll left bottom transparent;
					display: none;
					left:-12px;
					padding:4px 0 34px 13px;
					position:absolute;
					top:22px;
					width:292px;
				}
				#logo .cb:hover ul  {				
					display: block;
					}
					#logo .cb ul li {
						display:inline;
						float:left;
						margin-right:10px;
						position:relative;					
						}	
						#logo .cb ul li a {
							display:block;
							width:222px; height:22px;
							padding:0 22px;	
							color:#12100B;
							line-height:21px;							
							font-size:14px;
							font-weight:normal;
							text-indent: 0em;
							background: none;
						}
						#logo .cb ul li a:hover{							
							background: #AFAFAF;			
							color: #EFEFEF;
							text-decoration: none;
						}	

		
		#menu_main .menu {	
			
			}	
			#menu_main .menu ul{	
				
				}	
				#menu_main .menu ul li {	
					position: relative;
					float: left;	display: inline;
					margin-right: 10px;
					
					}	
					#menu_main .menu ul li a{	
						display: block;
						height: 22px;
						padding: 0px 6px 0px 6px;	
						font-size: 14px;
						line-height: 19px;	
						color: #12100b;
						font-weight: normal;
					}
					#menu_main .menu ul li a:hover,	
					#menu_main .menu ul li.active a{
						background: url(/img/bg_menu_main_hover.gif) repeat-x left top;
						text-decoration: none;
					}	
					#menu_main .menu ul ul {	
						display: none;
						position: absolute;
						top: 22px;	left: -12px;
						width: 292px;	
						padding: 4px 0 34px 13px;						
						background: url(/img/bg_menu_ul_ul.png) no-repeat left bottom;											
					}
					#menu_main .menu ul li:hover ul {	
						display: block;																
						}	
						#menu_main .menu ul ul a{	
							width: 222px; height: 22px;
							padding: 0 22px 0 22px;
							line-height: 21px;
							background: none;							
						}	
						#menu_main .menu ul ul a:hover{							
							background: #AFAFAF;			
							color: #EFEFEF;
						}	
						#menu_main .menu ul ul ul {							
							position: relative;								
							left: auto; top: auto;
							width: auto;
							padding: 0;	
							background: none;																
							}
							#menu_main .menu ul ul ul li{	
								
								}
								#menu_main .menu ul ul ul a{	
									width: 207px;
									padding-left: 37px;	
									background: url(/img/icon_list_menu_main.gif) no-repeat 25px 11px;																			
								}
								#menu_main .menu ul ul ul li a:hover{											
									color: #EFEFEF;										
									background: #AFAFAF url(/img/icon_list_menu_main_hover.gif) no-repeat 25px 11px;									
								}
								
			#menu_main .gizmos {	
				
				}
				#menu_main .gizmos ul {	
					margin-right: 12px;
					}
					#menu_main .gizmos ul li{	
						float: left;	display: inline;
						margin-left: 32px;	
						font-size: 14px;
						line-height: 19px;	
						color: #12100b;					
					}				
									
						

#container_main {		
	position: absolute;
	top: 22px;	left: 0px;
	width: 100%; height:100%;	
	overflow:auto;
	z-index: 20;	
	}
	#wrapper {	
		position: relative;
		width: 980px;
		margin: 0 auto;			
		padding-bottom: 85px;					
	}	
		
		
		
	
#dock {	
	position: absolute;	
	bottom: 0;	 left: 0;
	width: 100%;	height: 85px;	
	z-index: 59;
	}	
	#dock .dock_inner {			
		position: relative;	
		width: 980px;	height: 85px;
		margin: 0 auto;	
		background: url(/img/bg_dock.png) no-repeat left bottom;		
		}
		#dock .dock_inner ul {			
			position: absolute;	
			bottom: 0;	 left: 175px;
			width: 980px;	height: 78px;			
			}
			#dock .dock_inner ul li{			
				position: relative;
				float: left;	display: inline;
				margin-right: 0px;
				}
				#dock .dock_inner ul li a{
					display: block;
					width: 60px;	height: 78px;
					text-indent: -999em;
				}				
				#dock .dock_inner ul li a.btn1{								
					background: url(/img/dock/finder.png) no-repeat left top;
				}
				#dock .dock_inner ul li a.btn2{								
					background: url(/img/dock/config.png) no-repeat left top;
				}
				#dock .dock_inner ul li a.btn3{								
					background: url(/img/dock/widgets.png) no-repeat left top;
				}		
				#dock .dock_inner ul li a.btn4{								
					background: url(/img/dock/pictures.png) no-repeat left top;
				}		
				#dock .dock_inner ul li a.btn5{								
					background: url(/img/dock/web.png) no-repeat left top;
				}
				#dock .dock_inner ul li a.btn6{								
					background: url(/img/dock/indesign.png) no-repeat left top;
				}
				#dock .dock_inner ul li a.btn7{								
					background: url(/img/dock/photoshop.png) no-repeat left top				
				}		
				#dock .dock_inner ul li a.btn8{								
					background: url(/img/dock/illustrator.png) no-repeat left top;
				}
				#dock .dock_inner ul li a.btn9{								
					background: url(/img/dock/notes.png) no-repeat left top;
				}
				#dock .dock_inner ul li a.btn10{								
					background: url(/img/dock/bin.png) no-repeat left top;
				}
				#dock .dock_inner ul li a:hover{								
					background-position: left bottom;
				}
				
				#dock .dock_inner ul li .tool_tip_holder {
					position: absolute;
					top: -25px;	left: -120px;
					display: none;
					width: 300px;	height: 29px;
					text-align: center;
					color: #ffffff;
					margin: 0 auto;
					
					}
					#dock .dock_inner ul li .tool_tip {						
						display: inline-block;
						height: 29px;
						padding: 0 20px;
						text-align: center;
						color: #ffffff;
						background: url(/img/dock/dock_titel.png) no-repeat center top;
						width:auto;
					}
				#dock .dock_inner ul li:hover .tool_tip_holder {
					display: block;
				}
				
/* MAP */		
.map {	
	
	position: absolute;	
	top: 40px;	 left: 100px;	
	z-index: 50;
	}			
	.map .top{	
		position: relative;	
		width: 688px;	height: 62px;
		background: url(/img/map/bg_top.png) no-repeat left top;
		overflow: hidden;
		}
		.map .top .buttons{	
			position: absolute;	
			top: 12px;	 left: 17px;
			}	
			.map .top .buttons ul{	
				
				}
				.map .top .buttons ul li{	
					float: left; display: inline;
					margin-right: 5px;
					}	
					.map .top .buttons ul li a{	
						display: block;
						width: 15px;	height: 15px;
						text-indent: -999em;
					}
					.buttons ul li a.btn{	
						background: url(/img/map/btn_exit.png) no-repeat left top;
					}
					.buttons ul li a.btn_exit:hover{	
						background-position: left bottom;
					}	
						
		.map .top .title_box{				
			margin-top: 11px;			
			font-size: 11px;			
			}
			.map .top .title_box .holder{	
				margin: 0 auto;
				text-align: center;
				}				
				.map .top .title_box span.titel{	
					position: relative;
					}
					.map .top .title_box span.folder{	
						position: absolute;
						top: -2px;	left: -23px;
						display: inline-block;
						width: 16px;	height: 15px;								
						background: url(/img/map/icon_folder.png) no-repeat left top;			
						overflow: hidden;
					}
		
		.map .top .search_box{	
			position: absolute;	
			top: 34px;	 left: 241px;
			}		
			.map .top .search_box .input_search{
				width: 210px;	height: 17px;
				padding: 0;
				font-size: 11px;
				line-height: 20px;
				border: 0px;
				background: #ffffff;	
				overflow: hidden;		
			}	
			
	.map .container{	
		width: 688px;	
		background: url(/img/map/bg_container.png) repeat-y left top;
		}
		/* scrolling part */		
		.map .container .content_part{	
			position: relative;		
			margin-left: 9px;
			padding: 0;		
			width: 663px;	height: 30em;
			overflow: scroll;	
			background: #ffffff;		
			}
			.map .container table.head {						
				width: 663px;
				margin: 0;
				background: #ffffff;
				}	
				.map .container table.head {						
					margin-left: 9px;
				}			
			.map .container table {						
				width: 646px;
				margin: 0;
				background: #ffffff;
				}						
				.map .container table tbody tr{	
					line-height: 24px;
				}					
				.map .container table tbody tr.even td{	
					background: #f0f0f0;
				}
				.map .container table tbody tr:hover td{	
					background: #f1f6fe;
					cursor: pointer;
					}		
					.map .container th {	
						height: 16px;
						font-weight: bold;
						line-height: 15px;
						border-right: 1px solid #babbc6;
						background: url(/img/map/bg_filter_bar.gif) repeat-x left top;			
						overflow: hidden;
					}					
					.map .container th.row_1,
					.map .container td.row_1 {	
						padding: 0 0 0 15px;
						width: 120px;
					}
					.map .container th.row_2,
					.map .container td.row_2 {	
						padding: 0 0 0 15px;
						width: 200px;
					}
					.map .container th.row_3,
					.map .container td.row_3 {	
						padding: 0 0 0 15px;
					}
					.map .container th.row_4,
					.map .container td.row_4 {	
						padding: 0 0 0 15px;
						width: 120px;
					}
					.map .container td {								
						font-size: 11px;
						background: #ffffff;
					}
					.map .container td a {								
						color: #12100B;
						font-weight: normal;
					} 
		
		
	.map .bottom{	
		width: 688px;	height: 41px;
		background: url(/img/map/bg_bottom.png) no-repeat left top;	
		overflow: hidden;	
	}		


/* MAP */		
.mail {		
	position: absolute;	
	top: 20px;	 left: 250px;	
	display: block;
	width: 614px;	height: 577px;	
	background: url(/img/mail/bg_mail.png) no-repeat left top;
	z-index: 150;
	overflow: hidden;
	}	
	.mail .buttons ul li a{	
		position: absolute;	
		top: 25px;	 left: 44px;		
		display: block;
		width: 15px;	height: 15px;
		text-indent: -999em;
	}
	.mail form a.submit{	
		position: absolute;	
		top: 41px;	 left: 41px;		
		display: block;
		width: 58px;	height: 47px;	
		padding: 0;
		text-indent: -999em;
		border:0px solid #FFFFFF;
		background: url(/img/mail/verstuur_rust.png) no-repeat left top;			
	}
	.mail form a.submit:hover{  
        background: url(/img/mail/verstuur_over.png) no-repeat left top;            
    }
	.mail .grabber{		
		position: absolute;	
		top: 21px;	 left: 36px;	
		display: block;
		width: 542px;	height: 17px;		
	}
	.mail textarea.disabled, .mail input.disabled {
		background: #ddd !important;
		}
	.mail .input_mail{		
		position: absolute;	
		top: 99px;	 left: 169px;	
		display: block;
		width: 395px;	height: 87px;			
		}
		.mail .input_mail input{		
			width: 385px;
			margin-bottom: 8px;
			border:0px solid #FFFFFF;
			background: none;
		}
	.mail .input_text{		
		position: absolute;	
		top: 197px;	 left: 36px;	
		display: block;
		width: 542px;	height: 333px;				
		}
		.mail .input_text textarea{
			width: 538px; height: 333px;
			padding: 0 0 0 4px;
			border: 0px solid #ffffff;	
			overflow: auto;
			overflow-y: scroll;	
			overflow-x: hidden;				
            resize: none;
			}

		

/* twitter */
#twitter_sidebar {
	position: absolute;
	top: 115px;	left: 60px;
	display: block;
	width: 268px;	height: 315px;		
	background: url(/img/twitter/bg_twitter.png) no-repeat left top;
	z-index: 51;
	}
	#twitter_sidebar .holder {
		display: block;
		width: 212px;	height: 223px;	
		position: relative;
		padding: 48px 28px;
		color: #fff
		}	
		#twitter_sidebar .holder li{
			margin-bottom: 12px;
		    }	
		
		#twitter_sidebar .holder h3 a {
			position: absolute;
			top: -29px;	left: -17px;
			display: block;
			width: 271px;	height: 68px;					
			text-indent: -999em;
			background: url(/img/twitter/title_h3.png) no-repeat left top;
		}
		#twitter_sidebar .holder a {
			color: #F5D538;
		}
		#twitter_sidebar .holder a:hover {
			text-decoration: underline;
		}
		#twitter_sidebar .holder a.btn_goto_twitter {
			position: absolute;
			bottom: 36px;
			right: 26px;
			color: #ffffff;
		}
		
		
		 h2#logo_in_twitter a {
			position: absolute;
			top: 440px;	left: 58px;
			display: block;
			width: 271px;	height: 81px;					
			text-indent: -999em;
			background: url(/img/twitter/logo_cb_s.png) no-repeat left top;
			z-index: 52;
		}

/* kladblok */
.notepad textarea {
	width: 100%;
	background: transparent;
	border: 0;
	color: #FFD61E;
	font-size: 150%;
	display: block;
}
		
		
/* viewer */
.viewer {	
	position: absolute;	
	}
	.viewer .top {	
		width: 673px; height: 22px;
		overflow: hidden;
		background: url(/img/viewer/top.png) no-repeat left top;	
		}
		.viewer .top .button{	
			margin: 5px 0 0 11px;
		}
		* + html .viewer .top .button{	
			margin: 4px 0 0 11px;
		}
	.viewer .container {	
		width: 673px; max-height: 430px;
		overflow: hidden;
		background: url(/img/viewer/container.png) repeat-y left top;	
		}
		.viewer.large .container {
			max-height: 660px;
			}
		.viewer .container .inner {	
			padding: 0 12px 0 13px;			
			}
			.viewer .container .inner .text{
				max-height: 400px;
				padding: 15px;
				color: #DFDFDF;
				background: #000;
				overflow: auto;
				}
				.viewer.large .container .inner .text {
					max-height: 530px;
					}
				.viewer .container .inner .text h1{	
					font-size: 14px;
					letter-spacing:1px;
					margin-bottom: 1em;
					text-transform: uppercase;
				}
				.viewer .container .inner .text h3{	
					margin-top: 2em;
					text-transform: uppercase;
				}
				.viewer .container .inner .text p,
				.viewer .container .inner .text a,
				.viewer .container .inner .text ul li{	
					font-size: 11px;
					margin-bottom: 8px;					
				}
				.viewer .container .inner .text p {	
					text-align: justify;		
				}
				.viewer .container .inner .text ul li{	
					line-height: 9px;
				}
	.viewer .bottom {	
		width: 673px; height: 95px;
		overflow: hidden;
		background: url(/img/viewer/bottom.png) no-repeat left top;	
		}
		.viewer.text .bottom {
			height: 22px;
			background-position: left bottom;	
			}
		.viewer .bottom .text_box {	
			height: 49px;
			padding: 2px 15px;
			font-size: 11px;
			color: #7F7F7F;	
			}
			.viewer .bottom .text_box p.title {
				margin-bottom: 0;
				font-weight: bold;
				font-size: 12px;
				color: #fff;
				}	
		
		.viewer .bottom .arrow_box {	
			width: 100%;			
			}
			.viewer .bottom .arrow_box ul {					
				display: block;
				width: 68px;
				margin:0 auto;
				text-align:center;
				}
				.viewer .bottom .arrow_box ul li {	
					float: left; display: inline;					
					}
					.viewer .bottom .arrow_box ul li a{	
						display: block;
						width: 24px;	height: 20px;
						text-indent: -999em;						
					}
					.viewer .bottom .arrow_box ul li a.btn_left{	
						margin-right: 20px;
						background: url(/img/viewer/icon_arrow_left.png) no-repeat left top;	
					}
					.viewer .bottom .arrow_box ul li a.btn_right{	
						background: url(/img/viewer/icon_arrow_right.png) no-repeat left top;	
					}
					.viewer .bottom .arrow_box ul li a:hover{	
						background-position: left bottom;						
					}


/* PROJECTEN */
#projecten_sidebar {	
	position: absolute;	
	top: 60px;	 right: 60px;	
	
	z-index: 51;
	}
	#projecten_sidebar ul {	
		
		}
		#projecten_sidebar ul li {	
			width: 60px; height: 72px;
			margin-bottom: 27px;
			text-align: center;			
			}
			#projecten_sidebar ul li a.img span{
				display: block;
				width: 60px; height: 45px;	
				margin-bottom: 4px;				
				}
				#projecten_sidebar ul li a.img span.brown{
					background: url(/img/sidebar/icon_map_brown.png) no-repeat 2px top;
				}
				#projecten_sidebar ul li a.img span.yellow{
					background: url(/img/sidebar/icon_map_yellow.png) no-repeat 2px top;
				}
			#projecten_sidebar ul li a.text,
			#colofon_sidebar ul li a.text{
				font-size: 11px;
				color: #fefefe;	
				font-weight: normal;
				text-shadow: 0px 2px 4px #000;
			}
			#projecten_sidebar ul li a.text:hover,
			#colofon_sidebar ul li a.text:hover{				
				text-shadow: 0px 2px 2px #8F8F8F;				
			}
			
/* ACHTERGROND AFBEELDINGEN */
ul#desktopImages {
	list-style-type: none;
	margin: 0;
	}
	ul#desktopImages li {
		width: 120px;
		height: 100px;
		margin-right: 20px;
		margin-bottom: 20px;
		text-align: center;
		vertical-align: top;
		display: -moz-inline-stack;
		display: inline-block;
		zoom: 1;
		*display: inline;
		}
		ul#desktopImages li input {
			margin-top: 6px;
			}
		ul#desktopImages li img {
			border: 1px solid #BFBCB3;
			cursor: pointer;
			}

/* COLOFON */
#colofon_sidebar {	
	position: absolute;	
	bottom: 60px;	 right: 60px;
	width: 182px;	height: 72px;
	z-index: 61;
	}
	#colofon_sidebar ul {	
		width: 190px;	height: 72px;
		}
		#colofon_sidebar ul li {	
			float: left; display: inline;
			width: 89px;	height: 72px;
			margin-left: 5px;
			text-align: center;			
		}	
		#colofon_sidebar ul li.num_1 {	
			width: 114px;			
			}
		#colofon_sidebar ul li.num_2 {	
			width: 63px;			
			}				
			#colofon_sidebar ul li a.img span{
				display: block;
				width: 52px; height: 53px;	
				margin: 0 auto;
				margin-bottom: 4px;
				padding-right:13px;
				background: red;				
				}
				#colofon_sidebar ul li a.img span.brown{
					background: url(/img/sidebar/icon_text_brown.png) no-repeat left top;
				}
				#colofon_sidebar ul li a.img span.yellow{
					background: url(/img/sidebar/icon_text_yellow.png) no-repeat left top;
				}