@import url("../js/jquery-ui-1.7.2/css/smoothness/jquery-ui-1.7.2.custom.css");

#radioHolder {
	height: 535px;
	width: 740px;
	position: relative;
	margin: 10px auto;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	zoom: 1;
}

.bkg0 {
	background-image: url(../images/bkg0.jpg);
}

.bkg1 {
	background-image: url(../images/bkg1.jpg);	
}

.bkg2 {
	background-image: url(../images/bkg2.jpg);	
}

.bkg3 {
	background-image: url(../images/bkg3.jpg);	
}

.bkg4 {
	background-image: url(../images/bkg4.jpg);	
}

#radio0 .thumb {
	background-image: url(../images/imgThumbGeral.png);	
}

#radio1 .thumb {
	background-image: url(../images/imgThumbCastelo.png);	
}

#radio2 .thumb {
	background-image: url(../images/imgThumbCocorico.png);	
}

#radio3 .thumb {
	background-image: url(../images/imgThumbIlha.png);	
}

#radio4 .thumb {
	background-image: url(../images/imgThumbVila.png);	
}

#radioHolder #controls {
	position: absolute;
	left: 42px;
	top: 131px;
	width: 660px;
	height: 45px;
}

#radioHolder #controls a:active,
#radioHolder #controls a:active #ico {
	background-position: 1px 1px;
	_background-position: 0px 0px;
}

#radioHolder #controls a#popout:active #text {
	left: 39px;
	top: 11px;
}

#radioHolder #controls #back {
	background-image: url(../images/btnBack.png);
	height: 45px;
	width: 45px;
	position: absolute;
	left: 0px;
	top: 0px;
	text-indent: -9999px;
	background-repeat: no-repeat;
}

#radioHolder #controls #next {
	background-image: url(../images/btnNext.png);
	height: 45px;
	width: 45px;
	position: absolute;
	left: 167px;
	top: 0px;
	text-indent: -9999px;
	background-repeat: no-repeat;
}

#radioHolder #controls #play {
	background-image: url(../images/btnPlay.png);
	background-repeat: no-repeat;
	height: 45px;
	width: 100px;
	position: absolute;
	left: 57px;
	top: 0px;
}

#radioHolder #controls #play #ico {
	text-indent: -9999px;
	background-repeat: no-repeat;
	height: 18px;
	width: 16px;
	position: absolute;
	left: 45px;
	top: 15px;
	cursor: pointer;
}

#radioHolder #controls #play .play {
	background-image: url(../images/icoPlay.png);
	_background-image: url(../images/icoPlay.gif);
}

#radioHolder #controls #play .pause {
	background-image: url(../images/icoPause.png);
	_background-image: url(../images/icoPause.gif);
}

#radioHolder #controls #progress {
	position: absolute;
	left: 222px;
	background-image: url(../images/bkgProgress.png);
	height: 45px;
	width: 212px;
}

#radioHolder #controls #progress #scrollMask {
	font: bold 11px Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	position: absolute;
	left: 10px;
	top: 7px;
	width: 130px;
	overflow: hidden;
}

#radioHolder #controls #progress #scrollMask #songName {
	white-space: nowrap;
	display: inline;
	position: relative;
}

#radioHolder #controls #progress #time {
	position: absolute;
	font: bold 11px Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	top: 7px;
	right: 10px;
}

#radioHolder #controls #progress #progressBar {
	position: absolute;
	width: 192px;
	bottom: 7px;
	left: 10px;
	right: 10px;
	height: 5px;
	font: bold 11px Arial, Helvetica, sans-serif;
}

#radioHolder #controls #volume {
	position: absolute;
	left: 445px;
	background-image: url(../images/bkgVolume.png);
	height: 45px;
	width: 101px;
}

#radioHolder #controls #volume #text {
	font: bold 11px Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	left: 25px;
	top: 7px;
	position: absolute;
	text-align: center;
}

#radioHolder #controls #volume #volumeBar {
	position: absolute;
	font: bold 11px Arial, Helvetica, sans-serif;
	background: #ccc;
	width: 65px;
	color: #FFFFFF;
	height: 5px;
	left: 25px;
	bottom: 7px;
	right: 9px;
}

#radioHolder #controls #popout {
	position: absolute;
	left: 555px;
	background-image: url(../images/bkgPopout.png);
	height: 45px;
	width: 101px;
	text-decoration: none;
}

#radioHolder #controls #popout #text {
	position: absolute;
	left: 38px;
	font: bold 11px/13px Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	top: 10px;
}

#radioHolder #channels,
#radioHolder #playlist,
#radioHolder #lyric {
	position: absolute;
	height: 230px;
	width: 210px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	overflow: hidden;
}

#radioHolder #channels a { cursor: pointer; }

#radioHolder #channels a .item .description { _font-weight: normal !important; }
#radioHolder #channels a:hover .item .description { _font-weight: bold !important; }

#radioHolder #channels {
	left: 42px;
	top: 186px;
}

#radioHolder #playlist {
	left: 264px;
	top: 186px;
}

#radioHolder #lyric {
	left: 486px;
	top: 186px;
}

#radioHolder #channelsScroll .ui-slider-handle,
#radioHolder #playlistScroll .ui-slider-handle,
#radioHolder #lyricScroll .ui-slider-handle {
	width: 10px;
	height: 25px;
	border: none;
	background: orange none;
	left: 0px;
}

#radioHolder #controls #progress #progressBar .ui-slider-handle,
#radioHolder #controls #volume #volumeBar .ui-slider-handle {
	width: 9px;
	height: 9px;
	border: none;
	background: transparent url(../images/imgSliderHandle.gif) no-repeat;
	top: -2px;
	margin-left: -4px;
}

#radioHolder #controls #progress #progressBar .ui-slider-range-min,
#radioHolder #controls #volume #volumeBar .ui-slider-range-min {
	height: 5px !important;
	overflow: hidden;
	background: #830000 none;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

#radioHolder #channelsScroll.ui-slider,
#radioHolder #playlistScroll.ui-slider,
#radioHolder #lyricScroll.ui-slider {
	background-color: transparent;
	background-image: url(../images/bkgOpacity.png);
	background-repeat: repeat;
	_background: #fff none; 
	border: none;
} 

#radioHolder #controls #volume #volumeBar.ui-slider {
	border: none;
	background: #FFF none;
}

#radioHolder #controls #progress #progressBar.ui-slider {
	border: none;
	background-image: url(../images/bkgLoaded.gif);
	background-position: right center;
}

#radioHolder .scroll {
	position: absolute;
	height: 195px;
	width: 10px;
	top: 205px;
}

#radioHolder #channelsScroll {
	right: 510px;
	z-index: 501;
}

#radioHolder #playlistScroll {
	right: 271px;
	z-index: 502;
}

#radioHolder #lyricScroll {
	right: 50px;
	z-index: 503;
}

#radioHolder #channels a { text-decoration: none; }


#radioHolder #channels .item {
	clear: both;
	height: 40px;
	padding: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

#radioHolder #channels .item .thumb {
	float: left;
	border-width: 0px;
	width: 40px;
	height: 40px;
}

#radioHolder #channels .item .title {
	color: #FD8304;
	font: bold 14px Arial, Helvetica, sans-serif;
	margin: 7px 0px 0px 50px;
}

#radioHolder #channels .item .description {
	font: bold 11px Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	margin-top: 0px;
	margin-left: 50px;
	margin-bottom: 0px;
}

#radioHolder #playlist #playlistHolder {
	overflow: hidden;
	height: 192px;
}

#radioHolder #playlist .title {
	font: bold 14px Arial, Helvetica, sans-serif;
	color: #F18A00;
	margin: 11px;
}

#radioHolder #playlist #playlistHolder .item {
	font: bold 11px Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	clear: both;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	padding: 5px 20px 5px 10px;
}

#radioHolder #channels .item:hover,
#radioHolder #channels .selected,
#radioHolder #playlist #playlistHolder .item:hover,
#radioHolder #playlist #playlistHolder .selected {
	background-image: url(../images/bkgSelected.png);
	background-repeat: repeat-y;
	_background: transparent none;
	_color: #FD8304;
}

#radioHolder #lyric .title {
	font: bold 14px Arial, Helvetica, sans-serif;
	color: #FD8304;
	margin: 10px 20px 10px 10px;
}

#radioHolder #lyric #lyricHolder {
	font: bold 11px Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	padding-right: 20px;
	padding-left: 10px;
	overflow: hidden;
	height: 177px;
}