body {
    font-family: '微软雅黑';
    background: -webkit-radial-gradient(circle, #fff, #e8ecf3, #f2f4f5);
    background: -o-radial-gradient(circle, #fff, #e8ecf3, #f2f4f5);
    background: -moz-radial-gradient(circle, #fff, #e8ecf3, #f2f4f5);
    background: radial-gradient(circle, #fff, #e8ecf3, #f2f4f5)
}
#sideBar li{
    list-style: none;
    width: 40%;
    line-height: 2;
    display: inline-block;
    padding: 10px;
    text-align: center;
}
#blogTitle {
    width: 100%;
    margin: 0 auto;
    position: relative;
    background:none;
        height: auto;
        display:none;
}

#blogTitle h1 {
    font-size: 26px;
    width: 310px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    position: relative;
    left: 10px;
    top: 0;
}

#blogTitle h1 a {
    color: #757575;
}

#navList a:hover {
    text-shadow: none;
    text-decoration: none;
    background-color: #fff;
    color: #169fe6;
    height: 90%;
    margin-top: 2px;
}

#main {
    margin: 0 auto
}

#home {
    padding: 20px 0 0 20px
}

#footer {
    margin: 2px 0;
    padding: 0
}

#navigator {
    background: -webkit-linear-gradient(left, #B5B0B0, #D8D8D8);
    background: -o-linear-gradient(right, #B5B0B0, #D8D8D8);
    background: -moz-linear-gradient(right, #B5B0B0, #D8D8D8);
    background: linear-gradient(to right, #B5B0B0, #D8D8D8);
    -webkit-animation: fadeinB 1s ease-out backwards;
    -moz-animation: fadeinB 1s ease-out backwards;
    -ms-animation: fadeinB 1s ease-out backwards;
    animation: fadeinB 1s ease-out backwards;
    border: none;
    box-shadow: 0 0 5px #000;
}

.day {
    margin-bottom: 10px
}

#widget_my_zzk {
    padding: 15px 0 15px 15px;
    border: 1px solid #dedede;
    margin: 0!important
}

#blog-calendar {
    border: 1px solid #dedede;
    padding: 15px
}

#mainContent {
    -webkit-animation: fadeinL 1s ease-out backwards;
    -moz-animation: fadeinL 1s ease-out backwards;
    -ms-animation: fadeinL 1s ease-out backwards;
    animation: fadeinL 1s ease-out backwards
}

@-webkit-keyframes fadeinL {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-300px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes fadeinL {
    0% {
        opacity: 0;
        -moz-transform: translateX(-300px)
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
}

@-ms-keyframes fadeinL {
    0% {
        opacity: 0;
        -ms-transform: translateX(-300px)
    }
    100% {
        opacity: 1;
        -ms-transform: translateX(0)
    }
}

@keyframes fadeinL {
    0% {
        opacity: 0;
        transform: translateX(-300px)
    }
    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

#sideBar {
    -webkit-animation: fadeinR 1s ease-out backwards;
    -moz-animation: fadeinR 1s ease-out backwards;
    -ms-animation: fadeinR 1s ease-out backwards;
    animation: fadeinR 1s ease-out backwards
}

@-webkit-keyframes fadeinR {
    0% {
        opacity: 0;
        -webkit-transform: translateX(250px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes fadeinR {
    0% {
        opacity: 0;
        -moz-transform: translateX(250px)
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
}

@-ms-keyframes fadeinR {
    0% {
        opacity: 0;
        -ms-transform: translateX(250px)
    }
    100% {
        opacity: 1;
        -ms-transform: translateX(0)
    }
}

@keyframes fadeinR {
    0% {
        opacity: 0;
        transform: translateX(250px)
    }
    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@-webkit-keyframes fadeinB {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-80px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}

@-moz-keyframes fadeinB {
    0% {
        opacity: 0;
        -moz-transform: translateY(-80px)
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0)
    }
}

@-ms-keyframes fadeinB {
    0% {
        opacity: 0;
        -ms-transform: translateY(-80px)
    }
    100% {
        opacity: 1;
        -ms-transform: translateY(0)
    }
}

@keyframes fadeinB {
    0% {
        opacity: 0;
        transform: translateY(-80px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

#under_post_news,
#ad_c1,
#ad_t2,
#blog-comments-placeholder,
#under_post_kb,
.c_ad_block {
    display: none
}

#home #header {
    display: none
}

#header {
    width: 100%;
    margin: 0 auto;
    min-width: 1220px
}

::-webkit-scrollbar {
    width: 2px;
    height: 5px
}

::-webkit-scrollbar-track {
    background-color: #eee5ef
}

::-webkit-scrollbar-thumb {
    background-color: #169fe6
}

::-webkit-scrollbar-button {
    height: 0;
    background-color: #eee5ef
}

::-webkit-scrollbar-corner {
    background-color: #eee5ef
}

.sidebar-block ul li a {
    display: inline-block
}

.sidebar-block ul li a:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    text-indent: 2px
}

.newsItem {
    display: none
}

.music {
    position: absolute;
    right: 30px
}

.music img {
    width: 30px;
    margin-top: 15px;
    -webkit-animation: musicPlay 2s linear 0s infinite normal;
    animation: musicPlay 2s linear 0s infinite normal;
    cursor: pointer
}

@-webkit-keyframes musicPlay {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg)
    }
}

@keyframes musicPlay {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg)
    }
}

#scrollUp {
    width: 46px;
    height: 46px;
    bottom: 100px;
    right: 10px;
    background: #1f7b9b url(https://images.cnblogs.com/cnblogs_com/twobin/520730/o_icon.png) no-repeat 8px -150px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    font-family: sans-serif;
    text-decoration: none;
    opacity: .9
}

#scrollUp:hover {
    background: #ff7227 url(https://images.cnblogs.com/cnblogs_com/twobin/520730/o_icon.png) no-repeat 8px -150px
}

@media only screen (max-width:450px) {
    #sideBar {
        width: 100%;
        position: static;
        width: 100%;
        display: none
    }
    #mainContent,
    #main,
    #navList {
        width: 100%
    }
    #home {
        padding: 20px 10px 0
    }
    #header {
        min-width: 100%
    }
}


@media only screen and (min-width:1px) and (max-width:800px) {
    #sideBar {
        width: 100%;
        position: static;
        width: 100%;
        display: none
    }
    #mainContent,
    #main,
    #navList {
        width: 100%
    }
    #home {
        padding: 20px 10px 0
    }
    #header {
        min-width: 100%
    }
    #mainContent {
        padding-left: 0;
        padding-right: 0;
        width: 98%
    }
    table {
        width: 100%
    }
    div.commentform textarea {
        width: 100%
    }
    .commentbox_title_right {
        display: none
    }
    img {
        max-width: 100%!important
    }
}

#randomMusic {
    display: block;
    position: fixed;
    width: 46px;
    height: 46px;
    bottom: 150px;
    right: 10px;
    z-index: 2147483647
}

#randomMusic img {
    width: 100%;
    cursor: pointer
}

#randomMusic:active {
    transform: scale(0.9)
}

.sidebar-block h3 {
    text-align: center;
    background-color: #B5B0B0;
    border: 1px solid #CBD1D4;
}

.dayTitle {
    background-color: #B5B0B0;
}

.input_my_zzk:focus{
	-webkit-animation: glow 800ms ease-out infinite alternate;
	-moz-animation: glow 800ms ease-out infinite alternate;
	-o-animation: glow 800ms ease-out infinite alternate;
	-ms-animation: glow 800ms ease-out infinite alternate;
	animation: glow 800ms ease-out infinite alternate;
}

@-webkit-keyframes glow {
    0% {
		border-color: #393;
		box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }	
    100% {
		border-color: #6f6;
		box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-moz-keyframes glow {
    0% {
		border-color: #393;
		box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }	
    100% {
		border-color: #6f6;
		box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-o-keyframes glow {
    0% {
		border-color: #393;
		box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }	
    100% {
		border-color: #6f6;
		box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-ms-keyframes glow {
    0% {
		border-color: #393;
		box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }	
    100% {
		border-color: #6f6;
		box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@keyframes glow {
    0% {
		border-color: #393;
		box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }	
    100% {
		border-color: #6f6;
		box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}