/*  Generic styles for all scrollables
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	background:url(pale-blue.png) repeat-x;
	float:left;
    border:2px solid #039fa6;
    -moz-border-radius:4px;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

ul.items {list-style-type:none;}

/* active item */
/*
.scrollable .active {
	border:2px solid #df321a;
	z-index:9999;
	position:relative;
}
*/

/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;
}
/* prev, next, prevPage and nextPage buttons */
a.browse {
 background:url(hori_mi.png) no-repeat;
 display:block;
 width:30px;
 height:30px;
 float:left;
 margin:0;
 cursor:pointer;
 font-size:1px;
}

/* right */
a.right { background-position: 0 -30px; clear:right; margin-right: 0px; margin-left:0px;}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }


/* left */
a.left { margin-left: 10px; margin-right:0px;}
a.left:hover { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }

/* up and down */
a.up, a.down {
 background:url(vert_large.png) no-repeat;
 float: none;
 margin: 10px 50px;
}

/* up */
a.up:hover { background-position:-30px 0; }
a.up:active { background-position:-60px 0; }

/* down */
a.down { background-position: 0 -30px; }
a.down:hover { background-position:-30px -30px; }
a.down:active { background-position:-60px -30px; }


/* disabled navigational button */
a.disabled {
 visibility:hidden !important;
}

/* position and dimensions of the navigator */
.paginate {
	margin-left:328px;
	width:200px;
	height:20px;
}


/* items inside navigator */
.paginate a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(navigator-mi.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
.paginate a:hover {
	background-position:0 -8px;
}

/* active state (current page state) */
.paginate a.active {
	background-position:0 -16px;
}
/* ---------------------------------------------------------------------
 * Fence Pillar Drawings
 *
 *      <div>
		<a class="prevPage browse left"></a>
		 <div id="drawings" class="scrollable">
			<div id="pics" class="items">
				<div id="pic0" class="tagged"><img>
					<div id="tags" class="items">
						<a href=....></a>
					</div>
				</div>
			</div>
        <a class="nextPage browse right"></a>
        </div>

 * single scrollable item
 * ----------------------------------------------------------------------*/
.scrollable#drawings .tagged  {
	float:left;
	margin:5px 15px 5px 15px;
	background-color:#fff;
	padding:2px;
	border:1px solid #039fa6;
	cursor:pointer;
	width:114px;
	height:340px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}
/*
Style the scrolling area
*/
#drawings {
	height:450px;
	width:620px;
	}

/* active item */
.scrollable#drawings  .active {
	border:2px solid #df321a;
	z-index:9999;
	position:relative;
}

.scrollable .tagged a, .scrollable .tagged .tag {
	/*
margin-left:25px;
*/
	color:#df321a;
}
/* ---------------------------------------------------------------------
/* Fence gallery with thumbnails
<div id="image_wrap">
	<img/>
	<div id="tags">

	</div>
	<div id="caption">
	</div>
</div>
<div class="clearfix"> </div>
<div id="scroll-wrap">
	<div class="paginate"> </div>
	<a class="prevPage browse left"/>
	<div id="fences" class="scrollable">
		<div id="thumbs" class="items">
			<img />
		</div>
	</div>
	<!-- "next image" action -->
	<a class="nextPage browse right"/>
</div>

/* single scrollable item */
#thumbs img {
	float:left;
	width:75px;
	height:75px;
	padding:2px;
	}
#image_wrap {
    padding-top:15px;
    text-align:center;
	width:780px;
	margin:0 auto;
    background-image: url("pale-blue.png");
    border:2px solid #039fa6;
    -moz-border-radius:4px;
}
#scroll-wrap {
	margin: 0 auto;
	width:864px;
	height:130px;
}
#image_wrap img {
	border: 2px solid #039fa6;
}

#image_wrap #caption {
	clear: both;
	background-color:#039fa6;
	color:#fff;
	bottom: 0px;
	font-size:23px;
	text-align:center;

}
#image_wrap #tags {
	font-style: italic;
	color:#df321a;
	font-size:larger;
	text-align:left;
	margin-left:20px;
	height:50px;
	bottom: 50px;
}
#fences.scrollable img.active {
	border:2px solid #df321a;
	z-index:9999;
	position:relative;
}
.scrollable#fences img {
	float:left;
	margin:15px;
	background-color:#fff;
	padding:2px;
	border:1px solid #039fa6;
	cursor:pointer;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}
#fences {
	height:120px;
    background-image: url("pale-blue.png");
    border:2px solid #039fa6;
    -moz-border-radius:4px;
	width:780px;
	margin: 0 auto;

}
/*
 * Letterbox Drawings
 *
<div id="lbdrawings" class="scrollable">
	<div id="pics" class="items">
		<div id="pic0" class="tagged"><img/></div>
	</div>
	<div class="clearfix"> </div>
	<div id="tags" class="items">
		<div id="tags0" class="tag"><a></a></div>
	</div>
</div>
 */
.scrollable#lbdrawings .lb {
	float:left;
	margin:15px;
	background-color:#fff;
	padding:2px;
	border:1px solid #039fa6;
	cursor:pointer;
	width:90px;
	height:150px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}


#lb {
	float:left;
}

#lbdrawings a, #lbdrawings .tag, #drawings .tag {
	font-style: italic;
	color:#df321a;
	/*font-size:larger;*/
	text-align:left;
	bottom:0;
	/*height:20px;*/

}

#lbdrawings {
	height:220px;
	width:518px;
}

/*
 *  Letterbox gallery
 */

/*
 * odds and ends to be sorted out
 */
#tags {
	bottom:0;
	left:0;
}

.scrollable .tag {
	float:left;
	padding:2px;
	cursor:pointer;
	width:114px;
	/*margin-top: 20px;*/
	/*
height:40px;
*/

	-moz-border-radius:4px;
	-webkit-border-radius:4px;

}
#tags .tag {
	width:114px;
	height:50px;
}