html { background:#fff; font-family: Helvetica; -webkit-text-size-adjust:none; word-break : break-word;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, code, em, img, q, small, strong, dd, dl, dt, li, ol, ul, fieldset, form, label, table, tbody, tr, th, td, input { margin: 0; padding: 0; }
#app,
form,
.btn,
.control,
.top_bar .btn,
.list_content .swipe_bg,
.list_img_holder img,
.top_menu_list,
.top_menu,
.list_action_menu,
.closeBtn{-webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-user-select:none; text-decoration:none}
a{ text-decoration:none; color:#333;}
a:visited{ color:#333;}
.backdrop{ display:none; position:absolute; left:0; top: 0; right: 0; bottom: 0; background:rgba(255,255,255,.3); z-index: 3500;}
body{ position:relative}
body.withHeader{ padding-top:80px}
body.hasMask .backdrop{ display: block;}
textarea, input[type=text], input[type=password] { background: white; border-radius: 4px; border: 1px solid #CCC; box-shadow: inset 0 1px 0px #CDCDCD; outline: 0; font-size:14px; color: #444; display:block; }
.src, .time{ padding-right:5px;}
.src, .tag, .time, .view_counter, .star_m, .star_b, .star_s,.cmt{ color:#999; font-size:11px; line-height:20px }
.comment_count{ font-style:normal;}
.ad_label{ font-size:11px; margin-right:10px ; color:#fff; background:#aaa; border-radius:2px; padding:0px 2px;}
.subject_label{ font-size:11px; margin-right:10px ; color:#fff; background:#f44; border-radius:2px; padding:0px 2px;}
.fr { float:right }
.fl { float:left }
.absr{ position:absolute; right:0; top:0 }
.absl{ position:absolute; left:0; top:0 }
.clear { clear:both }
table{border-collapse: collapse;}
.global_tip{ position:fixed; top:80px; width:100%; background:rgba(90,160,230,.9); text-align:center; height:30px; line-height:30px; font-size:14px; color:#fff; display:none;}
content{ display: block;}
/*首页app下载*/
#list_recommend{ position:relative; display:none}
#list_recommend #recommend_link img{ width:100%; background:none; display: block;}
#list_recommend .close{ position:absolute; top:0px;right:0px; display: block; width:22px; height:22px; padding:8px; background:url(http://s0.pstatp.com/image/toutiao_mobile/recommend_cancel@2x.png) no-repeat center center; background-size:22px}
/*sns big icons*/
.sns_login a{ display:inline-block; height:42px; font-size:12px; color:#333; width:42px; background:url(http://s0.pstatp.com/image/toutiao_mobile/ex_login.png?ver=201405142123) no-repeat 0px 0px; background-size:43px; }
.sns_login .sina_weibo{ background-position:0px -86px; background-color:#fdd253}
.sns_login .qzone_sns{ background-position:0px 0px; background-color:#2c96f8}
.sns_login .qq_weibo{ background-position:0px -43px; background-color:#34afe4}
.sns_login .renren_sns{ background-position:0px -129px; background-color:#007fd3}
/*弹窗*/
#modal_login{ display:none}
#modal_login .sns_login_con .login_tip{ margin: 30px 0 15px 0; width:250px; height:90px; background:url(http://s0.pstatp.com/r2/image/toutiao_mobile/login_img.png?ver=201405142123) no-repeat center center; background-size:250px}
#modal_login .sns_login_con table{width:250px; margin:0 auto}
#modal_login .sns_login_con table tr td{text-align:center;font-size:11px;color:#666; line-height: 2em;}
#connect_window{ display:none}
.icon_hot,.icon_recommend,.icon_fav,.icon_ad{ display:block; width:18px; height:18px; position:absolute;background: url(http://s0.pstatp.com/image/toutiao_mobile/dynamic_action.png?ver=201405061806) no-repeat 0px -120px; background-size:25px; left:0; top:-1px }
.icon_recommend{ background-position:0px -138px;}
.icon_fav{ background-position:0px -156px; display:none}
.icon_ad{ background:#fff; bottom: 10px; top: auto; width:1px; height:0px; left:0; overflow:hidden;}
.avatar{ display: inline-block; border-radius: 80px; border:1px solid #fff; overflow:hidden}
.avatar img{width:29px; height:29px; display:block; background: url(http://s0.pstatp.com/image/toutiao_mobile/home_head_default@2x.png) #fff no-repeat center center; background-size: 29px 29px; overflow:hidden }
.avatar img.large{ width:50px; height:50px; display:block; background-size: 50px 50px}
.avatar img.xlarge{ width:80px; height:80px; display:block; background-size: 80px 80px}
#footer{ text-align:center; padding:10px 0; margin-top:20px; background:#f5f5f5; font-size: 13px; color: #666; line-height: 1.5em;}
#footer a{ color:#666; font-size:13px;}
#footer a:hover{color:#ca4f4f; text-decoration:underline}
/*左侧抽屉*/
#left{ position:fixed; top:0; bottom:0; left:0; width: 270px; background:#393939; z-index:4000; display: none; -webkit-animation:slideInFromLeft 300ms ease}
#left .close{ position: absolute; top:0; right:0; height:30px; width:30px; background:#F00;}
.leftOpen #left{ display: block;}
#left #login,
#left #logout{ background:#272727; height:86px; box-sizing:border-box}
#left #logout{ padding:15px 20px 15px 37px; }
#left #logout .avatar{ vertical-align:bottom; border:none}
#left #logout .name{ display:inline-block; height:50px; width:150px; overflow:hidden; line-height:50px; font-size:18px; font-weight:bold; color:#d4d4d4; margin-left:6px; }
#left #login{ padding:10px 0; text-align:center}
#left .login_tip{text-align: center;padding-top:5px;}
#left .login_tip span{ color: #d4d4d4;font-size:12px; }
#left .sns_login{ display:inline-block; margin:0 10px}
#left_menu{ }
#left_menu.scroll{overflow:scroll; overflow-x:hidden; -webkit-overflow-scrolling:touch;}
#left_menu ul,#left_menu li{ list-style-type:none; padding: 0; margin-right: 0 }
#left_menu .btn{ color:#d4d4d4; font-size:18px; display:block; height:50px; line-height:50px; padding-left:100px; border-bottom:1px solid #272727; background:url(http://s0.pstatp.com/image/toutiao_mobile/left_drawer_icons@2x.png?ver=201406301944) no-repeat left 0px; background-size:32px;}
#left_menu .search{ background-position:50px 5px; }
#left_menu .favorite{ background-position:50px -40px}
#left_menu .settings{ background-position:50px -145px}
#left_menu .feedback{ background-position:50px -200px}
#left_menu .quite{ background-position:50px -250px}
#left_menu .about{ background-position:50px -450px}
#left_menu .app{ background-position:50px -300px}
#left_menu .activity{ background-position:50px -350px}
#left_menu .cooperation{ background-position:50px -400px}
/* app页面 */
.unit { border-top:1px solid #c7c7c7; clear:both; float:left; width:100%; background:url(http://s0.pstatp.com/r2/image/app/arrow.png?ver=201406240047) #e0e0e0 no-repeat right center; background-size:28px 13px;}
.unit:nth-child(2n){background-color:#d8d8d8;}
.unit a{ display:block; padding:10px 0px; width:100%; float:left; height:100%}
.unit .left{ width:63px; float:left; margin-left:15px; height:60px}
.unit .right{ float:left; width:230px; height:60px;}
.unit .left img{ width:57px; height:57px; border-radius:13px; background:#fff; }
.unit .name{ color:#000; font-size:18px; font-weight:bold; }
.unit .content{ color:#505050; font-size:13px; font-weight:bold; padding:3px 0 5px}
.unit .star{ color:#505050; font-size:12px; font-weight:bold; text-decoration:none; }
.unit .name ,.unit .content ,.unit .star{ text-shadow: 0 1px 0 #e6e6e6}
.star{ position:relative; padding-left:65px;}
.star .star_con{ background:url(http://s0.pstatp.com/r2/image/app/star_gray@2x.png?ver=201406240047) repeat-x; background-size:12px 12px; width:60px; height:12px; position:absolute; left:0px;}
.star .star_r { background:url(http://s0.pstatp.com/r2/image/app/star@2x.png?ver=201406240047) repeat-x; background-size:12px 12px; height:12px; position:absolute; left:0; width:0px}
/*icons*/
.item_info{ clear:both;}
.item_info .cmt{ margin:4px 0 0 0;}
/* header */
header { display:block; z-index:999; overflow: hidden; position:fixed; top:0; left:0; right:0; -webkit-animation:slideInFromTop 300ms ease}
header.relative{ position:relative}
/*首页bar*/
.top_bar{ height: 44px; position:relative; background:rgba(255,50,50,.9); }
.top_bar .abs_l,
.top_bar .abs_m,
.top_bar .abs_r{ position: absolute; left: 0; top: 0; width: 44px; height: 44px; box-sizing: border-box; -moz-box-sizing:border-box;}
.top_bar .abs_l{ width: 54px; z-index:100 }
.top_bar .abs_m{ width: 100%; text-align: center; font-size: 20px; color: #fff; font-weight: bold; line-height: 44px; }
.top_bar .abs_r{ left: auto; right: 0px; z-index:100; width:auto; }
.top_bar .refresh_btn,
.top_bar .refresh_title,
.top_bar .back,
.top_bar .comment_count,
.top_bar .user,
.top_bar .app,
.top_bar .cancel,
.top_bar .submit{ display: inline-block; height: 44px;}
.top_bar .refresh_title{ background:url(http://s0.pstatp.com/image/toutiao_mobile/title@2x.png) no-repeat right center; width:83px; background-size:83px}
.top_bar .refresh_btn{ background:url(http://s0.pstatp.com/image/toutiao_mobile/ex_refreshicon_titlebar@2x.png?version=20140604) no-repeat center center; width:25px; background-size:13px}
.top_bar .back,
.top_bar .app,
.top_bar .search{ display:inline-block; height:24px; width:24px; padding: 10px; background: url(http://s0.pstatp.com/image/toutiao_mobile/detail_icons.png) no-repeat center -490px; background-size:25px;}
.top_bar .refresh_btn.rotate,
.fix_btns .fresh_btn.rotate{
-webkit-transform-style: preserve-3d;
/*让整个行使用x-轴旋转、7秒中的动画、无限次播放以及线性 */
-webkit-animation-name: x-spin;
-webkit-animation-duration: 0.7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
/* 定义要调用的动画 */
@-webkit-keyframes x-spin {
0% { -webkit-transform: rotateZ(0deg); }
50% { -webkit-transform: rotateZ(180deg); }
100% { -webkit-transform: rotateZ(360deg); }
}
@-webkit-keyframes slideInFromLeft{
0% { opacity:.5; -webkit-transform:translateX(-270px)}
100% { opacity:1; -webkit-transform:translateX(0)}
}
@-webkit-keyframes slideInFromTop{
0% { -webkit-transform:translateY(-30px)}
100% { -webkit-transform:translateY(0)}
}
.top_bar .search{ background: url(http://s0.pstatp.com/image/toutiao_mobile/index_search_icon.png) no-repeat center; background-size:30px; padding-right: 0; width: 26px;}
.top_bar .back{ top: 0; left: 0; border-radius: 0px;}
.top_bar .user{ padding: 0 10px;}
.top_bar .user .avatar{width:29px; height:29px; display:block; background:url(http://s0.pstatp.com/image/toutiao_mobile/home_head_default@2x.png) #fff no-repeat center center; background-size:29px 29px; margin-top:7px}
.top_bar .app{ padding:10px; background-position:center -816px }
.top_bar .comment_count{ width: 44px; text-align: center; color: #fff; font-size: 12px; padding-top: 25px; background: url(http://s0.pstatp.com/image/toutiao_mobile/detail_icons.png) no-repeat center -453px; background-size:25px; }
.top_bar h1{color:#fff; font-size:20px; font-weight:bold; line-height:44px; }
.top_menu{
overflow:hidden;
overflow-x:scroll;
-webkit-overflow-scrolling:touch;
background:rgba(255,255,255,0.9);
border-bottom: 1px solid #f0f0f0
}
.top_menu::-webkit-scrollbar { height:0px; }
.top_menu_list{
white-space: nowrap;
}
.top_menu_list .btn{
white-space: nowrap;
display: inline-block;
padding: 0 10px;
color: #333;
text-decoration: none;
font-size: 14px;
line-height:26px;
height:26px;
margin:5px 0px 5px 5px;
}
.top_menu_list .btn.cur{ background:#f00; border-radius:3px; color:#fff}
/* 下载banner */
.app-banner{ background:rgba(32, 37, 47, 0.9); height:50px; padding:0 7px; overflow:hidden; position:relative; top:0; left:0; right:0; box-sizing:border-box;}
.app-banner.fixed-bottom{ position: fixed; top: auto; bottom: 0}
.app-banner .icon{ top:10px; position:absolute; width:30px; height:30px; background: url(http://s0.pstatp.com/r2/image/toutiao_mobile/banner_toutiao_icon.png) no-repeat center center; background-size: 30px;}
.toutiao-app .icon{}
.essay-app .icon{background: url(http://s0.pstatp.com/r2/image/toutiao_mobile/banner_essay_icon.png) no-repeat center center; background-size: 30px;}
.app-banner .desc{
position: absolute;
top: 10px;
left: 45px;
height: 30px;
width: 130px;
background: url(http://s0.pstatp.com/r2/image/toutiao_mobile/banner_text.png) no-repeat left center;
background-size: 78px;
}
.app-banner .close{height: 40px; width: 20px; padding: 5px; position: absolute; right: 0px; top: 0px;
background: url(http://s0.pstatp.com/r2/image/toutiao_mobile/banner_ic_close.png) no-repeat center center; background-size: 14px;left: auto;}
.app-banner .buttons{ position:absolute; top:10px; right:30px; width: 90px; text-align: center;}
.app-banner .download,
.app-banner .open{background: none; display: inline-block; height: 30px; width: 70px; font-size: 13px; line-height: 30px; color: #fff; border-radius: 3px; text-align: center; margin-left:5px}
.app-banner .download{ background:#ff424b; border: none; box-shadow: 0 2px 0 #c8353c}
.has_top_banner{ padding-top:50px;}
.has_top_banner .toutiao-app{ display:block;}
/* letv合作 */
.letv .app-banner .close{ display: none}
.letv .app-banner .buttons{ right: 10px }
.video_btn{ display: block; position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: url(http://s0.pstatp.com/image/toutiao_mobile/video_day.png) no-repeat center center; background-size: 27px 27px }
/* */
section{ border-bottom:1px solid #f0f0f0; background:#fff;}
.article section{-webkit-transition:all 300ms ease; -webkit-transform:translate3d(0,0,0); transition:transform 300ms ease; transform:translate3d(0,0,0); }
.article section.open{transform:translate3d(-200px,0,0); -webkit-transform:translate3d(-200px,0,0);}
.article section.dismiss{transform:translate3d(-320px,0,0); -webkit-transform:translate3d(-320px,0,0); opacity:0}
.article section.taobaoAd{ display: none}
.article .item_info .cmt { margin-right:40px;}
section .article_link{ display:block; padding:10px; padding-bottom:6px; text-decoration:none}
section .list_action {}
section h3{ color:#111; font-size:18px; font-weight:normal}
.iphone section h3{ font-weight: bold;}
section h3.article{ padding-bottom:5px;}
section p{ font-size: 14px; line-height:1.3em}
section .article_link:visited h3{ color: #aaa}
section .abstract{font-size: 12px; color: #666; line-height: 1.5em; margin:5px 0}
#after_wrap{ -webkit-transition:all 300ms ease; -webkit-transform:translate3d(0,0,0); -moz-transition:all 300ms ease; -moz-transform:translate3d(0,0,0)}
.list_bottom{ text-align:center}
.list_bottom a{ display:block; color:#999; font-size:18px; line-height:3em; text-decoration:none;}
.list_bottom section{ border:none;}
/* 不感兴趣 收藏按钮 */
.list_action{
position: absolute;
display: inline-block;
height: 100%;
width: 50px;
background:url(http://s0.pstatp.com/image/toutiao_mobile/popicon_listpage_dynamic@2x.png?ver=201405161457) no-repeat right bottom;
background-size: 31px;
bottom: 0px;
right: 0px;
padding: 0!important;
}
.list_action_menu{
position: absolute;
width: 100%;
right: 0;
top: 0;
display:none;
overflow:hidden;
background:#f5f5f5;
border-bottom: 1px solid #f0f0f0;
box-sizing: border-box;
}
.list_action_menu span{
display: block;
width: 100px;
float: right;
height: 100%;
box-sizing: border-box;
-moz-box-sizing:border-box;
}
.list_action_menu span.dislike{background: url(http://s0.pstatp.com/image/toutiao_mobile/dislove_drawer_feed@2x.png) no-repeat center center; background-size:40px;}
.list_action_menu span.fav{background: url(http://s0.pstatp.com/image/toutiao_mobile/favorite_drawer_feed@2x.png) no-repeat center center; background-size:40px;}
.list_action_menu span.unfav{background: url(http://s0.pstatp.com/image/toutiao_mobile/favorited_drawer_feed@2x.png) no-repeat center center; background-size:40px;}
.list_img_holder{ background:url(http://s0.pstatp.com/inapp/image_bg_day.png?ver=201405051935) #efefef no-repeat center center; background-size:54px; width:86px; height:60px;}
.list_img_holder_large{ background:url(http://s0.pstatp.com/inapp/image_bg_day.png?ver=201405051935) #efefef no-repeat center center; background-size:108px;overflow:hidden; width:100%; position: relative;}
.list_img_holder img{ border:none; display:block; width:100%; min-height:100%; -webkit-transition:opacity 300ms ease; -moz-transition:opacity ease .3s; pointer-events: none}
.list_img_holder_large img{border:none; display:block; width:100%}
.list_img_right{ float:right; margin-left:10px; overflow: hidden; position: relative;}
.list_image ul{ display:block; min-height:62px; clear:both; }
.list_image ul li{ display:inline-block; float:left; overflow:hidden; width:33%}
.list_image ul li:last-child{ width:34%}
.list_image ul li .list_img_holder{ margin:0 auto}
.list_image ul li:first-child .list_img_holder{ float:left}
.list_image ul li:last-child .list_img_holder{ float:right}
@media screen and (min-width: 400px) {
section h3{ font-size:22px}
section p{ font-size: 18px;}
.list_img_holder{width:112px; height:78px;}
.list_img_holder_large{ width:100%;}
.video_btn{ background-size: 40px 40px }
}
.jqmWindow {
display: none;
position: fixed;
top: 50%;
left: 50%;
margin-left: -140px;
margin-top:-115px;
width: 280px;
height:229px;
overflow:hidden;
z-index:5000;
background-color: #fff;
color: #333;
border-radius:3px;
-webkit-animation: popUp .3s 1 ease;
-webkit-transition: .2s ease-in-out;
-moz-transition: .2s ease-in-out;
transition: .2s;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-moz-animation: popUp .3s 1 ease;
box-shadow:0 0 10px #333;
}
#connect_window{
position: fixed;
left: 0;
width: 100%;
overflow:hidden;
z-index:5000;
background-color: rgba(255,255,255,1);
color: #333;
height: 100%;
margin-left:0px;
top: 0;
z-index: 5000;
border: 0;
border-radius: 0;
display: none;
background:url(http://s0.pstatp.com/image/toutiao_mobile/spinner.png) #fff no-repeat center center;
}
#connect_window iframe{ margin:0 auto}
.jqmOverlay {
background: rgba(0,0,0,.5);
position: fixed;
z-index:4999;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.closeBtn{
position:absolute;
top:0px;
right:0px;
padding:5px;
width:22px;
height:22px;
background:url(http://s0.pstatp.com/image/toutiao_mobile/recommend_cancel@2x.png?ver=201403191810) no-repeat center center;
background-size:22px;
cursor: pointer;
z-index: 5001;
}
/*个人页面*/
#personal{background: url(http://s0.pstatp.com/r2/image/toutiao/bg_pgc_comment@2x.png) no-repeat;
background-size:100% 100%;}
.personal_info{ clear:both; padding:20px 10px}
.personal_info .avatar{ float:left; border-radius:5px; margin-right:10px; border:none}
.personal_info h1{ font-size:20px; color:#fff}
.personal_info p{ font-size:12px; color:#fff }
.personal_info p a{ color:#fff }
.personal_tabs{ background:rgba(0,0,0,.4); text-align:center}
.personal_tabs li{ display:inline-block; width:18%; text-align:center}
.personal_tabs li a{ display:block; font-size:18px; color:#fff; line-height:2em}
.update_content section{ padding:10px}
.update_content section .username{ font-size:12px; color:#666}
.update_content section .username a{ padding-right:5px; color:#333}
.update_content section .avatar{ border-radius:5px; float:left}
.update_content section .update_title a{ display:block; background:url(http://s0.pstatp.com/image/toutiao_mobile/arrow_comment@2x.png) #f5f5f5 no-repeat right center; background-size:30px; border-radius:5px; padding:5px 30px 5px 10px}
.update_content section .update_title a .title{ font-size:15px; line-height:1.3em; }
@media screen and (min-width: 400px) {
.update_content section .update_title a .title{ font-size:18px;}
}
/* essay 页面 */
.qqlightapp.essay .top_bar .refresh_title,
.xiaomi.essay .top_bar .refresh_title{ background:url(http://s0.pstatp.com/image/toutiao_mobile/title_duanzi@2x.png) no-repeat right center; width:83px; background-size:83px}
.xiaomi.essay .top_bar,
.qqlightapp.essay .top_bar,
.xiaomi.essay .top_menu_list .btn.cur,
.qqlightapp.essay .top_menu_list .btn.cur{ background: rgba(40,50,70,.9);}