/*
 * This css file was created for the demo of thumbnoo.
 * Since its styling was so universal, we have used it here as well.
 */



/*
 *	our small images
 */
#gallery img {
	border: none;
}

/*
 *	our basic styles, we override by setting className in options and then
 *	styling the derived class name, see below
 *	
 *	${className}d		- the popup
 *	${className}cover	- placed above small image when it is poped up
 *	${className}loader	- placed above small image when it is preloading (thumb mode)
 *	${className}indicate	- placed above small image, can indicated popup ability
 *	${className}caption	- placed next to popup, contains a <blockquote/> with the image caption
 */
.thumbnood, .thumbnoocover, .thumbnooloader, .thumbnooindicate, .thumbnoocaption {
 	/*
		we have to have the same border width as our thumbs!
		so they line up nicely
	*/
	border: none;
}

/*
 *	we want to indicate that this image is currently doing something
 */
 .thumbnoocover, .thumbnooloader {
	opacity: 0.8;
	background: #FFF;
	cursor: wait;
}

/*
 *	when preloading, we need a different background (animated GIF)
 */
.thumbnooloader {
	background: url(../img/loading.gif) no-repeat 50% 50% #FFF;
}

/*
 *	a small lupe is placed in the bottom right corner to indicate zooming ability
 */
.thumbnooindicate {
	background: url(../img/zoom.gif) no-repeat 95% 95%;
	cursor: pointer;
}

/*
 *	the element holding the <blockquote/> with the caption
 */
.thumbnoocaption {
	border-top: none;
	background: #DEA;
	opacity: 0.9;
	-moz-border-radius: 0 0 0.5em 0.5em;
	-webkit-border-radius: 0 0 0.5em 0.5em;
}

/*
 *	the element holding the caption text, we can style it without breaking the box model
 */
.thumbnoocaption blockquote {
	position: relative;
	top: 0;
	font-size: 0.8em;
	font-weight: bold;
	font-variant: small-caps;
	margin: 0;
	padding: 0.5em;
}

/*
 *	the caption can hold URL encoded HTML so maybe we have some links?
 */
.thumbnoocaption a {
	color: #000;
}

/*
 *	basic styles end, overrides follow
 *	note that the above rules will get applied to ALL elements so override only
 *	what differs, no need to copy/paste rules
 */

/*
 * Example: Slideshow [thumb]
 *
 * className: 'thumbShow'
 */
.thumbShowcaption {
	border: none;
	opacity: 0.8;
	background: #FED;
	-moz-border-radius: 1em 0 0 0;
	-webkit-border-radius: 1em 0 0 0;
}

.thumbShowcaption blockquote {
	text-align: right;
}

/*
 * Example: Shrink mode 50%, center, 'long' animation duration, popup on mouse over
 *
 * className: 'b'
 */
.bcover {
	background: #0AF;
	border-color: #F00;
}

.bindicate {
	background: url(zoom-inverted.gif) no-repeat 5% 5%;
}

.bd {
	caption-side: left;
}