@font-face {
    font-family: 'PaperJohnnyEinsRegular';
    src: url('../fonts/papeje_-webfont.eot');
    src: url('../fonts/papeje_-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/papeje_-webfont.woff') format('woff'),
         url('../fonts/papeje_-webfont.ttf') format('truetype'),
         url('../fonts/papeje_-webfont.svg#PaperJohnnyEinsRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
    font-family: Arial, sans-serif;
    font-size:14px;
    line-height:24px;
}

#header-wrapper {
    background-image:url(../img/top-bg.png);
    background-repeat:repeat-x;
    height:126px;
}

#header {
    width:960px;
    height:126px;
    margin:0 auto;
    position:relative;
}

p {
    margin-bottom:1em;
}

#header a.logo {
    display:block;
    width:345px;
    height:126px;
    text-indent:-9999px;
    position:absolute;
    top:0;
    left:0;
    background-image:url(../img/logo.png);
}

#header .menu {
    width:599px;
    height:91px;
    position:absolute;
    top:35px;
    left:361px;
    background-image:url(../img/menu-nonlanding-bg-2.png);
}

#header .menu a {
    position:absolute;
}

#header .menu .link1 {
    left:19px;
    top:25px;
}

#header .menu .link2 {
    left:97px;
    top:1px;
}

#header .menu .link3 {
    left:218px;
    top:14px;
}

#header .menu .link4 {
    left:289px;
    top:3px;
}

#header .menu .link5 {
    left:511px;
    top:12px;
}

#header .menu .link6 {
    left:516px;
    top:12px;
}

#header .menu .link7 {
    left:413px;
    top:21px;
}


#header .menu a {
    text-decoration:none;
    text-transform:uppercase;
    color:white;
    font-weight:bold;
}

#header .menu a:hover {
    color:#ffb805;
}

#main-content {
    padding-top:24px;
    width:960px;
    margin:0 auto;
    margin-bottom:24px;
}

#main-content-inner {
    padding-bottom:70px;
}

#welcome-wrapper {
    background-image:url(../img/blue-bg.png);
}

#welcome {
    width:960px;
    min-height:348px;
    padding-top:24px;
    padding-bottom:14px;
    margin:0 auto;
    color:white;
    font-weight:bold;
    text-shadow:2px 2px 2px #467da7;
    position:relative;
}

#welcome img {
    display:block;
    position:absolute;
    top:0;
    right:0;
}

#welcome h1 {
    color:white;
    text-transform:uppercase;
    font-size:30px;
    line-height:36px;
}

#welcome p {
    width:465px;
}

#welcome ul li { 
    padding-left:28px;
    background-image:url(../img/trza.png);
    background-position:7px 6px;
    background-repeat:no-repeat;
}

#get-started {
    height: 74px;
    background-image:url(../img/blueborder-bg.png);
    background-repeat:repeat-x;
}

#get-started a {
    display:block;
    margin:0 auto;
    width:481px;
    height:74px;
    text-indent:-9999px;
    background-image:url(../img/sign-up.png);
    background-repeat:repeat-x;
}

#onetwothree {
    margin:0 auto;
    width:960px;
    height:244px;
    background-image:url(../img/123.png);
    position:relative;
}

#onetwothree .one {
    position:absolute;
    width:300px;
    height:213px;
    left:0;
    top:19px;
    text-indent:-9999px;
}

#onetwothree img.instrument {
    position:absolute;
    top:75px;
    left:23px;
}

#onetwothree .instrument-chooser {
    position:absolute;
    display:none;
    top:57px;
    left:23px;
    width:254px;
    background-color:#e8e8e8;
    height:140px;
    z-index:100;
    font-family:PaperJohnnyEinsRegular;
    text-align:center;
    font-size:24px;
    line-height:36px;
    text-indent:0;
}

#onetwothree .instrument-chooser a {
    text-decoration:none;
    color:black;
    text-transform:uppercase;
}

#onetwothree .instrument-chooser a:hover {
    text-decoration:underline;
}

#onetwothree .instrument-chooser span {
    display:block;
    font-family:arial;
    font-weight:bold;
    font-size:14px;
    line-height:18px;
    color:#999;
}

#onetwothree .two {
    position:absolute;
    top:19px;
    left:330px;
    width:300px;
    height:213px;
    text-indent:-9999px;
}

.two input[type=text] {
    font-family:PaperJohnnyEinsRegular;
    font-size:46px;
    width:140px;
    height:76px;
    position:absolute;
    display:block;
    text-align:center;
    top:75px;
    left:70px;
    height:77px;
    border-width:0px;
}

#onetwothree .three {
    position:absolute;
    top:19px;
    left:660px;
    width:300px;
    height:213px;
}

#onetwothree .three a.butan {
    display:block;
    width:254px;
    height:113px;
    text-indent:-9999px;
    background-image:url(../img/butan.png);
    background-repeat:no-repeat;
    position:absolute;
    background-position:0 0;
    left:28px;
    top:57px;
}

#onetwothree .three a.butan:hover {
    background-position:0 -113px;
}

#landing-errors {
    width:960px;
    height:24px;
    margin:0 auto;
    position:relative;
    text-align:center;
    font-weight:bold;
    display:none;
    line-height:18px;
}

#landing-errors img {
    vertical-align:middle;
}

#landing-errors .one {
    position:absolute;
    width:300px;
    height:48px;
    top:0px;
    left:0px;
    display:none;
}

#landing-errors .two {
    position:absolute;
    width:300px;
    height:48px;
    top:0px;
    left:330px;
    display:none;
}

#status-bar {
    position:fixed;
    height:70px;
    bottom:0;
    background-color:#f0f0f0;
    width:100%;
    border-top:5px solid #ddd;
    font-family:'Paper Johnny Eins', sans-serif;
    font-size:18px;
}

#status-bar-inner {
    position:relative;
    height:70px;
    width:960px;
    margin:0 auto;
    background-image:url(../img/status-bg.png);
    background-repeat:no-repeat;
}

#status-bar a.prev {
    background-image:url(../img/prev.png);
    background-repeat:no-repeat;
    width:91px;
    height:70px;
    text-indent:-9999px;
    display:block;
    position:absolute;
    top:0;
    left:0;
}

#status-bar a.prev:hover {
    background-position:0px -70px;
}

#status-bar a.next {
    background-image:url(../img/next.png);
    background-repeat:no-repeat;
    width:76px;
    height:70px;
    text-indent:-9999px;
    display:block;
    position:absolute;
    top:0;
    right:0;
}

#status-bar a.next:hover {
    background-position:0px -70px;
}

#status-bar .time-left {
    position:absolute;
    top:0;
    left:115px;
    height:70px;
    width:227px;
}

#status-bar .time-left div.desc {
    position:absolute;
    top:12px;
    left:10px;
    width:130px;
    line-height:24px;
}

#status-bar .time-left div.time {
    position:absolute;
    width:90px;
    top:12px;
    left:150px;
    font-size:24px;
    height:24px;
    line-height:24px;
}

#status-bar .time-left a.pause-play {
    display:block;
    position:absolute;
    top:36px;
    left:144px;
    width:61px;
    height:23px;
    background-image:url(../img/pause-bg.png);
    text-indent:-9999px;
}

#status-bar .time-left a.playing {
    background-position:0 -23px;
}
#status-bar .time-left a.playing:hover {
    background-position:0 0;
}

#status-bar .time-left a.paused {
    background-position:-61px -23px;
}
#status-bar .time-left a.paused:hover {
    background-position:-61px 0;
}
#status-bar .time-left a.done {
    background-position:-122px -23px;
    cursor:default;
}
#status-bar .time-left a.done:hover {
    background-position:-122px -23px;
    cursor:default;
}

#status-bar .session-prog {
    position:absolute;
    left:360px;
    top:0;
    width:240px;
    height:64px;
    text-align:center;
    padding-top:6px;
}

#status-bar .session-prog .prog-bar {
    position:absolute;
    top:36px;
    left:8px;
    width:228px;
    height:22px;
    background-image:url(../img/progbar-empty.png);
}

#status-bar .session-prog .prog-bar .prog-bar-inner {
    float:left;
    width:0;
    height:22px;
    background-image:url(../img/progbar-full.png);
    text-indent:-9999px;
}

#status-bar .metronome {
    position:absolute;
    left:624px;
    top:-30px;
    width:240px;
    height:100px;
}

#status-bar .start-practice {
    font-size:14px;
    position:absolute;
    width:493px;
    left:110px;
    top:0px;
    height:70px;
    background-color:#f0f0f0;
}

#status-bar a.butan {
    position:absolute;
    top:0px;
    right:0px;
    background-image:url(../img/butan-for-status-bar.png);
    background-repeat:no-repeat;
    display:block;
    text-indent:-9999px;
    height:70px;
    width:136px;
}

#status-bar form {
    position:absolute;
    top:0px;
    right:120px;
    background-image:url(../img/status-bar-input.png);
    background-repeat:no-repeat;
    width:132px;
    height:70px;
}

#status-bar .start-practice input[type=text] {
    font-family:PaperJohnnyEinsRegular;
    font-size:24px;
    width:70px;
    height:40px;
    position:absolute;
    top:12px;
    left:20px;
    display:block;
    text-align:center;
    border-width:0px;
}

#status-bar .start-practice p {
    margin:0;
    position:absolute;
    width:210px;
    padding-left:20px;
    padding-top:10px;
}

#status-bar a.butan:hover {
    background-position:0 -70px;
}

h1 {
    font-size:36px;
    font-family:PaperJohnnyEinsRegular;
    line-height:36px;
    margin-bottom:14px;
}

p+h1 {
    margin-top:24px;
}

h2 {
    font-size:20px;
    font-family:PaperJohnnyEinsRegular;
    line-height:36px;
}

p+h2 {
    margin-top:24px;
}

#signup_login {
    width:800px;
    padding:20px 20px 10px 20px;
    overflow:auto;
}

#signup_login #whoa {
    font-size:24px;
    color:#00c;
    text-align:center;
    font-weight:700;
    margin:0px 0px 20px 0px;
}

#signup_login .mini-title, #avatar_win .mini-title {
    display:block;
    font-size:24px;
    line-height:24px;
    margin-bottom:12px;
    font-weight:700;
}

#signup_login #signup {
    width:379px;
    padding-right:20px;
    float:left;
    border-right:1px solid #aaa;
}

#signup_login #login {
    width:380px;
    padding-left:20px;
    float:left;
}

#signup_login form {
    font-size:12px;
    font-weight:700;
}

#signup_login form label {
    display:block;
    line-height:12px;
    margin-top:10px;
}

#signup_login form input[type="submit"] {
    margin-top:20px;
    padding:10px;
}

#signup_login form input[type="text"] {
    width:200px;
    padding:2px;
}

#signup_login form input[type="text"]:focus {
    background-color:#ffd;
}

#signup_login form input[type="password"] {
    width:200px;
    padding:2px;
}

#signup_login form input[type="password"]:focus {
    background-color:#ffd;
}

#close_this {
    text-align:center;
    padding-bottom:10px;
    font-size:12px;
}

.invisible {
    display: none;
}

#main-content table {
    margin:24px auto;
}
#main-content thead tr {
    background-image:url(../img/top-bg.png);
    background-position:bottom;
}
#main-content thead th {
    font-weight:bold;
}

#main-content th {
    padding:10px 15px 15px 15px;
}

#main-content td {
    padding:10px 15px;
}

#main-content tr.alt {
    background-color:#f4f4f4;
}
#main-content thead tr {
    background-image:url(../img/top-bg.png);
    background-position:bottom;
}

#footer {
    text-align:center;
    padding-top:48px;
    font-size:12px;
}

#footer a {
    color:#444;
    padding:0 5px;
}
#footer a:hover {
    text-decoration:none;
}

a.butan {
    display:block;
    background-image:url(../img/butan-whitebg.png);
    background-repeat:no-repeat;
    text-indent:-9999px;
    height:113px;
    width:254px;
    margin:0 auto;
}

a.butan:hover {
    background-position:0 -113px;
}

a:hover {
    text-decoration:none;
}

.note-box .note-title {
    display:block;
    font-size:20px;
    font-family:PaperJohnnyEinsRegular;
    line-height:20px;
    margin-bottom:8px;
}

.note-box {
    width:509px;
    margin:1em auto;
    padding:20px 16px 0px 16px;
    overflow:auto;
    background-color:#fff6c2;
    background-image:url(../img/note-bg.png);
    background-repeat:no-repeat;
}

.note-box ul {
    margin-bottom:1em;
    list-style-type:disc;
    padding-left:1em;
}

.note-box ul li {
    margin-bottom:0.5em;
}

.tuner {
    width:572px;
    height:338px;
    margin:0 auto;
    background-image:url(../img/tuner.png);
    background-repeat:no-repeat;
    position:relative;
    margin-bottom:1em;
}

.tuner a {
    display:block;
    text-indent:-9999px;
    width:60px;
    height:50px;
    position:absolute;
    background-image:url(../img/tuner-buttons.png);
    background-repeat:no-repeat;
}

.tuner a#low-e {
    top:0px;
    left:116px;
    background-position:-116px 0;
}

.tuner a#low-e:hover {
    background-position:-688px 0;
}

.tuner a#low-e.active {
    background-position:-116px -170px;
}

.tuner a#low-e.active:hover {
    background-position:-688px -170px;
}

.tuner a#a {
    top:20px;
    left:188px;
    background-position:-188px -20px;
}

.tuner a#a:hover {
    background-position:-760px -20px;
}

.tuner a#a.active {
    background-position:-188px -190px;
}

.tuner a#a.active:hover {
    background-position:-760px -190px;
}

.tuner a#d {
    top:42px;
    left:263px;
    background-position:-263px -42px;
}

.tuner a#d:hover {
    background-position:-835px -42px;
}

.tuner a#d.active {
    background-position:-263px -212px;
}

.tuner a#d.active:hover {
    background-position:-835px -212px;
}

.tuner a#g {
    top:60px;
    left:332px;
    background-position:-332px -60px;
}

.tuner a#g:hover {
    background-position:-904px -60px;
}

.tuner a#g.active {
    background-position:-332px -230px;
}

.tuner a#g.active:hover {
    background-position:-904px -230px;
}

.tuner a#b {
    top:81px;
    left:401px;
    background-position:-401px -81px;
}

.tuner a#b:hover {
    background-position:-973px -81px;
}

.tuner a#b.active {
    background-position:-401px -251px;
}

.tuner a#b.active:hover {
    background-position:-973px -251px;
}

.tuner a#e {
    top:104px;
    left:476px;
    background-position:-476px -104px;
}

.tuner a#e:hover {
    background-position:-1048px -104px;
}

.tuner a#e.active {
    background-position:-476px -274px;
}

.tuner a#e.active:hover {
    background-position:-1048px -274px;
}

.exercise-metadata {
    border-top:1px solid #e8e8e8;
    border-bottom:1px solid #e8e8e8;
    padding:5px 0;
}

em {
    font-weight:bold;
    font-style:normal;
}

.tooltip { 
    background-color:#f0f0f0;
    border:3px solid #ddd;
    font-family:arial, sans-serif;
    font-size:14px;
    padding:1em;
}

.presume-practice {
    background-color:#f0f0f0;
    border-bottom:5px solid #ddd;
}

.resume-practice {
    background-color:#f9af00;
    background-image:url(../img/orange-bg.png);
    font-weight:bold;
}
.resume-practice a {
    color:black;
}
.resume-practice .inner {
    width:960px;
    margin:0 auto;
    padding:7px 0px;
}

.fretboard a {
    position:absolute;
    text-decoration:none;
    font-size:12px;
    top:10px;
    left:10px;
    background-image:url(../img/semi-black.png);
    color:white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-family:arial, sans-serif;
    font-size:12px;
    padding:0 5px;
}

.exercise-done-popup {
    background-image:url(../img/exercise-done-popup.png);
    background-repeat:no-repeat;
    text-indent:-9999px;
    width:155px;
    height:85px;
    position:absolute;
    right:-50px;
    top:-100px;
    cursor:pointer;
}

.start-timer-popup {
    background-image:url(../img/start-timer-popup.png);
    background-repeat:no-repeat;
    text-indent:-9999px;
    width:155px;
    height:85px;
    position:absolute;
    left:220px;
    top:-100px;
    cursor:pointer;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.variation-link {
    display:block;
    float:left;
    background-color:#efefef;
    padding:4px 8px;
    color:#222;
    border-radius:3px;
    -moz-border-radius:3px;
    border:1px solid #aaa;
    margin:5px;
    text-decoration:none;
    transition: background 0.3s;
    -webkit-transition: background 0.3s;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}
.variation-link:hover {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #f2f2f2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#f2f2f2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */
}