.beta
{
	padding: 10px;
}

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

.beta .buttonwrapper
{
	margin-top:15px;
}

.beta .rollover
{	
	width:175px !important;
	height:45px !important;
}

.beta .rollover:hover
{
	background-position: -175px 0px;
}

.beta h1
{
	font-size: 18px;
	margin: 0px;
	padding:0px;
}

.beta h3
{
	font-size: 14px;
	color: #888;
}


body 
{
	margin: 0;
	padding: 0;
	background-color:#fff;
	color:#231f20;
}

#ebCache
{
	position: absolute;
	border : 1px solid #000;
	background-color: #fff;
	font-size:12px;
	padding: 1px;
	display:none;
	
}

.container
{
	width:980px;
	margin: 0 auto;	
	font-family: Tahoma,  Lucida Sans Unicode,Arial;
	font-size:12px;
}

.clear
{
	clear:both;
	margin:0px;
	padding:0px;
}

h1,h2,h3,h4,h5,h6,
ol,ul
{
	margin:0px;
	padding:0px;
	font-weight:normal;
}

ol,ul
{
	list-style-position:inside;
}

h1
{
	font-size:32px;
}

h2
{
	font-size:20px;
}
h3
{
	font-size:16px;
}
h4
{
	font-size:14px;
}

a 
{
	color:#336699;	
	font-weight:normal; 
	text-decoration:none; 
}

a:hover
{
	color:#cb822b;
	font-weight:normal;
}


.trans
{
	border: 0px;
}

/******** HEADER AND FOOTER ********/
.headerlogo .logo,
.copyright .cclogo,
.search .searchicon,
.toplower .compose, .toplower .listen, .toplower .people, .toplower .blog, .toplower .help
{
	display:block;
	width: 91px;
	height: 39px;
	background :url(../images/nav.png) 0 0 no-repeat;
}


.headerbar
{
	margin-top:5px;
	background: url(../images/header.jpg) repeat-x bottom;
	height:100px;
	padding:0px;
}

.headerlogo
{
	width:300px;
	height:60px;
	float:left;
}

.headerlogo .logo
{
	width: 300px;
	height: 58px;
	
}
.headerlogin
{
	float:right;	
	font-family:Verdana;
	color:#336699;
	margin-top:20px;
}

.headerlogin ul li,
.footerbar ul li,
.express ul li,
.toplinks ul li,
.musicplayer ul li
{
	list-style:none;
	display:inline;
	padding: 0px 2px 0px 2px;
}




.search .searchicon
{
	width: 28px;
	height: 28px;
	float:right;
	background-position: -308px 0px;
}
.search .searchicon:hover
{
	background-position: -336px 0px;
}

.toplower .compose
{
	background-position: 0px -58px;
}
.toplower .compose:hover
{
	background-position: -91px -58px;
}

.toplower .listen
{
	background-position: -182px -58px;
}
.toplower .listen:hover
{
	background-position: -273px -58px;
}

.toplower .people
{
	background-position: 0px -97px;
}
.toplower .people:hover
{
	background-position: -91px -97px;
}

.toplower .blog
{
	background-position: -182px -97px;
}
.toplower .blog:hover
{
	background-position: -273px -97px;
}

.toplower .help
{
	background-position: 0px -136px;
}
.toplower .help:hover
{
	background-position: -91px -136px;
}

.toplower .topbaricon
{
	float:left;
	width:91px;
}

.toplower
{
	padding-top:1px;
}

.toplower .search
{
	float:right;
	width:260px;
	padding-top:5px;
}

.toplower .search input
{
	font-family:Tahoma;
	font-size:14px;
	line-height:20px;
	vertical-align:middle;
	border: 1px solid #666666;
	width:220px;
	height:24px;
	margin:0px;
	padding-left:2px;
}

.footerbar
{
	margin-top:10px;
	background: url(../images/footer.jpg) repeat-x top;
	height:50px;
	text-align:center;
	color:#ffffff;
}

.footerbar a
{
	color: #fff;
}

.footerbar .nav
{
	padding-top:3px;
	font-size:11px;
	height:30px;
}

.footerbar .copyright
{
	font-size:9pt;
	color:#000;
}

.copyright .cclogo
{
	width:88px;
	height:31px;
	background-position: -182px -136px;
}

.content
{
	margin-top:10px;
}
/******** BOX LAYOUTS ***********/
.orangeframe
{
	background: #ffe7c1 url(../images/orangebox.jpg) no-repeat bottom right;	
}

.orangeframe h3
{
	color:#ff9933;
}

.blueframe
{
	background-color:#ccccff;
}

.blueframe h2
{
	font-family:Verdana;
	color: #336699;
	margin-bottom: 5px;
}

.orangeframe, .blueframe, .whiteframe
{
	padding: 4px 8px 4px 8px;
}


.rframe
{	
	display:block;
}

.rframe  .t 
{ 
  background: top url(../images/dot.gif) repeat-x; 
}

.rframe .r 
{
  background: right url(../images/dot.gif) repeat-y;
}

.rframe .b 
{ 
  background: bottom url(../images/dot.gif) repeat-x; 
}

.rframe .l
{ 
  background: top left  url(../images/dot.gif) repeat-y; 
}

.rframe .tr 
{ 
	float:right;
	background: top right url(../images/border.gif) no-repeat; 
	width:13px;height:13px;
}

.rframe .br 
{ 
	float:right;
	background: bottom right url(../images/border.gif) no-repeat; 
	width:13px;height:13px;
}

.rframe .bl
{ 
	background: bottom left url(../images/border.gif) no-repeat; 
	width:13px;height:13px;
}

.rframe .tl 
{ 
	background: top left url(../images/border.gif) no-repeat;
	width:13px;height:13px;
}

.rframe .content
{
	padding:0px 13px;
	margin-top:0px;
}

.bluebar
{
	background: url(../images/bluebar.jpg) repeat-x;
	height:35px;	
}

.bluebar h3
{
	display:inline-block;
/*	background: url(../images/bluelogo.jpg) 29% 0% no-repeat;*/
	margin-left:10px;
	padding-top:3px;
	float:left;
	
	height:100%;
	text-align:center;
	color:#fff;
	font-weight:bold;
}

.bluebar .left,
.bluebar .right
{
	min-height:0px;
	background: url(../images/nav.png) no-repeat;
	width:18px;
	height:30px;
	background-position: -328px -28px;
}

.bluebar .right
{
	background-position: -346px -28px;
}

/******** GENERAL LAYOUT *********/

#adsleft
{
	width:160px;
	height:625px;
}

.middle4
{
	width:700px;
}

.middle3
{
	width:750px
}

.middle2
{
	width:805px;	
}

.middle
{
	width:680px;
}

.left,.left160,.left410,.left460,.left550, .left580,
.middle, .middle2, .middle3, .middle4
{
	min-height:200px;
	float:left;
}

.right,.right160,.right410,.right460,.right530, .right550, .right380
{
	min-height:200px;
	float:right;
}

.left160
{	
	width:160px;
}

.left410
{
	width:410px;
}

.left460
{
	width:460px;
	min-height:120px;
}

.left550
{
	width:550px;
}

.left580
{
	width:580px;
}

.right160
{
	width:410px;
}

.right380
{
	width:380px;
}

.right410
{
	width:410px;
}

.right460
{
	width:460px;
	min-height:120px;
}

.right530
{
	width:530px;
}

.right550
{
	width:550px;
}

/******* rollover *****/
.rollover
{
	display:block;
	background-repeat:no-repeat;
	background-position:left bottom;
	width:136px;
}

.rollover:hover
{
	background-position: -136px 0px;
}

.rollover .trans
{
	width:136px;
	height:32px;
	border:0px;
}

.songplay .rollover,
.songplay .rollover .trans
{	
	float:left;
	width:128px !important;
}



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

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

.express .rollover,
.express .rollover .trans
{
	width:198px !important;
	height:73px !important;
}

.express .rollover:hover
{
	background-position:-198px !important;
}

.advancebox .rollover,
.advancebox .rollover .trans,
.beginbox .rollover,
.beginbox .rollover .trans,
.choosesong .rollover,
.choosesong .rollover .trans
{	
	width:198px !important;
	height:73px !important;
}

.advancebox .rollover:hover,
.beginbox .rollover:hover,
.choosesong .rollover:hover
{
	background-position:-198px !important;
}

.songwriting .rollover,
.songwriting .rollover .trans
{	
	float:left;
	margin-left:15px;	
	width:108px !important;
	height:108px !important;
}

.songwriting .rollover:hover
{
	background-position:-108px !important;
}

.express .makeasong
{
	background-image:url(../images/index_makeasong.jpg);
}


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

.wipcontinue
{
	background-image: url(../images/wip_continue.jpg);
}

.sing
{			
	float:left;
	background-image: url(../images/sing.jpg);
}
.mix
{		
	margin-left:26px;
	float:left;
	background-image: url(../images/mix.jpg);
}
.play
{	
	background-image: url(../images/play.jpg);
}

.ichords
{
	background-image:url(../images/help_chords.jpg);
}
.iarrange
{
	background-image:url(../images/help_arrange.jpg);
}
.imelody
{
	background-image:url(../images/help_melody.jpg);
}
.ilyrics
{
	background-image:url(../images/help_lyrics.jpg);
}
.ivocals
{
	background-image:url(../images/help_vocals.jpg);
}


/******** INDEX *******/
.express
{
	background: url(../images/express.jpg) no-repeat;
	height:290px;
	color:#102b43;
	font-size:14px;
	margin-top:15px;
}

.express .button
{
    margin: 185px 25px 0px 200px;
	width:198px;
	height:73px;
}

.express .right410
{
	margin-right:-20px;
}

.express h2
{
	margin-top:15px;
	color:#838484;
	font-weight:bold;	
}

.usersongs
{
	margin-top:20px;
}

.usersongs .bluebar .data
{
	margin-top:3px;
	padding: 0px 0px 0px 0px;
}

.usersongs .bluebar .data a
{
	padding: 0px 0px 0px 0px;

}

.steps .orangeframe
{
	padding: 0px;
}

.steps ol
{
	list-style-position:inside;
}

.steps h2
{
	background-color: #fff;
	font-size:20pt;
}
.steps
{
	font-size:12px;
}

.steps li
{
	font-size:14px;
	padding: 6px 0px 6px 4px;
}

.steps li.even
{
	background-color: #fff;
}

.steps .whitespace
{
	background-color:#fff;
	height:10px;
}

/******* MUSIC *******/

.grayline
{
	margin-top:10px;
	margin-bottom:10px;
	border-bottom: 1px solid #888;	
}

.topheader h1
{
	font-size:28px;
	margin-bottom:10px;
}

.toplinks
{
	margin-top:10px;
	color: #336699;
	padding-bottom:5px;
}

.alphabet
{
	padding-left:35px;
	color:#8c8c8c;	
}

.alphabet a,
.alphabet span
{
	margin: 0px 2px;
}

/******* CREATE / COMPOSE ********/

.composepage
{
	width:100%;
}

.composepage .compose_bg
{
	background-image:url(../images/compose_bg.jpg);
	height:220px;
}

.composepage h1
{
	font-size:30px;
}

.composepage .wrapper
{
	margin: 0px 60px;
}

.composepage .introtext
{
	font-size: 16px;
}

.Happy, .Sad, .Rap,
.beginner, .advance, .buildme, .usethis
{
	display:block;
	width:198px;
	height: 73px;
	background: url(../images/buttons.png) 0 0 no-repeat;
	margin: 0px auto;
}

.beginner
{
	background-position: 0px -73px;
}
.beginner:hover
{
	background-position: -198px -73px;
}

.advance
{
	background-position: -396px -73px;
}
.advance:hover
{
	background-position: -594px -73px;
}

.buildme
{
	background-position: 0px 0px;
}
.buildme:hover
{
	background-position: -198px 0px;
}

.usethis
{
	background-position: -396px 0px;
}
.usethis:hover
{
	background-position: -594px 0px;
}


.composepage .beginbox, .composepage .advancebox
{
	margin-top:20px;
	width:380px;
	float:left;
}

.composepage .advancebox
{
	margin-left:35px;
}

.composepage p
{
	margin: 0 0 0 10px;
	font-size:18px;
}

.composepage .compose_bg .beginbox,
.composepage .compose_bg .advancebox
{
	margin: 35px 0px 0px 25px;
}

.composepage .compose_bg .advancebox
{
	margin-left: 55px;
}

.composepage .advancebox ul li, .composepage .beginbox ul li
{
	list-style-type:none;
	margin:0;
	padding:0;
	list-style-position:outside;
	font-size:16px;
}

.composepage .buildmusic,
.composepage .usemusic
{
	margin: 20px 0px 0px 30px;
	float:left;
	width:380px;
	font-size: 16px;
}

.composepage .usemusic
{
	margin-left:60px;
}

.composepage .smallmusicplayer
{
	margin: 15px 0px 0px 280px;
	width:350px;
}


.Happy
{
	background-position: 0px -146px;
}
.Happy:hover
{
	background-position: -198px -146px;
}

.Rap
{
	background-position: -396px -146px;
}
.Rap:hover
{
	background-position: -594px -146px;
}

.Sad
{
	background-position: 0px -219px;
}
.Sad:hover
{
	background-position: -198px -219px;
}




/******* LOGIN AND REGISTER *******/
.registerpage .ebCaptcha
{
	float:left;
	padding-right:15px;
}

.registerpage .ebCode .big
{
	display:block;	
	padding-bottom:5px;
	font-size:14px;
}

.registerpage .ebCode input
{
	width:250px;
	font-size:14px;
}


/****** MUSIC PLAYER ******/
.verticalmusicplayer .musicplayer
{
	padding: 0px 15px 10px 15px;
}

.verticalmusicplayer .playerwrapper
{
	width:355px;
}

.horizontalmusicplayer .musicplayer
{
	padding: 0px 10px 0px 12px;
}

.musicplayer h3
{
	margin-left:5px;
	font-weight:bold;
}

.verticalmusicplayer #flashcontent
{
	text-align:center;
}

#flashcontent
{
	width:350px;
}

#tools #flashcontent
{
	width:100%;
}

.musicplayer .fieldLabel
{
	float:none !important;
	margin-left:5px;
}

.musicplayer ul li
{
	padding: 0px 40px 0px 0px !important;
}

.hstats
{
	width:360px;
	float:right;
}

.horizontalmusicplayer .player
{
	float:left;
}

.player
{
	width:350px;
}

.urllabel
{	
	font-size:10px;
	color:#333 !important;
}

.urlbox
{
	float:right;
	width:278px !important;
	padding: 2px 1px 2px 2px;
	border: 1px solid #739db9 !important;
	font-size:11px;
	color:#838383; 
}
/*********** RATING **********/
.statbox, .ratingbox
{
	float:left;
	width:110px;
	color:#8c8c8c;
	height:18px;
	padding-top:5px;
}

.ratingbox
{
	float:right;
	width:240px;
	text-align:right;
}

.ratingbox img
{
	vertical-align:middle;
	position:relative;
	top:-1px;
}


/*********** LEARN MORE **********/
.learnmorepage
{
	margin: 0px 50px 0px 50px;
	font-size:14px;
}

.learnmorepage .blue
{
	background-color:#F7FCFD;
}


/************ HELP *********/
.songwriting
{
	font-size:14px;
}

.songwriting .right
{
	font-size:14px;
}

.songwriting .selected
{
	background-position:-108px;
}

 .songwriting h1
{
	display:none;
}

.songwriting h4
{
	font-weight:bold;
}

.songwriting .logo
{
	width:630px;
	margin:auto;
	margin-top:25px;
}

.songwriting .list
{
	list-style:disc !important;
	padding:3px 0px 3px 0px;
}

.songwriting .list li
{
	margin-left:20px;
	padding-left:5px;
}

.songwriting .logo ul
{	
	list-style:none;
}

.songwriting .logo ul li
{
	display:inline;
	padding: 0px !important;
}


#chords .content,#arrange .content,#melody .content,#lyrics .content,#vocals .content
{
	font-size:14px;
	height:320px;
}

#arrange,#melody,#lyrics,#vocals
{
	display:none;
}

#chords{ 	background-color:#B6E1F8;	}
#arrange{ 	background-color:#FFF5AB;	}
#melody{ 	background-color:#D9EAC2;	}
#lyrics{ 	background-color:#FFE0A9;	}
#vocals{ 	background-color:#FBDBE9;	}

/*********** INFO **********/
.info .left160
{
	width:180px;	
}
.info ul
{
	list-style: none;
}

.info ul li
{
	padding-left:15px;
}
/************ MESSAGES *********/
.messages
{
}

.messages h3.fieldLabel
{
	width:auto !important;
}

.messages ul.options
{
	list-style:none;
}

.messages .line
{
	padding-top:4px;
	border-bottom: 2px solid #ccc;
}

.messages .timestamp,
.messages .body
{
	padding-top: 4px;
	color:#999;
}

.messages #msglist .text
{
	padding: 14px 5px 5px 5px;
}

.messages .mail
{
	float: left;
	width: 40px;
	height: 70px;
	padding: 5px;
}

.messages .unread .mail
{
	background: url(../images/mail.gif) 50% 50% no-repeat;
}

.messages .unread,
.messages .unread a 
{
	font-weight:bold;	
}
.messages .unread .timestamp,
.messages .unread .body
{
	color:#777;
}

.messages .link:hover .body
{
	color: #bbc;
}

.messages .link
{
	float: left;
	display: block;
	width:360px;
	
}

.messages .even
{
	background-color:#e5e5ff;
}

.messages .chkbox
{
	float: left;
	width: 25px;
	padding: 0px 0px 0px 3px;
	margin-top:32px;
}

.messages .icon
{
	float:left;
	width:70px;
	padding: 5px;
}

.messages .from
{
	float:left;
	width: 160px;
	margin: 0px 20px 0px 10px;
}

.messages .fieldLabel
{
	float:left;
	width:80px;
	margin-bottom:4px;
	padding: 0px !important;
}

.messages .fieldinput
{
	width:400px;
	border: 1px solid #8c8c8c;
	margin-bottom:6px;
}

.messages textarea.fieldinput
{
	height:210px;
	overflow:auto;
}

#contactCache
{
	border : 1px solid #000;
	
	width: 400px;
	background-color: #fff;
	position:absolute;
}

#tolist
{
	min-height:22px;
	width:400px;
	margin-left:80px;
	line-height:22px;
}

#tolist div
{
	display:block;
	float:left;
	font-family:Verdana;
	margin: 0px 4px 2px 0px;	
	padding:0px 2px 0px 2px;
	height:22px;
}

#tolist div img
{
	margin: 0px 0px -3px 2px;
	width:17px;
	height:16px;
	background: url(../images/x.gif) 0 0 no-repeat;
	cursor:pointer;
}

.tool_contact
{
	height:20px;
	background:#fff;
	padding: 1px;
}

.tool_contact img
{
	float:left;
	width:20px;
}

.contactname
{
	padding-left:3px;
	line-height:20px;
}

.tool_contactlist
{
	padding: 1px 0px 1px 0px !important;
	height:16px !important;
	overflow:hidden !important;
}

.contact_selected
{
	background-color: #dedeff;
	cursor:pointer;
}

.tool_toolbar h2
{
	float:left;
	margin-right: 4px;
}

.tool_toolbar .chkbox
{
	margin-top:4px;
	margin-right:5px;
}

.bluebutton,
.tool_toolbar .button
{
	border: 1px solid #212559;
	border-top-color:#D9DFEA;
	border-left-color:#D9DFEA;
	background-color: #3C5A99;
	padding: 4px;
	width: 120px;
	margin-right:5px;
	color:#fff;
}

.tool_toolbar .button:hover
{
	color:#aaf;
}


.thread .fieldLabel
{
	float:none;
}

.thread .from
{
	padding-top:4px;
	text-align:right;
	margin-left:-10px;	
}

.thread .body
{
	margin-left:250px;
}

/************ AVATAR UPLOAD *********/

.tool_resizer
{
	cursor:move;
}

#imgcontainer 
{
	min-height:300px;
}
#imgcropper 
{
	border:2px solid #FFCC00;
	height:206px;
	margin:auto;
	width:206px;
	z-index:100;
}