/*------------------------------------------ general -------------------------------------------*/

.main
{
	/*border:1px solid #983929;*/
	height:100%;
	margin-top:10px;
}

h5
{
	font-size:12px;	
}

/*------------------------------------- blue box ------------------------------------------------------*/

.blue-box 
{
  float: left;
  background: #fff;
}

.blue-box  .box-top 
{ 
  background: top url(../images/box/top.jpg) repeat-x; 
}

.blue-box .box-right 
{
  background: right url(../images/box/right.jpg) repeat-y;
}

.blue-box .box-bottom 
{ 
  background: bottom url(../images/box/bottom.jpg) repeat-x; 
}

.blue-box .box-left 
{ 
  background: left url(../images/box/left.jpg) repeat-y; 
}

.blue-box .box-top-right 
{ 
  background: top right url(../images/box/top-right.jpg) no-repeat; 
}

.blue-box .box-bottom-right 
{ 
  background: bottom right url(../images/box/bottom-right.jpg) no-repeat; 
}

.blue-box .box-bottom-left 
{ 
  background: bottom left url(../images/box/bottom-left.jpg) no-repeat; 
}

.blue-box .box-top-left 
{ 
  background: top left url(../images/box/top-left.jpg) no-repeat;
}

.blue-box .box-content 
{
  padding: 24px 20px;
}

/*-------------------------------------- white box --------------------------------------------*/
.white-box
{
	float: left;
	background:#fff;
	width:100%;
}

.white-box .top
{
	border-bottom:1px solid #58595B;		
}

.white-box .title
{
	color:#58595b;
	font-size:16px;
	margin-left:10px;
}

.white-box .box-content
{
	background:#fff;
	padding-top:5px;
}


/*------------------------------------------------- spacer --------------------------------------------------------*/

.spacer5
{
	margin-top:5px;
}
.spacer10
{
	margin-top:10px;
}
.spacer20
{
	margin-top:20px;
}
.spacer30
{
	margin-top:30px;
}
.spacer40
{
	margin-top:40px;
}
.spacer60
{
	margin-top:60px;
}
.vspacer40
{
	width:40px;
	height:200px;
	float:left;
}
.vspacer70
{
	width:70px;
	height:100px;
	float:left;
}

.vspacer75
{
	width:75px;
	height:200px;
	float:left;
}

/*----------------------------- field input ----------------------------------------------*/
.fieldLabel
{
	color:#8c8c8c;
	font-style:normal;
	padding-right:3px;
}

.fieldValueGreen
{
	color:#86c542;
	font-style:normal;
}

.feldValueBlack
{
	color:#000;
	font-style:normal;
}

.feildValueGray
{
	color:#8c8c8c;
	font-style:normal;
}

.fieldInputValue
{
	text-align:left;
	font-style:normal;
	border: 1px solid #666; 	
}

.fieldCheckBox input
{
	border:1px solid #666;
}

.captchainput input
{
	text-align:left;
	font-style:normal;
	border: 1px solid #666;
}

/*----------------------------------- profile ------------------------------------------*/
.profile 
{
	width:100%;
}

.profile .viewall
{
	float:right;
}

.profile .infoBox
{
	min-height:210px;
}

.profile .avatar
{
	float:left;
}

.profile .data
{
	float:left;
	margin-left:10px;
}

.txtspace
{
	margin:5px 0px 9px 5px;
}

.profile .txtspace
{
	margin: 0px 0px 6px 5px;
}

#nametitle
{
	padding:5px 5px 5px 0px;
}

/*-------------------------------- user details --------------------------------------*/
.profile #nametitle
{
	float:left;
	padding: 0px 30px 0px 10px !important;
}

.profile .summary ul li
{
	float:left;
	display:inline;
	padding-right:40px;
	vertical-align:bottom;
	margin-top:3px;
}

.profile .summary ul,
.profile .summary ul li,
.profile .summary ul li span
{
	line-height: 20px;
}

.profile .left160 ul.links
{
	margin-left:5px;
	list-style-position:outside;	
}

.profile .left160 ul.links li
{
	list-style:none;
	padding:4px 0px 4px 0px;
	margin-left:5px;
}

/*-------------------------------- profile edit --------------------------------------*/
.longline
{
	border-top:1px solid #8c8c8c; 
	margin-top:10px;
	margin-bottom:10px;
}

.profile .editContent
{
	float:right;
	width:750px;
}

.editfielddata
{
	width:100%;
	margin:5px 5px 5px 0px;
}

.editfieldtxt, .editfieldtxt2
{
	float:left;
	width:80px;
	text-align:left;
	margin:0;
	padding:5px 0px;
	color:#8c8c8c;
}

.editfieldtxt2
{
	width:110px;	
}

.editfieldinput
{
	float:left;
	margin:0;
	padding:5px 5px 5px 0px;
}

.editleftbar
{
	margin-top:5px;
}

.editleftbar a
{
	padding:2px;
}

.editlink
{
	margin:5px 10px 5px 5px;
}

.editlink span
{
	background-color:#369;
	color:#fff;
	padding:2px;
}

.editinfotxt
{
	padding:5px;
}

.currentImage
{
	float:left;
	width:210px;
	padding-right:10px;
}

.browseImage
{
	float:left;
	width:400px;
}

.updateButton
{
	text-align:center;
	padding-top:10px; 
	padding-bottom:20px;
}

/*--------------------------- list of users -------------------------------------*/

.profilelistbox
{
	width:100%;
}

.profilelistbox .pinfobox
{
	float:left;
	width:132px;
	height:180px;
	margin:0px 20px 0px 0px;
	padding:0;
}

.profilelistbox .pinfobox2
{
	float:right;
	width:132px;
	height:180px;
	margin:0px;
	padding:0px;
}

.profilelistbox .pinfobox, .pinfoxbox2 .pdata
{
	width: 132px !important;
	margin-left: 0px !important;
}

.profilelistbox .ptitle
{
	margin-top:5px;
	text-align:center;	
}

.peoplelistbox
{
	width:100%;
	height:100%;
}

.peoplelistbox .peopleinfobox
{
	float:left;
	width:135px;
	margin:15px 32px 10px 0px;
}

.peoplelistbox .peopleinfobox2
{
	float:right;
	width:135px;
	margin:15px 0px 0px 0px;
}

.peoplelistbox .peoplename
{
	text-align:center;
	margin-top:5px;
	margin-left:0px;
}

.peoplecategory
{
	margin-top:20px;
}

.peoplecategory .title
{
	color:#8c8c8c;
}

/*------------------------------ fans box --------------------------------------------*/
.fanspad
{
	float:left;
	margin-top:5px;
	margin-right:10px;
	margin-bottom:10px;
}

.fanspad2
{
	float:right;
	margin-top:5px;
	margin-bottom:10px;
}


/*------------------------ music page --------------------------------------*/
.music 
{
	width:100%;
	height:100%;
}

.musiclistbox
{
	width:100%;
	height:100%;
}

.musiclistbox .mainsonginfobox
{
	float:left;
	width:135px;
	margin:15px 32px 10px 0px;
}

.musiclistbox .mainsonginfobox2
{
	float:right;
	width:135px;
	margin:15px 0px 0px 0px;
}

.musiclistbox .songinfobox
{
	float:left;
	width:132px;
	margin:15px 30px 10px 0px;
}

.musiclistbox .songinfobox2
{
	float:right;
	width:132px;
	margin:15px 0px 0px 0px;
}

.musiclistbox .userdetailbox
{
	float:left;
	width:134px;
	margin:15px 20px 0px 0px;
}

.musiclistbox .userdetailbox2
{
	float:right;
	width:134px;
	margin:15px 0px 0px 0px;
}

.musiclistbox .songduration, .songlisten, .songby, .songtitle, .songplay, .songwip, .songwipmix
{
	text-align:left;
	margin-top:5px;
	margin-left:0px;
}

.musiclistbox .songtitle a,
.songtitle a
{
	color:#cb822b;
	text-decoration: none;
}

.musiclistbox .songtitle a:hover
{
	color:#336699;
	text-decoration: none;
}

.songwip .sing
{
	background-image:url(../images/Continue-Sing-3.jpg);
}

.songwip .mix
{
	background-image:url(../images/Continue-Mix-3.jpg);
	margin-left:0px !important;
}

.songwipmix .mix
{
	background-image:url(../images/wip-mix.jpg);
	margin-left: 0px !important;
}

.songwipmix .rollover .trans,
.songwipmix .rollover
{
	width:128px !important;
	height:32px !important;
}

.songwipmix .rollover:hover
{
	background-position:-128px 0px !important;
}	

.songwip .rollover .trans,
.songwip .rollover
{	
	width:64px !important;
	height:32px !important;
}

.songwip .rollover:hover
{
	background-position:-64px 0px !important;
}

/*------------------------------------- edit music list ---------------------------------------*/
.musiceditdata,
.musiceditdata2
{
	float:right;
	width:300px;
	margin-bottom:10px;
	padding:5px;
	border:1px solid #7dc6e4;
}

.musiceditdata
{
	float:left;
	margin-right:15px;
}

.musiceditinfo .txtinfo
{
	padding:5px;
}

.musiceditinfo .leftdata
{
	float:left;
	margin-left:10px;
}

.musiceditinfo .rightdata
{
	float:left;
	margin-left:30px;
}

.musiceditlinks
{
	padding:5px 5px 5px 0px;
}

.musiceditlinks a
{
	color:#ff9600;
}

.musiceditlinks a:hover
{
	color:#3d58a6;
}

.musiceditlinks .linktxt
{
	margin:10px 10px 10px 10px;
}

/*----------------------- music list page top list and left categoy ---------------------------------------------*/

#musiccategory
{
	height:100%;
	width:100%;
}

.toplinks ul 
{
	padding:0px;
	margin:0px;
	display:inline;	
}

.toplinks li 
{
	list-style:none;
	display:inline;
	padding: 0px 5px 0px 5px;
	background-color:Transparent;
	color:#ccc;
}

/*--------------------------------- horizontal music player -------------------------------------*/
.horizontalmusicplayer,
.verticalmusicplayer
{
	height:100%;
	width:100%;
}

/*------------------------------- pagination -------------------------------------------------*/
.pagination
{
	clear:both;
	height:30px;
	margin-top:20px;
	border:1px solid #979EA4;
}

.pagination .txt
{
	padding:5px;
}

/*--------------------------- comments ------------------------------------------*/
.comments .menucontent
{
	padding: 0px !important;
}

.comments .avatar_tn
{
	float:left;
}

.comments .commentbox
{
	width:100%;
	height:100px;
	border:1px solid #979ea4;
}

.comments .infobox
{
	text-align:left;
	min-height:100px !important;
}

.comments .data
{
	float:none !important;
	height:100% !important;
	margin-top:0px !important;
	margin-left:80px !important;
	width: auto !important;
	padding-right:5px;
}

.comments .line
{
	border-bottom:1px solid #8c8c8c;
}


/*----------------------------- avatar ----------------------------------------------*/

.avatar,
.avatar_tn,
.avatar_icon
{
	width:210px;
	height:210px;
	border:1px solid #8c8c8c;
	padding:1px;
}

.avatar_tn
{
	width:64px;
	height:64px;
}

.avatar_icon
{
	width:128px;
	height:128px;
}

.avatar img
{
	vertical-align:middle;
}


a:hover .avatar_tn,
.avatar_icon:hover,
.avatar_tn:hover
{
	border-color: #cb822b;	
	border-width:2px;
	margin: -1px;
}

/*--------------------------------------- search -------------------------------------------------*/

#searchbar
{
	padding:0px;
	margin: 10px 0px 0px 160px;
}

.searchResult
{
	width:690px;
}

.searchResult .infobox
{
	float:left;
	width:132px;
	margin:0px 49px 0px 0px;
	padding:0;
}

.searchResult .infobox2
{
	float:right;
	width:132px;
	margin:0px;
	padding:0px;
}

.searchResult .userName
{
	margin-top:5px;
	text-align:center;
}

.searchResult .songduration,
.searchResult .songlisten,
.searchResult .songby,
.searchResult .songtitle
{
	text-align:left;
	margin-top:5px;
	margin-left:0px;
}

.searchResult .songtitle a
{
	color:#cb822b;
	text-decoration: none;
}

.searchResult .songtitle a:hover
{
	color:#369;
	text-decoration: none;
}

/*------------------------ tag -------------------------------------*/
.musictag
{
	margin-top:5px;
}

.musictag .txt
{
	margin:0px;
	padding:0px;
}

.musictag .title
{
	color:#8c8c8c;
}

.musictag .list
{
	margin-left:5px;
}

/*-------------------------- general company information ----------------------------------------*/
.info
{
	width:100%;
}

.info .right
{
	width:780px;
}

.info .title
{
	color:#231F20;
	font-size:18px;
}
.infotxt .gap
{
	margin-top:5px;
}

.infotxt .gap .fieldLabel
{
	float:left;
	width:80px;
}

.infotxt .fieldtxtbox
{
	width:300px;
	border:1px solid #666;
}

.infotxt
{
	float:none;
	background-color:#fffaf1;
	padding:0px;
	margin:0px;
	min-height:300px;
}

.infotxt .t, .infotxt .l, .infotxt .b ,.infotxt .r
{
	background-image: url(../images/odot.gif);
}

.infotxt .tl, .infotxt .tr, .infotxt .bl ,.infotxt .br
{
	background-image: url(../images/oborder.gif);
}

.infotxt .rframe .content
{
	min-height:300px;
}
.faqpage .infotxt,
.faqpage .infotxt .rframe .content
{
	min-height:50px;
}

.infotxt p
{
	margin:0;
	padding:2px;
}

.infotxt #ipad, .fpad
{
	padding:0px 10px 10px 10px;
}

.infotxt ul
{
	margin-left:22px;
}

.infotxt ul li
{
	padding-left:0px !important;
}

.infotxt a
{
	cursor:pointer;
}

.sideinfo
{
	background-color:#f7fcfd;
	padding:0px;
	width:100%;
	margin-top:10px;
}

.sideinfo a,
.sideinfo a:hover
{
	font-size: 14px;
	text-decoration:none;
	text-align:center;
}

.sideinfo a:hover
{
	text-decoration:underline; 
}

.sideinfo .linkspace
{
	margin:0px 5px 10px 5px;
}

.ctitle
{
	color:#E47325;
	margin-bottom:5px;
}

#sub1, #sub2, #sub3, #sub4, #sub5, #sub6, #sub7, #sub8, 
#sub9, #sub10, #sub11, #sub12, #sub13, #sub14, #sub15,
#sub16, #sub17, #sub18, #sub19, #sub20, #sub21, #sub22
#sub23, #sub24, #sub25, #sub26, #sub27, #sub28
{
	margin-top:5px;
	font-weight:normal;
}

.faq
{
	margin:5px;
}

.faq .pad
{
	padding:0px 0px 5px;
}



/*--------------------------------------- register info merge with calvin's css -------------------------------------------*/

.registerinfo, .logininfo, .forgotpasswordinfo
{
	padding:5px 10px 10px 15px;	
}

.spacerline
{
	border-bottom:1px solid #8c8c8c;	
}

.editline
{
	padding:10px 5px 5px 5px;
	clear:both;
}

.registerpage h2, .loginpage h2, 
.forgotpasswordpage h2
{
	font-size:18px;
}

.confirmbox
{
	text-align:center;
	margin-top:30px;	
	height:120px;
	margin-left:75px;
	width:850px;
}

.confirmbuttontext
{
	width:100%;
}

.confirmbuttontext h1
{
	font-size:24px;
}

.confirmbuttonbox, .confirmbuttontext
{
	text-align:left;
	margin-top:20px;
	padding:10px;
}

.confirmbuttonbox 
{
	width:100%;
}

.confirmbuttonbox .confirmbutton
{
	float:left;
	margin:10px;
}

.confirmbuttonbox .rollover,
.confirmbuttonbox .rollover .trans
{	
	width:259px !important;
	height:88px !important;
}

.confirmbuttonbox .rollover:hover
{
	background-position:-259px 0px !important;
}

.confirmbuttonbox .myAccount
{
	background-image:url(../images/register_myaccount.jpg);
}

.confirmbuttonbox .browseMusic
{
	background-image:url(../images/register_browse_music.jpg);
}

.confirmbuttonbox .makeasong
{
	background-image:url(../images/register_make_song.jpg);
}

.confirmbuttonbox .karaoke
{
	background-image:url(../images/register_karaoke.jpg);
}

.loginpage .title, .registerpage .title, 
.forgotpasswordpage .title
{
	margin-left:10px;
}

.loginpage .fieldLabel, .registerpage .fieldLabel, 
.forgotpasswordpage .fieldLabel
{
	float:left;
	min-height:1px;
	min-width:84px !important;
	width: 84px;
	font-size:14px;
}

.loginpage .fieldInput, .registerpage .fieldInput, 
.forgotpasswordpage .fieldInput
{
	margin-left:80px;
}

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

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

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

.forgotpasswordinfo .submit, .publishinfo .submit
{
	background-image:url(../images/submit.jpg);
}

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

.logininfo .rollover,
.logininfo .rollover .trans,
.registerinfo .rollover,
.registerinfo .rollover .trans,
.forgotpasswordinfo .rollover,
.forgotpasswordinfo .rollover .trans,
.publishinfo .rollover,
.publishinfo .rollover .trans
{	
	width:175px !important;
	height:45px !important;
}

.logininfo .rollover:hover,
.registerinfo .rollover:hover,
.forgotpasswordinfo .rollover:hover,
.publishinfo .rollover:hover
{
	background-position:-175px 0px !important;
}

/*----------------------- single music -----------------------*/

.singlemusic
{
	width:100%;
}

.singlemusic h4
{
	color:#8c8c8c;
}

.singlemusic .avatar_icon
{
	float:left;
}

.singlemusic .profiledata
{
	float:left;
	margin-left:10px;
	padding:5px;
}

.publishpage
{
	width:820px;
}

.publishinfo
{
	width:100%;
}

.publishinfo .publishsend
{
	width:100%;
}

/*---------------------- compose template ----------------------*/

.template
{	
	width:100%;
}

.templateList
{	
	float:left;	
	width:275px;
	text-align:center;
}

/*---------------- index ------------------------*/

.indexJoinUserL
{
	float:left;
	margin-right:4px;
	width:127px;
	height:100px;	
}

.indexJoinUserR
{
	float:left;
	width:64px;
	height:100px;
}

.indexFeatureMusic
{
	float:left;
	width:218px;
	height:100px;
	margin-right:12px;		
}

.indexFeatureMusic .mimage
{
	float:left;
	width:70px;
	margin-right:10px;
}

.indexFeatureMusic .info
{
	float:left;
	width:100px;
}

/*--------------- SMOOTHBOX CSS ---------------*/
html,body{min-height:100%;height:auto!important;height:100%;}#TB_window{font:12px Arial,Helvetica,sans-serif;color:#333;}#TB_secondLine{font:10px Arial,Helvetica,sans-serif;color:#666;}#TB_window a:link{color:#666;}#TB_window a:visited{color:#666;}#TB_window a:hover{color:#000;}#TB_window a:active{color:#666;}#TB_window a:focus{color:#666;}#TB_overlay{position:absolute;z-index:100;top:0;left:0;background-color:#000;}#TB_window{position:absolute;background:#fff;z-index:102;color:#369;border:4px solid #E47325;text-align:left;}#TB_window img{display:block;margin:15px 0 0 15px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-top:1px solid #666;border-left:1px solid #666;}#TB_caption{height:25px;padding:7px 30px 10px 25px;float:left;}#TB_closeWindow{height:25px;padding:11px 25px 10px 0;float:right;}#TB_closeAjaxWindow{padding:5px 10px 7px 0;margin-bottom:1px;text-align:right;float:right;}#TB_ajaxWindowTitle{float:left;padding:7px 0 5px 10px;margin-bottom:1px;font-weight:bold;}#TB_title{background-color:#e8e8ff;height:27px;}#TB_ajaxContent{clear:both;padding:2px 15px 15px 15px;overflow:auto;text-align:left;line-height:1.4em;color:#000;}#TB_ajaxContent p{padding:5px 0 5px 0;}#TB_load{position:absolute;display:none;height:100px;width:100px;z-index:101;}#TB_HideSelect{z-index:99;position:absolute;top:0;left:0;background-color:#fff;border:none;}#TB_iframeContent{clear:both;border:none;margin-bottom:-1px;margin-top:1px;}* html #TB_iframeContent{margin-bottom:1px;}