html * {
    font-family: Georgia, sans-serif;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    max-width: 900px;
    margin: 10px auto 0px;
}

h1 {
    text-align: center;
    font-size: 30pt;
}

h2 {
    text-align: right;
    padding-right: 50px;
}

#abc {
  position: fixed;
  bottom: 0px;
}

#menu {
    width: 96px;
    height: 16px;
    margin-left: auto;
}

#save {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABaElEQVRoQ+2ZOwoCMRCGdw+gqL21rafQVrDwIDaWWlqI9xDB1hvYeghbC72A/gEXJGwyySTZh44wVTKPb/7Jkl3zrOW/vOX1ZwJQt4KiQNMVGKLAPWwC6yQqdoO4a25s2wip4q+wATe4hx8bwgZwRAFzjyJCt7IgbADPhGNjgvWGsAG8iJZSTzDdX99vir9F3pWrnE0EULU7QzQVwBmiyQBOECkBqDGmzljhbx2nNgBYlWgLgIIorfWvAagZj70eXYHYBVLxBIDqUOp1USB1h6n4ogDVodTr0RWg3gd8gai7kQDoHRUFtI7ICOkjwuqI78n92s/KV+d1OkrDBCBgZEQB43vmpzWsQxWgCCvfT5+BOj7umgR8YKFXtmhT4ASHWcBIxHQ9INjCF2AEhwusH7MSRqw7fMawmy+A2q/+pdnBprAuI3mIixrhM2xpKp56CoUkr8w39pW4ssKLRAJQecu1hKJA3Qq8AcuqTTHQ4OtHAAAAAElFTkSuQmCC');
}

#edit {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACC0lEQVRoQ+2ZMS8EQRTH7yJKImpqrZIvQKJDgkLhO4iQKNAIifAlFIgoVNQSWh9CqyAqIfxfciNrd+e9mZt5s3PJTvKSy+3szO/33uzs3l63M+CtO+D8nVag6QrmWoF9JOYTcSglKEcBgt/rge9KEpLAJAY4Q8whRqRsCMc/cHwB8cD0K8KbbqwEJ0Dwz4jxQHA63QV+G/2OLHNZJTiBawy2nAh+BfNcCnNt4fhJuQ8n8J5o2RDTEOIcsSZIVCrBCfyUBpOul9BiuUjQNXJQnKhJgUWA3CK+C0DD+HyBWKrJBoGTwL/WlACB0FZJ634d8VWgqqtEJfOmfxMCBt4wSBLH6LhjW5+pBcrwhosu4I2a5URLid2dUgrY4LlK2BL/930qAQm+b4kUAq7wRoJunjdi6nsdtAV84a27TRMXsTo8SWlVIDb8KFjp0abSNAQ04O9BPptCQAt+xrZaYlZAE9663GMJxIYn4CcEZd60WtYYAhrwBO30OB9DoDwRdw/y2eezE/CBz64CvvBZCfQDn41Av/BZCITAJxXgdp2QY8l2oRBI7txWwCkDWulPeSfWcnBKYIxHiWwFYrzcjSX3hoHG6gbjKkBvBuj9ZQ7tChCrvgJTOOEREeMPjpAkvOLkacSLrwD1n0CcIuYR9MM6ZaMlfIfYtMETjPY7f3XhVkA9xcIEbQXaCgRm4BcE9IkxI+iQKQAAAABJRU5ErkJggg==');
}

#download {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABk0lEQVRoQ+1Yu2oCURDVpJKUAT8ghX+QQjuxFgQh3xG/xHyHIDaWAbtY+AcWfoBgKdjkcUZ3QQR353H3XjbMwimEM3Pumbk7s9hs1Pxp1vz8DTeQuoPegf/UgV+hmSDdD5IkO7gbEHbwTPcOXFXNr5BfIU0F/AoZq+ZTyK9QxCs0hda7UY8b/gHihEOWvAMPSDgDxpzEBs4SsSPgm5NDYoDytYBPoMdJruBsENMHjtxYqQHK+wx8AR2uCJO3A68L7Jn8M01jgOJegDXQlogVcA9ZV7fSfFoDpPMKrIAnqegN/4Tfg6yr4lQWAyQ2BBbAo1j5EvADvAFzZbz6Cl3r0WilEat5aFTSyFQ/1g7kwpodwZ71Re5CGZDuCNGsj2GANLg7QjzrYxkgnbIdoZr1MQ2Q1r0doZ71sQ2Q3u2OMM36FAZIM98RNChMsz6VAdLNP79Nsz6lAfWC4gaG2gNcveA8NxC8pMKEnA5I//MUHqGUXnhGN1BaPzvBO2CvYYUZOO9AhfL21G7AXkNbBu+ArX726D/QNDoxgo2KxAAAAABJRU5ErkJggg==');
}

#midi {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABtklEQVRoQ+1ZO04DMRBNGigSuADiBkGhAsIJKOACOQAUfO4CEhSIkiMEcQSgASRyAgRcAGho4A2KJe/Iu7OL5c+KiTTSyp71vDdvvLHG3U7Lf92W4+8ogdQKqgI5KzAPcHuwMWwA60UG+4l4U9gl7Bz25YpfVkJLcL6CDSODLgv3iIlt2Ct3cBGgzN9lBN5gfsDDBlfCReAITseZZJ7DOMDAqT3oIkDZX8uUwC1wjSQC73DoZ0rgA7gWJALfmYI3sApV4yohJRBYQVUgcILF5VUBMUWBHVSBwAkWl1cFxBQFdvh/CvDjBj9qmPmm40aosvdqzdc5CykBtifqJkQVcJ6/Mdi01r1qvCLeLz7dA1YSmipTq8ZVgZIyC/xnW1i+cg/9ZQ/EBE+xlEDqFnxjBXhjaxkyvsSum1k8iv1sxSZsizYWV3apfbduOV3jeTcBCQJPbfUtC8sNnjclAodwOEmUcSnsPhzOJALUXicVVqXVIs/fIx41dgsXHVUXHJOMSBD4HdgbT1rVF2ZuVvt0xbQCi92xpk70E4yumC545g2R1J9I7ypUAt4p9FxAFfBMoPfrrVfgB7C/azEJJJGPAAAAAElFTkSuQmCC');
}

#pdf {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACaklEQVRoQ+2ZT0gVQRzHn1An6Y/hpcDULmIidpCIoKshRIgdCg+CJy8dBA8KengSgh6iQ9AhgoSIIIL0kHTrGN26dA4qEYLKNMibfr4wK8tj9+2wO/t2V2bhw+rM7szvM/Ob/ffaahXf2ioef80LFD2DtjPQRaCPYAROZQx6ifPrGds4Ot1GQMF/hnOuOqUdZxI2Am/o8I7D4IOmnEjYCOw6SJs4/8wSNgIHjkZ/nnZWItpapUx1qbZWCqivOdcSrRbQKDuVKELAqURRAs4kihRwIlG0QGaJMghkkiiLQDOJpjGWSSBOojQCqe60nOQFXD0L+RmIGoFWLmI/A34G0uZAxvP8ZfTYXkYvkRp/4B9cgHuwDD/huqnbN3VD7Bdh2KTTFfbfGlLrd0yq5ZZCargHFuAdrINe0CXSDZfhPnyBZ6DjP8A16IVtmAkFHfXCr+pcBa7SwSf4AfoANg76gieB27BhAnzBfhJGYdMI7LDXDCZtuQoM0PsaPIcnUIepCIE9ys7AedgyAtqPmeiVjoXMQHj0bvHPK1AuN87AL8o6oQe+GoHv7LUWtPWDZilqy30GXtLrRegwvWtxNgo8pWwaJkDHaw2UIoWCNRAeuUBAVxx9cdMaeQwnzd8a7UoIBFL6qn0DHsCgKSyFgK4gJyDq94L/lP+F9ph61ekGeTYm78PFua0Bi76dHOIFKv8slOcPHEk5prXSdJ3YvFK+pZHgjpnUoev61zR4t1mjNgJ9NPARghuV6yDj2tPdW3dqPWfFbjYCOlkPag/hJpzO2UAp+x5mk4JXHLYCOcecvnkvkH7s3JxZ+Rk4BPbAhTGnMh+xAAAAAElFTkSuQmCC');
}

#play {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABqklEQVRoQ+2Zv04CQRDGuWiLEmqpKSgInU+gNdFAUB4EYqOJjY28giZ2/nkBrakpoCC21CZqSwLfJJBcyN5ll5uduYMj+cLlsnv7/WYmN3e3QSHjvyDj/gs5gHYG8wykPQMVGBxAZ1BR2Ow/1vuC+tA0au24EiLzI6gsbHxzuR+cqEMzk484gDdMuFA2v17+FQctV4A/hbKJihd5OXYFWKQk+msbxmqJK6G9BpggbDXmDIpl4BbG76EnqMsIIQJA5u9Wpg+YIbwDjGG4Ac1DUT/E8QvUZsiEdwDySL2jswHBlQkRAJ8QYgC+IEQBfECIA3BDqABwQqgBcEGoAnBAqAPQM/2VoUc849y1RaNTBUhqnvjUADjMqwFwmVcB4DQvDsBtXhTAh3kxAF/mRQB24oXmAaHqhV4pbZuURR+T6wMEcQNxmhcpoXAUM/1ZxaYcthmj9iixjVnTHGeANH3c/QVRyZpqNfAD/02u8CW8zjvmX7oCVDFhCKVhg+MUPr5dAWj8CfQInUNHCaPoOp1K+BOiLSaj+ch7q+tKmuPzbVbN6OclpB39ncjAEjzdcjE7/aVuAAAAAElFTkSuQmCC');
}

#microphone {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADV0lEQVRoQ+2ZWahPURTG7zVmfpAi5BoykwcpScrwYMiDV4+EUAhvyo28mechyoNnkSk8EBJvMiTjzfjixRRl/H3uOVod95z/PnufQzdn1dfd+3/2Wnt9a62zzjn71te1cqlv5f7XVQRqZFABEr6XlekyMjAGZxeCaWAwaA9eggvgILhZJJkiCXTEsa1gCWiT4uQPfj8KloJPRRApioCcPwOmOjp1jXXTwWfH9anLiiKwJ4pqHn8ORNnKo/PH2iIIjMbqrYyySXNQN/Y4cDuEQREEduHAck8ntqO3ylP3l1oRBO5hZ4SnE3fRUwa9pQgCH9i9i6cH0u3mqVtYBtQaQyQoiEHKkdcVgX+WvioDzREIKuMg5SoDVQYC668qoaqE/pMSek+mu5qnZXfG+i2WdwEvZNLtkbD91sy1j/ZLFZfnwCO09XEeyzAGD8xcr8QjszbJuHaHazoEiEWv5Xo9j+Uhg6GhBK5iYJIxMovxWTPfxnilJ4Et6K0xurMZnzJz7T05lEDyi0vfv/YLbBRzfVK2zUniG+vHJiK+j7lONWLZUSs4LiWkiJ82Rl8wHgi+mt98PiuTzrXDXhPoa+zOZHwuNAOdMPAGdDaGFjE+ZOYdGOtYRYdZLnKRRQrMF7N4MeP9Zv6RcS+QeX7kkgHZ1Mf3CmP8FePhwHYjkdgMdGiVVk7KmkpwbcJ5daL7oLfZQ4dkq2tFw5WADD8BykYsSu0coFq2ontiAZgBGqILTfw9Dw4D22V0Wad4JyJbsR0deKnzKVCZ4kpARjaCdQlru5krM76Ht3J+J1iWsLuB+fpazut6HgK6yS4B21JlQ21vPtBDKY+obI4BtU4rV5joiNI2iVS7eQjISH9wA/RJWHzNvBEccdhYgVCJab2teZmUnQlAnc5J8hKQ0SFAR+UNLeygY/STQFl5Cp5Ha0R8EFC05wLbKmMzWq/75rGT59EiHwJS7QeOg/F5NstYq/8ZzAMKQC7xJaBNVAq6+TYB35M5dZtGoPab7GZOREIIxBsMYKDer7ru6bRr84NRLXUveOao0+KyIgjEhvWMUA1PjDAlseNl5tcj6JkQ/M8N2S+SQDJCySPHUvYqxWjEpCLgcm9UGXCJUplrysxAmX7/tl0R+CthztjkJ5JGjDG2QI6XAAAAAElFTkSuQmCC');
}

#settings {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADpklEQVRoQ+2ZR4sUQRiGd00YMBxMYGAFRTBgwHAwYcCI+iNMqIgR9aZXc8SE/gkFAwZQ8SCKYgRFcDGAghezmN9nqYWZtrvS1q6OTMFLT0996a34VXVtTYWX2gqPv6ZK4G/3YMoemCcyR4U+DlIvVL9UOJOCfEoCzxVQX8+gkO3vKWsVS0ngV2BASXwnMWICrxII7MEGcd8eGC3ZccIF4UnGUW+9bxTWBgawR/LbhVcZvUF6nyFcF265bPoQmC4jZ4U2wjfhsLBVeCesN787uBwV1H/W/1uE3UIXY2u5nm2F78Is4ZLNtosAhu4JgzNG3ui9XhgTGXhW7Yb+GCB0z1Q80vtw03C5rlwEaOGdiYKMNUMM9FAwgZ7SoAW6xXpOpMdQZQRk50qDeVsPHFP9kkRBNNUMsSzLM1JEYKSEbwqtm+o5kf5P2RlvYiozWUTgsqQmRzq/L73jAktuvbFRpydL42JhWKTdK9KbktXNIzBfQicjnHyVDnvBEYEWyyv0KMvkLqFdhI8F0jlVqpdHYJsE2JhCCsHPEaxrdolB9pbTESSIbbOLwEQTCHuAb1kpwUO+wkZulZ77A3TYRKcK11wEqJ8gHBBGeThgzDPpf3jIloownO4IQz30bksGwmXBo2dbRlupfpFAztLJ4mSN6vZ5BJEnwpwp3KRU91FA5oSQO69cOzFOOUHZTlm04MNIAqxIpCpF5aUqrIckHwIkXO0tTjqr7kMkAXTZaYvKF1VYE0UfAp8cRsgi30cSQPetRRfftuHrdR6o2CHkO4mZZHsje2Cd9NjUigo9wCIRPIlDltEHcjBCiFlG70pviAf5oGV0kgyyo3IC8y2s0Qd9hY3c6sCe44Q2Tbha6idlKjFXhi96kiCxI5UI2e0xzRl6k4tAU5K5DTJOSlE0nOhV0o4dEcET90KhLNFsjnSaOcGkOy/Um9aq03OmwM7uM+bzOpKhQzpddv/03x5oaAEuarmE/RdK8JGSoHsIj4WKPdRDwrXRtETvRF+rEJztYuup6scmYlB0scUI4GKLE19u8Unm2DzOCdmrRZKwxqvFjpFESBUarxa7mt8rTMOxcc0WrHuLDwFi43KX1sZY9nK3l/7jDM1wCykclDjjvs4oDdQ7jUavkEJYiy8Blx3qOTGF2CNZDP2m8EccIQ5dJKoEXC2UV5+yB57JQT/PIDgk+cq22BzgYovd2xUYXyi5qP3nPrN6Nn5asZRDKG1kntaqBDwbqtnEfgPaIaoxxyezoQAAAABJRU5ErkJggg==');
}

.menuitem {
    background-size: contain;
    width: 16px;
    height: 16px;
    float: left;
}

#wrapper {
    position: relative;
    margin: 10px 0 0 auto;
    width: 240px;
    height: 100%;
}

#pitch {
    width: 240px;
    padding: 0px 20px 10px;
    border: 1px solid black;
    position: fixed;
    background: whitesmoke;
    border-radius: 3px;
}

.marker {
    height: 15px;
    display: inline-block;
    background: black;
    width: 1px;
    position: relative;
    z-index: -16;
}

#themarker {
    background: red;
    z-index: 15;
}

#range {
    height: 16px;
    width: 200px;
    border: 1px solid black;
    font-size:0;
}

#estimate {
    text-align: center;
    width: 200px;
    display: block;
}

#prefs {
    width: 240px;
    position: fixed;
    background: whitesmoke;
    font-size: 11pt;
    border-radius: 3px;
    border: 1px solid black;
}

li {
    width: 200px;
    height: 250px;
    display: inline-block;
    margin: 5px;
    overflow: hidden;
    background: white;
    border: 2px solid #dd;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    transition: all 200ms ease-out;
}

li:hover {
  box-shadow: 0 0 6px rgba(35, 173, 278, 1);
}

.thumbnail {
    width: 150px;
    height: 165px;
    margin: 5px 25px 10px;
    background-size: cover;
}

.title {
    display: block;
    text-align: center;
}

.composer {
    display: block;
    text-align: center;
    font-size: small;
}