/* ********************************************************** *\
 * Galerie CSS style
\* ********************************************************** */

div#container {
	font: normal 8pt Verdana, Helvetica, Arial, sans-serif;
	padding: 8px 8px 0 8px;
	color: #111;
}

/* --------------------------- Content container ----------------------------- */
/*
<div class="content">
	...
</div>
*/

div.content {
	display: none;	/* display:block is done in javascript else if javascript is disabled everything stays invisible */
	/* clear: both; */
}

div.content a {
	text-decoration: none;
}

/* --------------------------- Controls container ----------------------------- */
/*
<div class="content">
	...
	<div id="controls" class="controls">

		<!-- div structure created by javascript -->

		<div class="nav-controls">
			<a class="prev" rel="history" title=" prevLinkText "> this.prevLinkText </a>	Previous
			<a class="next" rel="history" title=" nextLinkText "> this.nextLinkText </a>	Next
		</div>

		<div class="ss-controls"><a href="[#play|#pause]">...</a></div>						Play/Puase slideshow

	</div>

</div>
*/

div.controls {
	position: relative;
	display: block;
	clear: both;
	border-top: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	background: transparent url(white127.png) repeat;
	padding: 0;
	height: 1.8em;
	line-height: 1.8em;
}

div.controls a {
	background-color: transparent;
}

div.controls a:focus,
div.controls a:hover {
}
div.controls a:active {
}


div.controls a:focus {
	outline: none;
}
div.nav-controls {
	float: left;
}
div.nav-controls a.prev {
	padding: 0 8px;
	border-right: 1px solid #aaa;
}
div.nav-controls a.next {
	padding: 0 8px;
}
div.ss-controls {
	float: right;
}
div.ss-controls a {
	padding: 0 8px;
}

/* --------------------- Slideshow container -------------------------

<div class="content">
	...
	<div class="slideshow-container">

		<div id="loading" class="loader"></div>				switched on while preloading images

		<div id="slideshow" class="slideshow">

			<!-- div structure created by javascript -->

			<span class="[current|previous]">				toggled for correct transition from prev to current
				<span class="preview0">
					<span class="showprev">
						<a class="showbig"><img .../></a>
					</span>
					<span class="showtitle">
						<div class="caption">
							...
						</div>
					</span>
				</span>
				<span class="preview1">
					<span class="showprev">
						<a class="showbig"><img .../></a>
					</span>
					<span class="showtitle">
						<div class="caption">
							...
						</div>
					</span>
				</span>
			</span>

		</div>
	</div>
</div>

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

div.slideshow-container,
div.loader {
	width: 700px;
}

div.slideshow-container,
div.loader {
	height: 430px;
}

div.slideshow-container {
	position: relative;
	clear: both;
	margin: 16px auto 0 auto;
	overflow: hidden;
}

div.loader {
	position: absolute;  top: 0;  left: 0;
	background: transparent url(loader3_green.gif) no-repeat center;
}

div.slideshow {
}

div.slideshow span.preview0 {
	display: block;
	position: absolute;
	top: 0; left: 0;
}

div.slideshow span.preview1 {
	display: block;
	position: absolute;
	right: 0; bottom: 0;
}

/* --- image wrapper --- */

div.slideshow span.preview0 span.showprev,
div.slideshow span.preview1 span.showprev {
	display: block;
	border-width: 2px;
	border-style: solid;
	border-color: #f8f8f8 #e0e0e0 #e0e0e0 #f8f8f8;
}

div.slideshow span.preview0 span.showprev {
	float: left;
}

div.slideshow span.preview1 span.showprev {
}

/* --- title wrappers ----- */

div.slideshow span.preview0 span.showtitle,
div.slideshow span.preview1 span.showtitle {
	width: 220px; height:78px; margin:0;
	border-width: 2px;
	border-style: solid;
	border-color: #ffffff #e0e0e0 #e0e0e0 #ffffff;
	line-height: 1.2em;
	background: transparent url(gray95.png) repeat;
	overflow: hidden;
}

div.slideshow span.preview0 span.showtitle {
	float: left;
	margin-left: 12px;
	padding: 4px 2px 4px 6px;
}

div.slideshow span.preview1 span.showtitle {
	position: absolute;
	bottom: 0; left: -244px;
	text-align: right;
	padding: 4px 6px 4px 2px;
}

div.slideshow div.caption div.state {
	color: #f22;
	font-weight: bold;
}

/* div.slideshow span.preview[0|1] span.showtitle | div.caption a.imgbig */
div.slideshow a.imgbig {
	display: none; /* big image is displayed via slimbox */
}

/* ----- Images ----- */

div.slideshow span.preview0 a.showbig {
}

div.slideshow span.preview1 a.showbig {
}

div.slideshow a.showbig:focus {
	outline: none;
}

div.slideshow span.showprev img {
	border: 16px solid #fff;
}

/* ------------ navigation controls above/below thumbnails ----------------------

<div class="navigation-container">
	<div id="thumbs" class="navigation">

		<div class="top pagination">					created dynamically if option variable tells
			<a rel="history" href="# hash">...</a>
			...
		</div>

		<ul class="thumbs [noscript]">
			<li class="[selected]">						selected is dded dynamicaly if this pair is selected
				... same as in html-source ...
			</li>
		</ul>

		<div class="bottom pagination">					created dynamically if option variable tells
			<a rel="history" href="# hash">...</a>
			...
		</div>

	</div>
</div>

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

div.navigation-container {
	position: relative;
/*	float: left; left: 50%; overflow: visible; */ /* enable this to center thumbs horiozontal */
	padding: 0 0 2px 0;
	overflow: hidden;
}
div.navigation-container a {
	text-decoration: none;
}
div.navigation {
	position: relative;
/*	float: left; left: -50%; */ /* enable this to center thumbs horizontal */
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
}

ul.thumbs {
	clear: both;
	position: relative;
	float: left;
	margin: 0;
	padding: 2px 0;
}
ul.thumbs li {
	float: left;
	margin: 0 2px 0 0;
	border: 1px solid;
	border-color: #ffffff #c0c0c0 #c0c0c0 #ffffff;
	padding: 3px;
	list-style: none;
	/* background: transparent url(dgray95.png) repeat; *//* !!! MSIE 8 has problems here and shows a darkgray background instead of transparent png !!! */
	background-color: #f0f0f0;
}
ul.thumbs li.selected {
	margin: 0 2px 0 0;
	border: 2px solid;
	border-color: #ffffff #c0c0c0 #c0c0c0 #ffffff;
	padding: 2px;
	background-color: #d8d8d8;
}
ul.thumbs li div.thumb {
	float: left;
	padding: 2px;
}
ul.thumbs li a.thumb {
	display: block;
	border: none;
}
ul.thumbs li a.thumb:focus {
	outline: none;
}
ul.thumbs li div.thumb img {
	border: none;
}

/* --- if javascript is disabled we see this --- */

ul.thumbs.noscript {
	width: 18080px;
	font: normal 8pt Verdana, Helvetica, Arial, sans-serif;
}
ul.thumbs.noscript li {
	float: left;
	margin: 0;
	border: none;
	padding: 0;
	list-style: none;
	background: transparent url() repeat;
}
ul.thumbs.noscript li div.thumb {
	width: 157px; height: 222px;
	border: 2px solid;
	border-color: #ffffff #d8d8d8 #d8d8d8 #ffffff;
	text-align: center;
	margin: 0 8px 8px 0; /* distance between thumbs */
	padding: 4px 4px;
	background: transparent url(dgray95.png) repeat;
}

ul.thumbs.noscript div.thumb div.state {
	font-weight: bold;
}

/* <a> containing thumbnail image */
ul.thumbs.noscript a.thumb {
	display: block;
	padding: 8px 0px;
	text-align: center;
}
ul.thumbs.noscript li a.thumb:active,
ul.thumbs.noscript li a.thumb:hover,
ul.thumbs.noscript li a.thumb:focus {
	background-color: #e0e0e0;
}

ul.thumbs.noscript div.caption {
	margin-top: 4px;
	border-top: 1px solid #999;
	padding-top: 4px;
}

ul.thumbs.noscript a.imgbig {
	text-decoration: underline;
}
ul.thumbs.noscript a.imgbig:active,
ul.thumbs.noscript a.imgbig:hover,
ul.thumbs.noscript a.imgbig:focus {
	text-decoration: underline;
}
ul.thumbs.noscript div.thumb img {
	border: 12px solid #fff;

}

/* --------------- Top/Bottom Page navigation -------------------- */

div.pagination {
	position: relative;
	display: block;
	clear: both;
	padding: 0;
	overflow: hidden;
	font-weight: bold;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
	display: block;
	float: left;
	margin-right: 2px;
	padding: 3px 7px 3px 7px;
}
div.pagination a {
	/* background: transparent url(white127.png) top left repeat; */ /* MSIE 7.x has problems here */
	background-color: transparent;
}
div.pagination a:hover {
}
div.pagination a:focus {
	outline: none;
}
div.pagination span.current {
	font-weight: bold;
}
div.pagination span.ellipsis {
	border: none;
	padding: 5px 0 3px 2px;
}

/* --------------------- Slimbox inserted image description --------------- */

#lbCaption div.slimboxtxt {
	font-size: 9pt;
	line-height: 1.3em;
	text-align: right;
}