ul { margin: 0; padding: 0; list-style: none; }

body { margin: 0; }

img { border: none; }

.photo-title { height: 34px; line-height: 30px; background: url(../images/photo-title-bj.gif) repeat-x; font-size: 14px; padding: 0 20px; margin: 0; }

#photo-cont { background: #f5f5f5; padding: 20px; position: relative; overflow: hidden; }

/*left*/
.photo-left { width: 146px; float: left; background: url(../images/photo-scroll-mid-bj.gif) repeat-y; }
.photo-left .top-part, .photo-left .bottom-part { height: 30px; cursor: pointer; }
.photo-left .top-part { padding-top: 10px; height: 20px; }

.photo-left .top-part, .photo-left .bottom-part, .top-part-arrtop, .top-part-arrbottom { background: url(../images/photo-scroll-pic.gif) no-repeat; }

.photo-left .bottom-part { background-position: 1px -157px; }

.top-part-arrtop, .top-part-arrbottom { width: 25px; height: 13px; display: block; margin: 0 auto; }

.top-part-arrtop { background-position: 0 -64px; }

.top-part-arrbottom { background-position: 0 -115px; }

.mid-part { width: 104px; height: 534px; margin: 0 auto; position: relative; overflow: hidden; }
.mid-part ul { position: absolute; *width: 100px; }
.mid-part li { display: block; width: 100px; height: 100px; margin: 4px auto; position: relative; }
.mid-part li a { height: 88px; width: 88px; padding: 5px; border: 1px solid #cccccc; text-align: center; vertical-align: middle; display: block; font-size: 0px; font-family: Arial; text-decoration: none; }
.mid-part li a:hover { border: 1px solid #6699cc; }
.mid-part li .current { width: 5px; height: 8px; position: absolute; right: -4px; top: 45px; background: url(../images/photo-scroll-pic-arr.gif) no-repeat; }
.mid-part li .currentItem { border: 1px solid #6699cc; }
.mid-part li img { width: 90px; height: 90px; border: none; }

/*middle*/
.contwrap { float: left; position: relative; width: 84%; }

.photo-name { font-size: 16px; text-align: center; margin-bottom: 10px; }

.photo-midarr { width: 70px; height: 70px; float: left; top: 236px; cursor: pointer; position: relative; }

.photo-wrap-wide, .photo-wrap-narrow { float: left; padding: 2px; text-align: center; margin: 0 20px; background: #fff; }

.photo-wrap-wide { width: 680px; background: url(loading.gif) center center no-repeat; }

.photo-wrap-narrow { width: 560px; }

.cont-wide { width: 870px; margin: 0 auto; position: relative; }

.cont-narrow { width: 750px; margin: 0 auto; }

.photo-tool { width: auto; height: 56px; line-height: 56px; position: absolute; right: 0; padding: 0 10px; top: 15px; }
.photo-tool .leftside, .photo-tool .rightside { width: 11px; float: left; height: 56px; background: url(../images/photo-tool-bj.png) no-repeat; }
.photo-tool .leftside { background-position: 0 0; }
.photo-tool .midwrap { float: left; height: 56px; background: url(../images/photo-tool-bj.png) repeat-x 0 -173px; }
.photo-tool .rightside { background-position: 0 -79px; }

.photo-tool-icon { position: relative; }
.photo-tool-icon .maq, .photo-tool-icon .narrow, .photo-tool-icon .spin, .photo-tool-icon .restore, .photo-tool-icon .play { font-size: 0; text-indent: -999em; width: 43px; height: 32px; float: left; cursor: pointer; display: block; background: url(../images/photo-tool-icon.gif) no-repeat; position: relative; top: 14px; overflow: hidden; }
.photo-tool-icon .maq { background-position: 0 0; }
.photo-tool-icon .maq:hover { background-position: 0 -271px; }
.photo-tool-icon .narrow { background-position: 0 -50px; }
.photo-tool-icon .narrow:hover { background-position: 0 -326px; }
.photo-tool-icon .spin { background-position: 0 -109px; }
.photo-tool-icon .spin:hover { background-position: 0 -385px; }
.photo-tool-icon .restore { background-position: 0 -160px; }
.photo-tool-icon .restore:hover { background-position: 0 -440px; }
.photo-tool-icon .play { background-position: 5px -216px; }
.photo-tool-icon .play:hover { background-position: 5px -504px; }
.photo-tool-icon .play.w-30px { width: 20px; }

.photo-btn-wrap { height: 50px; line-height: 50px; clear: both; text-align: center; background: #F5F5F5; }

.photo-btn { width: 112px; height: 37px; background: url(../images/photo-scroll-pic.gif) no-repeat 0 -214px; padding: 0; margin: 0; border: none; cursor: pointer; font-size: 0; }
.photo-btn span { display: none; }

/*clear*/
.clearfix { display: block; *zoom: 1; }
.clearfix:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden; }

.clear { clear: both; height: 0; line-height: 0; font-size: 0; }