@charset "utf-8"; /*公用开始*/ img,div,i,em,a,body,p,H1,ul,li { border-style:none; list-style-type:none; margin:0; padding:0; text-decoration:none } /*公用结束*/ /*缓冲效果开始 2.3加入的*/ #shearphoto_main { visibility:hidden; margin:0 auto; } #shearphoto_loading { width:100px; text-align:center; line-height:130px; color:#999; margin:0 auto; background:url(../images/loading.gif) no-repeat } /*缓冲效果结束*/ /*头部部份开始*/ .header { height:65px; margin-bottom:10px; width:100%; overflow:hidden; background:url(../images/bg_headLine1.png) no-repeat 290px #505153; } .header A { -moz-border-radius:5px; border-radius:5px; color:#FFF; display:inline-block; float:left; font-size:15px; font-weight:700; line-height:50px; text-align:center; width:150px; margin:7px 0 0 100px; background:#3E8BFF; } .header A:hover { text-decoration: underline; background-color: #0F6FFF; } .header img { display:inline-block; float:left; margin-left:20px } .header strong { color:#FFF; display:block; float:right; height:60px; line-height:60px; margin-right:20px } /*头部部份结束*/ /*预览开始*/ #shearphoto_main #preview { float:left; position: relative; } #shearphoto_main #preview a { display:inline; float:left; -moz-border-radius:5px; border-radius:5px; -moz-box-shadow:1px 1px 3px 1px #999; box-shadow:1px 1px 3px 1px #999; overflow: hidden; position: relative; } #shearphoto_main #preview a img { position: relative; } /*预览结束*/ .bottom a:hover { color: #39F; text-decoration: underline; } /*旋转开始*/ #Shearbar #LeftRotate { margin:0 10px; } #Shearbar #LeftRotate em,#Shearbar #RightRotate em { display:inline-block; height:21px; vertical-align:middle; width:15px; margin:1px 3px 0 0; background:url(../images/bch.jpg) no-repeat; } #Shearbar #LeftRotate,#Shearbar #RightRotate { -moz-border-radius:5px; border:1px solid #CCC; border-radius:5px; color:#666; cursor:pointer; float:left; font-size:12px; margin-top:-5px; text-align:center; width:50px; } #Shearbar #LeftRotate:hover,#Shearbar #RightRotate:hover { border:1px solid #919191; color:#414141 } #Shearbar #RightRotate { margin-left:10px } #Shearbar #RightRotate em { background-position:-91px 0; margin:1px 0 0 3px; } #Shearbar .hint { color:#333; display:block; float:left; font-size:12px; font-style:normal; height:19px; line-height:15px; width:19px } #Shearbar .hint.L,#Shearbar .hint.R { background:url(../images/zoom.png) no-repeat -2px -1px } #Shearbar .hint.R { background-position: -43px -1px } /*旋转结束*/ /*选择图片方式开始*/ #shearphoto_main #SelectBox { background:url(../images/bg.png); position:absolute; z-index:180 } #SelectBox #selectImage input { height: 50px; width: 224px; background-color: #FFF; filter:alpha(opacity=0); opacity:0; position: absolute; float: left; cursor: pointer; display: block; } .displayNone { display: none; } #SelectBox #selectImage,#SelectBox #PhotoLoading,#SelectBox #camerasImage { -moz-border-radius:10px; border-radius:10px; -moz-box-shadow:2px 2px 7px 1px #3e4044; box-shadow:2px 2px 7px 1px #3e4044; display:block; height:50px; outline:0 none; position:absolute; width:223px; overflow:hidden; margin:-37px 0 0 -112px; background:url(../images/Select_zh-cn.jpg) no-repeat; } #SelectBox #PhotoLoading { background-position:0 -160px; left:50%; top:70% } #SelectBox #selectImage { background-position:0 -15px; left:50%; top:35% } #SelectBox #camerasImage { background-position:0 -85px; left:50%; top:79% } #SelectBox #selectImage:hover,#SelectBox #PhotoLoading:hover,#SelectBox #camerasImage:hover { border:3px solid #666; margin:-37px 0 0 -112px; } /*选择图片方式结束*/ /*工具条开始*/ #shearphoto_main #Shearbar { padding-top:10px; width:442px; margin:0 auto; } #Shearbar .Psava { clear:both; height:40px; padding:20px 0 0 65px } #Shearbar .Psava #againIMG ,#Shearbar .Psava #saveShear { background:url(../images/btn5.jpg) no-repeat; color:#666; float:left; line-height:31px; margin-right:20px; text-align:center; width:79px; height: 31px; } #Shearbar .Psava #againIMG:hover { background-position: 0px -31px; } #Shearbar .Psava #saveShear { background-position: -79px 0px; color:#FFF; } #Shearbar .Psava #saveShear:hover { background-position:-79px -31px } #Shearbar #ZoomDist { float:left; height:20px; position:relative; width:120px } #Shearbar #ZoomDist #ZoomBar { background:url(../images/ZoomBar.gif) no-repeat; filter:alpha(opacity=80); opacity:0.8; height:20px; left:0; position:absolute; width:15px } #ZoomDist #Zoomcentre { filter:alpha(opacity=100); height:9px; left:50%; top:25px; position:absolute; width:10px; margin-left:-4px; background:url(../images/Zoomcentre.jpg) no-repeat } #ZoomDist .progress { -moz-border-radius:15px; border-radius:15px; background:#999; display:block; float:left; height:8px; margin-top:4px; overflow:hidden; width:100% } /*工具条结束*/ /*主功能界面开始*/ #shearphoto_main #black { position:absolute; z-index:99 } #shearphoto_main .primary { float: left; } #shearphoto_main #main { -moz-user-select:none; -ms-user-select:none; -webkit-user-select:none; background:url(../images/bg.png); overflow:hidden; position:relative; z-index:50; border: 1px solid #CCC; float: left; } #main .BigImg { float:left; position:relative; z-index:51 } .MoveImg { position:relative; z-index:98; max-width:300%; } #preview_img{ max-width:300%; } #main #imgID { display:block; z-index:51 } #main #movebox { position:absolute; z-index:100; float: left; } /*动态边框开始*/ #movebox #borderTop,#movebox #borderLeft,#movebox #borderRight,#movebox #borderBottom { background:url(../images/border.gif) #FFF; display:inline-block; filter:alpha(opacity=50); opacity:0.5; overflow:hidden; position:absolute; z-index:104; } #movebox #borderTop { height:1px; left:0; top:0; width:100%; } #movebox #borderLeft { height:100%; left:0; top:0; width:1px; } #movebox #borderRight { height:100%; right:0; top:0; width:1px; } #movebox #borderBottom { bottom:0; height:1px; left:0; width:100%; } /*动态边框结束*/ /*拉伸截框的八个点开始*/ #main #movebox #BottomRight,#main #movebox #TopRight,#main #movebox #Topleft,#main #movebox #Bottomleft,#main #movebox #Topmiddle,#main #movebox #leftmiddle,#main #movebox #Rightmiddle,#main #movebox #Bottommiddle { background:#000; border:1px solid #FFF; bottom:-5px; cursor:nw-resize; display:block; filter:alpha(opacity=50); height:8px; opacity:0.5; overflow:hidden; position:absolute; right:-5px; width:8px; z-index:105; } #main #movebox #Bottomleft { bottom:-5px; cursor:ne-resize; left:-5px } #main #movebox #Bottommiddle { bottom:-5px; cursor:n-resize; left:50%; margin-left:-5px } #main #movebox #Rightmiddle { cursor:e-resize; margin-top:-5px; right:-5px; top:50% } #main #movebox #TopRight { cursor:ne-resize; right:-5px; top:-5px } #main #movebox #Topleft { cursor:nw-resize; left:-5px; top:-5px } #main #movebox #Topmiddle { cursor:n-resize; left:50%; margin-left:-5px; top:-5px } #main #movebox #leftmiddle { cursor:e-resize; left:-5px; margin-top:-5px; top:50% } /*拉伸截框的八个点结束*/ #main #relat { position:relative; z-index:60 } #main #smallbox { background:url(); overflow:hidden; position:relative; z-index:100 } /*主功能界面结束*/ /*上滚下滚提示的CSS*/ #main .point { width:100%; line-height:35px; font-size:12px; position:absolute; z-index:200; filter:alpha(opacity=70); opacity:0.7; } .point i { display:inline-block; height:16px; width:15px; float:left; margin:10px 10px 0 20px; background:url(../images/bg_repno.png) no-repeat; } /*上滚下滚提示的CSS结束*/ /*截图完成后的CSS开始*/ #shearphoto_main .complete { float:left; overflow:hidden; position:absolute; width:100%; z-index:250; padding:10px 0 0 40px; background:url(../images/bg.jpg) #CCC; } .complete .completeTxt { -moz-border-radius:10px; -moz-box-shadow:0 0 15px 0 #666; border-radius:10px; bottom:30px; box-shadow:0 0 15px 0 #666; position:absolute; right:30px; text-align:center; width:280px; padding:30px 0; background:#FBFDFF; } .complete .completeTxt a { color:#FFF; display:block; font-size:14px; line-height:40px; width:128px; margin:0 auto; background:url(../images/bg_index.gif) no-repeat 0 -2px; } .complete .completeTxt a:hover { background-position: -137px -2px } .complete .completeTxt p { color:#666; font-size:12px; font-weight:700; margin:10px 0; } .complete .completeTxt strong { font-size:14px } .complete img { border:1px solid #CCC; display:inline-block; float:left; margin:5px 5px; padding:2px; } .complete .completeTxt strong i { display:inline-block; height:16px; width:15px; vertical-align:middle; margin:-3px 5px 0 0; background:url(../images/bg_repno.png) no-repeat; } /*截图完成后的CSS结束*/ /*弹出相册开始*/ #photoalbum { -moz-border-radius:10px; -moz-box-shadow:3px 3px 10px 0 #000; border:8px solid #999; border-radius:10px; box-shadow:3px 3px 10px 0 #000; display:none; height:300px; left:50%; position:absolute; top:59%; width:465px; z-index:210; margin:-178px 0 0 -240.5px; background:#DFEFFF; } #photoalbum h1 { background:#999; color:#FFF; font-size:15px; height:40px; line-height:30px; padding-left:10px; width:455px } #photoalbum i { background:url(../images/fancybox_sprite.png) no-repeat; display:block; float:left; height:37px; left:429px; position:absolute; top:0; cursor:pointer; width:36px } #photoalbum ul { height:auto; width:100% } #photoalbum ul li { border:1px solid #CCC; cursor:pointer; display:inline; float:left; height:133px; margin:5px; padding:2px; width:47%; overflow: hidden; } #photoalbum ul li img { width:100% } #photoalbum ul li:hover { border:1px solid #09F } /*弹出相册结束*/ /*弹出拍照开始*/ #CamBox { -moz-border-radius:10px; border-radius:10px; left:67%; position:absolute; -moz-box-shadow:5px 5px 10px 0 #3b3b3f; box-shadow:5px 5px 10px 0 #3b3b3f; width:350px; z-index:250; display:none; top:95%; margin:-285px 0 0 -276px; background:url(../images/cam_bg.jpg) #d5d5d5; } #CamBox #CamFlash { height:300px; width:300px; margin:0 auto; background:#fff; } #CamBox #timing { color:#F60; display:none; font-size:36px; font-weight:700; height:220px; left:50%; line-height:200px; position:absolute; text-align:center; top:50%; width:200px; margin:-100px 0 0 -100px; } #CamBox .cambar { height:60px; padding-top:20px; width:300px; margin:0 auto; } #CamBox .cambar a { background:url(../images/btn5.jpg) no-repeat; float:left; height:31px; line-height:31px; text-align:center; width:79px } #CamBox .lens { background:url(../images/cam.png) no-repeat 50%; height:40px; width:100% } #CamBox .cambar #camClose,#CamBox .cambar #setCam { color: #333; } #CamBox .cambar #setCam { margin-right: 30px; } #CamBox .cambar #camClose:hover,#CamBox .cambar #setCam:hover { background-position: 0 -31px; } #CamBox .cambar #CamOk { background-position: -79px 0; color: #fff; margin-right: 30px; } #CamBox .cambar #CamOk:hover { background-position: -79px -31px; } /*弹出拍照结束*/ /*图片特效*/ #shearphoto_main .Effects { color:#FFF; overflow-x:hidden; width:155px; display:none; float:left; border-color:#CCC; border-style:solid none; border-width:1px; background:url(../images/Effects/cardboard.png); } #shearphoto_main .Effects .EffectsStrong { border-bottom:solid 1px #676767; display:block; font-size:14px; height:30px; line-height:30px; text-align:center; width:100% } #shearphoto_main .Effects a { border-bottom:solid 1px #676767; color:#FFF; display:block; vertical-align:middle; text-shadow:#000 0 2px 0; width:100%; padding:5px 0 7px; } #shearphoto_main .Effects a:hover, #shearphoto_main .Effects .Aclick { background-color: #A7A7A7; } #shearphoto_main .Effects a img { -moz-border-radius:3px; border-radius:3px; display:inline-block; height:42px; vertical-align:middle; -moz-box-shadow:0 0 5px 0 #000; box-shadow:0 0 5px 0 #000; width:70px; margin:2px 7px 0; } ::-webkit-scrollbar { height:13px; width:13px } ::-webkit-scrollbar-thumb { background:padding-box #c2c2c2; border:1px solid #979797; min-height:28px } ::-webkit-scrollbar-thumb:hover { background:#929292; border:1px solid #636363 } ::-webkit-scrollbar-track-piece { background:#f5f5f5; border-left:1px solid #d2d2d2 } /*图片特效结束*/ /*底部开始*/ .bottom { width:1000px; left:2px; color:#666; clear:both; text-align:center; margin:0 auto; padding:0 0 10px 5px } .bottom span { vertical-align:middle; display:inline-block; margin:0 5px 0 2px } .bottom a { color: #666; } .header h1 a { font-size: 14px; color: #fff; } .bottom span img { border-radius:30px; -moz-border-radius:30px; } /*底部结束*/