/* _____________________________________________________________
	As with most projects on the web, the beatifying of the
	webpage is done through the Cascading Style Sheets (CSS). 
	Below is the one used in the demos contained in this webpage.
   _____________________________________________________________ */
   
/* - - - - - - - - - - - - - - - - - - - - -
		Gallery Container
 - - - - - - - - - - - - - - - - - - - - - - */
.flickrGalleryCntr {
	position: relative;
	width: 700px;
	background-color: #FFF;
	padding: 10px;
	border: 5px solid #FFF;
}
.flickrGalleryCntr img {
	border:0pt none;
}

/* - - - - - - - - - - - - - - - - - - - - -
		album containers
 - - - - - - - - - - - - - - - - - - - - - - */
.flickrGalleryAlbum {
	width: 25%;
	height: 100%;
	float: left;
	padding: 10px;
	margin: 10px;
	background-color: #2B77AF;
	border: 2px solid #B9DD4C;
	color: #B9DD4C;
}
.flickrGalleryAlbum img {
	float: left;
	padding: 5px;
}

/* - - - - - - - - - - - - - - - - - - - - -
		Images Container
 - - - - - - - - - - - - - - - - - - - - - - */
.flickrGalleryImages {
	height: 550px
}
.flickrGalleryImageView {
	padding-top: 30px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
}
.flickrGalleryImageView img {
	display: inline;
	margin: auto;
}

/* - - - - - - - - - - - - - - - - - - - - -
		Image Navigation buttons
 - - - - - - - - - - - - - - - - - - - - - - */
.flickrGalleryImageMenu {
	width: 100%;
	position: inherit;
	left: 0em;
	background: #2B77AF;

}
.flickrGalleryImageMenuHover {
	opacity: .90;
	filter: alpha(opacity=90);
}

.flickrGalleryImageMenu a {
	color: #B9DD4C;
	width: 100%;
}
.flickrGalleryImageMenuButtons {
	background-color: #2B77AF;
	color: #ffffff;
}
.flickrGalleryImageMenuButtons a {
	padding: 3px;
	margin: 4px;
}
.flickrGalleryImageMenuButtons a:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	border-color: #ffffff;
	color: #ffffff;
}

/* - - - - - - - - - - - - - - - - - - - - -
		Thumbnails images
 - - - - - - - - - - - - - - - - - - - - - - */
.flickrGalleryImageThumbs {
	background: #000000;
	border-bottom: 5px solid #0f0f0f;
	padding: 1em;
	height: 300px;
	overflow: auto;
}
.flickrGalleryImageThumbs ul {
	list-style: none;
}
.flickrGalleryImageThumbs li {
	float: left;
	list-style-image: none;
	list-style-position: inside;
	list-style-type: none;
	display: block;
	height: 50px;
	width: 50px;
	overflow: hidden;
	padding: 5px;
}

/* - - - - - - - - - - - - - - - - - - - - -
		Loading Message Container
 - - - - - - - - - - - - - - - - - - - - - - */
.flickrGalleryLoading {
	position: absolute;
	text-align: center;
	vertical-align: middle;
	/* z-index: 11; */
	width: 90%;
	height: 90%;
	opacity: .90;
	filter: alpha(opacity=90);
	color: #ffffff;
	margin: auto;
	margin-top: 30%;
	font-size: large;
	font-weight: 900;
	display: block;
}