/*******************************************************************************
 AccessibilityOz [October 2012]              http://www.accessibilityoz.com.au/
 ------------------------------------------------------------------------------
 JS_C_A10: Create custom dialogs in a device independent way; and
 JS_C_A12: Use progressive enhancement to open custom dialogs on user request
 ------------------------------------------------------------------------------
*******************************************************************************/



/* style the link, thumbnail and prompt 
   so they look a bit like a polaroid photo */
#demo > a
{
	display:inline-block;
	padding:7px;
	
	border:1px solid;
	border-color:#aaa #999 #777 #999;
	border-radius:2px;

	text-decoration:none;
	
	background:#fed;
}
#demo > a > img
{
	border:1px solid #aaa;
	border-radius:1px;
}
#demo > a > span
{
	display:block;
	
	font:normal normal normal 0.85em/1.4 verdana,sans-serif;
	text-align:center;
	
	color:#505050;
}



/* apply fixed positioning to the image lightbox 
   so it's near the top and in the middle of the canvas 
   and so it keeps position when the page scroll 
   nb. since the width is constrained by the pixel-width 
   of the image, the height should be allowed to scale 
   to make room for the caption if text-size is increased */
#lightbox
{
	position:fixed;
	left:50%;
	top:0;
	
	margin:20px 0 0 -238px;
	width:450px;
	padding:12px;
	
	border:2px solid;
	border-color:#888 #777 #555 #777;
	border-radius:5px;
	
	text-align:right;
	
	background:#fed;

	box-shadow:1px 2px 4px 1px rgba(0,0,0,0.25);
}


   
/* then style the image lightbox like a larger version of the thumbnail
   allowing for buttons at the top and a longer caption beneath it */   
#lightbox > button
{
	margin:0 0 5px 5px;
	padding:4px;
	
	font-size:1em;

	color:#234;
}
#lightbox > img
{
	width:450px;
	height:300px;

	border:1px solid #aaa;
	border-radius:2px;
}
#lightbox > em
{
	display:block;
	margin:5px 15px;

	font:normal normal normal 1em/1.5 verdana,sans-serif;
	text-align:center;
	
	color:#444;
}