/*
 
            idx.css
            
            stijlblad voor index.html
            
            nagedi.nl
 
*/


*
{
	box-sizing:						border-box; 
}


body
{				

	font-family: Verdana, Arial, Geneva,  Helvetica, sans-serif;
	font-size:			100%;	/* 1 em  == 16px */
		
	overflow:		hidden;	/* auto; */	/* overflow-y is nodig voor IE */


    /*background-image: url( 'Afbeeldingen/vNWstr_zw.png' );*/
    background: url( 'Afbeeldingen/Noortwijck.jpg' );			 /*    background: url( 'Afbeeldingen/vNWstr_zw.png' ); */
    /*background: url( 'Afbeeldingen/sfeer/vNWstr02.png' );	*/ /*	  kerstperiode versie. CSS #imgSfeer dan ook activeren */
   
    background-repeat:        no-repeat;
    background-size:          100% 100%;        /*cover;*/
    background-position:      center center;
    background-attachment:    fixed;
   
   
    /* background-color: transparent;*/
}



/*          niet meer in gebruik. Is nu background-image in Body element.
#imgBack
{
  position:		absolute;
  top:							0px;
  left:							0px;
  width:					100%;
  height:					100%;
}
*/

/*          alleeen voor feestdagen  

#imgSfeer
{
  position:		absolute;
  top:							0px;
  left:							0px;
  width:					100%;
  height:					100%;
}
  einde sfeer                     */

  
#dvAl
{
  position: absolute;

	top:				    12%;	/* 3 */
	height:				    75%; 	/*	550px;	*/ /* 480px; */
    width:    				90%;
  
	/* behoud relatieve posities bij veranderende beeld afmetingen */   
	left:					50%;
	/* margin-left:			-500px;*/ 
    margin-left:			-45%;

    /* background-color:  #CDC0B0;  */  /* antiquewhite3 */  /* #CDB79E */ /*bisque3*/
    /*	opacity:						0.86; */	 /* 0.84 of  0.86 is niet verkeerd */
	/*filter:				alpha(opacity=86); */	/* IExplorer 8 en ouder */

	/* DIT levert problemen in FF wanneer ern nog een div is met perspectiev !!!! */
    perspective:   300px;

    /* TEST om GPU te activeren */
    /* transform: translateZ(0); */
}



#dvMnuBlok    /* menu wordt geplaatst in een 3D blok */
{
	position:				    absolute;		

	margin:						0;
	padding:					0;
		
	left:						0;
	height:						100%; /*540px;*/
	width:						20%;

    transform-style:            preserve-3d;
	transform-origin:           25% 0% -30px;		/* x-offset, y-offset en lengte afstand oog <--> z=0 origin */
	transform:		            rotateY( -6deg );	/* was -15 */

	transition:                 all 0.5s ease-out;	/* menu stukkie naar achteren als er op geklikt wordt  */

}


#dvMenu       /* voorkant van het 3d menu blok */
{
    position:               relative;

	height:                 100%;
    left:                   0;
   
    font-size:				0.9em;    /* 1em; */   /* 1 em  == 16px */
	font-weight:			bold;
	text-align:				right;

	background-color:		#8B8378 /* antique white4 */ /* #8B7D6B */ /* variant van Bisque */;

    overflow-y:             auto;   /* hidden; */
    overflow-x:             hidden;
    padding-top: 4px;
}	


#dvMenu > div
{    
   /* width:              100%;*/

    padding-top:		4px;
    padding-right:      12px;
	padding-bottom:	    3px;		/* was 3px */
	margin-bottom:	    4px;		/* was 4px */

    margin-left:	    4px;

	background-color:	rgb( 230, 182, 120 );

}


#dvMnuZij   /* zijkant van menu (als van een deur) */
{
    float:  right;
        
    top:                0;
    height:             100%;
    width:              6%;

    color:              white;
    background-color:	/*brown; */ #76776e;	/* zijkant iets donkerder dan #818378 van front; */

    transform-origin:   left;
    transform:          translateY( -100% ) translateX( 100% ) rotateY( 90deg );
}



/* draai tekst tot verticaal */
#pVert
{
  /*position: absolute;*/
  position: relative;
  margin: 0px;
  padding:  0px;

  left:   0px;
  width:   120px;
  bottom: -95%;

 /*transform-origin: 7%; */
 /* transform:  translateY( 534px ) rotateZ( -90deg ); */
  transform-origin: top left;
  transform:  rotateZ( -90deg );
}

/* opmaak tekst email verwijzing */ 
#aMto
{
	/*position:	relative;*/
	/*display:	block;*/
	right:				10px;
	bottom:		 		0px;
}

/* radio onderin menublok */
/*
#radioPhilips
{

    margin-top:     20px;
    margin-right:   20px;
    width:          70%;

    transition:                     opacity; 
    transition-duration:            4s;
    transition-timing-function:     linear;
        
    visibility:     hidden;
    opacity:   0.01;
}
*/



	
#dvDocORIGINEEL		/* om iFrame in te verpakken i.v.m. afwijkingen diverse browsers */
{
	position:		absolute;
 transform-style:	flat; 

	right:					4px;
	top:					15%; /*60px;*/
	/* width:				740px; */
  width:				73%;	/*70%;*/
	height:				80%;  /* 500px; */
  
  
	/*	background-color:		beige; */
/*background-color:	 SeaShell;*/
/*background-color:	 transparent;*/

}
	
#ifrDoc             /* in plaats van dvDoc, dvDoc is vervallen */
{
	position:		absolute;
 /*transform-style:	flat; */

	right:					4px;
	top:					15%; /*60px;*/
    width:				    73%; 	/*70%;*/
	height:				    80%;  /* 500px; */

    /*background-color:	 SeaShell;*/
    /*background-color:	 transparent;*/
}

	
#ifrDocORIGINEEL
{
	/*position:	relative;*/
	/*overflow-y:			auto;*/
		
	/* list - CSS 3 trek padding en margin calculatie gelijk Firefox en IE */
	/*box-sizing:				border-box;*/

    padding:	0px;
	margin:		0px;	

	width:		90%;        /*70%;*/
	height:		100%;
   /* background-color:	 green; */    /*transparent;*/ 
}



/* laag voor vertonen op afroep */
/*
#imgVaag
{
	position:		absolute;

	visibility:	hidden;
	top:					110px;
	height:				434px;
	width:				680px;

	left:					50%;
	margin-left:	-180px;

	opacity:			0.75;
	filter:		alpha( opacity=75 );
}
*/


a
{
	text-decoration:		none;
}


	
/*
A:link    { color: blue; background-color: transparent; }
A:visited { color: blue; background-color: transparent; }
*/
/*A:link    { color: navy; background-color: transparent; }*/
a:link    { color: black; background-color: transparent; }
	
/*A:hover   { color: darkgoldenrod; background-color: transparent; }*/
a:hover   { color: white; background-color: transparent; }
a:active  { color: SeaShell; background-color: transparent; }
a:focus  	{ color: SeaShell; background-color: transparent; }


 
#dvNaam     /* toon Nagedi in rechterboevenhoek. Tijdens kerst periode in spiegelbeeld */
{
	position:			absolute;
		
	top:					20px;
	right:				10px;  /* 20px;*/
	margin: 0;
	font-weight:	bold;

	font-size:		3.75em;		/* 60px; */

	color:			  #8B4513;  /*white;*/
	background:	transparent;
	
	z-index:		-1;
	
	/*transform:  rotateY( 180deg );*/  /* spiegelbeeld tijdens kerstperiode */
}

	
#imgSub
{
    position:		absolute;
    top:						35px;

  	left:						-30%;
  /*	right:						50%; */
  	
	width:					25%;
  	/*height:					100%;*/

    z-index:            -2;
    
    animation-name: ySubr;
    animation-duration: 66s;
    animation-delay:  1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count:  infinite;

	}  


  @keyframes ySubr
  {
     0% { left: -30%; top: 35px; transform: rotate( 3deg )	translate( 0px, 0px ); }
     5%	{ transform: rotateZ( -3deg )	translate( 5px, -5px ); }
    10% { transform: rotateZ( 3deg )	translate( 0px, 0px );  }
    15%	{ transform: rotateZ( -3deg )	translate( 5px, -5px ); }
    20% { transform: rotateZ( 3deg )	translate( 0px, 0px );  }
    25%	{ transform: rotateZ( -3deg )	translate( 5px, -5px ); }
    30% { transform: rotateZ( 3deg )	translate( 0px, 0px );  }
    35%	{ transform: rotateZ( -3deg )	translate( 5px, -5px ); }
    40% { transform: rotateZ( 3deg )	translate( 0px, 0px );  }
    45%	{ transform: rotateZ( -3deg )	translate( 5px, -5px ); }
    50% { transform: rotateZ( 3deg )	translate( 0px, 0px );  }

    50% {  left:  110%; top: 35px; transform: rotateY( 0deg ); }
    51% {  left:  110%; top: 83%; transform: rotateY( 180deg ); }

    55%	{ transform: rotateY( 180deg ) rotateZ( -3deg )	translate( 5px, -5px ); }
   60% { transform: rotateY( 180deg ) rotateZ( 3deg )	translate( 0px, 0px );  }
    65%	{ transform: rotateY( 180deg ) rotateZ( -3deg )	translate( 5px, -5px ); }
    70% { transform: rotateY( 180deg ) rotateZ( 3deg )	translate( 0px, 0px );  }
    75%	{ transform: rotateY( 180deg ) rotateZ( -3deg )	translate( 5px, -5px ); }
    80% { transform: rotateY( 180deg ) rotateZ( 3deg ) 	translate( 0px, 0px )  ;  }

    85%	{ transform: rotateY( 180deg ) rotateZ( -3deg )	translate( 5px, -5px ); }
    90% { transform: rotateY( 180deg ) rotateZ( 3deg )	translate( 0px, 0px );  }
    95%	{ transform: rotateY( 180deg ) rotateZ( -3deg )	translate( 5px, -5px ); }
   100% { transform: rotateY( 180deg ) rotateZ( 3deg )	translate( 0px, 0px );  }

  	100% { top: 83%; left: -30%;  transform: rotateY( 180deg ); }
  }