/*





	GalleryView Stylesheet


	


	Use the CSS rules below to modify the look of your gallery.


	


	To create additional rules, use the markup below as a guide to GalleryView's architecture.


	


	<div class="gallery">


		<div class="panel">


			<img src="path/to/image.jpg" />


			<div class="panel-overlay">


				...overlay content...


			</div>


			<div class="overlay-background"></div>


		</div>


		<ul class="filmstrip">


			<li class="frame current">


				<img src="path/to/thumbnail.jpg" />


				<div class="caption">caption text</div>


			</li>


			<li class="frame">


				<img src="path/to/thumbnail.jpg" />


				<div class="caption">caption text</div>


			</li>


		</ul>


	</div>


		





*/





/* GALLERY LIST */


/* IMPORTANT - Change '#photos' to the ID of your gallery list to prevent a flash of unstyled content */


#photos { visibility: hidden; }





/* GALLERY CONTAINER */


.gallery { background: #ddd; border: 1px solid #aaa; padding: 5px;}





/* LOADING BOX */


.loader { background: url(loader.gif) center center no-repeat #ddd; }





/* GALLERY PANELS */


.panel {}





/* DEFINE HEIGHT OF PANEL OVERLAY */


/* NOTE - It is best to define padding here as well so overlay and background retain identical dimensions */


.panel .panel-overlay,


.panel .overlay-background { height: 60px; padding: 0 1em; }





/* PANEL OVERLAY BACKGROUND */


.panel .overlay-background { background: #222; }





/* PANEL OVERLAY CONTENT */


.panel .panel-overlay { color: white; font-size: 0.7em; }


.panel .panel-overlay a { color: white; text-decoration: underline; font-weight: bold; }






/* FILMSTRIP */


/* 'margin' will define top/bottom margin in completed gallery */


.filmstrip { margin: 5px; }





/* FILMSTRIP FRAMES (contains both images and captions) */


.frame {}





/* WRAPPER FOR FILMSTRIP IMAGES */


.frame .img_wrap { border: 1px solid #aaa; }





/* WRAPPER FOR CURRENT FILMSTRIP IMAGE */


.frame.current .img_wrap { border-color: #000; }





/* FRAME IMAGES */


.frame img { border: none; }





/* FRAME CAPTION */


.frame .caption { font-size: 11px; text-align: center; color: #888; }





/* CURRENT FRAME CAPTION */


.frame.current .caption { color: #000; }





/* POINTER FOR CURRENT FRAME */


.pointer {


	border-color: #000;


}





/* TRANSPARENT BORDER FIX FOR IE6 */


/* NOTE - DO NOT CHANGE THIS RULE */


*html .pointer {


	filter: chroma(color=pink);


}