@CHARSET "UTF-8";

/************* layout ***************/

body { text-align: center; background: #eeeeee; color: #fff; font-family:Arial,Helvetica,sans-serif; font-size:10pt; margin: 0; font-weight: normal;}
#container { text-align: left; margin: 0 auto; width: 960px;}

.sociallinks {border-bottom: 1px solid #ccc; margin: 0px auto 3px auto; padding: 5px; padding-top: 0px; font-size: 9pt; color: #444; text-align: center;}
.sociallinks img {margin-bottom: 5px; position: relative; top: 9px; margin-left: 5px;}
	
#header {margin: 20px 0 0 0; color: white; position: relative; z-index: 1;}
#headerlogo {position: absolute; left: -10px; top: 0px;}
#headerbg {background: url('../img/header-bg-trans.png') repeat-x top; margin: 0px 11px 0px 279px; height: 103px;}
#headerend {position: absolute; right: -10px; top: 0px; }

#logolink {display: block; position: absolute; cursor: pointer; top: 10px; left: 86px; width: 190px; height: 30px;}
#headerlinks {position: absolute; bottom: 26px; left: 96px; color: #666; width: 840px;}
#headerlinks a, #headerlinks a:visited {color: #666; font-weight: normal;}


#navlinks {float: left;}

#userinfo {float: right;}
#userinfo img {position: relative; top: 6px;}

.titleimage {text-align: center; margin-bottom: 0px;}

h2 {text-align: center; margin: 0px; margin-bottom: 15px;}
h3 {font-size: 1.1em; color: #2D2445; font-weight: bold;}

h2 .info {font-size: 10pt; color: #333; font-weight: normal;}

#teaser {width: 600px; height: 300px; margin: 0px auto;}

.random-box {width: 721px; height: 69px; background: url('../img/random-bg-trans.png'); padding: 0; margin: 0px 5px 10px 5px; text-align: center; }
.random-box table, .random-box tr, .random-box td {border: none; height: 100%; padding: 0 20px; margin: 0; vertical-align:middle; width: 100%; text-align: center; background: none;}

.pollcode {width: auto; margin: 0px; padding: 0px; border: none;}
.pollcode table {border: none;}
.pollcode input[type="submit"]  {float: none; clear: none; margin: 7px; padding: 0;}
.pollcode input[type="radio"] {float: none; clear: none; margin: 0 3px; padding: 0;}

#content{ clear: both; color: #333; padding: 80px 5px 0px 5px; overflow: auto; margin: -80px 6px 0 10px; background: white; border: 1px solid #ccc; border-bottom: none; text-align: center;}

.textarea {padding: 10px; text-align: left;}
.textarea p {text-align: left; margin: 15px 0px;}

.roundtop {height: 8px; border: none; position: relative; margin: 6px 15px 0 15px; background: white; border-top: 1px solid #ccc;}
.roundtop .left {position: absolute; left: -9px; top: -1px; background: url('../img/top-left-round-trans.png'); width: 9px; height: 9px;}
.roundtop .right {position: absolute; right: -9px; top: -1px; background: url('../img/top-right-round-trans.png'); width: 9px; height: 9px;}

.curledbottom {height: 23px; border: none; position: relative; margin: 0 100px 0 100px; background: url('../img/bottom-curlup-trans.png'); overflow: show;}
.curledbottom .left {position: absolute; left: -100px; top: 0px; background: url('../img/bottom-left-curlup-trans.png'); width: 100px; height: 23px;}
.curledbottom .right {position: absolute; right: -100px; top: 0px; background: url('../img/bottom-right-curlup-trans.png'); width: 100px; height: 23px;}

.box-content {padding: 4px 15px 3px 15px; background: white; border-right: 1px solid #ccc; border-left: 1px solid #ccc; margin: 0 6px; position: relative; overflow: hidden;}



#two-column-left {float:left; width: 730px; text-align: left;}
#two-column-right {float:right; width: 200px; margin-right: 0px; text-align: left;}

#footer {clear: both; padding: 10px 10px; text-align: center; color: #666;}


/************* popup layout *******************/

body.popup {background: white; color: #333;}

/************ tabs *****************/



.tabwrapper {margin: 12px; padding: 0;}
/*ul.tabs {border-bottom: 1px solid #ccc; background: #F8F8F8; list-style-image:none; padding:12px 0 0 6px; margin: 0; display: block;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}
.tabs li {display: block; float: left;  margin: 0;}
.tabs li a {margin:0 5px -1px 5px; border:1px solid #CCCCCC; color:#333333 !important; display:block; padding:4px 10px; text-decoration:none !important; background: #E2E2E2; font-weight: normal;}
.tabs li.selectedtab a {border-bottom: 1px solid white; background: white; }
.tabs li a:hover {background: white; }    */                                 
.tabcontent {margin: 0px; margin-top: -1px; padding: 10px; border: 1px solid #ccc; border-top: none;}

ul.tab, .tab li{border:0; margin:0; padding:0; list-style:none; z-index: 2;}
ul.tab{ border-bottom:solid 1px #ccc; height:29px; padding-left:0px; }
.tab li{float:left; margin-right:4px;}
.tab li.split{margin-left: 12px;}

.tab a:link, .tab a:visited{background:url(../img/tab-round-trans.png) right 60px; color:#666666; display:block; font-weight:bold; height:30px; line-height:30px; text-decoration:none; }
.tab a span{ background:url(../img/tab-round-trans.png) left 60px; display:block; height:30px; margin-right:14px; padding-left:14px; }
.tab a:hover{ background:url(../img/tab-round-trans.png) right 30px; display:block; }
.tab a:hover span{ background:url(../img/tab-round-trans.png) left 30px; display:block; }

.selectedtab a:link, .selectedtab a:visited, .selectedtab a:visited, .selectedtab a:hover{ background:url(../img/tab-round-trans.png) right 0 no-repeat;}
.selectedtab a span, .selectedtab a:hover span{background:url(../img/tab-round-trans.png) left 0 no-repeat;}

/************ flash messages *****************/
div.message { clear: both; color: #666; font-size: 120%; font-weight: normal; margin: 0 0 1em 0; text-align: center; }
div.message a {color: #333;}
div.message div { margin: 7px 40px; border-top: 1px solid #666; padding: 7px; font-size: 12pt; text-align: center; font-weight: normal;}

/************ forms *****************/

form { clear: both; margin: 10px auto; padding: 15px; width: 550px; border: 1px solid #ccc; }
fieldset { border: none; border-top: 1px solid #ccc; margin-top: 20px; padding: 16px 20px; }
fieldset legend { background:#fff; color: #666; font-size: 110%; font-weight: bold; padding: 0px 5px;}
fieldset fieldset { margin-top: 0px; margin-bottom: 20px; padding: 16px 10px; }
fieldset fieldset legend { font-size: 120%; font-weight: normal; }
fieldset fieldset div { clear: left; margin: 0 20px; }

form div.forminfo {clear: both; margin: 0px auto; padding: 7px 0 13px 0; width: 300px; font-size: 80%; color: #666;}

form div { clear: both; margin-bottom: 1em; padding: .5em; vertical-align: text-top; }
form div.input { color: #444; }
form div.required {}
form div.submit { border: 0; clear: both; margin-top: 10px; margin-left: 110px;}

label { display: block; font-size: 100%; padding-right: 15px; margin-right: 5px; width: 150px; text-align: right; float: left;  padding-top: 4px; }
div.required label {background: url('../img/required.png') no-repeat top right;}
input, textarea { display: block; float: left; font-size: 110%; font-family: "frutiger linotype", "lucida grande", "verdana", sans-serif; padding: 2px; width: 300px;}
select { clear: both; font-size: 100%; vertical-align: text-bottom; width:300px;}
select[multiple=multiple] { width: 100%; }
option { font-size: 100%; padding: 0 3px; }
input[type=hidden] { clear: none; float: none;}
input[type=checkbox] { clear: none; float: none; margin: 0px 6px 7px 2px; width: auto; display: inline;}
input[type=radio] { float:left; width:auto; margin: 0 3px 7px 0; }
div.radio label { margin: 0 0 6px 20px;}
input[type=submit] { display: inline; font-size: 110%; padding: 2px 5px; width: auto; vertical-align: bottom; float: right; margin-right: 40px; }

#recaptcha_area, #recaptcha_table { margin: 0px auto; }

textarea#MessageMessage {width: 500px; height: 300px; float: none; margin: 30px auto 7px auto; }


/************* searchbox stuff ******************/
#search-box { float: right;  padding: 0px; position: absolute; top: 15px; right: 8px;}

#search-box form {margin: 0px; width: 100%; width: 160px; padding: 0px; border: none;}

#search-box div { position:relative; float: left; clear: none; padding: 0px; margin: 0px; margin-right: 5px; width: 130px;}

.overlabel {position:absolute; top:4px; left:5px; z-index:1; color:#999; font-size: .9em; text-align: left; float: none; padding: 0;}
.overlabel-apply {position:absolute; top:4px; left:5px; z-index:1; color:#999; font-size: .9em; text-align: left; float: none; padding: 0;}

.search-box-input {width: 90%; font-size: .8em;}
.search-box-submit {width: 24px; height: 24px; padding: 0px; margin: 0px; float: right; clear: none; margin-right: 1px;}

/************* login stuff ******************/

.login-box {text-align: center; padding: 0; margin: 0; background: url(../img/login-box-top.jpg); margin-top: 0px; padding-bottom: 10px; padding-top: 5px; margin-bottom: 20px; font-size: .9em; overflow: hidden;}
#login-bottom {background: /*url(../img/login-box-bottom.jpg);*/ height: 10px; margin: 0px;}

.login-box h2 {color:#333333; font-size:9pt; text-align: left; margin: 7px 0 0 22px; font-weight: bold;}
.login-box form {margin: 10px; width: auto; padding: 0px 10px 0 8px; border: none; text-align: left;}

.login-box div { position:relative; padding: 0; margin: 7px 3px; width: auto; font-size: 1.1em; clear: both;}

.login-box input {width: 150px; color:#111; font-size:8pt; float: none; }
.login-box .submit {text-align: center; padding: 0px; margin: 0;}
.login-box input[type="submit"] {margin-right: 5px; width: 80px;}
.login-box input[type="image"] {margin: 10px auto 0 auto; width: 70px; float: left;}

.login-box label {display: block; text-align: left; clear: both; float: none; margin-bottom: 3px; color: black; color:#333333; font-size: 9pt; width: 100px;}
.login-box .required label {background: none;}
.login-box-submit {width: 24px; height: 24px; padding: 0px; margin: 0px; float: right; clear: none; margin-right: 1px;}

#loginlinks {/*border-top: 1px solid black; */margin: 5px 25px 0 25px; padding-top: 14px; font-size: 9pt; clear: both;}
#loginlinks a {color:#292037; font-weight: normal;}

.signupbutton img {margin: 12px 3px 0 0; float: right;}


/************ home page *****************/
.toprightlink {position: absolute; top: 5px; right: 15px; text-align: right; width: 300px;}
.toprightlink a {font-weight: normal; font-size: 9pt;}

.topleftlink {position: absolute; top: 5px; left: 15px; text-align: left; width: 300px; font-weight: normal; font-size: 9pt; color: #666;}

/************* sitemap stuff ******************/
.sitemap {width: 800px; border: none; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; background: none; padding: 10px; font-size: 9pt; }
.sitemap th {width: 25%; border: none; background: none; font-size: 1.1em; font-weight: normal; padding: 2px; color: black; }
.sitemap tr, .sitemap td {padding: 0px 2px; margin: 0px;}
.sitemap a {font-weight: normal; color: #2D2445; text-decoration: none;}
.sitemap a:hover {text-decoration: underline;}

/************* placeholder stuff ******************/
.placeholder table, .placeholder tr, .placeholder td {border: none; height: 100%; padding: 0; margin: 0; vertical-align:middle; width: 100%; text-align: center;}

/************* login page ******************/

.login-dialog {width: 300px; border: 4px solid #eee; margin: 30px auto; padding: 20px; text-align: left;}

/************* register page ******************/
.halfright {float: right; width: 45%; text-align: left; padding: 15px;}
.halfleft {float: left; width: 45%; text-align: left; padding: 15px;}
.halfleft p, .halfright p {margin: 10px 5px 10px 5px;}

.center {margin: 0px auto;}

.calltoaction {text-align: center; margin: 20px;}
.calltoaction img {margin-bottom: 0px;}
.calltoaction a {font-weight: normal; text-decoration: none; color: #333;}

.register li {padding: 7px 0;}



/************ Account info page *****************/
/*.editaccount form {width: 500px; float: left;}*/

.editaccountform {float: left; width: 460px;}
.editaccountform label { width: 110px; }
.editaccountform form {width: 440px;}
.editaccountform input {width: 250px;}
.changepasswordform {float: right;  width: 400px;}
.changepasswordform label { width: 135px; }
.changepasswordform input {width: 170px;}
.changepasswordform form {width: 360px;}

.playerpicker { text-align: center; margin: 0 50px;}
.playerpicker img {margin: 5px;}
.playerpicker input {position: relative; top: 20px;}

#embedForm, #embedForm2 {border: none; margin: 0px; height:20px;}
#embedForm label, #embedForm2 label {width: 170px; padding-right: 0px; padding-top: 4px;}
#embedForm input, #embedForm2 input {height: 1.3em; width: 26em; overflow: hidden; margin: 0px 0px; font-size: 8pt; }

/************ Profile page *****************/

.headerimage {margin: 0 auto 10px auto;}
.producerplayer {float: right; padding: 0px;}
.avatar {margin: 5px 15px 10px 0; float: left;}
.basicuserinfo {text-align: left; margin-top: 20px;}
.basicuserinfo h2 {text-align: left; padding: 0px; margin: 0px; margin-bottom: 5px;}
.abouttext {text-align: left; margin-top: 15px; clear: both;}

.beatplayer {float: right; width: 620px; margin: 5px 0px; display: inline;}

.profileleft {float: left; width: 305px; margin-top: 0px;}

.messagebutton {margin-top: 5px;}

.artistinfo {width: 305px; margin: 0 auto;}

.profilelinks {text-align: left; padding: 0 0px 30px 30px;}
.profilelinks a {text-decoration: none; margin: 5px 0px; display: block;}
.profilelinks a img {position: relative; top: 7px; margin-right: 5px;}

.comments table {border: none; margin: 10px; overflow: hidden; width: 600px;}
.comments tr {padding: 0; margin: 0;}
.comments td {padding: 0; margin: 0;}
.comments .commentinfo {border-top: 1px solid #ccc; padding: 5px;}
.comments .commenttext {padding: 7px; overflow: hidden; width: 573px;}

.comments .commentinfo a {text-decoration: none;}

/************* charts stuff ******************/

.chartwrapper {margin: 5px -15px;}
table.charts {border: none; margin: 0; border-collapse: collapse;}
table.charts tr {border: none; padding: 0 8px; }
table.charts td {border: none; vertical-align: middle;}

.miniplayer {margin: 10px 5px 0 5px;}

.charts .songname {font-weight: bold; font-size: 1.2em}
.charts .songname a {font-weight: bold; font-size: 1.0em; color: #222; text-decoration: none;}
.charts .songname a:hover {text-decoration: underline;}
.charts .songname a img {position: relative; top: 5px; margin-left: 5px;}
.charts .songname a:hover img {text-decoration: none;}

.charts .number {text-align: center; font-size: 2em;}
.charts .number a {font-weight:normal; text-decoration: none;}

/************* shopping cart & orders ******************/
.order {margin: 18px;}
.order .beatname {font-weight: bold; font-size: 1.1em;}
.order table {margin: 7px 0; border-collapse: collapse;}
.priceinfo {text-align: right; width: 120px; padding-right: 10px;}
.order .amount {font-weight: bold; font-size: 1.1em;}
.order .removeitem {text-align: center; width: 20px;}

.total {text-align: right; font-size: 1.3em; font-weight: bold; margin: 10px; }
.total .info {font-size: 8pt; color: #888; width: 200px; font-weight: normal; float: right;}

.order .tdinfo {text-align: right; width: 170px; font-size: .7em;}
.order .tdinfo img {float: right; margin-left: 7px;}
.order .tdinfo a {text-decoration: none; font-weight: normal;}
.order .tdinfo a.whatis {text-decoration: underline;}

.order .halfleft {padding: 0px;}
.order .calltoaction {margin: 10px 0px;}

form.paypal {width: auto; border: none; margin: 0px; padding: 0px;}
form.paypal input {width: auto; float: right;}

.arrayinfo {margin: 20px 100px; border: 1px solid #ccc; text-align: left; padding: 20px;}



/************* messages ******************/
.messages-view {margin: 10px auto; width: 600px; text-align: left;}
.messages-view p {padding-top: 9px; }

/************* Contact Form ******************/
.contactform {border: none;}

/************* Search Pages ******************/
#mainsearch { border: none;  padding: 0; width: 400px;}
#mainsearch input {float: none; width: 100%; margin: 15px 0;}
#mainsearch input[type="submit"] {margin: 15px auto; width: 180px;}

.searchwrapper {margin: 0px 100px;}
.results {border-collapse:collapse;}
.results .highlight{font-weight: bold;}

/************* Premium Upgrade Page ******************/
.premiuminfo {text-align: center;}
.premiuminfo p {text-align: left; margin: 10px;}
.premiuminfo table {margin: 15px auto; width: auto;}
.premiuminfo th {border: none; padding: 15px;}
.premiuminfo td {border: none; padding: 15px;}

/************* Admin Pages ******************/

table.orderitem th {text-align: center;}

table.orderitem {margin: 0px;}

#tableform {padding: 0; margin: 0; border: none; width: auto;}
#tableform input {width: auto; float: right; margin: 0px 5px;}
#tableform select {float: right; margin: 5px 5px 0 0; width: auto;}
#tableform label { display: none;}

#tableform input[type=text] {margin: -5px; font-size: .8em; padding: 1px; float: left; text-align: right;}

/************* Faq Page ******************/

.faq {margin: 15px;}
.faq dd, .faq dt {float: none; width: auto; display: block; margin: 0; padding: 0; text-align: left;}
.faq dt {margin-top: 15px;}
.faq dd {padding-left: 10px; margin-top: 5px;}


/************* Getting Started & features Page ******************/

.cleantext {text-align: left; padding: 10px;}
.cleantext h2 {margin-top: 25px; padding: 5px; border-bottom: 1px solid #ccc;}
.cleantext ol {margin: 15px;}
.cleantext li {padding: 7px 3px;}
.cleantext p {padding: 10px 7px;}

.highlight {text-decoration: underline; font-weight: bold;}

.greyfont {color: #666; font-size: 1.0em;}