/*

	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.
	NOTE - The markup below represents the DOM generated by the GalleryView plugin, NOT the markup you would include in your HTML file.
		   Refer to README.txt to review markup requirements.
	
	<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:white ;
    border: 1px solid white;
    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;
    height:60px !important;
}

/* FILMSTRIP FRAMES (contains both images and captions) */
.frame
{
    height:60px !important;
}

/* 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: transparent;
    width: 1000px; /*background-color:White;*/ /*width:150px !important;*/
}

/* TRANSPARENT BORDER FIX FOR IE6 */
/* NOTE - DO NOT CHANGE THIS RULE */
*html .pointer
{
    filter: chroma(color=pink);
}

.test
{
    float: left;
    width: 473px;
    background-image: url(../images/r_buttom.png);
    background-repeat: repeat-x;
    height: 32px;
}
.arrow
{
    float: left;
    background-image: url(../images/r_triangle.png);
    background-repeat: no-repeat;
    height: 32px;
    width: 54px;
}

.borders
{
    background-image: url("../images/r_border.png");
    background-repeat: no-repeat;
    height: 235px;
    position: absolute;
    top: 0;
    width: 540px;
    z-index: 1000;
}

.strip_wrapper
{
    height:60px !important;
}

.filmstrip ul
{
    margin:2px 0 0;
}