/**
 * Overlay
 *
 * Defines styles used to create popup boxes ontop of a coloured background
 * overlay.
 *
 */

/* ----------------------------------------------------------------------------
	OVERLAY / POPUP PROPERTIES
---------------------------------------------------------------------------- */

/*
Creates an overlay effect that covers the entire browser window.
*/
#overlay {
	background-color: #003946;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1000;
	zoom: 1;
	filter: alpha(opacity=20);
	-moz-opacity: .20;
	opacity: .20;
}

/*
Disable scrollbars of page content.
*/
html.overlay {
	overflow: hidden;
}
body.overlay {
	overflow: hidden;
	overflow-y: hidden;
}

/*
Default rules for popup box.
*/
div.popup {
	background-color: #fff;
	display: none;
	left: 50%;
	margin-left: -133px;
	padding: 18px 18px 1px 18px;
	position: absolute;
	width: 266px;
	z-index: 1100;
}
	/*
	Graphical header at the top of popup box.
	*/
	div.popup h1 {
		height: 73px !important;
		margin: -18px -18px 24px -18px;
		min-height: 0;
		overflow: hidden;
		padding: 0;
		position: relative;
		text-indent: -5000px;
	}
		/*
		Close button that sits in the header of the popup box.
		*/
		div.popup h1 a {
			height: 19px;
			overflow: hidden;
			position: absolute;
			right: 18px;
			text-decoration: none;
			top: 18px;
		}
			.en h1 a,
			div.popup h1.en a {
				background-image: url(/static/global/images/buttons/btn_close_56w_19h_en.gif);
				width: 56px;
			}
			.fr h1 a,
			div.popup h1.fr a {
				background-image: url(/static/global/images/buttons/btn_close_63w_19h_fr.gif);
				width: 63px;
			}



/* ----------------------------------------------------------------------------
	POPUP: WELCOME MESSAGE
---------------------------------------------------------------------------- */

#welcome-message {
	margin-left: -246px;
	width: 456px;
}
	/*
	Graphical banner and "close" button.
	*/
	#welcome-message h1 {
		width: 492px;
	}
		#welcome-message h1 img {
			display: block;
		}


	/*
	Floating feature box (right-hand side).
	*/
	#welcome-message div.feature {
		display: inline;
		float: right;
		margin-left: 50px;
		width: 193px;
	}

/* ----------------------------------------------------------------------------
	POPUP: WELCOME MESSAGE Registration
---------------------------------------------------------------------------- */


#welcome-message-registration {
	margin-left: -456px;
	margin-top: 20px;
	width: 606px;
	height: 420px;
	overflow: scroll;
}
	/*
	Graphical banner and "close" button.
	*/
	#welcome-message-registration h1 {
		width: 492px;
	}
		#welcome-message-registration h1 img {
			display: block;
		}


	/*
	Floating feature box (right-hand side).
	*/
	#welcome-message-registration div.feature {
		display: inline;
		float: right;
		margin-left: 50px;
		width: 606px;
		height: 420px;
		overflow: scroll;
	}


/* ----------------------------------------------------------------------------
	POPUP: LOG IN FOR COMMENTING

	Note: These rules apply to the non-JavaScript version as well, with a few
	exceptions which are documented below.
---------------------------------------------------------------------------- */

/*
Create the popup container width and horizontal layout.
NOTE: This applies to the popup version only.
*/
#popup-login-for-commenting {
	margin-left: -133px;
	width: 230px;
}
	/*
	Strip text from main header and insert background image.
	NOTE: This applies to the popup version only.
	*/
	#popup-login-for-commenting h1 {
		width: 266px;
	}
		#popup-login-for-commenting .en h1 {
			background: transparent url(/static/global/images/layout/banner_loginforcommenting_266w_73h_en.gif) no-repeat left top;
		}

	/*
	Each "row" of the form is enclosed within a <label> element.
	*/
	#login-for-commenting label {
		display: block;
		height: auto !important;
		height: 24px;
		margin-bottom: 2px;
		min-height: 24px;
		overflow: hidden;
		padding-right: 165px;
		position: relative;
		vertical-align: top;
		white-space: nowrap;
		width: 56px;
	}
		/*
		All input fields, including the login button.
		*/
		#login-for-commenting label input {
			display: block;
			position: absolute;
			right: 0;
			top: 0;
			vertical-align: top;
		}

		/*
		Text fields for the username and password.
		*/
		#login-for-commenting label input.text {
			width: 150px;
		}



/* ----------------------------------------------------------------------------
	POPUP: PHOTO GALLERY
---------------------------------------------------------------------------- */

#PhotoGallery {
	margin-left: -222px;
	padding-left: 24px;
	padding-right: 24px;
	width: 444px;
	height: 525px;
}
	/*
	Graphical banner
	*/
	#PhotoGallery #PhotoGallery_Banner {
		margin-left: -24px;
		margin-right: -24px;
		width: 492px;
	}
		#PhotoGallery #PhotoGallery_Banner {
			background-image: url(/static/global/images/layout/banner_photogallery_492w_73h_en.gif);
		}

	/*
	Current/selected image.
	*/
	#PhotoGallery #PhotoGallery_Image {
		height: 307px;
		margin-bottom: 17px;
		position: relative;
		width: 444px;
	}
		#PhotoGallery #PhotoGallery_Image img {
			margin: 0;
			display: block;
			height: 307px;
			left: 0;
			position: absolute;
			top: 0;
			width: 444px;
		}

	/*
	Next and previous links.
	*/
	#PhotoGallery #PhotoGallery_Prev {
		background: transparent url(/static/global/images/bullets/arrows_green_left.gif) no-repeat 0 .33em;
		color: #003946;
		display: inline;
		float: left;
		padding-left: 19px;
		text-decoration: none;
		width: 202px;
	}
	#PhotoGallery #PhotoGallery_Next {
		background: transparent url(/static/global/images/bullets/arrows_green_right.gif) no-repeat 100% .33em;
		color: #003946;
		display: inline;
		float: right;
		padding-right: 20px;
		text-align: right;
		text-decoration: none;
		width: 202px;
	}

	/*
	Caption/description of the current photo.
	*/
	#PhotoGallery #PhotoGallery_Description {
		margin: 14px 0;
	}

	/*
	Usage rights for the current photo.
	*/
	#PhotoGallery #PhotoGallery_Usage {
		color: #5482ab;
		margin: 14px 0;
	}