@charset "utf-8";
/* 
*skin.wps.cn
*Author: maxiaorou
*Date: 20140514
 */
/* less  */
body {
  color: #464646;
}
#container {
  position: relative;
  width: 688px;
  height: 502px;
  background: #fff;
}
/* 头部  */
header {
  height: 65px;
  background: url("img/bg.png?v=1-23-16-53") repeat-x 0 0;
}
.topbar {
  height: 30px;
}
.logo {
  float: left;
  width: 160px;
  color: #fff;
  font-size: 12px;
  line-height: 24px;
  font-weight: bold;
}
.logo .icon_w {
  float: left;
  width: 24px;
  height: 24px;
  padding-right: 8px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -370px 0;
}
.topbtn {
  float: right;
  width: 60px;
  padding-top: 1px;
  padding-right: 1px;
}
.icon_close {
  display: block;
  float: right;
  width: 34px;
  height: 28px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat 9px -122px;
}
.icon_close:hover {
  background-position: -21px -122px;
}
.icon_close:active {
  background-position: -51px -122px;
}
.movearea {
  z-index: ;
  position: absolute;
  top: 0;
  left: 0;
  width: 655px;
  height: 29px;
}
/* 导航位置 */
.navbar {
  width: 100%;
  height: 36px;
}
nav {
  float: left;
  width: 450px;
  height: 35px;
  padding-left: 20px;
  overflow: hidden;
}
nav li {
  float: left;
  width: 113px;
  font-size: 14px;
  line-height: 36px;
  text-align: center;
  position: relative;
}
nav li a:link,
nav li a:visited,
nav li a:hover,
nav li a:active {
  display: block;
  height: 36px;
  color: #fff;
}
nav li a:hover {
  text-decoration: none;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -130px -79px;
}
nav li a:active,
nav li.current a {
  color: #fff;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat 0 -79px;
}
nav li span {
  display: block;
  padding-left: 14px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat;
}
nav li .icon_recommend {
  background-position: -364px -41px;
}
nav li .icon_suit {
  background-position: -364px -120px;
}
nav li .icon_my {
  background-position: -364px -200px;
}
nav li .icon_new {
  display: none;
  position: absolute;
  top: 1px;
  right: 5px;
  width: 16px;
  height: 18px;
  padding-left: 0;
  background-position: -220px -40px;
}
nav li a:active .icon_recommend,
nav li.current .icon_recommend {
  background-position: -364px -80px;
}
nav li a:active .icon_suit,
nav li.current .icon_suit {
  background-position: -364px -160px;
}
nav li a:active .icon_my,
nav li.current .icon_my {
  background-position: -364px -240px;
}
nav li .dot {
  display: none;
  position: absolute;
  top: 9px;
  left: 91px;
  width: 5px;
  height: 5px;
  padding-left: 0;
  background: red;
  border-radius: 5px;
  overflow: hidden;
}
.nav_r {
  float: right;
  width: 75px;
  padding-right: 15px;
  padding-top: 12px;
}
.set {
  float: left;
  width: 16px;
  height: 18px;
  padding-left: 10px;
  padding-right: 8px;
  position: relative;
}
.icon_set,
.icon_feedback {
  display: block;
  width: 15px;
  text-indent: -9999px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat;
}
.icon_set {
  background-position: 0px -20px;
}
.icon_set:hover {
  background-position: -20px -20px;
}
.icon_set:active {
  background-position: -40px -20px;
}
.feedback {
  float: left;
  width: 14px;
  height: 18px;
}
.icon_feedback {
  width: 14px;
  background-position: 0px -40px;
}
.icon_feedback:hover {
  background-position: -20px -40px;
}
.icon_feedback:active {
  background-position: -40px -40px;
}
.icon_favorite {
  float: left;
  width: 14px;
  height: 18px;
  display: block;
  width: 15px;
  text-indent: -9999px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -260px -39px;
}
.icon_favorite:hover {
  background-position: -280px -39px;
}
.icon_favorite:active {
  background-position: -300px -39px;
}
.like_icon {
  float: left;
  width: 15px;
  height: 23px;
  position: relative;
}
.like_icon .drop_arrow {
  display: none;
  position: absolute;
  bottom: 0;
  left: 4px;
  width: 7px;
  height: 4px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -260px -65px;
}
.like_icon_active .drop_arrow {
  display: block;
}
.like_icon_active .icon_favorite,
.like_icon_active .icon_favorite:hover,
.like_icon_active .icon_favorite:active {
  background-position: -320px -39px;
}
.spline {
  display: block;
  float: left;
  width: 11px;
  height: 16px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -60px -19px;
}
.set_list {
  display: none;
  z-index: 20;
  position: absolute;
  top: 19px;
  left: -96px;
  width: 135px;
  height: 80px;
  padding-top: 6px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -30px -497px;
}
.set_list li {
  height: 24px;
  line-height: 24px;
  width: 128px;
  margin-left: 2px;
  border-bottom: 1px solid #ddd;
}
.set_list li a {
  display: block;
  padding-left: 20px;
  color: #666;
}
.set_list li a:hover {
  text-decoration: none;
  background: #eee;
}
.set_list li a:active {
  background: #e4e4e4;
}
.set_list li a.select_use {
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -378px -607px;
}
.set_list li a.select_use:hover {
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -378px -607px;
}
.set_list li a.select_use:active {
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -378px -607px;
}
.set_list li.current a.select_use {
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -378px -577px;
}
.set_list li.current a.select_use:hover {
  background: #eeeeee url("img/ui_skin.png?v=1-23-16-53") no-repeat -378px -577px;
}
.set_list li.current a.select_use:active {
  background: #e4e4e4 url("img/ui_skin.png?v=1-23-16-53") no-repeat -378px -577px;
}
.set_list .bmline {
  border-bottom: 1px solid #ddd;
}
.set_list li.last {
  border-bottom: 0;
}
/* 主内容区  */
#main {
  height: 436px;
  border: 1px solid #71757f;
  border-top: none;
  overflow: hidden;
}
.skin_recommend,
.skin_manage,
.skin_my,
.skin_favorite {
  display: none;
}
/* 推荐分类 */
.c_head {
  height: 22px;
  padding: 5px 15px 5px 15px;
  margin-bottom: 2px;
  background: #f8f8f8;
}
.subnav {
  float: left;
  width: 350px;
}
.subnav li {
  float: left;
  height: 22px;
  padding: 0 5px;
}
.subnav li a {
  display: block;
  padding: 0 5px;
  line-height: 22px;
}
.subnav li a:hover {
  text-decoration: none;
  background: #eee;
}
.subnav li.current a {
  color: #fff;
}
/* .subnav_1,.subnav_2{display:none;} */
.c_head_r {
  float: right;
  width: ;
  /* .try_fresh{display:none;} */
  /* .change_set{display:none;} */
}
.c_head_r .spline {
  float: right;
  width: 16px;
  background-position: -60px -38px;
}
.c_head_r a {
  display: block;
}
.c_head_r a:hover {
  text-decoration: none;
}
.c_head_r .morelink,
.c_head_r .try_fresh,
.c_head_r .change_set {
  float: right;
  padding-left: 8px;
}
.c_head_r .icon_more {
  width: 20px;
  height: 20px;
  text-indent: -9999px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -180px -40px;
}
.c_head_r .icon_fresh {
  float: left;
  display: block;
  width: 20px;
  height: 20px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -150px -40px;
}
.c_head_r .icon_checkbox {
  float: left;
  display: block;
  width: 22px;
  height: 20px;
  overflow: hidden;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -90px -40px;
}
.c_head_r .select {
  background-position: -120px -40px;
}
/* 皮肤图片的排版 */
.skin_list {
  padding-left: 2px;
  /* .skin_click{ display:none; z-index:5;position:absolute; top:0; right:2px; width:22px; height:22px; } */
}
.skin_list li {
  float: left;
  width: 228px;
  height: 134px;
  position: relative;
}
.skin_list .skin_img {
  z-index: 1;
  width: 226px;
  height: 132px;
  position: relative;
  overflow: hidden;
}
.skin_list .skin_img a {
  display: block;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 226px;
  height: 132px;
}
.skin_list .skin_img img {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  width: 226px;
  height: 132px;
}
.skin_list .skin_img .defaultpic {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}
.skin_list .skin_info {
  display: none;
  width: 226px;
  height: 132px;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
}
.skin_list .name {
  z-index: 4;
  position: absolute;
  top: 8px;
  left: 10px;
  width: 206px;
  height: 18px;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
  cursor: default;
  line-height: 22px;
}
.skin_list .name_default {
  top: 0;
  left: 0;
  width: 226px;
  height: 74px;
  padding-top: 58px;
  text-align: center;
}
.skin_list .name_default .nametxt {
  padding-left: 40px;
}
.skin_list .nametxt {
  float: left;
  display: block;
  height: 18px;
  padding-right: 2px;
}
.skin_list .icon_2016,
.skin_list .icon_2013 {
  float: left;
  display: none;
  width: 34px;
  height: 18px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -260px -158px;
  cursor: default;
}
.skin_list .icon_2013 {
  background-position: -310px -158px;
}
.skin_list .author {
  z-index: 4;
  position: absolute;
  bottom: 8px;
  left: 10px;
  color: #eee;
  cursor: default;
}
.skin_list .price {
  z-index: 4;
  width: 90.4px;
  position: absolute;
  bottom: 5px;
  left: 8px;
  padding-left: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -382px -342px;
}
.skin_list .sd_down {
  z-index: 4;
  width: 206px;
  position: absolute;
  top: 30px;
  left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
  color: #eee;
}
.skin_list .share {
  z-index: 4;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 8px;
  right: 6px;
}
.skin_list .icon_share {
  display: none;
  text-indent: -9999px;
  width: 16px;
  height: 16px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -358px -282px;
}
.skin_list .icon_share:hover {
  background-position: -358px -313px;
}
.skin_list .enjoy {
  z-index: 6;
  position: absolute;
  bottom: 8px;
  right: 10px;
}
.skin_list .enjoy span {
  display: block;
  float: left;
  width: ;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}
.skin_list .icon_admire {
  float: left;
  display: block;
  width: 16px;
  height: 16px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -320px -400px;
}
.skin_list .icon_admire:hover {
  background-position: -320px -430px;
}
.skin_list .icon_admire_suc,
.skin_list .icon_admire_suc:hover {
  background-position: -320px -460px;
}
.skin_list .skin_info_wps {
  display: block;
  width: 226px;
  height: 132px;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
}
.skin_list .appicon {
  display: none;
  z-index: 6;
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 80px;
  height: 16px;
}
.skin_list .appicon a {
  float: left;
  display: block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat;
}
.skin_list .appicon a.icon_wps {
  background-position: -250px -540px;
}
.skin_list .appicon a.icon_wpp {
  background-position: -280px -540px;
}
.skin_list .appicon a.icon_et {
  background-position: -310px -540px;
}
.skin_list .icon_fav {
  z-index: 6;
  position: absolute;
  bottom: 8px;
  right: 9px;
  width: 21px;
  height: 21px;
}
.skin_list .icon_fav a {
  display: none;
  height: 21px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat;
}
.skin_list .icon_fav a.collect_red {
  background-position: -250px -580px;
}
.skin_list .icon_fav a.collect_red:hover {
  background-position: -280px -580px;
}
.skin_list .icon_fav a.collect_red:active {
  background-position: -310px -580px;
}
.skin_list .icon_fav a.collect_white {
  background-position: -250px -610px;
}
.skin_list .icon_fav a.collect_white:hover {
  background-position: -280px -610px;
}
.skin_list .icon_fav a.collect_white:active {
  background-position: -310px -610px;
}
.skin_list .skin_select {
  display: none;
  z-index: 5;
  position: absolute;
  top: 0;
  left: 0px;
  width: 226px;
  height: 132px;
}
.skin_list .skin_select span {
  display: block;
  z-index: 5;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 30px;
  height: 30px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -360px -500px;
}
.skin_list .skin_click {
  display: none;
  z-index: 5;
  position: absolute;
  top: 0;
  left: 0px;
  width: 222px;
  height: 128px;
  border-style: solid;
  border-width: 2px;
  /* cursor:pointer; */
  cursor: default;
}
.skin_list .vipskin {
  display: none;
  z-index: 2;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 16px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -180px 0px;
  /* cursor:pointer; */
  cursor: default;
}
.skin_list .viptxtbg {
  display: none;
  z-index: 8;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 226px;
  height: 24px;
  line-height: 24px;
  color: #fff;
}
.skin_list .viptxtbg span {
  display: block;
  z-index: 9;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 216px;
  line-height: 24px;
  padding-left: 5px;
}
.skin_list .viptxtbg a {
  color: #59afff;
}
.skin_list .viptxtbg .blackbg {
  z-index: 8;
  bottom: 2px;
  display: block;
  height: 24px;
  width: 221px;
}
.skin_list .blackbg {
  z-index: 3;
  display: none;
  width: 226px;
  height: 132px;
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  /* cursor:pointer; */
  cursor: default;
}
.skin_list .maskbg {
  z-index: 3;
  display: none;
  width: 226px;
  height: 132px;
  position: absolute;
  top: 0;
  left: 0;
  background: #ccc;
  opacity: 0.5;
  /* cursor:pointer; */
  cursor: default;
}
.skin_list .del_tip {
  display: none;
  z-index: 10;
  position: absolute;
  top: 0 ;
  left: 0;
  width: 226px;
  height: 132px;
  text-align: center;
}
.skin_list .del_tip .del_tip_c {
  z-index: 9;
  position: absolute;
  top: 0 ;
  left: 0;
  width: 226px;
  height: 132px;
}
.skin_list .del_tip p {
  color: #fff;
  font-size: 14px;
  padding-top: 32px;
  padding-bottom: 17px;
}
.skin_list .del_tip a {
  display: inline-block;
  height: 24px;
  line-height: 23px;
  text-align: center;
  width: 60px;
  margin: 0 3px;
  cursor: pointer;
}
.skin_list .del_tip a:hover {
  text-decoration: none;
}
.skin_list .del_tip .btn_del_affirm {
  color: #fff;
  background: #4586d8;
}
.skin_list .del_tip .btn_del_affirm:hover {
  background: #3a7acc;
}
.skin_list .del_tip .btn_del_cannel {
  color: #666;
  background: #fff;
}
.skin_list .del_tip .btn_del_cannel:hover {
  background: #f3f3f3;
}
.skin_list .del_tip .del_tip_mask {
  z-index: 8;
  position: relative;
  top: 0 ;
  left: 0;
  width: 226px;
  height: 132px;
  background: #000;
  opacity: 0.6;
}
.skin_list .dl_error {
  display: none;
  position: absolute;
  bottom: 2px;
  left: 0;
  z-index: 6;
  width: 95px;
  height: 24px;
  padding-left: 5px;
  line-height: 24px;
  color: #dd3333;
  font-size: 12px;
  background: #e3bc94;
}
.skin_list .dl_error span {
  float: left;
  margin-top: 4px;
  display: block;
  width: 20px;
  height: 16px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -380px -410px;
}
.skin_list .dl_error a.close {
  position: absolute;
  top: 8px;
  right: 6px;
  display: block;
  width: 10px;
  height: 10px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -350px -410px;
}
.skin_list .dl_error a.close:hover {
  background-position: -360px -410px;
}
.skin_list .current_skin {
  display: none;
  z-index: 5;
  position: absolute;
  top: 0;
  left: 0;
  width: 226px;
  height: 132px;
}
.skin_list .current_skin .current_skin_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 226px;
  height: 132px;
  background: #333;
  opacity: 0.5;
}
.skin_list .current_skin p {
  position: absolute;
  top: 0;
  left: 0;
  width: 226px;
  height: 132px;
  padding-top: 45px;
  color: #fff;
  text-align: center;
}
.skin_list .current_skin p.getdel {
  line-height: 20px;
  text-align: center;
}
.skin_list li.select .skin_select {
  display: block;
}
.skin_list li.over .skin_info {
  display: block;
}
.skin_list li.over .blackbg {
  display: block;
}
.skin_list .del {
  z-index: 5;
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 31px;
  height: 31px;
}
.skin_list .icon_del {
  display: block;
  width: 29px;
  height: 29px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -250px -500px;
}
.skin_list .icon_del:hover {
  background-position: -280px -500px;
}
.skin_list .icon_del:active {
  background-position: -310px -500px;
}
/* 内容加载 */
.loading_con {
  display: none;
  z-index: 15;
  position: absolute;
  top: 100px;
  left: 2px;
  width: 684px;
  height: 398px;
  text-indent: -9999px;
  background: #ffffff url("img/loading_all.gif?v=1-23-16-53") no-repeat center 180px;
}
/* 没有内容时 */
.nocontent {
  display: none;
  z-index: 16;
  position: absolute;
  top: 100px;
  left: 1px;
  width: 685px;
  height: 396px;
  color: #000;
  font-size: 16px;
}
.nocontent p {
  margin: 100px auto;
  height: 130px;
  width: 260px;
  padding-left: 240px;
  padding-top: 45px;
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  color: #aaa;
  background: #ffffff url("img/nocontent.png?v=1-23-16-53") no-repeat 0 0;
}
/* 网络错误  */
.net_error {
  display: none;
  z-index: 16;
  position: absolute;
  top: 66px;
  left: 1px;
  width: 685px;
  height: 434px;
  background: #f8f8f8;
}
.net_error p {
  margin: 100px auto 0 auto;
  width: 260px;
  height: 130px;
  padding-left: 240px;
  padding-top: 60px;
  background: url("img/neterror.png?v=1-23-16-53") no-repeat 0 0px;
}
.net_error strong {
  margin-top: 50px;
  font-size: 14px;
  font-weight: bold;
  color: #bfbfbf;
}
.net_error .refresh {
  display: block;
  margin-top: 6px;
  line-height: 20px;
  text-decoration: underline;
}
.net_error .refresh span {
  float: left;
  display: block;
  width: 18px;
  height: 16px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -152px -40px;
}
.net_error .refresh:hover {
  color: #888;
}
/* 滚动区排版 */
.scroll_container {
  position: relative;
  /* height:(@main_h - 36); */
  overflow: hidden;
}
/* 推荐皮肤 */
.skin_recommend {
  height: 435px;
  overflow: hidden;
}
.skin_recommend .scroll_container {
  position: relative;
  height: 401px;
}
/* 管理皮肤 */
.skin_manage {
  height: 435px;
  overflow: hidden;
}
.skin_manage .ttl {
  height: 34px;
  line-height: 34px;
}
.skin_manage .del {
  display: block;
}
.skin_manage .scroll_container {
  /* height:(@main_h - 4); */
  height: 400px;
}
.skin_manage .blackbg {
  cursor: default;
}
.skin_manage .maskbg {
  cursor: default;
}
.skin_manage .appicon {
  display: block;
}
.skin_manage .skin_info_wps {
  display: block;
}
/* 我的皮肤 */
.skin_my {
  height: 435px;
  overflow: hidden;
}
.skin_my .nocontent {
  height: 236px;
  top: 260px;
}
.skin_my .nocontent p {
  margin-top: 30px;
  height: 70px;
  padding-top: 35px;
  padding-left: 160px;
  background: #ffffff url("img/nocontent_min.png?v=1-23-16-53") no-repeat 0 0;
}
.skin_my .scroll_container {
  height: 436px;
  height: 800px;
}
/* 我喜欢的皮肤*/
.skin_favorite {
  height: 435px;
  overflow: hidden;
}
.skin_favorite .ttl {
  height: 34px;
  line-height: 34px;
}
.skin_favorite .del {
  display: block;
}
.skin_favorite .scroll_container {
  /* height:(@main_h - 4); */
  height: 400px;
}
.skin_favorite .nocontent {
  top: 96px;
  height: 400px;
  background: #fff;
}
.skin_favorite .nocontent p {
  padding-top: 140px;
  padding-left: 0;
  font-size: 14px;
  text-align: center;
  background: url("img/no_fav.png?v=1-23-16-53") no-repeat center top;
}
.skin_favorite .bdt {
  margin-left: 14px;
  margin-right: 12px;
  border-top: 1px solid #ddd ;
}
.skin_favorite .appicon {
  display: block;
}
a.greenlink {
  color: #55a112;
  text-decoration: underline;
}
a.greenlink:hover {
  color: #428a02;
  text-decoration: none;
}
#downloadProgress {
  z-index: 3;
  width: 227px;
  height: 133px;
  position: absolute;
  bottom: 0;
  left: 0;
}
#downloadSysProgress {
  z-index: 3;
  width: 228px;
  height: 122px;
  position: absolute;
  bottom: 0;
  left: 0;
}
/* 下载进度 */
.load_progress {
  display: none;
  z-index: 11;
  position: absolute;
  top: 0;
  left: 0;
  width: 226px;
  height: 132px;
}
.load_progress .progress_views {
  z-index: 13;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
  width: 40px;
  height: 40px;
}
.load_progress .pgs_value {
  z-index: 12;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 12px;
  color: #fff;
}
/* 启动皮肤编辑器 */
.start_prompt {
  display: none;
  z-index: 20;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -130px;
  margin-top: -15px;
  width: 276px;
  height: 96px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat 0 -400px;
}
.start_prompt .progress_views {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 40px;
  height: 40px;
  background: url("img/progress2/0.png?v=1-23-16-53") no-repeat;
}
.start_prompt .pgs_value {
  z-index: 22;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 12px;
  color: #888 ;
}
.start_prompt .txt {
  position: absolute;
  left: 68px;
  top: 18px;
  line-height: 40px;
}
.start_prompt #editSkinProgress {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 50px;
  height: 50px;
}
.con_head {
  height: 34px;
  padding-right: 15px;
}
.con_head .ttl {
  float: left;
  width: 200px;
}
.ttl {
  height: 34px;
  line-height: 34px;
  padding-left: 15px;
}
a.back {
  float: right;
  display: block;
  margin-top: 7px;
  height: 19px;
  width: 40px;
  text-align: center;
  border: 1px solid #d4d4d4;
}
a.back:hover {
  text-decoration: none;
  border-color: #ccc;
  background: #f4f4f4;
}
a.back:active {
  border-color: #c4c4c4;
  background: #ddd;
}
/* 我的皮肤 */
.skin_system {
  /* @skin_sy_w:343px; */
  height: 160px;
  overflow: hidden;
}
.skin_system ul {
  width: 687px;
  height: 122px;
  padding-left: 0px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.skin_system li {
  position: relative;
  float: left;
  width: 228px;
  height: 122px;
  border-right: 1px solid #eee;
}
.skin_system li.nobd {
  border-right: 0;
}
.skin_system li a {
  display: block;
  cursor: pointer;
}
.skin_system li a:hover {
  text-decoration: none;
}
.skin_system .img {
  padding-top: 10px;
  text-align: center;
}
.skin_system img {
  width: 210px;
  height: 80px;
}
.skin_system .sys_skinname {
  display: block;
  height: 26px;
  text-align: center;
  line-height: 26px;
  cursor: default;
}
.skin_system .skin_select {
  display: none;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 229px;
  height: 124px;
  cursor: default;
}
.skin_system .skin_select span {
  display: block;
  z-index: 5;
  position: absolute;
  bottom: 0;
  right: 0px;
  width: 29px;
  height: 30px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -292px -354px;
}
.skin_system .skin_over {
  display: none;
  position: absolute;
  top: -1px;
  left: 0px;
  width: 226px;
  height: 122px;
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  cursor: default;
}
.skin_system li.select .skin_select {
  display: block;
}
.skin_system li.select .sys_skinname {
  color: #eb8363;
  font-weight: bold;
}
.skin_system li:hover .skin_over {
  display: block;
}
.skin_system .skin_click {
  display: none;
  z-index: 5;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 225px;
  height: 120px;
  cursor: pointer;
  border-style: solid;
  border-width: 2px;
}
.skin_system .sys_skinname_select {
  color: #eb8363;
  font-weight: bold;
}
.skin_lately {
  padding-top: 5px;
}
.skin_lately .scroll_container {
  /* height:235px;  */
}
.skin_lately .appicon {
  display: block;
}
.skin_lately .skin_info_wps {
  display: block;
}
/* 按扭 */
.btn_cancel,
.btn_ok {
  display: none;
  float: right;
  padding-left: 10px;
}
.btn_cancel a,
.btn_ok a {
  display: block;
  width: 60px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat;
}
.btn_cancel a {
  background-position: 0 -190px;
}
.btn_cancel a:hover {
  text-decoration: none;
  background-position: -60px -190px;
}
.btn_cancel a:active {
  background-position: -120px -190px;
}
.btn_ok {
  width: 76px;
  color: #fff;
}
.btn_ok a {
  background-position: 0 -220px;
}
.btn_ok a:hover {
  text-decoration: none;
  background-position: -76px -220px;
}
.btn_ok a:active {
  background-position: -152px -220px;
}
.btn_use {
  width: 70px;
  float: right;
}
.btn_use a {
  position: relative;
  display: block;
  height: 22px;
  text-align: center;
  line-height: 22px;
  color: #fff;
  border-width: 1px;
  border-style: solid;
}
.btn_use a:hover {
  text-decoration: none;
  border-color: #4884d0;
  background: #5f9ce9;
}
.btn_use a:active {
  border-color: #3770b7;
  background: #3e7dcd;
}
.btn_lg {
  display: none;
  width: 80px;
  float: right;
}
.btn_lg a {
  position: relative;
  display: block;
  height: 22px;
  text-align: center;
  line-height: 22px;
  color: #fff;
  border-width: 1px;
  border-style: solid;
}
.btn_lg a:hover {
  text-decoration: none;
  border-color: #4884d0;
  background: #5f9ce9;
}
.btn_lg a:active {
  border-color: #3770b7;
  background: #3e7dcd;
}
.btn_ok_disable a {
  cursor: default;
  border-width: 1px;
  border-style: solid;
  color: #f2edea;
}
.btn_use_anima {
  background: #fff;
}
.btn_use_anima span {
  display: block;
}
.btn_use_anima a span {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 68px;
  height: 22px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -210px -220px;
  -webkit-animation-name: breath;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
}
.btn_lg_anima a span {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 78px;
  height: 22px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -240px -160px;
  -webkit-animation-name: breath;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
}
/* 登录提示 */
#entry_prompt {
  z-index: 101;
  display: none;
  width: 298px;
  height: 158px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -80px;
  border: 1px solid #60646c;
  background: #fff;
}
#entry_prompt .icon_close2 {
  position: absolute;
  top: 11px;
  right: 13px;
  width: 11px;
  height: 8px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -50px 0;
}
#entry_prompt .icon_close2:hover {
  background-position: -61px 0;
}
#entry_prompt .prompt_head {
  height: 32px;
  line-height: 32px;
  margin: 0 10px;
  border-bottom: 2px solid #eee;
}
#entry_prompt p {
  font-size: 14px;
  line-height: 26px;
  color: #666;
  padding: 15px 30px 25px 30px;
  text-align: center;
}
#entry_prompt p.tl {
  text-align: left;
}
#entry_prompt .prompt_btn {
  position: absolute;
  bottom: 22px;
  left: 74px;
  height: 24px;
  width: 150px;
}
#entry_prompt .btn_login,
#entry_prompt .btn_cancel {
  float: left;
}
#entry_prompt .btn_login a {
  float: left;
  display: block;
  width: 76px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  color: #fff;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat 0 -220px;
}
#entry_prompt .btn_login a:hover {
  text-decoration: none;
  background-position: -76px -220px;
}
#entry_prompt .btn_login a:active {
  background-position: -152px -220px;
}
#entry_prompt .btn_cancel {
  display: block;
  padding-left: 10px;
}
/* VIP皮肤会员开通提示 */
.vipskin_prompt {
  z-index: 101;
  display: none;
  width: 298px;
  height: 158px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -80px;
  border: 1px solid #60646c;
  background: #fff;
}
.vipskin_prompt .icon_close2 {
  position: absolute;
  top: 11px;
  right: 13px;
  width: 11px;
  height: 8px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -50px 0;
}
.vipskin_prompt .icon_close2:hover {
  background-position: -61px 0;
}
.vipskin_prompt .prompt_head {
  height: 32px;
  line-height: 32px;
  margin: 0 10px;
  border-bottom: 2px solid #eee;
}
.vipskin_prompt p {
  font-size: 14px;
  line-height: 26px;
  color: #666;
  padding: 15px 30px 25px 30px;
  text-align: center;
}
.vipskin_prompt .prompt_btn {
  position: absolute;
  bottom: 22px;
  left: 74px;
  height: 24px;
  width: 150px;
}
.vipskin_prompt .btn_joinvip,
.vipskin_prompt .btn_cancel {
  float: left;
}
.vipskin_prompt .btn_joinvip a {
  float: left;
  display: block;
  width: 76px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  color: #fff;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat 0 -220px;
}
.vipskin_prompt .btn_joinvip a:hover {
  text-decoration: none;
  background-position: -76px -220px;
}
.vipskin_prompt .btn_joinvip a:active {
  background-position: -152px -220px;
}
.vipskin_prompt .btn_cancel {
  display: block;
  padding-left: 10px;
}
.maskbg {
  display: none;
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  width: 688px;
  height: 502px;
  background: #333;
  opacity: 0.1;
}
/* 信息提示 */
#prompt_box {
  display: none;
  width: 298px;
  height: 158px;
  z-index: 100;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -80px;
  border: 1px solid #60646c;
  background: #fff;
}
#prompt_box .icon_close2 {
  position: absolute;
  top: 11px;
  right: 13px;
  width: 11px;
  height: 8px;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat -50px 0;
}
#prompt_box .icon_close2:hover {
  background-position: -61px 0;
}
#prompt_box .prompt_head {
  height: 32px;
  line-height: 32px;
  margin: 0 10px;
  border-bottom: 2px solid #eee;
}
#prompt_box p {
  font-size: 14px;
  color: #666;
  padding: 25px 30px;
  text-align: center;
}
#prompt_box p.tl {
  text-align: left;
}
#prompt_box .prompt_btn {
  position: absolute;
  bottom: 22px;
  left: 66px;
  height: 24px;
}
#prompt_box .btn_ok,
#prompt_box .btn_cancel {
  float: left;
  width: 60px;
}
#prompt_box .btn_ok {
  width: 76px;
}
#prompt_box .btn_ok a {
  float: left;
  display: block;
  width: 76px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  color: #fff;
  background: url("img/ui_skin.png?v=1-23-16-53") no-repeat 0 -220px;
}
#prompt_box .btn_ok a:hover {
  text-decoration: none;
  background-position: -76px -220px;
}
#prompt_box .btn_ok a:active {
  background-position: -152px -220px;
}
/*滚动条样式*/
/* 滚动外框 自动获取外层宽度 */
.jspContainer {
  overflow: hidden;
  position: relative;
}
/* 内容滚动范围 */
.jspPane {
  position: absolute;
  width: 175px;
}
/* 滚动内容 */
/* 如果滚动条要浮动在内容上面，jspPane宽度为jspScrollable 加上滚动条的宽，即需要在js设上这个固定值 */
.jspVerticalBar {
  z-index: 10;
  position: absolute;
  top: 0;
  right: 2px;
  width: 5px;
  height: 100%;
}
/* 垂直滚动条显示区域 */
.jspVerticalBar *,
.jspHorizontalBar * {
  margin: 0;
  padding: 0;
}
.jspCap {
  display: none;
}
.jspHorizontalBar {
  /* z-index:3; position:absolute; bottom:50px; left:0; width:100%; height:10px; background:red; */
}
/* 横向滚动条 */
.jspCap {
  /* float: left; z-index:4;position:absolute; top:1px; left:1px;  width:50px; height:8px;background:green; */
}
.jspTrack {
  position: relative;
  width: 5px;
  /* border:1px #3e4451 solid; border-radius:3px; background:#414655; */
}
/* 滚动条的滚动区域 底色背景区*/
.jspDrag {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 15;
  width: 5px;
  height: ;
  /* 加高度会显示为横向滚动条的 */
  border-radius: 3px;
  background: #000;
  opacity: 0.3;
  cursor: pointer;
}
/* 滚动条的上层 */
.jspActive {
  opacity: 0.6;
}
/* 滚动条点击加上这个样式 */
