/*-------------------------RADIO---------------------------*/

.radio-container{
    display: block;
}

.jp-gui {
    position: relative;
    padding: 15px;
    width: 600px;
    height: 20px;
}

@media only screen and (max-width:750px) {
	.jp-gui {
		width: auto;
		}
	
	.jp-volume-slider {
		display: none;
		}
		
	.jp-volume-slider .ui-slider-handle {
		display: none;
		}
		
	li.jp-mute, li.jp-unmute {
		display: none;	
		}
		
	.jp-duration {
	    right: 20px !important;
		}
	
	.jp-progress-slider {
		width: calc(100% - 175px) !important;
		}
}

@media only screen and (max-width:400px) {
	.jp-current-time, .jp-duration {
		display: none !important;
		}
	
	.jp-progress-slider {
	    left: 60px !important;
		width: calc(100% - 80px) !important;
	    }
}

.ui-widget-content {
    border: 2px solid #33a4ec;
    background: none;
    color: #fff;
}

.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
}

.jp-gui ul {
    margin: 0;
    padding: 0;
}

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    /*border: 1px solid #d3d3d3;*/
    background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
    font-weight: normal;
    color: #555555;
}

.ui-state-hover {
	color: #fff;
}

.jp-gui ul li {
    position: relative;
    float: left;
    list-style: none;
    /*margin: 2px;*/
    /*padding: 4px 0;*/
    cursor: pointer;
}

.jp-progress-slider {
    display: block;
    position: absolute;
    top: 21px;
    left: 102px;
    width: 300px;
    height: 10px;
	/*border: 1px solid #aaaaaa;*/
    background: #fff;
    /*opacity: 0.5;*/
    color: #222222;
    text-align: left;
    border: none !important;
    border-radius: 0;
}

.jp-progress-slider .ui-slider-handle, .jp-volume-slider .ui-slider-handle {
    display: block;
    cursor: pointer;
    border: 1px solid #33a4ec;
    background: #33a4ec;
    font-weight: normal;
    color: #33a4ec;
    top: -.15em;
    margin-left: -.6em;
    position: absolute;
    z-index: 2;
    width: 0.8em;
    height: 0.8em;
    cursor: default;
    border-radius: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    outline: none;
}

.ui-slider-horizontal .ui-slider-range-min {
    left: 0;
}

.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%;
}

.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-position: 0 0;
    background: #33a4ec;
    color: #222222;
    font-weight: bold;
}

.jp-volume-slider {
    position: absolute;
    background: #fff;
    /*opacity: 0.5;*/
    top: 20px;
    left: 508px;
    width: 100px;
    height: 10px;
    border: none !important;
    border-radius: 0;
}

/*.jp-volume-slider .ui-slider-handle {
    cursor: pointer;
    border: 1px solid #d3d3d3;
    background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
    font-weight: normal;
    color: #555555;
    top: -.3em;
    margin-left: -.6em;
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
}*/

/* Play Button */

li.jp-play {
	width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 18px solid #33a4ec;
    padding: 0;
}

li.jp-play:hover {
	border-left-color: #fff;
}

li.jp-pause {
    width: 1%;
    height: 20px;
    border-left: 6px solid #33a4ec;
    border-right: 6px solid #33a4ec;
    display: none;
    padding: 0;
}

li.jp-pause:hover {
	border-left-color: #fff;
	border-right-color: #fff;
}

li.jp-mute, li.jp-unmute {
    margin-left: 436px;
    margin-top: -2px;
	font-size: 20px;
	color: #33a4ec;
}

li.jp-mute a, li.jp-unmute a{
	color: #33a4ec;
}

.jp-current-time, .jp-duration {
	position: absolute;
	top: 17px;
	font-size: 0.8em;
	cursor: default;
}

.jp-current-time {
	display: block;
	left: 45px;
}

.jp-duration {
	display: block;
	right: 178px;
}