@charset "ISO-8859-1";

/* Basic styles =====================================================*/

* {
	margin: 0px;
	padding: 0px; }

html  {
	overflow-y: scroll; }

body {
	font-family: "trebuchet ms", sans-serif;
	font-size: 10pt;
	color: #111;
	line-height: 130%;
	background: #1a3882;
	height: 100%; }

h1,h2,h3 {
	font: bold 130% arial;	
	margin-bottom: 0.5em; }
h2{	font-size:120%;}
h3{	font-size:110%;}

.center { 
text-align: center; } 

.clear{
clear:both;
}

img {
	border: none;}

p  { 
	margin-bottom: 1em; }

a {
	color: #1a3882;
	font-weight: bold;
	text-decoration: none; }

a:hover {
	text-decoration: underline; }

a.small {
	font-size: 80%;
	font-weight: 200; }

a.large {
	font-size: 120%;
	font-weight: 600; }

#hr {
	height: 1px;
	width: 95%;
	background: #bbb;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #fff;
	margin: 0.2em auto; }

/* Outer ============================================================*/

#outer {
	position: relative;
	width: 88%;
	min-width: 700px;
	max-width: 1000px;
	min-height: 100%;
	margin: 1% auto;
	background: #f5f5f5; }

/* Header ===========================================================*/

#header {
	float:left;
	background: transparent url('images/back_header.gif') repeat-x;
	height: 100px;
	width: 100%; }

#headerimage {
	float:right;
	width: 40%;
	top: 0px;
	background: url('images/banner_wide.gif') top center no-repeat;
	height: 100px;
	/* for IE */
	filter:alpha(opacity=60);
	/* CSS3 standard */
	opacity:0.6; }

a.logo {
	display: block;
	position:absolute;
	top: 20px;
	left: 10px;
	background: transparent url('images/stratix_logo.png') no-repeat 0 0px;
	margin-left: 10px;
	height: 60px;
	width: 260px; }

a.logo:active {
	background-position: 0px -65px;
	}
	
/* Menu =============================================================*/

#menuDiv{
	float:left;
	height:46px;
	width:100%;
	width:100%;
	background: #9baecc;
	border-bottom: 1px solid #1a3882;
	}

#menu {
	position: relative;
	background: #1a3882;
	width: 100%;
	height:24px;
	list-style-type: none;
	padding:0px;
	margin:0px }

#menu li{
	list-style-type: none;
	width:99px;}
	
#menu li.on, #menu li.off, #menu li.sub {
	display: block;
	float: left;
	line-height: 23px;
	font-weight: bold;
	font-size: 10pt; }	
	
#menu li a {
	color: #fff;
	display: block;
	padding-right: 4px;
	text-align: center;
	text-decoration: none;}

#menu li.off:hover {
	background: url('images/tab2.gif') top right no-repeat;
	border-bottom: 1px solid #1a3882;}
#menu li.off:hover  a{	
	color: #1a3882; }

#menu li.on {
	background: url('images/tab1.gif') top right no-repeat;
	color: #1a3882;
	line-height: 24px;
	border:none;}
#menu li.on a{
	color: #1a3882;}

#menu li.sub {
	float: right;
	font-weight: bold;}
#menu li.sub a{
	padding-left:9px;}	
	
#menu li.sub:hover{
	background: #1a3882 url('images/tab3.gif') top left no-repeat; }
#menu li.sub:hover a{
	color: #1a3882;}

	
/* Submenu ==========================================================*/
#menu li.off ul, #menu li.on ul{ 
	position: absolute;
	display:block;
	top: 24px;
	height:22px;
	left:0px;
	background: #9baecc;
	visibility:hidden;
	}

#menu li.on ul{	
	visibility:visible;
	}
	
#menu li.off:hover ul{
	visibility:visible;
	z-index:2;}


#menu ul.home{
	width: 700px;}		
#menu ul.stratix {
	padding-left:0px;
	width: 700px;}
#menu ul.portfolio{
	padding-left:100px;
	width: 550px;}
#menu ul.career {
	padding-left:300px;
	width: 400px;}
#menu ul.contact {
	padding-left:350px;
	width: 350px;}	
#menu ul.ftth {
	padding-left:450px;
	width: 250px;}	

#menu li li{
	float:left;
	border:none;
	line-height:21px;
	}

#menu li li a{
	color: #1a3882;
	font-size:9pt ;
	font-weight: normal;}

#menu li li:hover{
	background:none;
	border: none;}	
#menu li li a:hover{
	text-decoration:underline;}

#menu li li.sub_actief a{
	font-weight:bold;
	text-decoration:underline;}	
	
/* Content wrapper (achtergond) =====================================*/
#content {
	float:left;
	width:100%;
	height:100%;
	background: #FFF url('images/backwrap.gif') 60% 0% repeat-y; }

/* Primary Content (kolom links) ====================================*/

#PrimaryContent {
	float: left;
	min-height: 100%;
	width: 54%;
	margin: 1.5%;
	padding: 1.5%;
	text-align: justify; }

#PrimaryContent ul  {
	list-style-type: none;
	text-align: left;
	margin-bottom: 1em;
	margin-top: -0.6em;
	padding-left: 1em; }

#PrimaryContent li {
	background: url('images/bullet.png') left 0.45em no-repeat;
	padding-left: 1em; 
}

#PrimaryContent ul  ul{
	margin-top: 0em;
	margin-bottom: 0em; }

/* Secondary Content (kolom rechts) ================================= */

#SecondaryContent {
	float: right;
	width: 33.3%;
	min-width: 230px;
	margin: 1.5%;
	padding: 1.5%;
	font-size: 90%;
	text-align: justify; }

#SecondaryContent ul  {
	list-style-type: none;
	margin-bottom: 1em;
	padding-left: 0em; }

#SecondaryContent li {
	padding-left: 0.5em; 
	padding-right: 0.5em; 
}

#SecondaryContent h3 {
	margin:0;
	padding:0; }

/* Footer ===========================================================*/

#footer {
	clear: both;
	padding: 0px;
	margin: 0px;
	background: #9baecc;
	width: 100%;
	text-align: center;
	border-top: 1px solid #1a3882;
	vertical-align: middle; }

#footer p {
	font-size: 90%;
	line-height: 1.3em;
	margin: 0;
	padding: 0; }

/* Rounded edges overlay ============================================*/

#corner {
	position: absolute;
	display: block;
	height: 30px;
	width: 30px;
	top: 0%;
	left: 0%;
	background: url('images/corner.png') no-repeat top left; }

#corner2 {
	position: absolute;
	display: block;
	height: 30px;
	width: 30px;
	top: 0%;
	right: 0%;
	background: url('images/corner2.png') no-repeat top right; }

#corner3 {
	position: absolute;
	display: block;
	height: 30px;
	width: 30px;
	bottom: 0%;
	left: 0%;
	background: url('images/corner3.png') no-repeat bottom left; }

#corner4 {
	position: absolute;
	display: block;
	height: 30px;
	width: 30px;
	right: 0%;
	bottom:0%;
	background: url('images/corner4.png') no-repeat bottom right; }

	
/* /////////////////////////// PAGINA SPECIFIEK \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
	
/* kolommen voor contact-pagina =====================================*/
.links {
	float: left; }

.rechts {
	float: right;
	width: 50%; }

.linkssmal {
	float: left;
	width: 3em; }

/* schaalbare foto's =====================================================*/
img.div_wide {
	clear: both;
	width:90%;
	max-width: 700px;
	margin-left: 2%;
	margin-top: 0.2em;
	margin-bottom: 1em;
	border:0; }

/* tabellen met alle projecten en/of publicaties =====================================================*/
#projectlist ul {
	list-style-type: none;
	text-align: left;
	width:95%;
	padding:0px;
	margin:0px; 
	border: solid #1a3882;
	border-width: 0px 1px 1px;	}

#projectlist li {
	background: #d7deea;
	padding:0px;
	border: solid #1a3882; 
	border-width: 1px 0px 0px;
	border-collapse:collapse }
	
#projectlist li.head {
	background: #1a3882;
	color: #FFF; 
	padding: 0.2em 0.4em;
	font-weight: bold; }
	
#projectlist li a {
	display: block;	
	padding: 0.2em 0.4em;	}

#projectlist li a:hover {
	background: #9baecc;
	color: #111; }

#projectlist ul ul {
	position: absolute;
	margin-top: 0.5em;
	left:7%;
	width: 52%;
	display:none;
	font-size: 90%;
	font-weight: bold;
	line-height: 1.1em;
	border: 1px solid #1a3882;
}

#projectlist li:hover > ul {
   display:block;
}

#projectlist ul li li {
	border:none;
	padding-left: 1em;
	padding-right: 0.2em;
	background: #9baecc;
}

/* tabel met per publicatie nadere info =====================================================*/
table.publication {
	min-width:70%;
	background: #EEE;
	font-weight: bold;
	color: #1a3882;
}

table.publication td {
	border-bottom: 1px dotted #CCC; }
	
table.publication td.kolom1{
	width: 11em;
	color: #000; }
	
/* lijst voor sitemap =====================================================*/
#sitemap {
	padding-left: 2%; }

#sitemap ul{
	padding-top: 0.5em;
	padding-bottom: 1em; }

#sitemap li{
	padding-left: 1.5em;
	background: url('images/sitemap_bullet.gif') left 0em no-repeat;}

#sitemap li.main {
	padding-left: 0em;
	margin-left: 0em;
	background: none;}

	
/* styles voor formulier =====================================================*/

#formulier{
background: #9baecc;
border: 1px solid #1a3882;
padding:10px;}

#formulier label{
float:left;
width: 35%;
font-weight: bold;
min-width: 160px;}

#formulier input, #formulier textarea{
border: 1px solid #1a3882;
font-family: "trebuchet ms", sans-serif;
font-size: 10pt;}

#formulier input, #formulier textarea, #formulier label{
margin-bottom: 4px;
margin-top: 4px;}

#formulier input.text{
width: 63%;}

#formulier input.submit{
width: 100px;
cursor: pointer;}

#formulier textarea.mssg{
width: 98%;
height: 80px;}

#formulier textarea.adres{
width: 63%;
height: 36px;}

#formulier label.leeg{
color: #CE2029;}

p.warning{
color: #CE2029;
font-weight: bold;}


/*styles voor Google 404 error pagina =====================================================*/

#Google404 {
	margin-top:30px;
	line-height: 130%;}
	
#Google404 li, #Google404 ul{
	margin: 10px 0px;}

/*styles voor Googlemaps =====================================================*/
#formulier{
background: #9baecc;
border: 1px solid #1a3882;
padding:10px;}

#formulier label{
float:left;
clear:left;
width: 35%;
font-weight: bold;
min-width: 160px;}

#formulier input, #formulier textarea{
border: 1px solid #1a3882;
font-family: "trebuchet ms", sans-serif;
font-size: 10pt;}

#formulier input, #formulier textarea, #formulier label{
margin-bottom: 4px;
margin-top: 4px;}

#formulier input.text{
width: 63%;}

#formulier input.submit{
width: 100px;
cursor: pointer;}

#formulier textarea.mssg{
width: 98%;
height: 80px;}

#formulier textarea.adres{
width: 63%;
height: 36px;}

#formulier label.leeg{
color: #CE2029;}

p.warning{
color: #CE2029;
font-weight: bold;}


/*styles voor Google 404 error pagina =====================================================*/

#Google404 {
	margin-top:30px;
	line-height: 130%;}
	
#Google404 li, #Google404 ul{
	margin: 10px 0px;}

/*styles voor Googlemaps =====================================================*/
#mapwrap{
	background: #FFF;
	padding: 3%;
	margin: auto;
	float:left;
	width:94%;
	height:100%;
	}

#map{
	float:left;
	width: 69%;
	height: 550px;
	border: 1px solid #000;
	}

#the_side_bar{
	float:right;
	width: 30%;
	height: 350px;
	background: #EEE;
	clear: none;
	border: 1px solid #000;
	overflow-y: scroll; }

#the_side_bar.no_overview{
	height: 450px;}
	
#the_side_bar  ul { 
	margin-left:4px; 
	padding:0px; }

#the_side_bar  li { 
	list-style: none;
	margin:0px; } 
	/* Control how "sided out" the tree is */
#the_side_bar ul  ul , #the_side_bar  ul li { 
	padding: 0px;
	margin: 0px;
	padding-left:50px; 
	text-indent: -42px; } 
	/* Format menu items differently depending on what level of the tree they are in */
#the_side_bar ul li { 
	font-size:  11px;
	line-height:16px;}
#the_side_bar ul li  a{
	line-height:16px;
	font-weight: 300;}
#the_side_bar  ul li ul li { 
	font-size: 10px; }

#mapwrap h3{
	margin-left: 1.3em;}	
	
#overzichten{
	float:right;
	line-height: 110%;
	width: 30%;
	margin-top: 10px;
	padding: 4px 0;
	height: 80px;
	background: #EEE;
	font-size: 9pt;
	border: 1px solid #000;}

#overzichten ul  {
	list-style-type: none;
	line-height: 24px;
	padding-left:1.4em;}

#overzichten li {
	background: url('images/bullet2.png') left 0.45em no-repeat;
	padding-left: 1.4em; 
}
	
#legenda{
	float:right;
	line-height: 110%;
	width: 30%;
	margin-top: 10px;
	padding: 4px 0;
	height: 80px;
	background: #EEE;
	font-size: 9pt;
	border: 1px solid #000;}
	
#legend1, #legend2{
	float:left;
	margin-right: 4px;
	margin-left: 1.3em;
	width: 14px; 
	height: 14px; 
	border: 2px solid #000; 
	background-color: rgb(167, 104, 65);}

#legend2{
	clear:left;
	background-color: rgb(26, 56, 130);}

#maplinks{
	float:left;
	clear:left;
	width: 69%;}

#maplinks  a.left{
	float:left;}
	
#maplinks a.right{
	float:right;}
	

/* Blocking div en tekst =====================================================*/
#Blocked{
	position: absolute;
	z-index: 2;
	width:54%;
	height:500px;
	background: #FFF;
	/* for IE */
	filter:alpha(opacity=70);
	/* CSS3 standard */
	opacity:0.7;
	}
	
#Blockedtext{
	position: absolute;
	margin-top: 140px;
	width:54%;
	z-index: 3;}

p.blocked {
	color: #CE2029;
	font-size: 24pt;
	line-height: 24pt;
	text-align: center;
	font-weight: bold;
	margin: 2%;}

#borders{
	border: 2px solid #1a3882 ;
	padding: 4px;
	margin: 4px;
	font-weight: bold;
	text-align: center;
	background: #f5e0e0 ;
	}