#profile { background: #fff; padding: 22px 23px 0; }
#profile-inner { padding: 20px; color: #fff; background: #558f17 url(/img/profile-background.png) repeat-y center center; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#profile-inner a { color: #fff; }

/* @group Header */

#profile-header { float: left; width: 580px; margin-bottom: 20px; }
#profile-header h1 { float: left; margin: 0; color: #fff; }
#profile-header h1 a { display: block; padding-top: 5px; padding-left: 45px; padding-right: 12px; height: 35px; background: url(/img/radio-play-button.png) no-repeat 0 -3px; text-decoration: none; }
#profile-header h1 a:hover { text-decoration: underline; background-position: 0 -48px; }
#profile-header h1 + .popularity { float: left; margin-top: 14px; }
#profile-header .profile-actions { float: right; margin-top: 4px; }

#profile-details { float: left; padding-left: 110px; padding-bottom: 32px; width: 470px; margin-top: -4px; }
#profile-details .artwork { position: absolute; margin-left: -110px; margin-top: 3px; }
#profile-details .description { margin-bottom: 10px; }
#profile-details .description .more { display: none; }
#profile-details ul.meta { padding-left: 90px; font-size: 11px; line-height: 14px; color: #fff; color: rgba(255,255,255,0.6); }
#profile-details ul.meta.detail { display: none; }
#profile-details ul.meta a { color: #fff; color: rgba(255,255,255,0.6); }
#profile-details ul.meta li { clear: both; margin-bottom: 5px; min-height: 14px; }
#profile-details ul.meta label { display: block; float: left; font-weight: bold; margin-left: -90px; padding-right: 5px; }
#profile-details ul.meta img { float: left; margin-right: 3px; }
#profile-details ul.meta .country img { margin-top: 2px; }
#profile-buttons { margin-top: 15px; margin-left: -1px; }
#profile-buttons li { float: left; margin-right: 5px; background-image: url(/img/white_10.png); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
#profile-buttons li a { display: block; line-height: 18px; padding: 0 11px; padding-bottom: 3px; padding-top: 2px; text-decoration: none; font-size: 11px; font-weight: bold; background: transparent no-repeat; background: rgba(255,255,255,0) no-repeat; }
#profile-buttons li a:hover { background-color: rgba(255,255,255,0.1); }
#profile-buttons li a:active { background-color: rgba(255,255,255,0.05); }
#profile-buttons li.toggle a { padding-left: 18px; background-image: url(/img/expand-collapse-icon.png); }
#profile-buttons li.toggle.plus a { background-position: 0 1px; }
#profile-buttons li.toggle.minus a { background-position: 0 -19px; }
#profile-buttons li.listen-desktop a { background-image: url(/img/players.png); background-position: 3px 3px; padding-left: 62px; }

/* @group Promote */

#promote { float: right; width: 280px; margin-top: 2px; }
#promote h2 { color: White; font-size: 14px; line-height: 18px !important; margin: 0; margin-bottom: 8px; margin-left: -35px; padding-left: 35px; background: no-repeat 0 0; }
#promote > .section { margin-top: 18px; padding-left: 35px; }
#promote > .section:first-child { margin-top: 0px; }
#promote-share > h2 { background-image: url(/img/promote-share-icon.png); }
#promote-share > ul { }
#promote-share > ul li { float: left; width: 122px; }
#promote-share > ul li a { display: block; line-height: 22px; padding-left: 22px; font-size: 11px; background: none no-repeat 0 center; white-space: nowrap; font-weight: bold; text-decoration: none; }
#promote-share > ul li a:hover { color: rgba(255,255,255,0.9); text-decoration: underline; }
#promote-share > ul li.more a { background-image: url(/img/icons/share-16x16.png); }
#promote-share > ul li.fb a { background-image: url(/img/icons/facebook-16x16.png); }
#promote-share > ul li.tt a { background-image: url(/img/icons/twitter-16x16.png); }
#promote-embed > h2 { background-image: url(/img/promote-embed-icon.png); }
#promote-embed input { border: 0; font-size: 12px !important; color: #888; width: 232px; line-height: 20px; height: 20px; padding: 2px 4px 3px; }
#promote-embed .customize { font-size: 11px; line-height: 14px; padding-top: 2px; }
#promote-embed .customize a { color: rgba(255,255,255,0.5); }
#promote-links > h2 { background-image: url(/img/promote-links-icon.png); }
#promote-links p { font-size: 11px; line-height: 14px; }
#promote-links p strong { float: left; width: 50px; color: rgba(255,255,255,0.8); }
#promote-links input { float: right; font-size: 11px !important; line-height: 14px !important; padding: 0 2px !important; margin: 0 !important; color: white !important; color: rgba(255,255,255,0.7) !important; border: 0 !important; background: transparent !important; width: 188px; }
#promote-links input:focus { color: #fff !important; background: rgba(0,0,0,0.3) !important; }

/* @group Profile Nav */

#profile-nav { padding-top: 20px; }

/* @group Page: Home */

#profile-home #content { }

/* @group News */

#news { margin: 20px 0; }
#news .news-list { border: 1px solid #d4e5ec; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; padding-top: 10px; }
#news .article { position: relative; float: left; width: 254px; min-height: 34px; padding: 0 10px; padding-left: 34px; margin-bottom: 10px; margin-left: 10px; }
#news .article h3 { color: #333; font-weight: bold; font-size: 13px; line-height: normal; }
#news .article h3 a { color: #333; text-decoration: none; }
#news .article h3 a:hover { text-decoration: underline; }
#news .article .date { position: absolute; top: 0px; left: -1px; }
#news .articleempty { margin: 0px 0px 10px 10px; }

/* @group Tracklist */

#tracklist { margin: 20px 0; }
#tracklist .tracks-list { border: 1px solid #d4e5ec; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; padding-top: 5px; }
#tracklist .tracks-list .article { margin: 0 10px; }
#tracklist .tracks-list .article:hover { background: transparent; }
#tracklist .tracks-list .footer { margin-top: 5px; }

/* @group Wall */

#wall { margin: 20px 0; }
#wall .comments-list { border: 1px solid #d4e5ec; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }
#wall .comments-list .article { padding-left: 62px; }
#wall .comments-list .article .avatar { left: 10px; }
#wall .comments-list .article:first-child { border-top: 0; }
#wall .comments-list .article.post textarea { width: 534px; }
#wall .articleempty { margin: 10px 0px 10px 10px; }

/* @group Page: News */

#profile-news #content { }
#profile-news #content > .header { border-bottom: 1px solid #e5e5e5; margin-bottom: 0; }
.article-grid { position: relative; border-bottom: 1px solid #e5e5e5; padding: 16px 0; padding-left: 56px; }
.article-grid h2 { color: #333; font-size: 16px; line-height: normal; font-weight: bold; margin: 0; }
.article-grid h2 a { color: #333; text-decoration: none; }
.article-grid h2 a:hover { text-decoration: underline; }
.article-grid .date { position: absolute; top: 20px; left: 0; }
.article-grid .meta { font-size: 11px; line-height: normal; color: #999999; margin-bottom: 5px; }
.article-grid .meta a { color: #999999; }
.article-grid .meta a:active { color: #666; }
.article-grid .readmore { color: #00a0d2; }

/* @group Page: News Article */

#profile-news-article #content { margin-top: 2px; }
#profile-news-article #content > .article { position: relative; padding: 16px 0 0; padding-left: 50px; }
#profile-news-article #content > .article h1 { color: #333; font-weight: bold; margin: 0; }
#profile-news-article #content > .article h1 a { color: #333; text-decoration: none; }
#profile-news-article #content > .article h1 a:hover { text-decoration: underline; }
#profile-news-article #content > .article .date { position: absolute; top: 20px; left: 0; }
#profile-news-article #content > .article .meta { font-size: 11px; line-height: normal; color: #999999; margin-bottom: 15px; }
#profile-news-article #content > .article .meta a { color: #999999; }
#profile-news-article #content > .article .meta a:active { color: #666; }
#profile-news-article #content > h2 { color: #333; padding-left: 50px; margin-bottom: 7px; }
#profile-news-article #comments { margin-bottom: 20px; }

/* @group Page: Tracklist */

#profile-tracklist #content { }
#profile-tracklist #content > .header { border-bottom: 1px solid #e5e5e5; }
#profile-tracklist #content > .tracks-list { padding-bottom: 5px; border-bottom: 1px solid #e5e5e5; }

/* @group Page: Wall */

#profile-wall #content h1 { display: none; }
#profile-wall #content { margin-top: 20px; }
#profile-wall #content .comments-list .article:first-child { margin-top: -10px; }


.color-input { display: inline-block; border: 1px solid #999; width: 21px; height: 21px; padding: 2px 16px 2px 2px !important; background: url(/img/colorpicker/drop-arrow.png) no-repeat right center; vertical-align: middle; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }

.color-input span { display: block; width: 19px; height: 19px; background: #777; border: 1px solid #aaa; }

.color-input span { display: block; width: 19px; height: 19px; background: #777; border: 1px solid #aaa; }

/* @end */

/* @group Color Picker */

.colorpicker { width: 356px; height: 176px; overflow: hidden; position: absolute; background: url(/img/colorpicker/custom_background.png); font-family: Arial, Helvetica, sans-serif; display: none; z-index: 12000; }
.colorpicker_color { width: 150px; height: 150px; left: 14px; top: 13px; position: absolute; background: #f00; overflow: hidden; cursor: crosshair; }
.colorpicker_color div { position: absolute; top: 0; left: 0; width: 150px; height: 150px; background: url(/img/colorpicker/colorpicker_overlay.png); }
.colorpicker_color div div { position: absolute; top: 0; left: 0; width: 11px; height: 11px; overflow: hidden; background: url(/img/colorpicker/colorpicker_select.gif); margin: -5px 0 0 -5px; }
.colorpicker_hue { position: absolute; top: 13px; left: 171px; width: 35px; height: 150px; cursor: n-resize; }
.colorpicker_hue div { position: absolute; width: 35px; height: 9px; overflow: hidden; background: url(/img/colorpicker/custom_indic.gif) left top; margin: -4px 0 0 0; left: 0px; }
.colorpicker_new_color { position: absolute; width: 60px; height: 30px; left: 213px; top: 13px; background: #f00; }
.colorpicker_current_color { position: absolute; width: 60px; height: 30px; left: 283px; top: 13px; background: #f00; }
.colorpicker input { background-color: transparent; border: 1px solid transparent; position: absolute; font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #898989; top: 4px; right: 11px; text-align: right; margin: 0; padding: 0; height: 11px; }
.colorpicker_hex { position: absolute; width: 72px; height: 22px; background: url(/img/colorpicker/custom_hex.png) top; left: 212px; top: 142px; }
.colorpicker_hex input { right: 6px; }
.colorpicker_field { height: 22px; width: 62px; background-position: top; position: absolute; }
.colorpicker_field span { position: absolute; width: 12px; height: 22px; overflow: hidden; top: 0; right: 0; cursor: n-resize; }
.colorpicker_rgb_r { background-image: url(/img/colorpicker/custom_rgb_r.png); top: 52px; left: 212px; }
.colorpicker_rgb_g { background-image: url(/img/colorpicker/custom_rgb_g.png); top: 82px; left: 212px; }
.colorpicker_rgb_b { background-image: url(/img/colorpicker/custom_rgb_b.png); top: 112px; left: 212px; }
.colorpicker_hsb_h { background-image: url(/img/colorpicker/custom_hsb_h.png); top: 52px; left: 282px; }
.colorpicker_hsb_s { background-image: url(/img/colorpicker/custom_hsb_s.png); top: 82px; left: 282px; }
.colorpicker_hsb_b { background-image: url(/img/colorpicker/custom_hsb_b.png); top: 112px; left: 282px; }
.colorpicker_submit { position: absolute; width: 22px; height: 22px; background: url(/img/colorpicker/custom_submit.png) top; left: 322px; top: 142px; overflow: hidden; }
.colorpicker_focus { background-position: center; }
.colorpicker_hex.colorpicker_focus { background-position: bottom; }
.colorpicker_submit.colorpicker_focus { background-position: bottom; }
.colorpicker_slider { background-position: bottom; }


#overlay-embed h2 { margin: 5px 0; font-size: 13px; line-height: normal; font-weight: bold; color: #333; }
#overlay-embed > .content { background-image: url(/img/background-embed-570.png) !important; }
#overlay-embed > .bottom { background-image: url(/img/background-bottom-embed-570.png) !important; }
#overlay-embed #embed-options { float: left; width: 294px; }
#overlay-embed #embed-options fieldset { padding: 0 18px; margin: 13px 0; }
#overlay-embed #embed-options fieldset#fld-size, #overlay-embed #embed-options fieldset#fld-options { float: left; }
#overlay-embed #embed-options fieldset#fld-colors { clear: both; }
#overlay-embed #embed-options fieldset#fld-colors p + p { margin-top: 5px; }
#overlay-embed #embed-options fieldset#fld-colors label { width: 90px; float: left; margin-top: 3px; }
#overlay-embed #embed-options fieldset#fld-colors input { width: 65px; }
#overlay-embed #embed-options fieldset#fld-colors input + a, #overlay-embed #embed-options fieldset#fld-colors .color-input + a { color: #777 !important; font-size: 11px; padding-left: 4px; }
#overlay-embed #embed-options fieldset#fld-code { clear: both; border-top: 1px solid #e5eff2; background: #fffcf2; margin: 0; margin-top: 18px; padding: 9px 18px 0; }
#overlay-embed #embed-options fieldset#fld-code h2 { color: #d01d11; margin-bottom: 10px; }
#overlay-embed #embed-options fieldset#fld-code textarea { width: 245px; color: #777; font-size: 11px; line-height: normal; resize: none; }
#overlay-embed #embed-options input + label { padding-left: 0.3em; }
#overlay-embed #embed-preview { float: right; padding: 13px 18px 0px; background: #e5eff2; width: 240px; }
#overlay-embed #embed-preview #embed * { vertical-align: top; }
#overlay-embed #embed-preview h2 { color: #898f91; }


.toolbox { font-size: 13px; line-height: 33px; color: #333; }
.toolbox > li { float: left; clear: both; margin-bottom: 5px; }
.toolbox > li > a { display: block; border: 1px solid #ddd; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #777; text-decoration: none; padding: 5px 10px 5px 26px; background: url(/img/arrow.png) no-repeat 10px center; }
.toolbox > li > a:hover { color: #00A0D2; border-color: #bbb; }
.toolbox > li > a:hover strong { color: #00A0D2; text-decoration: underline; }
.toolbox > li > a:active { position: relative; top: 1px; }
.toolbox > li > a strong { color: #555; }
.toolbox > li > a img { vertical-align: middle; margin-top: -2px; margin-right: -3px; }