* { margin: 0; padding: 0; }
*:focus { outline: none; }
html{font-size:62.5%;}
body {font:500 14px/160% "微软雅黑", Arial, Helvetica, sans-serif; color: #393d41; margin: 0; padding: 0; background: #ececec; }
form, ul, ol, li, a, input, p, em, label, select, textarea, h1, h2, h3, h4,img { margin: 0; padding: 0; list-style: none; border:none; outline: none; }
body,div,ul,form,ol,ul,li,a,a:focus,a:hover,input,p,span,i,h1,h2,h3{ tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color: rgba(0,0,0,0); -moz-tap-highlight-color: rgba(0,0,0,0);}
a{ text-decoration: none; }
p { clear: both; }
/*=============header===========*/
.header { width: 100%; min-width: 320px; background:url(../images/header.jpg) no-repeat; background-size:100% 100%; height: 54px; }
.header ul{float:right; width:158px;}
.header li{width:66px; padding-right:13px; height:54px; float:left;}
.header li.on{background:url(../images/title_bg.png) no-repeat; background-size:100% 100%;}
.header li a{width:33px; height:17px;  display:block; margin:18px auto;}
.header li a.new{background:url(../images/new.png) no-repeat; background-size:100% 100%;}
.header li a.hot{background:url(../images/hot.png) no-repeat; background-size:100% 100%;}
.header .info{float:right; white-space:nowrap; padding:6px 15px 0 0; line-height:22px; color:#fff;}
.header .title{font-size:20px; clear:both; padding-bottom:2px;}
.header .user{font-size:14px; clear:both; width:84px; float:right;}
.header .user i{width:18px; height:16px; float:left; margin:3px 5px 0 0; background:url(../images/user_02.png) no-repeat; background-size:100% 100%;}
/*=============main===========*/
.main{padding:10px; clear:both; overflow:hidden;}
.program{position: absolute;padding-right: 10px;right:0;left:10px;}
.program li{float:left; width:100%; margin-bottom:12px; box-sizing:border-box; -moz-box-sizing:border-box; border:1px solid #cacaca; box-shadow:1px 1px 5px rgba(0,0,0,.15);}
.program .pic{width:100%; height:144px; overflow:hidden; position:relative;}
.program .pic img{width:100%; height:144px;}
.program .tag{position:absolute; right:8px; top:8px; width:52px; height:22px; line-height:22px; display:block; text-align:center; border-radius:4px; font-size:14px; color:#fff;
background-image: -webkit-linear-gradient(bottom, #cd1c31, #e52138);
background-image: -moz-linear-gradient(bottom, #cd1c31, #e52138);
background-image: -o-linear-gradient(bottom, #cd1c31, #e52138);
background-image: linear-gradient(to top, #cd1c31, #e52138);
background-color:#e52138;
}
.program .con{clear:both; padding:5px 10px; overflow:hidden; font-size:16px; line-height:24px; background:#fff;}
.program .title{float:left;}
.program .user{float:right; color:#b1b1b1;}
.program .user i{width:18px; height:16px; float:left; margin:3px 5px 0 0; background:url(../images/user_01.png) no-repeat; background-size:100% 100%;}

.editor{float:left; position:relative; width:100%; margin-bottom:12px;  border:1px solid #cdcdcd; box-shadow:1px 1px 5px rgba(0,0,0,.15); background:#fff; border-radius:10px;}
.editor i{position:absolute; left:-8px; top:-8px; width:30px; height:30px; background:url(../images/user_03.png) no-repeat; background-size:100% 100%;}
.editor .box{padding:10px 10px 8px 30px; overflow:hidden;position: relative;}
.editor textarea{width:70%; float:left; height:28px; padding:6px; overflow:auto; border-radius:5px; border:1px solid #ddd; box-shadow: inset 0 2px 4px rgba(0,0,0,.1);  font-size:14px; color:#393d41; line-height:20px; }
.editor .box a{float:right; width:23%; text-align:center; height:40px; line-height:40px; border-radius:5px; background:#379efd; color:#fff; font-size:16px;}
/*.editor .box a:hover{background:#333; color:#fff;}*/
.editor .box a.foc{background:#333; color:#fff;}
.editor .box a.def{background:#379efd; color:#fff;}
.editor p{font-size:16px; line-height:24px; padding:0 0 5px; text-align:center; color:#b1b1b1;}
.audio-icon{text-indent: -9999px;width: 42px;height: 42px;background: url('../images/voice.png') no-repeat;background-size: contain;display: block;position: absolute;left: 70%;margin-left: -26px;cursor: pointer;}

.choose{width:100%; clear:both;}
.choose ul{width:100%;}
.choose li{width:20%; float:left; height:40px; box-shadow:inset 0 5px 5px rgba(0,0,0,.2); cursor:pointer;}
.choose li:first-child{border-radius:0 0 0 10px;}
.choose li:last-child{border-radius:0 0 10px 0;}
.choose li i{position:static; width:20px; height:20px; margin:10px auto; display:block; background:url(../images/select.png) no-repeat; background-size:100% 100%; display:none;}
.choose li.on i{display:block;}

.comment{width:100%;margin-bottom: -55px;overflow: hidden;}
.comment li{float:left; width:100%; margin-bottom:12px; box-sizing:border-box; -moz-box-sizing:border-box; border:1px solid #cdcdcd; box-shadow:1px 1px 5px rgba(0,0,0,.15); background:#fff; border-radius:10px;}
.comment .text{font-size:15px; line-height:20px; padding:10px; border-bottom:1px solid #cdcdcd;}
.comment .info{height:36px; line-height:36px; clear:both; font-size:14px; color:#b1b1b1; white-space:nowrap;}
.comment .info a{color:#b1b1b1;}
.comment .info a:hover{color:#393d41;}
.comment .name,.comment .time{float:left; padding-left:10px; max-width:30%; overflow:hidden; text-overflow:ellipsis;}
.comment .like{padding:0 10px; float:right; border-left:1px solid #cdcdcd;}
.comment .like i{width:12px; height:10px; float:left; margin:13px 3px 0 0; background:url(../images/like.png) no-repeat; background-size:100% 100%;}
.comment .like:hover i{background:url(../images/like_on.png) no-repeat; background-size:100% 100%;}
.comment .liked{padding:0 10px; float:right; border-left:1px solid #cdcdcd;}
.comment .liked span{color: #393d41;}
.comment .liked i{width:12px; height:10px; float:left; margin:13px 3px 0 0; background:url(../images/like.png) no-repeat; background-size:100% 100%;}
.comment .liked i{background:url(../images/like_on.png) no-repeat; background-size:100% 100%;}
.comment .report{padding:0 10px; float:right; border-left:1px solid #cdcdcd;}
.comment .reported{color:#b1b1b1;padding:0 10px; float:right; border-left:1px solid #cdcdcd;}
/*==========head===========*/
.photo{width:130px; height:130px; margin:40px auto; clear:both; background:url(../images/photo.png) no-repeat; background-size:100% 100%; overflow:hidden;}
.photo input{font-size:100px; width:130px; height:130px; opacity:0; filter:alpha(opacity=0);}
.userInfo{padding:0 25px 30px; clear:both;}
.userInfo li{border:2px solid #d1d1d1; border-radius:8px; padding:10px 15px; line-height:26px; background:#f0f0f0; clear:both; margin-bottom:18px; font-size:18px;}
.userInfo li span{float:left; width:50px;}
.userInfo li input{width:75%; background:#f0f0f0; font-size:18px; color:#333;}
.userInfo li select{width:75%; line-height:26px; font-size:18px; background:#f0f0f0; background-size:20px 20px !important;}
.userInfo li.button{border:none; background:none; padding:0;}
.userInfo li.button a{width:100%; border-radius:8px; text-align:center; display:block; height:50px; line-height:50px; color:#fff; background:#379efd;}
.userInfo li.button a:hover{background:#333; color:#fff;}
/*=============tip==============*/
.tipBox{position:absolute; display:none; width:90%; left:5%; top:75px; border-radius:5px; padding:10px 0; background:rgba(0,0,0,.6); color:#fff; font-size:14px; line-height:20px; text-align:center;}
.reportBox{position:fixed; left:0; bottom:0; width:100%; background:rgba(0,0,0,.7); border-radius:5px 5px 0 0; box-shadow:1px 1px 25px rgba(0,0,0,.5); display:none;}
.reportBox ul{padding-bottom:20px; padding-top:10px;}
.reportBox li{clear:both; width:86%; margin:10px auto 0 auto; box-shadow:-1px -1px 3px rgba(0,0,0,.5),1px 1px 3px rgba(0,0,0,.5);  border-radius:6px; height:38px; line-height:38px; font-size:16px; text-align:center;
background-image: -webkit-linear-gradient(bottom, #ddd, #eee);
background-image: -moz-linear-gradient(bottom, #ddd, #eee);
background-image: -o-linear-gradient(bottom, #ddd, #eee);
background-image: linear-gradient(to top, #ddd, #eee);
background-color:#eee;
}
.reportBox li a{padding:0 15px; display:block; color:#393d41;}
.reportBox li:first-child a{border-top:none;}
.reportBox li:hover{background:#379efd;}
.reportBox li:hover a{color:#fff;}
@media screen and (max-width :320px){
.comment .info{font-size:13px;}
.comment .like,.comment .report{padding:0 6px;}
}








#wrapper{position: absolute;top:196px;padding: 10px;bottom: 0;right:0;}
/**
 *
 * Pull down styles
 *
 */
#pullDown, #pullUp {
    height:40px;
    line-height:40px;
    padding:5px 10px;
    font-weight:bold;
    font-size:14px;
    color:#888;
}
#pullDown .pullDownIcon, #pullUp .pullUpIcon  {
    display:block; float:left;
    width:40px; height:40px;
    background:url(../images/pull-icon@2x.png) 0 0 no-repeat;
    -webkit-background-size:40px 80px; background-size:40px 80px;
    -webkit-transition-property:-webkit-transform;
    -webkit-transition-duration:250ms;
}
#pullDown .pullDownIcon {
    -webkit-transform:rotate(0deg) translateZ(0);
}
#pullUp .pullUpIcon  {
    -webkit-transform:rotate(-180deg) translateZ(0);
}

#pullDown.flip .pullDownIcon {
    -webkit-transform:rotate(-180deg) translateZ(0);
}

#pullUp.flip .pullUpIcon {
    -webkit-transform:rotate(0deg) translateZ(0);
}

#pullDown._loading .pullDownIcon, #pullUp._loading .pullUpIcon {
    background-position:0 100%;
    -webkit-transform:rotate(0deg) translateZ(0);
    -webkit-transition-duration:0ms;

    -webkit-animation-name:loading;
    -webkit-animation-duration:2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
}

@-webkit-keyframes loading {
    from { -webkit-transform:rotate(0deg) translateZ(0); }
    to { -webkit-transform:rotate(360deg) translateZ(0); }
}
#pullUp{display: none;}
.no-comments{height: 100px;line-height: 100px;text-align: center;display: none;}
.no-programs{height: 100px;line-height: 100px;text-align: center;}