/*Island Photogallery for 10 pics*/


h2 { bottom-align:-6px;}


#wrapper		{
				width: 750px;
				margin: auto;
				}

/*position the google ads*/
#galadd 		{
				width:730px; 
				height:90px; 
				margin: auto;
				}

/*for the 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-bottom: -6px;
				margin-right: auto;
				margin-left: auto;
				}

/*The wrapper for the whole thing - */
#container 		{
				position:relative;
				width:600px;
				height:700px;
				background:#fff;
				border:1px solid #ffc;
				margin: 10px auto;
				}

/*The wrapper for thumbnails and large photo display*/
#container b 	{
				width:560px;
				text-align:left;
				position:absolute; 
				top:200px; 
				left: 20px; 
				color:#000; 
				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 {
				text-decoration:none;
				}

/*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;
				}

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

/*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; 
				z-index:10;
				}