@import url(jquery.jscrollpane.css); 

/*-------------------------------------------

    Title :  2015
    Usage :  Homepage
    Edited:  2015-06-19

---------------------------------------------

    1. left column
       1.1. info
       1.2. image box
       1.3. music
       1.4. sponsor
    2. center column
       2.1. posts
    3. right column
       3.1. popular
       3.2. trending
       3.3. related
    4. banner
    5. responsive layout (736px)

---------------------------------------------*/



/*  1. left column
---------------------------------------------*/

#main .left-col {
	float: left;
	width: 266px;
	}

.grid #main .left-col {
	float: none;
	width: auto;
	}



/*  1.1. info
---------------------------------------------*/

.timeline #info {
	padding: 21px 28px 15px;
	width: auto;
	height: auto;
	color: #fff;
	background: #ff7900;
	border-radius: 5px;
	}

.grid #info {
	float: left;
	margin-right: 19px;
	}

.timeline #info:before {
	display: none;
	}

.timeline #info p {
	margin-top: 0;
	font-size: 14px;
	line-height: 1.6;
	}

.timeline #info .meta {
	margin-top: 16px;
	padding-top: 0;
	text-align: justify;
	border-top: none;
	}

.timeline #info .meta li {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	}

.timeline #info .meta li.dvdr {
	position: relative;
	top: 3px;
	display: inline-block;
	vertical-align: middle;
	width: 1px;
	height: 26px;
	background: #ffc590;
	}

.timeline #info .meta li strong {
	display: block;
	font-size: 21.48px;
	font-family: Arial, sans-serif;
	}

.timeline #info .meta.extra li strong {
	display: inline-block;
}

.timeline #info .meta li small {
	color: #ffd7b3;
	font-weight: 400;
	font-size: 12px;
	}

.timeline #info .meta:after {
	content: "";
	display: inline-block;
	width: 100%;
	}

.timeline #info .btn {
	margin-top: 8px;
	text-align: justify;
	}

.timeline #info .btn li {
	float: right;
	}

.timeline #info .btn li.follow {
	width: 115px;
	}

.timeline #info .btn li.friend,
.timeline #info .btn li.chat {
	margin-right: 10px;
	width: 37px;
	overflow: hidden;
	text-indent: -5000px;
	}

.timeline #info .btn li a {
	position: relative;
	display: block;
	padding-left: 26px;
	padding-top: -moz-calc(2px);
	height: 36px;
	color: #319f9c;
	font-weight: 700;
	font-size: 20px;
	line-height: 32px;
	text-align: center;
	text-decoration: none;
	background: #fff;
	border: 2px solid #ffd7b3;
	border-radius: 7px;
	behavior: url(js/PIE.htc);
	letter-spacing: 2px;
	}

.timeline #info .btn li a:hover {
	border-color: #d94136;
	}

.timeline #info .btn li.friend a,
.timeline #info .btn li.chat   a {
	padding-left: 0;
	}

.timeline #info .btn li.follow a:before {
	content: "+";
	position: absolute;
	top: -3px;
	top: -moz-calc(-4px);
	left: 9px;
	color: #34ccbf;
	font: 700 35px/1 Georgia, sans-serif;
	}

.timeline #info .btn li.friend a:before {
	content: "";
	position: absolute;
	top: 6px;
	left: 7px;
	width: 23px;
	height: 20px;
	background: url(/video2015/static/images/sprite.png) no-repeat -81px 0;
	}

.timeline #info .btn li.friend.pending a:before {
	background-position: -114px 0;
	}

.timeline #info .btn li.friend.approved a:before {
	background-position: -147px 0;
	}

.timeline #info .btn li.chat a:before {
	content: "\f086";
	position: absolute;
	top: 5px;
	left: 5px;
	color: #34ccbf;
	font: 22px/1 "Font Awesome";
	text-indent: 0;
	}

.timeline #info:after {
	content: "";
	clear: both;
	display: block;
	}



/*  1.2. image box
---------------------------------------------*/

.img-box {
	margin-top: 11px;
	overflow: hidden;
	background: #cccac9;
	border-radius: 5px;
	}

.img-box .header {
	position: relative;
	padding: 0 12px;
	height: 35px;
	background: #fff;
	}

.img-box .header h3 {
	color: #34ccbf;
	font-weight: 500;
	font-size: 14px;
	line-height: 37px;
	letter-spacing: 2px;
	}

.img-box .header h3 small {
	margin-left: 5px;
	color: #606060;
	font-family: Arial, sans-serif;
	letter-spacing: 0;
	}

.img-box .header > a {
	position: absolute;
	top: 5px;
	right: 20px;
	text-decoration: none;
	}

.img-box .header > a:before {
	content: "\f105";
	color: #999;
	font: 24px/1 "Font Awesome", sans-serif;
	}

.img-box ul {
	padding: 3px 0 8px 8px;
	}

.img-box ul li {
	float: left;
	margin: 5px 5px 0 0;
	width: 80px;
	height: 80px;
	}

.img-box ul li.featured {
	float: none;
	width: 250px;
	height: 166px;
	}

.img-box ul li a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid #85827f;
	border-radius: 1px;
	}


/* origial design of play icon */
/* .img-box ul li.featured a:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -46px 0 0 -46px;
	width: 93px;
	height: 93px;
	background: url(/video2015/static/images/sprite.png) no-repeat 0 -32px;
	}

.img-box ul li.featured a:hover:after {
	background-position: -103px -32px;
	} */

.img-box ul li a img {
	width: 100%;
	height: 100%;
	}

.img-box ul:after {
	content: "";
	clear: both;
	display: block;
	}



/*  1.3. music
---------------------------------------------*/

#music {
	overflow: visible;
	background: #1c1c1c;
	border-radius: 8px 8px 5px 5px;
	}

#music .header {
	border-radius: 5px 5px 0 0;
	}

#music ol {
	counter-reset: number;
	overflow: hidden;
	border-radius: 0 0 5px 5px;
	}

#music ol li {
	color: #909190;
	font-weight: 400;
	font-size: 13.32px;
	}

#music ol li a {
	position: relative;
	display: block;
	padding: 0 10px;
	height: 30px;
	color: #909190;
	font-weight: 400;
	font-size: 13.32px;
	line-height: 30px;
	text-decoration: none;
	}

#music ol li a:hover {
	background: #3c575a;
	}

#music ol li a:before {
	content: counter(number, decimal) ".";
	counter-increment: number;
	margin-right: 4px;
	}

#music ol li a span {
	display: inline-block;
	vertical-align: top;
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

#music ol li a small {
	position: absolute;
	top: 0;
	right: 10px;
	}



/*  2. center column
---------------------------------------------*/

.center-col {
	float: left;
	margin-left: 11px;
	width: 472px;
	background: url("/video2015/static/images/ajax-loader.gif") no-repeat 0 -5000px;
	}

.apng .center-col {
	background-image: url("/video2015/static/images/ajax-loader.png");
	}

.grid .center-col {
	margin-left: 0;
	padding-top: 3px;
	width: 760px;
	}

.center-col:after {
	content: "";
	clear: both;
	display: block;
	}

#pagenav {
	display: block;
	clear: both;
	width: 0;
	height: 0;
	}

#infscr-loading {
	position: fixed;
	bottom: 7px;
	left: 0;
	z-index: 200;
	width: 100% !important;
	height: 32px !important;
	font-weight: 700;
	font-size: 16px;
	line-height: 33px !important;
	text-align: center;
	text-indent: 50px;
	text-shadow: 0 0 5px #fff;
	}

.grid #infscr-loading {
	min-width: 998px;
	text-indent: -237px;
	}



/*  2.1. posts
---------------------------------------------*/

.article {
	position: relative;
	margin-top: 11px;
	padding-bottom: 23px;
	background: #fff;
	border-radius: 5px;
	}

.grid .article {
	float: left;
	margin-top: 0;
	margin-right: 19px;
	margin-bottom: 19px;
	padding: 241px 3px 3px;
	width: 234px;
	height: 368px;
	}

.article:first-child {
	margin-top: 0;
	}

.article .header {
	position: relative;
	padding: 17px 17px 0;
	min-height: 80px;
	}

.grid .article .header {
	position: static;
	padding: 0;
	min-height: 0;
	}

.ie8 .article .header {
	min-height: 63px;
	}

.ie8 .grid .article .header {
	min-height: 0;
	}

.article .header h3 {
	position: relative;
	display: inline-block;
	padding-left: 71px;
	}

.grid .article .header h3 {
	position: absolute;
	top: -4px;
	left: 50%;
	z-index: 1;
	margin-left: -18px;
	padding: 0;
	width: 35px;
	height: 35px;
	background: #319f9b;
	border-radius: 12px;
	behavior: url(js/PIE.htc);
	}

.grid .article .header h3:before {
	display: block;
	cursor: default;
	color: #fff;
	font: 14px/35px "Font Awesome";
	text-align: center;
	}

.moz .grid .article .header h3:before {
	line-height: 33px;
	}

.grid .article.video .header h3:before {
	content: "\f008";
	}

.grid .article.music .header h3:before {
	content: "\f025";
	-moz-transform: rotate(0.1deg);
	}

.grid .article.read .header h3:before {
	content: "\f06e";
	}

.grid .article.pic .header h3:before {
	content: "\f030";
	}

.grid .article .header h3:after {
	display: none;
	}

.grid .article .header h3 * {
	display: none;
	}

.article .header h3 a {
	color: #319f9c;
	text-decoration: none;
	}

.article .header h3 a img {
	position: absolute;
	object-fit: cover;
	top: 0;
	left: 0;
	width: 60px;
	height: 60px;
	border-radius: 23px;
	behavior: url(js/PIE.htc);
	}

.article .header h3 a span {
	display: inline-block;
	margin-top: 5px;
	font-weight: 300;
	font-size: 18px;
	}

.article .header h3:after {
	content: "";
	display: block;
	margin-top: 6px;
	min-width: 140px;
	height: 1px;
	background: #eee;
	}

.article .header .time {
	display: block;
	margin: 6px 0 0 74px;
	color: #919191;
	font-size: 12px;
	}

.grid .article .header .time {
	position: absolute;
	bottom: 10px;
	left: 10px;
	margin: 0;
	padding-top: 8px;
	width: 214px;
	border-top: 1px solid #eee;
	}

.article .header .time:before {
	content: "\f017";
	position: relative;
	top: -moz-calc(1px);
	display: -moz-inline-box;
	margin-right: 4px;
	color: #b2b2b2;
	font: 13.84px/1.2 "Font Awesome";
	-moz-transform: rotate(0.1deg);
	}

.article .header .menu-ico {
	position: absolute;
	top: 18px;
	right: 19px;
	visibility: hidden;
	width: 9px;
	height: 27px;
	cursor: pointer;
	background: #e3e3e3 url(/video2015/static/images/sprite.png) no-repeat -543px 0;
	outline: 1px solid #fff;
	}

.grid .article .header .menu-ico {
	display: none;
	}

.sprite-loaded .article .header .menu-ico {
	visibility: visible;
	}

.article .header .menu {
	position: absolute;
	top: 53px;
	right: 15px;
	z-index: 1;
	visibility: hidden;
	opacity: 0;
	background: #fff;
	border: 1px solid #eaeaea;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.19);
	-webkit-transition: opacity 150ms, visibility 150ms;
	        transition: opacity 150ms, visibility 150ms;
	}

.grid .article .header .menu {
	display: none;
	}

.touch .article .header .menu {
	-webkit-transition: none;
	        transition: none;
	}

.article .header .menu-ico.triggered + .menu {
	opacity: 1;
	visibility: visible;
	}

.article .header .menu li a {
	display: block;
	padding: 5px 8px;
	color: #333;
	font-size: 13.11px;
	text-decoration: none;
	white-space: nowrap;
	}

.article .header .menu li a:hover {
	color: #fff;
	background: #34ccbf;
	}

.article h2 {
	margin: 11px 17px 0;
	}

.grid .article h2 {
	display: none;
	}

.article h2 .sec {
	position: relative;
	top: -moz-calc(-1px);
	display: inline-block;
	vertical-align: middle;
	margin-right: 8px;
	padding: 1px 7px 2px;
	padding-top: -moz-calc(3px);
	padding-bottom: -moz-calc(0px);
	color: #34ccbf;
	font-weight: 300;
	font-size: 12px;
	text-decoration: none;
	border: 1px solid #a5a5a5;
	border-radius: 2px;
	}

.grid .article h2 .sec {
	position: absolute;
	top: auto;
	bottom: 45px;
	left: 10px;
	}

.article h2 .title {
	display: inline-block;
	vertical-align: middle;
	max-width: 380px;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #606060;
	font-weight: 400;
	font-size: 16px;
	text-decoration: none;
	white-space: nowrap;
	}

.grid .article h2 .title {
	display: inline;
	max-width: none;
	color: #606060;
	font-weight: 400;
	font-size: 14.01px;
	white-space: normal;
	}

.article > p {
	margin: 9px 17px 0;
	color: #000;
	font-size: 12px;
	line-height: 1.45;
	}

.grid .article > p {
	margin-top: 2px;
	margin-right: auto;
	margin-left: auto;
	width: 214px;
	height: 70px;
	overflow: hidden;
	}

.article .fig {
	margin-top: 11px;
	}

.grid .article .fig {
	position: absolute;
	top: 3px;
	left: 3px;
	margin-top: 0;
	width: 228px;
	}

.article .fig a {
	position: relative;
	display: block;
	}

.grid .article .fig a img {
	height: 228px;
	border-radius: 5px 5px 0 0;
	}

.article .fig.video a.videolink:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -46px 0 0 -46px;
	width: 93px;
	height: 93px;
	background: url(/video2015/static/images/sprite.png) no-repeat 0 -32px;
	}

.article .fig.video a.videolink:hover:after {
	background-position: -103px -32px;
	}

.article.music .content {
	position: relative;
	margin-top: 17px;
	padding-left: 151px;
	height: 137px;
	overflow: hidden;
	border: solid #c4c4c4;
	border-width: 1px 0;
	}

.article.music .content img {
	position: absolute;
	top: 0;
	left: 0;
	width: 142px;
	height: 135px;
	}

.article.music .content h4 {
	padding-top: 14px;
	color: #606060;
	font-weight: 400;
	font-size: 16px;
	}

.article.music .content p {
	margin-top: 9px;
	font-size: 12px;
	line-height: 1.35;
	}

.article.music .content ul {
	margin-top: 1px;
	font-size: 12px;
	line-height: 1.35;
	}

.article.music .content ul li {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

.grid .article.music .content {
	position: static;
	margin-top: 0;
	padding-left: 0;
	height: 70px;
	border: none;
	}

.grid .article.music .content img {
	top: 3px;
	left: 3px;
	width: 228px;
	height: 228px;
	border-radius: 5px 5px 0 0;
	}

.grid .article.music .content h4 {
	display: none;
	}

.grid .article.music .content p {
	margin-top: 0;
	line-height: 1.45;
	}

.grid .article.music .content ul {
	margin-top: 0;
	line-height: 1.45;
	}

.article > .meta {
	position: relative;
	padding: 14px 17px 11px;
	color: #b2b2b2;
	font-weight: 400;
	font-size: 12px;
	border-bottom: 2px solid #919191;
	}

.grid .article > .meta {
	position: absolute;
	bottom: 9px;
	right: 5px;
	margin: 0;
	padding: 0;
	border: none;
	}

.article > .meta span {
	margin-right: 6px;
	}

.article > .meta span.like,
.article > .meta span.retweet,
.article > .meta span.share,
.article > .meta span.more {
	cursor: pointer;
	}

.article > .meta span.more {
	margin-left: 13px;
	}

.article > .meta span:before {
	display: -moz-inline-box;
	vertical-align: middle;
	margin-right: 5px;
	font: 18.53px/1.2 "Font Awesome";
	-moz-transform: rotate(0.1deg);
	}

.article > .meta span:hover:before {
	color: #34ccbf;
	}

.article > .meta .like:before {
	content: "\f004";
	}

.article > .meta .retweet:before {
	content: "\f079";
	}

.article > .meta .more:before {
	content: "\f141";
	}

.article > .meta .share:before {
	content: "\f1e0";
	}

.article > .meta .watched {
	position: absolute;
	top: 16px;
	right: 17px;
	margin-right: 0;
	}

.article > .meta .watched:before {
	content: "";
	position: relative;
	top: -1px;
	top: -moz-calc(-2px);
	display: inline-block;
	width: 12px;
	height: 15px;
	background: #919191 url(/video2015/static/images/sprite.png) no-repeat -180px 0;
	outline: 1px solid #fff;
	}

.article > .meta .cmnt {
	display: none;
	}

.grid .article > .meta span {
	margin-right: 0;
	margin-left: 4px;
	font-size: 0;
	}

.grid .article > .meta span:before {
	vertical-align: middle;
	font-size: 14px;
	}

.grid .article > .meta .watched {
	display: none;
	}

.grid .article > .meta .cmnt {
	display: inline;
	margin-right: 0;
	}

.grid .article > .meta .cmnt:before {
	content: "\f086";
	font: 14px/1.2 "Font Awesome";
	}

.grid .article > .meta span.more {
	display: none;
	}

.article > .meta .menu {
	position: absolute;
	top: 40px;
	left: 185px;
	z-index: 1;
	visibility: hidden;
	opacity: 0;
	width: 110px;
	background: #fff;
	border: 1px solid #eaeaea;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.19);
	-webkit-transition: opacity 150ms, visibility 150ms;
	        transition: opacity 150ms, visibility 150ms;
	}

.touch .article > .meta .menu {
	-webkit-transition: none;
	        transition: none;
	}

.article > .meta .menu-ico.triggered + .menu {
	opacity: 1;
	visibility: visible;
	}

.article > .meta .menu li.dvdr {
	margin: 0 7px;
	border-top: 1px solid #eff0f2;
	}

.article > .meta .menu li a {
	position: relative;
	display: block;
	padding: 4px 8px 6px 35px;
	padding-top: -moz-calc(5px);
	padding-bottom: -moz-calc(5px);
	color: #333;
	font-weight: 100;
	font-size: 12px;
	text-decoration: none;
	white-space: nowrap;
	}

.article > .meta .menu li a:hover {
	color: #fff;
	background: #34ccbf;
	}

.article > .meta .menu li a:before {
	position: absolute;
	margin-top: -moz-calc(-2px);
	color: #b2b2b2;
	font: 12px/1.2 "Font Awesome";
	}

.article > .meta .menu li a:hover:before {
	color: #fff;
	}

.article > .meta .menu li.add a:before {
	content: "\f02e";
	top: 5px;
	left: 18px;
	}

.article > .meta .menu li.download a:before {
	content: "\f0ed";
	top: 6px;
	left: 16px;
	}

.article > .meta .menu li.embed a:before {
	content: "\f121";
	top: 5px;
	left: 16px;
	}

.article > .meta .menu li.report a:before {
	content: "\f12a";
	top: 5px;
	top: -moz-cacl(6px);
	left: 20px;
	}

.article .cmnt {
	margin: 5px 0 0 17px;
	}

.article .cmnt > .toggle {
	display: inline-block;
	margin-top: 8px;
	cursor: pointer;
	color: #319f9c;
	font-size: 12px;
	}

.article .cmnt > .toggle:after {
	content: "\f107";
	float: right;
	margin: 1px 0 0 6px;
	margin-top: -moz-calc(0px);
	color: #606060;
	font: 12px/1.2 "Font Awesome";
	}

.article .cmnt > .toggle.open:after {
	content: "\f106";
	}

.grid .article .cmnt {
	display: none;
	}

.article .cmnt .scroll-pane {
	margin-top: 4px;
	height: 0;
	max-height: 595px;
	overflow: hidden;
	outline: none;
	}

.article .cmnt .scroll-pane .jspContainer .jspPane {
	width: 100% !important;
	}

.article .cmnt .scroll-pane .jspContainer .jspVerticalBar {
	position: absolute;
	top: 0;
	right: 0;
	width: 7px;
	background: #e9e9e9;
	}

.article .cmnt .scroll-pane .jspContainer .jspVerticalBar .jspTrack {
	height: 100% !important;
	background: #e9e9e9;
	}

.article .cmnt .scroll-pane .jspContainer .jspVerticalBar .jspTrack .jspDrag {
	background: #c0c4ca;
	}

.article .cmnt .scroll-pane .jspContainer .jspVerticalBar .jspTrack .jspDrag.jspHover,
.article .cmnt .scroll-pane .jspContainer .jspVerticalBar .jspTrack .jspDrag.jspActive {
	background: #909191;
	}

.article .cmnt .scroll-pane .jspContainer .jspHorizontalBar {
	display: none;
	}

.article .cmnt ul {
	margin-right: 17px;
	}

.article .cmnt ul li {
	position: relative;
	padding: 14px 0 14px 58px;
	min-height: 71px;
	border-top: 1px dotted #cac9c9;
	}

.ie8 .article .cmnt ul li {
	min-height: 43px;
	}

.article .cmnt ul li:first-child {
	border-top-width: 0;
	}

.article .cmnt ul li .author {
	font-weight: 400;
	text-decoration: none;
	}

.article .cmnt ul li .author:hover {
	color: #ff7900;
	}

.article .cmnt ul li .author img {
	position: absolute;
	top: 14px;
	left: 0;
	width: 43px;
	height: 43px;
	border-radius: 17px;
	behavior: url(js/PIE.htc);
	}

.article .cmnt ul li .author span {
	font-size: 14px;
	}

.article .cmnt ul li .time {
	margin-left: 20px;
	color: #909190;
	font-size: 12px;
	}

.article .cmnt ul li .meta {
	position: absolute;
	top: 15px;
	right: -6px;
	cursor: default;
	color: #909190;
	font-size: 12px;
	}

.article .cmnt ul li .meta a {
	display: inline-block;
	margin: 0 6px;
	color: #319f9c;
	}

.article .cmnt ul li .meta a small {
	color: #909190;
	}

.article .cmnt ul li p {
	margin-top: 7px;
	color: #909190;
	font-size: 12px;
	line-height: 1.4;
	}

.article .cmnt ul li:after {
	content: "";
	clear: both;
	display: block;
	}

.article .cmnt ul li .cmnt-s {
	margin: 10px 0 -14px -12px;
	overflow: hidden;
	background: #f7f7f7;
	border-left: 2px solid #60b4b2;
	}

.article .cmnt ul li .cmnt-s .toggle {
	display: block;
	height: 25px;
	cursor: pointer;
	color: #909190;
	font-size: 12px;
	line-height: 25px;
	text-align: center;
	text-decoration: none;
	border-top: 1px dotted #cac9c9;
	}

.article .cmnt ul li .cmnt-s .toggle:before {
	content: "\f064";
	margin-right: 6px;
	font-family: "Font Awesome";
	}

.article .cmnt ul li .cmnt-s .toggle:after {
	content: "\f107";
	margin-left: 6px;
	font-family: "Font Awesome";
	}

.article .cmnt ul li .cmnt-s .toggle.open:after {
	content: "\f106";
	}

.article .cmnt ul li .cmnt-s .scroll-pane-s {
	overflow: hidden;
	}

.article .cmnt ul li .cmnt-s .toggle + .scroll-pane-s {
	height: 0;
	}

.article .cmnt ul li .cmnt-s .scroll-pane-s ul {
	margin-right: 0;
	}

.article .cmnt ul li .cmnt-s .scroll-pane-s ul li:first-child {
	border-top-width: 1px;
	}

.article .cmnt ul li .cmnt-s .scroll-pane-s ul li {
	padding-top: 7px;
	padding-bottom: 7px;
	padding-left: 60px;
	min-height: 55px;
	}

.ie8 .article .cmnt ul li .cmnt-s .scroll-pane-s ul li {
	min-height: 41px;
	}

.article .cmnt ul li .cmnt-s .scroll-pane-s ul li .author img {
	top: 9px;
	left: 13px;
	width: 36px;
	height: 36px;
	}

.article .cmnt ul li .cmnt-s .scroll-pane-s ul li .author span {
	font-size: 12px;
	}

.article .cmnt ul li .cmnt-s .scroll-pane-s ul li .meta {
	top: 7px;
	right: 10px;
	}

.article .cmnt ul li .cmnt-s .scroll-pane-s ul li p {
	margin-right: 4px;
	}

.article .cmnt ul li .cmnt-s form {
	margin-top: 0;
	padding-top: 14px;
	padding-left: 13px;
	padding-bottom: 11px;
	overflow: hidden;
	border-top: 1px dotted #cac9c9;
	}

.article .cmnt ul li .cmnt-s form div img {
	margin-top: -3px;
	width: 36px;
	height: 36px;
	}

.article .cmnt ul li .cmnt-s form div input {
	width: 269px;
	height: 30px;
	font-size: 12px;
	background: #fff;
	border: 1px solid #c9c9c9;
	}

.ie8 .article .cmnt ul li .cmnt-s form div input {
	padding-top: 6px;
	padding-bottom: 6px;
	}

.article .cmnt ul li .cmnt-s form div button {
	margin-top: 4px;
	width: 36px;
	height: 21px;
	font-size: 12px;
	line-height: 21px;
	border-radius: 10px;
	}

.article .cmnt form {
	margin-top: 16px;
	}

.article .cmnt form:first-child {
	margin-top: 26px;
	}

.article .cmnt form div img {
	float: left;
	margin-top: -4px;
	width: 44px;
	height: 44px;
	border-radius: 17px;
	}

.article .cmnt form div input {
	position: relative;
	float: left;
	margin-left: 11px;
	padding: 8px 11px;
	width: 328px;
	height: 36px;
	color: #606060;
	font-size: 14px;
	border: 1px solid #bdbdbd;
	border-radius: 5px;
	background: #eaebed;
	behavior: url(js/PIE.htc);
	}

.article .cmnt form div button {
	position: relative;
	float: left;
	margin: -4px 0 0 11px;
	width: 44px;
	height: 44px;
	color: #fff;
	font-size: 13px;
	background: #319f9c;
	border: none;
	border-radius: 17px;
	behavior: url(js/PIE.htc);
	}

.article .cmnt form div button:hover {
	background: #34ccbf;
	}

.article ~ .ad {
	margin-top: 11px;
	overflow: hidden;
	border-radius: 5px;
	}

.grid .article ~ .ad {
	float: left;
	clear: left;
	margin-top: 0;
	margin-bottom: 19px;
	width: 740px;
	}

.article ~ .sponsor {
	position: relative;
	margin-top: 11px;
	padding: 0 17px 24px;
	background: #fff;
	border-radius: 5px;
	}

.grid .article ~ .sponsor {
	float: left;
	margin-top: 0;
	margin-right: 19px;
	margin-bottom: 19px;
	padding: 241px 3px 3px;
	width: 234px;
	height: 368px;
	}

.article ~ .sponsor h3 {
	position: relative;
	margin-bottom: 10px;
	padding: 13px 0 7px;
	color: #919191;
	font-weight: 400;
	font-size: 12px;
	border-bottom: 1px solid #a8a8a8;
	}

.article ~ .sponsor h3:after {
	content: "\f0a6";
	position: absolute;
	top: 13px;
	right: 0;
	font: 11.67px/1.2 "Font Awesome";
	}

.article ~ .sponsor .fig {
	display: block;
	margin: 13px -17px 0;
	}

.article ~ .sponsor .txt {
	color: #572179;
	font-size: 13px;
	}

.article ~ .sponsor .url {
	color: #572179;
	font-size: 12px;
	}

.article ~ .sponsor p {
	color: #b2b2b2;
	font-size: 12px;
	}

.grid .article ~ .sponsor {
	float: left;
	margin-top: 0;
	margin-right: 19px;
	margin-bottom: 19px;
	padding: 241px 3px 3px;
	width: 234px;
	height: 368px;
	}

.grid .article ~ .sponsor h3 {
	display: none;
	}

.grid .article ~ .sponsor .fig {
	position: absolute;
	top: 3px;
	left: 3px;
	display: block;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	width: 228px;
	height: 228px;
	}

.grid .article ~ .sponsor .fig img {
	width: 100%;
	height: 100%;
	border-radius: 5px 5px 0 0;
	}

.article:after {
	content: "";
	clear: both;
	display: block;
	}



/*  3. right column
---------------------------------------------*/

.right-col {
	float: left;
	margin-left: 11px;
	width: 216px;
	}

.grid .right-col {
	float: right;
	margin-top: 3px;
	margin-left: 0;
	}



/*  3.1. popular
---------------------------------------------*/

#popular {
	position: relative;
	background: #fff;
	border-radius: 5px;
	behavior: url(js/PIE.htc);
	}

#popular h3 {
	position: relative;
	padding: 14px 14px 0;
	color: #ff7800;
	font-weight: 300;
	font-size: 14px;
	}

#popular h3 small {
	margin-left: 4px;
	color: #909190;
	font-size: 12px;
	}

#popular h3:after {
	content: "";
	position: absolute;
	top: 9px;
	right: 11px;
	width: 26px;
	height: 26px;
	background: url(/video2015/static/images/sprite.png) no-repeat -202px 0;
	}

#popular .featured {
	position: relative;
	display: block;
	margin: 12px auto 0;
	width: 196px;
	height: 122px;
	overflow: hidden;
	border-radius: 3px;
	}

#popular .featured img {
	width: 100%;
	height: 100%;
	}

#popular .featured span {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 7px 3px 7px 7px;
	width: 100%;
	overflow: hidden;
	color: #fff;
	font-size: 11.95px;
	text-overflow: ellipsis;
	white-space: nowrap;
	-pie-background: rgba(0, 0, 0, 0.4);
	     background: rgba(0, 0, 0, 0.4);
	behavior: url(js/PIE.htc);
	}

#popular ul {
	margin: 9px auto 0;
	width: 196px;
	}

#popular ul li {
	position: relative;
	margin-top: 9px;
	padding-left: 89px;
	min-height: 77px;
	}

#popular ul li:first-child {
	margin-top: 0;
	}

#popular ul li .link img {
	position: absolute;
	top: 0;
	left: 0;
	width: 85px;
	height: 77px;
	border: 1px solid #b3b1af;
	border-radius: 5px;
	}

#popular ul li .link span {
	position: relative;
	top: 2px;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.4;
	}

#popular ul li .link small {
	position: absolute;
	top: 58px;
	left: 4px;
	padding: 0 3px;
	color: #fff;
	font-size: 11px;
	background: #333;
	border: 1px solid #c0c4c8;
	border-radius: 3px;
	}

.moz #popular ul li .link small {
	padding-top: 1px;
	height: 16px;
	line-height: 14px;
	}

#popular ul li .meta {
	margin-top: 6px;
	color: #606060;
	font-size: 12px;
	line-height: 1.45;
	}

#popular ul li .meta p {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

#popular ul li .meta p:first-child {
	color: #b2b2b2;
	}

#popular ul li .meta p:first-child:before {
	content: "";
	position: relative;
	top: 1px;
	display: inline-block;
	margin: 0 4px 0 3px;
	width: 8px;
	height: 10px;
	background: #000 url(/video2015/static/images/sprite.png) no-repeat -341px 0;
	outline: 1px solid #fff;
	}

.footer {
	margin-top: 10px;
	padding: 12px 0 9px;
	text-align: center;
	border-top: 1px solid #636061;
	}

.footer a {
	color: #ff7900;
	font-weight: 400;
	font-size: 12px;
	text-decoration: none;
	}

.footer a:after {
	content: "\f105";
	position: relative;
	top: -2px;
	vertical-align: middle;
	margin-left: 3px;
	font: 18px/1 "Font Awesome", sans-serif;
	}



/*  3.2. trending
---------------------------------------------*/

#trending {
	position: relative;
	margin-top: 11px;
	background: #fff;
	border-radius: 5px;
	behavior: url(js/PIE.htc);
	}

#trending h3 {
	position: relative;
	padding: 14px 14px 0;
	color: #ff7800;
	font-weight: 300;
	font-size: 14px;
	}

#trending h3 span {
	display: inline-block;
	padding-bottom: 10px;
	border-bottom: 2px solid #ff7800;
	}

#trending h3 small {
	margin-left: 4px;
	color: #909190;
	font-size: 12px;
	}

#trending h3 a {
	position: absolute;
	top: 15px;
	right: 15px;
	cursor: pointer;
	text-decoration: none;
	-moz-transform: rotate(0.1deg);
	}

#trending h3 a:before {
	content: "\f01e";
	color: #919191;
	font: 12px/1 "Font Awesome";
	}

#trending ul {
	margin: -2px 15px -4px;
	padding-top: 4px;
	border-top: 2px solid #e9e9e9;
	}

#trending ul li {
	position: relative;
	padding: 7px 0;
	font-size: 12px;
	}

#trending ul li a {
	display: inline-block;
	vertical-align: top;
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

#trending ul li small {
	position: absolute;
	top: 7px;
	right: 0;
	color: #606060;
	}



/*  3.3. related
---------------------------------------------*/

#related {
	position: relative;
	margin-top: 11px;
	background: #fff;
	border-radius: 5px;
	behavior: url(js/PIE.htc);
	}

#related h3 {
	position: relative;
	padding: 14px 14px 0;
	color: #ff7800;
	font-weight: 300;
	font-size: 14px;
	}

#related h3 span {
	display: inline-block;
	padding-bottom: 10px;
	border-bottom: 2px solid #ff7800;
	}

#related h3 small {
	margin-left: 4px;
	color: #909190;
	font-size: 12px;
	}

#related ul {
	margin-bottom: -4px;
	}

#related ul:before {
	content: "";
	display: block;
	margin: -2px 15px 0;
	padding-top: 10px;
	border-top: 2px solid #e9e9e9;
	}

#related ul li {
	position: relative;
	margin-top: 4px;
	padding: 4px 15px;
	}

#related ul li:first-child {
	margin-top: 0;
	}

#related ul li .channel {
	font-size: 13.99px;
	text-decoration: none;
	}

#related ul li .channel img {
	position: relative;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	behavior: url(js/PIE.htc);
	}

#related ul li .channel span {
	position: relative;
	top: 1px;
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
	max-width: 110px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

#related ul li .follow {
	position: absolute;
	top: 4px;
	right: 15px;
	padding: 0 7px;
	height: 20px;
	color: #fff;
	font-size: 12px;
	line-height: 20px;
	text-decoration: none;
	background: #ff7900;
	border-radius: 8px;
	}

#related ul li .follow:hover {
	color: #ff7900;
	background: #f9f9f9;
	border: 1px solid #d8ddbe;
	}



/*  4. responsive layout (736px)
---------------------------------------------*/

@media screen and (max-width: 736px) {

/*  1. left column  */

.timeline #main .left-col {
	float: none;
	width: auto;
	}


/*  1.1. info  */

.timeline #info {
	padding: 10px 10px 4px;
	border-radius: 0;
	}

.timeline #info p {
	margin: 0 auto;
	width: 250px;
	font-size: 12px;
	text-align: center;
	}

.timeline #info .meta {
	margin: 10px 23px 0;
	}

.timeline #info .meta li.dvdr {
	position: relative;
	top: 3px;
	display: inline-block;
	vertical-align: middle;
	width: 1px;
	height: 26px;
	background: #ffc590;
	}

.timeline #info .meta li strong {
	font-weight: 400;
	font-size: 24px;
	}

.timeline #info .btn {
	margin-top: -1px;
	}

.timeline #info .btn li {
	float: left;
	width: 90px !important;
	}

.timeline #info .btn li.friend {
	width: 119px !important;
	}

.timeline #info .btn li.friend,
.timeline #info .btn li.chat {
	margin-right: 0;
	margin-left: 10px;
	}

.timeline #info .btn li a {
	padding-top: -moz-calc(1px);
	padding-left: 24px !important;
	height: 32px;
	font-size: 15px;
	line-height: 29px;
	letter-spacing: 2px;
	}

.timeline #info .btn li.friend a,
.timeline #info .btn li.chat   a {
	text-indent: 0;
	}

.timeline #info .btn li.follow a:before {
	top: -2px;
	font-size: 31px;
	}

.timeline #info .btn li.friend a:before {
	top: 4px;
	left: 8px;
	}

.timeline #info .btn li.chat a:before {
	top: 3px;
	left: 9px;
	}

.timeline #info ~ * {
	display: none;
	}


/*  2. center column  */

.timeline .center-col {
	float: none;
	margin-top: 8px;
	margin-right: auto;
	margin-left: auto;
	width: 305px;
	}

.timeline #infscr-loading {
	text-align: center;
	text-indent: 0;
	}


/*  2.1. posts  */

.timeline .article {
	position: relative;
	margin-top: 11px;
	padding-bottom: 23px;
	background: #fff;
	border-radius: 5px;
	}

.timeline .article:first-child {
	margin-top: 0;
	}

.timeline .article .header {
	padding: 15px 15px 0;
	min-height: 66px;
	}

.timeline .article .header h3 {
	padding-left: 59px;
	}

.timeline .article .header h3 a img {
	width: 48px;
	height: 48px;
	border-radius: 13px;
	}

.timeline .article .header h3 a span {
	margin-top: 1px;
	font-size: 17.99px;
	}

.timeline .article .header h3:after {
	margin-top: 4px;
	min-width: 113px;
	}

.timeline .article .header .time {
	margin: 4px 0 0 59px;
	}

.timeline .article .header .menu-ico {
	top: 14px;
	right: 13px;
	}

.timeline .article .header .menu {
	top: 14px;
	right: 28px;
	}

.timeline .article h2 {
	margin-right: 15px;
	margin-left: 15px;
	}

.timeline .article h2 .sec {
	margin-right: 3px;
	padding: 0 5px 1px;
	padding-top: -moz-calc(1px);
	padding-bottom: -moz-calc(1px);
	}

.timeline .article h2 .title {
	max-width: 230px;
	font-size: 16px;
	}

.timeline .article > p {
	margin: 5px 15px 0;
	}

.timeline .article .fig {
	margin-top: 12px;
	}

.timeline .article .fig a {
	position: relative;
	display: block;
	}

.timeline .article .fig.video a:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0.7;
	margin: -34px 0 0 -34px;
	width: 68px;
	height: 68px;
	border: 1px solid #fff;
	border-radius: 50px;
	}

.timeline .article .fig.video a:hover:before {
	margin: -38px 0 0 -38px;
	width: 76px;
	height: 76px;
	}

.timeline .article .fig.video a:active:before {
	margin: -30px 0 0 -30px;
	width: 60px;
	height: 60px;
	}

.timeline .article .fig.video a:after {
	margin: -4px 0 0 -4px;
	width: 12px;
	height: 11px;
	background-position: -500px 0;
	}

.timeline .article.music .content {
	margin-top: 11px;
	padding-left: 115px;
	height: 107px;
	}

.timeline .article.music .content img {
	width: 111px;
	height: 105px;
	}

.timeline .article.music .content h4 {
	padding-top: 6px;
	}

.timeline .article.music .content p {
	margin-top: 5px;
	}

.timeline .article.music .content:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 111px;
	width: 194px;
	height: 11px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 25%);
	}

.timeline .article > .meta {
	padding: 14px 11px 10px;
	border-bottom: 1px solid #e0e0e0;
	}

.timeline .article > .meta span.more {
	margin-left: 8px;
	}

.timeline .article > .meta .menu {
	left: 165px;
	}

.timeline .article > .meta span.watched {
	right: 11px;
	color: #606060;
	font-size: 12.94px;
	}

.timeline .article > .meta span.watched:before {
	display: none;
	}

.timeline .article .cmnt {
	margin: 6px 0 0 3px;
	}

.timeline .article .cmnt > .toggle {
	margin-left: 5px;
	}

.timeline .article .cmnt ul {
	margin-right: 3px;
	}

.timeline .article .cmnt ul li {
	padding: 12px 12px 12px 66px;
	overflow: hidden;
	min-height: 63px;
	}

.timeline .article .cmnt ul li .author img {
	top: 12px;
	left: 8px;
	width: 44px;
	height: 44px;
	border-radius: 17px;
	}

.timeline .article .cmnt ul li .author span {
	position: relative;
	top: -3px;
	font-size: 13.99px;
	}

.timeline .article .cmnt ul li .time {
	position: relative;
	top: -3px;
	margin-left: 12px;
	}

.timeline .article .cmnt ul li .meta {
	top: 10px;
	top: -moz-calc(11px);
	right: 4px;
	}

.timeline .article .cmnt ul li p {
	margin-top: 4px;
	}

.timeline .article .cmnt ul li:after {
	content: "";
	clear: both;
	display: block;
	}

.timeline .article .cmnt ul li .cmnt-s {
	margin-right: -18px;
	margin-left: -17px;
	border-left-width: 1px;
	}

.timeline .article .cmnt ul li .cmnt-s .scroll-pane-s ul li .author img {
	border-radius: 16px;
	}

.timeline .article .cmnt ul li .cmnt-s .scroll-pane-s ul li .author span {
	top: 1px;
	}

.timeline .article .cmnt ul li .cmnt-s .scroll-pane-s ul li .time {
	top: 1px;
	}

.timeline .article .cmnt ul li .cmnt-s .scroll-pane-s ul li .meta {
	top: 8px;
	right: 11px;
	}

.timeline .article .cmnt ul li .cmnt-s .scroll-pane-s form {
	margin-left: 0;
	width: 250px;
	overflow: hidden;
	}

.timeline .article .cmnt ul li .cmnt-s .scroll-pane-s form div input {
	width: 135px;
	}

.timeline .article .cmnt ul li .cmnt-s .scroll-pane-s form div button {
	width: 34px;
	}

.timeline .article .cmnt ul li .cmnt-s .scroll-pane-s ul li p {
	margin-top: 7px;
	}

.timeline .article .cmnt form {
	margin-left: 8px;
	width: 286px;
	}

.timeline .article .cmnt form div input {
	margin-left: 10px;
	padding: 6px 10px;
	width: 175px;
	height: 36px;
	font-size: 12px;
	border-radius: 4px;
	}

.timeline .article .cmnt form div input.entered {
	color: #000;
	}

.timeline .article .cmnt form div button {
	margin-left: 10px;
	width: 44px;
	height: 44px;
	border-radius: 15px;
	}

.timeline .article ~ .sponsor {
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 15px;
	}

.timeline .article ~ .sponsor h3 {
	margin-right: -10px;
	margin-left: -10px;
	padding-top: 7px;
	padding-right: 10px;
	padding-bottom: 4px;
	padding-left: 10px;
	}

.timeline .article ~ .sponsor h3:after {
	top: 7px;
	right: 10px;
	}

.timeline .article ~ .sponsor .fig {
	margin-top: 10px;
	margin-right: -10px;
	margin-left: -10px;
	}


/*  3. right column  */

.timeline .right-col {
	display: none;
	}

}