/* body { margin:0; padding:0; background: url('/scripts/overlay/overlay.png') repeat 0 0;}  <-- THIS DEFAULT BODY STYLE IS JUST TO FAKE A GRAYED-OUT BACKGROUND. SHOULD BE REMOVED ONCE TRUE OVERLAY EFFECT IS IMPLEMENTED!*/

#gallery-container {font-family: helvetica, arial, sans-serif; width: 870px; /**width: 900px; IE7 and below*/ padding:50px; background-color: #fff; margin-top:400px !important;text-align: left; overflow:hidden; height:690px; background:url(../images/Picture2xiaobeijing_03.png); margin:0 auto;}

#gallery-container a,
#gallery-container a:hover {color:#886200; text-decoration: none;}

div.gallery-title { display:block; margin-bottom:20px; padding-bottom:10px; border-bottom: 1px dotted #7f7f7f;}
	div.gallery-title h3 {font-size:18px; font-weight:normal; line-height:1.1; color:#333; padding:0px 0px 7px 0px; margin:0px;}
	#gallery-container div.gallery-title a { color:#9a9481; font-size:11px; font-weight:bold;}
	#gallery-container div.gallery-title a:hover { color:#4c4c4c;}

div.content { 
/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */ 
display: none; float: right; width: 462px; }
div.content a, div.navigation a { text-decoration: none; color: #777;}
div.content a:focus, div.content a:hover, div.content a:active { text-decoration: underline;}

div.controls { overflow:hidden; border-bottom:1px dotted #ccc; padding-bottom:5px; height:25px\9; /*targets IE only*/}
div.controls a { font-size:10px; line-height:105%; display: block; margin: 0px 0px 0px 4px; padding: 4px 4px 2px 4px; border: 1px solid #ccc;}
div.controls a:hover {background-color: #e8e6e2;}
div.ss-controls { float: left;}
div.nav-controls { float: right; width:165px;}
	div.nav-controls a { float:left;}

div.slideshow-container { position: relative; clear: both; height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */}

div.loader { position: absolute; top: 0; left: 0; background-image: url('file:///css/loader.gif'); background-repeat: no-repeat; background-position: center; width: 550px; height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */}

div.slideshow { }
div.slideshow span.image-wrapper { display: block; /*float:left; width:446px; */position: absolute; top:45px; /*top: 0; left: 0;*/ }
div.slideshow a.advance-link { display: block; width: 100%; height: 100%; text-align: center;}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited { text-decoration: none;}
div.slideshow img {float:left; border: 8px solid #FFF; box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);	-webkit-box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5); border-color:#b9af99\9; /*degrade since IE's don't show shadows*/ }

/* added by Poulin */
div.slideshow img {max-width:446px; max-height:390px;}

div.caption-container { }
span.image-caption { display: block; padding:0px; /*position: absolute;*/ /*width:300px; top:0px; right:0px;*/}
div.caption { font-size:11px;  /*position:absolute; top:0px; right:0px;*/ width:446px; /*float:left;*/ position:absolute;}
div.image-title { font-weight: bold; font-size: 13px; margin-top:15px; /*position:absolute; top:0px; left:-50px;*/ /*float:left; width:446px;*/ /*position:absolute;*/ display:block; }
#captionToggle a {font-size:10px; line-height:105%; float: right; display: block; margin-top: 5px; padding: 5px 0px 5px 5px;}

div.image-desc { line-height: 1.2em; padding-top: 10px; display:block; /*position:absolute;  bottom:0px; left:0px;*/ width:446px; /*height:100px;*/ position:fixed; left:400px; bottom:20px; border-top:1px dotted #CCC; }
div.navigation { /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */ }

ul.thumbs { clear: both; margin: 0; padding: 0px; overflow:hidden; }
/*ul.thumbs li { float: left; padding: 0; margin: 5px 10px 5px 0; list-style: none;}*/

ul.thumbs li { float: left; padding: 0; margin: 5px 10px 5px 0; list-style: none; width:75px; height:75px; overflow: hidden; border: 5px solid #FFF; 
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);	-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);	-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4); border-color:#b9af99\9; /*degrade since IE's don't show shadows*/}

ul.thumbs li.selected { border-color:#e8e6e2; border-color:#a39c8b\9; /*IE addition so that highlight is different from basic border*/}

a.thumb { padding: 0px; display: block; }
ul.thumbs li.selected a.thumb { background: #e8e6e2;}
a.thumb:focus { outline: none;}
/*ul.thumbs img {max-height:75px; border: none; display: block;}*/
ul.thumbs img {width:75px; min-width:75px; min-height:75px; border: none; display: block;}

div.gall-pagination { clear: both;}
div.navigation div.top { display:none;}
div.navigation div.bottom { display:block; border-top:1px dotted #ccc; margin-top:15px; padding-top:5px; overflow:hidden; width:94%;}
div.gall-pagination a, 
div.gall-pagination span.current, 
div.gall-pagination span.ellipsis { font-size:10px; line-height:105%; display: block; float: left;	margin-right: 4px;	padding: 4px 4px 2px 4px; border: 1px solid #ccc;}
div.gall-pagination a:hover {background-color: #e8e6e2; }
div.gall-pagination span.current {font-weight: bold; background-color: #4c4c4c; border-color: #4c4c4c; color: #fff;}
div.gall-pagination span.ellipsis { border: none; padding: 5px 0 3px 2px;}


div.download-pod { font-size:11px; color:#886200; width:432px; height:22px; background:url(../images/Picture2lusetiao_03.png); margin-top:10px;}
	#gallery-container div.download-pod a:hover { text-decoration:underline;}
	
/*CONDITIONAL CLASSNAMES -- combined with HTML header code, targets IE8 and below ONLY*/
.lt-ie9 #gallery-container {width: 900px; border:0px;}
.lt-ie9 div.content { float:none; position: absolute; left:400px;}
/*.lt-ie9 div.slideshow-container {position: absolute; left:400px;}*/