/* CSS Document */
.clear{ clear:both; }

body{
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	background-color: #0082CB;
}

#wrapper{
	margin: 10px auto 10px auto;
	padding: 10px 11px 12px 10px;
	width: 520px;
	height: 439px;
	background-image: url(../images/grfx/grid_gray.gif);
}

#titleMplay{
	float: left;
	margin: 0;
	width: 520px;
	height: 40px;
	font-size: 6px;
	color:#000000;
	text-align: right;
	background: #000000 url(../images/grfx/title_mplay.gif) no-repeat;
}

#player{
	float: left;
	padding: 10px;
	width: 220px;
	height: 210px;
	background-color: #FFFFFF;
}

#videoDetails{
	float: right;
	padding: 20px;
	width: 230px;
	height: 190px;
}

#videoDetails #videoname{
	margin: 0 0 5px 0;
	padding: 0;
	font-size: 11px;
	font-weight: bold;
}

#videoDetails #artistname{
	margin: 0; padding: 0;
	font-size: 11px;
	font-weight: normal;
}

#trackDetails{
	float: left;
	margin: 0;
	padding: 0 10px 10px 10px;
	width: 220px;
	height: 160px;
	font-size: 10px;
	background:#FFF url(../images/grfx/bg_real.gif) bottom right no-repeat;
	color: #000;
}

#trackDetails img{
	float: left;
}

#trackDetails #recordMenu{
	float: left;
	width: 50px;
	height: 100px;
	overflow: hidden;
}

#trackDetails h3{
	float: left;
	margin: 0; padding: 0;
	width: 210px;
	font-size: 10px;
	font-weight: normal;
}

#trackDetails #recordname{
	margin: 10px 0 0 0;
	font-weight: bold;
}

#trackDetails #referencenumber{
	font-weight: bold;
}

#tracklist{
	float: right;
	margin: 0; padding: 0;
	width: 270px;
	height: 400px;	
}

#tracklist ul{
	float: left;
	margin: 0; padding: 0 0 0 10px;
	width: 230px;
	height: 360px;
	list-style: none;
}

#tracklist li{
	margin: 0; padding: 0;
}

#tracklist li a{
	display: block;
	width: 250px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
}

#tracklist li a:hover{
	color: #FFF;
	background-color: #000000;
}

#tracklist li .selected{
	color: #FFF;
	background-color: #000000;
}

.btnListen, .btnListenDisabled, .btnBuy, .btnBuyDisabled, .btnDownload, .btnDownloadDisabled{
	display: block;
	width: 50px;
	height: 30px;
	margin-bottom: 5px;
	overflow: hidden;
}

.btnListenDisabled, .btnBuyDisabled, .btnDownloadDisabled{
	display: block;
	padding: 0 0 0 50px;
}

.btnListen a, .btnBuy a, .btnDownload a{ display: block; padding-top:30px;  width:30px; height: 30px;}

.btnListen a{ background: url(../images/grfx/btn_listen.gif) no-repeat; }
.btnBuy a{ background: url(../images/grfx/btn_buy.gif) no-repeat; }
.btnDownload a{ background: url(../images/grfx/btn_download.gif) no-repeat; }

.btnListen a:hover{ width: 50px; background-image: url(../images/grfx/btn_listen_rollover.gif);}
.btnBuy a:hover{ width: 50px; background-image: url(../images/grfx/btn_buy_rollover.gif);}
.btnDownload a:hover{ width: 50px; background-image: url(../images/grfx/btn_download_rollover.gif);}

.btnListenDisabled{ background: url(../images/grfx/btn_listen_off.gif) no-repeat; }
.btnBuyDisabled{ background: url(../images/grfx/btn_buy_off.gif) no-repeat; }
.btnDownloadDisabled{ background: url(../images/grfx/btn_download_off.gif) no-repeat; }