/* Implementation code

<div class="radioPlayer">
	 JS and CSS needed to run Radio Player 
	<script type="text/javascript" src="/repositorio/mediaPlayer/js/jquery-ui-1.7.1.custom.min.js"></script>
	<script type="text/javascript" src="/repositorio/mediaPlayer/swfobject.js"></script>
	<script type="text/javascript" src="/repositorio/mediaPlayer/js/radio.js"></script>
	<link href="css/radio.css" rel="stylesheet" type="text/css" />
	 /JS and CSS needed to run Radio Player 
	 Main 
	<div id="media"></div>
	<div id="radioSelector">
		<a id="radiofm" class="btn selected" onclick="createPlayer('radiofm')">Cultura FM</a>
		<a id="radioam" class="btn" onclick="createPlayer('radioam')">Cultura Brasil</a>
		<a id="popout" onclick="popoutPlayer()">Abrir em outra janela</a>
	</div>
	<div id="controls">
		<a id="play"></a>
		<div id="volumeWrapper">
			<a id="mute">Mute</a>
			<div id="playerVolume"></div>
		</div>
	</div>
	<br clear="all" />
	 /Main 
</div>

*/

/* jQuery UI settings */

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

.ui-widget-content {
	border: 1px solid #aaaaaa;
	background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
	color: #222222;
}

.ui-widget-content a { color: #222222; }

.ui-state-default,
.ui-widget-content .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;
	outline: none;
}

.ui-corner-all {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

.ui-slider {
	position: relative;
	text-align: left;
}

.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.2em;
	height: 1.2em;
	cursor: default;
}

.ui-slider-horizontal { height: .8em; }

.ui-slider-horizontal .ui-slider-handle {
	top: -.3em;
	margin-left: -.6em;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
	background-image: url(../images/btnVolumeHandler.png);
	background-position: center center;
	border-style: none;
	background-color: transparent;
	background-repeat: no-repeat;
}

.ui-slider .ui-slider-handle {
	height: 13px;
	width: 13px;
	margin-left: -5px;
	top: -3px;
	_margin-top: -5px;
}

.ui-slider-horizontal {
	height: 7px;
	width: 100px;
	background-image: url(../images/bkgLoaded.png);
	background-color: LightGrey;
	background-repeat: no-repeat;
	background-position: right center;
}

.popoutPlayerBody {
	margin: 0px;
	padding: 0px;
}

.radioPlayer {
	background-color: #006600;
	width: 246px;
	padding: 7px;
	position: relative;
}

.radioPlayer #media {
	height: 1px;
	width: 1px;
	float: left;
	display: inline;
	position: absolute;
	top: 29px;
	bottom: 20px;
	z-index: 1;
	left: 49px;
}

.radioPlayer #controls {
	background-image: url(../images/bkgRadioPlayer.png);
	background-repeat: no-repeat;
	height: 42px;
	width: 245px;
	float: left;
	display: inline;
	top: -1px;
	position: relative;
}

/* Custom settings (override some classes) */

.radioPlayer #controls #play {
	background-image: url(../images/btnPlay.png);
	background-repeat: no-repeat;
	height: 30px;
	width: 30px;
	margin-top: 2px;
	margin-left: 30px;
	float: left;
	display: inline;
	cursor: pointer;
	margin-right: 45px;
}

.radioPlayer #controls #volumeWrapper {
	float: left;
	background-repeat: no-repeat;
	margin-top: 8px;
	padding-top: 2px;
	height: 20px;
	display: inline;
}

.radioPlayer #controls #volumeWrapper #mute {
	background-repeat: no-repeat;
	background-position: center center;
	display: inline;
	float: left;
	height: 15px;
	width: 18px;
	text-indent: -9999px;
	cursor: pointer;
	background-image: url(../images/icoMute.png);	
	background-image: url(../images/icoVolume.png);
	background-image: none;
}

.radioPlayer #controls #volumeWrapper #playerVolume {
	float: left;
	margin-top: 3px;
	margin-left: 7px;
}

.radioPlayer #radioSelector {
	position: relative;
	z-index: 2;
	width: 243px;
	margin-left: 1px;
}

.radioPlayer #radioSelector #popout {
	background-image: url(../images/btnPopout.png);
	cursor: pointer;
	height: 17px;
	width: 20px;
	text-indent: -9999px;
	display: inline;
	float: right;
}
.radioPlayer  #radioSelector  .btn {
	background-image: url(../images/bkgDeselected.png);
	background-repeat: no-repeat;
	height: 24px;
	width: 83px;
	display: inline;
	float: left;
	color: #FFFFFF;
	font: 12px "Trebuchet MS", Arial, Verdana, sans-serif;
	margin-top: 1px;
	padding-top: 5px;
	text-align: center;
	cursor: pointer;
}
.radioPlayer  #radioSelector .selected {
	background-image: url(../images/bkgSelected.png);
	background-repeat: no-repeat;
	height: 24px;
	width: 104px;
	display: inline;
	float: left;
	font: bold 14px "Trebuchet MS", Arial, Verdana, sans-serif;
	color: #006600;
	padding-top: 6px;
	text-align: center;
}