@CHARSET "UTF-8";

/* Used to hide non-ui fields **/
span.audioFileID {
    display:none; 
}
span.audioFileTitle {
    display:none; 
}
span.audioFileArtist {
    display:none; 
}
span.playlistID {
    display:none; 
}
span.playlistIndex {
    display:none; 
}
span.showID {
    display:none; 
}
span.showIndex {
    display:none; 
}

/* End of non-ui fields **/

.current-track {
	padding-left: 5px;
	margin-bottom: 5px;
}

div.jp-audio,
div.jp-video {

	/* Edit the font-size to counteract inherited font sizing.
	 * Eg. 1.25em = 1 / 0.8em
	 */

	font-size:1em; /* 1.25em for testing in site pages */ /* No parent CSS that can effect the size in the demos ZIP */

	font-family: Arial,Helvetica,sans-serif;
	line-height:1.6;
	color: #9B9B9B;
	position:relative;
	/*border-color: #262526 #262526 #5E5E5E;
    border-style: solid;
    border-width: 1px;*/
}

div.jp-audio {
	/*width:420px;*/
    width: 100%;
}
div.jp-video-270p {
	width:100%;
}
div.jp-video-360p {
	width:640px;
}

div.jp-interface {
	/*position: relative;*/
    /*background-color: #3D3D3D;
    background: -moz-linear-gradient(top, #6E6E6E 0, #3a3a3a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6E6E6E), color-stop(100%, #3a3a3a));
    width: 100%;*/
	/*max-width: 600px;*/
	text-align:center;
	background: rgba(0, 0, 0, 0.3);
}

div.jp-audio div.jp-type-single div.jp-interface {
	height:80px;
}
div.jp-audio div.jp-type-playlist div.jp-interface {
	height:45px;
	padding-top: 10px;
	display: inline-block;
	width: 100%;
}

.rss-buttons {
	width: 100px;
	height: 40px;
}

/* @group CONTROLS */

div.jp-interface ul.jp-controls {
	float: left;
    padding: 0;
    margin: 0;
    cursor: pointer;
    position: relative;
    left: 10px;
}

div.jp-interface ul.jp-controls li {
	list-style-type: none;
    float: left;
    padding: 1px 2px;
    margin-right: 5px;
	border: none;
}

/* @group progress bar */


.podcast ul.jp-playlist {
	width: 100%;
	list-style: none;
	padding-left: 0px;
	text-align: left;
    margin-top: 60px;
}
.empty_podcast {
	margin-left: 50px;
	font-size: 26px;
}

.jp-playlist-item, .playlist-item-no-preview {
	/*padding: 15px 0px 15px 20px;*/
	/*border-bottom: 1px solid rgba(255, 255, 255, 0.1);*/
	/*background-color: #222222;*/
	transition: border-bottom 0.4s ease;
	/*padding-right: 100px;*/
    width: 100%;
	position: relative;
    height: 65px;
}

.jp-playlist-item {
	font-weight: 300;
    margin-top: 4px;
    width: 100%;
    color: #888;
    clear: both;
}

.jp-playlist-item.current {
	color: #fff;
}

/*li.jp-playlist-item.current {
    color: #FF6F01;
}
li.current {
    color: #FF6F01;
}*/
.podcast_play_btn {
	margin-left: -15px;
    height: 65px;
    width: 65px;
    background-size: 100%;
    vertical-align: bottom;
    /*float: left;*/
    visibility: hidden;
	display: inline-block;
	cursor: pointer;
}

li.current .podcast_play_btn{
    visibility: visible;
}

.podcast_play_btn:hover {
    opacity: 1;
}

.podcast_info {
    background-color: #222222;
    height: 100%;
    position: absolute;
    left: 50px;
    right: 0;
}

.podcast_info > span {
	padding: 18px 40px;
}

.podcast_title {
	width: calc(100% - 280px);
    max-width: 30%;
    /*min-width: 110px;*/
    /*height: 100%;*/
	font-size: 17px;
	font-weight: 400;
	text-transform: uppercase;
	text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	display: inline-block;
}

.podcast_date {
    width: 12.5%;
    min-width: 75px;
	float: right;
	font-size: 16px;
	text-align: right;
	display: inline-block;
}

.podcast_length {
    width: 60px;
    min-width: 60px;
	font-size: 16px;
	float: right;
	display: inline-block;
}

.podcast_btn_group {
	position: absolute;
	text-align: center;
    /*float: right;*/
	width: 90px;
    min-width: 90px;
    padding: 0px;
    margin: 0px;
	visibility: hidden;
	display: inline-block;
}
li.current .podcast_btn_group {
    visibility: visible;
}
.podcast_btn_group img {
	width: auto;
	height: 16px;
}


.podcast_action_btn {
	opacity: 0.7;
	cursor: pointer;
	margin-right: 15px;
    width: 15px;
    height: 15px;
}


.podcast_action_btn:hover {
	opacity: 1;
}

.podcast_no_play {
	margin-right: 15px;
	opacity: 0.4;
}

.podcast_expand {
	background: url('img/expand.png') no-repeat center;
    background-size: 150%;
	padding-right: 15px;
	transition: color 0.4s ease;
}

.podcast_expand.expanded {
    background: url('img/shrink_up.png') no-repeat center;
    background-size: 150%;
}

.podcast_desc_btn:hover {
	color: #fff;
}

.podcast_desc_btn.current {
	color: #fff;
}


.podcast_action_btn a {
    display: inline-block;
}

.podcast_desc {
	display: none;
	font-size: 14px;
    margin-left: 50px;
    padding-left: 40px;
	padding-right: 40px;
    padding-bottom: 10px;
    background-color: #222222;
}

.current-track span {
	display: inline;
	margin-left:10px;
	color: #FF6F01;
	width: 90%;
}

.track-overflow {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/*
.podcast ul li .play_button {
 	background: url('img/play.png') no-repeat center center;
	width: 25px;
	height: 25px;
	background-size: 100%;
	vertical-align: bottom;
}
*/
/*.podcast_info span, .playlist-item-no-preview span {
	margin: 5px 10px 2px 0px;
	display: inline-block;
}*/



.pagination {
	list-style: none;
	padding-left: 0px;
	margin-top: 10px;
    margin-left: 50px;
}

ul.pagination li {
	color: #fff;
	display: inline-block;
	cursor: pointer;
	text-align: center;
	padding: 0 5px 2px 5px;
	border-bottom: none;
	transition: none;
}

ul.pagination li.current {
	border-bottom: 1px solid #FD8913;
}

.current-track {
	text-align: left;
}


div.jp-type-single div.jp-title,
div.jp-type-playlist div.jp-title,
/*div.jp-type-single div.jp-playlist {
	border-top:none;
}*/
div.jp-title ul,
/*div.jp-playlist ul {
	list-style-type:none;
	margin:0;
	padding:0 20px;
}*/

div.jp-title li {
	padding:5px 0;
	font-weight:bold;
}

span.jp-artist {
	font-size: 90%;
	color:#9B9B9B;
	margin-left: 5px;
}

/* @end */

div.jp-video-270p div.jp-video-play {
	height:270px;
}
div.jp-video-360p div.jp-video-play {
	height:360px;
}
div.jp-video-full div.jp-video-play {
	height:100%;
	z-index:1000;
}

div.jp-jplayer audio,
div.jp-jplayer {
	width:0px;
	height:0px;
}

div.jp-jplayer {
	background-color: #000000;
}

/* @group NO SOLUTION error feedback */

.jp-no-solution {
	position:absolute;
	width:390px;
	margin-left:-202px;
	left:50%;
	top: 10px;

	padding:5px;
	font-size:.8em;
	background-color:#eee;
	border:2px solid #009be3;
	color:#000;
	display:none;
}

.jp-no-solution a {
	color:#000;
}

.jp-no-solution span {
	font-size:1em;
	display:block;
	text-align:center;
	font-weight:bold;
}

.playbar {
	display: block;
	width: 33%;
	float: left;
}

@media (max-width: 1400px) {
	.podcast_info > span {
		padding: 18px 20px;
	}

	.podcast_title {
		font-size: 16px;
	}

	.podcast_length, .podcast_date {
		font-size: 15px;
	}

	.podcast_date {
		width: 14.5%;
	}
	.podcast_desc {
		padding-left: 18px;
		padding-right: 18px;
	}
}

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

    .podcast_info > span {
		padding: 0px 20px;
	}
    .podcast_desc {
		padding-left: 30px;
		padding-right: 30px;
	}

	.jp-playlist-item {
		height: 82px;
	}
	.podcast_info {
		display: inline;
		padding: 10px;
		box-sizing: border-box;
	}
	.podcast_info .podcast_title {
		width: 50%;
		max-width: calc(100% - 110px);
		padding-top: 0px;
        padding-right: 2px;
	}
    .podcast_length {
		float: left;
		padding-left: 10px;
	}
	.podcast_date {
		float: right;
		padding-right: 10px;
        min-width: 80px;
	}
	.podcast_info .podcast_btn_group {
		float: right;
		/*margin: 4px 3px 2px 0;*/
        padding-left: 2px;
        padding-right: 10px;
        position: static;
	}
    .podcast_btn_group .podcast_expand {
        margin-right: 0;
    }
    .podcast_play_btn {
		height: 82px;
		margin-top: 0px;
		background-repeat: repeat !important;
	}
}

@media only screen and (max-width : 400px) {
	.podcast_info .podcast_btn_group {
        padding: 0 10px 0 0;
	}
}

@media only screen and (max-width : 360px) {
	.podcast_info .podcast_title {
		padding-left: 5px;
	}
	.podcast_info .podcast_btn_group {
        padding: 0 5px 0 0;
	}
	.podcast_info .podcast_date {
		padding: 0 11px 0 0;
	}

	.podcast_info .podcast_length {
		padding: 0 0 0 5px;
	}
    .podcast_desc {
		padding-left: 15px;
		padding-right: 15px;
	}
}