<div class="common_second_nav">
    	<a id = "auto-ugc-hotact-back" class="second_nav_back" href="javascript:gotoBack();"></a>
    	<a id="auto-ugc-hotact-backhome" class="second_nav_home" href="#music-show"></a>
    	<div class="hot-acts-state">
    		<span id="checked-state" type="i18n" key="all_state"></span>
    		<img src="resources/css/style-yellow/images/daosanjiao.png" width="12px">
    	</div>
    	<h1 id = "auto-ugc-hotact-tittle" class="second_nav_h1" type="i18n" key="common_ugcindex_hotacts_mobile"></h1>
    </div>
    <div class="acts-search-box">
        <div class="acts-txt">
        	<a type="i18n" key="common_search" href="javascript:void(0)"></a>
        </div>
        <div class="acts-input">
        	<input placeholder="Search Acts" />
        </div>
	</div>
	<div class="ugc-acts ugc-songs">
		<ul class="hotactslist">
			
		</ul>
	</div>

<div class="ugc-body">
		<div class="ugc-banner">
			<div class="ugc-banner-bg">
				<img src="resources/css/style-yellow/images/ugc-banner-bg.jpg">
				<a id = "auto-show-activity-start-here" class="ugc-start" href="#upload-ugcmusic" title="start here" type="i18n" key="ugc_start_here">START HERE</a>
				<a id = "auto-show-activity-view-contents" class="ugc-view" href="#show-activity-list" title="view contents" type="i18n" key="ugc_view_content">View Content</a>
			</div>
		</div>
		<div class="ugc-con ugc-mb20">
			<div class="ugc-hd">
				<h1 id = "auto-show-activity-campaign-rules" type="i18n" key="ugc_campaign_rules"></h1>
			</div>
			<div class="campaign-rules fn-clear">
					<div class="campaign-rules-item">
						<div class="campaign-rules-item-icon">
							<img id = "auto-show-activity-upload" src="resources/css/style-yellow/images/ugc-activity-upload.png">
						</div>
						<div class="campaign-rules-item-text">
							<p id = "auto-show-activity-campaign-uploads">UPLOAD & SHARE THE MUSIC</p>
							<div id = "auto-show-activity-campaign-uploadms">Upload your music content on MTN Music+; you will receive a link via SMS upon successful content upload. Share this content link on Facebook, Twitter and Instagram to get family and friends to click, listen and like.</div>
						</div>
					</div>
					<div class="campaign-rules-item">
						<div class="campaign-rules-item-icon">
							<img id = "auto-show-activity-featurre" src="resources/css/style-yellow/images/ugc-activity-feature.png">
						</div>
						<div class="campaign-rules-item-text">
							<p id = "auto-show-activity-FEATURED-RADIO">FEATURED ON RADIO</p>
							<div id = "auto-show-activity-likes-weekly">Music upload with the highest likes weekly will be featured on MTN sponsored Radio programs across Nigeria</div>
						</div>
					</div>
					<div class="campaign-rules-item">
						<div class="campaign-rules-item-icon">
							<img id = "auto-show-activity-expose" src="resources/css/style-yellow/images/ugc-activity-expose.png">
						</div>
						<div class="campaign-rules-item-text">
							<p>EXPOSED ON PORTALS</p>
							<div>Amongst the cumulative pool of entries, 10 top entries with the highest likes will be selected. A panel of producers and/music directors (MTN Ambassadors) will select the top 5. The selected 5 songs will be uploaded on MTN music+ platform for one week to gather likes.</div>
						</div>
					</div>
					<div class="campaign-rules-item">
						<div class="campaign-rules-item-icon">
							<img id = "auto-show-activity-win" src="resources/css/style-yellow/images/ugc-activity-win.png">
						</div>
						<div class="campaign-rules-item-text">
							<p>WIN A SALOON CAR</p>
							<div>The person whose song has the highest likes after a week wins a mid-sized saloon car.</div>
						</div>
					</div>
			</div>
					
			<p class="ugc-shares">
				<a id = "auto-show-activity-shares-facebook" class="ugc-icon ugc-icon-facebook" href="#"></a>
				<span id = "auto-show-activity-shares-line" class="ugc-icon ugc-icon-line"></span>
				<a id = "auto-show-activity-shares-twitter" class="ugc-icon ugc-icon-twitter" href="#"></a>
				
			</p>
		</div>
	</div>

<div class="group new-playlist-group">
    	<div class="playlist-title"><p id="playlist-tittle-all" type="i18n" key="common_playlist_all"></p></div>
        <div class="big-img">
            <ul class="mainlist one-line playlist_all"></ul>
        </div>
        <div class="playlist-more"><a id="playlist-all-more" href="#music-hearthis?all" type="i18n" key="click_to_view_more"></a></div>
    </div>
    <div class="group new-playlist-group">
    	<div class="playlist-title playlist-title-new"><p id="playlist-tittle-recommend" type="i18n" key="common_playlist_recommend"></p></div>
        <div class="big-img">
            <ul class="mainlist one-line playlist_recommend"></ul>
        </div>
        <div class="playlist-more"><a id="playlist-recommend-more" href="#music-hearthis?recommend" type="i18n" key="click_to_view_more"></a></div>
    </div>
    
    <div class="group new-playlist-group">
    	<div class="playlist-title playlist-title-new"><p id="playlist-tittle-mtn" type="i18n" key="common_playlist_mtn"></p></div>
        <div class="big-img">
            <ul class="mainlist one-line playlist_mtn"></ul>
        </div>
        <div class="playlist-more"><a id="playlist-mtn-more" href="#music-hearthis?mtn" type="i18n" key="click_to_view_more"></a></div>
    </div>
    <div class="group new-playlist-group">
    	<div class="playlist-title playlist-title-new"><p id="playlist-tittle-dj" type="i18n" key="common_playlist_dj"></p></div>
        <div class="big-img">
            <ul class="mainlist one-line playlist_dj"></ul>
        </div>
        <div class="playlist-more"><a id="playlist-dj-more" href="#music-hotvibe?dj" type="i18n" key="click_to_view_more"></a></div>
    </div>
    <div class="group new-playlist-group">
    	<div class="playlist-title playlist-title-new"><p id="playlist-tittle-fans" type="i18n" key="common_playlist_fans"></p></div>
        <div class="big-img">
            <ul class="mainlist one-line playlist_fans"></ul>
        </div>
        <div class="playlist-more"><a id="playlist-fans-more" href="#music-hotvibe?fan" type="i18n" key="click_to_view_more"></a></div>
    </div>

<div class="common_second_nav">
    	<a id = "auto-music-hotvibe-back" class="second_nav_back" href="javascript:gotoBack();"></a>
    	<a id = "auto-music-hotvibe-second-user" class="second_nav_user fr" href="#myaccount"></a>
    	<a id = "auto-music-hotvibe-associate" class="second_nav_search fr" href="#associate"></a>
    	<h1 id = "auto-music-hotvibe-h1" class="second_nav_h1"></h1>
    </div>
    <div class="group new-playlist-group">
        <div class="big-img" id="panelList">
            <div id="djhotvibecontent" style="display:none">
                <ul class="mainlist djhotvibelist one-line"></ul>
            </div>
            <div id="fanhotvibecontent">
                <ul class="mainlist fanhotvibelist one-line"></ul>
            </div>
            <div id="hothotvibecontent" style="display:none">
                <ul class="mainlist hothotvibelist one-line"></ul>
            </div>
            <div id="newhotvibecontent">
                <ul class="mainlist newhotvibelist one-line"></ul>
            </div>
        </div>
    </div>

<div class="common_second_nav">
    	<a id = "auto-hotvibe-back" class="second_nav_back" href="javascript:gotoBack();"></a>
    	<a id = "auto-hotvibe-publisher-user" class="second_nav_user fr" href="#myaccount"></a>
    	<a id = "auto-hotvibe-publisher-search" class="second_nav_search fr" href="#associate"></a>
    	<h1 id = "auto-hotvibe-publisher-h1"  class="second_nav_h1"></h1>
    </div>
    <div class="iterm-box notice-bg for-btn clear appNotice"  style="display:none;">
        <table style="width:100%;" cellspacing="0" cellpadding="0">
        <tr>
            <td class="closeTD" >
                <div class="close" style="float:none;"></div>
            </td>
            <td width="35%">
                <div class="notice-txt">
                    <p id = "auto-hotvibe-publisher-listenapp" type="i18n" key="common_listenapp">
                    </p>
                </div>
            </td>
            <td>
                <div class="act-btn openapp" type="i18n" key="common_openapp">
                </div>
            </td>
        </tr>
        </table>
    </div>
    <div class="music-box clear">
        <div class="music-img">
        	<div class="playlist-play play play-category"></div>
            <div class="mark-bar"><div class="mark-txt"></div></div>
        </div>
        <div class="music-des">
            <div class="music-des-top clear">
                <p id = "auto-hotvibe-publisher-des" class="title break"></p>
            </div>
            
            <div class="playlist-desc"><span id = "auto-hotvibe-publisher-intro" type="i18n" key="common_intro"></span> : <span id = "auto-hotvibe-publisher-content" class="desc-content"></span></div>
        </div>
    </div>
    
    <div class="row playlist-icon">
    	<div class="span6 border-r fav2">
    		<i class="icon-fav"></i> <span id="auto-hotvibe-publisher-favorite" type="i18n" key="common_favorite"></span>
    	</div>
    	<div class="span6 share">
    		<i class="icon-share"></i> <span id="auto-hotvibe-publisher-share" type="i18n" key="common_share"></span>
    	</div>
    </div>
    <div class="group">
        
        <div id="panelList">
            <ul class="mainlist hearthisdetailcontent"></ul>
        </div>
    </div>

<div class="common_second_nav">
    	<a id = "auto-music-hotvibe-detail-back" class="second_nav_back" href="javascript:gotoBack();"></a>
    	<a id = "auto-music-hotvibe-detail-user" class="second_nav_user fr" href="#myaccount"></a>
    	<a id = "auto-music-hotvibe-detail-search" class="second_nav_search fr" href="#associate"></a>
    	<h1 id = "auto-music-hotvibe-detail-h1" class="second_nav_h1"></h1>
    </div>
    
    <div class="iterm-box notice-bg for-btn clear appNotice"  style="display:none;">
        <table style="width:100%;" cellspacing="0" cellpadding="0">
        <tr>
            <td class="closeTD" >
                <div class="close" style="float:none;"></div>
            </td>
            <td width="35%">
                <div class="notice-txt">
                    <p id = "auto-music-hotvibe-detail-listenapp" type="i18n" key="common_listenapp">
                    </p>
                </div>
            </td>
            <td>
                <div class="act-btn openapp" type="i18n" key="common_openapp">
                </div>
            </td>
        </tr>
    </table>
    </div>
    <div class="music-box clear">
        <div class="music-img">
        	<div class="playlist-play play play-playlist"></div>
            <div class="mark-bar"><div class="mark-txt"></div></div>
        </div>
        <div class="music-des">
            <div class="music-des-top clear">
                <p class="title break"><span id = "auto-music-hotvibe-detail-hotvibe-title" class="hotvibe-title"></span><span id = "auto-music-hotvibe-detail-color-txt" class="color-txt"></span></p>
            </div>
            
            <div class="publisher"></div>
            <div class="playlist-desc"><span id = "auto-music-hotvibe-detail-common-intro" type="i18n" key="common_intro"></span> : <span id = "auto-music-hotvibe-detail-desc-content" class="desc-content"></span></div>
            
        </div>
    </div>
    <div class="row playlist-icon">
    	<div class="span4 border-r fav2">
    		<i class="icon-fav"></i> <span id = "auto-music-hotvibe-detail-favorite" type="i18n" key="common_favorite"></span>
    	</div>
    	<div class="span4 border-r praise">
    		<i class="icon-good"></i> <span id = "auto-music-hotvibe-detail-favorite" class="count"></span>
    	</div>
    	<div class="span4 share">
    		<i class="icon-share"></i> <span id = "auto-music-hotvibe-detail-favorite" type="i18n" key="common_share"></span>
    	</div>
    </div>
    <div class="group">
    	
        <div id="panelList">
            <ul class="mainlist hotvibedetailcontent"></ul>
        </div>
    </div>

<div class="common_second_nav">
    	<a id = "auto-music-albums-back" class="second_nav_back" href="javascript:gotoBack();"></a>
    	<a id = "auto-music-albums-search" class="second_nav_search fr" href="#associate"></a>
    	<h1 id = "auto-music-albums-tittle" class="second_nav_h1"></h1>
    </div>
    <div id="albums-content">
    <div id="subNav">
    	<ul index="1" class="navMenu" id="navListPrev">
            <li style="width:49%" class="nav-focus"><a id = "auto-music-albums-new" href="#music-albums?new" type="i18n" key="music_new"></a></li>
            <li style="width:48%"><a id = "auto-music-albums-hot" href="#music-albums?hot" type="i18n" key="music_hot"></a></li>
        </ul>
	</div>
    </div>
    <div class="group new-music-albums-group">
        <div id="panelList" class="big-img">
        	<div id="newcontent" style="display:none;">
                <ul class="mainlist newlist"></ul>
            </div>
            <div id="hotcontent" style="display:none;">
                <ul class="mainlist hotlist"></ul>
            </div>
        </div>
    </div>

<div class="common_second_nav">
    	<a id = "auto-music-album-detail-back" class="second_nav_back" href="javascript:gotoBack();"></a>
    	<a id = "auto-music-albums-detail-search" class="second_nav_home " href="#index-page"></a>
    	<h1 id = "auto-music-albums-detail-search" class="second_nav_h1"></h1>
    </div>
    <div class="iterm-box notice-bg for-btn clear appNotice"  style="display:none;">
        <table style="width:100%;" cellspacing="0" cellpadding="0">
        <tr>
            <td class="closeTD" >
                <div class="close" style="float:none;"></div>
            </td>
            <td width="35%">
                <div class="notice-txt">
                    <p type="i18n" key="common_listenapp">
                    </p>
                </div>
            </td>
            <td>
                <div class="act-btn openapp" type="i18n" key="common_openapp">
                </div>
            </td>
        </tr>
    </table>
    </div>
   <div class="music-box clear">
       <div class="music-img">
           <div class="mark-bar"><div class="mark-txt"></div></div>
       </div>
       <div class="music-des">
           <div class="music-des-top clear">
               <p id = "auto-music-album-detail-des" class="title break"></p>
           </div>
           <p id = "auto-music-album-detail-artisname" class="album-artistname"></p>
           
        </div>
    </div>
    
    <div class="row playlist-icon">
    	<div id="favAct" class="span6 border-r fav2">
    		<i class="icon-fav"></i> <span id = "auto-music-album-detail-fav" type="i18n" key="common_favorite"></span>
    	</div>
    	<div class="span6 share">
    		<i class="icon-share"></i> <span id = "auto-music-album-detail-share" type="i18n" key="common_share"></span>
    	</div>
    </div>
    <div class="group detail-group">
    	
        <div id="panelList">
            <ul class="mainlist songlist"></ul>
        </div>
    </div>
    <div class="group">
    	
        <div>
            <ul class="mainlist DNAlist"></ul>
        </div>
    </div>

<div class="common_second_nav">
    	<a id = "auto-music-artist-detail-back" class="second_nav_back" href="javascript:gotoBack();"></a>
    	<a id = "auto-music-artist-detail-backhome" class="second_nav_home " href="#index-page"></a>
    	<h1 id = "auto-music-artist-detail-tittle" class="second_nav_h1"></h1>
    </div>
    <div class="iterm-box notice-bg for-btn clear appNotice"  style="display:none;">
       <table style="width:100%;" cellspacing="0" cellpadding="0">
        <tr>
            <td class="closeTD" >
                <div class="close" style="float:none;"></div>
            </td>
            <td width="35%">
                <div class="notice-txt">
                    <p type="i18n" key="common_listenapp">
                    </p>
                </div>
            </td>
            <td>
                <div class="act-btn openapp" type="i18n" key="common_openapp">
                </div>
            </td>
        </tr>
    </table>
    </div>
    <div class="music-box clear">
        <div class="music-img"></div>
        <div class="music-des">
            <p id = "auto-artistdetail-artistname" class="title break"></p>
            <div class="artist-box">
            	<div class="span6 border-r gray-txt">
            		<span class="gray-txt" type="i18n" key="music_albums"></span>:
		    	</div>
		    	<div class="span6 gray-txt">
		    		<span class="gray-txt" type="i18n" key="common_songs"></span>:
		    	</div>
            </div>
            <div class="icon-box">
            	<div id="favAct" class="span6 fav2">
		    		<i class="icon-fav"></i> <span id="auto-music-artist-detail-favorite" type="i18n" key="common_favorite"></span>
		    	</div>
		    	<div id="shareAct" class="span6 share">
		    		<i class="icon-share"></i> <span id = "auto-music-artist-detail-share" type="i18n" key="common_share"></span>
		    	</div>
            </div>
        </div>
    </div>
    <div id="albums-content">
	    <div id="subNav">
	    	<ul index="1" class="navMenu" id="navListPrev">
	            <li style="width:49%" class="nav-focus"><a id="artistSongs" type="i18n" key="common_songs"></a></li>
	            <li style="width:48%"><a id="artistAlbums" type="i18n" key="music_albums"></a></li>
	        </ul>
		</div>
	</div>
	
    <div class="group artistSongs">
        <div id="panelList">
            <ul class="mainlist artistSongsList"></ul>
        </div>
    </div>
    <div class="group artistAlbums display">
        <div>
            <ul class="mainlist artistAlbumsList"></ul>
        </div>
    </div>
    <div class="group artistDNAs display">
        <div>
            <ul class="mainlist one-line artistLikeList"></ul>
        </div>
    </div>

<div class="common_second_nav">
    	<a id = "auto-search-back" href="javascript:gotoBack();" class="second_nav_back"></a>
    	<h1 id = "auto-search-tittle" class="second_nav_h1">SEARCH</h1>
    </div>
    <div id="search" class="search-box">
        <div id="searchBtnBox">
            <div id="searchBtn"><a href="javascript:void(0)"  key="common_search" type="i18n"></a></div>
        </div>
        <div id="searchInputBox"><input id="auto_search_searchInput" type="text" value="" placeholder=""></div>
    </div>
    
	<div id="subNav">
        <ul id="navListPrev" class="navMenu" index="1">
            <li id="generalTab" class="generalTab" tab="general" style="width:19%;"><a style="font-size: 14px;" href="javascript:void(0)" key="common_general" type="i18n"></a></li>
            <li id ="songTab" class="songTab" tab="song" style="width:18%"><a style="font-size: 14px;" href="javascript:void(0)" key="common_songs" type="i18n"></a></li>
            <li id="albumTab" class="albumTab" tab="album" style="width:18%"><a style="font-size: 14px;" href="javascript:void(0)" key="music_albums" type="i18n"></a></li>
            <li class="playListTab" id="playListTab" tab="playList" style="width:19%"><a style="font-size: 14px;" href="javascript:void(0)" key="common_playlists" type="i18n"></a></li>
            <li class="artistTab" id="artistTab" tab="artist" style="width:18%"><a style="font-size: 14px;" href="javascript:void(0)" key="music_artists" type="i18n"></a></li>
        </ul>
    </div>
	<div id="genaralSearch" class="searchArea">
		<div class="group artist_group" style="display:none;">
			<div class="big-title">
				<div class="more more-text" tab="artist"><a style="font-size: 14px;" href="javascript:void(0)" type="i18n" key="view_more"></a></div>
				<h1 key="common_artist" type="i18n"></h1>
			</div>
			<div class="search-content radio">
				<ul class="mainlist searchArtistList">
				</ul>
			</div>
		</div>
		<div class="group album_group" style="display:none;">
			<div class="big-title">
				<div class="more more-text" tab="album"><a style="font-size: 14px;" href="javascript:void(0)" type="i18n" key="view_more"></a></div>
				<h1 key="common_album" type="i18n"></h1>
			</div>
			<div class="search-content radio">
				<ul class="mainlist searchAlbumList">
				</ul>
			</div>
		</div>
		<div class="group playList_group new-playlist-group" style="display:none;">
			<div class="big-title">
				<div class="more more-text" tab="playList"><a style="font-size: 14px;" href="javascript:void(0)" type="i18n" key="view_more"></a></div>
				<h1 key=common_playlist type="i18n"></h1>
			</div>
			<div class="search-content radio">
				<ul class="mainlist searchPlayListList">
				</ul>
			</div>
		</div>
		<div class="group song_group" style="display:none;">
			<div class="big-title">
				<div class="more more-text" tab="song"><a style="font-size: 14px;" href="javascript:void(0)" type="i18n" key="view_more"></a></div>
				<h1 key="common_song" type="i18n"></h1>
			</div>
			<div class="search-content" id="panelList1">
				<ul class="mainlist searchSongList">
				</ul>
			</div>
		</div>
	</div>
	<div class="group  searchArea allSongs" style="display:none;">
        <div class="search-content" id="panelList1">
            <ul class="mainlist allSearchSongList">
            </ul>
        </div>
    </div>
    <div class="group searchArea allAlbums" style="display:none;">
        <div class="search-content radio">
            <ul class="mainlist allSearchAlbumList">
            </ul>
        </div>
    </div>
     <div class="group new-playlist-group searchArea allPlayLists" style="display:none;">
        <div class="search-content radio">
            <ul class="mainlist allSearchPlayListList">
            </ul>
        </div>
     </div>
     <div class="group searchArea allArtists" style="display:none;">
        <div class="search-content radio">
            <ul class="mainlist  allSearchArtistList">
            </ul>
        </div>
    </div>

<div class="common_second_nav">
    	<a id = "auto-associate-back" href="javascript:gotoBack();" class="second_nav_back"></a>
    	<h1 id = "auto-associate-search" class="second_nav_h1">SEARCH</h1>
    </div>
	<div id="search" class="search-box">
        <div id="searchBtnBox">
            <div id="searchBtn"><a id = "auto-associate-common-search" href="javascript:void(0)"  key="common_search" type="i18n"></a></div>
        </div>
        <div id="searchInputBox"><input id="auto_associate_searchInput" type="text" placeholder=""/></div>
	</div>
	<div class="search-wrap" id="normalSearch" style="display:none;">
        <div class="group clear song_group" style="display:none;">
            <div class="songs" type="i18n" key="common_song"></div>
            <ul class="search-content">
            </ul>
        </div>
        <div class="group clear album_group" style="display:none;">
            <div class="albums" type="i18n" key="common_album"></div>
            <ul class="search-content">
            </ul>
        </div>
        <div class="group clear playList_group" style="display:none;">
            <div class="playlist" type="i18n" key="common_playlist"></div>
            <ul class="search-content">
            </ul>
        </div>
         <div class="group clear artist_group" style="display:none;">
            <div class="artists" type="i18n" key="common_artist"></div>
            <ul class="search-content">
            </ul>
        </div>
	</div>
	<div class="search-wrap detail-group" id="hotSearch" style="display:none;">
        <ul class="clear">
        </ul>    
 	</div>
 	<div class="search-wrap" id="searchHistory" style="display:none;">
 		<div class="group">
        	<ul class="mainlist clear">
        	</ul>
        </div>    
 	</div>
 	<div class="search-wrap" id="relatedWords" style="display:none;">
        <div class="group">
        	<ul class="mainlist clear">
        	</ul>
        </div>    
 	</div>

<div class="common_second_nav">
    	<a id = "auto-myfavorite-songs-back" class="second_nav_back" href="javascript:gotoBack();"></a>
    	<a id = "auto-myfavorite-songs-home" class="second_nav_home " href="#index-page"></a>
    	<div id = "auto-myfavorite-songs-edit" class="second_nav_edit"></div>
    	<div id = "auto-myfavorite-songs-ok" class="second_nav_ok" style="display:none"></div>
    	<h1 id = "auto-myfavorite-songs-mymusic-favoritesingles" class="second_nav_h1" type="i18n" key="mymusic_favoritesingles"></h1>
    </div>
    <div class="empty-box" style="display: none;">
    	<div id = "auto-myfavorite-songs-empty-fav" class="empty-fav-bg"></div>
    	<div id = "auto-myfavorite-songs-yourfav" key="add_songs_to_your_fav" type="i18n" class="empty-info"></div>
    	<div id = "auto-myfavorite-songs-empty-notice" key="fav_empty_notice" type="i18n" class="empty-notice"></div>
    	<a id = "auto-myfavorite-songs-discover-music" key="discover_music" type="i18n" class="empty-btn" href="#index-page"></a>
    </div>
    <div class="group">
        
        <div id="panelList">
            <ul class="mainlist favorite-songs-list">
            </ul>
        </div>
    </div>

<div class="common_second_nav">
    	<a id = "auto-myfavorite-artists-back" class="second_nav_back" href="javascript:gotoBack();"></a>
    	<a id = "auto-myfavorite-artists-home" class="second_nav_home " href="#index-page"></a>
    	<div id = "auto-myfavorite-artists-edit" class="second_nav_edit"></div>
    	<div id = "auto-myfavorite-artists-ok" class="second_nav_ok" style="display:none"></div>
    	<h1 id = "auto-myfavorite-artists-mymusic-favoriteartists" class="second_nav_h1" type="i18n" key="mymusic_favoriteartists"></h1>
    </div>
    <div class="commom_third_nav">
    	<ul>
    		<li class="active"><a href="#myfavorite-artists" type="i18n" key="music_artists"></a></li>
    		<li><a href="#myfavorite-acts" type="i18n" key="ugc_acts"></a></li>
    	</ul>
    </div>
    <div class="empty-box empty-artists" >
    	<div class="empty-fav-artists-bg"></div>
    	<div key="add_artists_to_your_fav" type="i18n" class="empty-info"></div>
    	<div key="fav_artists_empty_notice" type="i18n" class="empty-notice"></div>
    	<a key="discover_artists1" type="i18n" class="empty-btn" href="#music-artists"></a>
    </div>
    <div class="group">
        
        <div class="artist-content" id="panelList">
            <ul class="mainlist favorite-artists-list"></ul>
        </div>
    </div>

<div class="common_second_nav">
    	<a id = "auto-myfavorite-acts-back" class="second_nav_back" href="javascript:gotoBack();"></a>
    	<a class="second_nav_home " href="#index-page"></a>
    	<div class="second_nav_edit"></div>
    	<div class="second_nav_ok" style="display:none"></div>
    	<h1 class="second_nav_h1" type="i18n" key="mymusic_favoriteartists"></h1>
    </div>
    <div class="commom_third_nav">
    	<ul>
    		<li><a href="#myfavorite-artists" type="i18n" key="music_artists"></a></li>
    		<li class="active"><a href="#myfavorite-artists" type="i18n" key="ugc_acts"></a></li>
    	</ul>
    </div>
    <div class="empty-box empty-acts" >
    	<div class="empty-fav-artists-bg"></div>
    	<div key="add_acts_to_your_fav" type="i18n" class="empty-info"></div>
    	<div key="fav_acts_empty_notice" type="i18n" class="empty-notice"></div>
    	<a key="discover_acts" type="i18n" class="empty-btn" href="#ugc-hot-acts"></a>
    </div>
    <div class="group">
        
        <div class="artist-content" id="panelList">
            <ul class="mainlist favorite-artists-list"></ul>
        </div>
    </div>

<div class="group" style="margin-top: 0px">
    	
        <div class="common_myacound_second_heard">
		    <div class="clear_background">
		    	<a id="mymusic-back-btn" href="index.html#index-page" class="second_nav_white_back"></a>
		    </div>
			
		    <div style="text-align: center;" class="userbox clear ma_headimg_edit">
		    	<div class="img-covers"></div>
		    	<a href="#mymusic-publicpage"><img width="100px" height="100px" alt="" style="border-radius:50px" src="resources/img/image-default.jpg"></a>
				<div class="userbox-infos">
					<p class="nickname_info"> <a href="#mymusic-publicpage" id="mymusic_name" style="color:#fff" class="nickName"></a> <a href="#myaccount-setting" class="edit_userinfos" /></p>
				</div>
				<div class="user_genres"><span class="user_state"></span><span type="i18n" key="myaccount_region"></span><span>:</span><span class="state"></span></div>
		    </div>
		    
			<div class="myinfo_mask">
				<div class="myinfo_music"><a id="mymusic_musi_btn" href="#mymusic-playlist" key="mymusic" type="i18n" class="myinfo_mask_stc myinfo_mask_st" /></div>
				<div class="myinfo_account"><a id="mymusic_myac_btn" href="#myaccount" key="myaccount" type="i18n" class="myinfo_mask_st"/></div>
			</div>
		</div>
        <div id="panelList">
            <div class="one-line" id="myPublicPage">
                <div class="mainlist-box">
                    <div class="list-img">
                    	<i class="my-music-icon icon-upload"></i>
                    </div>
                    <div class="list-txt">
                        <div class="list-txt-box"><p class="list-title cut"><a id="mymusic_myupload_page" href="#myupload-songs" type="i18n" key="mymusic_myupload_page"></a></p></div>
                    </div>
                </div>
            </div>
            <div class="my-music-split"></div>
            <div class="one-line" id="favSongs">
                <div class="mainlist-box">
                    <div class="list-img">
                    	<i class="my-music-icon icon-fav"></i>
                    </div>
                    <div class="list-txt">
                        <div class="list-txt-box"><p class="list-title cut"><a id="mymusic_favorite_singles" href="#myfavorite-songs" type="i18n" key="mymusic_favoritesingles"></a></p></div>
                    </div>
                </div>
            </div>
            
            
            <div class="playlist-div playlist-close">
	            <ul class="mainlist one-line play_list">
	            </ul>
	            <ul class="mainlist one-line hear_this">
	            </ul>
	            <ul class="mainlist one-line fav_albums">
	            </ul>
	            <ul class="mainlist one-line hot_vibe">
	            </ul>
            </div>
            <div class="playlist-all-bt mainlist-box" style="display:none">
            	<div class="play-notice" type="i18n" key="playlsit_view_more"></div>
            </div>
            
            <div class="one-line">
                <div class="mainlist-box">
                    <div class="list-img">
                    	<i class="my-music-icon icon-add"></i>
                    </div>
                    <div class="list-txt">
                        <div class="list-txt-box"><p class="list-title cut"><a href="javascript:void(0)" id="iaddPlayListNew" type="i18n" key="favorite_addnewplaylist"></a></p></div>
                    </div>
                </div>
            </div>
            <div class="my-music-split"></div>
            <div class="one-line" id="favSongs">
                <div class="mainlist-box">
                    <div class="list-img">
                    	<i class="my-music-icon icon-user"></i>
                    </div>
                    <div class="list-txt">
                        <div class="list-txt-box"><p class="list-title cut"><a id="mymusic_favor_artists" href="#myfavorite-artists" type="i18n" key="mymusic_favoriteartists"></a></p></div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>

<div class="common_second_nav">
    	<a href="javascript:gotoBack();" class="second_nav_back" id="auto-mymusic-publicpage-back"></a>
    	<a id="auto-mymusic-publicpage-edit" href="#myupload-songs" class="second_nav_edit"></a>
    	<h1 id="auto-mymusic-publicpage-mypublicpage" key="mymusic_mypublicpage" type="i18n" class="second_nav_h1"></h1>
    </div>
	<div class="empty-box">
    	<div class="empty-my-page-bg"></div>
    	<div class="empty-info" type="i18n" key="my_page_empty_notice"></div>
    	<a id="auto-mymusic-publicpage-upload-ugnmusic" href="#upload-ugcmusic" class="empty-btn" type="i18n" key="ugc_upload_btn"></a>
    </div>
	<div class="group" style="margin-top:0px">
		<div class="ugcuser-header mypublicpage">
			<div class="ugcuser-bg">
				<img class="userpic" src="">
	
			</div>
			<div class="ugcuser-content">
				<div class="ugcimg">
					<img class="userpic" src=""/>
				</div>
				<div class="usernick"></div>
				<div class="info-row">
					<label type="i18n" key="mymusic_myupload_page_jointime"></label>:<label class="jointime"></label>
				</div>
				<div class="info-row">
					<span class="user_state"></span>
					<label type="i18n" key="mymusic_myupload_page_state"></label>:<label class="region"></label>
				</div>
				<div class="info-row">
					<a href="#upload-ugcmusic" class="act-btn" type="i18n" key="ugc_upload_btn"></a>
				</div>
				<div class="ugcuser-info">
					<ul>
						<li>
							<p class="num"></p>
							<p type="i18n" key="common_favorite"></p>
						</li>
						<li>
							<p class="num"></p>
							<p type="i18n" key="mobile_ugc_like"></p>
						</li>
						<li>
							<p class="num"></p>
							<p type="i18n" key="common_ugcindex_songs"></p>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="ugc-songs">
			<ul class="mainlist">
			</ul>
		</div>
		<div class="ugc-comments">
			<div class="comments-title"><strong>COMMENTS</strong> (<span class="comments-count">0</span>)</div>
			<div class="comments-input">
				<p style="color:red" class="notice"></p>
				<textarea class="normal-input" maxlength="200"/>
				<div class="clear">
					<a href="#" type="i18n" key="common_post" class="post-btn"></a>
				</div>
			</div>
			<ul class="ugc-comment-list">
			</ul>
		</div>
		
    </div>

<div class="common_second_nav">
    	<a href="javascript:gotoBack();" class="second_nav_back" id="auto-ugc-act-detail-back"></a>
    	<a id="auto-ugc-act-detail-backhome" class="second_nav_home" href="#music-show"></a>
    	<h1 id="auto-ugc-act-detail-tittle" key="mymusic_mypublicpage" type="i18n" class="second_nav_h1"></h1>
    </div>
	<div class="group" style="margin-top:0px">
		<div class="ugcuser-header">
			<div class="ugcuser-bg">
				<img class="userpic" src="">
			
			</div>
			<div class="ugcuser-content">
				<div class="ugcimg">
					<img class="userpic" src=""/>
				</div>
				<div class="usernick"></div>
				<div class="info-row">
					<label type="i18n" key="mymusic_myupload_page_jointime"></label>:<label class="jointime"></label>
				</div>
				<div class="info-row">
					<span class="user_state"></span>
					<label type="i18n" key="mymusic_myupload_page_state"></label>:<label class="region"></label>
				</div>
				<div class="info-row">
					<a href="#" class="ugcuser-btn fav"><i class="icon-fav"></i><span type="i18n" key="common_favorite"></span></a>
					<a href="#" class="ugcuser-btn good"><i class="icon-good"></i><span type="i18n" key="common_like_face"></span></a>
				</div>
				<div class="ugcuser-info">
					<ul>
						<li>
							<p class="num"></p>
							<p type="i18n" key="common_favorite"></p>
						</li>
						<li>
							<p class="num"></p>
							<p type="i18n" key="mobile_ugc_like"></p>
						</li>
						<li>
							<p class="num"></p>
							<p type="i18n" key="common_ugcindex_songs"></p>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="ugc-songs">
			<ul class="mainlist">
			</ul>
		</div>
		<div class="ugc-comments">
			<div class="comments-title">
				<p class="title-text" type="i18n" key="common_comments"></p>
				<p class="comments-count">(0)</p>
				<div class="post-comment-btn"><a id="post-comment-btn" href="javascript:void(0);" type="i18n" key="common_add"></a></div>
			</div>
			
			<ul class="ugc-comment-list">
			</ul>
		</div>
		
    </div>

<div class="common_second_nav">
    	<a id = "auto-mymusic-playlistdetail-back" href="javascript:gotoBack();" class="second_nav_back"></a>
    	<a id = "auto-mymusic-playlistdetail-home" href="#index-page" class="second_nav_home "></a>
    	<a id = "auto-mymusic-playlistdetail-remove" href="#mymusic-playlistdetail-remove" class="second_nav_remove"></a>
    	<h1 id = "auto-mymusic-playlistdetail-tittle" class="second_nav_h1"></h1>
    </div>
    <div class="empty-box">
    	<div class="empty-playlist-bg"></div>
    	<div class="empty-info" type="i18n" key="add_songs_to_your_playlist"></div>
    	<div class="empty-notice" type="i18n" key="playlist_empty_notice"></div>
    	<a id = "auto-mymusic-playlistdetail-dis-music" href="#index-page" class="empty-btn" type="i18n" key="discover_music"></a>
    </div>
    <div class="group">
        
        <div class="music-box clear" style="margin-bottom: 20px">
			<div class="music-img">
				<div id="playListPlay" class="playlist-play play play-playlist"></div>
				<img width="110px" height="110px" onerror="handleImgError(this,1)" src="">
				<div class="mark-bar"><div class="mark-txt"></div></div>
			</div>
			<div class="music-des">
				<div class="music-des-top clear">
					<p class="title break "><span id = "auto-mymusic-playlistdetail-des" class="my-playlist-title"></span></p>
				</div>
				<div id = "auto-mymusic-playlistdetail-private" class="publisher" type="i18n" key="my_private_playlist"></div>
				<div  class="playlist-desc"><span id = "auto-mymusic-playlistdetail-intro" key="common_intro" type="i18n"></span> : <span id = "auto-mymusic-playlistdetail-desc-c" class="playlist-desc-c"></span></div>
			</div>
		</div>
		<div class="row playlist-icon unpublish">
	    	<div class="span6 border-r edit_playlist">
	    		<i class="icon-edit"></i> <span key="edit_playlist" type="i18n"></span>
	    	</div>
	    	<div class="span6 share">
	    		<i class="icon-share"></i> <span key="common_share" type="i18n"></span>
	    	</div>
	    </div>
		<div class="row playlist-icon ispublish" style="display:none">
	    	<div class="span4 border-r edit_playlist">
	    		<i class="icon-edit"></i> <span key="edit_playlist" type="i18n"></span>
	    	</div>
	    	<div class="span4 border-r praise">
	    		<i class="icon-good"></i> <span class="count"></span>
	    	</div>
	    	<div class="span4 share">
	    		<i class="icon-share"></i> <span key="common_share" type="i18n"></span>
	    	</div>
	    </div>
		
        <div id="panelList">
            <ul class="mainlist playlist-detail-list">
            </ul>
        </div>
    </div>

<div class="common_second_nav">
    	<a id = "auto-mymusic-playlistdetail-remove-back" href="javascript:gotoBack();" class="second_nav_back"></a>
    	<a id = "auto-mymusic-playlistdetail-remove-home" href="#index-page" class="second_nav_home "></a>
    	<h1 id = "auto-mymusic-playlistdetail-remove-tittle" class="second_nav_h1"></h1>
    </div>
    <div class="group">
		
        <div id="panelList">
            <ul class="mainlist playlist-detail-list">
            </ul>
            <div class="list-remove-btn" type="i18n" key="delete_the_playlit"></div>
        </div>
    </div>

<section  class="section-box">

    
    <div  class="common_myacound_second_heard">
	    <div class="clear_background">
	    	<a id="myaccount-back-btn" class="second_nav_white_back" href="index.html#index-page"></a>
	    </div>
	
    <div class="userbox clear ma_headimg_edit"></div>
    
	<div class="myinfo_mask">
		<div class="myinfo_music"><span id="my_music" class="myinfo_mask_st" type="i18n" key="mymusic"></span></div>
		<div class="myinfo_account"><span id="myacc_myacount_btn" class="myinfo_mask_stc myinfo_mask_st" type="i18n" key="myaccount"></span></div>
	</div>
    </div> 
    <div class="border-list">
        <ul id="ma_ul">
            <li id="music_plan">
                <div class="rightarrow"><a id="linkMusicPlan" href="#music-plans"></a></div>
                <div class="list-box">
                    <div id="ma_vip" class="myaccount_vip"></div>
                    <div>
	                    <p><a id="goMusicPlan" href="#music-plans?from=2"></a></p>
	                    <p id="music_club_info"></p>
                	</div>
                </div>
            </li>
            <li id="transaction_history">
            	<div class="history_icon"></div>
                <div class="rightarrow"><a id="linkHistory" href="#transaction-history"></a></div>
                <div class="list-box"><p><a id="goHistory" href="#transaction-history" type="i18n" key="myaccount_consumptionrecord"></a></p></div>
            </li>
            <li class="ma_horizontal_septum"></li>
            <li class="ma_mobile_li">
           		<div class="rightarrow" style="display:none;"><a href="javascript:void(0)"></a></div>
            	<div class="ma_mobile_icon"></div>
            	<div class="ma_mobile_name" type="i18n" key="common_mobile"></div>
            	<div class="ma_mobile_info"></div>
            </li>
            <li class="ma_facebook">
            	<div class="rightarrow"><a href="javascript:void(0)"></a></div>
                <div class="ma_facebook_icon"></div>
            	<div class="ma_facebook_name" type="i18n" key="common_facebook"></div>
            	<div class="ma_facebook_info">Bind Now</div>
            </li>
            <li class="ma_horizontal_septum"></li>
            <li id="morePoints">
                <div class="rightarrow"><a href="javascript:void(0)"></a></div>
                <div class="morePoints_icon"></div>
                <div class="list-box">
                    <p><a href="javascript:void(0)" type="i18n" key="myaccount_morePoints"></a></p>
                </div>
                <div class="vipRankTips"></div>
            </li>
        </ul>
    </div>
    <div class="act-btn big-red-btn" id="btnLogout"> 
        <a href="javascript:void(0)"  type="i18n" key="header_logout"></a>
    </div>
</section>

<div class="common_second_nav"><a id = "auto-myaccount-setting-back" class="second_nav_back" href="javascript:gotoBack();"></a><a class="second_nav_home" href="index.html#index-page"></a><h1 class="second_nav_h1" key="myaccount_set_edit" type="i18n"></h1></div>
      <span id="errormsg-result" class="errormsg"></span>
			<div class="iterm" id="editbody">
					<div class="iterm-box ma_myaccount_edit_iterm_box">
					<div class="ma_edit_tittle" type="i18n" key="myaccount_nickname"></div>
						<div class="input-box ma_edit_nickname" for="nickname">
						    <div class="input placefixed">
						        <input type="text" id="nickname" maxlength="50" class="noplayer" name="nickname" />
						        <span id="nickname_h" class="hidden"></span>
						    </div>
						</div>						
					</div>
					<div class="border_bottom"></div>
			        <div class="iterm-box ma_myaccount_edit_iterm_box" style="margin-top: -8px;">
			        	  <div class="ma_edit_tittle" type="i18n" key="mymusic_myupload_page_state"></div>
                          <div class="ma_edit_nickname input-box">
                          <select id="region-select" name="regionCode" style="width:100%;height:2rem;"></select>                                                                
                    	  </div>
                    </div>
                    
					<div class="border_bottom"></div>
				    <div class="iterm-box clear ma_myaccount_edit_iterm_box">
				    	<div class="ma_edit_tittle" type="i18n" key="myaccount_gender"></div>
			            <div class="inputradio-box ma_edit_sex">
			                <input type="radio" id="gender-female" name="gender" value="2" /><span type="i18n" key="myaccount_female" class="normal-txt ma_edit_sexname"></span><span class="female"></span>
			            </div>
			            <div class="inputradio-box">
			                <input type="radio" id="gender-male" name="gender" value="1" /><span type="i18n" key="myaccount_male" class="normal-txt ma_edit_sexname"></span><span class="male"></span>
			            </div>
			        </div>
			        <div class="border_bottom"></div>
			        <div class="iterm-box ma_myaccount_edit_iterm_box">
			        	  <div class="ma_edit_tittle" type="i18n" key="myaccount_edit_birth"></div>
                          <select id="year-select" class="ma_edit_datewidth" name="BirthYear"></select><span>-</span>                                                                
                          <select id="month-select" class="ma_edit_datewid" name="BirthMonth"></select><span>-</span>
                          <select id="day-select" class="ma_edit_datewid" name="BirthDay"></select>
                    </div>
                    
					<div id="submit" type="i18n" key="common_save" class="act-btn"></div>
		    </div>

<div class="bread clear">
			 <div class="breadicon backarrow"><a id = "auto-music-act-back" href="#index-page"></a></div>
	         <h1 id = "auto-music-act-page-tittle" type="i18n" key="music_act_page_title"></h1>
      	</div>
		<div class="turntable_box" style="overflow-x: hidden;overflow-y:hidden;">
			<img class="turntable" src="resources/css/style-yellow/images/turntable.png">
			<img class="prize" id="zp" src="resources/css/style-yellow/images/prize.png">
			<img class="rotate" id="zbtn2" src="resources/css/style-yellow/images/rotate-static.png" usemap="#btnmap">
			
			<map name="btnmap">
				<area id="zbtnarea" class="zbtn-pointer" shape="circle" coords="254.5,254.5,73" href="javascript:void(0);"/> 
				 
			</map>
			
			<map name="bgmap">
				
			</map>
		</div>
		<div class="act_desc">
			<ul>
				<li class="act_mypoints"></li>
				<li><h3 type="i18n" key="music_act_rule_title"></h3><p id="act-rule-desc"></p></li>
				<li><h3 type="i18n" key="music_act_howto_title"></h3><p id="act-howto-desc"></p></li>
				<li><h3 type="i18n" key="music_act_duration_title"></h3><p id="act-duration-desc"></p></li>
				<li><h3 type="i18n" key="myaccount_morePoints">:</h3>
				<p id="act-point-desc">Get more points by listening to more songs and sharing with your friends on facebook and twitter, download more songs.</p>
				<table width="96%" border="0" cellspacing="0" cellpadding="0">
					<thead><tr><td>Actions </td><td>Points</td></tr></thead>
					<tbody>
						<tr><td>Login </td><td>50MP/Time (Max 200P)</td></tr>
						<tr><td>Share Songs on SNS  </td><td>2MP/Time</td></tr>
						<tr><td>Comment </td><td>2MP/Time</td></tr>
						<tr><td>Buy Anything </td><td>2MP/Naira</td></tr>
						<tr><td>Share Playlist on Hot Vibes  </td><td>2MP/Time</td></tr>
					</tbody>
				</table>
				</li>
				
			</ul>
		</div>
		<div class="act_winner" style="HEIGHT:150px;">
			<div>
				<span class="title" type="i18n" key="music_act_winner_title"></span>
				
			</div>
			<div id="winner-list" style="height:120px; overflow:hidden;">
			<div  style="height: 200px;" >
			<table width="98%" border="0" cellspacing="5" cellpadding="5">
			</table>
			</div>
			</div>
		</div>
		<div><p style="color:#ffcb05; padding-top: 40px;padding-left: 10px;padding-right: 10px;font-weight: 600; text-align: center;">Welcome to join MTN Music+ BB Group PIN: c001fceef</p></div>

<div class="common_second_nav"><a id="backurl" class="second_nav_back" href="javascript:gotoBack();" ></a><h1 id = "auto-myaccount-bind-tittle" class="second_nav_h1" key="music_act_btn_bind" type="i18n"></h1></div>
		<div class="ma_bind_box">
			
			<p class="red-txt bindPhoneError"></p>
			<div class="iterm-box phoneCell input-parents-box">
	            <div class="input-box clearfix input-clear-box" id="phoneNo">
	                <div class="input"><input type="text" placeholder=""></div>
	            </div>
           </div>
        
			
			<div class="iterm-box dynamicCodeCell input-parents-box log_pass">
				<div class="input-box ma_dynamicCodeCell input-clear-box">
					<div class="input"><input type="text" placeholder=""></div>
				</div>
				<div class="act-btn ma_bind_codebtn getCodeBtn"  id="getDynamicCode"><a href="javascript:void(0)" class="" key="common_getDynamicCode" type="i18n"></a></div>
			</div>
			
			
		    <div class="act-btn gray-btn ma_bind_log" id="bindPhoneBtn"><a href="javascript:void(0)" key="buy_linkphone" type="i18n"></a></div>
		</div>

<div class="common_second_nav">
		<a id = "auto-upload-ugcmusic-back" href="javascript:gotoBack();" class="second_nav_back" ></a>
		<a id="auto-upload-ugcmusic-backhome" class="second_nav_home" href="#music-show"></a>
		<h1 id = "auto-upload-ugcmusic-upload-btn" type="i18n" key="ugc_upload_btn" class="second_nav_h1"></h1>
	</div>
	<div id="steping1" style="display:none;">
		<ul class="upload-step">
			<li class="active">① <span type="i18n" key="ugc_select_song"></span></li>
			<li>② <span type="i18n" key="ugc_complete_info"></span></li>
		</ul>
		<div class="clear"></div>
	</div>
	<div id="steping2" style="display:none;">
		<ul class="upload-step">
			<li>① <span type="i18n" key="ugc_select_song"></span></li>
			<li class="active">② <span type="i18n" key="ugc_complete_info"></span></li>
		</ul>
		<div class="clear"></div>
	</div>
	<div class="iterm modify-ugcmusic">
		<form method="post" id="uploadugcform">
			<div class="music-cover">
				<div class="music-cover-img">
					<img style="width: 100px; height: 100px;" src="" onerror="handleImgError(this,1)" id="picPath">
					<div class="music-cover-plus"></div>
					<input type="hidden" id="picUrl" name="picUrl">
					<input type="hidden" name="imageType" value="4" />
					<input type="hidden" name="portalType" value="touch" />
					<input type="file" name="multipartFile" id="uploadpic" class="music-cover-upload">
				</div>
				<p key="public_pictureInfo" type="i18n" class="music-cover-title"></p>
				<p key="common_picerror" type="i18n" class="music-cover-des"></p>
				<p id="errormsg-pic" class="errormsg"></p>
			</div>
			<div id="ugc-step1">
			<div class="music_title">
				<div class="title-name">
					<span key="song_name" type="i18n" class="input-txt"></span>
					<span style="color: red;">*</span>
				</div>
				<div class="">
					<div>
						<input type="text" id="name" maxlength="30" class="input" name="name">
					</div>
					<div style="text-align:right">
						<span class="light-txt">
							<span class="light-txt promptNum">0</span>
							/30
						</span>
					</div>
					<span class="hidden" id="nickname_h">
					</span>
					<div>
						<span style="display: inline;" id="errormsg-name" class="errormsg"></span>
					</div>
				</div>
			</div>
			<div class="music_title">
				<div class="title-name">
					<span key="common_select_local_songs" type="i18n" class="input-txt"></span>
					<span style="color: red;">*</span>
					<span id="music-file-uploaded" class="input-txt"></span>
				</div>
				<div class="">
					<div class="account-btn" id="music-file">
						<input type="hidden" name="musicFileName" id="music-file-name" />
						<a href="#" type="i18n" key="myaccount_selectfile"></a> 
						<input type="file"
							style="position: absolute; filter: alpha(opacity : 0); opacity: 0; cursor: pointer"
							id="uploadfile" class="type-file-file" name="ugcFile">
					</div>
				</div>
				<div class="clear"></div>
				<span class="errormsg" id="errormsg-file" style="display: inline;"></span>
			</div>
			<div class="music_title">
				<div class="">
					<span class="input-txt" type="i18n" key="ugc_language"></span>
					<span style="color: red;">*</span>
				</div>
				<div class="">
			        <div class="iterm-box">
                          <select id="language-select" name="language"></select>                                                                
                    </div>
					<div>
						<span class="errormsg" id="errormsg-lang" style="display: inline;"></span>
					</div>
				</div>
			</div>
			<div class="music_title">
				<div class="">
					<span class="input-txt" type="i18n" key="ugc_genre"></span>
					<span style="color: red;">*</span>
				</div>
				<div class="">
			        <div class="iterm-box">
                          <select id="genre-select" name="genre"></select>                                                                
                    </div>
					<div>
						<span class="errormsg" id="errormsg-genre" style="display: inline;"></span>
					</div>
				</div>
			</div>
			<div class="music_desc">
				<div class="title-name">
					<span key="song_description" type="i18n" class="input-txt">SONG DESCRIPTION</span>
					<span style="color: red;">*</span>
					<span class="light-txt">(<span class="promptNum">0</span>/100)</span>
				</div>
				<div class="">
					<textarea maxlength="100" rows="3" name="descrption" id="music_desc"/>
					<div>
						<span style="display: inline;" id="errormsg-desc" class="errormsg"></span>
					</div>
				</div>
			</div>
			<div style="margin-top:10px">
				<div class="iterm-txt">
					<input id="join-btn" type="checkbox" checked="true" name="activityLabel" class="checkbox">
					<p class="agreeterms">
						<span id="pjoin" type="i18n" key="ugc_join_underground_beats"></span>
					</p>
				</div>
				<div class="iterm-txt">
					<input id="IAgree" type="checkbox" checked="true" name="agreeCheck" class="checkbox">
					<p class="agreeterms">
						<span id="pagree" type="i18n" key="common_registeragreeto"></span>
						<a id="termsUserLink" href="terms.html" class="a-blue"
							type="i18n" key="common_registerterms"></a>
					</p>
				</div>
			</div>
			<div class="act-btn gray-btn" key="common_Submit" type="i18n" id="submit"></div>
			</div>
			
			<div id="ugc-step2" style="margin-top:10px">
				<div class="music_title">
					<div class="">
						<span class="input-txt" type="i18n" key="myaccount_nickname"></span>
						<span style="color: red;">*</span>
					</div>
					<div class="">
						<div>
							<input type="text" name="nickname" class="input" maxlength="30"
								id="nickname">
						</div>
						<div style="text-align: right">
							<span class="light-txt"> <span class="light-txt promptNum">0</span>
								/30
							</span>
						</div>
						<span id="nickname_h" class="hidden"> </span>
						<div>
							<span class="errormsg" id="errormsg-nickname" style="display: inline;"></span>
						</div>
					</div>
				</div>
				<div class="music_title">
					<div class="">
						<span class="input-txt" type="i18n" key="myaccount_region"></span>
						<span style="color: red;">*</span>
					</div>
					<div class="">
				        <div class="iterm-box">
	                          <select id="region-select" name="region"></select>                                                                
	                    </div>
						<div>
							<span class="errormsg" id="errormsg-region" style="display: inline;"></span>
						</div>
					</div>
				</div>
				<div class="act-btn" key="common_Submit" type="i18n" id="submit2"></div>
			</div>
			
			<!--
			<div id="ugc-step2" style="display:none;">
			<div class="music_title">
				<div class="">
					<span class="input-txt" type="i18n" key="myaccount_nickname"></span>
					<span style="color: red;">*</span>
				</div>
				<div class="">
					<div>
						<input type="text" name="nickname" class="input" maxlength="30"
							id="nickname">
					</div>
					<div style="text-align: right">
						<span class="light-txt"> <span class="light-txt promptNum">0</span>
							/30
						</span>
					</div>
					<span id="nickname_h" class="hidden"> </span>
					<div>
						<span class="errormsg" id="errormsg-nickname" style="display: inline;"></span>
					</div>
				</div>
			</div>
			<div class="music_title">
				<div class="">
					<span class="input-txt" type="i18n" key="myaccount_region"></span>
					<span style="color: red;">*</span>
				</div>
				<div class="">
			        <div class="iterm-box">
                          <select id="region-select" name="region"></select>                                                                
                    </div>
					<div>
						<span class="errormsg" id="errormsg-region" style="display: inline;"></span>
					</div>
				</div>
			</div>
			<div class="act-btn" key="common_Submit" type="i18n"
				id="submit2"></div>
			</div>
			<div id="ugc-step1">
			<div class="music_title">
				<div class="">
					<span class="input-txt" type="i18n" key="common_public_name"></span>
					<span style="color: red;">*</span>
				</div>
				<div class="">
					<div>
						<input type="text" name="name" class="input" maxlength="30"
							id="name">
					</div>
					<div style="text-align: right">
						<span class="light-txt"> <span class="light-txt promptNum">0</span>
							/30
						</span>
					</div>
					<span id="nickname_h" class="hidden"> </span>
					<div>
						<span class="errormsg" id="errormsg-name" style="display: inline;"></span>
					</div>
				</div>
			</div>

<div class="music_file">
				<div class="">
					<span class="input-txt" type="i18n" key="common_select_local_songs"></span>
					<span style="color: red;">*</span>
					<span class="input-txt" id="music-file-uploaded">no file selected</span>
				</div>
				<div class="">
					<div class="account-btn" id="music-file">
						<input type="hidden" name="musicFileName" id="music-file-name" />
						<a href="#" type="i18n" key="myaccount_selectfile"></a> <input
							type="file"
							style="position: absolute; filter: alpha(opacity : 0); opacity: 0; cursor: pointer"
							id="uploadfile" class="type-file-file" name="ugcFile">
					</div>
				</div>
				<div class="clear"></div>
				<span class="errormsg" id="errormsg-file" style="display: inline;"></span>
			</div>

</div>
			</div>
			
			<div class="act-btn gray-btn" key="common_Submit" type="i18n"
				id="submit"></div>
			</div>
			-->
		</form>
	</div>

<div class="common_second_nav">
    	<a href="javascript:gotoBack();" class="second_nav_back" id="auto-modify-ugcmusic-back"></a>
    	<h1 id="auto-modify-ugcmusic-my-songs" key="edit_my_songs" type="i18n" class="second_nav_h1"></h1>
    </div>
	<div class="iterm modify-ugcmusic">
		<form enctype="multipart/form-data" method="post" id="modifyugcform">
			<div class="music-cover">
				<div class="music-cover-img">
					<img id="picPath" onerror="handleImgError(this,1)" src="" style="width: 100px; height: 100px;">
					<div class="music-cover-plus"></div>
					<input type="hidden" value="4" name="imageType">
					<input type="hidden" id="picUrl" name="picUrl" value="">
					<input type="file" class="music-cover-upload" id="uploadpic" class="type-file-file" name="multipartFile">
				</div>
				<p class="music-cover-title" type="i18n" key="public_pictureInfo"></p>
				<p class="music-cover-des" type="i18n" key="common_picerror"></p>
				<p class="errormsg" id="errormsg-pic"></span>
			</div>
			
			<div class="music_title">
				<div class="title-name">
					<span class="input-txt" type="i18n" key="song_name"></span>
					<span style="color: red;">*</span>
				</div>
				<div class="">
					<div>
						<input type="hidden" name="musicCode" class="input"
							maxlength="30" id="code"/>
						<input type="hidden" name="newTagIDs" id="newTagIDs" />
						<input type="text" name="newMusicName" class="input"
							maxlength="30" id="name"/>
					</div>
					<div style="text-align:right">
						<span class="light-txt">
							<span class="light-txt promptNum">0</span>
							/30
						</span>
					</div>
					<span id="nickname_h" class="hidden">
					</span>
					<div>
						<span class="errormsg" id="errormsg-name" style="display: inline;"></span>
					</div>
				</div>
			</div>
	
			
	
			<div class="music_title">
				<div class="title-name">
					<span class="input-txt" type="i18n" key="common_language"></span>
					<span style="color: red;">*</span>
				</div>
				<div class="">
					<div class="iterm-box">
						<select id="language-select" name="newLanguage"></select>
					</div>
					<div>
						<span class="errormsg" id="errormsg-lang" style="display: inline;"></span>
					</div>
				</div>
			</div>
			<div class="music_title">
				<div class="title-name">
					<span class="input-txt" type="i18n" key="common_gener"></span>
					<span style="color: red;">*</span>
				</div>
				<div class="">
					<div class="iterm-box">
						<select id="genre-select" name="newGenre"></select>
					</div>
					<div>
						<span class="errormsg" id="errormsg-genre" style="display: inline;"></span>
					</div>
				</div>
			</div>
	
			<div class="music_desc">
				<div class="title-name">
					<span class="input-txt" type="i18n" key="song_description"></span>
					<span style="color: red;">*</span>
					<span class="light-txt">(<span class="promptNum">0</span>/100)</span>
				</div>
				<div class="">
					<textarea id="music_desc" name="newMusicDesc" rows="3" maxlength="100" />
					<div>
						<span class="errormsg" id="errormsg-desc" style="display: inline;"></span>
					</div>
				</div>
			</div>
			<div class="act-btn gray-btn" key="common_Submit" type="i18n" id="submit"></div>
		</form>
	</div>

<div class="valentine-desc">	
    <div class="valentine-back"></div><h3>VALIFIED</h3>
    </div>
    
    <div class="valentine-banner">
   <div class="valentine-banner-wrap" > <div class="valentine-play-all"><h3>PLAY ALL</h3></div></div>
    <img src="resources/images/2016-ValentineDay/ValentineDay.jpg" width="100%"/>
    </div>
    
    <div class="valentine-info">
    <p  style="font-family:Georgia">To love and be loved in return creates an endless spark of youth in all of us. Share some love this season and be sure to receive the best loving from your dearly beloved</p>
    </div>
    
    <div class="valentine-share">
    <div class="wrap">
    	<a class="fb" target="blank"></a>
    	<div class="split-line"></div>
    	<a class="tw" target="blank"></a>
    </div>
    </div>
    
    <div class="valentine-plan">
    <a href="javascript:void(0)" class="valentine-plan-order"><i>Click Here to stream unlimited music and Enjoy 30MB @ N5 for 3 days >></i> </a>
    </div>
    
    <div class="valentine-playlist-name">
    <h3>Timeless Love Songs</h3>
    </div>
    <div class="iterm-box notice-bg for-btn clear appNotice"  style="display:none;">
        <table style="width:100%;" cellspacing="0" cellpadding="0">
        <tr>
            <td class="closeTD" >
                <div class="close" style="float:none;"></div>
            </td>
            <td width="35%">
                <div class="notice-txt">
                    <p type="i18n" key="common_listenapp">
                    </p>
                </div>
            </td>
            <td>
                <div class="act-btn openapp" type="i18n" key="common_openapp">
                </div>
            </td>
        </tr>
        </table>
    </div>
    <div class="music-box clear" style="display:none">
        <div class="music-img">
            <div class="mark-bar"><div class="mark-txt"></div></div>
        </div>
        <div class="music-des"  >
            <div class="music-des-top clear">
                <p class="title break"></p>
            </div>
            <div class="icon-box clear">
                <div class="icon-bar play play-category"></div>
                <div class="icon-bar share"></div>
                <div class="icon-bar fav2"></div>
            </div>
        </div>
    </div>
    <div class="intro-txt" style="display:none">
        <h1 type="i18n" key="common_intro"></h1>
        <div class="moreDetail float-right" style="display:none;">
            <span class="blue-p" type="i18n" key="common_seemore"></span>
            <div class="downarrow"></div>
        </div>
        <p class="cut"><span></span></p>
        <div class="foldDetail float-right" style="display:none">
            <span class="blue-p" type="i18n" key="common_fold"></span>
            <div class="uparrow"></div>
        </div>
    </div>
    <div class="group">
        <div id="panelList">
            <ul class="mainlist hearthisdetailcontent valentine-border"></ul>
        </div>
    </div>
    <div id="hearthis-comments" class="group detail-group" style="display:none;">
        <div class="big-title" style="text-align:center;margin-top:40px"><h1 style="color:#ffffff;font-size:24px;border-bottom:solid 1px rgba(255, 255, 255, 0.5)">COMMENTS</h1></div>
        <div class="comment valentine clear">
            <div class="list-img" style="display:none"></div>
            <div class="comment-box" style="width:100%">
                <div class="list-txt-box clear">
                    <div class="rate-box float-right" style="margin:0;display:none">
                        <div class="rate">
                            <div class="rate-on star5" value="5"></div>
                            <span class="noml" type="radio" name="starLv" value="1" style="margin-right: 3px;opacity:0;z-index: 10;width: 16px;height: 15px;display: block;float: left;cursor: pointer;"></span>
                            <span type="radio" name="starLv" value="2" style="margin-right: 3px;opacity:0;z-index: 10;width: 16px;height: 15px;display: block;float: left;cursor: pointer;"></span>
                            <span type="radio" name="starLv" value="3" style="margin-right: 4px;opacity:0;z-index: 10;width: 16px;height: 15px;display: block;float: left;cursor: pointer;"></span>
                            <span type="radio" name="starLv" value="4" style="margin-right: 3px;opacity:0;z-index: 10;width: 16px;height: 15px;display: block;float: left;cursor: pointer;"></span>
                            <span type="radio" class="nom5" name="starLv" value="5" style="opacity:0;z-index: 10;width: 16px;height: 15px;display: block;float: left;cursor: pointer;"></span>
                        </div>
                    </div>
                    <p class="list-title cut" style="display:none"></p>
                </div>
                <div class="textarea"  style="margin-bottom:5px;padding:0px;width:100%;background-color:#ffffff"><textarea id="hearthis-commentTextarea" maxlimit="200" placeholder="Input your comments"/></div>
                <div class="clear">
                        <div class="post-btn" style="cursor:pointer;background-color:#ffffff;color:#000000" type="i18n" key="common_post"></div>
                        <span class="light-txt"><span class="light-txt promptNum">0</span>/200</span>                        
                    </div>
            </div>
        </div>
     </div> 
     <div class="comment valentine no-login clear" id="hearthis-nologin-comment" style="display:none;" >
     	<div class="big-title" style="text-align:center;margin-top:40px;margin-bottom:10px"><h1 style="color:#ffffff;font-size:24px">COMMENTS</h1></div>
                <div class="list-img" style="display:none"><img src="resources/images/data/default-user.jpg"></div>
                <div class="comment-box" style="width:100%;border:solid 1px rgba(255, 255, 255, 0.5)">
                    <p><a style="color:#ffffff;text-decoration:underline;" href="javascript:void(0);" id="hearthis-register_comment" type="i18n" key="common_register"></a> <span style="color:#ead1d5" type="i18n" key="common_or"></span> <a href="javascript:void(0);" class="" id="hearthis-login_comment" type="i18n" key="common_login" style="color:#ffffff;text-decoration:underline;"></a> <span  style="color:#ead1d5" type="i18n" key="common_saysomething"></span></p>
                </div>
          </div>
     <div id="hearthis-comments-list"><ul class="mainlist commentslist"></ul></div>

<div class="valentine-desc">	
    <div class="valentine-back"></div><h3>STREET JAMZ</h3>
    </div>
    
    <div class="valentine-banner">
   <div class="valentine-banner-wrap" > <div class="valentine-play-all streejamz"><h3>PLAY ALL</h3></div></div>
    <img src="resources/images/2016-StreetJAMZ/StreetJAMZ.jpg" width="100%"/>
    </div>
        
    <div class="valentine-share">
    <div class="wrap">
    	<a class="fb" target="blank"></a>
    	<div class="split-line"></div>
    	<a class="tw" target="blank"></a>
    </div>
    </div>
    
    <div class="valentine-plan">
    <a href="javascript:void(0)" class="valentine-plan-order streejamz"><i>Click Here to stream unlimited music and Enjoy 30MB @ N5 for 3 days >></i> </a>
    </div>
    
    <div class="valentine-playlist-name">
    <h3>PLAYLIST</h3>
    </div>
    <div class="iterm-box notice-bg for-btn clear appNotice"  style="display:none;">
        <table style="width:100%;" cellspacing="0" cellpadding="0">
        <tr>
            <td class="closeTD" >
                <div class="close" style="float:none;"></div>
            </td>
            <td width="35%">
                <div class="notice-txt">
                    <p type="i18n" key="common_listenapp">
                    </p>
                </div>
            </td>
            <td>
                <div class="act-btn openapp" type="i18n" key="common_openapp">
                </div>
            </td>
        </tr>
        </table>
    </div>
    <div class="music-box clear" style="display:none">
        <div class="music-img">
            <div class="mark-bar"><div class="mark-txt"></div></div>
        </div>
        <div class="music-des"  >
            <div class="music-des-top clear">
                <p class="title break"></p>
            </div>
            <div class="icon-box clear">
                <div class="icon-bar play play-category"></div>
                <div class="icon-bar share"></div>
                <div class="icon-bar fav2"></div>
            </div>
        </div>
    </div>
    <div class="intro-txt" style="display:none">
        <h1 type="i18n" key="common_intro"></h1>
        <div class="moreDetail float-right" style="display:none;">
            <span class="blue-p" type="i18n" key="common_seemore"></span>
            <div class="downarrow"></div>
        </div>
        <p class="cut"><span></span></p>
        <div class="foldDetail float-right" style="display:none">
            <span class="blue-p" type="i18n" key="common_fold"></span>
            <div class="uparrow"></div>
        </div>
    </div>
    <div class="group">
        <div id="panelList">
            <ul class="mainlist hearthisdetailcontent valentine-border"></ul>
        </div>
    </div>
    <div id="hearthis-comments" class="group detail-group" style="display:none;">
        <div class="big-title" style="text-align:center;margin-top:40px"><h1 style="color:#ffffff;font-size:24px;border-bottom:solid 1px rgba(255, 255, 255, 0.5)">COMMENTS</h1></div>
        <div class="comment valentine clear">
            <div class="list-img" style="display:none"></div>
            <div class="comment-box" style="width:100%">
                <div class="list-txt-box clear">
                    <div class="rate-box float-right" style="margin:0;display:none">
                        <div class="rate">
                            <div class="rate-on star5" value="5"></div>
                            <span class="noml" type="radio" name="starLv" value="1" style="margin-right: 3px;opacity:0;z-index: 10;width: 16px;height: 15px;display: block;float: left;cursor: pointer;"></span>
                            <span type="radio" name="starLv" value="2" style="margin-right: 3px;opacity:0;z-index: 10;width: 16px;height: 15px;display: block;float: left;cursor: pointer;"></span>
                            <span type="radio" name="starLv" value="3" style="margin-right: 4px;opacity:0;z-index: 10;width: 16px;height: 15px;display: block;float: left;cursor: pointer;"></span>
                            <span type="radio" name="starLv" value="4" style="margin-right: 3px;opacity:0;z-index: 10;width: 16px;height: 15px;display: block;float: left;cursor: pointer;"></span>
                            <span type="radio" class="nom5" name="starLv" value="5" style="opacity:0;z-index: 10;width: 16px;height: 15px;display: block;float: left;cursor: pointer;"></span>
                        </div>
                    </div>
                    <p class="list-title cut" style="display:none"></p>
                </div>
                <div class="textarea"  style="margin-bottom:5px;padding:0px;width:100%;background-color:#f2bc66;border:solid 0px #ffffff"><textarea id="hearthis-commentTextarea" maxlimit="200" placeholder="Input your comments" style="background-color:#f2bc66;color:#ffffff"/></div>
                <div class="clear">
                        <div class="post-btn" style="cursor:pointer;background-color:#ffffff;color:#000000" type="i18n" key="common_post"></div>
                        <span class="light-txt"><span class="light-txt promptNum">0</span>/200</span>                        
                    </div>
            </div>
        </div>
     </div> 
     <div class="comment valentine no-login clear" id="hearthis-nologin-comment" style="display:none;" >
     	<div class="big-title" style="text-align:center;margin-top:40px;margin-bottom:10px"><h1 style="color:#ffffff;font-size:24px">COMMENTS</h1></div>
                <div class="list-img" style="display:none"><img src="resources/images/data/default-user.jpg"></div>
                <div class="comment-box" style="width:100%;border:solid 1px rgba(255, 255, 255, 0.5)">
                    <p><a style="color:#ffffff;text-decoration:underline;" href="javascript:void(0);" id="hearthis-register_comment" type="i18n" key="common_register"></a> <span style="color:#ead1d5" type="i18n" key="common_or"></span> <a href="javascript:void(0);" class="" id="hearthis-login_comment" type="i18n" key="common_login" style="color:#ffffff;text-decoration:underline;"></a> <span  style="color:#ead1d5" type="i18n" key="common_saysomething"></span></p>
                </div>
          </div>
     <div id="hearthis-comments-list"><ul class="mainlist commentslist"></ul></div>

<div class="valentine-desc">	
    <div class="valentine-back"></div><h3>Easter Tunez</h3>
    </div>
    
    <div class="valentine-banner">
   <div class="valentine-banner-wrap" > <div class="valentine-play-all topic" style="background-image: url('resources/images/2016-EasterTunez/EasterTunez-bg.png');"><h3 style="color:#000000">PLAY ALL</h3></div></div>
    <img src="resources/images/2016-EasterTunez/EasterTunez.jpg" width="100%"/>
    </div>
        
    <div class="valentine-share">
    <div class="wrap">
    	<a class="fb" target="blank"></a>
    	<div class="split-line"></div>
    	<a class="tw" target="blank"></a>
    </div>
    </div>
    
    <div class="valentine-plan">
    <a href="javascript:void(0)" class="valentine-plan-order topic" style="color:#ffffff"><i>Click Here to stream unlimited music and Enjoy 30MB @ N5 for 3 days >></i> </a>
    </div>
    
    <div class="valentine-playlist-name">
    <h3 style="color:#ffffff">PLAYLIST</h3>
    </div>
    <div class="iterm-box notice-bg for-btn clear appNotice"  style="display:none;">
        <table style="width:100%;" cellspacing="0" cellpadding="0">
        <tr>
            <td class="closeTD" >
                <div class="close" style="float:none;"></div>
            </td>
            <td width="35%">
                <div class="notice-txt">
                    <p type="i18n" key="common_listenapp">
                    </p>
                </div>
            </td>
            <td>
                <div class="act-btn openapp" type="i18n" key="common_openapp">
                </div>
            </td>
        </tr>
        </table>
    </div>
    <div class="music-box clear" style="display:none">
        <div class="music-img">
            <div class="mark-bar"><div class="mark-txt"></div></div>
        </div>
        <div class="music-des"  >
            <div class="music-des-top clear">
                <p class="title break"></p>
            </div>
            <div class="icon-box clear">
                <div class="icon-bar play play-category"></div>
                <div class="icon-bar share"></div>
                <div class="icon-bar fav2"></div>
            </div>
        </div>
    </div>
    <div class="intro-txt" style="display:none">
        <h1 type="i18n" key="common_intro"></h1>
        <div class="moreDetail float-right" style="display:none;">
            <span class="blue-p" type="i18n" key="common_seemore"></span>
            <div class="downarrow"></div>
        </div>
        <p class="cut"><span></span></p>
        <div class="foldDetail float-right" style="display:none">
            <span class="blue-p" type="i18n" key="common_fold"></span>
            <div class="uparrow"></div>
        </div>
    </div>
    <div class="group">
        <div id="panelList">
            <ul class="mainlist hearthisdetailcontent valentine-border"></ul>
        </div>
    </div>
    <div id="hearthis-comments" class="group detail-group" style="display:none;">
        <div class="big-title" style="text-align:center;margin-top:40px"><h1 style="color:#ffffff;font-size:24px;border-bottom:solid 1px rgba(255, 255, 255, 0.5)">COMMENTS</h1></div>
        <div class="comment valentine clear">
            <div class="list-img" style="display:none"></div>
            <div class="comment-box" style="width:100%">
                <div class="list-txt-box clear">
                    <div class="rate-box float-right" style="margin:0;display:none">
                        <div class="rate">
                            <div class="rate-on star5" value="5"></div>
                            <span class="noml" type="radio" name="starLv" value="1" style="margin-right: 3px;opacity:0;z-index: 10;width: 16px;height: 15px;display: block;float: left;cursor: pointer;"></span>
                            <span type="radio" name="starLv" value="2" style="margin-right: 3px;opacity:0;z-index: 10;width: 16px;height: 15px;display: block;float: left;cursor: pointer;"></span>
                            <span type="radio" name="starLv" value="3" style="margin-right: 4px;opacity:0;z-index: 10;width: 16px;height: 15px;display: block;float: left;cursor: pointer;"></span>
                            <span type="radio" name="starLv" value="4" style="margin-right: 3px;opacity:0;z-index: 10;width: 16px;height: 15px;display: block;float: left;cursor: pointer;"></span>
                            <span type="radio" class="nom5" name="starLv" value="5" style="opacity:0;z-index: 10;width: 16px;height: 15px;display: block;float: left;cursor: pointer;"></span>
                        </div>
                    </div>
                    <p class="list-title cut" style="display:none"></p>
                </div>
                <div class="textarea"  style="margin-bottom:5px;padding:0px;width:100%;background-color:#f2bc66;border:solid 0px #ffffff"><textarea id="hearthis-commentTextarea" maxlimit="200" placeholder="Input your comments" style="background-color:#ad7bba;color:#ffffff"/></div>
                <div class="clear">
                        <div class="post-btn" style="cursor:pointer;background-color:#ffffff;color:#000000" type="i18n" key="common_post"></div>
                        <span class="light-txt"><span class="light-txt promptNum">0</span>/200</span>                        
                    </div>
            </div>
        </div>
     </div> 
     <div class="comment valentine no-login clear" id="hearthis-nologin-comment" style="display:none;" >
     	<div class="big-title" style="text-align:center;margin-top:40px;margin-bottom:10px"><h1 style="color:#ffffff;font-size:24px">COMMENTS</h1></div>
                <div class="list-img" style="display:none"><img src="resources/images/data/default-user.jpg"></div>
                <div class="comment-box" style="width:100%;border:solid 1px rgba(255, 255, 255, 0.5)">
                    <p><a style="color:#ffffff;text-decoration:underline;" href="javascript:void(0);" id="hearthis-register_comment" type="i18n" key="common_register"></a> <span style="color:#ead1d5" type="i18n" key="common_or"></span> <a href="javascript:void(0);" class="" id="hearthis-login_comment" type="i18n" key="common_login" style="color:#ffffff;text-decoration:underline;"></a> <span  style="color:#ead1d5" type="i18n" key="common_saysomething"></span></p>
                </div>
          </div>
     <div id="hearthis-comments-list"><ul class="mainlist commentslist"></ul></div>

<div class="valentine-banner">
	    <img src="resources/images/2016-ProjectFame/banner.png" width="100%"/>
    </div>
        
    <div class="valentine-share">
    <div class="wrap">
    	<a class="fb" target="blank"></a>
    	<div class="split-line"></div>
    	<a class="tw" target="blank"></a>
    </div>
    </div>
    
    <div class="valentine-plan">
    <a href="javascript:void(0)" class="valentine-plan-order topic" style="color:#ffffff"><i>Click Here to get 30MB and stream unlimited music!<br/> FREE for 3 days! >></i> </a>
    </div>
    
    <div class="valentine-playlist-name">
    <h3 style="color:#ffffff">PHASE 1</h3>
    </div>
    <div class="iterm-box notice-bg for-btn clear appNotice"  style="display:none;">
        <table style="width:100%;" cellspacing="0" cellpadding="0">
        <tr>
            <td class="closeTD" >
                <div class="close" style="float:none;"></div>
            </td>
            <td width="35%">
                <div class="notice-txt">
                    <p type="i18n" key="common_listenapp">
                    </p>
                </div>
            </td>
            <td>
                <div class="act-btn openapp" type="i18n" key="common_openapp">
                </div>
            </td>
        </tr>
        </table>
    </div>
    <div class="music-box clear" style="display:none">
        <div class="music-img">
            <div class="mark-bar"><div class="mark-txt"></div></div>
        </div>
        <div class="music-des"  >
            <div class="music-des-top clear">
                <p class="title break"></p>
            </div>
            <div class="icon-box clear">
                <div class="icon-bar play play-category"></div>
                <div class="icon-bar share"></div>
                <div class="icon-bar fav2"></div>
            </div>
        </div>
    </div>
    <div class="intro-txt" style="display:none">
        <h1 type="i18n" key="common_intro"></h1>
        <div class="moreDetail float-right" style="display:none;">
            <span class="blue-p" type="i18n" key="common_seemore"></span>
            <div class="downarrow"></div>
        </div>
        <p class="cut"><span></span></p>
        <div class="foldDetail float-right" style="display:none">
            <span class="blue-p" type="i18n" key="common_fold"></span>
            <div class="uparrow"></div>
        </div>
    </div>
    <div class="group">
        <div id="panelList">
            <ul class="mainlist hearthisdetailcontent valentine-border chart-line"></ul>
        </div>
		<div class="click_a" id="click-load-more" style="display:none;">
	    	<a href="javascript:void(0)" style="color:#ffffff" type="i18n" key="click_to_view_more"> </a>
	    </div>
	            
    </div>
    <div id="project-fame-phases"></div>

<div class="click_a" id="ugc-home-link">
    	<a href="#music-show" style="color:#ffffff" type="i18n" key="ugc_act_pf9_click_ugc"> </a>
    </div>
    
    <div id="hearthis-comments" class="group detail-group" style="display:block;">
        <div class="big-title" style="text-align:center;margin-top:40px">
		<div class="more more-text"><a href="javascript:void(0);" id="reload-comment-link"><img height="20px" src="resources/css/style-yellow/images/icon-refresh-gray.png"></a></div>        
        <h1 style="color:#ffffff;font-size:24px;border-bottom:solid 1px rgba(255, 255, 255, 0.5)">COMMENTS</h1></div>
        <div class="comment valentine clear">
            <div class="list-img" style="display:none"></div>
            <div class="comment-box" style="width:100%">
                <div class="list-txt-box clear">
                    <div class="rate-box float-right" style="margin:0;display:none">
                        <div class="rate">
                            <div class="rate-on star5" value="5"></div>
                            <span class="noml" type="radio" name="starLv" value="1" style="margin-right: 3px;opacity:0;z-index: 10;width: 16px;height: 15px;display: block;float: left;cursor: pointer;"></span>
                            <span type="radio" name="starLv" value="2" style="margin-right: 3px;opacity:0;z-index: 10;width: 16px;height: 15px;display: block;float: left;cursor: pointer;"></span>
                            <span type="radio" name="starLv" value="3" style="margin-right: 4px;opacity:0;z-index: 10;width: 16px;height: 15px;display: block;float: left;cursor: pointer;"></span>
                            <span type="radio" name="starLv" value="4" style="margin-right: 3px;opacity:0;z-index: 10;width: 16px;height: 15px;display: block;float: left;cursor: pointer;"></span>
                            <span type="radio" class="nom5" name="starLv" value="5" style="opacity:0;z-index: 10;width: 16px;height: 15px;display: block;float: left;cursor: pointer;"></span>
                        </div>
                    </div>
                    <p class="list-title cut" style="display:none"></p>
                </div>
                <div class="textarea" style="margin-bottom:5px;padding:0px;width:100%;background-color:#f2bc66;border:solid 0px #ffffff">
                <textarea id="hearthis-commentTextarea" maxlimit="200" placeholder="Input your comments"/></div>
                <div class="clear">
                        <div class="post-btn" style="cursor:pointer;background-color:#ffffff;color:#000000" type="i18n" key="common_post"></div>
                        <span class="light-txt"><span class="light-txt promptNum">0</span>/200</span>                        
                    </div>
            </div>
        </div>
     </div>

Y'ello Top 10

Exclusive Music