html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

body {
    margin: 0
}

a {
    background-color: transparent;
    color: #337ab7;
    text-decoration: none
}

a:active,a:hover {
    outline: 0
}

a:hover,a:focus {
    color: #23527c;
    text-decoration: underline
}

a:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

/*#scrollBtn .glyphicon-lock{*/
    /*width:32px;height:32px;border-radius: 50%;*/
/*}*/

button,input,optgroup,select,textarea {
    margin: 0;
    font: inherit;
    color: inherit
}

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.ttf') format('truetype')
}

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

.glyphicon-pencil:before {
    content: "\270f";
    color:#fff
}

.glyphicon-trash:before {
    content: "\e020"
}

.glyphicon-home:before {
    content: "\e021";
}

.glyphicon-share:before {
    content: "\e066"
}

.glyphicon-lock:before {
    content: "\e150"
}

.glyphicon-sort:before {
    content: "\e033"
}

.glyphicon-menu-right:before {
    content: "\e258"
}

.glyphicon-menu-down:before {
    content: "\e259"
}

.glyphicon-menu-up:before {
    content: "\e260"
}

.glyphicon-arrow-left:before {
    content: "\e091";
    color:#fff;
}

.glyphicon-arrow-right:before {
    content: "\e092";
    color:#fff;
}

.glyphicon-refresh:before {
    content: "\e031"
}

.glyphicon-download:before {
    content: "\e025"
}

.pencil-menu-canvas {
    display: inline-block;
    vertical-align: middle;
    border: 1px solid transparent;
    background-color: #fff
}

.pencil-menu-item {
    background-color: #e5e5e5;
    margin: 3px 0
}

.toobar {
    max-height: 28px;
    vertical-align: middle;
    margin-right: 0;
    width: 100%
}

@media screen and (max-width: 360px) {
    .avgwidth {
        width:15.5%
    }
}

@media screen and (min-width: 361px) and (max-width:480px) {
    .avgwidth {
        width:15.2%
    }
}

@media screen and (min-width: 481px) and (max-width:550px) {
    .avgwidth {
        width:15.8%
    }
}

@media screen and (min-width: 551px) and (max-width:750px) {
    .avgwidth {
        width:16%
    }
}

@media screen and (min-width: 751px) and (max-width:989px) {
    .avgwidth {
        width:16.1%
    }
}

@media screen and (min-width: 990px) {
    .avgwidth {
        width:16.3%
    }
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    /*border: 1px solid transparent;*/
    border:none
    border-radius: 4px
}

.btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

.btn:hover,.btn:focus,.btn.focus {
    color: #333;
    text-decoration: none
}

.btn:active,.btn.active {
    background-image: none;
    outline: 0;
    /*-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);*/
    /*box-shadow: inset 0 3px 5px rgba(0,0,0,.125)*/
}

.btn.disabled,.btn[disabled] {
    cursor: not-allowed;
    filter: alpha(opacity = 65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65
}

.btn-default {
    color: #fff;
    /*background-color: #fff;*/
    /*border-color: #ccc*/
    background:none;
}

.btn-default:focus,.btn-default.focus {
    color: #fff;
    /*background-color: #7fb093;*/
    /*border-color: #8c8c8c;*/
    outline: 0
}

.btn-default:hover {
    color: #fff;
    /*background-color: #7fb093;*/
    /*border-color: #adadad*/
}

.btn-sm,.btn-group-sm>.btn {
    padding: 5px 10px;
    border:none;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px
}

.dropdown {
    position: relative
}

.dropdown-toggle:focus {
    outline: 0
}

.dropdown-toggle i {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    vertical-align: middle;
    border-top: 6px dashed;
    border-top: 6px solid \9;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    -webkit-transition: all .4s ease 0;
    -moz-transition: all .4s ease 0;
    -o-transition: all .4s ease 0;
    transition: all .4s ease 0
}

.open>.dropdown-toggle i {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    animation-fill-mode: forwards
}

.dropdown .glyphicon-drop-icon:before {
    content: "\e259";
    -webkit-transition: all .4s ease 0;
    -moz-transition: all .4s ease 0;
    -o-transition: all .4s ease 0;
    transition: all .4s ease 0
}

.dropdown.open .glyphicon-drop-icon:before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    animation-fill-mode: forwards;
    content: "\e260"
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9;
    display: none;
    float: left;
    min-width: 60px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175)
}

.dropdown-menu>li>a,.dropdown-menu>li>div {
    display: block;
    padding: 3px 12px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap
}

.dropdown-menu>li>div>a {
    display: inline-block;
    vertical-align: middle;
    width: 28px;
    height: 28px;
    margin-right: 4px
}

.clearall{
    display: inline-block;
    vertical-align: middle;
    padding: 3px 12px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;

    white-space: nowrap
}
.clearall span{
    width: 28px;
    height: 28px;
    color:#fff;
    margin-right: 4px;
}

.selected-pencil-color {
    box-shadow: 0 0 1px 2px #0CC;
// #0CC}

.selected-pencil-border {
    border: 2px solid #0CC
}

.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5
}

.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus {
    color: #fff;
    text-decoration: none;
    background-color: #337ab7;
    outline: 0
}

.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus {
    color: #777
}

.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus {
    text-decoration: none;
    cursor: not-allowed;
    background-color: transparent;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled= false)
}

.open>.dropdown-menu {
    display: block
}

.loading {

    position: fixed;
    z-index: 9;
    display: none;
    width: 32px;
   height:32px;

    left: 50%;
    top: 50%;
    margin-left:-16px;
    margin-top:-16px;
}

.loading>div,.loading>div>span {
    position: absolute;
    top: 50%;
    transform: translate3d(0,-50%,0);
    -webkit-transform: translate3d(0,-50%,0);
    -ms-transform: translate3d(0,-50%,0);
    -moz-transform: translate3d(0,-50%,0);
    -o-transform: translate3d(0,-50%,0)
}

.loading>div {
    width: 100%;
    left: 10%
}

.loading>div>span {
    left: 60px
}

/*皮肤*/
.skins{
    position:fixed;
    right:10px;bottom:10px;
    background:url(../images/cloth.png) no-repeat center;
    background-size:24px;
    width:24px;height:24px;
}
.skins div{position:fixed;bottom:40px;right:10px;width:24px;display: none}
.skins div a{
    display: inline-block;width:24px;height:24px;
}
.skin0{background-color: #8ec37f;} /*绿色*/
.skin1{background-color:#f3a73a} /*橙色*/
.skin2{background-color:#8c8c8c} /*灰色*/
.skin3{background-color:#99d3ff} /*蓝色*/
.skin4{background-color:#f5f5f5} /*红色*/
.skin4 .glyphicon:before {
    color:#555;
}
.skin4 .btn-default{
    color:#555
}
/*锁位置调整*/
#scrollBtn{
    position: fixed;
    top:50%;
    margin-top:-24px;
    left:1px;
    background-color:rgba(0,0,0,0.2);
    height:48px;width:48px;max-height:48px;border-radius: 50%;
    /*background-color:#7fb093*/
}


.wshare{
    width: 80%;
    margin: 0 auto;
    position:fixed;
    bottom:0px;
    left:5%;
    display: none;
}

.wshare span {
    width: 30%;
    display: inline-block;
    text-align: center;
}

.wshare span i {
    width: 32px;
    height: 32px;
    display: block;
    margin: 0 auto;
    margin-bottom: 5px;
}
.wshare .weixin i{
    background-image: url('../images/weixin_friend.png');
    background-size: cover;
}

.wshare .weixin_timeline i{
    background-image: url('../images/weixin.png');
    background-size: cover;
}

.wshare .qq i{
    background-image: url('../images/qq.png');
    background-size: cover;
}

@media screen and (max-width: 360px) {
    .loading>div,.loading>div>span {
        font-size:12pt
    }
}

@media screen and (min-width: 361px) and (max-width:480px) {
    .loading>div,.loading>div>span {
        min-width:16pt
    }
}

@media screen and (min-width: 481px) {
    .loading>div,.loading>div>span {
        min-width:22pt
    }
}

.dot>div {
    width: 4px;
    height: 4px;
    background-color: #000;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: dotdelay 1.5s infinite ease;
    animation: dotdelay 1.5s infinite ease;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.dot.paused>div {
    animation-play-state: paused;
    -webkit-animation-play-state: paused
}

.dot .dot2 {
    -webkit-animation-delay: .16s;
    animation-delay: .16s
}

.dot .dot3 {
    -webkit-animation-delay: .32s;
    animation-delay: .32s
}

@-webkit-keyframes dotdelay {
0 {
    opacity: .0
}

50% {
    opacity: .5
}

100% {
    opacity: 1.0
}
}

@keyframes dotdelay {
0 {
    opacity: .0
}

50% {
    opacity: .5
}

100% {
    opacity: 1.0
}
}

.loading-circle {
    width: 40px;
    height: 40px;
    position: relative;
    display: inline-block
}

.circle-container1>div,.circle-container2>div,.circle-container3>div {
    width: 10px;
    height: 10px;
    background-color: #333;
    border-radius: 100%;
    position: absolute;
    -webkit-animation: circledelay 1.2s infinite ease;
    animation: circledelay 1.2s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.circle-container1.paused>div,.circle-container2.paused>div,.circle-container3.paused>div {
    animation-play-state: paused;
    -webkit-animation-play-state: paused
}

.loading-circle .circle-container {
    position: absolute;
    width: 100%;
    height: 100%
}

.circle-container2 {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg)
}

.circle-container3 {
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg)
}

.circle1 {
    top: 0;
    left: 0
}

.circle2 {
    top: 0;
    right: 0
}

.circle3 {
    right: 0;
    bottom: 0
}

.circle4 {
    left: 0;
    bottom: 0
}

.circle-container2 .circle1 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s
}

.circle-container3 .circle1 {
    -webkit-animation-delay: -1.0;
    animation-delay: -1.0
}

.circle-container1 .circle2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s
}

.container2 .circle2 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s
}

.circle-container3 .circle2 {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s
}

.circle-container1 .circle3 {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s
}

.circle-container2 .circle3 {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s
}

.circle-container3 .circle3 {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s
}

.circle-container1 .circle4 {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s
}

.circle-container2 .circle4 {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s
}

.circle-container3 .circle4 {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s
}

@-webkit-keyframes circledelay {
0,80%,100% {
    -webkit-transform: scale(0.0)
}

40% {
    -webkit-transform: scale(1.0)
}
}

@keyframes circledelay {
0,80%,100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0)
}

40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0)
}
}