/*

    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.
*/

/* GALLERY LIST */
/* IMPORTANT - Change '#myGallery' to the ID of your gallery list to prevent a flash of unstyled content */
#myGallery { display: none ;  }

.gvv_galleryWrap { position: relative ; background: #222 ; font-size: 10pt ;-moz-box-sizing:content-box ;box-sizing:content-box ;-webkit-box-sizing:content-box ;}

/* GALLERY DIV */
.gvv_gallery { overflow: hidden ; position: relative ;}

.gvv_imageStore { visibility: hidden ; position: absolute ; top: -10000px; left: -10000px ; }


/*************************************************/
/**   PANEL STYLES                                **/
/*************************************************/

.gvv_panelWrap { filter: inherit ; position: absolute ; overflow: hidden ; }

.gvv_panel-loading { background: url(img-loader.gif) 50% 50% no-repeat #aaa ; }
.gvv_frame-loading { background: url(img-loader.gif) 50% 50% no-repeat #aaa ; }

/* GALLERY PANELS */
.gvv_panel { filter: inherit ; position: absolute ;  top: 0 ; left: 0 ; overflow: hidden ; z-index: 100 ; }
.gvv_panel img { position: absolute ; }

.gvv_overlay { position: absolute ; background: #222 ; color: white ; z-index: 200 ;opacity:0.7 ; }
.gvv_showOverlay { 
    position: absolute ; 
    width: 20px ; 
    height: 20px ; 
    opacity:0.7 ;
    /*background: url(themes/light/info.png) #222; */
    cursor: pointer ;
    z-index: 200 ;
}
.gvv_overlay h4 { color: white ; margin: 1em ; font-weight: bold ;font-size: inherit ;;line-height:  inherit ; }
.gvv_overlay p { color: white ; margin: 1em ; }

.gvv_infobar {
    background: #222  ;
    padding: 0 0.5em ;
    line-height: 1.5em ;
    height: 1.5em ;
    font-size: 10pt ;
    font-weight: bold ;
    color: white ;
    position: absolute ;
    bottom: 0 ;
    right: 0 ;
    display: none ;
    vertical-align: middle ;
    z-index: 2000 ;
    
}


/*************************************************/
/**   FILMSTRIP STYLES                            **/
/*************************************************/

.gvv_filmstripWrap { overflow: hidden ; position: absolute ; }


/* FILMSTRIP */
.gvv_filmstrip { margin: 0 ; padding: 0 ; position: absolute ; top: 0 ; left: 0 }

/* FILMSTRIP FRAMES (contains both images and captions) */
.gvv_frame { 
    cursor: pointer ;
    float: left ;
    position: relative ;
    margin: 0 ;
    padding: 0 ;
}

/* WRAPPER FOR FILMSTRIP IMAGES */
.gvv_frame .gvv_thumbnail { position: relative ;overflow: hidden ; }

/* WRAPPER FOR CURRENT FILMSTRIP IMAGE */
.gvv_frame.current .gvv_thumbnail {}

/* FRAME IMAGES */
.gvv_frame img { border: none ; position: absolute ; }

/* FRAME CAPTION */
.gvv_frame .gvv_caption { height: 14px ; line-height: 14px ; font-size: 10px ; text-align: center ; color:white ; word-wrap: break-word;}

/* CURRENT FRAME CAPTION */
.gvv_frame.current .gvv_caption { }

/* POINTER FOR CURRENT FRAME */
.gvv_pointer {
    border-color: black ;
}

/* NAVIGATION BUTTONS */
.gvv_navWrap {
    text-align: center ;
    position: absolute ;
}
.gvv_navPlay,
.gvv_navPause,
.gvv_navNext,
.gvv_navPrev {
    
    opacity: 0.3 ;
    -moz-opacity: 0.3 ;
    -khtml-opacity: 0.3 ;
    filter:alpha(opacity=30) ;
    display:-moz-inline-stack ;
    display:inline-block ;
    zoom:1 ;
    *display:inline ;
    vertical-align: middle ;
}
.gvv_navPlay:hover,
.gvv_navPause:hover,
.gvv_navNext:hover,
.gvv_navPrev:hover {
    opacity: 0.8 ;
    -moz-opacity: 0.8 ;
    -khtml-opacity: 0.8 ;
    filter:alpha(opacity=80) ;
}

.gvv_panelNavPrev,
.gvv_panelNavNext {
    position: absolute ;
    display: none ;
    opacity: 0.50 ;
    -moz-opacity: 0.50 ;
    -khtml-opacity: 0.50 ;
    filter:alpha(opacity=50) ;
    z-index: 200 ;
}

.gvv_panelNavPrev:hover,
.gvv_panelNavNext:hover {
    opacity: 0.9 ;
    -moz-opacity: 0.9 ;
    -khtml-opacity: 0.9 ;
    filter:alpha(opacity=90) ;
}

.gvv_navPlay {
    height: 30px ;
    width: 30px ;
    cursor: pointer ;
    background: url(themes/light/play-big.png) top left no-repeat ;
}
.gvv_navPause {
    height: 30px ;
    width: 30px ;
    cursor: pointer ;
    background: url(themes/light/pause-big.png) top left no-repeat ;
}
.gvv_navNext {
    height: 20px ;
    width: 20px ;
    cursor: pointer ;
    background: url(themes/light/next.png) top left no-repeat ;
}
.gvv_navPrev {
    height: 20px ;
    width: 20px ;
    cursor: pointer ;
    background: url(themes/light/prev.png) top right no-repeat ;
}
.gvv_panelNavNext {
    height: 20px ;
    width: 20px ;
    cursor: pointer ;
    background: url(themes/light/panel-next.png) top left no-repeat ;
}
.gvv_panelNavPrev {
    height: 20px ;
    width: 20px ;
    cursor: pointer ;
    background: url(themes/light/panel-prev.png) top right no-repeat ;
}


.gvv_thumbnail {
	border: solid 3px #FFF;
	
	-ms-filter: "progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=130, Color='#AAAAAA')";
	filter: progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=130, Color='#AAAAAA');
        
}

.gvv_thumbnail  img{
 background:none ;   
 border:none ;  
 height:inherit ;  
 margin: auto ;
 position:relative; 
}
.gvv_panel img{
    
    background:none ;
    border:none  ;
    margin:none ;
    padding:none ;
    cursor: pointer;
}
.gvv_panel img{max-width: 100%;}
#overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0.8;
    /*background:rgba(255,255,255,0.8); or just this*/
    z-index:50;
    color:#fff;
}

.overlay-close{
    
    background: rgba(0, 0, 0, 0) url("../images/vl-box/cls2.png") no-repeat scroll 0 0;
    cursor: pointer;
    height: 36px;
    position: absolute;
    right: -12px;
    width: 36px;
    z-index: 160;
	
    
}