@charset "utf-8";

body {
    padding-top: 50px;
    font-size: 14px;
    background: url(../img/bg.jpg);
}

/* IE10 viewport hack for Surface/desktop Windows 8 bug */
@-ms-viewport {
    width: device-width;
}

@-o-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}

/* 滚动条美化 */
::-webkit-scrollbar-track-piece {
    background-color: transparent;
}

::-webkit-scrollbar {
    width: 9px;
    height: 8px;
    background-color: rgb(192, 199, 210);
}

::-webkit-scrollbar-thumb {
    background-color: #AAA;
    -webkit-border-radius: 7px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #9f9f9f;
}

::-webkit-scrollbar-arrow {
    color: #F00;
    backgound: #0F0;
}

canvas {
    display: block;
}

.starter-template {
    height: 50px;
    /*    padding: 15px 15px;*/
    text-align: center;
}

.starter-template .lead {
    height: 50px;
    line-height: 50px;
}

.bottomTitle {
    height: 50px;
    line-height: 50px;
    font-size: 22px;
    /*font-weight: bold;*/
    overflow: hidden;
    text-align: center;
    margin: 0;
}

.bottomTitle .right {
    margin-left: 15px;
}

.imgYS {
    width: 100%;
}

.imgM {
    width: 50%;
    margin-left: 25%;
}

.mt25 {
    margin-top: 25px;
}

.mt20 {
    margin-top: 25px;
}

.mt10 {
    margin-top: 10px;
}

.mr20 {
    margin-right: 25px;
}

.tops {
    display: none;
    position: fixed;
    left: 95%;
    bottom: 85px;
}

.footer {
    text-align: center;
    background-color: #222;
    color: #9d9d9d;
    margin: 20px 0 0 0;
    font-size: 100%;
}

.footer p {
    margin: 20px 0px;
    line-height: 30px;

}

.footer a {
    color: #9d9d9d;
}

/*使用教程*/
hr {
    margin: 0px;
    padding: 0px;
}

.jc {
    text-align: center;
}

/*响应式*/
@media (min-width: 1024px) {
    body {
        font-size: 16px;
    }

    .starter-template {
        padding: 5px 15px;
        text-align: center;
    }
}


/*Bootstrap样式重置*/
.navbar-inverse {
    background-color: #2c323b;
}

.navbar-inverse .navbar-nav > li > a {
    color: #ddd;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .active > a:hover {
    color: #fff;
    background-color: #0c8ed9;
}

.navbar-brand img {
    line-height: 50px;
    margin-top: -5px;
}

@media screen and (max-width:600px) {
    .dandelion {
        display: none !important;
    }

    .imgM {
        width: 100%;
        margin: 0;
    }

    .tops {
        display: none;
        position: fixed;
        left: 88%;
        bottom: 85px;
    }
}

.dandelion .smalldan {
    width: 36px;
    height: 60px;
    left: 88px;
    background-position: 0 -90px;
    border: 0px solid red;
}

.dandelion span {
    -webkit-animation: ball-x 3s linear 2s infinite;
    -moz-animation: ball-x 3s linear 2s infinite;
    animation: ball-x 3s linear 2s infinite;
    -webkit-transform-origin: bottom center;
    -moz-transform-origin: bottom center;
    transform-origin: bottom center;
}

.dandelion span {
    display: block;
    position: fixed;
    z-index: 9999999999;
    bottom: 0px;
    background-image: url(../img/pugongying.png);
    background-repeat: no-repeat;
    _background: none;
}

.dandelion .bigdan {
    width: 64px;
    height: 115px;
    left: 41px;
    background-position: -86px -36px;
    border: 0px solid red;
}

@keyframes ball-x {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes ball-x {
    0% {
        -webkit-transform: rotate(0deg);
    }

    25% {
        -webkit-transform: rotate(5deg);
    }

    50% {
        -webkit-transform: rotate(0deg);
    }

    75% {
        -webkit-transform: rotate(-5deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}

@-moz-keyframes ball-x {
    0% {
        -moz-transform: rotate(0deg);
    }

    25% {
        -moz-transform: rotate(5deg);
    }

    50% {
        -moz-transform: rotate(0deg);
    }

    75% {
        -moz-transform: rotate(-5deg);
    }

    100% {
        -moz-transform: rotate(0deg);
    }
}

/** 鼠标样式 开始**/
/** 普通指针样式**/
body {
    cursor: url('../img/b.cur'), default;
}

/** 链接指针样式**/
a:hover {
    cursor: url('../img/a.cur'), pointer;
}

/** 鼠标样式 结束**/