/* ------------------------ */
/* --------- BODY --------- */
/* ------------------------ */
body {font-family:"Helvetica", "Arial",sans-serif; font-size: 12px; color: #181818;}
a {outline:medium none; text-decoration:none;}

.clear {clear: both;}
.button {display: none;}

/* ------------------------ */
/* --------- PAGE --------- */
/* ------------------------ */
#page_wrapper {position: relative; width: 402px; margin: 0 auto; z-index: 98; margin-bottom: 40px;}
#content_wrapper {position: relative; z-index: 98; background-color: #fff;}

/* ------------------------ */
/* -------- HEADER -------- */
/* ------------------------ */
.header_wrapper {width: 100%; height: 200px; margin: 0; margin-bottom: 20px;}
.header {width: 402px; margin: 0 auto; text-align: center; height: 200px; position: relative;}

.header h1 {position: relative; margin:0 auto; top: 70px; cursor: pointer;}
.header h1 a {display: block; position: relative; margin:0 auto;}
.header h1 a span {display:none;}

.search_wrapper {width: 100%; height: 53px; bottom: 19px; position: absolute; z-index:9999; left: 0; margin: 0 auto;}

.search_wrapper .icon {position: absolute; width: 18px; height: 18px; top: 18px; right: 19px;}
.search_wrapper .icon:hover, .icon:active {background-position: 0 -18px;}
.search_wrapper .icon span {display: none;} 

.search_wrapper .bar input {width: 330px; font-size: 19px; float:left; font-weight: normal; background: transparent; margin: 17px 0 0 18px; border: 0;} 

.form.input_wrapper {width: auto; margin-right: 19px;}

/* ------------------------ */
/* ----Message Boxes------- */
/* ------------------------ */
.box {background: none repeat scroll 0 0;}
.top {display: block; height: 5px; width: 100%; overflow: hidden;}
.bottom {display: block; height: 5px; width: 100%; overflow: hidden;}
.box .cap {background: no-repeat scroll right top transparent; display: block; height: 5px !important; width: 5px !important;}
.box .cap.right {float: right !important;}
.box .top .cap.right {background-position: right top;}
.box .top .cap.left {background-position: left top;}
.box .cap.left {float: left !important;}
.box .bottom .cap.right {background-position: right bottom;}
.box .bottom .cap.left {background-position: left bottom;}

.message {padding: 15px 20px; text-align: center; font-size: 14px;}
.message .strong, .strong {font-weight: bold;}
.message .italic {font-style: italic;}
.hidden {display: none;} 

/* ------------------------ */
/* ------Start, Results---- */
/* ------------------------ */
.result_wrapper {margin: 20px 0 0 0;}
#more_results {margin-top: 12px; text-align: center;}
#more_results span {cursor: pointer;}
.result {padding: 5px 0 5px 0; width: 100%; font-size: 12px; cursor: pointer; border-bottom: 1px solid #DDD;}
.result.last {border: none;}

.result .play, .loading, .pause {width: 29px; height: 29px; display: block; float: left; cursor: pointer;}

.result .play {background:url("/webincludes/css/images/result_play.png") no-repeat scroll transparent; background-position: 0 -29px;}
.result .play:hover {background-position: right top;}
.result .play:active {background-position:0 -58px;}

.result .track {float: left; margin: 0 0 0 10px; cursor: pointer; padding: 3px 0 0 0; width: 300px;}
.result .track .song {font-size: 12px; margin: 0 0 3px 0;}
.result .track .artist {font-size: 10px; margin: 0; color: #999;}

.result .sharesong {width:59px; height: 29px; display: inline; float: right; cursor: pointer; background:url("/webincludes/css/images/result_share.png") no-repeat scroll transparent; background-position: 0 -29px;}
.result .sharesong:hover {background-position: right top;}
.result .sharesong:active {background-position:0 -58px;}

.play {background:url("/webincludes/css/images/result_play.png") no-repeat scroll right top transparent;}
.loading {background:url("/webincludes/css/images/result_loader.gif") no-repeat scroll 7px 5px transparent;}
.pause {background:url("/webincludes/css/images/result_pause.png") no-repeat scroll transparent; background-position: 0 -29px;}
.pause:hover {background-position: right top;}

/*
.result_wrapper {margin: 20px 0 0 0;}
.result {padding-top: 7px; padding-bottom: 5px; min-width: 360px; font-size: 12px; cursor: pointer;}
.play, .loading, .pause {width: 29px; height: 29px; display: block; float: left; cursor: pointer;}
.play:hover {background-position: 0 -29px;}
.play:active {background-position:0 -58px;}
.sharesong {width:59px; height: 29px; display: inline; float: right; cursor: pointer;}
.sharesong:hover, .sharesong.mouseover {background-position: 0 -29px;}
.sharesong:active {background-position:0 -58px;}
.track {float: left; padding-left: 5px; cursor: pointer;}
.song {margin-top: 2px;max-width: 300px;}
.artist {font-size: 11px; display: block; max-width: 300px;}
.play {background:url("/webincludes/css/images/result_play.png") no-repeat scroll right top transparent;}
.loading {background:url("/webincludes/css/images/ajax-loader.gif") no-repeat scroll 7px 5px transparent;}
.pause {background:url("/webincludes/css/images/result_pause.png") no-repeat scroll right top transparent;}
.artist {color:#838383;}
.sharesong {background:url("/webincludes/css/images/result_share.png") no-repeat scroll right top transparent;}
.result {border-bottom: 1px solid #ddd;}
.last {border-bottom:none;}
.result:hover {background-color: #f5f5f5;}
*/

/* ------------------------ */
/* ---------Share---------- */
/* ------------------------ */
#sharelinks .email a {background:url("/webincludes/css/images/share_email.png") no-repeat scroll transparent; background-position: 0 -31px;}
#sharelinks .tumblr a {background:url("/webincludes/css/images/share_tumblr.png") no-repeat scroll transparent; background-position: 0 -31px;}
#sharelinks .facebook a {background:url("/webincludes/css/images/share_facebook.png") no-repeat scroll transparent; background-position: 0 -31px;}
#sharelinks .twitter a {background:url("/webincludes/css/images/share_twitter.png") no-repeat scroll transparent; background-position: 0 -31px;}
#sharelinks .stumbleupon a {background:url("/webincludes/css/images/share_stumbleupon.png") no-repeat scroll transparent; background-position: 0 -31px;}
.buttontext {font-style:italic; color:#656;}
.form input {font-family:"Lucida Grande","Verdana","Arial",sans-serif; color:#656;}
.form textarea {font-family:"Lucida Grande","Verdana","Arial",sans-serif; color:#656;}
.buttontext {color:#fbfbfb; letter-spacing:1px;}
.sharetrack {margin-bottom: 20px; text-align: center;} 
.sharetrack h2 {font-size: 16px; font-weight: normal; line-height: 18px; margin: 0 0 5px 0;}
.sharetrack h3 {font-size: 13px; font-weight: normal; line-height: 16px;}
.shareurl .link {font-size: 22px; text-align: center; font-weight: bold;}
.clipboard, .clipboardsuccess {font-weight: normal; text-align: center; margin: 10px 0 40px 0;}
.shareoptions {margin: 0 auto;}
.sharehelp {font-size: 11px;}
.buttons {margin: 0 auto;}
.share_wrapper {text-align: center; margin-bottom: 20px;}
.sharelinks_wrapper {text-align: center; margin: 0 auto; width: 200px;}
#sharelinks {float: left;}
#sharelinks li {float: left; margin: 0 5px; display: inline; width: 30px; height: 30px;}
#sharelinks span {display: none;}
#sharelinks a {display: block; height: 30px; width: 30px;}
#sharelinks .email a:hover {background-position: 0 -62px; cursor: pointer;}
#sharelinks .email a:active {background-position: 0 0; cursor: pointer;}
#sharelinks .tumblr a:hover {background-position: 0 -62px;}
#sharelinks .tumblr a:active {background-position: 0 0;}
#sharelinks .facebook a:hover {background-position: 0 -62px;}
#sharelinks .facebook a:active {background-position: 0 0;}
#sharelinks .twitter a:hover {background-position: 0 -62px;}
#sharelinks .twitter a:active {background-position: 0 0;}
#sharelinks .stumbleupon a:hover {background-position: 0 -62px;}
#sharelinks .stumbleupon a:active {background-position: 0 0;}
.buttontext {font-size: 12px; margin-bottom: 20px; text-align: center;}


/* --------------------------------- */
/* ------------E-mail Form---------- */
/* --------------------------------- */
.emailerror {margin-left: 10px;}
.email {margin: 20px 0 0 0;}
div.email {display: none;}
#input1, #input2, #input3 {margin-bottom: 5px;}
.email .input_wrapper, .textarea_wrapper {margin-bottom: 10px;}
.email .input_wrapper {height:35px; width: 100%; background:url("/webincludes/css/images/form_inputwrapper_bg.png") no-repeat scroll right top transparent;}
.email .input_wrapper .mail_cap {height:25px; padding:5px 8px; background:url("/webincludes/css/images/form_inputwrapper_cap.png") no-repeat scroll left top transparent;}
.email .input_wrapper .mail_cap input {background:none repeat scroll 0 0 transparent; border: none; height:22px; margin: 2px 0 0 0; padding:0; width: 100%; float: left;}
.email .mail_cap input {background:none repeat scroll 0 0 transparent; border: none; color:#b4b4b4; font-family:"Tahoma","Lucida Grande", "Verdana","Arial",sans-serif; font-size:13px; line-height:10px;}

.email .input_wrapper input:hover, .email .input_wrapper input:active {color: #494420;}
.email .input_wrapper .mail_cap:hover, .mail_cap:active {background-position: 0 -35px;}
.email .input_wrapper:hover, .input_wrapper:active {background-position: right -35px;}
.email .input_wrapper.activeFocus {background-position: right -35px;}
.email .mail_cap .activeFocus {color: #494420;}
.email .input_wrapper .mail_cap.activeFocus {background-position: 0 -35px;}
.email .input_wrapper.emailError {background-position: right -70px;}
.email .input_wrapper .mail_cap.emailError {background-position: 0 -70px;}

.email .mail_cap .emailError input {color: #931414;}
.email .mail_cap .emailError {color: #931414;}
.email .mail_cap .emailError input:hover, input:active {color: #931414;}
.email .mail_cap .emailError .activeFocus {color: #931414;}

.email .textarea_wrapper {font-family:"Lucida Grande","Verdana","Arial",sans-serif; width: 100%;}
.email .textarea_wrapper .mail_top {height:8px; background:url("/webincludes/css/images/form_inputwrapper_bg.png") no-repeat scroll right top transparent;}
.email .textarea_wrapper .mail_top .mail_cap {height:8px; background:url("/webincludes/css/images/form_inputwrapper_cap.png") no-repeat scroll left top transparent;}

.email .textarea_wrapper .mail_inner textarea {background:none repeat scroll 0 0 transparent; border:medium none; height:100%; margin:0; 
padding:0; width:100%; line-height: 16px;}

.email .textarea_wrapper .mail_inner .mail_cap {height:100px; padding:0 8px; background:url("/webincludes/css/images/form_textarea_normal_cap.png") repeat-y scroll left top transparent;}
.email .textarea_wrapper.support .mail_inner .mail_cap {height:150px !important;}

.email .textarea_wrapper .mail_bottom {height:7px; background:url("/webincludes/css/images/form_inputwrapper_bg.png") no-repeat scroll right -28px transparent;}
.email .textarea_wrapper .mail_bottom .mail_cap {height:7px; background:url("/webincludes/css/images/form_inputwrapper_cap.png") no-repeat scroll 0 -28px transparent;}

.email .textarea_wrapper.activeFocus .mail_top, .email .textarea_wrapper.activeHover .mail_top {background-position: right -35px;}
.email .textarea_wrapper.activeFocus .mail_top .mail_cap, .email .textarea_wrapper.activeHover .mail_top .mail_cap {background-position: left -35px;}
.email .textarea_wrapper.activeFocus .mail_bottom, .email .textarea_wrapper.activeHover .mail_bottom {background-position: right -63px;}
.email .textarea_wrapper.activeFocus .mail_bottom .mail_cap, .email .textarea_wrapper.activeHover .mail_bottom .mail_cap {background-position: left -63px;}

.email .textarea_wrapper .mail_inner {background:url("/webincludes/css/images/form_textarea_normal_bg.png") repeat scroll right top transparent;}
.email .textarea_wrapper .mail_inner textarea {color:#b4b4b4; font-family:"Tahoma","Lucida Grande", "Verdana","Arial",sans-serif; font-size: 13px;}

.emailerror {color: #9E4444; display: none;}
.label {color: #656565;}

.email .mail_cap textarea {width: 402px;}

.email .textarea_wrapper.activeFocus .mail_inner, .textarea_wrapper.activeHover .mail_inner {background-image:url("/webincludes/css/images/form_textarea_active_bg.png");}
.email .textarea_wrapper.activeFocus .mail_inner, .textarea_wrapper.activeHover .mail_inner {background-image:url("/webincludes/css/images/form_textarea_active_bg.png");}
.email .textarea_wrapper.activeFocus .mail_inner .mail_cap, .textarea_wrapper.activeHover .mail_inner .mail_cap {background-image:url("/webincludes/css/images/form_textarea_active_cap.png");}
.email .textarea_wrapper.activeFocus .mail_inner textarea, .textarea_wrapper.activeHover .mail_inner textarea {color: #494420;}
#recaptcha {margin: 10px 20px;}
#recaptcha.searchCaptcha {height: 130px; margin-left: 42px;}

.sharebuttons {text-align: center; width: 100%;}
.sharebuttons button {background:none repeat scroll 0 0 transparent; border:medium none; overflow:visible; padding:0; cursor: pointer;}
.sharebuttons button div {display:block; float:left; height:32px; padding:0 16px 0 0; white-space:nowrap;}
.sharebuttons button span {background-color:#F7F9F4; clear:none; display:block; float:left; height:32px; line-height:29px; padding:0 0 0 17px; white-space:nowrap;}
.box .message .buttons .message {padding: 8px 20px;}

/* --------------------------------- */
/* ------------ SUBPAGE ------------ */
/* --------------------------------- */
.subpage {margin-top: 20px;}
/* .subpage h2 {font-size: 16px; font-weight: normal; margin: 0 0 20px 0; color: #999;} */
.subpage dl dt {margin: 0 0 5px 0; font-size: 14px;}
.subpage dl dd {margin: 0 0 20px 0; line-height: 16px; color: #999;}
.subpage dl dd.last {margin: 0;}

/* --------------------------------- */
/* -------------Faq/Api------------- */
/* --------------------------------- */
 h3 {margin-bottom: 5px; font-size: 15px;}
 p {margin-bottom: 10px;}
.apiexample h4 {margin-bottom: 5px; text-align: left; font-weight: bold;}
.apiexample {margin-bottom: 20px;}
.api h2, .faq h2 {font-size: 16px; letter-spacing: 1px; font-weight: bold; font-style: italic; margin-bottom: 15px;}
.explanation, .explanation p {margin-bottom: 20px;}
.explanation span {font-weight: bold;}
.apiexample {padding: 10px; text-align: center;}
.question {font-weight: bold; margin-bottom: 5px;}
.answer {margin-bottom: 10px;}
.apiexample .url {font-family: "Courier New", "Courier", sans-serif; font-size: 12px; text-align: right; margin-bottom: 10px;}
pre {text-align: left; padding: 10px 20px; margin: 0;}

.api_key h4 {margin-bottom: 5px; font-size: 15px;}

.termserror {color: #9E4444; display:none; }
.key_request, .key_success {margin: 20px 0 0;}
.key_success {display: none;}

.key_request .input_wrapper, .terms_wrapper {margin-bottom: 10px;}
.key_request .input_wrapper {height:35px; width: 100%; background:url("/webincludes/css/images/form_inputwrapper_bg.png") no-repeat scroll right top transparent;}
.key_request .input_wrapper .mail_cap {height:25px; padding:5px 8px; background:url("/webincludes/css/images/form_inputwrapper_cap.png") no-repeat scroll left top transparent;}
.key_request .input_wrapper .mail_cap input {background:none repeat scroll 0 0 transparent; border: none; height:22px; margin: 2px 0 0 0; padding:0; width: 100%; float: left;}
.key_request .mail_cap input {background:none repeat scroll 0 0 transparent; border: none; color:#b4b4b4; font-family:"Tahoma","Lucida Grande", "Verdana","Arial",sans-serif; font-size:13px; line-height:10px;}

.key_request .input_wrapper input:hover, .key_request .input_wrapper input:active {color: #494420;}
.key_request .input_wrapper .mail_cap:hover, .mail_cap:active {background-position: 0 -35px;}
.key_request .input_wrapper:hover, .input_wrapper:active {background-position: right -35px;}
.key_request .input_wrapper.activeFocus {background-position: right -35px;}
.key_request .mail_cap .activeFocus {color: #494420;}
.key_request .input_wrapper .mail_cap.activeFocus {background-position: 0 -35px;}
.key_request .input_wrapper.emailError {background-position: right -70px;}
.key_request .input_wrapper .mail_cap.emailError {background-position: 0 -70px;}

.key_request .mail_cap .emailError input {color: #931414;}
.key_request .mail_cap .emailError {color: #931414;}
.key_request .mail_cap .emailError input:hover, input:active {color: #931414;}
.key_request .mail_cap .emailError .activeFocus {color: #931414;}

.key_request .terms_wrapper {text-align: left; font-family:"Lucida Grande","Verdana","Arial",sans-serif; width: 100%;}
.key_request .terms_wrapper .mail_top {height:8px; background:url("/webincludes/css/images/form_inputwrapper_bg.png") no-repeat scroll right top transparent;}
.key_request .terms_wrapper .mail_top .mail_cap {height:8px; background:url("/webincludes/css/images/form_inputwrapper_cap.png") no-repeat scroll left top transparent;}

.key_request .terms_wrapper .mail_inner textarea {background:none repeat scroll 0 0 transparent; border:medium none; height:100%; margin:0; 
padding:0; width:100%; line-height: 16px;}

.key_request .terms_wrapper .mail_inner .mail_cap {height:64px; padding:0 8px; background:url("/webincludes/css/images/form_textarea_normal_cap.png") repeat-y scroll left top transparent;}

.key_request .terms_wrapper .mail_bottom {height:7px; background:url("/webincludes/css/images/form_inputwrapper_bg.png") no-repeat scroll right -28px transparent;}
.key_request .terms_wrapper .mail_bottom .mail_cap {height:7px; background:url("/webincludes/css/images/form_inputwrapper_cap.png") no-repeat scroll 0 -28px transparent;}

.key_request .terms_wrapper.activeFocus .mail_top, .key_request .terms_wrapper.activeHover .mail_top {background-position: right -35px;}
.key_request .terms_wrapper.activeFocus .mail_top .mail_cap, .key_request .terms_wrapper.activeHover .mail_top .mail_cap {background-position: left -35px;}
.key_request .terms_wrapper.activeFocus .mail_bottom, .key_request .terms_wrapper.activeHover .mail_bottom {background-position: right -63px;}
.key_request .terms_wrapper.activeFocus .mail_bottom .mail_cap, .key_request .terms_wrapper.activeHover .mail_bottom .mail_cap {background-position: left -63px;}

.key_request .terms_wrapper .mail_inner {background:url("/webincludes/css/images/form_textarea_normal_bg.png") repeat scroll right top transparent;}
.key_request .terms_wrapper .api_terms {color:#b4b4b4; font-family:"Tahoma","Lucida Grande", "Verdana","Arial",sans-serif; font-size: 13px;}
.key_request .terms_wrapper .api_terms {height: 64px; overflow: auto;}

.requestbutton {text-align: center; width: 100%;}
.requestbutton button {background:none repeat scroll 0 0 transparent; border:medium none; overflow:visible; padding:0; cursor: pointer;}
.requestbutton button div {display:block; float:left; height:32px; padding:0 16px 0 0; white-space:nowrap;}
.requestbutton button span {background-color:#F7F9F4; clear:none; display:block; float:left; height:32px; line-height:29px; padding:0 0 0 17px; white-space:nowrap;}

/* ------------------------ */
/* ---------Footer--------- */
/* ------------------------ */ 
#footer {border-top: 1px solid; margin-bottom: 40px; padding:40px 0 0;}
#footer h5 {margin-bottom: 10px; font-weight: normal;}
#footer .logo {display:block; float:right; height:22px; position:relative; right:-10px; top:-5px; width:148px;}
#footer .logo:hover, .logo:active {background-position: 0 -22px;}
#footer .links {margin:0 0 40px;}
#footer .links .group {float:left; width:200px;}
#footer .links .group ul li {margin:0 0 6px;}
#footer p {margin:0;}
#footer_wrapper {margin:0 auto; width:402px;}
#footer {border-top:1px solid #ddd;}
#footer p {color:#ccc;}