@import url(http://fonts.googleapis.com/css?family=Oswald:300);
@import url(http://fonts.googleapis.com/css?family=Oswald:700);
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro|Oswald:400);

*{margin:0; padding:0; outline:none; border:0; list-style:none; text-decoration:none; font-family:Arial,sans-serif}
.clearfix::after{content:" "; display:table; clear:both}
.frm input, .frm textarea{padding:5px; border:1px solid #ccc}
.frm input[type=text]{width:200px}
.frm label{width:120px; float:left}
.frm .form-row{padding:10px 0; margin:10px 0}
.frm .form-row:after{clear:both; content:" "; display:table}
a:hover{color:#ff0031!important}
.container{width:1000px; margin:0 auto}
.header{width:100%; position:relative}
.header nav{display:block; width:100%; height:43px; margin:5px 0}
.header nav .logo{float:left; width:147px; margin-right:10px; height:43px; background: url(/public/images/logo.png) no-repeat; text-indent:-9999px}
.header nav .jokelogo{float:left; width:111px; margin-right:10px; height:54px; background: url(/public/images/logo.png) no-repeat; background-size: 100% 100%; text-indent:-9999px}
.header nav .buckets{float:left; width:870px}
.header nav .buckets-collapse{display:none; float:right; width:30px; height:30px; background:url(/public/images/icon-menu.png) no-repeat}
.header nav ul li{float:left; height:43px}
.header nav ul li a{display:block; box-sizing:border-box; border-bottom:3px solid #fff; height:43px; padding:0 11px; font-size:20px; font-family:arial; line-height:43px; color:#333; margin-top: 10px;}
.header nav ul li a.active, .header nav ul li a:hover{color:#ff0031; border-color:#ff0031}
.header nav .search-box{position:absolute; top:10px; right:0}
.header nav .search-box input{float:left; width:120px; height:25px; padding:0 5px; border-sizing:border-box; border:0; background:#f2f2f2; color:#ff0031}
.header nav .search-box button{float:left; width:25px; height:25px;  background:url(/public/images/icon-search.png) #f2f2f2 center no-repeat}

.zone1{margin:5px 0}
.zone1 .column{float:left; box-sizing:border-box}
.zone1 .column:nth-of-type(2n+1){width:69%; margin-right:1%; clear:left}
.zone1 .column:nth-of-type(2n+2){width:30%}

article.huge .media a{display:block}
article.huge .media img{width:100%}
article.huge .content{padding:5px 10px}
article.huge .title a{font-weight:700; line-height:36px; font-size:30px; color:#262626}
article.huge .description{font-size:16px; padding:5px 0; font-family:Georgia,Arial,Verdana,sans}

.small-carousel{height:145px; overflow:hidden; position:relative; padding:10px 0; box-sizing:border-box; background:#f2f2f2}
.small-carousel .carousel-container{position:relative; width:2000px}
.small-carousel .carousel-item-prev{position:absolute; top:25px; left:-15px; z-index:1; float:left; cursor:pointer; width:50px; height:50px; background:url(/public/images/btn-prev.png) center no-repeat}
.small-carousel .carousel-item-next{position:absolute; top:25px; right:-15px; z-index:1; float:left; cursor:pointer; width:50px; height:50px; background:url(/public/images/btn-next.png) center no-repeat}
.small-carousel .carousel-item{float:left; width:150px; margin-left:26px; height:120px}
.small-carousel .carousel-item article .media{width:100%; height:90px; overflow:hidden}
.small-carousel .carousel-item article .media img{max-height:90px; min-width:160px}
.small-carousel .carousel-item article .title a{color:#262626; font-size:14px; font-weight:300}

.list1 h2.headline{font-size:18px; line-height:40px; font-weight:500; color:#ff0031; text-transform:uppercase;  background:url(/public/images/bg-headline.png) center repeat-x}
.list1 h2.headline span{ padding:10px; background:#fff}
.list1 li{padding:7px 0; border-bottom:1px solid #d9d9d9}
.list1 li article:after{clear:both; display:table; content:" "}
.list1 li article .time{float:right; width:35px}
.list1 li article .title{padding-left:10px}
.list1 li article .title a{font-size:16px; font-family:Arial; font-weight:300; line-height:20px; color:#262626}

.zone2{margin-top:20px}
.zone2 .column{float:left; width:33.333%; box-sizing:border-box; overflow:hidden}
.zone2 .column:nth-of-type(3n+1){padding-left: 0; padding-right:10px; clear:left}
.zone2 .column:nth-of-type(3n+2){padding-left:5px; padding-right:5px; clear:none}
.zone2 .column:nth-of-type(3n+3){padding-left:10px; padding-right: 0; clear:right}
.zone2 .column .headline{background:url(/public/images/arrow.png) #1a1a1a 96% 50% no-repeat}
.zone2 .column .headline a{color:#fff; display:block; padding:10px; font-size:18px; font-weight:300; text-transform:uppercase}
.zone2 .column article .media{height:180px; overflow:hidden}
.zone2 .column article .media img{width:100%}
.zone2 .column article .content{padding:10px 0}
.zone2 .column article .title a{color:#262626; font-size:24px; font-weight:700; line-height:1.2}
.zone2 .column article:nth-of-type(n+2) .title a{font-size:16px; font-weight:300}
.zone2 .column article:nth-of-type(n+2) .content{border-top:1px solid #d9d9d9}

.zone3 .headline{background:url(/public/images/bg-headline.png) center repeat-x; margin:10px 0}
.zone3 .headline a{padding:10px 10px 10px 0; background:#fff; color:#FF0031; font-weight:500; font-size:30px; text-transform:uppercase}

.zone3 .column{float:left; width:50%; box-sizing:border-box; overflow:hidden}
.zone3 .column:nth-of-type(n+1){padding-right:5px; padding-left:0; clear:left}
.zone3 .column:nth-of-type(n+2){padding-left:5px; padding-right:0; clear:right}
.zone3 .column li .media{position:relative; height:270px; overflow:hidden}
.zone3 .column li .media img{width:100%}
.zone3 .column li .media .media-video-icon{display:block; position:absolute; bottom:0; left:0; width:45px; height:45px; background:rgba(0,0,0,0.2) url(/public/images/icon-video-small.png) center no-repeat}
.zone3 .column li .content .title{padding-bottom:5px}
.zone3 .column li .content .title a{font-size:30px; line-height:36px; font-weight:700; color:#262626}
.zone3 .column li .content .description{font-size:16px; padding:0 0 10px 0; font-family:Georgia,Arial,Verdana,sans}
.zone3 .column li:nth-of-type(n+2) article{display:block; padding:10px 0; border-top:1px solid #d9d9d9}
.zone3 .column li:nth-of-type(n+2) article:after{clear:both; content:" "; display:table}
.zone3 .column li:nth-of-type(n+2) article .media{width:40%; float:left; height:110px}
.zone3 .column li:nth-of-type(n+2) article .content{float:right; width:59%; box-sizing:border-box; padding:0 5px}
.zone3 .column li:nth-of-type(n+2) article .content .title a{color:#262626; font-size:22px; font-weight:700; line-height:28px}
.zone3 .column li:nth-of-type(n+2) .media .media-video-icon{width:30px!important; height:30px!important; background:rgba(0,0,0,0.2) url(/public/images/icon-video-tiny.png) center no-repeat!important}

.zone4 .column{float:left; width:50%; box-sizing:border-box}
.zone4 .column:nth-of-type(n+2){float:right; width:27%; padding-left:10px; clear:right}

.list2 .headline a{font-size:23px; color:#FF0031; display:block; background:url(/public/images/bg-headline-title.png) 0 50% no-repeat; padding-left:10px}
.list2 .headline a:hover{color:#FF0031!important; text-decoration:underline}
.list2 article{display:block; padding:10px 0}
.list2 article:after{clear:both; content:" "; display:table}
.list2 article .media{float:left; width:60%}
.list2 article .media img{width:100%}
.list2 article .content{float:left; width:40%; box-sizing:border-box; padding:0 10px}
.list2 article .content .title{font-size:36px; line-height:1.2em; font-weight:300}
.list2 article .content .title a{color:#262626}
.list2 article .content .description{font-weight:300; font-size:16px; line-height:24px; padding:10px 0; color:#888}

.list2 article:nth-of-type(n+2) .content .title{font-size:26px; line-height:1.2em; font-weight:300}
.list2 article:nth-of-type(n+2) .content .title a{color:#262626}
.list2 article:nth-of-type(n+2){border-top:1px solid #d9d9d9}
.list2 article:nth-of-type(n+2) .media{width:35%; height:150px; overflow:hidden}
.list2 article:nth-of-type(n+2) .content{width:65%}

.list3{background:#f9f9f9}
.list3 .headline{padding:10px; font-size:20px; color:#555; font-family:Arial}
.list3 li .media{width:100%; height:160px; overflow:hidden; position:relative}
.list3 li .media img{width:100%}
.list3 li .media .media-icon-video{position:absolute; top:40%; left:40%; display:block; width:40px; height:40px; background:url(/public/images/icon-video.png) 50% 50% no-repeat;}
.list3 li .content{box-sizing:border-box; padding:10px}
.list3 li .content .title{font-size:18px; font-family:Arial}
.list3 li .content .title a{font-family:Arial; color:#FF0031}

.list3 article:after{clear:both; content:" "; display:table}
.list3 li:nth-of-type(n+2) .media{float:left; width:35%!important; height:60px; overflow:hidden}
.list3 li:nth-of-type(n+2) .media img{width:100%}
.list3 li:nth-of-type(n+2) .media .media-icon-video{top:10; left:20px; background-image:url(/public/images/icon-video-tiny.png)}
.list3 li:nth-of-type(n+2) .content{float:left; width:65%!important; box-sizing:border-box; padding:0 10px}

.list3 li:nth-of-type(n+2) .content .title{font-size:14px; line-height:14px; font-size:12px; font-weight:300}
.list3 li:nth-of-type(n+2) .content .title a{font-family:Arial; color:#555}
.list3 li:nth-of-type(n+2) article{padding:5px 10px; border:0}

.list4{margin:10px 0}
.list4 .headline{background:#f2f2f2; padding:5px 10px; border-bottom:1px solid #ccc; color:#555; font-size:18px; font-weight:300}
.list4 li{box-sizing:border-box; padding:10px; float:left; width:25%}
.list4 li article .media{height:80px; overflow:hidden}
.list4 li article .media img{width:100%}
.list4 li article .title{line-height:16px}
.list4 li article .title a{font:300 12px/14px Arial; color:#555}


.detail .titleline{font-size:36px; line-height:1.2em; color:#262626; font-weight:500}
.detail .shortline{color:#888; font-weight:300; font-size:22px; margin:10px 0}
.detail .content *{font:300 18px/26px Arial,Verdana,sans; max-width:100%}
.detail .content strong {font-weight: 600;}
.detail .content em{font-style: italic; font-size: 16px;}

.detail .content a{color:#FF0031}
.detail .content figure{display:block; width:100%; padding:10px; box-sizing:border-box; background:#f9f9f9}
.detail .content figure figcaption{font-weight:700; font-size:16px; color:#FF0031}
.detail .content p{margin:1% 0}
.detail .tags{margin:15px 0}
.detail .tags:after{clear:both; display:table; content:" "}
.detail .tags li,.detail .tags strong{float:left; padding:10px 5px}
.detail .tags li a{color:#FF0031; text-decoration:underline}

.share-box{width:240px; height:110px; overflow:hidden}
.share-box h3{font-weight:300; padding:5px 0}
.share-box:after{clear:both; content:" "; display:table}
.share-box li{float:left; width:65px; box-sizing:border-box; padding-right:5px}

.like-box{width:320px; float:left}

.carousel .carousel-item{float:left; width:50%; box-sizing:border-box; height:200px; overflow:hidden}
.carousel .carousel-item:nth-of-type(n+1){padding-right:5px}
.carousel .carousel-item:nth-of-type(n+2){padding-left:5px}
.carousel .media{height:140px; overflow:hidden}
.carousel .content{padding:5px 0}
.carousel .content .title{line-height:20px}
.carousel .content .title a{font-size:16px; font-weight:300; color:#262626}
.carousel .media{position:relative}
.carousel .media img{min-height:140px; width:100%}
.carousel .media .media-video-icon{display:block; position:absolute; bottom:0; left:0; width:30px!important; height:30px!important; background:rgba(0,0,0,0.2) url(/public/images/icon-video-tiny.png) center no-repeat!important}
.carousel .carousel-item-next, .carousel .carousel-item-prev{display:none}

.footer{background:url(/public/images/bg-headline.png) #f9f9f9 repeat-x; padding:20px; margin-top:20px; }
.footer .content > ol > li{float:left; box-sizing:border-box;margin-right: 27px}
.footer .content > ol > li > a{font-size:12px; font-weight:500; color:#FF0031; text-transform:uppercase}
.footer .content ol li li a{font-size:13px; font-weight:300; color:#888; text-transform:uppercase; line-height:30px}
.footer .copyright{padding:15px 0 5px 0}
.footer .copyright p{font-size:12px; font-family:Arial; color:#aaa; line-height:18px}
.footer .legal ul li{float:left; padding:0 15px 10px 0}
.footer .legal ul li a{color:#aaa; font-size:11px}

.header-wrapper{box-shadow:0 0 2px rgba(0,0,0,0.5)}
.header-container{margin:0 auto; max-width:1100px}

.viewer{width:100%; height:100%; position:relative}
.viewer iframe{width:100%; height:100%; border:0; outline: 0; box-sizing: border-box}
.viewer #btnclose{position:absolute; top:0; right:0; cursor:pointer; z-index:1; background:#ff0031; color:#fff; font-weight:500; font-size:30px; text-transform:uppercase; padding:10px 5px}

.btn-load-more{margin:10px 0; cursor:pointer; padding:5px 10px; background:#ff0031; color:#fff; font-weight:500; font-size:30px; text-transform:uppercase}

.left-side{float:left; width:16%; margin-right:1%; margin-top: 20px}
.left-side-bar li a{color:#FF0031; font-size:12px}
.main-side{float:left; width:70%; margin-right:1%}
.main-side h1 a{font:500 36px/1.2em Arial,sans-serif!important; color: #FF0031!important; background:url(/public/images/bg-headline-title.png) 0 50% no-repeat; padding-left: 20px; font-size:32px}
.joke-item{margin:10px 0; padding:10px 0; border-bottom:#ccc 1px solid}
.joke-item h3 a{display: block; color:#ff0031; font-size:18px}
.joke-item p {font:500 16px/22px Arial!important }
.joke-item .joke-item-tag{font-size:12px}
.joke-item .joke-item-tag a{font-size:12px!important; color:#ff0031!important; padding:2px 5px}
.right-side{float:right; width:16%}
.right-side ul li:nth-child(odd){background:#eee}
.right-side ul li{line-height:16px; margin:5px 0; padding:5px}
.right-side ul li a{font-size:13px!important; color:#333}
.right-side ul li img{max-width:100%}
.paging{margin:20px 10px 20px 0}
.paging li{font-size:20px; display:inline}
.paging a, .paging span{padding:10px 20px; margin-right:5px; color:#555}
.paging a:hover{background:#FF0031; color:#fff!important}
.paging .active{background:#FF0031; color:#fff!important}

@media only screen and (min-device-width:320px) and (max-device-width:480px){
    .container{width:100%}
    .header-ads{top:60px; position:relative}
    .header-container .header-ads{top:0}
    .header{position:fixed; height:53px; top:0; z-index:999; background:#fff; box-shadow:0 0 2px rgba(0,0,0,0.5)}
    .header nav .search-box{top:10px; right:50px}
    .header nav .search-box input{width:80px}

    .header nav .buckets-collapse{display:block; margin-top:5px}
    .header nav .buckets{position:absolute; top:5px; right:10px; width:200px}
    .header nav .buckets ul{display:none; background:#FF0031; top:48px; right:-10px; position:absolute; width:150px}
    .header nav .buckets ul li{float:none; width:100%; box-sizing:border-box; height:auto}
    .header nav .buckets ul li a{color:#fff; padding:0 10px; display:block; border:0; height:auto; line-height:40px}
    .header nav ul li a.active, .header nav ul li a:hover{color:#fff; background:#FF3175}
    .wrapper{margin-top:64px}

    .zone1 .column{float:none; width:100%!important; margin:0; padding:0!important}
    article.huge .description{display:none}

    .small-carousel{height:135px; overflow:hidden; position:relative; padding:10px 0; box-sizing:border-box; background:#f2f2f2}
    .small-carousel .carousel-item{width:130px; margin-left:20px}

    .list1 li{padding:3px 0}

    .zone2 .column{float:none; width:100%!important; margin:10px 0; padding:0!important}
    .zone2 .column article .content{padding:3px 0}

    .zone3 .column{float:none; width:100%!important; margin:10px 0; padding:0!important}
    .zone3 .column li article .media{height:150px}
    .zone3 .column li:nth-of-type(n+2) article .media{height:65px}
    .zone3 .column li .content .title{padding:0!important; line-height:26px; margin:5px 0}

    .zone3 .column li:nth-of-type(n+2) .content .description{display:none}
    .zone3 .column li:nth-of-type(n+2) .content .title a{font-size:16px; line-height:1.2em}

    .zone4 .column{float:none; width:100%!important; margin:10px 0; padding:0!important}

    .carousel{height:130px; overflow:hidden; position:relative; padding:10px 0; box-sizing:border-box; background:#f2f2f2}
    .carousel .carousel-container{position:relative; width:2000px; height:130px}
    .carousel .carousel-item-prev{display:block; position:absolute; top:25px; left:-15px; z-index:1; float:left; cursor:pointer; width:50px; height:50px; background:url(/public/images/btn-prev.png) center no-repeat}
    .carousel .carousel-item-next{display:block; position:absolute; top:25px; right:-15px; z-index:1; float:left; cursor:pointer; width:50px; height:50px; background:url(/public/images/btn-next.png) center no-repeat}
    .carousel .carousel-item{float:left; width:130px!important; margin-left:20px; height:120px; padding:0!important}
    .carousel .carousel-item article .media{width:100%; height:90px; overflow:hidden}
    .carousel .carousel-item article .media img{max-height:90px; min-width:160px}
    .carousel .carousel-item article .title a{color:#262626; font-size:14px; font-weight:300}
    .carousel .content{padding:0}

    .list2 article .media{float:none; width:100%}
    .list2 article .content{float:none; width:100%; padding:10px}
    .list2 article .content .description{display:none}
    .list2 article:nth-of-type(n+2) .media{float:left; width:50%}
    .list2 article:nth-of-type(n+2) .content{float:left; width:50%}
    .list2 article:nth-of-type(n+2) .content .title{font-size:18px; line-height:1.2em}
    .list2 article:nth-of-type(n+2) .content .title a{color:#555}

    .list4 li{width:50%!important}

    .left-side{float:none; width:320px; margin:auto}
    .left-side-bar li{float:left; width:33%; text-align:center}
    .main-side{float:none; width:320px; margin:auto}
    .right-side{float:none; width:320px; margin:auto}
    .joke-item .home-news img{
        width: 100% !important;
    }

    .home-news{
        display: block! important;
    }
    .home-news-title{
        margin: 5px 0 !important;
    }
    .footer{
        margin-left: 0px;
    }
    .footer .content > ol > li{
        float:left; box-sizing:border-box;margin-right: 15px; width: 120px}

}

@media only screen and (min-device-width : 768px) and (max-device-width:800px){
    .container{width:100%}
    .zone1 .column:nth-of-type(2n+1){width:64%}
    .zone1 .column:nth-of-type(2n+2){width:35%}
    .small-carousel .carousel-item{width:137px; margin-left:20px}
    .joke-item img{
        width: 300px !important;
    }
    .home-news{
        display: block ;
    }
    .footer{
        margin-left: 0px;
    }
}

.joke-item img{
    width: 500px;
}

.home-news{
    display: table;
}
.home-news img{
    width: 250px;
    height: 150px;
    float: left;

}
.home-news-title{
    margin-left: 260px;
}
.date-time-news{
    font-size: 16px;
    font-weight: bold;
}
@media only screen and (min-device-width:320px) and (max-device-width:480px){
    .webpage{display:none}
    /*  .titleline.mobile{font-size:20px!important;} */
    .detail .titleline{font-size:20px!important;}
    .detail .shortline{font-size: 14px;}
    .share-box{height: 60px}
    .share-box .twitter-button{
        margin-top: 0px !important;
    }
    .share-box .facebook-button{
        margin-top: 0px !important;
    }
    .detail .content .videoplayer{
        margin-left: -20px;
    }
}

@media only screen and (min-device-width:600px) {
    .mobile{display:none}
}
.data-test-rpm *{font-size:12px!important; line-height:14px!important; font-family:Arial,sans-serif!important}
.data-test-rpm a{font-size:12px; color:#FF0031!important;}
.data-test-rpm p{white-space: pre-line; height:14px; text-overflow: ellipsis; overflow:hidden; font-size: 12px; color:#666}
.share-box .twitter-button{
    margin-top: 20px;
}
.share-box .facebook-button{
    margin-top: 20px;
}

.left-side h3{
    font-size: 14px;
}

.wapper-video-youtube .header-video{
    padding: 0 0 10px;
    line-height: 22px;
    font-size: 18px;
}

.youtube-title{
    color: #e64d4f
}
.youtube-content {
    margin: 10px 0;
}
.youtube-sapo{
    margin-bottom: 10px;
}

.footer-nav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    margin: 12px 0 10px;
    width: 100%
}

.footer-nav ul li {
    border-right: 1px solid #80808c;
    float: left;
    margin-bottom: 8px;
    margin-right: 8px
}

.footer-nav ul li a {
    color: #ff0031;
    display: block;
    margin-right: 10px;
    padding: 3px 0
}

.footer-nav {
    float: left;
    width: 50%;
    padding: 10px;
}
.page-fb{
    width: 46%;
    float: left;
}
@media only screen and (max-width: 765px) {
   .footer-nav{width: 100%}
   .page-fb{width: 100%}
}