/******************************************************
* #### jQuery-Youtube-Channels-Playlist v06 ####
* Coded by Ican Bachors 2014.
* http://ibacor.com/labs/jquery-youtube-channels-playlist/
* Updates will be posted to this site.
******************************************************/

.ycp {
	font-family: sans-serif;
	font-size: 1em;
	color: #444;
	background: #000;
	width: 880px;
	float: right;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-start;
}

.ycp span.tombol {
	margin-right: 20px;
}

.ycp span.about {
	float: right;
	background: #111;
	padding: 2px;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	text-align: center;
}

.ycp a {
	text-decoration: none;
}

.ycp a img {
	border: 0;
}

.ycp .unit {
	box-sizing: border-box;
}

.ycp .katuhu {
	width: 35%;
}

.ycp .kenca {
	width: 65%;
	height: 528px
}

.ycp .kenca .ycp_vid_play {
	width: 100%;
	height: 100%;
	cursor: pointer;	
	background: rgba(17,17,17,0.7);
}

.ycp .kenca .ycp_vid_play a {
	color: #fff
}

.ycp .kenca .ycp_vid_play a::before {
	color: rgba(230,35,29,0.8);
	content: "\25B6";
	z-index: 100;
    font-size: 50px;
    position: relative;
    left: 20px;
    top: 10px;
	margin-right: 25px
}

.ycp .thumb {
	float: left;
	margin-right: 10px;
	position: relative;
	height: 61px;
	background: #1a1a1a;
}

.ycp .thumb span {
	position: absolute;
	right: 2px;
	bottom: 0px;
	padding: 2px;
	background: #000;
	color: silver;
	font-size: 0.8em;
}

.ycp .play {
	margin: 0;
	padding: 10px;
	display: block;
	overflow: hidden;
	*overflow: visible;
}

.ycp .vid-top {
	color: #767676;
	background: #222;
	padding: 15px 10px;
	display: block;
	overflow: hidden;
	*overflow: visible;
	height: 48px
}

.ycp .vid-top div.title {
	color: #fff;
	border-bottom: 1px solid #111;
	padding-bottom: 5px;
	margin-bottom: 5px
}

.ycp .vid-bottom {
	color: #ddd;
	background: #111;
	display: block;
	overflow-y: scroll;
	height: 450px;
}

.ycp div.title {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ycp span.mute,
.ycp span.about a {
	color: #767676;
	font-size: 0.8em;
}

.ycp .thumb img {
	width: 80px;
	height: 100%;
	border: 2px solid #000
}

.ycp .play:hover,
.ycp .vid-active {
	background: #000;
}

.ycp .vid-active .thumb img {
	border: 2px solid #e6231d
}

.ycp .vid-prev, 
.ycp .vid-next, 
.ycp .play {
	cursor: pointer;
}

.ycp .vid-iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

@media screen and (max-width:767px) {
	.ycp {
		width: 100%;
	}

	.ycp .katuhu {
		width: 100%;
	}

	.ycp .kenca {
		width: 100%;
		height: 350px;
	}

	.ycp .vid-bottom {
		height: 300px;
	};
}