/* (c) Michel Beaudouin-Lafon - mbl@lri.fr, 2009 */
/* Style sheet for photo gallery */

/* ======== General Settings ======== */

* { margin: 0; padding: 0; }
body { background-color: #222; color: #bba; font: 80%/140% sans-serif; }

h1, h2, p { margin: 10px 20px; }
a { color: #348; text-decoration: none; outline: none; }
a:hover { color: #67a; }

/* ======== galleria links ======== */
.galleria-view, .galleria-help {
	position: absolute;
	overflow: hidden;
	right: 0px;
	width: 100px;
	height: 100px;
	z-index: 20;
	text-align: right;
	margin-right: 10px;
}
.galleria-view {
	top: 5px;
}
.galleria-help {
	top: 25px;
}

/* ======== Image Container ======== */
#image {
	margin: 0px auto;
	text-align: center;
}

#image.spinner {
	width: 100px;
	height: 400px;
	background: url(spinner.gif) no-repeat center center;
}

#image.fullscreen {
	position: absolute;
	overflow: hidden;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 5;
}

#image .caption {
	display: block;
	text-align: center;
	height: auto;
}

/* ======== Footer and Thumbbar ======== */

#footer {
	position: fixed;
	width: 100%;
	min-height: 80px;
	bottom: 0px;
	z-index: 10;
}

#thumbbar {
	overflow: hidden;
	background-color: rgba(34, 34, 34, 0.8); /* 34 = #2 */
}

#thumbs { list-style: none; }
#thumbs li { display: block; width: 80px; height: 80px; overflow: hidden; float: left; margin: 5px; }
#thumbs li img { display: block; top: auto; left: auto; width: auto; height: auto; cursor: pointer; }

.galleria li a { display: none; }

/* ======== Slideshow Controller ======= */

#control {
	cursor: pointer;
	width: 80px;
	height: 80px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image: none;
}
#control.play { background-image: url(play.gif); }
#control.pause { background-image: url(pause.gif); }

/* the plus sign that opens the settings panel */
#control span { color: #333; }
#control span:hover { color: #666; }

/* ======== Settings Panel ======== */

#thumbs #settings { display: none; }
#thumbs div { cursor: pointer; }

/* ======== Magnifying Lens ======== */

#lensButton { cursor: pointer; display: inline-block; width: 13px; height: 13px; background-image: url(lens.png); }
#closeLens { cursor: pointer; position: absolute; left: 0px; top: 0px; padding-left: 5px; }
#growLens { cursor: se-resize; position: absolute; right: 0px; bottom: 0px; width: 10px; height: 10px; }

#lens {
	position: absolute;
	overflow: hidden;
	cursor: move; 
	border: 1px dotted #bba;
	text-align: left;
	padding-left: 5px;
	top: 100px;
	left: 300px;
	width: 200px;
	height: 200px;
	background-color: #222;
}

#lens.spinner {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image: url(spinner.gif);
}

#lens img {
	position: absolute;
}