/* _____________________________________________________________
	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: #ffffff;
	padding: 0px;
	margin:0px;
    margin-left:auto;
	margin-right:auto;

}
.flickrGalleryCntr img {
	border:0pt none;
}

/* - - - - - - - - - - - - - - - - - - - - -
		album containers
 - - - - - - - - - - - - - - - - - - - - - - */
 h3 {
    font-family:Georgia, Times;
    font-size:14px;
    color:Maroon;
    font-weight:bold;
    background-color:#ffffff;
 }
.flickrGalleryAlbum {
	width: 27%;
	height: 150px;
	float: left;
	border: 1px solid #0f0f0f;
	padding:0px 10px 2px 10px;
	margin: 7px;
	border: 5px solid #dddddd;
}
.flickrGalleryAlbum img {
	float: left;
	padding:0px 10px 10px 0px;
}


/* - - - - - - - - - - - - - - - - - - - - -
		Images Container
 - - - - - - - - - - - - - - - - - - - - - - */
.flickrGalleryImages {
	height: 550px
}
.flickrGalleryImageView {
	padding-top: 50px;
	padding-bottom:30px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
    border:4px solid #dddddd;
}
.flickrGalleryImageView img {
	position:relative;
	display: inline;
	margin-left:auto;
	margin-right:auto;
}
.flickrGalleryData {
    Position:relative;
    top:40px;
    width:495px;
    margin-left:auto;
    margin-right:auto;

}
/* - - - - - - - - - - - - - - - - - - - - -
		Image Navigation buttons
 - - - - - - - - - - - - - - - - - - - - - - */
.flickrGalleryImageMenu {
	width: 704px;
	padding:2px;
	position: inherit;
	margin-left:auto;
	margin-right:auto;
	top:5px;
	height:22px;
	background: #dddddd;
    text-decoration:none;

}
.flickrGalleryImageMenuHover {
    color:#ffffff;

    text-decoration:none;
}

.flickrGalleryImageMenu a {
	color: #000000;
	width: 100%;
	text-decoration:none;
}
.flickrGalleryImageMenuButtons {
	background-color: #dddddd;
	color: #000000;
	text-decoration:none;
}
.flickrGalleryImageMenuButtons a {
	padding: 5px;
	margin: 10px;
	text-decoration:none;

}
.flickrGalleryImageMenuButtons a:hover {
	color: #ffffff;
	background-color:#666666;
	text-decoration:none;
}

/* - - - - - - - - - - - - - - - - - - - - -
		Thumbnails images
 - - - - - - - - - - - - - - - - - - - - - - */
.flickrGalleryImageThumbs {
	background: #eeeeee;
	border-bottom: 3px solid #0f0f0f;
	padding: 1em;
}
.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 {
	width:400px;
	position: relative;
	text-align: center;
	vertical-align: middle;
	/* z-index: 11; */
	opacity: .90;
	color: #333333;
	filter: alpha(opacity=90);
	margin-top: 30%;
	font-size: large;
	font-weight: 900;
	display: block;
	margin-left:auto;
	margin-right:auto;
}