body{
	margin:0px;
	font:normal 12px  "微软雅黑","宋体",Arial, Helvetica, sans-serif;
	color:#333333;
	background-image: url(photoviewerbg.png);
	background-repeat: repeat-x;
	background-position: center top;
}
h1,h2,h3,h4,h5,h6,ul,li,p,span{list-style-type:none;margin:0px;padding:0px;}
img{ border: none;}
a { color:#767676; text-decoration:none; }
a:hover { color: #F60;}
.top, .DivContainer{
	border-left:1px solid #dedede;
	border-right:1px solid #dedede;
	background-color: #FFF;
}
.top{
	width:960px;
	height:45px;
	margin:auto;
	border-bottom:1px solid #ccc;
	padding-bottom:10px;
}
.top h1{
	height:45px;
	background-image: url(photovieweralbum_title_bg.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}
.location{ height:40px; line-height:40px; font-size:12px; font-weight:normal; float:right; margin-right:10px;}
.DivContainer{
	width:960px;
	height:auto;
	margin:0 auto;
}

.DivAlbumTitle{
	color: #F5F5F5;
	font-weight:bold;
	border-bottom: 1px dotted #ccc;
	margin-bottom:10px;
	padding-top:5px;
}
.DivAlbumTitle h1{ height:30px; line-height:30px; font-size:12px; color:#777; padding-left:20px; width:920px;}
.title{ font-size:20px; line-height:30px;}
.spanCurrentIndex,.spanImgCount,.time{ font-size:12px;}
.DivAlbumTitle p{
	font-weight:normal;
	color:#666;
	padding-left:20px;
	line-height:2em;
	width:920px;
	text-indent:2em;
}
.more a { color: #C00; text-decoration:none; }
.more a:hover { color: #F60;}

.DivPhotoDsn{
	border-bottom:1px solid #ccc;
	padding-bottom:10px;
}
.DivPhotoDsn h1{ clear:both; height:20px; line-height:20px; font-size:14px; color:#777; padding-left:20px; width:920px;}
.DivPhotoDsn p{
	font-weight:normal;
	color:#666;
	padding-left:20px;
	line-height:2em;
	width:920px;
	text-indent:2em;
text-align: center;
}

.ImgNav{
	width:120px;
	height:95px;
	//background-color: #F3F3F3;
	position:relative;
	float:left;
	border:0px solid #ccc;
	margin:13px 12px;
	_margin:13px 9px;
}
.DivThumbBar{
	height:125px;
	padding:0;
	margin:0;
}
/*.DivThumbBar div{
	border:1px solid #ccc;
	float:left;
	position:relative;
	height:95px;
}*/
.scrollable {
	position:relative;
	top:0px;
	overflow:hidden;
	width: 580px;
	height:120px;
	height:95px;
	float:left;
	border:1px solid #ccc; 
	background:url(photoviewerh300.png) repeat-x;
	margin:13px 3px;
	_margin:13px 2px;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
	top: 2px;
}

.items div {
	float:left;
	width:580px;
}

/* single scrollable item */
.scrollable img {
	float:left;
	margin:5px 2px 5px 5px;
	background-color:#fff;
	padding:2px;
	border:2px solid #ccc;
	width:100px;
	height:75px;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	
	cursor:pointer;
}

/* active item */
.scrollable .active {
	border:2px solid #FF3300;
	position:relative;
	cursor:default;
}

/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	display:block;
	width:30px;
	height:30px;
	float:left;
	margin:43px 6px;
	cursor:pointer;
	font-size:1px;
	background-image: url(photoviewerhori_large.png);
	background-repeat: no-repeat;
}

/* right */
a.right 				{ background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover 		{ background-position:-30px -30px; }
a.right:active 	{ background-position:-60px -30px; } 


/* left */
a.left				{ margin-left: 0px; } 
a.left:hover  		{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }

/* up and down */
a.up, a.down		{ 
	background:url(../../photoviewer/images/vert_large.png) no-repeat; 
	float: none;
	margin: 10px 50px;
}

/* up */
a.up:hover  		{ background-position:-30px 0; }
a.up:active  		{ background-position:-60px 0; }

/* down */
a.down 				{ background-position: 0 -30px; }
a.down:hover  		{ background-position:-30px -30px; }
a.down:active  	{ background-position:-60px -30px; } 


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}


/*图片内容*/
.DivPhtoCon{
	height:530px;
	position:relative;
	overflow:hidden;
	padding:0;
}
.DivImgLoadingTips{
	width:40px;
	height:40px;
	position:absolute;
	top:45%;
	left:440px;
	Z-INDEX: 100;
	line-height:40px;
	display:none;
}

.DivBtnPrev {
	Z-INDEX: 100;
	POSITION:absolute;
	WIDTH: 35px;
	HEIGHT: 51px;
	TOP: 45%;
	CURSOR: pointer;
	LEFT: 30px;
	display:none;
}
.DivBtnNext {
	Z-INDEX: 100;
	POSITION: absolute;
	WIDTH: 35px;
	HEIGHT: 51px;
	TOP:45%;
	CURSOR: pointer;
	RIGHT: 30px;
	display:none;
}
#SpanPlayPrev {
	BACKGROUND-IMAGE: url(photoviewerleftbig.png);
	WIDTH: 35px;
	DISPLAY: block;
	HEIGHT: 51px;
	_background: none;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='../images/leftbig.png');
}
#SpanPlayNext {
	BACKGROUND-IMAGE: url(photoviewerrightbig.png);
	WIDTH: 35px;
	DISPLAY: block;
	HEIGHT: 51px;
	_background: none;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='../images/rightbig.png');
}

 #image_wrap {
	width:100%;
	height:520px;
	position:absolute;
	top:5px;
	Z-INDEX: 90;
	text-align:center;
	line-height:520px;
	display:block;
}
#image_wrap  img{
    border:2px solid #fff;
	outline:1px solid #ddd;
	-moz-ouline-radius:4px;
	vertical-align: middle;
 }

/*底部  版权*/
.footer{
	clear:both;
	height:112px;
	margin:auto;
	text-align: center;
}
.footer_con{ width:960px; margin:auto; line-height:18px; padding-top:8px;}

.DivPhotoPlugins{
	height:16px;
	overflow:hidden;
	clear:both;
	color:#767676; padding-right:90px;
}

.DivPhotoPlugins ul{float:right; padding:0; margin:0 5px;}
.DivPhotoPlugins li{ display:inline;  width:auto;}
.DivPhotoPlugins a, .DivPhotoPlugins a:visited{
	color:#767676;
	text-decoration: none;
}
.DivPhotoPlugins a:hover{
	color:#AE5700;
	text-decoration: underline;
}

.SpanIco{
	margin:0 6px;
	padding-left:18px;
	background:url(photoviewerbg03.png) no-repeat;
}
.IcoComment{ background-position:0 3px;}
.IcoComment:hover{ background-position:0 -24px;}
.IcoSource{ background-position:0 -51px;}
.IcoSource:hover{ background-position:0 -79px;}
.IcoAllImg{ background-position:0 -105px;}
.IcoAllImg:hover{ background-position:0 -132px;}


/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/

/*底部  版权*/
.footer{
	clear:both;
	height:112px;
	margin:auto;
	text-align: center;
	background-image: url(photoviewerfooter_bg.jpg);
	background-repeat: repeat-x;
	background-position: left top;
}
.footer_con{ width:1000px; margin:auto; line-height:18px; padding-top:8px;}
.footer_conAll{ width:1000px; margin:auto; }
/*.footer_con2{ width:418px; margin:auto; line-height:18px; padding-top:8px;}*/
.footer_con2{ width:1000px; margin:auto; line-height:18px; padding-top:8px;}
.footer_con3{ width:418px; float:left;}