@charset "utf-8";
/* CSS Document */


body {font:bold 11px "Trebuchet MS", Arial, Helvetica, sans-serif; background:#efefef url(../images/bg_main.jpg) repeat-x;color:#4d4c4c;margin:0;padding:0; }
img { border:0;}
ul { list-style:none}
form , input{ margin:0px;}
iframe { width:500px; height:450px; border:none; margin:0px}
#container {width: 900px; margin:0px auto; padding:20px 0px; text-align: left;}
strong { font-size: larger; font-weight:bolder}

a {color:#036cfa; text-decoration:none}
a:visited {color:#036cfa; text-decoration:none}
a:link {color:#036cfa; text-decoration:none}
a:hover { color:#fe4902}
br { margin:0px}
 a.goodlink{ color:#036cfa; font-weight:bold; padding:4px; display:block; text-align:right; float:right; font-size:12px}
 a.goodlink span { color:#fe4902}
 a.goodlink:hover {color:#fe4902}
 
p { margin:0px }
.cl { clear:both; font-size:9px}

a.btn-download { display:block; float:left; background: url(../images/btn_join.png) no-repeat; width:266px; height:55px; text-indent:-999999px; overflow:hidden}
a.btn-download:hover { background: url(../images/but_download-music.png) 0 -70px no-repeat;}

a.btn-join{ display:block; float:left;  background: url(../images/btn_join.png) no-repeat; width:214px; height:46px; margin:20px 0; text-indent:-999999px; overflow:hidden}
a.btn-join:hover { background: url(../images/btn_join.png) 0 -60px no-repeat;}


div#header { background:#5a6071 url(../images/bg_main.png) repeat-x; margin:0}
div#header div.inner {margin:0 auto; width:900px; }
div#header div.inner a.logo { width:279px;height:79px; background: url(../images/logo.png) no-repeat; float:left; display:block; overflow:hidden; text-indent:-999999px; overflow:hidden}



#header .inner { position:relative; width:900px;}
#header #nav { width:550px; float:right}
#header #nav a{display:block;float:left; padding:8px 15px; margin:16px 9px; color:#2fbdf6; font-weight:bold; font:bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif}
#header #nav a:hover { color:#fe4902}

h1 { color:#444a5a; font:34px "Trebuchet MS", Arial, Helvetica, sans-serif; letter-spacing:-1px; margin:0}
h2.h1alike { color:#444a5a; font:34px "Trebuchet MS", Arial, Helvetica, sans-serif; letter-spacing:-1px; margin:0}
h2 { font:normal 22px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#737572; letter-spacing:-1px; margin:0 0 6px; line-height:22px}
h3 { font:bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif; margin:0 0 10px; color:#646c7e; letter-spacing:-1px }
h5 { font:bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif; margin:0 0 10px; color:#646c7e; letter-spacing:-1px; margin:16px 0 4px; }

div#index { background:url(../images/bg_index.jpg) no-repeat; width:900px; height:294px; padding:0 0 20px 0; position:relative}
#index div.topmessage { position:absolute; left:210px; top:20px; width:388px}
div.topmessage h1 { letter-spacing:-2px; text-align:right}
div.topmessage h2 { font:italic 20px  bold  "Trebuchet MS", Arial, Helvetica, sans-serif; color:#646c7e; letter-spacing:-1px; text-align:right; margin:0 0 6px; line-height:18px}
div.topmessage p { width:360px; text-align:right; float:right}



div#index #genres {
	position: absolute;
	top:31px;
	left:625px;
	width:240px;
	height:160px;
	overflow:hidden;
	display:block;
	font-size:11px
}
div#index #genres ul {float:left; width:70px; margin:0; padding:0;}
div#index #genres li { background:url(../images/arrow.png) -4px -38px no-repeat; display:block; padding:0 0 0 8px; }



div#index a.btn-download { display:block; float:left; position:absolute; left:618px; top:220px; background: url(../images/but_download-music.png) no-repeat; width:266px; height:55px; text-indent:-999999px; overflow:hidden}
div#index a.btn-download:hover { background: url(../images/but_download-music.png) 0 -70px no-repeat;}

#index div#mycarousel{ position:absolute; left:30px; top:200px}
.carousel-component { position:relative; overflow:hidden;display:none;padding:0px 10px;margin:0px;}			
.carousel-component ul.carousel-list { width:10000000px; position:relative; z-index:1; }
.carousel-component .carousel-list li {  float:left; list-style:none; overflow:hidden; }
.carousel-component .carousel-vertical li { margin-bottom:0px; float:left; clear:left; overflow:hidden; display:block;}
.carousel-component .carousel-clip-region {  overflow:hidden; margin:0px auto; padding:5px 4px; position:relative; background:url(../images/scroll_bg.gif) no-repeat;}
.carousel-component ul.carousel-list { margin:0px; padding:0px; line-height:0px;}
.carousel-component .carousel-list li { text-align:center; margin:0px; padding:0px; }
/*-----*/
.carousel-component .carousel-list li { margin:0px; width:73px; height:73px; }
.carousel-component .carousel-list li a { display:block; border:1px solid #fff; outline:none; }
.carousel-component .carousel-list li a:hover { border: 1px solid #aaaaaa; }
.carousel-component .carousel-list li img { display:block; }							
.carousel-component .carousel-prev { position:absolute; top:0px; z-index:3; cursor:pointer;  left:0px; }
.carousel-component .carousel-next { position:absolute; top:0px; z-index:3; cursor:pointer; right:0px; }


div#middle { background:#fff}
#middle div.inner { background:url(../images/bg_mid.png) no-repeat 0 14px ; margin:0 auto; width:900px; height:143px; position:relative;  }
div.songs { position:absolute; top:15px; left:115px; width:390px}
div.ipod { position:absolute; top:40px; left:705px; width:185px; font-size:19px; color:#63727b; letter-spacing:-1px}


div.col-left { width:550px; float:left; padding:0 0 0 20px}


div.col-right { width:300px; float:right;}


div.col-right .white-col { background: #FFF url(../images/col_w1.png) top no-repeat}
div.col-right .white-col .insider { background:url(../images/col_w2.png) bottom no-repeat; padding:14px 14px}

.rated { background: url(../images/rated.png) 18px 0 no-repeat; padding:24px;  }



div.col-right .grey-col {background: #ebebeb url(../images/col_g1.png) top no-repeat; width:271px}
div.col-right .grey-col .insider { background:url(../images/col_g2.png) bottom no-repeat; padding:14px 14px}

div.col-right .grey-col ul { padding:0; margin:0}
div.col-right .grey-col ul li { background:url(../images/arrow.png) 4px 6px no-repeat; padding:2px 0 2px 25px; margin:0; display:block}


.grey-col ul { margin:0}


div.col-left ul.features { margin:0 0 0 20px; padding:0; width:450px}
div.col-left ul.features li { padding:4px 0 9px 60px; margin:9px 0; display:block}




#login { width:450px; border:#8ec33c 1px solid; padding:15px}

#footer { margin:16px 0 0; height:123px; background: url(../images/bg_footer.png) no-repeat; padding:9px 20px; color:#b4bbbe;}
#footer #nav { width:430px; float:left}
#footer #nav a{display:block;float:left; padding:6px 12px 6px 9px; margin:13px 4px; color:#2fbdf6; font-weight:bold; font:bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif; border-right:#b4bbbe 1px solid}
#footer #nav a:hover { color:#fe4902}