/*=====================================================================
 *
 * Filename: gallery.css
 * Website: www.plettlet.co.uk
 * Author: Mark Downie
 * Date Created: 20/09/2009
 * Media: Screen, projection
 *
 * Description
 * -----------
 * Gallery layout
 * for gallery page to set up photos and thumbnails
 * 
 * 
 *=====================================================================*/ 


/* ========= Gallery Styles ==========================
*  this code sets the style of the gallery
*  of photos on the gallery page of the website
*  ================================================ */

#gallerybox {
	position:relative; 
	width:425px; 
	height:430px; 
	background:#eeeeee url(../images/gallery/back.gif); 
	border:1px solid #000;
	margin: 0 0 2em 2em;
}

a.gallery, a.gallery:visited {
	display:block; 
	color:#000; 
	text-decoration:none; 
	border:1px solid #000; 
	width:75px; 
	height:47px; 
	float:left; 
	margin:3px; 
	z-index:50;
	}
	
a.slidea {background:url(../images/gallery/thumb2.jpg);}
a.slideb {background:url(../images/gallery/thumb3.jpg);}
a.slidec {background:url(../images/gallery/thumb4.jpg);}
a.slided {background:url(../images/gallery/thumb5.jpg);}
a.slidee {background:url(../images/gallery/thumb6.jpg);}
a.slidef {background:url(../images/gallery/thumb7.jpg);}
a.slideg {background:url(../images/gallery/thumb8.jpg);}
a.slideh {background:url(../images/gallery/thumb9a.jpg);}
a.slidei {background:url(../images/gallery/thumb10.jpg);}
a.slidej {background:url(../images/gallery/thumb11.jpg);}

a.gallery span {
	display:block; 
	position:absolute; 
	width:1px; 
	height:1px; 
	top:5px; 
	left:5px; 
	overflow:hidden; 
	background:#eeeeee url(../images/gallery/back.gif);
	z-index:100;
}

.slidek {
	display:block; 
	position:absolute; 
	width:400px; 
	height:250px; 
	top:125px; 
	left:10px; 
	padding:0; 
	border:1px solid #000;
	}

a.gallery:hover {
	white-space:normal; 
	border:1px solid #fff;
	}

a.gallery:hover img {
	border:1px solid #000; 
	position:relative; 
	z-index:100;
	}

a.gallery:hover span {
	display:block; 
	position:absolute; 
	width:402px; 
	height:300px; 
	top:120px; 
	left:5px; 
	padding:5px; 
	font-style:italic; 
	color:#000; 
	background:#eeeeee url(../images/gallery/back.gif); 
	z-index:100;
}

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

a.gallery:active span, a.gallery:focus span {
	display:block; 
	position:absolute; 
	width:402px; 
	height:300px; 
	top:120px; 
	left:5px; 
	padding:5px; 
	font-style:italic;
	color:#000; 
	background:#eeeeee url(../images/gallery/back.gif); 
	z-index:50;
}