/*--------------------------------------------------------------------------
	slide_show.css
	
	- for picture displays of multiple pictures on a single page
	
<div class="slideshow">
	<ul class="slides">
		<li class="slide"><a href="#pictXXX" title=""><img class="[horiz|vert]" src="<THUMBNAILFILENAME>" alt="" /><em class="[horiz|vert]"><img src="<IMAGEFILENAME>" alt="" /></em></a></li>
		<li class="slide blank"></li>
		<li class="slide blank"></li>
		<li class="slide blank"></li>
		<li class="clear"></li>
	</ul>
</div>
	
	Copyright © 2007 Benton County
--------------------------------------------------------------------------*/

/* This is the container DIV */
.slideshow {
	margin: auto;
	position: relative;
	z-index:1;
	width: 604px;	/* 4 slides @ 150 + 4 border lines @ 1 */
	background-color: #f6f4ef;
	border: 0;
	padding: 0;
	border-collapse:collapse;
}

/* <UL> container for slides */
.slides {	/* UL within the slideshow DIV */
	padding:0; 
	margin:0;
	list-style-type: none;
	border:0;
}

/* <LI> slide item */
.slide {
	display: block;
	float: left;
	width: 150px;
	height: 150px;
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
	padding: 0;
	margin: 0;
	background-color: #333;
	text-align: center;
}

/* anchor around images within <LI> slide item */
.slide a {
	cursor: pointer;
	display: block;
	text-align: center;
	text-decoration: none;
	width: 150px;
	height: 150px;
	margin: 0;
	padding: 0;
}

/* change color of <LI> behind slide on mouseover */
.slide a:hover {
	background: #000;
}

/* hide the large image */
.slide a em {
	display: none;
}

/* no border around images */
.slide a img {
	border: none;
}

/* zero align a portrait image */
/*.slide a img.vert {
	margin-top: 0;
}*/

/* vertically center a landscape image */
/*.slide a img.horiz {
	margin-top: 18px;
}*/

/* anchor within slide <LI> is clicked */
.slide a:active, .slide a:focus {
	background: #aaa; 
	height: 0; 
	width: 0; 
	border: 0;
	text-align: center;
}

/* make sure there's no border around the big image */
.slide a:active em img, .slide a:focus em img {
	border: none;
}

/* display the large image */
.slide a:active em, .slide a:focus em {
	display: block; 
	background: #ddd; 
	position: absolute; 
	left: 155px; 
	top: 10px; 
	width: 300px; 
	height: 300px; 
	z-index: 200;
	z-index: 500; 
	cursor: default; 
	border: 4px solid #f6f4ef;
}

/* pretty display border for portrait images */
.slide a:active em.vert, .slide a:focus em.vert {
	left: 188px;
	width: 225px;
	height: 300px;
}

/* pretty display border for landscape images */
.slide a:active em.horiz, .slide a:focus em.horiz {
	left: 152px; 
	width: 300px;
	height: 225px;
}

/* for ones that don't fit nicely in portrait or landscape */
.slide a:active em.square, .slide a:focus em.square {
	left: 152px;
	width: 300px;
	height: 300px;
}

/* Used to clear after the end of a row, usually four images */
li.clear {
	clear:left;
}