/*TwoHawks/HTH Modifications  "HTHcustCap2b"   by TwoHawks  Oct 2011
   {Internal ref: dev file = scrlightboxHTHcustCap2b.js / stylightboxHTHcustCap2b.css}
   LB Version: 2.05 with SEB autoresize and HTH recaptioning version 1b, bottom nav buttons, close button on top of caption area, ++see list in js

   To Lokesh, if you find any of my proposed changes worthy of inclusion in your LB updates, by all means feel free to incorporate.
    with gratitude, TwoHawks

To use this
FIND AND UPDATE THE PATHWAYS FOR 8 occurances of...
  #prevLink?:hover  ....(url(/path_to_prev-next.gifs)

...WITH YOUR OWN PATHWAY

For Example: if you placed those images in a folder named "images" in your site's home folder, then
Then Change this
  /lightboxHTHcustCapxx/images/prevlabel.gif  
To this
  /images/prevlabel.gif  

Tip: the beginning "/" means "my home or root directory ;^)
 
*/
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: 16px;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; /*font-size:12px;*/} /*HTH: had to add font-size constriction because I use ems, and in Chrome I noticed the close button became unclickable due to overgrowth of the font-size.  UPDATE: Bug fix added in (see) lighbox.js ~line 293 scaleContent:false, 
ADD: some have suggested http://outburst.jloop.com/2009/06/19/lightbox-close-button-not-working/#comment-108355
...adding overflow:hidden */
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

/* HTH lower nav buttons */
#hoverNav2{ float:left; padding-bottom: 1px; position:relative; width:140px; height:16px; /*width: auto;*/}
#imageContainer>#hoverNav2{ left: 0;}
#hoverNav2 a{ outline: none;}
/* --------------------------- */

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}   /* non persistent button */
/* #prevLink { left: 0; float: left;background: url(/global/images/prevlabel.gif) left 100% no-repeat; }   persistent button, 15% default position */
#nextLink { right: 0; float: right;} /*   non-persistent button */
/*#nextLink { right: 0; float: right;background: url(/global/images/nextlabel.gif) right 100% no-repeat; } persistent button, 15% default position */
#prevLink:hover, #prevLink:visited:hover { background: url(/global/images/prevlabel.gif) left 100% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/global/images/nextlabel.gif) right 100% no-repeat; }

/* HTH lower nav buttons */
#prevLink2 { width: 63px; height: 15px; float:left; background: url(/global/images/prevlabel_tr.gif) left 0% no-repeat; /* Trick IE into showing hover */ display: inline-block;}/* persistent button, 15% default position position: absolute; left: 0;  */
#nextLink2 { width: 63px; height: 15px; float:right; background: url(/global/images/nextlabel_tr.gif) right 0% no-repeat; /* Trick IE into showing hover */ display: inline-block;}/* persistent button, 15% default position margin-left:70px; */
#prevLink2:hover, #prevLink2:visited:hover, #prevLink2:active { border-bottom: solid green 1px; background-color:#F5F5DC; }
#nextLink2:hover, #nextLink2:visited:hover, #nextLink2:active { border-bottom: solid green 1px; background-color:#F5F5DC; }
/* --------------------------- */

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: hidden; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ position:relative; width: 100%;  text-align: left; }
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding: 0.5em 0px; width: 100%;	}			/*position:relative;  */			
#imageData #bottomNav{ height:16px; float:right; margin-left:5px;  outline: none;} /* position:absolute; right:0px; top:0px; */	 	
#imageData #bottomNavClose { display: inline-block; line-height:0.8em; }
#imageData #bottomNavClose:hover, #imageData #bottomNavClose:active, #imageData #bottomNavClose:focus {border-bottom: solid red 1px; background-color:#FFF2DE;}/* #FFDEAD #FFE8C6 FFF4E2 */

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 100%; background-color: #000; } /* HTH: change height from 500px to 100% so Opera 10++ doesn't error if you are using base styling to set html/body height to , say 100%. 
Think this is working in all browsers BUT YOU MAY NOT BE ABLE TO USE THIS without FIRST setting css hdight:100% for html and body tags */