@CHARSET "UTF-8";

html, body {
	width: 2000px;
	background-color: #1A1819;
	margin: 0;
	padding: 0px 0 0 0;
	font-family: Helvetica, Arial, sans-serif;
	overflow: hidden;
}
html {
	padding: 0;
}
a {
	text-decoration: none;
}
ul {
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
	padding: 0;
}


/* even ter test */
h1 {
	color: red;
	font-style: italic;
}

/*******************************************************************************
	The viewport
********************************************************************************/

#viewport {
	position: relative;
	/* margin: 0 0 2px 0 !important; */
	left: 140px;
	overflow: hidden;
	background:transparent !important;
	
}

#slide-left, #slide-right {
	cursor :pointer;
	background-image:url(../img/empty.gif);
}

#slide-left {
	width: 250px;
	height: 300px;
	left: 0px;
	z-index: 98 ;
	position: relative;	
}

#slide-left img, #slide-right img {
	margin: 140px 0 0 0;
	cursor: pointer;
	cursor: hand;
}


#slide-right {
	width: 250px;
	height: 300px;
	top: -300px;
	left: 350px;
	text-align: right;
	z-index: 99 ;
	position: relative;
}

/**
 * View More info button
 */
.viewmore {
	width: 600px;
	height: 365px;
	background: transparent url(../img/bg-showmore.png) top left no-repeat;
	position: absolute;
	top: 330px;
	z-index: 100;
	color: #fff;
}
.viewmore div {
	width: 568px;
	float: left;
	padding: 12px 16px;
	font-size: 2.06em;
	text-transform: uppercase;
}
.down {
	padding: 7px 0 8px 10px !important;
	font-size: 1.1em !important;
	font-weight: bold !important;
	text-transform: uppercase;
	display:inline;
}

.viewmore div span, .viewmore div p {
	text-transform: uppercase; 
	xfloat: left;
	font-weight: bold;
	color: #00ec00;
	margin: 0;
	line-height: 1em;
}
.viewmore div p {
	font-weight: 400;
	font-size: 1.1em;
	color: #fff;
}
.viewmore p {
	clear: left;
	margin: 19px 0 0 16px;
	font-size: .8em;
	width: 500px;
}
.viewmore p a {
	color:#FFFFFF;
	text-decoration:underline;
}
.viewmore ul {
	padding: 16px;
	margin: 0;
	float: left;
}
.viewmore li {
	text-transform: uppercase;
	font-size: .9em;
	list-style: none;
	padding: 0;
	margin: 0;
	font-weight:bold;
}
.viewmore li a {
	color: #00ec00;
	outline: none;
}
.viewmore li a:hover {
	color: #FFFFFF;
}
#viewmore .related-services {
	height: 15px;
	top: 345px;
	left: 0;
	float: left;
	width: 487px;
	padding: 3px 0 0 0;
	position: absolute;
	text-align: left;
}
#viewmore .related-services li {
	float: left;
	height: 18px;
	padding: 0 4px 0 4px;
	background: #9f0708;
	color: #fff;
}
#viewmore .related-services .odd {
	background: #ff0000;
}


#info-panel {
	position: absolute;
	top: 332px;
	width: 600px;
	height: 38px;
	color: #fff;
	left: 0px;
	z-index: 101;
}
#info-panel div {
	xheight: 26px;
	width: 110px;
	float: right;
	left: 490px;
	text-align: center;
	background-color: #000000;
}
#info-panel div a {
	text-decoration: none;
	color: #fff;
	text-transform: uppercase;
	font-size: 0.76em;
}
#info-panel div a img {
	border: none;
}
#show_info:active {
	outline: none;
}
#show_info.selected {
	color: red;
}

/**
 * Hide project data to prevent showing before relevant.
 */
.project_data {
	display: none;
}

#preview-panel {
	position: relative;
	/* first for FF second for IE (custom cursor needs a full path in IE and a .cur???
	cursor: url(../img/cur_up.png), pointer ; 
	cursor: url(../img/cur_up.png), url(ext_7u08/templates/default/img/cur_up.gif), pointer;
	*/
	xcursor: pointer;
	left: 140px;
	width: 600px;
	height: 250px;
	overflow: hidden;
	padding: 2px 0 0 0;
	margin: 2px 0 2px 0;
}
#preview-panel li {
	height: 61px;
	width: 600px;
	margin: 0 0 2px 0;
	*margin: 0 0 -4px 0;
	line-height: 1.15em;
	font-size: 1.69em;
	cursor: pointer;
	cursor: hand;
}
#preview-panel li div {
	height: 61px;
}
#preview-panel li .project-panel {
	float: left;
	width: 364px;
	height: 61px;
}
#preview-panel li .project-name-odd, 
#preview-panel li .project-name-even {
	width: 229px;
	height: 61px;
	float: left;
	text-align: right;
	text-transform: uppercase;
	font-family: helvetica;
	font-weight: 900;
	padding: 0 7px 0 0;
}
#preview-panel li .project-name-odd, #preview-panel li .project-name-even {
	background: #2d2929;
	color: #1a1818;
}
#preview-panel li .project-name-even {
	background: #272424;
}
#preview-panel li .project-name-odd p, #preview-panel li .project-name-even p {
	margin: 6px 0px 0px 0px;
	line-height: 25px;
	display:inline-block;
	vertical-align:middle;
}

#slide-up, #slide-down {
	position: relative;
	left: 140px;
	height: 15px;
	width: 600px;
	margin: 2px 0;
	filter: alpha(opacity=50);
	-moz-opacity: .50;
	opacity: 0.5;
	cursor: pointer;
	cursor: hand;
}
#slide-up {
	background: #2d2929 url(../img/prevSlide.gif) no-repeat;
	background-position: 50% 50%;
}
#slide-down {
	background: #2d2929 url(../img/nextSlide.gif) no-repeat;
	background-position: 50% 50%;
}


/*******************************************************************************
	The tabs
*******************************************************************************/

#container {
	float: left;
	width: 1200px;
	height: 660px;
	clear: right;
	xoverflow: auto;
	display: inline;
	margin: 0;
	
}

#container .leftpane {
	width: 740px;
	float: left;
	margin: 0 0 0 23px;
	display: inline;
}

#tabs {
	float: left;
	clear: left;
	height: 1500px;
	xmargin-top: -25px;
	position: relative;
	left: 0px;
}
	.menu-tab {
		width: 327px;
		left: -273px;
		position: absolute;
		float: left;
	}
	
	.tab_header {
		width: 54px;
		height: 31px;
		margin: 0;
		xfloat: right;
		position: relative;
		left: 0px;
		top: 311px;
		cursor: pointer;
		/*xbackground-image:url(../img/btn-about.gif);*/
		xborder:1px solid red;
		z-index:200;
	}

	.tab_content {
		width: 230px;
		padding:20px 18px 20px 15px;
		color: #fff;
		float: left;
	}
	
	
	.tab_content h2 {
		margin: 0;
		line-height: 1em;
		font-size: 1em;
		text-transform: uppercase;
		padding: 10px 0 0 0;
		font-weight:bold !important;
	}
	
	h2.groen 	{color: #00EC00;}
	h2.rood 	{color: #ff0000;}
	h2.blauw 	{color: #031bff;}
	
	.tab_content p {
		margin: 0;
		font-size: .75em;
		padding: 0px 0px 10px 0px;
		color: #fff;
		font-weight: 550;
		line-height: 1.5em;
	}
	
	.tab_content a {
		margin: 0;
		line-height: inherit;
		font-size: inherit;
		padding: 0px 0px 10px 0px;
		color: #fff;
		font-weight: 550;
	}
	
	.tab_content a:hover {
		text-decoration: underline;
	}
	
	.tab_content ul {
		list-style:none;
		margin: 0;
		font-size: .85em;
		padding: 0px 0px 10px 0px;
		color: #fff;
	}

	.tab_content li {
		margin: 5px 0px;
		padding: 0px 0px 0px 13px;
		color: #fff;
		background :url(../img/bg_listitem.gif) no-repeat;
		background-position: 2px 3px;
	}
	
	.tab_content img {
		margin: 0;
		padding: 0px 0px 10px 0px;
	}
	


/*******************************************************************************
	The Project Filter
*******************************************************************************/
.logo {
	width: 90px;
	height: 140px;
	position: absolute;
	padding-top:1px;
}

/*******************************************************************************
	The Project Filter
*******************************************************************************/

.project-filter {
	width: 235px;
	height: 100%;
	padding: 0px 0px 0px 35px;
	float: left;
}
.project-filter h2 {
	margin: 0;
	padding: 0;
	line-height:22px;
	color: #fff;
	font-family: Helvetica;
	font-size: 1.36em;
	text-align: center;
	text-transform: uppercase;
}
.project-filter p {
	color: #fff;
	font-size: .75em;
	margin: 12px 7px 0 0;
	text-align: right;
	font-family: helvetica;
}
.project-filter p a {
	color: #fff;
	text-decoration: none;
}
.project-filter .showproject {
	margin: 12px 0 0 0;
	height: 22px;
	width: 235px;
	color: #fff;
	background: #000;
	text-align: center;
	padding: 0 0 0 0;
	font-family: Helvetica;
	padding: 5px 0 0 0;
}
.project-filter .showproject h4 {
	margin: 0;
	text-transform: uppercase;
	font-size: .75em;
	font-weight: normal;
}
.project-filter .showproject h4 span {
	font-size: 1.13em;
	font-weight: 600;
}
.project-filter ul {
	margin: 8px 0 0 8px;
	padding: 0;
	width: 219px;
}
.project-filter li {
	float:left;
	display:block;
	width: 219px;
	height: 14px;
	background: #000;
	margin: 0px 0px 4px 0px;
	padding: 0px;
	list-style: none;
	text-transform: uppercase;
	color: #5c5c5c;
	font-size: .68em;
	line-height: inherit;
	font-family: Helvetica;
}
.project-filter .active-tag, .active-tag:hover {
	width: 214px;
	padding: 0px 5px 0px 0px;
	margin: 0px 0px 4px 0px;
	background: #fff url(../img/close-tag.gif) top left no-repeat;
	color: #ff0000;
	text-align: right;
	cursor: hand;
	cursor: pointer;
}

.project-filter .relevancy-tag, .relevancy-tag:hover {
	color: #fff;
	background: transparent url(../img/bg-tag.gif) top left repeat;
	text-align: left;
	cursor: hand;
	cursor: pointer;
	line-height: 14px;
	margin-top: 0;
}
.project-filter .relevancy-tag span {
	background: #ff0000;
	padding: 0px 0px 0px 5px;
	height: 14px;
	float: left;
	display: inline;
	z-index:2000;
}

.tab_content .close {
	display: block;
	float: right;
	bottom: 0px;
}

.filter_hover:hover {
	text-decoration:underline;
}

/*******************************************************************************
	Temporary Contact Clock
*******************************************************************************/

.contact_block {
	width: 235px;
	padding: 0px 0px 0px 35px;
	float: left;
}

.contact_block h2 {
	margin: 0;
	padding: 0;
	line-height:22px;
	color: #fff;
	font-family: Helvetica;
	font-size: 1.36em;
	text-align: left;
	text-transform: uppercase;
}

.contact_block p {
	color: #fff;
	font-size: .75em;
	margin: 12px 7px 0 0;
	text-align: left;
	font-family: helvetica;
}
.contact_block p a {
	color: #fff;
	text-decoration: underline;
}

.contact_block .routemap {
	float: left;
	margin: 10px 0px;
}

/*******************************************************************************
	Nieuws blok
*******************************************************************************/
.nieuws {
	width: 234px;
	display: block;
	position: relative;
	background: transparent url(../img/hdr-new.gif) no-repeat scroll top;
	top: 20px;
	padding-top: 30px;
	xfloat: right;
}

.nieuws div {
	position: relative;
	xfloat: right;
	display: block;
	background-color: #000000;
	padding: 8px;
	margin: 5px 0px 0px 0px;
}

.nieuws div h1 {
	color: #00EC00;
	font-size: 16px;
	font-style: normal;
	font-family: Helvetica,Arial,sans-serif;
	margin: 0;
}

.nieuws div p {
	text-align: left;
	font-style: normal;
	font-size: 17x;
	font-family: Helvetica,Arial,sans-serif;
	margin: 5px 0px 0px 0px;
}

.nieuws div p a {
	text-decoration: none;
}
.nieuws div p a:hover {
	text-decoration: underline;
}

/*******************************************************************************
	Follow us
*******************************************************************************/
.follow {
	position: relative;
	top: 30px;
	width: 234px;
	xfloat: left;
	display:block;
}

.follow ul {
	list-style: none;
	xfloat: left;
	margin-left:0px;
	width: 234px;
}

.follow ul li {
	display: block;
	xfloat: right;
	width: 16px;
	height: 16px;
	background-color: transparent;
	display: block;
	margin: 0px 3px;
}

.follow ul li.followus {
	width: 95px !important;
	color: #FFFFFF;
	font-size:0.88em;
}

.follow ul li a {
	display: block;
	width: 16px;
	height: 16px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: top;
}

.follow ul li a.delicious	{ background-image: url(../img/flw-delicious.gif); }
.follow ul li a.mail		{ background-image: url(../img/flw-mail.gif); }
.follow ul li a.linkedin	{ background-image: url(../img/flw-linkedin.gif); }
.follow ul li a.twitter		{ background-image: url(../img/flw-twitter.gif); }
.follow ul li a.digg		{ background-image: url(../img/flw-digg.gif); }
.follow ul li a.stumbleupon	{ background-image: url(../img/flw-stumble.gif); }

.follow ul li a:hover {
	background-position: 0 -16px;
}