/* Thumbnail Gallery Style Sheet*/

/* define container for image gallery.  Width should be a multiple of the width of each image div to ensure accurate wrap */
/* You should either use this as a standalone division or as a sub division of another layer */

div.Gallery

 {
  top: 42px;
	left: 285px;
	width:650px;
	height:500px;
	/*float: left;*/
	padding: 20px;
	z-index:10;
	border: 0px solid black;

 }

/* define image div and image presentation details.  These images wrap according to the size of the gallery container*/

div.ThumbnailRow

{
}

div.ThumbnailBox

  {
  position: static;
  margin: 0px;   /* margin is used to "whitespace" between each div.thumbnailbox. */
	margin-left: 15px; /*increase horizontal spacing between images */
	padding: 0px;  /* space between image and div.ThumbnailBox edge  */
  /*border: 1px solid black; */ /* border used to encase each image.  For no border type "0px" */
  width: 170px;
  height: 160px; /* height  and width automatically adjusts to the size of each image taking the margin into consideration */
  float: left;   /*float left used to wrap images. */
  text-align: center;  /*used to centre the image in the div */
  border: 0px solid blue;

  }

div.ThumbnailBox img

  {
  display: inline;
  width:150px;
	height:100px;
  margin: 3px;      /*sets margin between image and containing div  */
  border: 0px solid green;
  }
  
div.ThumbnailBox a:hover img  /*use this section to highlight image on mouse hover if required */

  {
	border: 1px solid gray;
  }
  
div.Description     /*use this div to add comments to each image if required.  Div should be sub division of div.ThumbnailBox */
  {
  position: static;
  font-size: 12px;
  text-align: center;
  font-family : viva std, arial, serif;
  /*float: left; */
  font-weight: normal;
  width: 160px;
  margin: 0px;
   }