/********** Reset **********/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0;} hr { display:block; height:1px; border:0;  border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle;}

/********* Global **********/
.hidden, .hide, .ui-tabs-hide { display: none; }
.bg-img, .bg-img-list li a { display: block; height: 0; overflow: hidden; }
.clear { clear: both;}
a:link, a:hover, a:visited { text-decoration: none; color: #0071C2; }
a:visited { color: #005DA1; }
a:hover { color: #000 }
	
/** Formatting ****************/
p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, fieldset, form, ol, dl, dir, nav { padding: 0.5em 0 }
p { font-size: 1.0em }
h1 { font-size: 1.4em }
h2 { font-size: 1.3em }
h3 { font-size: 1.2em }
h5 { font-size: 1.0em }
h6 { font-size: .9em }
ul { list-style: none; padding-left: 25px; list-style-position: outside}
ul li { margin: 7px 0 8px 10px; list-style: disc}
ul li li { list-style-type: circle }
ol { margin: 7px 0 8px 0; padding-left: 35px; text-indent: 0; list-style-position: outside }
ol li { padding-left: 5px; list-style-type: decimal }
ol.alpha li, ul.alpha li { list-style-type:upper-alpha; }
dt dl { clear: both }
dt { width:30%; float: left; text-align:right; padding-right: 3%; font-weight: bold }
dd { width:66%; margin:0 0 0.5em 33%; line-height: 1.5em }
code, pre { font-family: Monaco, 'Courier New', Courier, monospace }
pre { background: #f5f5f5; border: 1px solid #dadada; padding: 15px; color: #555555; overflow: auto }
blockquote { padding: 5px 50px 2px 50px; color: gray; font-style: italic; font-size: 1.2em; color: #63605a; }
cite { color: silver; font-size: .8em }
cite:before { content: '- '}
fieldset { border: 1px solid silver; padding: 25px }
input[type=text] { width: 50%; padding: 5px; font-size: 1.2em }
textarea { width: 100%; height: 150px; resize: both; padding: 5px; font-size: 1.2em }
table { border-collapse: collapse; margin: 0 0 .8em 0 }
td, th { border: 1px solid silver; padding: 5px }
th[scope=col] { background: #EEFCFF; font-weight: bold; text-align: center }
th[scope=row] { background: none; font-weight: normal; text-align: right; color: gray }
table.centercol1 td:nth-child(1), table.centercol2 td:nth-child(2), table.centercol3 td:nth-child(3), table.centercol4 td:nth-child(4), table.centercol5 td:nth-child(5), table.centercol6 td:nth-child(6), table.centercol7 td:nth-child(7) { text-align: center; }
sup { vertical-align: super; font-size: 0.6em }
sub { vertical-align: sub; font-size: 0.6em }
acronym, abbr { font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; color: gray }
figure { color: #5e708d; text-align: center; font-size: 1.6em; font-style: italic; line-height: 1.3em }
figcaption, figure.alt { font-size: 1em; }

/******** Structure ********/
html, body {
	font: normal normal 1em Arial, Helvetica, sans-serif;
	background: #dbe2d3 ;
	color: black;
	}
#wrapper {  width: 1040px; margin: 0 auto }
article { margin-bottom: 2em; position: relative; } 
#accolades {  width: 980px; margin: 0 auto; clear: both; }
footer { clear: both; width: 980px; margin: 0 auto; text-align: center; font-size: .9em; padding: 2em 20px } 	

/* Background Image */
header > nav > ul, header nav > ul > li > a, #quotes, header h1, .tagline, .col1 span.icon, .col2 span.icon, .col2 li ul li, .buy-btn:link, .buy-btn:visited, #accolades li, .appstore-badge { background-image: url('i/Nota-Elements-en.jpg')}
#spanish header > nav > ul, #spanish header nav > ul > li > a, #spanish #quotes, #spanish header h1, #spanish .tagline, #spanish .col1 span.icon, #spanish .col2 span.icon, #spanish .col2 li ul li, #spanish .buy-btn:link, #spanish .buy-btn:visited, #spanish #accolades li, #spanish .appstore-badge { background-image: url('i/Nota-Elements-es.jpg')}

/* Header */
header { width: 1040px; margin: 1em auto 0 auto; position: relative; overflow: hidden } 
header > nav > ul { background-position:  0 -50px ; height: 47px; padding: 0}
header nav > ul > li { float: left; padding: 0; margin: 0; list-style-type: none }
header nav > ul > li > a { display: block; height: 0; overflow: hidden; padding-top: 47px; background-position: 0 -50px}	
li.allforces a:link, li.allforces a:visited { width: 115px; background-position: 0 -50px}
li.allforces a:hover, li.allforces a:active, li.allforces.current a:link, li.allforces.current a:visited { background-position: 0 -1px}
li.nota a:link, li.nota a:visited { width: 106px; background-position: -115px -50px}
li.nota a:hover, li.nota a:active, li.nota.current a:link, li.nota.current a:visited { background-position: -115px -1px}
li.thinkertoy a:link, li.thinkertoy a:visited { width: 148px; background-position: -221px -50px}
li.thinkertoy a:hover, li.thinkertoy a:active, li.thinkertoy.current a:link, li.thinkertoy.current a:visited { background-position: -221px -1px}
li.language { padding-left: 335px}
li.language a:link, li.language a:visited { width: 140px; background-position: -704px -50px}
li.language a:hover, li.language a:active, li.language.current a:link, li.language.current a:visited { background-position: -704px -1px}
li.press a:link, li.press a:visited { width: 83px; background-position: -844px -50px}
li.press a:hover, li.press a:active, li.press.current a:link, li.press.current a:visited { background-position: -844px -1px}
li.contact { float: none }
li.contact a:link, li.contact a:visited { width: 113px; background-position: -927px -50px}
li.contact a:hover, li.contact a:active, li.contact.current a:link, li.contact.current a:visited { background-position: -927px -1px}

#contactForm { width: 325px; position: absolute; top:55px; right:25px; background: #dbdcde; padding: 20px 20px 20px 40px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-box-shadow: rgba(0, 0, 0, 0.498039) 0 3px 3px; display: none}


/* Languages */
.languages { position: absolute; width: 140px; padding: 0;  display: none; -webkit-box-shadow: rgba(0, 0, 0, 0.498039) 0 0 5px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomleft:10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px;}
.languages li { margin: 0; list-style-type: none;  text-align: center; font-size: .8em}
.languages li a:link, li.language ul li a:visited { display: block;  width: 140px; padding: 8px 0; background: #999; border-top: 1px solid #797979; color: white;  }
.languages li a:hover, li.language ul li a:active { background: #0071C2; }
.languages li:last-child a { margin-left: 0; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomleft:10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; }

/* Quotes */
#quotes { background-position: 30px -99px; height: 0; overflow: hidden; padding-top: 118px; width: 1040px }

/* Featured shot and tagline */
header h1 { background-position: 0 -218px; width: 1040px;  height: 0; overflow: hidden; padding: 687px 0 0 0; margin: 1em 0 }
.tagline { background-position: 0 -907px; width: 1040px;  height: 0; overflow: hidden; padding: 44px 0 0 0; margin: 1em 0 }

/* Screenshots */
.screenshots {  background: #b2bba9; margin: 0 30px; padding: 20px; -webkit-border-radius: 10px; -moz-border-radius:10px; -webkit-box-shadow: rgba(255, 255, 255, 0.498039) 1px 1px 1px; }
.screenshots img { margin-left: 15px }
.screenshots a:first-child img { margin-left: 0 }

/* Columns */
.col1{ float: left; width: 293px; padding: 2em 0 0 30px}
.col2 { float: left; width: 323px; padding: 2em 0 0 20px}
.col3 { float: left; width: 323px; padding: 2em 0 0 20px}
.col1 span, .col2 span { float: left; width: 235px }
.col1 span.icon, .col2 span.icon { display: block; height: 0; overflow: hidden; width: 38px; padding-top: 38px; margin-right: 10px}
.col1 > ul, .col2 > ul { padding: 0}
.col1 > ul > li, .col2 > ul > li { list-style-type: none; padding: 1em 0; margin: 0}
.col1 .piano .icon { background-position: -35px -960px }
.col1 .quiz .icon { background-position: -85px -960px }
.col1 .create .icon { background-position: -135px -960px }
.col1 .chords .icon { background-position: -285px -960px }
.col1 .scales .icon { background-position: -335px -960px }
.col1 .landscape-piano .icon { background-position: -385px -960px }

.col2 .solfege .icon { background-position: -235px -960px }
.col2 .coverflow .icon { background-position: -435px -960px }
.col2 .reference .icon { background-position: -185px -960px }
.col2 .reference { padding-bottom: 0 }
.col2 li ul { clear: both; padding-left: 15px}
.col2 li ul li { list-style-type: none; background-position: -35px -1003px; background-repeat: no-repeat; padding-left: 23px}

/* Column Dividers */
.col1 > ul > li { border-top: 1px solid white }
.col1 > ul > li { border-bottom: 1px solid #999 }
.col1 > ul > li:first-child  { border-top: none; }
.col1 > ul > li:last-child { border-bottom: none }

/* Buy Btn */
.buy-btn:link, .buy-btn:visited { display: block; height: 0; overflow: hidden; width: 110px; padding-top: 31px; background-position: -484px -958px; position: absolute; top: 230px; }
.buy-btn:hover, .buy-btn:active { background-position: -601px -958px}
.buy-btn.notahd { right: 50px }
.buy-btn.nota { right: 310px }

#inline-twitter { float: left; padding: 0 10px 0 50px }
#inline-facebook { padding: 0 10px 20px 50px }

#accolades { border-top: solid 1px #999 }
#accolades h1 { border-top: 1px solid white; padding: 2em 0 .5em 0 }
#accolades ul { width: 840px }
#accolades li { list-style-type: none; background-position: -35px -1003px; background-repeat: no-repeat; padding-left: 23px}


/* Footer */
footer a { font-weight: bold }
.facebook-link:link, .facebook-link:visited { color: #153577; }
.facebook-link:hover, .facebook-link:active { color: #0D224C }
.twitter-link:link, .twitter-link:visited { color: #1f88b4 }
.twitter-link:hover, .twitter-link:active { color: #125479 }
.appstore-badge { display: block; height: 0; overflow: hidden; width: 168px; padding-top: 58px; background-position: -871px -960px; margin: 0 auto }

#info { text-align: left; background: #b2bba9;padding: 20px; -webkit-border-radius: 10px; -moz-border-radius:10px; -webkit-box-shadow: rgba(255, 255, 255, 0.498039) 1px 1px 1px; color: #2B2E28 }
footer section { float: left; width: 440px; text-align: left; padding-right: 25px; border-right: 1px solid #999 }
#social { padding-right: 0;  padding-left: 25px; border-right: none;  }
footer h1 { font-size: 1.2em; text-shadow: 1px 1px #E5EADF; padding: 0 }