* {
		margin: 0px;
		padding: 0px;
	}
	img.aSpeaker:hover{
		cursor:grab;
	}
	img.playFile:hover{
		cursor:grab;
		border: 3px solid red;
	}
	img.playFile{
		cursor:grab;
		border: 3px solid transparent;
	}
	span.artist{
		text-decoration: underline;
	}
	span.artist:hover{
		cursor:grab;
	}	
	img.artist:hover{
		cursor:grab;
		border: 3px solid red;
		
	}
	img.artist{
		cursor:grab;
		border: 3px solid transparent;
		
	}
	img#iSpeaker{
	 margin-top: 8px;	
	}
	div#pInfo {
		display: none;
	}
	select, label {
		display: block;
	}
	.sButton {
		float: right;
	}
	div.pImage{
		width: 120px;
	}
	div.hLink{
		width: auto;
	}
	div.player{
		width: 680px;
	}
	div.size40{
		height:57px;
	}
	div.lPos {
		float: left;
		margin-right: 10px;
	}
	div.hContRight{
		width: 100%;
		background-color: Pink;
	}
	p.tTable{
		color: #FFFF00;
		font-family: "Monotype Corsiva";
		font-stretch: ultra-expanded;
		background-color: #5882FA;
		font-size: 50px;
		font-weight: bold;
		margin: 0px;
		padding: 0px;
	}
	div.pCont{
		background-color: #f2f2f2;
		width: 835px;
	}
	p.onair{
		font-size:120%;
		font-weight: 600;
		color: blue;
		background-color: yellow;
		text-align: center;
		vertical-align: top;
	}
	div.lPlay {
		background-color: #f2f2f2;
		overflow: hidden;
		border-radius: 10px;
		border-style: double;
		border-width: 3px;
		padding: 0px;
		margin: 0px;
	}
	div.hContLeft{
		height:150px;
		width:600px;
	}
	div.pInfo{
		width: 400px;
	}
	div.pTitle{
		vertical-align: middle;
	}
	div.mlHeader {
		overflow: hidden;
		font-size: 17px;
	} 
	div.rImage{
		height: 120px;
	}
	div.pImage{
		width:150px;
		padding: 0px;
		border: 0px;
		margin: 0px;
	}
	div.mlHeader1 {
		height: 0px;
	}
	div.hCont {
		overflow: hidden;
		font-size: 17px;
		background-color: #f2f2f2;
		width: 835px;
	} 
	div.mlContent {
		overflow: auto;
		height: 500px;
		width: 100%;
		resize: both;
		margin: 0px;
		padding: 0px 0px 0px 0px;
	}
	div.tx_mairlist {
		display: table;
		table-layout: fixed;
		border-collapse: separate;
		border-spacing:  0px  1px;
		border-top-color: white;
		border-bottom-color: white;
/*		border-collapse: collapse; */
		table-layout: auto;
		width: 100%;
	}
	div.sSearch {
		display: table;
		table-layout: fixed;
		border-collapse: separate;
		border-spacing:  0px  1px;
		border-top-color: white;
		border-bottom-color: white;
/*		border-collapse: collapse; */
		table-layout: auto;
		width: 100%;
	}
	div.future {
		display:table-row;  
		background-color: lightblue;
	}
	div.onair {
		display:table-row;  
		background-color: lightgreen;
	}
	div.default {
		display:table-row; 
/*		border-spacing: 5px; */
/*		margin: 50px; */
/*		padding: 5px 5px 5px 5px; */
		background-color: #f2f2f2;
	}
	div.time {
		display:table-cell;
		width: 50px;
		vertical-align: top;
		}
	div.cover {
		display:table-cell;
		width: 50px;
		vertical-align: top;
		white-space: nowrap;
		padding: 0px 5px 0px 5px;
	}
	div.Info {
		vertical-align: top;
		white-space: nowrap;
	}
	p.head {
		font-size: 17px;
		background-color: red;
		text-align: center;
		margin: 0px;
		padding: 5px;
	}
	p.ptime {
		font-weight:bold;
		margin:0px;
	}
	p.dur {
		font-size: 100%;
		text-align: right;
		vertical-align: text-bottom;
		padding: 0px;
		margin: 0px;
		line-height:normal !important;
	}
	p.Info{
		margin:0 px;
		line-height: 1.2;
	}
	div.clock{
		font-size: 30px;
		font-weight: bold;

	}
	span.pTitle {
		font-size: 130%;
		font-weight: bold;
	}
	span.pArtist {
		font-size: 130%;
	}
	span.pAlbum {
		font-size: 120%;
	}
	span.pYear {
		font-size: 120%;
	}
	p.space {
		font-size: 0px;
	}
/***** input type: range *****/

	input[type="range"] {
		-webkit-appearance: none;
		width: 100%;
		background:#404040;
		height:100%
	}
	
/*Chrome*/
	input[type='range']::-webkit-slider-thumb {
		-webkit-appearance: none;
		border: 1px solid #000000;
		height: 15px;
		width: 15px;
		border-radius: 50%;
		background: #ffffff;
		margin-top: -7px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
		box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
	}
	input[type='range']:hover::-webkit-slider-thumb {
		-webkit-appearance: none;
		border: 1px solid #000000;
		height: 15px;
		width: 15px;
		border-radius: 50%;
		background: #1E90FF;
		margin-top: -5px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
		box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
	}
	input[type=range]::-webkit-slider-runnable-track {
		  width: 100%;
		  height: 4px;
		  cursor: pointer;
		  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
		  background: #1E90FF;
		  border-radius: 2px;
		  border: 0.2px solid #010101;
}
	input[type=range]:focus::-webkit-slider-runnable-track {
		background: #367ebd;
	}

/* IE*/
	input[type="range"]::-ms-fill-lower {
		background-color: #1E90FF; 
		border-radius:2px; 
		height:4px;
		box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	}
	input[type=range]:focus::-ms-fill-lower {
		  background: #1E90FF;
	}
	input[type="range"]::-ms-fill-upper {  
		background-color: lightgrey;
		border-radius:2px; 
		height:4px;
		box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	}
	input[type=range]:focus::-ms-fill-upper {
		background: #6495ED;
	}
	input[type=range]::-ms-thumb {
		  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
		  height:15px;
		  width:15px;
		  border-radius: 50%;
		  margin-top:0px;
		  background: #ffffff;
	}
	input[type=range]:hover::-ms-thumb {
		  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
		  height:15px;
		  width:15px;
		  border-radius: 50%;
		  margin-top:0px;
		  background: #1E90FF;
	}
	/* FF */
	input[type="range"]::-moz-range-track{
		width:100%;
		height:100%;
		background:#404040;
		background-color: lightgrey;
		height:4px;
		border:none;
		border-radius:2px; 
	}
	input[type="range"]::-moz-range-progress{
		background-color:#1E90FF;
		height:4px;
		border-radius:2px; 
	}
	input[type="range"]::-moz-range-thumb{
		border:none;
		width: 15px;
		height: 15px;
		background-color:white;
		border-radius: 50%; 
	}
	input[type="range"]:hover::-moz-range-thumb{
		border:none;
		width: 15px;
		height: 15px;
		background-color:#1E90FF;
		border-radius: 50%; 
	}
	input[type=range]:-moz-focusring{
		outline: 1px solid white;
		outline-offset: -1px;
	}
	input[type=range]:focus::-moz-range-track {
		background: #ccc;
	}
	/***** end of input range *****/
	
	.middle{
		vertical-align:middle;
	}
	#_Player{
		background-color: #404040;
		vertical-align: middle;
		padding: 0px;
		margin: 0px;
		height: 10;
	}
	div.pRow{
		height: 40px;
	}
	div#pBar, div#pBar1{
/*		background-color:#404040; */
/*		width:280px;
		height: 100%;*/
		display:inline-block;
		white-space:nowrap;
//		padding-top: 0px;
		margin: 0px;
		border: 0px;
	}
	div#pStart, div#pStart1{
/*		width:30px;
		height:100%;*/
		display:inline-block;
		white-space:nowrap;
	}
	div#pSpeak, div#pSpeak{
/*		width:35px;
		height:100%;*/
		display:inline-block;
		white-space:nowrap;
	}
	div#pLoud, div#pLoud{
/*		width:100px;*/
		height:100%;
		display:inline-block;
		float:right;
		padding-top: 9px;
	}
	div#pTime{
		background-color: #404040; 
/*		width:81px;*/
		text-align:right;
		color:white;
		display:inline-block;
		font-size:11px;
		font-stretch:normal;
		font-family:Arial;
		white-space:nowrap;
		vertical-align:middle;
		}
	.help{
		font-size:15px;
	}
/* relevant styles */
.cr_player {
  overflow: visible;
  position: relative;
  height: 50px;
  width: 125px;
}
.hIcon:hover~.cr_player_help {
  visibility: visible;
  opacity: 1;
}
.cr_player_help {
  position: relative;
  border:black;
  border-radius:5px;
  width:100px;
  top: 0;
  bottom: 0;
  left: -20px;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;

  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}
div#pInfo{
	display:none;
}
div.text {
	padding: 15px;
}
div.text p {
	font-size: 15px;
	font-weight: bold;
}
div.hIcon img {
	float: left;
	padding: 5px;
	}

img.hIcon:hover{
		cursor:pointer;
}
div.table{
    display:table-cell;
    margin:5px;    
    vertical-align: middle;
}
div.table1{
    display: table-cell;
    margin: 5px;    
    vertical-align: top;
}
div.tRow{
	display: table-row;
    vertical-align: middle;
}
div.tRow1{
	display: table-row;
    vertical-align: top;
}
div.tCell{
	display:table-cell;
    vertical-align: middle;
    padding:5px;    
	text-align:left;
}
div.tCell1{
	display:table-cell;
    vertical-align: top;
    padding:0px;    
	text-align:left;
}
div.tCell1c{
	width:100%;
	background-color: yellow;
	display:table-cell;
    vertical-align: top;
    padding:0px;    
	text-align:center;
}
.icon{
	width:40px;
	max-width:40px; 
/*	height:55px;
	max-width:55px;*/
    padding:3px;    
}
	#speaker_off:hover{
		filter: invert(61%) sepia(53%) saturate(7499%) hue-rotate(195deg) brightness(106%) contrast(101%);
		cursor:pointer;
	}
	#pStart, #pStart1{
		fill:white !important;
	}
	#pStart:hover, #pStart1:hover{
		filter: invert(61%) sepia(53%) saturate(7499%) hue-rotate(195deg) brightness(106%) contrast(101%);
		cursor:pointer;
	}
@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.65; }
    to { opacity: 1.0; }
}                                                                                                                                                                                                                                  

@-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.65; }
    to { opacity: 1.0; }
}

.icon-tx-mairlist-CR_Start3 {
  animation:fade 2000ms infinite;
  -webkit-animation:fade 1000ms infinite;
}