/*v200717_001*/
/*stylesheet voor Architectuuratelier Jos Bannink*/
/*------------------------------------------www.marioncoenen.nl-----------------------------*/
/*---------------------------------------atelier@marioncoenen.nl-----------------------------*/
/* Remove browser styles (see https://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) */
/* https://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
html {
	background-color: transparent;
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 13px;
	overflow: hidden;
	height:100%	
}
body{
/*	background-color: blue;*//*test style sheet*/
		background-color: rgb(100, 100, 100); /*anthraciet*/		color: rgb(0, 0, 0); 		font-size: 98%; 	height:100%;
	}
.print,.nodisplay,.smart{
	display: none;
}

h3{
	font-size:112%;
	font-weight:bold;
	line-height:125%;
	padding-top:2.6%;
	width: 97%;
	}

p{
	font-size: 112%;
	line-height: 125%;
	padding-top: 1.6%;
	width: 97%;	
}
p, h1,h2,h3,h4,h5,h6,a{
		color: inherit;
		}
a{
	}
a:link {
	}
a:visited{
	}
a:hover{
	}
a, a:link, a:visited, a:hover{

}
/*
------------------------------------------------------basics main, bg transparent, center by default 
*/

#all,#header, #content, #footer {
	}
	


/*------------------------------------------------*midden opzoeken vertical align content*/

* { margin: 0; padding: 0; }
html, body { height: 100%; }
	
#all {
	display: table;
	height: 100%;
	margin: 0 auto;
	margin-left:auto; margin-right:auto;
	width: 100%;
}
#valign{
	display: table-cell;
	padding-left: 1%; padding-right: 1%;
	vertical-align: middle;
}

/*------------------------------------------------end midden opzoeken vertical align content, content needs height*/
#all{
	background-color:transparent; max-width: 1280px;
	}
/*----------------------------------------basics header content footer, center by default */
/*content needs height and width*/
#content{ clear: both; background-color: rgb(204, 204, 204); height: 600px; margin-left:1%;margin-right:1%; /*position: relative;*/ width: 98%; }
#footer {background-color:transparent; color: #ccc; display: inline-block; font-size: 96%; /*height:0;*/ height:auto; line-height: 86%; margin-left:1%;margin-right:1%; margin-top:-1.25%; text-align: right; z-index: 20; width: 98%;/*id als content*/}/*3-10-2014 
	z-index voorkomt dat colofon link in footer bij projecten valt onder slideshow, 
*/

/*color active page link*/
.index #linkindex a,
.project #linkproject a,
.achtergrond #linkachtergrond a, 
.contact #linkcontact a{color: #ccc;} 
.colofon #linkcolofon{ display: none;}

#side{
	background-image: url(../img/bes/logo.png);
	background-color:rgb(154, 154, 154);  /*#999;*/ 
/*	background-color: rgb(104,104, 104); */	color: #fff;
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 47%;
	display: inline-block;
	height: inherit;
	overflow: hidden;
	width: 26%;
	}
#side p, #side h2, #side ul, #side a{
	background-color: transparent;
	display: inline-block;
	margin-left: 1%;
	}
/*----------------------------------------------------------nav_main-------------------projects list*/
#side #nav_main{
	background-color: transparent;
	display: inline-block;
	font-size: 122%;	/*id nav_sec*/
	height: 28%;
	margin-top: 9%;
	width: 98%;
	}
	#nav_main li{	background-color:transparent;	color:inherit; /*line-height: 124%;	*/ height:10%; margin-left: 6%;	list-style: square;	width: 100%;
	}
	#nav_main li:hover{	color: red;}
	#nav_main a{ color: #fff;	display: inline-block; height: 100%; 	text-decoration: none; width: 80%;	}
	#nav_main a:hover{	color: #ccc;}
	#nav_main a:active, #nav_main a.active, #nav_main a.activeLink{color: rgb(80,80,80);	/*donkerder, id als main_txt*/	/*color: #666;*/}

#side #nav_sec{
	background-color: transparent;
	direction: rtl;	
	display: inline-block;
	font-size: 122%;	/*id nav_main*/
	height: 52%;
	margin-top: 0; 
	text-align: right;
	width: 100%;
	}
	#nav_sec li{	background-color: transparent;	color:inherit; /*line-height: 124%;*/	height:6%; margin-right: 7%; /*14-10-2014*/ 	list-style:square;	width: 96%;
	}
	#nav_sec li:hover{	color: red;}
	#nav_sec a{color: #fff;	display: inline-block; height: 100%;	text-decoration: none;	width: inherit;	}
	#nav_sec a:hover{	color: #ccc;}
	#nav_sec a:active, #nav_sec a.active, #nav_sec a.activeLink{ color: #666;}

/*color active projectLink 
*/
 #pj00 #pj00Link, 
 #pj01 #pj01Link, 
 #pj02 #pj02Link, 
 #pj03 #pj03Link, 
 #pj04 #pj04Link, 
 #pj05 #pj05Link, 
 #pj06 #pj06Link, 
 #pj07 #pj07Link, 
 #pj08 #pj08Link, 
 #pj09 #pj09Link, 
 #pj10 #pj10Link, 
 #pj11 #pj11Link, 
 #pj12 #pj12Link, 
 #pj13 #pj13Link, 
 #pj14 #pj14Link, 
 #pj15 #pj15Link, 
 #pj16 #pj16Link, 
 #pj17 #pj17Link, 
 #pj18 #pj18Link, 
 #pj19 #pj19Link, 
 #pj20 #pj20Link, 
 #pj21 #pj21Link, 
 #pj22 #pj22Link, 
 #pj23 #pj23Link, 
 #pj24 #pj24Link, 
 #pj25 #pj25Link, 
 #pj26 #pj26Link, 
 #pj27 #pj27Link, 
 #pj28 #pj28Link, 
 #pj29 #pj29Link, 
 #pj30 #pj30Link, 
 #pj31 #pj31Link, 
 #pj32 #pj32Link, 
 #pj33 #pj33Link, 
 #pj34 #pj34Link, 
 #pj35 #pj35Link  { color: rgb(80,80,80);	/*donkerder, id als main_txt*/} 

/*30-9-2014
	nav main active link
*/
#ind #li_ind,
#vis #li_vis,
#con #li_con
{ color: rgb(80,80,80);	/*donkerder, id als main_txt*/	} 

/*19-5-2014 NAW  met logo  links onder in sidebar in combinatie met naw 
*/
#logo{display: none;} 
#naw{
	background-color:transparent;
	display: inline-block;
	margin-top: 0;
	height: 20%;
	width:100%;
	}
	#naw h2.naw, #naw p.naw{
		background-color:transparent;
		display: inline-block;
		text-align: right; 
		width: 97%;
		}
	#naw h2.naw{
		font-size: 108%; font-weight: 300; letter-spacing: 0.03em;   }
	#naw p.naw{
		font-size: 98%;		padding-top: 4%; }	
	#naw a{ text-decoration: none;}		

/*--------------------------------------------------------main index page project---------*/
/*#main { margin: -450px auto auto 25%; position: relative; width: auto;
	}
*/
#main { 			background-position: center center;
					background-repeat: no-repeat;
					background-color: transparent; 
					/*color: #fff;*/	
					/*color: rgb(100, 100, 100);*/	/*anthraciet*/	
					color: rgb(80,80,80);	/*donkerder*/	
					margin-top:-600px;  /*margin-top rel aan height content */
					margin-left:26%;		/*put main content in place*/			
					height: inherit; position: relative; width: 74%;
	}
/*-------------------------------------------------------------------------------main bg img*/
#main.index{		background-image:url(../img/bes/bg_main_index.png); /*rode cirkel*/
	}  	 	
#main.page{		background-image:url(../img/bes/bg_main_page.png); /* grijze cirkel*/;
	}
#main.project{		background-image:url(../img/bes/bg_main_project.png); /* ??  grijze cirkel*/
	}
#main.page, #main.index, #main.project	{background-color: transparent;}

#main .colofon{background-color: transparent;  font-size: 90%; }
#main .colofon h3{}
#main .colofon p{}

#main .contact p{ background-color: transparent; margin-bottom:2%; }
/*#main.page .contact img{display: inline-block; float: right;  padding: 0; vertical-align: text-top; width: 30%; }*/
#main.page .contact{
	background-image: url(../img/bes/bg_contact.jpg); background-color: transparent; background-position: 100% 75%; background-repeat:no-repeat; background-size:43%;
	display: inline-block;  height: 95%; width: 97%;} 

#main h2.project_title, #main h2.page_title{
	background-color: transparent;
/*	color: #fff;*/ color: inherit;
	display: inline-block;
	font-size: 130%; font-weight: 300;
	letter-spacing: 0.4em;
	margin: 2% 3% auto auto;
	text-align: right;
	width: 97%; /*match slideshow?*/
	}
#main h3,#main p{ margin-left: 2%; width: 94%; }

/*10-2-2017 additional tekst, link in project page*/
#main.project p{background-color: transparent; color: inherit; margin:-1.5% 3.5% auto auto; text-align: right; width: 90%;}/*---? nog aan werken of kan achterwege blijven*/

/*200716 txt info project*/
#main.project table{
	align-content: right; 
	background-color: transparent; color: inherit; background-color: transparent; font: inherit; 
/*	margin:-3.5% 3.5% auto auto;	*/
/*	margin:-8.8% 3.4% auto auto;	*/
/*	margin:-8.8% 3.4% auto auto;*/	
	width:96.8%;
}
#main.project table thead{
}
#main.project table tr{
		background-color: transparent;
}
#main.project table td{
	background-color: transparent;
	text-align: right; 
	width: 30%;
}
/*end 200716 txt info project*/


/*20-10-2014 img ill bij txt*/ /*NB nog opnieuw uitwerken*/
#main.page .txt { background-color:transparent; display: inline-block; width: 97%; /*id h2, div contact*/ }
#main.page .txt p{ width: 97%; }
#main.page .txt img{border-width: 0; display: inline-block; float: right; padding:0 0 2px 5px; margin-right:0; /*vertical-align:text-top;*/ width: 30%; }

/*2-12-2014
		project div movie class movie 
*/
#movie{
	background-image: url(../img/studie/06/wekerom.png); background-color: transparent; background-position: 100% 0%; background-repeat:no-repeat; background-size:40%;
	display: inline-block;
	margin-top: 0;
	margin-left:auto;
	margin-right:3%;	
	height: 390px;	
	overflow: hidden;
	width: 97%;
	}
	#movie object.mmovie{
		background-color: transparent;
		display: inline-block;
		float: right;		
		height:390px;
		margin-top: 0;				
		margin-bottom: auto;
		margin-left: auto;
		margin-right: 0;
		width:569px;
		}
	#movie object.wmovie{
		background-color: transparent;
		display: inline-block;
		float: right;		
		height:390px;
		margin-top: 0;				
		margin-bottom: auto;
		margin-left: auto;
		margin-right: 0;
		width:520px;
		}
	#movie object.fmovie{
		background-color:transparent;
		display: inline-block;
		float: right;		
		height:390px;
		margin-top: 0;				
		margin-bottom: auto;
		margin-left: auto;
		margin-right: 0;
		width:610px;
		}
	#movie .movie{
		background-color:transparent;
		display: inline-block;
		float: right;		
		height:355px;
		margin-top: 0;				
		margin-bottom: auto;
		margin-left: auto;
		margin-right: 0;
		width:576px;
		}

		#movie p{
		display: inline-block;
/*		margin-top:100px; */
		width: 100%;
		}
		#movie img.movie{ display: inline-block;}	
	
	/*nv_mv // mnav ss*/
	#nav_mv{
	background-color: transparent;
	cursor: pointer;
	display: inline-block;
	margin-left: 3.5%; margin-right: 2.5%;
	margin-top: 0;
	overflow: hidden;	
	position: relative;
	max-width: 40px; /*10-10-2014nav_ss in één kolom*/
	width: 10%; 
	z-index: 100;
	position: absolute;
	width: 100%;
	z-index: 100;
	}
#nav_mv li {	background-color: yellow; display: inline; height: 32px; width: 32px; float: left; margin-left: 2px; margin-right: 2px;margin-bottom: 4px; margin-top:0; list-style: none; z-index: 110;}
#nav_mv a {  display: inline-block; text-indent: 0; height: 32px; width: 32px; }
#nav_mv a{background-color: transparent; background-position:center center;background-repeat:no-repeat; background-size:100%; }
#nav_mv #li_wk{ background-image:url(../img/studie/06/wekerom.png);}

/**/


/*-------------------------------------------------------------------- index page table images*/
table.index{	background-color: transparent; margin-top:2.5%; margin-left: 12.5%; margin-right: 12.5%; width:75%;}
table.index td{ background-color: transparent; width: 20%;	 }
table.index img{ margin: 4%; width: 90%; }