@charset "gb2312";
/* CSS Document */
/** { margin: 0; padding: 0 }*/
/*body { background: #DDD6CC; font: 12px "ËÎÌå", "Arial Narrow", HELVETICA; color: #3F3E3C; line-height: 1.5; }*/
img { border: 0; vertical-align: middle }
p { display: block; }
ul { list-style: none; }
a { color: #a6a6a6; text-decoration: none; transition: All 0.5s ease; -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; }
a:hover { color: #000; }
.blank { height: 5px; overflow: hidden; width: 100%; margin: auto; clear: both }

aside { width: 30%; float: left; }
.avatar { margin: 20px auto; width: 160px; height: 160px; border-radius: 160px; -moz-border-radius: 160px; -webkit-border-radius: 160px; overflow: hidden; }
.avatar a { display: block; padding-top: 97px; width: 160px; height: 63px; background: url(../images/photo.jpg) no-repeat; background-size: 160px 160px }
.avatar a span { display: block; margin-top: 63px; padding-top: 8px; width: 160px; height: 55px; text-align: center; font-size: 16px; line-height: 20px; color: #fff; background: rgba(0, 0, 0, .5); -webkit-transition: margin-top .2s ease-in-out; -moz-transition: margin-top .2s ease-in-out; -o-transition: margin-top .2s ease-in-out; transition: margin-top .2s ease-in-out; }
.avatar a:hover span { display: block; margin-top: 0; }
.topspaceinfo { background: #f16e50; padding: 40px 20px; color: #fff }
.topspaceinfo h1 { font-size: 16px; line-height: 40px }
.userinfo { padding: 20px; font-size: 14px; line-height: 28px; color: #666; }
.userinfo a { color: #f16e50; }
.userinfo a:hover { color: #000 }
.q-fans, .btns a { padding: 0 10px }
.q-fans a { font-weight: bold; }
.btns a { border-right: #dad9d5 1px solid; }
aside section { display: block; overflow: hidden }
aside section h2 { background: #f16e50; color: #FFF; padding-left: 30px; height: 30px; line-height: 30px; font-size: 14px; }
.newpic ul, .taglist ul { padding: 20px 30px; overflow: hidden }
.newpic ul li { display: inline; width: 48px; height: 48px; }
.newpic ul li img { width: 48px; height: 48px; border: 0; display: block; float: left; border: 1px solid transparent; }
.newpic ul li img:hover { opacity: 0.5 }
.taglist ul li a { padding: 2px 5px; display: inline-block; float: left; margin-right: 5px; color: #454545; }
.taglist ul li a:hover { background: #f16e50; color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px }

.blogitem { width: 70%; background: #fff; float: right }
.blogitem article { border-bottom: #F4F3EF 40px solid; }
.title { background: url(../images/titlebg.png) no-repeat 20px 37px; font-size: 20px; line-height: 28px; display: inline-block; padding: 38px 60px 8px 40px; border-bottom: 1px solid #e2e2e2; width: 100%; }
.title a { color: #454545;margin-left: 10px; }
.title a:hover { padding: 10px }
.text { font-size: 14px; padding: 20px 40px; }
.text p { line-height: 24px; margin-bottom: 10px }
.textimg { text-align: center }
.textimg img { max-width: 500px; width:calc(90%);}/*for ie6*/
.textfoot { padding: 20px 60px; border-top: 1px solid #dddcdb; text-align: right; box-shadow: #999 2px 2px 3px }
.textfoot a { margin-left: 10px; }
.pages { padding: 0 60px 25px; background: #F4F3EF; text-align: right }
.pages span { background: #f16e50; color: #fff; }
.pages a { background: #fff; color: #454545; padding: 5px 8px; border: none; margin: 0 0 0 5px; }
.pages span { padding: 5px 8px; border: none; margin: 0 0 0 5px; }
.pages a:hover { background: #CCC }

@media (max-width:1200px){

}

@media (max-width:640px){
    aside { width: 100%; float: none; }
    .blogitem { width: 100%; background: #fff; float: none }
    .avatar {
        margin: 10px 10px;
        width: 80px;
        height: 80px;
        float: left;
        border-radius: 80px;
        -moz-border-radius: 80px;
        -webkit-border-radius: 80px;
        overflow: hidden;
    }
    .avatar a { display: block; padding-top: 20px; width: 80px; height: 63px; background: url(../images/photo.jpg) no-repeat; background-size: 80px 80px }
    .avatar a span { display: block; margin-top: 63px; padding-top: 8px; width: 80px; height: 40px; text-align: center; font-size: 8px; line-height: 20px; color: #fff; background: rgba(0, 0, 0, .5); -webkit-transition: margin-top .2s ease-in-out; -moz-transition: margin-top .2s ease-in-out; -o-transition: margin-top .2s ease-in-out; transition: margin-top .2s ease-in-out; }
    .avatar a:hover span { display: block; margin-top: 20px; }
    .topspaceinfo {
        background: #f16e50;
        padding: 10px 10px;
        color: #fff
    }

    .userinfo { padding: 10px; font-size: 10px; line-height: 28px; color: #666; }
    .userinfo a { color: #f16e50; }
    .userinfo a:hover { color: #000 }
    .userinfo .q-fans, .btns { margin-left:90px;}
    .userinfo a { padding: 0 10px }
    .userinfo .q-fans a { font-weight: bold; }

    .newpic {}
    .newpic ul, .taglist ul { padding: 20px 30px; overflow: hidden }
    .newpic ul li { display: inline; width: 48px; height: 48px; }
    .newpic ul li img { width: 48px; height: 48px; border: 0; display: block; float: left; border: 1px solid transparent; }
    .newpic ul li img:hover { opacity: 0.5 }

    .taglist {}
    .taglist ul li a { padding: 2px 5px; display: inline-block; float: left; margin-right: 5px; color: #454545; }
    .taglist ul li a:hover { background: #f16e50; color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px }

    article img { width: calc(80%)}
}