@charset "utf-8";
@font-face {
	font-family: 'RSU';
	src: url('font/rsu_regular.eot');
	src: url('font/rsu_regular.eot?#iefix') format('embedded-opentype'),
		 url('font/rsu_regular.woff') format('woff'),
		 url('font/rsu_regular.ttf') format('truetype'),
		 url('font/rsu_regular.svg#rsu_regular') format('svg');
	font-weight: normal;
	font-style: normal;
}
body {
	margin: 0px;
	padding: 0px;
	background:url(../images/background.jpg) no-repeat top center fixed;
	background-size:100% auto;
}
.page{
	

	}
.wrap{
	width:939px;
	margin:0px auto;
	
	}
.blank{
	height:550px;
	display:block;
	}
.title_of_project{
	}
a:hover{
	opacity:0.9}
a, a img{
	border:none;
	text-decoration:none;
	color:inherit}
input[type="button"]{
	cursor:pointer;}
ul{
	padding:0px;
	margin:0px}
li{
	list-style:none}
.flag { width:100%; overflow:hidden}
.flag li{float:right; margin:5px 0px 5px 10px;}
.promotion{ 
	background:url(../images/bg-promotion-tab.png) no-repeat;
	padding:10px 0px 10px 87px;
}
.left-content, .info-left{ float:left;}
.right-content, .info-right{ float:right;}
.news-update{
	background:url(../images/bg_news&update.png);
	background-size:100% auto;
	height:295px;
	display:block;
	overflow:hidden}
.thumbnail1{
	position: relative;
	z-index: 0;
	/*top:650px;*/
}
.thumbnail1:hover{
	background-color: transparent;
	z-index: 50;
}
.thumbnail1 span{ /*CSS for enlarged image*/
	position: absolute;
	background-color: lightyellow;
	padding: 5px;
	left: -318px;
	top:-222px;
	border: 1px dashed gray;
	visibility: hidden;
	color: black;
	text-decoration: none;
}
.thumbnail1 span img{ /*CSS for enlarged image*/
	border-width: 0px;
	padding: 2px;
}
.thumbnail1:hover span{ /*CSS for enlarged image on hover*/
	visibility: visible;
	top:-222px;
	left: -318px; /*position where enlarged image should offset horizontally */
}
.news-update ul{
	margin:53px auto auto;
	overflow:hidden;
	width:97.25%;}
.news-update li{ 
	float:left;
	width:217px;
	height:223px;
	margin:2px 5px;
	overflow:hidden}
.news-update li img{
	width:100%;
	height:100%;}

.ads-banner{ width:300px; margin:10px auto}
.social-content-fb,.social-content-tw{
	background:url(../images/bg-tw.png) no-repeat;
	background-size:100% 100%;
	overflow:hidden;
	margin:5px auto;
	}
.social-content-fb{	
	padding:15px 15px 0px}
.social-content-tw{
	width:315px;
	height:510px;
	}
.social-content-tw iframe{
	width:92%;
	padding:10px 13px;
}
.customisable-border{
	border:1px solid #EE4599;
	}
.timeline-header .customisable-border{
	background:#EE4599}
.customisable-highlight{
	color:#fff}
.register-group, .countdown{
	float:left;}
.promotion{
	overflow:hidden}	
/********************************for countdown***************************************/
.countdown{
	margin-left:30px;}	
.g-number{	
	float:left;
	margin:3px 5px;
	width:65px;
	text-align:center}	
.numbers {
	background:url(../images/bg-number.png) repeat-x;
	border-radius:5px;
    width: 45px;
	height:59px;
	line-height:59px;
	margin:0px auto;
    font-family: Arial; 
    font-size: 28px;
    font-weight: bold;    
    font-style: normal;
    color: #FFFFFF;
}
.title {
    border: none;    
    padding: 0px;
    font-family: Arial; 
    font-size: 16px; 
    font-weight: normal;  
    color: #cd0263;      
    background: transparent;
	}
/********************************for countdown***************************************/
.campaign{
	width:895px;
	height:332px;
	background:url(../images/bg-campaign.png) no-repeat;
	display:block;
	float:left;
	padding:22px 25px;
	}
.campaign .left{
	float:left;
	width:267px;
	}
.des-campaign{
	font-family: 'RSU';
	font-size:16px;
	color:#eb4498;
	margin-bottom:20px;
	}
.register-campaign{
	background: url(../images/btn-register-campaign.png) no-repeat;
	border:none;
	width:253px;
	height:47px;}
.gallery{
	overflow:hidden;
	text-indent:0px;}
.gallery li{
	float:left;
	background:url(../images/campaign-bg-pic.jpg);
	width:130px;
	height:130px;
	padding:5px;
	border:1px solid #fd1396;
	margin:7px;}
.gallery li img{
	width:100%;
	height:100%;}


/****************************************wrap-campaign*******************************************/
.wrap-campaign{
	font-family: 'RSU';
	width:802px;
	background:url(../images/bg-cam-page.png);
	margin:10px auto;
	-moz-border-radius:15px;  
  	border-radius: 15px;  
  	-webkit-border-radius: 15px;
	box-shadow: 0 0 0 8px rgba(239,33,106,0.7);
	padding:0px 0px 10px;}
.head-campaign{
	clear:both}
.gallery-group{ overflow:hidden}
.gallery-group li, .picture, .picture img, .picture_info, .picture_info img, .information{
	-moz-border-radius:10px;  
  	border-radius: 10px;  
  	-webkit-border-radius: 10px;
	}
.gallery-group li{
	width:156px;
	height:246px;
	padding:1px;
	background:url(../images/bg-profile.png) no-repeat;
	margin:10px 21px;
	float:left;}
.picture{
	width:152px;
	height:152px;
	}
.picture img{
	width:100%;
	height:auto;}
.info{
	font-size:16px;
	line-height:19px;
	color:#fff;
	margin:3px;}
.info_list{
	margin:2px 3px}

.note{
	margin:20px;
	padding:5px 0px;
	border-top:1px dotted #e11f83;
	color:#402c31;
	font-size:14px;
	}
.information,.fb-comment{	
	margin:10px auto;}
.information{
	background:#ef216a;
	width:518px;
	height:262px;
	padding:5px;
	}
.information .info, .picture_info{
	float:left}
.information .info{
	font-size:22px;
	line-height:30px;
	margin-left:10px;}
.fb-comment{
	width:530px;
	border:1px solid #ef216a;}
.fb-comment, .title-comment{
	border-top-left-radius:10px;
	border-top-right-radius:10px;}	
.title-comment{
	padding:3px 7px;	
	background:#ef216a;
	color:#fff;
	font-size:24px;
	}
#detail-content{
	text-indent:1.5em;
	clear:both;
	float:left;
	margin:0px 0px 5px 0px;
	font-size:14px;
	text-align:justify;
	padding:15px 18px;
	background:#dedede;}
.center{ 
	text-align:center;
	line-height:5px;
	color:#000;
	}

#gallery_scroll{margin:10px 0;width:100%;height:104px;position:relative;clear:both}
#gallery_scroll .scrollable{height:104px;margin:0 40px;overflow:hidden;position:relative}
#gallery_scroll a.scroll_left,#gallery_scroll a.scroll_right{cursor:pointer;top:0;width:40px;height:104px;position:absolute;background-position:50% 50%;background-repeat:no-repeat}
#gallery_scroll a.scroll_left{left:0;background-image:url(http://www.sonicbang.net/skin/sonicbang/artist/img/left.png)}
#gallery_scroll a.scroll_right{right:0;background-image:url(http://www.sonicbang.net/skin/sonicbang/artist/img/right.png)}
#gallery_scroll a.scroll_left:hover{background-image:url(http://www.sonicbang.net/skin/sonicbang/artist/img/left-hover.png)}
#gallery_scroll a.scroll_right:hover{background-image:url(http://www.sonicbang.net/skin/sonicbang/artist/img/right-hover.png)}
#gallery_scroll .scrollable img{height:100px}
#gallery_scroll .scrollable a{display:inline-block;float:left;background-color:#FFF;padding:2px;margin:0 2px;box-shadow:0 0 5px rgba(0,0,0,0.5)}
.artist_img>img{border:5px solid #FFF;box-shadow:2px 2px 3px rgba(0,0,0,0.5)}
#artist_mv>div.banner>a{margin-bottom:5px;display:inline-block}

.gallery{
	margin:10px auto; 
	width:98%; 
	height:120px; 
	overflow: hidden; 
	padding:0px;
	position:relative}
.fancybox{
	float:left;
	margin:3px;
	position:relative}
.thumbnail-video{ height:80px; width:100%; overflow:hidden}
.thumbnail-video li{ 
	float:left;
	width:140px;
	height:80px}
.thumbnail-video li img{
	width:100%;
	height:100%}
.next{ margin-left:13px}
.news{
	background:#FFF;
	float:left;
	clear:both;
	margin:0px 0px 5px 0px;
	width:100%;}
.title{
	font-size:18px;
	font-weight:100;
	padding:5px 20px;
	margin:0px;
	color:#fff;
	background:#2c4065;}