/* global browser reset */
/*
		html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img
		{
			margin: 0;
			padding: 0;
			border: 0;
			outline: 0;
		}
*/

		/* make body occupy the entire viewport */
		body
		{
			height:100%;
			width:99%;
		}
		
		 p { max-width: 60em; }
		 
		 h2 + p { 
		 	text-align:justify;
		 	-moz-column-width: 20em;
			-webkit-column-width: 20em;
			-moz-column-gap: 1em;
			-webkit-column-gap: 1em; 
			-moz-column-rule: 1px solid black;
			-webkit-column-gap: 1em;
			-webkit-column-rule: 1px solid black;}

		/*
			In Standard browsers any container of the gallery can be positioned
			'static' or 'absolute' but not 'fixed' due to an Opera bug (lightbox
			does not resize on window resize) any specified z-index triggers the
			Opera resize bug when position is absolute
		*/
		#content
		{
			position:static;            /* absolute is also an option (see above)*/
/*
			border:1px solid #ddd;      /* layout - no lightbox relevance */
*/
			overflow:visible;           /* can be anything you like */
/*
			margin:1em;
			padding:.5em;
*/
		}

		/* the semi transparent background */
		.gallery .light
		{
			display:block;
			position:fixed;             /*streches the light across the viewport */
			height:100%;
			width:100%;
			top:0; 
			bottom:0;
			right:0;
			left:-9999px;               /* hides the light from view */
			background-color:black;     /* choose whatever color you like */
			z-index:19;
			cursor:default;
		}

		/* used for positioning the inner box */
		.gallery .lightbox
		{
			display: table;             /* required for vertical centering */
			position:fixed;             /*streches the box across the viewport */
			height:100%;
			width:100%;
			top:0;
			bottom:0;
			right:0;
			left:-9999px;                /* hides the light from view*/
			z-index:20;
			cursor:default;
		}

		/* used for vertical centering */
		.gallery .lightbox .middle
		{
			display: table-cell;
			vertical-align: middle;
		}

		/* the inner, visible 'content' box */
		.gallery .lightbox .inner
		{
			display:table;               /* shrink wraps the inner box */
			margin:0 auto;               /* centers the (shrinked) inner box */
			margin-top:0;            	 /* adjust vertical position, 0 centers box vertically */
			text-align:center;           /* centers the image and the description inside the box*/
			background-color:white;
			padding:32px;
			-moz-border-radius: 8px;
			-webkit-border-radius: 8px;
			border-radius: 8px;
		}

		/* triggers the box */
		.gallery a:active .lightbox,
		.gallery a:focus .lightbox
		{
			left:0;
		}

		/* active (visible) light settings */
		.gallery a:active .light,
		.gallery a:focus .light
		{
			left:0;
			-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";   /* IE8 opacity */
		 	filter: alpha(opacity=75);                                          /* IE7- opacity*/
		 	opacity:0.75;
		}

		/* the symbol to close the lightbox */
		.gallery a .close
		{
			display:block;
			position:fixed;
			right:-30px; /* hide from view when box is closed */
			top:0;
			width:16px;
			height:16px;
			background-image:url(img/close.gif);
			z-index:200; /* on top of the box but below the #selfRef */
			margin: 10px;
		}

		.gallery a:active .close,
		.gallery a:focus .close
		{
			right:0;
		}

		/*
			This is a transparent anchor embedded in the main page and brought
			to top with a high z-index. Clicking this results in the link losing
			focus and therefore box being closed. Has to be positioned over the close-symbol.
		*/
		#selfRef
		{
			display:block;
			position:fixed;
			width:36px; /* size of x-graphics + 10px margin */
			height:36px;
			right:0;
			top:0;
			z-index:300;
			margin: 0;
			outline:none;
			background-image:url(img/1x1.png); /* transparent png - required to fix opera
																						 bug where a link without background is not 
																						 recognized when positioned over an image */
		}

		/* the descriptive text below the image */
		.gallery .lightbox p
		{
			max-width:500px;
			color:#444444;
			margin:20px auto 0 auto;
		}


		.gallery img
		{
			margin:5px 10px 5px 0;
			border:1px solid gray;
		}
		
		.gallery .inner img
		{
			margin:3px 0 0 3px;
	  	box-shadow: 3px 3px 3px #AAA;
	  	-moz-box-shadow: 3px 3px 3px #AAA;
  		-webkit-box-shadow: 3px 3px 3px #AAA;
		}

		.gallery a,
		{
			text-decoration:none;
		}