@charset "utf-8";

body  {
	font: 100% Arial, Verdana, Helvetica, sans-serif;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	margin-left: 10%;
	margin-right: 10%;
	padding: 0;
	padding: 50px; 
	text-align: center;
	background-image: url(images/backgr_03.jpg);
	background-repeat: repeat-x;
	background-position: 0 122px;
	background-position: 10px 112px;
	background-color: #003369;
	background-color: #3377bd;
background-color: #000;
}

#container {
	width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	top: 0px;
}




a {
color: #fff;    /*this is controlling the color of the thumbnail type */
text-decoration: none;
}

a:hover{
text-decoration: none;
text-decoration: underline;
}


#thumbnails  {
float: left;
position: relative;
width: 388px;
}

#thumbnails a {
text-decoration: none; 
list-style: none;
}



#thumbnails ul {   
position; relative;   /*container for thumbnail images */
margin: 0;
padding-left: 14px;
top: 10px;
left: 0px;
width: 180px;
width: 240px;
width: 360px;
width: 330px;

}

#thumbnails li { 
list-style-type : none;
float: left;
padding: 0px;
font-size: 12px
}



/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
position relative;   /* */
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 0px ;
margin: 0 12px 8px 0;
}

.thumbnail:hover, .thumbnail_2:hover, .thumbnail_3:hover, .thumbnail_4:hover{
background-color: transparent;
}

thumbnail:hover img, thumbnail_2:hover img, thumbnail_3:hover img, thumbnail_4:hover img{
border: 1px solid transparent;
}

.thumbnail span, .thumbnail_2 span, .thumbnail_3 span, .thumbnail_4 span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 0px;
left: -1000px;
/* border: 1px dashed gray; */
border: none;
border: #003369;
text-decoration: none;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img, .thumbnail_2 span img, .thumbnail_3 span img, .thumbnail_4 span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 0px;
}

.thumbnail:hover span, .thumbnail_2:hover span, .thumbnail_3:hover span, .thumbnail_4:hover span{ /*CSS for enlarged image*/
postion: absolute;
visibility: visible;
color: #eda900; /* this is the color of the picture captions */
font-size: 12px;
text-align: center;
background: #003369;
background: #000; /* this is the background color for the enlarged pictures in the thumbnail gallery */
border: #003369;
margin: 0 15px 15px 15px;
top: 0px;
top: 208px;  /*position where enlarged image should offset vertically */
top: 0;
left: 575px; /*position where enlarged image should offset horizontally */
left: 150px;
left: 330px;
white-space: nowrap;
z-index: 50;
}