@charset "utf-8";
/* CSS Document */

html {
	overflow: scroll;
	overflow-x: auto;
}
body {
	background: #000;
	color: #898989;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
}
* {
	margin: 0px;
	padding: 0px;
}
.clear {
	clear: both;	
}
a {
	color: #898989;
}

/****************************************** HEADER ( FLASH ) ****************************/
#flash-header { 
	margin: 0 auto;
	height: 530px;
	background-color:#000000;
}
#wrapper {
	margin: 0 auto;
	width: 905px;
}

/****************************************** TAGCLOUD ****************************/
#tag-cloud { 
	height: 300px;
	text-align: center;
	margin: 0 0 10px 0;
}
#tag-cloud span { text-transform: uppercase; line-height: 27px; padding: 0 3px 0 3px; }
#tag-cloud span a { text-decoration: none; }
#tag-cloud span a:hover { text-decoration: none; }

#tag-cloud span.small, #tag-cloud span.small a { font-size: 12px; }
#tag-cloud span.medium, #tag-cloud span.medium a { font-size: 18px; }
#tag-cloud span.large, #tag-cloud span.large a { font-size: 25px; }


#tag-cloud span.kleur-een, #tag-cloud span.kleur-een a { color: #3d3d3d; }   /* donker */
#tag-cloud span.kleur-twee, #tag-cloud span.kleur-twee a { color: #6b6b6b; } /* lichtdonker */
#tag-cloud span.kleur-drie, #tag-cloud span.kleur-drie a { color: #999999; } /* licht */
#tag-cloud span.kleur-vier, #tag-cloud span.kleur-vier a { color: #d16a19; } /* oranje */

/********************************************* CONTENT NEWS & RECENT PROJECTS **************************************/
#content {
	width: 905px;
}
#content #news, 
#content #projects {
	background: #0e0e0e;
	margin: 0 1px 0 0;
	width: 400px;
	float: left;
	padding: 15px 25px 7px 25px;
}
#content #projects {
	margin: 0 0 0 0;
	border-left: 1px solid #141414;
}

#content #news h2, 
#content #projects h2 {
	font-size: 20px;
	text-transform: uppercase;
}

#content #news .news-item-box, 
#content #projects .projects-item-box {
	background: url(/img/news-projects-divider.gif) top left repeat-x;	
}
#content #news .news-item-box:hover, 
#content #projects .projects-item-box:hover {
	background: #141414;
	cursor: pointer;
}

#content #news .news-item-box .item, 
#content #projects .projects-item-box .item {
	padding: 18px 45px 18px 0;
	height: 63px;
	cursor: pointer;
	background: url(/img/news-projects-arrow.gif) 385px 43px no-repeat;
}
#content #news .news-item-box .item:hover, 
#content #projects .projects-item-box .item:hover {
	background: url(/img/news-projects-arrow-hover.gif) 385px 43px no-repeat;
}

#content #news .news-item-box .item img, 
#content #projects .projects-item-box .item img {
	float: left;
	height: 58px;
	width: 58px;
	margin: 2px 15px 18px 0;
	border: 1px solid #d3d3d3;
}

#content #news .news-item-box .item h1, 
#content #projects .projects-item-box .item h1 {
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
}
#content #news .news-item-box .item h1 a, 
#content #projects .projects-item-box .item h1 a {
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;	
}

#content #news .news-item-box .item p a, 
#content #projects .projects-item-box .item p a {
	letter-spacing: 0.5px;
	text-decoration: none;
}
#main-box {
	background: url(/img/bg-content.jpg) top left repeat-y;
	height: 100%;
	overflow: hidden;
}

/********************* SIDEBAR **********************************************/
#sidebar {
	width: 225px;
	height: 100%;
	padding: 25px 15px 15px 15px;
	float: left;
}
#sidebar img {
	height: 58px;
	width: 58px;
	float: left;
	margin: 2px 15px 10px 0;
	border: 1px solid #d3d3d3;
}
#sidebar img:hover {
	border: 1px solid #d16a19;
}
#sidebar div {
	width: 200px;
	height: 75px;
}
#sidebar div a {
	font-weight: bold;
	text-decoration: none;
	padding: 5px 0 0 0;
	display: block;
	clear: both;
}
#sidebar div a:hover {
	text-decoration: none;
	color: #d16a19;
}
#sidebar p {
	margin: 10px 0 25px 0;
}

/********************* MAIN INFORMATION / CONTENTBOX **********************************************/
#main {
	float: right;
	width: 590px;
	padding: 20px 30px 40px 30px;
}
#main h1 {
	font-size: 20px;
	text-transform: uppercase;
	padding: 5px 0 12px 0;
}
#main span { 
	color: #d16a19; 
	font-weight: bold;
	float: left; 
}
#main p a {
	float: none;
	color: #d16a19;
	text-decoration: none;
}
#main p a:hover {
	color: #6d3000; 
}

#main p {
	margin: 0 0 20px 0;
}
#main form.nieuwsbrief {
	margin: 0 0 25px 0;
}
#main form.nieuwsbrief .email {
	margin: 15px 0 0 10px;
	background: #0e0e0e;
	color: #414040;
	border: 1px solid #414040;
	font-size: 11px;
	padding: 5px;
	width: 180px;
}
#main form.nieuwsbrief .submit {
	background: #d16a19;
	color: #ffffff;
	border: none;
	font-size: 11px;
	padding: 5px;
	cursor: pointer;
}
#main form.nieuwsbrief table tr td {
	padding: 5px 10px 0 0px;
}
#main img.thumb {
	float: left;
	margin: 4px 8px 0 0;
	max-width: 100px;
}
#main img {
	max-width: 530px;
}
.tbl_search {
	border-bottom: 1px solid #0e0e0e;
	border-left: 1px solid #0e0e0e;
}
.tbl_search tr:hover {
	background: #0e0e0e;
}
.tbl_search tr.firstrow:hover {
	background: #000000;
}
.tbl_search tr td.col-0 { width: 250px; font-size: 15px; text-transform: uppercase; font-weight: bold; border-right: 1px solid #0e0e0e; border-left: 1px solid #0e0e0e; }
.tbl_search tr td { padding: 3px 0 2px 10px; border-right: 1px solid #0e0e0e; width: 160px; }
.tbl_search tr td strong { }
.tbl_search tr td a { text-decoration: none; color: #414040; }
.tbl_search tr td a:hover { text-decoration: none; color: #ffffff; }
.tbl_search tr.firstrow td {
	background: #0e0e0e;
	border-bottom: 2px solid #0e0e0e;
	border-right: none;
	border-left: none;
}

/********************************* CONTACT ***********************/
.contactgegevens {
	line-height: 20px;
}
#map {
	width: 550px;
	height: 315px;
	border: 1px solid #414040;
}
.frm_contact input { 
	color: #0e0e0e;
}

/*********************************** LINKEN NAAR OVERIGE DOMEINEN ***********************/
ul#domeinen {
	list-style: none;
	width: 100%;
	padding: 0px;
}
ul#domeinen li {
	float: left;
	background: url(/img/domein-submenu-divider.jpg) top left no-repeat;
	height: 65px;
	padding: 0 0 0 1px;
}
ul#domeinen li.first {
	background: none;
	padding: 0 0 0 0;
}
ul#domeinen li.nothome {
	border-top: 1px solid #0e0e0e;
}

ul#domeinen li a {
	display: block;
	padding: 15px 0 0 0;
	text-align: center;
	text-decoration: none;
	height: 65px;
}
ul#domeinen li a.architecten { width: 188px; background: none; }
ul#domeinen li a.architecten:hover { color: #ffffff; width: 188px; background: url(/img/btnbg-architecten.jpg) top left no-repeat; }

ul#domeinen li a.gemeente { width: 170px; background: none; }
ul#domeinen li a.gemeente:hover { color: #ffffff; width: 170px; background: url(/img/btnbg-gemeente.jpg) top left no-repeat; }

ul#domeinen li a.zwembad { width: 182px; background: none; }
ul#domeinen li a.zwembad:hover { color: #ffffff; width: 182px; background: url(/img/btnbg-zwembaden.jpg) top left no-repeat; }

ul#domeinen li a.domotica { width: 165px; background: none; }
ul#domeinen li a.domotica:hover { color: #ffffff; width: 165px; background: url(/img/btnbg-domotica.jpg) top left no-repeat; }

ul#domeinen li a.particulieren { width: 193px; background: none; }
ul#domeinen li a.particulieren:hover { color: #ffffff; width: 193px; background: url(/img/btnbg-particulieren.jpg) top left no-repeat; }

/************************************* FOOTER *******************************************/
#footer {
	margin: 20px 0 50px 0;
}
#footer .newsletter, 
#footer .search {
	float: left;
	width: 240px;
	font-size: 11px;
}
#footer span.newsletter { width: 240px; border-bottom: 1px solid #1f1f1f; margin: 0 0 6px 0; line-height: 20px; }
#footer span.search { width: 665px; border-bottom: 1px solid #1f1f1f; margin: 0 0 6px 0; line-height: 20px; }
	
#footer #footerbalk {
	padding: 0 0 6px 0;
	border-bottom: 1px solid #1f1f1f;
	clear: both;
	height: 24px;
}
input.input-tekst {
	background: #0e0e0e;
	color: #414040;
	border: none;
	font-size: 11px;
	padding: 5px;
	float: left;
	width: 180px;
}
input.input-submit {
	width: 24px;
	height: 24px;
	background: url(/img/newsletter-search-btn.jpg) center center no-repeat #d16a19;
	border: none;
	float: left;
	cursor: pointer;
}
#footer #footerbalk .copy {
	float: right;
	font-size: 11px;
	line-height: 25px;
}
#footer #footerbalk .copy a {
	font-size: 11px;
	text-decoration: none;
}
#footer #footerbalk .copy a:hover {
	color: #ffffff;
}

/***************************************** UITKLAPBARE TOPBAR **********************************/
#topbar {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	cursor: pointer;
	
}
#topbar_wrapper {
	background: url(/img/bg-topbar.jpg) top left repeat-x;
	/*background: #000000;*/
	height: 480px;
	width: 100%;
	margin: 0 auto;
	position: relative;
}
#topbar_content {
	width: 915px;
	margin: 0 auto;
	/*background: url(/img/ibg-portal.jpg) bottom left no-repeat;*/
}
#topbar_content #content-left {
	float: left;
	width: 665px;
	height: 480px;
}
#topbar_content #content-right {
	float: left;
	width: 250px;
	height: 480px;
}
#topbar_content #content-right img.header  {
	color: #d16a19; 
	font-size: 20px; 
	letter-spacing: 1px; 
	font-weight: normal;
	text-transform: uppercase;
	margin: 50px 0 3px 0;
	padding: 0 0 0 20px;
}
#topbar_content #content-right p { 
	font-size: 13px;
	width: 210px;
	line-height: 20px;
	padding: 0 0 0 20px;
	height: 240px;
}
#topbar_content #content-right #ibgbox {
	background: url(/img/ibg-box-topbar.png) top left no-repeat;
	_background: url(/img/ibg-box-topbar.gif) top left no-repeat;
	padding : 20px 20px 20px 20px;
	width: 210px;
	height: 105px;
	margin: 0 0 0 0px; 
}
#topbar_content #content-right #ibgbox img.header {
	margin: 0 0 10px 0;
	padding: 7px 0 0 0;
}
#topbar_content #content-right #ibgbox p {
	padding: 0 0 0 0;
	height:auto;
}

#topbar #topbar_balk {
	height: 76px;
	display: block;
	margin: 0 auto;
	width: 100%;
	background-image: url(/img/topbar.png);	
	_background-image: url(/img/topbar.gif);
	background-position: top center;
	background-repeat: no-repeat;
}
#topbar #topbar_buttons {
	height: 24px;
	display: block;
	margin: 0 auto;
	width: 980px;
}
#topbar .chat { 
	font-size: 11px;
	float: right;
	text-transform: uppercase;
	text-decoration: none;
	padding: 1px 5px 0 0px;
	border-right: 1px solid #000000; 
	margin: 11px 0 0 0;
} 
#topbar .contact {
	float: right;
	font-size: 11px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 1px 5px 0 5px;
	border-left: 1px solid #282828; 
	margin: 12px 0 0 0;
	color: #8a8a8c;
}
#topbar .search-small {
	float: right;
	padding: 0 5px 0 5px;
	border-left: 1px solid #282828; 
	margin: 8px 45px 0 0; 
}
#topbar .search-small .inputtekst {
	float: left; 
	border: 1px solid #282828;
	background: #000000;
	font-size: 11px;
	padding: 5px 3px 4px 4px;
	width: 150px;
	text-transform: uppercase;
	color: #8a8a8c;
}
#topbar .search-small .inputsubmit {
	float: left; 
	width: 27px;
	height: 24px;
	background: url(/img/newsletter-search-btn.jpg) center center no-repeat #d16a19;
	border: none;
	margin: 0 0 0 0;
	cursor: pointer;
}
#printscreens { 
	margin: 75px 0 0 0;
}
.printscreen {
	float: left; 
	position: relative; 
	text-decoration: none;
	display: block;
	width: 218px;
	height: 176px;
}
.printscreen a.website-overlay {
	position: relative; 
	text-decoration: none;
	display: block;
	width: 218px;
	height: 176px;
	z-index: 999;
}
.printscreen.gemeente a.website-overlay:hover { background: url(/img/printscreen-overlay-top-left.png) top left no-repeat; _background: url(/img/printscreen-overlay-top-left.gif) top left no-repeat; }
.printscreen.architecten a.website-overlay:hover { background: url(/img/printscreen-overlay-top-center.png) top left no-repeat; _background: url(/img/printscreen-overlay-top-center.gif) top left no-repeat; }
.printscreen.zwembaden a.website-overlay:hover { background: url(/img/printscreen-overlay-top-right.png) top left no-repeat; _background: url(/img/printscreen-overlay-top-right.gif) top left no-repeat; }
.printscreen.domotica a.website-overlay:hover { background: url(/img/printscreen-overlay-bottom-left.png) top left no-repeat; _background: url(/img/printscreen-overlay-bottom-left.gif) top left no-repeat; }
.printscreen.optx a.website-overlay:hover { background: url(/img/printscreen-overlay-bottom-center.png) top left no-repeat; _background: url(/img/printscreen-overlay-bottom-center.gif) top left no-repeat; }
.printscreen.particulieren a.website-overlay:hover { background: url(/img/printscreen-overlay-bottom-right.png) top left no-repeat; _background: url(/img/printscreen-overlay-bottom-right.gif) top left no-repeat; }
	
.printscreen span.website {
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;
	width: 218px;
	height: 176px;
	z-index:99; 
}
.printscreen.gemeente span.website { background: url(/img/printscreen-gemeente-top-left.gif) top left no-repeat; }
.printscreen.architecten span.website { background: url(/img/printscreen-architecten-top-center.gif) top left no-repeat; }
.printscreen.zwembaden span.website { background: url(/img/printscreen-zwembaden-top-right.gif) top left no-repeat; }
.printscreen.domotica span.website { background: url(/img/printscreen-domotica-bottom-left.gif) top left no-repeat; }
.printscreen.optx span.website { background: url(/img/printscreen-optx-bottom-center.gif) top left no-repeat; }
.printscreen.particulieren span.website { background: url(/img/printscreen-particulieren-bottom-right.gif) top left no-repeat; }

/* Autosuggest */
#search { z-index: 99999; }
html body div.autocomplete-w1 { position:absolute; top:0px; left:0px; margin:8px 0 0 6px; _margin:0; width: 200px; }
html body div.autocomplete { background:#000; color: #fff; cursor:pointer; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px;  _margin:0; _overflow-x:hidden; }
html body div.autocomplete .selected { background:#666; }
html body div.autocomplete div { padding:2px 5px; white-space:nowrap; }
html body div.autocomplete strong { font-weight:normal; color:#d16b19; }

/* Search results */
hr {
	height: 1px;
	color: #898989;
	background-color: #898989;
	border: none;
}
a.pagebutton {
	border: 1px solid #898989;
	color: #898989;
	padding: 2px 4px;
	text-decoration: none;
}
a.pagebutton:hover, a.pagebuttonactive {
	border: 1px solid #898989;
	background-color: #898989;
	color: #000;
	padding: 2px 4px;
	text-decoration: none;
}
span.search-title {
	color: #d16a19;
	font-weight: bold;
}
a.search-link {
	color: #d16a19;
}
a.search-link:hover{
	color: #6d3000;
}