/* THUMBNOO CSS */
/*
 *	our small images
 */
#shrink img, #thumb img, img.thumbnoo{
	cursor:pointer;
	cursor:hand;
}

/*
 *	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
 */

.bd, .bcover, .bloader, .bcaption, .b{
	border:none;
	cursor:pointer;
	cursor:hand;
}
.thumbnood, .thumbnoocover, .thumbnooloader, .thumbnoocaption {
 	/*
		we have to have the same border width as our thumbs!
		so they line up nicely
	*/
	cursor:pointer;
	cursor:hand;
}

/*
 *	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(../images/loading.gif) no-repeat 50% 50% #FFF;
}

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

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

/*
 *	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;
}