@media screen, projection
{

	/* the overlayed element */
	div.overlay {
		
		/* growing background image */
		background-image: url('./img/white.png');
		
		/* dimensions after the growing animation finishes  */
		width: 450px;
		height: 400px;		
		
		/* initially overlay is hidden */
		display: none;
		
		/* some padding to layout nested elements nicely  */
		padding: 55px;
		
		text-align:left;
	}
	
	/* default close button positioned on upper right corner */
	div.close {
		background-image: url('./img/close.png');
		position: absolute;
		right: 5px;
		top: 5px;
		cursor: pointer;
		height: 35px;
		width: 35px;
		
	}
	div.overlay img { padding: 1px; background: #fff; border: 1px solid #006A4D;} 
	
	/* the difference animation */
	div.overlay.difference {
		
		background: transparent;
		
		/* dimensions after the growing animation finishes  */
		width: 850px;
		height: 450px;		
		
		/* initially overlay is hidden */
		display: none;
		
		/* some padding to layout nested elements nicely  */
		padding: 10px;
		
		text-align:left;
		color: #000;
		
		z-index: 10;
	}
	
	* html div.overlay.difference { background: transparent url('./img/transparent.gif') no-repeat !important; }

}