/*----------------------------------------------------------------------------
[Gallery stylesheet]

This stylesheet should contain gallery styles only. All styles should
be separated with a heading.

Project:	    	Webstructure.NET
Version:	    	1.0.0 [http://semver.org/]
Primary use:		For use of styling the Gallery
Original Author: 	Qasim Alyas
Last change:		01/Mar/10 []
Last Assigned to:	Qasim Alyas

-----------------------------------------------------------------------------*/

/* Gallery styles */
.gallery {
	position: relative;
	margin-bottom: 21px;
	min-height: 0;
}
	.gallery img {
		display: block;
	}
	.gallery ul li {
		background: none;
	}

	/* Preview image */
	.gallery .showing ul {
		margin: 0;
	}
		.gallery .showing ul li {
			display: none;
			padding: 0;
		}
			.gallery .showing ul li img {
				margin: 0 auto;
				cursor: pointer;
			}
			.gallery .showing ul li div {
				margin: 0 auto;
				background: #fff;
				width: 620px;
				display: none;
			}
				.gallery .showing ul li p {
					margin: 0;
					padding: 10px;
				}
				.gallery .showing ul li span {
					display: block;
					padding: 10px;
					color: #999;
					text-decoration: none;
				}
					.gallery .showing ul li span a {
						display: inline;
					}
		.gallery .showing ul li.current {
			display: block;
		}

	/* Thumbnails image */
	.gallery .thumbs {
		padding: 14px 65px;
		position: relative;
		background-color: #E2E2E2;
	}
		.gallery .thumbs_sleeve {
			height: 95px;
			width: 490px;
			overflow: hidden;
		}
			.gallery .thumbs_sleeve ul {
				margin: 0;
				padding: 0;
				width: 520px;
				position: relative;
				left: 0;
			}
			.gallery .thumbs_sleeve ul:after {
				content: ".";
				clear: both;
				display: block;
				height: 0;
				visibility: hidden;
			}
				.gallery .thumbs_sleeve ul li {
					float: left;
					margin: 0 15px 0 0;
					padding: 0;
				}
					.gallery .thumbs_sleeve ul li a {
						display: block;
					}

		/* Gallery buttons [previous and next] */
		.gallery .previousButton, .gallery .nextButton {
			cursor: pointer;
			position: absolute;
			display: block;
			top: 47px;
			width: 18px; 
			height: 35px;
			text-indent: -9999px;
			background: no-repeat 0 0;
		}
		.gallery .previousButton {
			left: 20px;
			background-image:url(/magazine/graphics/gallery/prev.gif);
		}
		.gallery .previousButton:hover {
			background-image:url(/magazine/graphics/gallery/prevOver.gif);
		}
		.gallery .nextButton {
			right: 20px;
			background-image:url(/magazine/graphics/gallery/next.gif);
		}
		.gallery .nextButton:hover {
			background-image:url(/magazine/graphics/gallery/nextOver.gif);
		}

		/* AJAX loader */
		.ajax_loading {
			position: absolute;
			z-index: 100;
			display: none;
			width: 620px;
			background: #000 url(/magazine/graphics/ajax_loader.gif) 50% 50% no-repeat;
		}

		/* When js is disabled */
		.js-disabled .gallery {
			display: none;
		}