﻿/**
 * @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
 */

.video-break{float: left;height: 1px;width: 100%;}
.message{position:absolute;left:-1000px;top:-1000px;display:none;z-index:-1;width:150px;border:1px #51A8FF solid;background:#C4E1FF;padding:6px}
.marginbottom10{margin-bottom:10px}
.marginbottom15{margin-bottom:15px}

/* List topic */
.otherTopic{background:#fff;margin-top:0;border:1px #d6d6d6 solid;padding:1px;position:relative;color:#464646;font:normal 12px/26px Arial}
.otherTopic a{text-decoration:underline}
.otherTopic strong{font-weight:700}
.otherTopic img{width:24px;height:24px;vertical-align:middle;margin-right:2px}
.otherTopic span{color:#f26d00}
.otherTopic .otherTopicCont{padding:8px;background:#f1f1f1}

/* List video */
.otherClips{position:relative;width:100%}
.otherClips .otherClipsContent{position:relative;width:33%;float:left;margin-bottom:15px}
.otherClips .ctn1{background:#fff;border:1px #d6d6d6 solid;padding:1px;position:relative;width:124px;margin:0 auto}
.otherClips .ctn2{background:#f1f1f1;padding:2px;position:relative;min-height:130px}
.otherClips .vtitle{text-align:center;font:700 11px/1.1 Tahoma;padding:6px 0 2px}
.otherClips .vtitle a{text-decoration:none}
.otherClips .viewHits{text-align:center;font:400 11px Tahoma;color:#666}
.otherClips .viewHits span{font-weight:700}
.otherClips .play{position:absolute;left:0;top:24px;width:100%;height:32px;background:transparent url(../images/video-clip/play.png) no-repeat center center;text-align:center}
.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;font:400 12px/1.5 Arial}
.detailContent{position:relative}
.detailContent .videoplayer{background:#3f3f3f;position:relative}
.detailContent .videoplayer .cont{background:#000 url(../images/video-clip/wait.gif) no-repeat center center;margin:0 auto;position:relative}
.detailContent .videoTitle{font:700 20px Arial;margin-bottom:10px}

/* Detail video */
.videoInfo{background:#fff;position:relative;border:1px #d6d6d6 solid;padding:1px}
.videoInfo .cont{background:#f1f1f1;position:relative;padding:2px}
.videoInfo .cont .cont2{height:56px}
.videoInfo .cont .fCont{position:relative}
.videoInfo .cont .fl{position:absolute;top:4px;left:4px}
.videoInfo .cont .fr{position:absolute;top:4px;right:4px;text-align:right}
.videoInfo .shareFeelings{font:normal 11px Tahoma;margin-bottom:8px;height:12px}
.videoInfo a.likeButton{display:inline-block;background:#E1E1E1;font:700 12px/30px Arial;border:1px #d6d6d6 solid;padding:0 10px;text-decoration:none;color:#5B5B5B;margin-right:2px}
.videoInfo a.likeButton img.like{background:transparent url(../images/video-clip/like.png) no-repeat left top;width:15px;height:14px;margin-right:4px}
.videoInfo a.likeButton img.unlike{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{background:#f3f3f3;text-decoration:none}
.videoInfo div.viewcount{position:relative;font:normal 11px Tahoma;color:#5B5B5B;text-align:right;margin-bottom:8px}
.videoInfo div.viewcount span{font-weight:700}
.videoInfo div.image{width:220px;position:relative;font:normal 3px/3px Tahoma;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}
.videoInfo div.likeDetail{width:220px;font:normal 11px/11px Tahoma;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}
.videoInfo a.bodybutton{display:inline-block;background:#E1E1E1;font:700 12px Arial;border:1px #d6d6d6 solid;padding:3px;text-decoration:none;color:#5B5B5B}
.videoInfo .hide{display:none}

/* Comment */
.commentList{position:relative}
.commentList .cont{position:relative;padding:4px 0}
.commentList .commTitle{font:700 11px/2 Tahoma}
.commentList .commentForm{position:relative;overflow:hidden;background:#E1E1E1;text-align:center;padding:6px}
.commentList .commentForm .commTextarea{float:left;width:100%;position:relative}
.commentList .commentForm .commSubmit{float:right;width:50px;height:30px;position:absolute;right:6px;bottom:6px}
.commentList .commentForm button{outline:none;-moz-appearance:none;-webkit-appearance:none;border:1px #ccc solid;width:100%;height:30px;cursor:pointer;background:#E1E1E1;color:#333;font:700 10px Arial}
.commentList .commentForm textarea{float:left;background:#f3f3f3;outline:none;-moz-appearance:none;-webkit-appearance:none;border:1px #ccc solid;width:99%;height:20px;padding:4px;margin:0;font:normal 12px Arial}
.commentList .contentLength{float:left;position:absolute;left:10px;bottom:10px;font:normal 11px Arial;color:#666;display:none}
.commentList .contentLength .l50{color:#f26d00}
.commentList .contentLength .num{font-weight:700}
.commentList .listComm{position:relative;min-height:55px;border-top:1px #d6d6d6 solid}
.commentList .userPhoto{position:absolute;left:0;top:0;width:60px;min-height:55px}
.commentList .userComm{position:relative;padding-left:60px}
.commentList .userComm .top{background:#f1f1f1;position:relative;font:normal 12px/2 Arial;border-bottom:1px #e6e6e6 solid;height:24px}
.commentList .userName{float:left}
.commentList .posttime{float:right;color:#666}
.commentList .commContent{position:relative;padding-top:5px;font:normal 13px/1.4 Arial}
.commentList .next{position:relative;text-align:center}
.commentList .brokenIcon{background:transparent url(../images/video-clip/icons.png) no-repeat left -28px;width:14px;height:14px;vertical-align:middle;margin-left:5px}
.commentList .delcommIcon{background:transparent url(../images/video-clip/icons.png) no-repeat left -14px;width:14px;height:14px;vertical-align:middle}

/* Main */
.videoMain .col1{width:170px;float:left}
.videoMain .col2{padding-left:180px;}
.videoMain .col1 .topicList{display:block;padding:5px 0;border-bottom:1px #dadada dotted;text-indent:10px}
.videoMain .col1 .topicList.current{background:url('../images/video-clip/current.png') no-repeat right center;color:#fff}
.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;padding-bottom:10px;margin-bottom:10px}
.video-clip-block img{float:left;margin-right:10px}
.video-clip-block a{font-weight:bold}

/* Block zing style */
.zing-clip-big{width:300px;height:180px;position:relative}
.zing-clip-big a.img{width:300px;height:180px;overflow:hidden;display:block}
.zing-clip-big a.img img{width:300px;min-height:18px;}
.zing-clip-big p.icon{position:absolute;top:130px;left:10px;display:block;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;}
.zing-clip-big-h1{font-size:12px;line-height:18px;padding:5px;margin:0 0 10px 0;background:#0098D3}
.zing-clip-big-h1 a{display:block;color:#fff;font-weight:bold}
.zing-clip-big-h1 a:hover{text-decoration:underline}
.zing-clip-small{width:145px;float:left;margin-right:10px;margin-bottom:10px;position:relative}
.zing-clip-small.last{margin-right:0!important}
.zing-clip-small .img{display:block;width:145px;height:90px;overflow:hidden}
.zing-clip-small .img img{width:145px;min-height:90px}
.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:34px;overflow:hidden}
.zing-clip-small h1 a{display:block;color:#fff;font-weight:bold}
.zing-clip-small h1 a:hover{text-decoration:underline}

/* 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: -10px;}
.vd-blbox .vcontent .lvd .it{float: left;width: 25%;}
.vd-blbox .vcontent .lvd .it .ct{margin-left: 10px;}
.vd-blbox .vcontent .lvd .it .ct h3{font: inherit;width: 115px;}
.vd-blbox .vcontent .lvd .img{width: 115px;height: 74px;overflow: hidden;margin-bottom: 7px;}
.vd-blbox .vcontent .lvd .img a{position: absolute;width: 115px;height: 74px;top: 0;left: 0;background: url(../images/video-clip/play-small.png) no-repeat 10px 10px;}
.vd-blbox .vcontent .lvd .img img{min-height: 74px;}