/* 
DHV architects 
www.dhvarchitects.com
architects@dhv.com
*/

/* Basis Stijlelementen */
	
html{ overflow-y : scroll; }
	
body {
	margin: 0;
	padding: 0;
	text-align: center;
	background-color: #fff;
	font-family: Arial, Helvetica, SansSerif;
}

hr {
	display: none;
}

span.line {
	position: relative;
	float:left;
	width: 940px;
	height: 1px;
	border-bottom: 1px solid #BBB;
}

#wrapper {
	margin: 0 auto;
	padding: 0;
	text-align: left;
	width: 940px;
}


/* Header met logo en menu */

#header {
	position: relative;
	float: left;
	width: 630px;
	height: 85px;
	border-bottom: 1px solid #BBB;
	background: url(../images/dhva_logo.gif) no-repeat #FFFFFF;
	margin: 0;
	padding: 0 0 0 310px;
}

#menu {
	position: relative;
	float: left;
	width: 179px;
	margin: 8px 0 0 0;
	padding: 0;
}

#menu li, 
#submenu li, 
#submenu2 li {
	list-style-type: none;
	font-size: 13px;
	text-transform: lowercase;
}

#menu a {
	display: block;
	width: 140px;
	height: 17px;
	text-decoration: none;
	color: #000;
}

#menu a.current {
	color: #3399cc;
}

#menu a:hover, 
#submenu a:hover, 
#submenu2 a:hover {
	color: #3399cc;
}

#submenu, 
#submenu2 {
	position: relative;
	float: left;
	width: 179px;
	margin: 8px 0 0 0;
	padding: 0;
}

#submenu a , 
#submenu2 a{
	display: block;
	width: 140px;
	height: 17px;
	text-decoration: none;
	color: #999;
}

#submenu a.current, 
#submenu2 a.current {
	color: #3399cc;
}


/* Projectenmatrix */

#matrix {
	position: relative;
	float: left;
	width: 940px;
	height: 364px;
	margin:0;
	padding:0;
	list-style-type: none;
}

#matrix h3 {
	font-size: 13px;
	margin: 0;
	padding: 0;
	height: 35px;
}

#matrix h3.category {
	font-size: 22px;
	font-weight: normal;
	margin: 0;
	letter-spacing: 0px;
	height: 40px;
	text-transform: lowercase;
	background: url(../images/arrow.gif) no-repeat 207px 9px;
}

#matrix h4 {
	display: none;
	font-size: 11px;
	margin: 0;
	color: #AAA;
	padding: 0;
	height: 20px;
}

#matrix a:link, 
#matrix a:visited {
	text-decoration: none;
	font-weight: bold;
	color: #444;
}

#matrix a:hover {
	color: #3399cc;
}

#matrix a.category-link:link, 
#matrix a.category-link:visited {
	text-decoration: none;
	font-weight: normal;
	color: #3399cc;
}

#matrix a.category-link:hover {
	color: #707070;
}
		
#matrix .cell-left, 
#matrix .cell {
	position: relative;
	float: left;
	border-bottom: 1px solid #BBB;
	border-right: 1px solid #EEE;
	height: 181px;
	margin:0;
	padding:0;
}

#matrix .cell {
	width: 241px;
	height: 181px;
}

#matrix .cell-left {
	width: 227px;
	height: 181px;
}

#matrix .cell-right {
	position: relative;
	float: left;
	border-bottom: 1px solid #BBB;
	height: 181px;
	width: 228px;
	margin:0;
	padding:0;
}

#matrix .cell-left h3, 
#matrix .cell h3, 
#matrix .cell-right h3 {
	margin-top: 18px;
}

#matrix .cell-left h3.category,
#matrix .cell h3.category,
#matrix .cell-right h3.category {
	margin-top: 13px;
}

#matrix .cell h3, 
#matrix .cell-right h3, 
#matrix .cell h4, 
#matrix .cell-right h4,
#matrix .cell img,
#matrix .cell-right img {
	margin-left: 13px;
}

#matrix img {
	border: none;
}

/* Zijbalk voor het project en overige pagina's */

#left-photo {
	position: relative;
	float: left;
	width: 310px;
	height: 408px;
	padding: 0;
	margin: 0;
	border-bottom: 1px solid #BBB;
}

#left-photo a:link, 
#about a:visited {
	color: #3399cc;
	text-decoration: none;
}

#left-photo a:hover {
	text-decoration: underline;
}

#left-photo a.googleearth {
	background: url(../images/external_link.gif) no-repeat 20px 1px;
	display: block;
	width: 35px;
}

#left-photo p.contact{
	position: relative;
	float:left;
	width: 290px;
	border-top: 1px solid #BBB;
	color: #666;
	line-height: 23px;
	margin: 88px 0 0 0;
	padding: 11px 0 0 0;
	font-size: 12px;
}

span.project-title {
	position: relative;
	float: left;
	width: 310px;
	margin: 0;
	padding: 0;
	height: 180px;
}

h2 {
	position: relative;
	float: left;
	width: 290px;
	margin: 0;
}

h2.title {
	padding: 15px 0 0 0;
	font-weight: normal;
	font-size: 26px;
	color: #3399cc;
}

h2.newsdate {
	padding: 18px 0 0 0;
	font-weight: normal;
	font-size: 18px;
	color: #BBB;
	}

h3.text{
	position: relative;
	float: right;
	width: 630px;
	font-size: 12px;
	margin: 0;
	padding: 10px 0 6px 0;
	color: #000;
}

h3.header{
	position: relative;
	float: right;
	width: 630px;
	font-size: 12px;
	margin: 0;
	padding: 6px 0 6px 0;

}

h4.subtitle {
	float:left;
	position:relative;
	margin: 3px 0 0 0;
	padding: 0;
	font-weight: normal;
	color: #666;
	font-size: 13px;
	width: 290px;
}

ul.thumbs {
	position: relative;
	float:left;
	padding: 0;
	margin: 0;
	height:88px;
	list-style-type: none;
	overflow: hidden;
	width: 290px;
	border-bottom: 1px solid #BBB;
}

img.themes {
	position: relative;
	float: left;
	margin: 70px 0 0 -290px;
	padding: 0;
}

/* Tabel met projectgegevens */

#stats {
	position: relative;
	float: left;
	width: 290px;
	padding: 0;
	margin: 6px 0 0 0;
}

#stats caption {
	display: none;
}

#stats th {
	text-align: left;
	text-transform: lowercase;
	font-weight: normal;
	font-size: 11px;
	color: #7f7f7f;
	height: 22px;
	padding: 0 7px 0 0;
}

#stats td {
	font-size: 11px;
	color: #000;
	width: 190px;
}


/* Hoofdfoto van het project */

#photo {
	position: relative;
	float: right;
	width: 630px;
	height: 378px;
	padding: 15px 0 15px 0;
	margin:0;
	border-bottom: 1px solid #BBB;
}


/* Galleria Code (Slideshow voor projecten) */

.galleria {
	list-style:none;
	width:290px
}

.galleria li {
	display:block;
	width:50px;
	height:30px;
	overflow:hidden;
	float:left;
	margin:0 6px 6px 0
}

.galleria li a {
	display:none
}

.galleria li div {
	position:absolute;
	display:none;
	top:0;
	left:180px
}

.galleria li div img {
	cursor:pointer
}

.galleria li.active div img, 
.galleria li.active div {
	display:block
}

.galleria li img.thumb {
	cursor:pointer;
	top:auto;
	left:auto;
	display:block;
	width:auto;
	height:auto
}

.galleria li .caption {
	display:block;
	padding-top:.5em
}

* html .galleria li div span {
	width:400px
	} /* MSIE bug */

* {
	margin:0;
	padding:0
	}

.caption {
	color:#888;
	position:absolute;
	top:160px;
	left:-307px;
	width:200px;
	font-size:10px;
	}

.gallery {
	width:290px;
	float:left;
	}
	
.gallery li {
	width:50px;
	height:30px;
	border:1px double #eee;
	margin: 0 6px 6px 0;
	background:#eee;
	}
	
.gallery li.hover {
	border-color:#bbb;
	}
	
.gallery li.active {
	border-style:solid;
	border-color:#BBB;
	}
	
.gallery li div {
	left:240px
	}
	
.gallery li div .caption {
	font:italic 0.7em/1.4 georgia,serif;
	}

.nav {
	padding-top:15px;
	clear:both;
	}


/* Hoofdteksten */

#text p.brief {
	position: relative;
	float: right;
	width: 630px;
	padding: 0;
	margin: 16px 0 16px 0;
	font-size: 18px;
	line-height: 27px;
	color: #3399cc;
}

#text p {
	position: relative;
	float: right;
	display:inline;
	width: 410px;
	padding: 0px 0 16px 0px;
	margin: 0 220px 0 0;
	font-size: 14px;
	line-height: 25px;
}

#text p.profile {
	position: relative;
	float: right;
	width: 630px;
	padding: 0;
	margin: 3px 0 16px 0;
	font-size: 26px;
	line-height: 55px;
	color: #bbb;
}

#text img.project {
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
	left: 739px;
}

#text img.news {
	position: relative;
	float: left;
	margin:  64px 0 0 -290px;
	padding: 0px 0 0 0;
	
	
}

#text ul.people {
	list-style-type: none;
	position: relative;
	float: left;
	width: 230px;
	padding: 16px 0 15px 0px;
	margin: 0;
}

#text ul.people li {
	padding: 0;
	margin: 0;
	font-size: 12px;
	line-height: 25px;
	color: #CCC;
}

#text ul.people li a:link, #text ul.people li a:visited {
	font-weight: normal;
	font-size: 12px;
	text-decoration: none;
	color: #666;
}

#text ul.people li a:hover {
	color: #3399cc;
}

/* Nieuwsitems op overzichtspagina's */

#newsitem {
	list-style-type: none;
	position: relative;
	float: right;
	width: 630px;
	padding: 15px 0 15px 0;
	margin: 0;
}

#newsitem li  {
	font-size: 12px;
	line-height: 19px;
	padding: 0;
	color: #CCC;
}

#newsitem li  a:link, 
#newsitem li  a:visited {
	text-decoration: none;
	font-weight: bold;
	color: #999;
	padding: 0 0 0 5px;
}

#newsitem li a:hover {
	text-decoration: underline;
	color: #3399cc;
}


/* Links naar aanvullende projectinfo */

#links {
	list-style-type: none;
	position: relative;
	float: right;
	width: 630px;
	padding: 0 0 15px 12px;
	margin: 0;
}

#links li {
	background: url(../images/arrow.gif) no-repeat 0px 5px;
	padding: 0 0 0 12px;
	margin: 0 0 0 -12px;
	font-size: 12px;
	line-height: 20px;
	color: #999;
}

#links li a:link, 
#links li a:visited {
	font-size: 12px;
	text-decoration: none;
	padding: 0;
	color: #999;
}

#links li a:hover {
	text-decoration: underline;
	color: #3399cc;
	}

	
/* Footer met adres en DHV / disclaimer link  */
	
#footer {
	position: relative;
	float: right;
	width: 630px;
	padding: 0;
	margin: 0;
	border-top: 1px solid #BBB;
	height: 90px;
}

#footer p {
	position: relative;
	font-size: 11px;
	line-height: 17px;
	color: #999;
	padding: 5px 0 0 0;
	margin: 0;
}

#footer p.address {
	float:left;
}

#footer p.disclaimer {
	float:right;
}

#footer a:link, 
#footer a:visited {
	text-decoration: none;
	color: #999;
}

#footer a:hover {
	color: #298ec6;
}



/* Extern Disclaimer venster  */

body.disclaimer {
	background: url(../images/logo_dhv_disclaimer.gif) no-repeat #FFF;
	margin: 0;
	padding: 0;
}

#window p.disclaimer {
	font-size: 11px;
	color: #999;
	line-height: 18px;
	text-align: left;
	margin: 0;
	padding: 80px 10px 0 10px;
}

#window p.icon {
	font-size: 12px;
	color: #999;
	line-height: 20px;
	text-align: left;
	margin: 0;
	padding: 80px 20px 0 10px;
}