/* CSS Document Irene van Peer*/
body  {
	font:11px Verdana, Arial, Helvetica, sans-serif;
	background-color:#ffffff;
	margin: 0; 
	padding: 0;
	text-align: center;
	color: #fff;
}
#wrapper{
	position:relative;
	width:923px;
	height:708px;
	margin-top:0px;
	margin-right:auto;
	margin-left:auto;
	text-align: left;
}
#bg-left{background-image:url(../images/bg-left.gif);
	width:54px;
	height:708px;
	float:left;
	position:relative;
}
#container { 
	position:absolute;
	width:823px;
	height:708px;
	background-color:#64645f;
	/*background-image: url(../images/bg-vervolg.gif);*/
	top:0px;
	left:54px;
	}
body#home #container,
body#links #container,
body#contact #container{ 
	position:absolute;
	width:823px;
	height:708px;
	background-image: url(../images/bg-home.gif);
	top:0px;
	left:54px;
	}
body#about #container,
body#aboutme #container,
body#design #container,
body#teaching #container,
body#background #container,
body#news #container
 { 
	position:absolute;
	width:823px;
	height:708px;
	background-color:#64645f;
	background-image: url(../images/bg-vervolg.gif);
	top:0px;
	left:54px;
	}	
#bg-right{background-image:url(../images/bg-right.gif);
	width:56px;
	height:708px;
	float:right;
	position:relative;
}
#sidebar1 {
	float: right;
	width: 190px; 
	padding: 0px 0px;
}
#logo{
	background-image: url(../images/logo.gif);
	width:77px;
	height:109px;
	float:left;
	margin:0px;
}
#menu{
	float:left;
	width:180px;
	font-size:12px;
	line-height:17px;
	margin:10px 10px 10px 5px;
	padding:0px;
}

/********************* opmaak menu*******************************/
#menu ul{
	display:block;
	list-style-type:none;
	padding:0px;
	margin:0px;
}
#menu li{
	font-size:11px;
}
#menu li li{
	font-size:10px;
}
#menu a{
	color:#fff;
	text-decoration:none;
}
#menu li a:link, #menu li a:visited {
	color:#fff;
	text-decoration:none;
}
#menu li a:hover {
	font-weight:bold;
	color:#9e961a;	
}
#menu ul ul{
	padding-left:20px;
	list-style-type:square;
	display:none;
}
/**************** hoofdmenu -active menu-item bold**********************/
body#home #menu a#homenav,
body#aboutme #menu a#aboutmenav,
body#design #menu a#designnav,
body#teaching #menu a#teachingnav,
body#background #menu a#backgroundnav,
body#news #menu a#newsnav,
body#links #menu a#linksnav,
body#contact #menu a#contactnav,
body#projects #menu a#projectsnav,
body#embrasse #menu a#healthemb,
body#dental-cleaner #menu a#healthden,
body#ex-libris #menu a#healthexl,
body#india-bop #menu a#healthind,
body#mahlangu #menu a#healthmah,
body#sofos #menu a#healthsof,
body#atag #menu a#wellata,
body#cardboard #menu a#wellcar,
body#kwant #menu a#wellkwa,
body#linca #menu a#welllin,
body#zuidtangent #menu a#wellzui,
body#contour #menu a#workcon,
body#discovery #menu a#workdis,
body#mix #menu a#workmix,
body#norm #menu a#worknor,
body#tens #menu a#workten,
body#topwellbeing #menu a#wellbeingnav,
body#topwork #menu a#worknav,
body#tophealth #menu a#healthnav
{
	font-weight:bold;
	color:#9e961a;
	}
	
body#projects #menu ul ul#projects, 
body#aboutme #menu ul ul#aboutme,
body#design #menu ul ul#aboutme,
body#teaching #menu ul ul#aboutme,
body#background #menu ul ul#aboutme,
body#embrasse #menu ul ul#projects,
body#dental-cleaner #menu ul ul#projects,
body#ex-libris #menu ul ul#projects,
body#india-bop #menu ul ul#projects,
body#mahlangu #menu ul ul#projects,
body#sofos #menu ul ul#projects,
body#atag #menu ul ul#projects,
body#cardboard #menu ul ul#projects,
body#kwant #menu ul ul#projects,
body#linca #menu ul ul#projects,
body#zuidtangent #menu ul ul#projects,
body#contour #menu ul ul#projects,
body#discovery #menu ul ul#projects,
body#mix #menu ul ul#projects,
body#norm #menu ul ul#projects,
body#tens #menu ul ul#projects,
body#topwellbeing #menu ul ul#projects,
body#topwork #menu ul ul#projects,
body#tophealth #menu ul ul#projects
{
	display:block;
	}

body#topwellbeing #menu ul ul#projects ul#wellbeing,
body#topwork #menu ul ul#projects ul#work,
body#tophealth #menu ul ul#projects ul#health
{
	display:block;
	}
	
body#embrasse #menu ul ul#projects ul#health,
body#dental-cleaner #menu ul ul#projects ul#health,
body#ex-libris #menu ul ul#projects ul#health,
body#india-bop #menu ul ul#projects ul#health,
body#mahlangu #menu ul ul#projects ul#health,
body#sofos #menu ul ul#projects ul#health,
body#atag #menu ul ul#projects ul#wellbeing,
body#cardboard #menu ul ul#projects ul#wellbeing,
body#kwant #menu ul ul#projects ul#wellbeing,
body#linca #menu ul ul#projects ul#wellbeing,
body#zuidtangent #menu ul ul#projects ul#wellbeing,
body#contour #menu ul ul#projects ul#work,
body#discovery #menu ul ul#projects ul#work,
body#mix #menu ul ul#projects ul#work,
body#norm #menu ul ul#projects ul#work,
body#tens #menu ul ul#projects ul#work
{
	display:block;
	}
	

#content { 
	margin: 70px 270px 0 60px; 
	padding: 0;
	height:512px;
	line-height:15px;
}
#content h1{
font-size:22px;
font-weight:100;
line-height:40px;
padding:0px;
margin:0px;
width:400px;
}
#content h2{font-size:12px;
font-weight:bold;
margin-left:150px;
}
#content p{font-size:11px;
           margin-left:140px;
		   margin-right:30px;
		   margin-bottom:6px;
		   margin-top:0px;
}
#content a{font-weight:bold;
color:#9e961a;
text-decoration:none;
}
#content img.news-s{
float:left;
margin-left:60px;
margin-bottom:10px;
clear:left;
}
#content img.news-m{
float:left;
clear:left;
margin-bottom:10px;
}
#home-foto{position:absolute;
left:145px;
top:109px;
}

img.projecten{margin:2px;
border:none;
}	

/************************************* gallery met alleen CSS*******************************/
/***********************http://www.cssplay.co.uk/menu/gallery.html*************************/
#album.a, #album.a:visited {color:#fff;outline:none; -moz-outline-style:none;}
#album {position:relative; width:80px; height:409px; margin:0px 0px 0px 0px; padding:0px;float:right;color:#fff;
}
#album b {font-weight:normal; width:75px; text-align:left; position:absolute; top:430px; left:0; color:#fff; z-index:1;float:left;}

a.gallery, a.gallery:visited {display:inline; text-decoration:none; width:75px; height:75px; float:right; 
margin:1px 1px; position:relative; color:#fff; outline:none; -moz-outline-style:none;
}

a.slide1 {background:url(../images/projecten/mahlangu-s.jpg);}
a.slide2 {background:url(../images/projecten/mahlangu-pos-s.jpg);}
a.slide3 {background:url(../images/projecten/mahlangu1-s.jpg);}
a.slide4 {background:url(../images/projecten//mahlangu-testbl-s.jpg);}
a.slide5 {background: url(../images/projecten/exlibris-mh-s.jpg);}
a.slide6 {background: url(../images/projecten/exibris-s.jpg);}
a.slide7 {background: url(../images/projecten/exlibris-v-s.jpg);}
a.slide8 {background: url(../images/projecten/exlibris-a-s.jpg);}
a.slide9 {background: url(../images/projecten/embrasse-ip-s.jpg);}
a.slide13 {background: url(../images/projecten/gebitsreiniger-s.jpg)}
a.slide17 {background: url(../images/projecten/sofos-t-s.jpg);}
a.slide18 {background: url(../images/projecten/sofos-o-s.jpg);}
a.slide21 {background: url(../images/projecten/India-s.jpg);}
a.slide25 {background: url(../images/projecten/linca-op-s.jpg);}
a.slide26 {background: url(../images/projecten/linca-v-s.jpg);}
a.slide27 {background: url(../images/projecten/linca-z-s.jpg);}
a.slide29 {background: url(../images/projecten/kwant-g-s.jpg);}
a.slide30 {background: url(../images/projecten/kwant-rd-s.jpg);}
a.slide31 {background: url(../images/projecten/kwant-5-s.jpg);}
a.slide33 {background: url(../images/projecten/kartonspeel-kl-s.jpg);}
a.slide34 {background: url(../images/projecten/karton-ozp-s.jpg);}
a.slide35 {background: url(../images/projecten/kartonspeel-r-s.jpg);}
a.slide36 {background: url(../images/projecten/karton-j-s.jpg);}
a.slide37 {background: url(../images/projecten/atagoven_s.jpg);}
a.slide41 {background: url(../images/projecten/Zuidtangent-s.jpg);}
a.slide45 {background: url(../images/projecten/contour-z-s.jpg);}
a.slide46 {background: url(../images/projecten/contour-d-s.jpg);}
a.slide49 {background: url(../images/projecten/tens12-s.jpg);}
a.slide50 {background: url(../images/projecten/tens1-s.jpg);}
a.slide51 {background: url(../images/projecten/tens2-s.jpg);}
a.slide52 {background: url(../images/projecten/tens1-ot-s.jpg);}
a.slide53 {background: url(../images/projecten/normcad-s.jpg);}
a.slide54 {background: url(../images/projecten/norm-stapel-s.jpg);}
a.slide55 {background: url(../images/projecten/normatafel-s.jpg);}
a.slide56 {background: url(../images/projecten/normopkop-s.jpg);}
a.slide57 {background: url(../images/projecten/mix-landsc-s.jpg);}
a.slide58 {background: url(../images/projecten/mixtafel-s.jpg);}
a.slide59 {background: url(../images/projecten/mixtafel-d-s.jpg);}
a.slide60 {background: url(../images/projecten/mixC-s.jpg);}
a.slide61 {background: url(../images/projecten/becton-launcher-s.jpg);}


a.gallery span {visibility:hidden; display:block; position:absolute; width:409px; height:409px; top:0px; left:0px;text-align:left;border:none;
}

a.slide1 span, a.slide5 span, a.slide9 span, a.slide13 span, a.slide17 span, a.slide21 span, a.slide25 span ,
a.slide29 span, a.slide33 span, a.slide37 span, a.slide41 span, a.slide45 span, a.slide49 span, a.slide53 span, 
a.slide57 span, a.slide61 span
{left:-427px; top:-10px;}
a.slide2 span, a.slide6 span, a.slide10 span, a.slide14 span, a.slide18 span, a.slide22 span, a.slide26 span,
a.slide30 span, a.slide34 span, a.slide38 span, a.slide42 span, a.slide46 span, a.slide50 span, a.slide54 span, 
a.slide58 span, a.slide62 span 
{left:-427px; top:-87px;}
a.slide3 span, a.slide7 span, a.slide11 span, a.slide15 span, a.slide19 span, a.slide23 span, a.slide27 span,
a.slide31 span, a.slide35 span, a.slide39 span, a.slide43 span, a.slide47 span, a.slide51 span, a.slide55 span, 
a.slide59 span, a.slide63 span 
{left:-427px; top:-164px;}
a.slide4 span, a.slide8 span, a.slide12 span, a.slide16 span, a.slide20 span, a.slide24 span, a.slide28 span,
a.slide32 span, a.slide36 span, a.slide40 span, a.slide44 span, a.slide48 span, a.slide52 span, a.slide56 span, 
a.slide60 span, a.slide64 span 
{left:-427px; top:-241px;}
a.slide56a span 
{left:-427px; top:-318px;}


a.gallery:hover {white-space:normal; z-index:100;border:none}
a.gallery:hover span {visibility:visible; z-index:100;border:none}
a.gallery:hover span img {margin:10px; position:relative; z-index:100;border:none}
a.gallery:active, a.gallery:focus {z-index:10; border:none}
a.gallery:active span, a.gallery:focus span {visibility:visible; z-index:10; border:none}
a.gallery:active span img, a.gallery:focus span img {position:relative; margin:10px; z-index:10; border:none}

#album h2{margin-left:0px;
}
#album h3{margin-left:0px;
}
#album h1{margin-left:0px;
}

#ondertekst{position:absolute;
top:522px;
width:409px;
} 

/************************* body-id openingsfoto in achtergrond albums**************/

/*************health and care ***** body-id openingsfoto ********************/
body#mahlangu #content
{background-image:url(../images/projecten/mahlangu-l.jpg);
background-position:0 40%;
background-repeat:no-repeat;
}
body#ex-libris #content
{background-image:url(../images/projecten/exlibris-mh-l.jpg);
background-position:0 40%;
background-repeat:no-repeat;
}
body#dental-cleaner #content
{background-image: url(../images/projecten/gebitsreiniger-l.jpg);
background-position:0 40%;
background-repeat:no-repeat;
}
body#embrasse #content
{background-image: url(../images/projecten/embrasse-ip-l.jpg);
background-position:0 40%;
background-repeat:no-repeat;
}
body#sofos #content
{background-image: url(../images/projecten/sofos-berlage-l.jpg);
background-position:0 40%;
background-repeat:no-repeat;
}
body#india-bop #content
{background-image: url(../images/projecten/India-l.jpg);
background-position:0 40%;
background-repeat:no-repeat;
}

/*************wellbeing and  daily live ***** body-id openingsfoto album ********************/
body#linca #content
{background-image: url(../images/projecten/linca-op-l.jpg);
background-position:0 40%;
background-repeat:no-repeat;
}
body#kwant #content
{background-image: url(../images/projecten/kwant-g-l.jpg);
background-position:0 40%;
background-repeat:no-repeat;
}
body#cardboard #content
{background-image: url(../images/projecten/kartonspeel-kl-l.jpg);
background-position:0 40%;
background-repeat:no-repeat;
}
body#atag #content
{background-image: url(../images/projecten/atagoven_l.jpg);
background-position:0 40%;
background-repeat:no-repeat;
}
body#zuidtangent #content
{background-image: url(../images/projecten/Zuidtangent-l.jpg);
background-position:0 40%;
background-repeat:no-repeat;
}
/*************work and education ***** body-id openingsfoto album ********************/
body#contour #content
{background-image: url(../images/projecten/contour-z-l.jpg);
background-position:0 40%;
background-repeat:no-repeat;
}
body#tens #content
{background-image: url(../images/projecten/tens12-l.jpg);
background-position:0 40%;
background-repeat:no-repeat;
}
body#norm #content
{background-image: url(../images/projecten/normcad-l.jpg);
background-position:0 40%;
background-repeat:no-repeat;
}
body#mix #content
{background-image: url(../images/projecten/mix-landsc-l.jpg);
background-position:0 40%;
background-repeat:no-repeat;
}
body#discovery #content
{background-image: url(../images/projecten/becton-launcher-l.jpg);
background-position:0 40%;
background-repeat:no-repeat;
}




/****************************light-box*****************************/
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #000; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
/*************************/
	

 
.fltrt { 
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
#footer{
	height:31px;
	width:100%;
	}

#footerblokje{height:126px;
width:77px;
float:right;
margin-right:110px;
background-color:#fff;
}