?/* 
** LIGHTBOX classes for the index of screen shots
** Not quite a lightbox as in the end we've gone for a completely opaque overlay. 
*/

/*
** lb-album  
** style for the overall <ul>
*/

.lb-album
{
	width: 				656px;
    max-width:          98%;
	margin-left: 		auto;
	margin-right: 		auto;
	margin-top: 		0;
	margin-bottom: 		0;
	padding:        	0;
	font-family: 		'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	list-style-type:	none;
	list-style-image:	none;
}

/*
** lb-album li 
** style for the <li> within the overall <ul>
*/

.lb-album li
{
	float: 				left;
	margin: 			2px;
	position: 			relative;
	background-image: 	none;
	list-style-type:	none;
   	list-style-image:	none;
}

/*
** The whole of the <li> will be a block <a>
*/

.lb-album li > a
{
	display:			block;
	width: 				140px;
	height: 			120px;
	position: 			relative; 
	padding: 			10px;
	text-align: 		center;
	text-decoration:	none;
	background-color:	#A3CEFF;	/* Lightish blue = rgb(163,206,255) */
	box-shadow:         1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
}

/*
** Put a shadow on the images:
*/

.lb-album li > a img
{
	border:				none;
/*	-webkit-box-shadow: 5px 5px 5px  #488080;
	-moz-box-shadow: 	5px 5px 5px  #488080;
*/ 
	box-shadow: 		5px 5px 5px  #488080;
}

/*
** The <span> within the <a>
** is defined to be the same size as the <a> area, with a line height covering 
** the full height of the <a> so that its text is centred vertically (as well 
** as horizontally).
*/

.lb-album li > a > div > span
{
	position: 			absolute;
	width: 				100%;			/* same size as li > a */ 
	height: 			100%;			/* same size as li > a */
	top: 				0px;
	left: 				0px;
	
	text-align: 		center;
	line-height: 		120px;			/* same as height */
	color: 				rgba(27,54,81,0.8);
	text-shadow: 		0px 1px 1px rgba(255,255,255,0.6);
	font-size: 			20px;
	font-weight:		200;

	opacity: 			0;
	filter: 			opacity(0%); /* DMW update */

	background: rgb(163,206,255);

	transition: opacity 0.3s;
}

/*
** Define the <div> within the <a>
** This will hold the thumb-nail, and the caption will be beneath this div.
*/

.lb-album li > a > div
{
	width:	 100%;
	height:  100px;
}
	
/*
** Define the <p> within the <a>
** This will hold the caption.
*/

.lb-album li > a  p
{
	color:				#11444F;
	font-size:			8pt; 		
	text-decoration:	none;
	padding-top:		5px;
	text-align:         center;
	/* Don't want to inherit a shadow */
	text-shadow:		none;
}

/*
** When the mouse hovers over the <a>
** don't show the image shadow.
*/

.lb-album li > a:hover img
{
	box-shadow: none;	
}
	

/*
** When the mouse hovers over the <a>
** make the <span> show over the top of it by sending its opacity to 1.
*/

.lb-album li > a:hover span
{
	opacity: 	1;
	filter: 	opacity(99%); /* DMW update */
}

/*
** lb-overlay is for fading the screen and showing the full sized image.
** It is defined with zero size and fixed, but covers the whole screen when it appears.
** It appears because it is the targert href of the <a> in the button.
*/

.lb-overlay
{
	width: 		0px;
	height:	 	0px;
	position: 	fixed; 
	overflow: 	hidden; 				/* Stops content showing when size is zero!  */
	left: 		0px;
	top: 		0px;
	padding: 	0px;
	z-index: 	99;						/* Large enough to go on top of everything! */
	text-align: center;
	/* Define background and radial gradient: */
	background: rgb(163,206,255);
}

/*
** The <div> within the lb-ovelay holds the caption.
*/

.lb-overlay > div
{
	position: 			relative;
	color: 				rgba(27,54,81,0.8);
	/* This starts out completely transparent */
	opacity: 			0;
	filter: 		    opacity(0%); /* DMW update */

/*    -ms-filter:			"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; */ /*IE8*/
/*
	width: 				800px;
*/
	width:				80%;
	height:				300px;
	margin: 			2px auto 0px auto;	/* Centred horizontally */
	text-shadow: 		0px 1px 1px rgba(255,255,255,0.6);
	/* Transition to opaque over 1.3 seconds */
/*
	-webkit-transition: opacity 0.3s linear 1.3s;
	-moz-transition: 	opacity 0.3s linear 1.3s;
	-o-transition: 		opacity 0.3s linear 1.3s;
	-ms-transition: 	opacity 0.3s linear 1.3s;
*/
	transition: 		opacity 0.3s linear 1.3s;
}

.rgn-text   .lb-overlay div h3,
#regiontext .lb-overlay div h3
{
	display:		block;
	width: 			60%;
	margin-top:		0;
	margin-right:	10px;
	padding: 		0px 20px;
	font-size: 		36px;
	text-shadow: 	1px 1px 1px rgba(255,255,255,0.6);
	text-align: 	left;
}


.lb-overlay div p
{
	font-size: 		16px;
	text-align: 	left;
	font-family: 	Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
	font-style: 	italic;
	margin-top:		5px;
	padding-left:   20px;
	width:			60%;
}

/*
** The lb_close div provides the biutton for getting out.
*/

.lb-overlay a.lb-close
{
	background-color:	rgba(255,16,16,0.8);
	z-index: 			1001;
	color: 				#fff;
	position: 			absolute;
	top: 				5px;
	left: 				5px;
	font-size: 			15px;
	line-height: 		21px;
	text-align: 		center;
	text-decoration:	none;
	width: 				70px;
	height: 			21px;
	padding-top:		2px;
	border:				1px solid white;
	overflow: 			hidden;
	margin-left:	    300px;
	opacity: 			0;
	filter: 			opacity(0%); /* DMW update */
	box-shadow: 		0px 1px 2px rgba(0,0,0,0.3);
	transition: 		opacity 0.3s linear 1.2s;
}

/*
** Style the main <img> appearing within the overlay:
*/


.lb-overlay img,
.lb-overlay a > img
{
	margin-top:			0px;
	margin-bottom:		0px;
	margin-left:		auto;
	margin-right:		auto;
	padding: 			0px;	

	box-shadow: 		0px 2px 7px rgba(0,0,0,0.2);

	opacity:            0;

	transition: 		opacity 2s ease-in-out;

}




/*
** :target is a new CSS3 syntax for styling the element when it is the target 
**         of an a href going to an id
*/

.lb-overlay:target 
{
	width: 		auto;						/* whole browser window */
	height: 	auto;						/* whole browser window */
	bottom: 	0px;						/* whole browser window */
	right: 		0px;						/* whole browser window */
	padding: 	20px 10px 120px 10px;
}

/*
** Make the image in to completely opaque
** after it is faded in:
*/

.lb-overlay:target > img, 
.lb-overlay:target > a > img 
{
	opacity: 	1;
	filter: 	opacity(99%); /* DMW update */
}


/*
** Close button and div are 100% opaque when the overlay is targeted:
*/

.lb-overlay:target a.lb-close,
.lb-overlay:target > div
{
	opacity: 	1;
	filter: 	opacity(99%); /* DMW update */
}

/*---------------------------------------------------------------------------*/
/* Resposiveness															 */	
/*---------------------------------------------------------------------------*/

@media all and (max-width: 699px) 
{
	.lb-album { width:492px; max-width:95%; }
}


/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/