/* Supplementary Style Sheet for www.BarryMerchantSeamen.org.uk  */
/* 	Updated 12 June 2008										 */

/*  styles for picture gallery for use with JavaScript functions */
/*   adapted from a script written by Christian Heilmann         */
/*    see   http://icant.co.uk/articles/dyngallery/              */


/*	Set for up to 16 pictures					*/
/*	Requires portrait format, ratio = 3:4		*/
/*		thumbnails	128 x 96 pixels				*/
/*		pictures	548 x 411 pixels			*/
/*												*/
/*	Change arguments in "#pixA div"				*/
/*					and "#pixA"					*/
/*					and "#bigDynPic"			*/
/*		for other picture counts				*/

	
	#pixA, #pixB						/* defines thumbnail area */
	{
		position:relative;				/* "relative" status needed, no movement wanted */
		top:0em;
		left:0em;
		width:433px;									/* Variable with thumb count */
		height: 573px;									/* Variable with thumb count */
		background: #ffdd66; 
		padding-top:1px;
		padding-left:1px;
		border-top:3px solid #630;		/* Dark brown = 630 */
		border-left:3px solid #630;
		border-bottom:3px solid #630;
		border-right:3px solid #630;
	}
	
    #pixA div, #pixB div				/* individual pic frames in thumbnail area */
	{
/*
		width:97px;
		height:129px;
*/
		float:left;
		background: #ffdd66; 
/*
		padding-top:4px;
		padding-right:6px;
		padding-bottom:4px;
		padding-left:5px;
*/
		border-top:0px solid #f0f;      /* outside picture edge? option */
		border-left:0px solid #f0f;
		border-bottom:0px solid #f0f;
		border-right:0px solid #f0f;
	}

	#pixA div img, #pixB div img 		/* images in individual frames in thumbnail area */
	{
		border-top:1px solid #630;		/* overlays picture edge? included in pic width */
		border-left:1px solid #630;
		border-bottom:1px solid #630;
		border-right:1px solid #630;
		display:block;
		margin:0px auto;				/* auto centres vertically ?  */
		z-index: 15;
	}
	
	#pixA p, #pixB p 					/* follow on descriptive paragraph - not used */
	{
		background:#3f3;
		position:absolute;
		top:0em;
		left:0em;
		padding:0px;
		border-bottom:1px solid #036;
		border-right:1px solid #036;
		border-left:1px solid #69c;
		border-top:1px solid #f00;
	}

	#pixA div:hover, #pixB div:hover	/* pointed at */
	{
		cursor: pointer;
		background-color: #630;
	}

    #pixA span, #pixB span				/* SPAN allows display across page if styles off */
	{
		width:97px;									/* Variable with thumb count */
		height:129px;									/* Variable with thumb count */
		float:left;
		background: #ffdd66; 
		padding-top:7px; /* was 4 */
		padding-right:6px; /* was 6 */
		padding-bottom:7px; /* was 4 */
		padding-left:5px; /* was 5 */
		border-top:0px solid #f0f;
		border-left:0px solid #f0f;
		border-bottom:0px solid #f0f;
		border-right:0px solid #f0f;
	}

	#pixA span img, #pixB span img 		/* images in individual frames in thumbnail area */
	{
		border-top:1px solid #630;		/* overlays picture edge? included in pic width */
		border-left:1px solid #630;
		border-bottom:1px solid #630;
		border-right:1px solid #630;
		display:block;
		margin:0px auto;				/* auto centres vertically ?  */
		z-index: 15;
	}

	#pixA span:hover, #pixB span:hover	/* pointed at */
	{
		cursor: pointer;
		background-color: #630;
	}


	#loadingmessage						/* referenced to what !?  */
	{
		display: none;					/* DON'T SHOW IT  but turned on by js...  */
		
		position: fixed;
			top: 20em;
			left: 10em;
		padding:1em 5px;
		background:#000;
		font-family:courier,Sans-serif;
		font-size:large;
		font-weight:bold;
		width:30em;
		text-align:center;
		color:#0f0;
		border-bottom:0px solid #0f0;
		border-right:0px solid #0f0;
		border-left:0px solid #0f0;
		border-top:0px solid #0f0;
		z-index: 30;
	}


	#bigDynPic						/* referenced to?  LEAVE OUT POSITION ARGUEMENTS !! */
	{
		position:absolute;
		background: #fd6;			/* Light brown */
		width:423px;									/* Variable with thumb count */
		height: 563px;									/* Variable with thumb count */
		padding-top:8px;	/* was 5 */							/* Variable with thumb count */
		padding-right:5px;								/* Variable with thumb count */
		padding-bottom:3px;								/* Variable with thumb count */
		padding-left:6px;								/* Variable with thumb count */
		border-bottom:3px solid #630;
		border-right:3px solid #630;
		border-left:3px solid #630;
		border-top:3px solid #630;
		z-index: 20;
	}

	#bigDynPic img
	{
		width:420px;				/* 420x560 target, but... */
		height:557px;
		padding:0px;	
		border-top:3px solid #000;
		border-left:3px solid #000;
		border-bottom:3px solid #000;
		border-right:3px solid #000;
	}
	
	#bigDynPic p
	{
		background:#666;
		color:#fff;
		margin:0;
		padding:0px 0px;	
	}



// end of styles for picture gallery */