@charset "utf-8";
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;outline:0;border:0;background:transparent;vertical-align:baseline;font-size:100%;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}
body{color: #666;background-color: #f9f9f9;margin-top: 60px;font-family:"Microsoft Yahei",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
nav ul{list-style:none;}
nav ul{list-style:none;}
li{list-style: none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none;}
a{margin:0;padding:0;background:transparent;color:#666;vertical-align:baseline;text-decoration:none;font-size:100%;font-family:"Microsoft Yahei",Helvetica,Arial,sans-serif;}
a:hover,a:focus{color:#ff8800;text-decoration:none;cursor:pointer;}

img{margin: 0;padding:0;max-width: 100%;height: auto;}
ins{background-color:#ff9;color:#323841;text-decoration:none;}
mark{background-color:#ff9;color:#323841;font-weight:bold;font-style:italic;}
del{text-decoration:line-through;}

.header{position: fixed; top: 0; left: 0; right: 0; z-index: 100; border-bottom: 1px solid #e8e9e7; min-height: 60px; background-color: rgba(255,255,255,.95);}
.container{    position: relative;margin: 0 auto; max-width: 1100px; padding: 0 0px;}
.logo{float: left; margin: 0; font-size: 27px; height: 40px; overflow: hidden; display: block; text-indent: -20000em; width: 148px; height: 40px; background-size: 100% 100%; margin-top: 12px;}
.logo a{display: block; color: #444;}
.logo img{display: block; margin-bottom: 100px; height: 40px;}
.right{float: right;}
.navbar li{display: block; float: left; margin: 10px 8px; position: relative;}
.navbar li:before{width: 0; height: 2px; position: absolute; bottom: -11px; left: 50%; background-color: #ff8800; content: ''; transition: all .6s; z-index: -1;}
.navbar li.active:before, .navbar li.on:before{width: 100%; left: 0;}
.navbar li.active>a, .navbar li.on>a{color: #ff8800;}
.navbar a{display: block; line-height: 32px; padding: 4px 15px; font-size: 16px; font-weight: 400;}
.navbar .caret{margin: 13px 0px 0 10px;
    border-top: 5px solid #666;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    float: right;}

.active a .caret,.on a .caret{
   border-top: 5px solid #ff8800;
}
#monavber{
    overflow: hidden;
}

.header menu>ul>li:hover>ul{    display: block;}
.header menu>ul>li>ul{position: absolute;width: 140%;top: 100%;right: -20%;text-align: center;background-color: #fff;display: none;transition: .3s all;border-top: 2px solid #ff8800;padding: 10px 0}
.header menu>ul>li>ul>li,.header menu>ul>li>ul>li>a{width: 100%;line-height: 30px;padding: 0;margin: 0; font-size: 14px;background-color: #fff;color: #686967}
.header .moble-bars{position: absolute; padding: 0; margin: 0; right: 20px; top: 15px; font-size: 19px; display: none;}
.logins{float: right; margin-top: 8px;}
.user-login{float: left; padding: 4px 12px; background-color: #00B1FD; color: #fff; border-radius: 2px;}
.user-login .fa, .user-reg .fa{margin-right: 4px; position: relative; top: -1px;}
.user-reg{float: left; padding: 4px 12px; background-color: #ff8800; color: #fff; border-radius: 2px; margin-left: 10px;}
.user-reg .fa{top: 0;}

.animation, .widget{
 background: #fff;
}



.content-wrap{width: 100%; float: left;}
.content{position: relative; /*min-height: 500px;*/}
.archive-head{    padding: 15px 20px;overflow: hidden; background-color: #fff; margin-bottom: 10px;  position: relative;}
.archive-head h1{margin-bottom: 10px; font-size: 20px;}
.archive-list p{line-height: 22px;}
.post{padding: 15px 20px;overflow: hidden; background-color: #fff; margin-bottom: 10px; /*border-radius: 4px; */position: relative;    border: 1px solid #eee;}
.matlist{padding: 15px 20px;overflow: hidden; background-color: #fff; margin-bottom: 10px; /*border-radius: 4px; */position: relative;border-top: 1px solid #eee;}
.matlist a {
    display: inline-block;
    color: #666;
    line-height: 28px;
    margin: 0 20px 0 0;
    white-space: nowrap;
    overflow: hidden;
    width: 143px;
}
.istop{padding: 15px 30px;}
.post header{overflow:hidden;/*margin-bottom:15px;*/}
.post header h2{font-size: 18px; font-weight: 500;margin-bottom: 15px;border-bottom: 1px solid #eee;padding-bottom: 10px;}
.post-img .mask-tags{position:absolute;top:0;left:0;color:#fff;padding:2px 10px;font-size:12px;display:block;background:#f45170;z-index:50}

.istop .post-title{font-size: 18px;}
.post-text{font-size:14px;line-height:1.5;word-wrap: break-word;/*overflow:hidden;*/display:block}
.post footer{color:#999;height: auto;margin: 15px 0 0;}
.post footer span,.post footer span a{font-size: 13px; color: #999; margin-right: 10px; display: inline-block;}
.post footer span .fa{width: 13px; display: inline-block; margin-right: 4px; font-size: 13px;}

/*pagination*/
.pagination{margin:0;padding:20px;text-align:center;font-size:12px;display:block}.pagination
ul{display:inline-block;*display:inline;*zoom:1;margin-left:0;margin-bottom:0;padding:0}.pagination ul>li{display:inline}.pagination ul > li > a,
.pagination ul>li>span{margin: 3px 5px 3px 0;float:left;padding:7px
14px;background-color:#ddd;color:#666;border-radius:2px}
.pagination ul > li > a:hover,
.pagination ul>li>a:focus{opacity:1}
.pagination ul > .active > a,
.pagination ul>.active>span{background-color:#ff8800;color:#fff}.pagination ul > .active > a,
.pagination ul>.active>span{cursor:default}.pagination ul > li > span,
.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover,
.pagination ul>.disabled>a:focus{color:#999;background-color:transparent;cursor:default}

/*footer*/
.footer{position: relative; z-index: 9; clear: both; padding: 40px 30px; font-size: 12px; line-height: 12px; text-align: center; color: #999; background-color: #fff; border-top: 1px solid #ddd;}
.footer a{color: #999;}
.link{max-width: 1200px; margin: 0 auto; padding: 0 20px 0 20px; margin-bottom: 20px; text-align: left;}
.link span{float:left;/*font-size:14px*/}
.link ul li{display:inline;padding:0 5px}
/*gotop*/
#gotop{position:fixed;right:30px;bottom:50px;z-index:1000}
#gotop span{cursor:pointer;background:rgba(0,0,0,.2);width:36px;height:36px;color:#fff;display:block;position:relative;margin:5px 0}
#gotop span i{text-align:center;color:#fff;width:36px;height:36px;font-size:20px;font-style:inherit;line-height:36px;position:absolute;top:50%;left:50%;margin-top:-18px;margin-left:-18px}
#gotop a{color:#fff;display:block;cursor:pointer}
#gotop span:hover{background:#777}



.header .moble-bars{display: block;}
.navbar{float: none;}
.header menu{float: none!important;width: 100%;position: relative;display: none;}
.header menu li{display: block;float: none!important}
.header menu li{border-top: 1px dashed #eee;width: 100%;margin: 0!important}
.header menu li i,.header menu li:before{display: none!important}
.header menu>ul>li>ul{position: relative;display: block;border: none;padding: 0;box-shadow: none!important;top: auto;right: auto;width: 100%;background-color: transparent;text-align: left}
.header menu>ul>li>ul li{font-size: 12px;padding-left: 40px}
.header menu>ul>li>ul li a{display: block;line-height: 40px}
.sidebar{display: none;}
.content{margin-top: 10px;margin-right: 0;}
.post{padding: 15px;}
.modular, .joke, .first-column, .first-columnimg{float: none; width: 100%; margin-right: 0%;}
.funnylist li{width: 48%; margin-bottom: 2%;}
#user-right ,#user-left{float: none;width: 100%;}

@media screen and (max-width:640px) {
    body{margin-top: 46px;}
    .container, .breadcrumb {padding: 0 10px;}
    .logo{width: 100px; margin-top: 5px; padding-top: 5px;}
    .logo img{height: auto;}
    .header{min-height: 46px;}
    .header .moble-bars{top: 10px;}
    .archive-head{padding: 15px;}
    .article-header{text-align: left;padding: 15px 0;}
    .article-title{font-size: 18px;font-weight: bold;margin-bottom: 5px;}
    .article-meta span, .article-meta span a{font-size: 12px;}
    .article-content p{margin-bottom: 15px;}
    /*.article-content img{border-radius: 5px;}*/
    .readers a.item-top{width: 100%;}
    .zsinks li{width: 50%; float: left;}
    .tag-clouds li{width: 50%;}
    .post-navigation div {width: 100%;} 
    #user-right .archive-simple h2{ width: 100%;}
    #user-right .archive-simple p{    display: none;}
    #user-right #archive-head {margin: 0;}
    .footer {padding: 25px 10px;line-height: 1.9;}
    .matlist{padding: 15px 20px;overflow: hidden; background-color: #fff; margin-bottom: 10px; /*border-radius: 4px; */position: relative;    border: 1px solid #eee;}
    .matlist a {
        display: inline-block;
        color: #666;
        line-height: 28px;
        margin: 0 20px 0 0;
        white-space: nowrap;
        overflow: hidden;
        width: 130px;
    }
}
@media screen and (max-width:480px) {
    .post-img {float: none;margin: 0 0 10px 0; width: 98%;height: auto;}
    .matlist{padding: 15px 20px;overflow: hidden; background-color: #fff; margin-bottom: 10px; /*border-radius: 4px; */position: relative;    border: 1px solid #eee;}
    .matlist a {
        display: inline-block;
        color: #666;
        line-height: 28px;
        margin: 0 20px 0 0;
        white-space: nowrap;
        overflow: hidden;
        width: 130px;
    }
}
.topcity_title
{
    background-color: #fff;
    padding: 12px 20px;
    font-weight: bold;
    font-size: 15px;
}