/** Reset **********************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through;} table { border-collapse: collapse; border-spacing: 0; }

/** Global **********************/
.hidden, .hide, .ui-tabs-hide { display: none; }
.bg-img, .bg-img-list li a { display: block; height: 0; overflow: hidden; }
.clear { clear: left;}
a:link, a:visited { color: #4c6303; text-decoration: none }
a:hover, a:active { color: black }

body {
	background: #dbe2d3 url('i/elements.jpg') 0 -647px repeat-x; 
	/*background: #dbe2d3 url('i/elements.jpg') 0 -742px repeat-x; */
	font: normal normal 14px Arial, Helvetica, Verdana, sans-serif; color:#494747; line-height: 17px
}
body.spanish { background-image: url('i/elements-es.jpg') }
#wrapper { width: 1020px; margin: 0 auto; position: relative}

/** BG Image Elements **********************/
#demomovie, h1, .tag, blockquote, #buy a, #menu a, .facebook a, .twitter a, .appstore a, hr, #features .icon, #features li ul li, #features .new, #features .col a, #language .current, #links li { 
	background: url("i/elements.jpg") no-repeat; display: block; overflow: hidden; height: 0 
}
body.spanish #demomovie, body.spanish h1, body.spanish .tag, body.spanish blockquote, body.spanish #buy a, body.spanish #menu a, body.spanish .facebook a, body.spanish .twitter a, body.spanish .appstore a, body.spanish hr, body.spanish #features .icon, body.spanish #features li ul li, body.spanish #features .new, body.spanish #features .col a, body.spanish #language .current { background-image: url("i/elements-es.jpg") }
hr { border: none; width: 312px; padding-top: 2px; background-position: -697px -594px; margin-bottom: 20px }

/** Menu **********************/
#menu { height: 33px }
#menu li { float: left }
#menu a:link, #menu a:visited { padding-top: 33px; background: url('i/elements.jpg'); float: left }
#menu a.allforces:link, #menu a.allforces:visited { margin-left: 26px; width: 149px; background-position: -110px -676px }
#menu a.allforces:hover, #menu a.allforces:active { background-position: -110px -709px }
#menu a.nota:link, #menu a.nota:visited { width: 95px; background-position: -265px -676px }
#menu a.nota:hover, #menu a.nota:active, #menu a.nota.active { background-position: -265px -709px }
#menu a.share:link, #menu a.share:visited { margin-left: 512px; width: 125px; background-position: -867px -676px }
#menu a.share:hover, #menu a.share:active, #menu a.share.active { background-position: -867px -709px }
#menu a.contact:link, #menu a.contact:visited { width: 111px; background-position: -992px -676px }
#menu a.contact:hover, #menu a.contact:active, #menu a.contact.active { background-position: -992px -709px }

#banner { text-align: center; background: #EEEEEE; color: #666666; font-size: 11px; height: 80px; padding-top: 15px }

/** Featured **********************/
#demomovie { background-position: -5px 20px; width: 664px; height: 617px; float: left;  }
#demomovie img { height: 0 }
#demomovie #movie { position: absolute; left: 209px; top: 330px; }
#info { padding: 26px 0 0 28px; width: 312px; float: left }
h1 { background-position: -697px -52px; width: 314px; padding-top: 108px; }
#quote-1 { background-position: -922px -172px; width: 246px; padding-top: 85px; margin: 15px 0 0 55px; float: left }
#quote-3 { background-position: -892px -257px; width: 299px; padding-top: 108px; margin: 0 0 0 55px; float: left }
#quote-2 { background-position: -697px -172px; width: 209px; padding-top: 85px; margin: 15px 0 0 55px; float: left }
#buy a:link, #buy a:visited { background-position: -693px -343px; width: 186px; padding-top: 46px; margin: 15px 0 0 58px }
#buy a:hover, #buy a:active { background-position: -693px -433px; }
#buy.sale a:link, #buy.sale a:visited { background-position: -693px -297px }
#buy.sale a:hover, #buy.sale a:active { background-position: -693px -387px; }
#description { padding-top: 17px }
.tag { background-position: -5px -597px; width: 1011px; padding-top: 79px; }

/** Features **********************/
#features { padding: 0 0 0 25px }
#features ul{ width: 312px; float: left; margin-right: 20px}
#features li { padding-bottom: 12px }
#features li ul { padding-top: 18px }
#features li ul li { background-position: -1023px -50px; padding-left: 20px; height: auto; line-height: 10px}
#features span { width: 250px; display: block; float: left; }
#features .icon { width: 38px; padding-top: 38px; float: left; margin-right: 15px }
#features .piano .icon {  background-position: -701px -5px }
#features .landscape-piano .icon {  background-position: -1051px -5px }
#features .chords .icon {  background-position: -952px -5px }
#features .scales .icon {  background-position: -1002px -5px }
#features .quiz .icon {  background-position: -751px -5px }
#features .notes .icon {  background-position: -801px -5px }
#features .reference .icon {  background-position: -851px -5px }
#features .solfege .icon {  background-position: -901px -5px }
#features .coverflow .icon {  background-position: -1101px -5px }
#features .new { background-position: -894px -455px; width: 36px; padding-top: 17px;  }
body.spanish #features .new { background-position: -882px -455px; width: 50px;   }
#features .col a:link, #featured .col a:visited { background-position: -934px -454px; width: 19px; padding-top: 20px; float: right; margin: 0 0 5px 5px }
#features .col a:hover, #featured .col a:active { background-position: -954px -454px }

/** Links **********************/
#links { float: left; width:320px }
.facebook, .twitter{ float: left }
.appstore { clear: left; padding-top: 15px}
.facebook a:link, .facebook a:visited { background-position: -1020px -525px; width: 110px; padding-top: 50px; }
.facebook a:hover, .facebook a:active { background-position: -1020px -375px; }
.twitter.allforces a:link, .twitter.allforces a:visited { background-position: -1020px -574px; width: 105px; padding-top: 50px; }
.twitter.allforces a:hover, .twitter.allforces a:active { background-position: -1020px -424px; }
.twitter.melvitax a:link, .twitter.melvitax a:visited { background-position: -1020px -624px; width: 105px; padding-top: 50px; }
.twitter.melvitax a:hover, .twitter.melvitax a:active { background-position: -1020px -474px; }
.appstore a:link, .appstore a:visited { background-position: -697px -481px; width: 312px; padding-top: 108px; }
#digg-div { text-align: center; padding: 15px 0 0 0 }
#links h2 { padding: 20px 0 0 0; font-size: 22px }
#links ul li { background-position: -1023px -50px; padding: 0 0 0 20px; margin-top: 10px; height: auto; line-height: 1.3em}
#links h3 { padding: 0; }

/** Footer **********************/
#footer { background-color: #333333; padding: 25px 0; margin-top: 25px }
#footer p { color: #999999; font-size: 12px; width: 1020px; margin: 0 auto }


/** Share **********************/
#share-div, #contact-div, #resume-div, #close, #share-div a, form.sendRichMail .input-error, form.sendRichMail input.submit, form.sendRichMail .msg-status  { 
	background-image: url('i/share.png'); background-repeat: no-repeat; display: block; overflow: hidden; height: 0
}
#share-div { position: absolute; top: 5px; left: 570px; display: none; width: 328px; height: 469px;  background-position: 0 10px; color: #454541 }
#share-div h2 { color: #454541; text-align: center; padding: 34px 0 32px 0;  font-size: 16px }
#share-div h2.email-title { padding-top: 10px }
#share-div ul { padding-left: 29px}
#share-div li { float: left; padding-bottom: 5px }
#facebook a:link, #facebook a:visited { width: 148px; padding-top: 35px; background-position: -349px -302px }
#facebook a:hover, #facebook a:active { background-position: -349px -366px }
#twitter a:link, #twitter a:visited { width: 121px; padding-top: 35px; background-position: -497px -302px }
#twitter a:hover, #twitter a:active { background-position: -497px -366px }
#stumbleupon { clear: left }
#stumbleupon a:link, #stumbleupon a:visited { width: 44px; padding-top: 29px; background-position: -349px -337px }
#stumbleupon a:hover, #stumbleupon a:active { background-position: -349px -401px }
#google a:link, #google a:visited { width: 44px; padding-top: 29px; background-position: -393px -337px }
#google a:hover, #google a:active { background-position: -393px -401px }
#digg a:link, #digg a:visited { width: 45px; padding-top: 29px; background-position: -437px -337px }
#digg a:hover, #digg a:active { background-position: -437px -401px }
#delicious a:link, #delicious a:visited { width: 46px; padding-top: 29px; background-position: -482px -337px }
#delicious a:hover, #delicious a:active { background-position: -482px -401px }
#embed a:link, #embed a:visited { width: 88px; padding-top: 29px; background-position: -528px -337px }
#embed a:hover, #embed a:active { background-position: -528px -401px }
#embeded { clear: left; font-size: 12px; padding-top: 5px; text-align: center }
/** Contact **********************/
#contact-div { position: absolute; top: 5px; left: 681px; width: 328px; height: 302px; background-position: -328px 10px; display: none }
#contact-div h2 { color: #454541; text-align: center; padding: 34px 0 32px 0; width: 322px; font-size: 16px }
/** Form **********************/
#close { position: absolute; top: 0; right: 0; width: 29px; padding-top: 29px;  background-position: -487px -430px }
form.sendRichMail label { display: none }
form.sendRichMail p { padding-bottom: 6px }
form.sendRichMail input, form.sendRichMail textarea {
	background-color: #DBDAD8;color: #333333; font: normal normal 13px Arial, Verdana, sans-serif; 
	border: 1px solid #B3B3B3; -moz-border-radius: 6px; -webkit-border-radius: 6px; padding: 5px 20px; margin-left: 30px
}
form.sendRichMail input.textfield { width: 150px }
form.sendRichMail textarea.textarea { width: 225px; height: 60px }
form.sendRichMail input.submit { 
	width: 66px; padding: 28px 0 0 0; border: none; background-color: transparent; 
	background-position: -349px -431px; cursor: pointer }
form.sendRichMail input.submit:hover, form.sendRichMail input.submit:active{ background-position: -419px -431px }
form.sendRichMail .input-error { background-position: -636px -439px; height: auto }
form.sendRichMail .msg-status { 
	 margin: 6px 0 0 30px; width: 242px; height: 20px; 
	-moz-border-radius: 6px; -webkit-border-radius: 6px; padding: 3px 0 0 25px; font-size: 12px; font-weight: bold
}
form.sendRichMail .loading-img{ background: url('i/loading.gif') no-repeat 3px 2px }
form.sendRichMail .error-img{ background-position: -634px -376px }
form.sendRichMail .success-img{ background-position: -634px -301px  }

/** Language **************/
#language { width: 138px; margin: 12px auto 15px auto; position: relative}
#language .current { background-position: -880px -375px; width: 138px; padding-top: 30px;  }
#language .current:hover { background-position: -880px -405px; cursor: pointer}
#language .languages { display: none; width: 100%; position: absolute; top: 30px; text-align: center }
#language .languages a:link, #language .languages a:visited { color: gray; }
#language .languages a:hover { color: black;

/** Browser Not Supported **************/
#browsernotsupported { background: white; width: 763px; height: 243px; padding-top: 50px; line-height: 1.5em }
#browsernotsupported h2 { width: 474px; margin: 0 auto; font-size: 22px; text-align: center; padding: 25px 0 }
#browsernotsupported p { width: 474px; margin: 0 auto; text-align: center; font-size: 16px }
#browsernotsupported a { font-weight: bold; margin-right: 6px }