﻿/**
 * @Project VIDEO CLIPS AJAX 3.x
 * @Author PHAN TAN DUNG (phantandung92@gmail.com)
 * @Copyright (C) 2013 PHAN TAN DUNG. All rights reserved
 * @Createdate Dec 08, 2013, 09:57:59 PM
 */

.clipBreakLine{}
#mesHide{position:absolute;left:50%;top:50%;display:none;z-index:-1;width:150px;border:1px #51A8FF solid;background:#C4E1FF;padding:6px;margin-left: -75px;margin-top: -30px;}
.marginbottom10{margin-bottom:10px}
.marginbottom15{margin-bottom:15px}

/* List video */
.otherClips{margin-left: -5px;margin-right: -5px;}
.otherClips .otherClipsContent{width:25%;float:left;margin-bottom:15px;padding-left: 5px;padding-right: 5px;}
.otherClips.cThree .otherClipsContent{}
.otherClips.cTwo .otherClipsContent{width:50%;}
.otherClips.cOne .otherClipsContent{width:100%;}
.otherClips .ctn1{}
.otherClips .ctn2{}
.otherClips .ctn3{}
.otherClips .ctn3 img{width: 100%;min-height: 150px;}
.otherClips .vImg{position: relative;display: block;}
.otherClips .play{position:absolute;left:50%;top:50%;height:32px;width: 32px;background:transparent url(../images/video-clip/icon07.png) no-repeat center center;text-align:center;background-size:32px;margin-left: -16px;margin-top: -16px;}
.otherClips .play:hover{position:absolute;left:50%;top:50%;height:32px;width: 32px;background:transparent url(../images/video-clip/icon08.png) no-repeat center center;text-align:center;background-size:32px;margin-left: -16px;margin-top: -16px;}
.otherClips .vtitle{font-weight: 700;line-height: 16px;margin-top: 5px;max-height: 32px;overflow: hidden;}
.otherClips .vtitle a{text-decoration:none;font-family:'roboto';color:#3b3b3b;}
.otherClips .vtitle a:hover{color:#c00}
.otherClips .viewHits{color:#666;font-family:'roboto'}
.otherClips .viewHits span{font-weight:700}
.otherClips .generate_page{text-align:center;border:1px #d6d6d6 solid;padding:1px;background:#fff;margin-top:15px}
.otherClips .generate_page .ctn3{background:#f1f1f1;padding:4px;}
.detailContent{position:relative}
.detailContent .videoplayer{background:#3f3f3f;position:relative}
.detailContent .videoplayer .cont{background:#000 url(../images/video-clip/wait.gif) no-repeat center center;position:absolute;left: 0;top: 0;width: 100%;height: 100%;}
.detailContent .videoTitle{margin:10px 0 10px 0;font-family: 'roboto';color: #3b3b3b;}

/* Detail video */
.videoInfo{background:#fff;position:relative;border:1px #d6d6d6 solid;padding:1px}
.videoInfo .cont{position:relative;padding:2px}
.videoInfo .cont .cont2{height:30px;font-size: 0.75em;}
.videoInfo .cont .fCont{position:relative}
.videoInfo .cont .fl{position:absolute;left:4px}
.videoInfo .cont .fr{position:absolute;top:8px;left:35px;}
.videoInfo .shareFeelings{margin-bottom:8px;height:12px}
.videoInfo a.likeButton{display:inline-block;padding:5px 10px;text-decoration:none;color:#5B5B5B;margin-right:2px;}
.videoInfo a.likeButton img.likehit{background:transparent url(../images/video-clip/like.png) no-repeat left top;width:15px;height:14px;margin-right:4px}
.videoInfo a.likeButton img.unlikehit{background:transparent url(../images/video-clip/like.png) no-repeat left -14px;width:15px;height:14px;margin-right:4px;vertical-align:middle}
.videoInfo a.likeButton img.broken{background:transparent url(../images/video-clip/like.png) no-repeat left -28px;width:15px;height:14px;margin-right:4px;vertical-align:middle}
.videoInfo a.likeButton:hover{text-decoration:none;}
.videoInfo div.viewcount{position:relative;color:#5B5B5B;text-align:right;margin-bottom:8px}
.videoInfo div.viewcount span{font-weight:700}
.videoInfo div.image{width:220px;position:relative;text-align:left;margin-bottom:2px;height:3px;line-height:3px}
.videoInfo div.image0{background:#ccc}
.videoInfo div.imageunlike{background:#4491b2}
.videoInfo div.image img.like{height:3px;background:#ed3056;position: relative;top:-1px}
.videoInfo div.likeDetail{width:220px;color:#5B5B5B;position:relative}
.videoInfo .likeLeft{float:left}
.videoInfo .likeRight{float:right}
.videoInfo .strong{font-weight:700}
.videoInfo .hometext{position:relative;padding:6px}
.videoInfo .bodytext{position:relative;margin-top:10px}
.videoInfo div.bodybutton{position:relative;margin-top:10px;text-align:center;font-size: 0.75em;}
.videoInfo a.bodybutton{display:inline-block;border:1px #d6d6d6 solid;padding:3px;text-decoration:none;color:#5B5B5B}
.videoInfo .hide{display:none}
#videoCont_wrapper{margin: 0 auto;}

@media (max-width: 569px){
#likeDetailWrap{display:none;}
.videoInfo div.viewcount{padding-top: 30px;}
}
@media (max-width: 400px){
#likeDetailWrap{display:none;}
.videoInfo div.viewcount{padding-top: 0;}
}
@media (max-width: 350px){
.videoInfo a.likeButton span{display:none}
}

/* Main */
.videoMain{position: relative;}
.videoMain .toggleNav{display: none;background: #E1E1E1;border: 1px #d6d6d6 solid;padding: 5px 10px;text-decoration: none;color: #5B5B5B;margin-bottom: 10px;}
.videoMain .col1{width:170px;float:left;border-right: 1px #999 solid;border-top: 3px #f00 solid;}
.videoMain .col2{padding-left:180px;}
.videoMain.mobile .toggleNav{display: block;}
.videoMain.mobile .col1{width:100%;display: none;position: absolute;z-index: 10;top: 30px;left: 0;background: #fff;box-shadow: 1px 1px 2px rgba(0,0,0, 0.175);}
.videoMain.mobile .col1.open{display: block;}
.videoMain.mobile .col2{padding-left:0;}
.videoMain .col1 .topicList{display:block;padding:5px 0;text-indent:10px;color:#3b3b3b; font-weight: bold; font-family:'roboto';padding: 5px 0;font-size: 16px}
.videoMain .col1 .topicList:hover{background: #999;color: #fff}
.videoMain .col1 .topicList.current{background:#C30;color:#fff}
.videoMain.mobile .col1 .topicList.current{background-image:none;color:inherit;font-weight: 700;}
.videoMain .col1 .topicList.sub{padding-left:10px}
.videoMain .col1 .topicList.sub.current{background-image:none;color:inherit;font-weight:bold}
.videoMain .col1 .col1-sub{display:none}

/* Block, list video */
.video-clip-block{border-bottom:1px #dadada dashed;margin-bottom:10px;width:24%;float:left; margin-left:1%;min-height:185px;}
.video-clip-block img{width:100%;max-height:110px;}
.video-clip-block a{color:#3b3b3b;font-family:'roboto';}
.video-clip-block a:hover{color:#c00;}

/* Block zing style */
.zing-clip-big{position:relative}
.zing-clip-big a.img{width: 100%;display: block;}
.zing-clip-big a.img img{width:100%;}
.zing-clip-big a p.icon {margin-bottom: 0;;position:absolute;top:40%;left:40%;display:block;background: url(../images/video-clip/icon07.png) no-repeat !important;width: 45px;height: 45px;}
.zing-clip-big a:hover p.icon {margin-bottom: 0;;position:absolute;top:40%;left:40%;display:block;background: url(../images/video-clip/icon08.png) no-repeat !important;width: 45px;height: 45px;}
.zing-clip-big-h1{font-size:16px;line-height:18px;padding:15px 0 15px 5px;background:#f3f3f3; font-family: 'roboto'}
.zing-clip-big-h1 a{display:block;font-weight:bold; color: #000}
.zing-clip-big-h1 a:hover{color: #c00}
.zing-clip-small{float: left;position: relative;background: #e4e4e4;border-top: 1px #ccc solid;margin: 0 0 2px 5px;width:96%}
.zing-clip-small .img{display:block;width:23%;overflow:hidden;float: left;margin-right:5px;}
.zing-clip-small .img img{width:100%;}
.zing-clip-small p.icon{display: block;position: absolute;top: 28px;left: 50%;background: rgba(0, 0, 0, 0.4) url(../images/video-clip/Zicons.png) 10px -1409px !important;border: 1px solid rgba(247, 247, 247, 0.41);border-radius: 3px;width: 35px;height: 35px;margin: 0 0 0 -18px;}
.zing-clip-small h1{font-size:12px;line-height:18px;padding:5px;margin:0;background:#0098D3;height:43px;overflow:hidden}
.zing-clip-small a{display:block;color:#3b3b3b;font-size:14px;font-family: 'roboto'}
.zing-clip-small a:hover{color: #c00}
.zing-clip-small:hover{background:#f3f3f3}

/* Block video box */
.vd-blbox{margin-bottom: 10px;border: 1px #dadada solid;border-radius: 5px;}
.vd-blbox .vheader{border-bottom: 1px #dadada solid;background: rgb(238,238,238); background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );}
.vd-blbox .vheader .pri{display: inline-block;padding: 10px;border-radius: 5px 5px 0 0;border: 1px #dadada solid;background: #fff;margin: 5px 10px -1px 5px;border-bottom-color: #fff;}
.vd-blbox .vheader .oth{margin-right: 10px;}
.vd-blbox .vcontent{padding: 10px;}
.vd-blbox .vcontent .img{position: relative;}
.vd-blbox .vcontent .fvd{margin-bottom: 10px;padding-bottom: 10px;border-bottom: 1px #dadada solid;}
.vd-blbox .vcontent .fvd .img{width: 230px;margin-right: 10px;float: left;height: 150px;overflow: hidden;}
.vd-blbox .vcontent .fvd .img a{position: absolute;width: 230px;height: 150px;top: 0;left: 0;background: url(../images/video-clip/play.png) no-repeat 10px 10px;}
.vd-blbox .vcontent .fvd .img img{min-height: 150px;}
.vd-blbox .vcontent .fvd h3{margin: 0;margin-bottom: 5px;}
.vd-blbox .vcontent .lvd{margin-left: -5px;margin-right: -5px;}
.vd-blbox .vcontent .lvd .it{float: left;width: 20%;padding-left: 5px;padding-right: 5px;}
.vd-blbox .vcontent .lvd .it .ct h3{font: inherit;width: 100%;}
.vd-blbox .vcontent .lvd .img{width: 100%;height: 90px;overflow: hidden;margin-bottom: 7px;}
.vd-blbox .vcontent .lvd .img a{position: absolute;width: 100%;height: 90px;top: 0;left: 0;background: url(../images/video-clip/play-small.png) no-repeat 10px 10px;}
.vd-blbox .vcontent .lvd .img img{min-height: 90px;width: 100%;}