/*Island Photogallery for 10 pics with google ads - container height 600 to allow add link underneath*/

#topgalsad		{
				width: 750px;
				margin: auto;
				padding: 0;
				border-bottom: 1px solid #069;
				}
				
/*Header title eg Samos Photogallery*/
#header 		{
				position:relative;
				width:600px; 
				height:40px; 
				font-family:tahoma,
				geneva, verdana, sans-serif; 
				font-weight:normal;
				font-size: 16px; 
				color: #9cf;
				margin-right: auto;
				margin-left: auto;
				}

/*The wrapper for the gallery*/
#container 		{
				position:relative;
				width:600px;
				height:550px;
				background:#fff;
				margin: 5px auto;
				}

/*The wrapper for thumbnails and large photo display*/
#container b 	{
				width:560px;
				text-align:left;
				position:absolute;
				top:201px; 
				left: 21px; 
				color:#036;
				font-family:tahoma, geneva, verdana, sans-serif; 
				font-weight:normal;
				font-size:small;
				letter-spacing:1px; 
				line-height:1 em;
				z-index:1;
				}


/*The blurb in container b - hover thumbnails etc*/
.strap 			{
				font-family:tahoma, geneva, verdana, sans-serif; 
				font-weight:normal;
				font-size: x-small; 
				color: #069;
				}

#container a, a:visited {
				color:#000;
				text-decoration:none;
				}

#container a:hover {
				color:#f00;
				}

/*these are the five thumbnails each 99x75px - unblank to make two rows of five*/
/*total width of thumbs and margins adds up to 585 - 5 pics - 10 margins(two halfs each end*/
a.gallery, a.gallery:visited {
				display: inline;
				color: #000;
				text-decoration: none;
				border: 1px solid #069;
				width: 99px;
				height: 75px;
				float: left;
				margin: 7px 8px; 
				position: relative;
				cursor: default;
				}

/*display the thumnails - this code in html header
a.slidea {background:url(01-100.jpg);}
a.slideb {background:url(02-100.jpg);}
a.slidec {background:url(03-100.jpg);}
a.slided {background:url(04-100.jpg);}
a.slidee {background:url(05-100.jpg);}
a.slidef {background:url(06-100.jpg);}
a.slideg {background:url(07-100.jpg);}
a.slideh {background:url(08-100.jpg);}
a.slidei {background:url(09-100.jpg);}
a.slidej {background:url(10-100.jpg);}*/

/*the box to display large pic*/
a.gallery span 	{
				visibility:hidden;
				display:block;
				position:absolute;
				width:580px; 
				height:480px;
				top:189px;
				color:#000; 
				background:#fff;
				text-align:center;
				font-size: .75em; 
				font-family: arial, helvetica, verdana, sans-serif; 
				}

a.gallery span p {
				text-align: justify;
				margin: 0; 
				padding: 0 40px;
				}


/*these position the thumbnails across the container */
a.slidea span 	{left:-9px; top:180px;}
a.slideb span 	{left:-126px; top:180px;}
a.slidec span 	{left:-243px; top:180px;}
a.slided span 	{left:-360px; top:180px;}
a.slidee span 	{left:-477px; top:180px;}
a.slidef span 	{left:-9px; top:89px;}
a.slideg span 	{left:-126px; top:89px;}
a.slideh span 	{left:-243px; top:89px;}
a.slidei span 	{left:-360px; top:89px;}
a.slidej span 	{left:-477px; top:89px;}

/*hover over thumbs*/
a.gallery:hover {
				white-space: normal;
				border: 1px solid #f00; 
				z-index: 100;
				}

/*on thumb hover show large pic*/
a.gallery:hover span {
				visibility: visible;
				z-index: 100;
				}

/*diplay attribs for large image*/
a.gallery:hover span img {
				margin: 20px 0 5px 0;
				border: 1px solid #000;
				position: relative;
				z-index: 100;
				}

a.gallery:active, a.gallery:focus {
				border: 1px solid #c00;
				z-index: 10;
				}

a.gallery:active span, a.gallery:focus span {
				visibility: visible;
				z-index: 10;
				}

a.gallery:active span img, a.gallery:focus span img {
				border: 1px solid #000;
				position: relative; 
				margin: 10px auto;
				z-index: 10;
				}