/* 
** LIGHTBOX1.CSS
** LIGHTBOX classes for the index of page illustrations.
** Not quite a lightbox as in the end we've gone for a completely opaque overlay. 
*/

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

.lb-album1
{
	width: 				580px;
    max-width:          95%;
	margin: 			10px auto 0px auto;
	padding:        	0;
	font-family: 		'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	list-style-type:	none;
	list-style-image:	none;
    z-index:            0;
}

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

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

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

.lb-album1 li > a
{
	display:			block;
	width: 				120px;
	height: 			160px;
	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-album1 li > a img
{
	border:		none;
	box-shadow: 5px 5px 5px  #488080;
}

/*
** centre text:
*/

.lb-album1 li > a p
{
	text-align: center;
}

/*
** The <div><div> 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-album1 li > a > div > div
{
	position: 			absolute;
	width: 				100%;			/* same size as li > a */ 
	height: 			100%;			/* same size as li > a */
	top: 				0px;
	left: 				0px;
	text-align: 		center;
	color: 				rgba(27,54,81,0.8);
	text-shadow: 		0px 1px 1px rgba(255,255,255,0.6);
	font-size: 			20px;
	font-weight:		200;
	/* Initialise as completely transparent: */
	opacity: 			0;
	filter: 			opacity(0%); /* DMW update */
	/* Background colour matches the <a> - do it in rgb notation */
	background: rgb(163,206,255);
	transition: opacity 0.3s linear;
}

.lb-album1 li > a > div > div > p
{
	margin-top: 50px;
	text-align: center;
}

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

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

.lb-album1 li > a  > p
{
/*	color:				#488080; */
	color:				#2A6A7A;
	font-size:			8pt; 		
	text-decoration:	none;
	padding-top:		5px;
	/* Don't want to inherit a shadow */
	text-shadow:		none;
}

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

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

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

.lb-album1 li > a:hover > div > div
{
	opacity: 	1;
	filter: 	opacity(99%); /* DMW update */
/*    -ms-filter:	"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; */ /*IE8*/
}

/*
** lb-overlay1 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-overlay1
{
	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-overlay1 > 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;
	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-overlay1 div h3,
#regiontext .lb-overlay1 div h3
{
	display:		block;
	width: 			360px;
	height: 		100px;
	margin-top:		0;
	margin-bottom:  600px;
	margin-right:	20px;
	padding: 		0px 20px;
	font-size: 		36px;
	text-shadow: 	1px 1px 1px rgba(255,255,255,0.6);
	float: 			left;
	text-align: 	right;
	border-right: 	1px solid rgba(27,54,81,0.4);
}


.lb-overlay1 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;
}

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

.lb-overlay1 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:	   -35px; */  /* half the width to centre it */
	margin-left:	    300px;
	/* Initially transparent */
	opacity: 			0;
	filter: 			opacity(0%); /* DMW update */
 /*   -ms-filter:			"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; */ /*IE8*/
	/* Shadow */
/*	-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 	0px 1px 2px rgba(0,0,0,0.3);
*/
	box-shadow: 		0px 1px 2px rgba(0,0,0,0.3);
	/* Transition */
/*	-webkit-transition: opacity 0.3s linear 1.2s;
	-moz-transition: 	opacity 0.3s linear 1.2s;
	-o-transition: 		opacity 0.3s linear 1.2s;
	-ms-transition: 	opacity 0.3s linear 1.2s;
*/
	transition: 		opacity 0.3s linear 1.2s;
}

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


.lb-overlay1 img,
.lb-overlay1 a > img
{
	margin-top:			0px;
	margin-bottom:		0px;
	margin-left:		auto;
	margin-right:		auto;
	padding: 			0px;	
/*
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
	-moz-box-shadow: 	1px 1px 4px rgba(0,0,0,0.3);
*/
	box-shadow: 		0px 2px 7px rgba(0,0,0,0.2);

	opacity:            0;
/*	-webkit-transition:	opacity 2s ease-in-out;
	-moz-transition: 	opacity 2s ease-in-out;
	-o-transition: 		opacity 2s ease-in-out;
	-ms-transition: 	opacity 2s ease-in-out;
*/
	transition: 		opacity 2s ease-in-out;

}




/*
** :target is a new CSS3 syntax for styling the element when it is the target 
**         of an href connev]cting to an id on a page>
*/

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

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

.lb-overlay1:target > img, 
.lb-overlay1:target > a > img 
{
	opacity: 	1;
	filter: 	opacity(99%); /* DMW update */
/*    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; */ /*IE8*/
}


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

.lb-overlay1:target a.lb-close,
.lb-overlay1:target > div
{
	opacity: 	1;
	filter: 	opacity(99%); /* DMW update */
 /*   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; */ /*IE8*/
}

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

@media all and (max-width: 699px) 
{
	.lb-album1 { width:435px; }
}


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