.clip {
	width:220px;
	background-color:#333;
	float:left;
	display:inline;
	position:relative;
	margin: 0 20px 20px 0;
	height:275px;
	overflow:hidden;
}
.clip:hover, .clip.active {
	background-color:#1a1a1a;
}
.clip.active > a {
	cursor:default;
}

.clip .head {
	padding: 4px 10px 3px;
	height:13px;
	line-height:12px;
}

.clip .head, .clip .foot {
	color:#999;
	font-size: 11px;
}

.clip .head .ratings {
	padding-left:5px;
	float:left;
	display:inline;
}
.stars {
	background:url(../imgs/stars.gif) no-repeat;
	width:60px;
	height:12px;
	float:left;
	display:inline;
}
.s5 {
	background-position:0 0;
}
.s4 {
	background-position:-12px 0;
}
.s3 {
	background-position:-24px 0;
}
.s2 {
	background-position:-36px 0;
}
.s1 {
	background-position:-48px 0;
}
.s0 {
	background-position:-60px 0;
}

.s45 {
	background-position:0 -12px;
}
.s35 {
	background-position:-12px -12px;
}
.s25 {
	background-position:-24px -12px;
}
.s15 {
	background-position:-36px -12px;
}
.s05 {
	background-position:-48px -12px;
}

.clip .date {
	float:left;
	display:inline;
}

.clip .dur {
	float:right;
	display:inline;
}

.clip .head.livenow {
	color:#000;
	text-transform:uppercase;
	font-weight:bold;
	background-color:#f8cf12;

}
.clip:hover .head.livenow {
	background:none;
	color:#f8cf12;
}
.clip .head.livelater {
	background-color:#aaa;
	color:#000;
	font-weight:bold;
}
.clip:hover .head {
	background:none;
	color:#aaa;
}
.clip .head.livelater em {
	font-style:normal;
	text-transform:uppercase;
}


.clip > a {
	display:block;
	text-decoration:none;
	height: 240px;
	overflow:hidden;
	line-height: 0.82em;
	color:#666;
	font-size:11px;
}

.clip .id {
	color: #aaa;
	font-size: 11px;
	font-weight:bold;
	line-height: 1.1em;
	margin: 8px 10px 0;
	text-transform:uppercase;
	text-decoration:none;
	display:block;
	overflow:hidden;
	white-space:nowrap;
}
.clip .title {
	color: #fff;
	font-size: 13px;
	font-weight:bold;
	line-height: 1.25em;
	margin: 3px 10px;
	display:block;
	text-decoration:none;
	max-height:32px;
	overflow:hidden;
}
.clip .desc {
	color:#aaa;
	font-size: 11px;
	line-height:14px;
	margin: 3px 10px;
	display:block;
	text-decoration:none;
}

.clip .desc em {
	color: #777;
	font-size: 11px;
	display:block;
	text-decoration:none;
	margin-top:2px;
}

.clip > a > img {
	width:220px;
	height:124px;
}

.clip .foot {
	padding: 2px 10px 5px 10px;
	width:200px;
	position:absolute;
	bottom:0;
}

.clip .foot p {
	float:left;
	margin:2px 0 0 0;

}
.clip .foot a.playlist {
	float:right;
	background:url(../imgs/playlist.gif) no-repeat top right;
	height:16px;
	padding:2px 22px 0 0;
	color:#999;
	text-decoration:none;
}
.clip .foot a:hover {
	background:url(../imgs/playlist-hover.gif) no-repeat top right;
	color:#fff;
}
.clip a.addToPlaylist,
.clip a.removeFromPlaylist{
	position: absolute;
	display: block;
	background: transparent url(../imgs/add.gif) right center no-repeat;
	right: 5px;
	bottom: 5px;
	height: auto;
	padding: 0 20px 0 0;
	margin: 0 0;
	text-align: right;
	line-height: 16px;
	cursor: pointer;
}
.clip a.removeFromPlaylist{
	background: transparent url(../imgs/remove.gif) right center no-repeat;	
}
.clip a.addToPlaylist:hover,
.clip a.removeFromPlaylist:hover{
	color: #ddd;
}

/* RADIO CLIPS */
.radio .clip {
	display: block;
	float: none;
	clear: both;
	width: auto;
	height: 80px;
	margin: 0;
	border-bottom: 1px solid #222;
}
.radio .clip .head{
	float: right;
	width: 110px;
	height: 60px;
	padding: 0;
	margin: 10px;
	border-left: 1px dashed #000;
}
.radio .clip .livelater,
.radio .clip .livenow{
	background-color: transparent;
	color: #F8CF12;
	text-align: right;
}
.radio .clip .head .date,
.radio .clip .head .dur{
	display: block;
	float: none;
	text-align: right;
	line-height: 15px;
}
.radio .clip .head .date{
	color: #fff;
}
.radio .clip a{
	position: relative;
	height: auto;
}
.radio .clip a img{
	float: left;
	width: 110px;
	height: 60px;
	margin: 10px;
}
.radio .clip .desc em {
	position: absolute;
	top: 0;
	right: 0;
}
.radio .clip a.addToPlaylist,
.radio .clip a.removeFromPlaylist{
	position: absolute;
	bottom: 0;
	margin: 5px 0;
}
.videoIcon {
	background: url(../imgs/icn-camera-white.gif) left 2px no-repeat;
	text-indent: 20px;
}
.audioIcon {
	background: url(../imgs/icn-speaker-white.gif) left 2px no-repeat;
	text-indent: 20px;
}
.videoCCIcon {
	background: url(../imgs/icn-camera-cc-white.gif) left 2px no-repeat;
	text-indent: 40px;
}