/* ==========================================================================
   Tone Row Generator custom styles
   ========================================================================== */

/* ======== base styles ========== */

h1 {
    font-size: 1.5em;
    -webkit-margin-after: 0;
}

h2 {
    font-size: 1.2em;
    -webkit-margin-after: 0;
}


/* ======================================================
*          jquery-mobile style revisions
*  ======================================================
**/

body,
input,
select,
textarea,
button,
.ui-btn {
    font-family: sans-serif, Arial, Helvetica;
}

.ui-bar-a,
.ui-page-theme-a .ui-bar-inherit,
html .ui-bar-a .ui-bar-inherit,
html .ui-body-a .ui-bar-inherit,
html body .ui-group-theme-a .ui-bar-inherit {
    background-color:           #369 /*{a-bar-background-color}*/;
    border-color:           #333 /*{a-bar-border}*/;
    color:                  #fff /*{a-bar-color}*/;
    text-shadow: 0 /*{a-bar-shadow-x}*/ 0 /*{a-bar-shadow-y}*/ 0 /*{a-bar-shadow-radius}*/ #369 /*{a-bar-shadow-color}*/;
    font-weight: bold;
}

.ui-footer p {
    margin-left: 1em;
    color: #ddd;
    font-weight: normal;
}

/* ======== load page ========== */
.centeredLoading {
	margin: 2em 20% auto 20%;
}

.centeredLoading p{
	text-align: center;
}

.centeredLoading .startLink {
	text-decoration: underline;
	cursor: pointer;
}

.centeredLoading .startLink:hover {
	color:#48b;
}

/* 
 * This CSS spinner created by @LukeHaas
 */

.loader {
  color: #ffffff;
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease;
  animation: load6 1.7s infinite ease;
}
@-webkit-keyframes load6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@keyframes load6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}



/* ======== row page ========== */
.rowSection {
    padding: 0 5px;
    margin-bottom: 0.5em;
    border: 2px solid #fff;
}

.playRowBtn {
    display: inline;
}

.playRowBtn button{
    margin: 0;
}

.numericRow {
    display: inline;
    margin-bottom: 5px;
}

.toneRow {
    display: block;
}

.trPlaying {
    border: 2px solid #900;
}

/* ========= custom button styles ==========  */
/* Button up */
html head + body .ui-btn.ui-btn-pw,
/* Button visited */
html head + body .ui-btn.ui-btn-pw:visited {
	background-color: 		#ddd; /* #333; */
	border-color:	 		#369; /* #1f1f1f; */
	color: 					#369; /* #fff; */
	text-shadow: 0 1px 0 #fff;
}
/* Button hover */
html head + body .ui-btn.ui-btn-pw:hover {
	background-color: 		#369; /* #373737; */
	border-color:	 		#444; /* #1f1f1f; */
	color: 					#fff; /* #fff; */
	text-shadow: 0 0 0 #0088bb;
}
/* Button down */
html head + body .ui-btn.ui-btn-pw:active {
	background-color: 		#369; /* #404040; */
	border-color:	 		#900; /* #1f1f1f; */
	color: 					#fff; /* #fff; */
	text-shadow: 0 1px 0 #0088bb;
}
/* Active button */
html head + body .ui-btn.ui-btn-pw.ui-btn-active {
	background-color: 		#369; /* #22aadd; */
	border-color:	 		#444; /* #22aadd; */
	color: 					#fff; /* #fff; */
	text-shadow: 0 1px 0 #0088bb;
}

/* ========= media queries  ========== START */

@media (min-width: 10px) and (max-width: 305px) {
    .stave {
        display: inline-block;
        height: 30px;
        width: 15px;
        padding: 0;
        margin: 0;
    }

    .stave_open {
        width: 18px;
        background: url("../images/stave_sprite_255x30.png") 0 0;
    }

    .stave_1 {
        background: url("../images/stave_sprite_255x30.png") -17px 0;
    }

    .stave_2_sharp {
        background: url("../images/stave_sprite_255x30.png") -31px 0;
    }

    .stave_2_flat {
        background: url("../images/stave_sprite_255x30.png") -45px 0;
    }

    .stave_3 {
        background: url("../images/stave_sprite_255x30.png") -57px 0;
    }

    .stave_4_sharp {
        background: url("../images/stave_sprite_255x30.png") -71px 0;
    }

    .stave_4_flat {
        background: url("../images/stave_sprite_255x30.png") -84px 0;
    }

    .stave_5 {
        background: url("../images/stave_sprite_255x30.png") -98px 0;
    }

    .stave_6_sharp {
        background: url("../images/stave_sprite_255x30.png") -111px 0;
    }

    .stave_6_flat {
        background: url("../images/stave_sprite_255x30.png") -124px 0;
    }

    .stave_7 {
        background: url("../images/stave_sprite_255x30.png") -138px 0;
    }

    .stave_8 {
        background: url("../images/stave_sprite_255x30.png") -155px 0;
    }

    .stave_9_sharp {
        background: url("../images/stave_sprite_255x30.png") -167px 0;
    }

    .stave_9_flat {
        background: url("../images/stave_sprite_255x30.png") -181px 0;
    }

    .stave_10 {
        background: url("../images/stave_sprite_255x30.png") -193px 0;
    }

    .stave_11_sharp {
        background: url("../images/stave_sprite_255x30.png") -207px 0;
    }

    .stave_11_flat {
        background: url("../images/stave_sprite_255x30.png") -220px 0;
    }

    .stave_12 {
        background: url("../images/stave_sprite_255x30.png") -233px 0;
    }

    .stave_close {
        width: 6px;
        background: url("../images/stave_sprite_255x30.png") -248px 0;
    }
}

@media (min-width: 306px) and (max-width: 379px) {
    .stave {
        display: inline-block;
        height: 36px;
        width: 17px;
        padding: 0;
        margin: 0;
    }

    .stave_open {
        width: 20px;
        background: url("../images/stave_sprite_295x36.png") 0 0;
    }

    .stave_1 {
        background: url("../images/stave_sprite_295x36.png") -21px 0;
    }

    .stave_2_sharp {
        background: url("../images/stave_sprite_295x36.png") -36px 0;
    }

    .stave_2_flat {
        background: url("../images/stave_sprite_295x36.png") -52px 0;
    }

    .stave_3 {
        background: url("../images/stave_sprite_295x36.png") -66px 0;
    }

    .stave_4_sharp {
        background: url("../images/stave_sprite_295x36.png") -82px 0;
    }

    .stave_4_flat {
        background: url("../images/stave_sprite_295x36.png") -97px 0;
    }

    .stave_5 {
        background: url("../images/stave_sprite_295x36.png") -113px 0;
    }

    .stave_6_sharp {
        background: url("../images/stave_sprite_295x36.png") -128px 0;
    }

    .stave_6_flat {
        background: url("../images/stave_sprite_295x36.png") -144px 0;
    }

    .stave_7 {
        background: url("../images/stave_sprite_295x36.png") -160px 0;
    }

    .stave_8 {
        background: url("../images/stave_sprite_295x36.png") -180px 0;
    }

    .stave_9_sharp {
        background: url("../images/stave_sprite_295x36.png") -193px 0;
    }

    .stave_9_flat {
        background: url("../images/stave_sprite_295x36.png") -209px 0;
    }

    .stave_10 {
        background: url("../images/stave_sprite_295x36.png") -223px 0;
    }

    .stave_11_sharp {
        background: url("../images/stave_sprite_295x36.png") -239px 0;
    }

    .stave_11_flat {
        background: url("../images/stave_sprite_295x36.png") -254px 0;
    }

    .stave_12 {
        background: url("../images/stave_sprite_295x36.png") -270px 0;
    }

    .stave_close {
        width: 7px;
        background: url("../images/stave_sprite_295x36.png") -289px 0;
    }
}

@media (min-width: 380px) and (max-width: 450px) {
    .stave {
        display: inline-block;
        height: 40px;
        width: 20px;
        padding: 0;
        margin: 0;
    }

    .stave_open {
        width: 24px;
        background: url("../images/stave_sprite_352x40.png") 0 0;
    }

    .stave_1 {
        background: url("../images/stave_sprite_352x40.png") -22px 0;
    }

    .stave_2_sharp {
        background: url("../images/stave_sprite_352x40.png") -42px 0;
    }

    .stave_2_flat {
        background: url("../images/stave_sprite_352x40.png") -60px 0;
    }

    .stave_3 {
        background: url("../images/stave_sprite_352x40.png") -77px 0;
    }

    .stave_4_sharp {
        background: url("../images/stave_sprite_352x40.png") -97px 0;
    }

    .stave_4_flat {
        background: url("../images/stave_sprite_352x40.png") -114px 0;
    }

    .stave_5 {
        background: url("../images/stave_sprite_352x40.png") -132px 0;
    }

    .stave_6_sharp {
        background: url("../images/stave_sprite_352x40.png") -150px 0;
    }

    .stave_6_flat {
        background: url("../images/stave_sprite_352x40.png") -171px 0;
    }

    .stave_7 {
        background: url("../images/stave_sprite_352x40.png") -189px 0;
    }

    .stave_8 {
        background: url("../images/stave_sprite_352x40.png") -212px 0;
    }

    .stave_9_sharp {
        background: url("../images/stave_sprite_352x40.png") -231px 0;
    }

    .stave_9_flat {
        background: url("../images/stave_sprite_352x40.png") -250px 0;
    }

    .stave_10 {
        background: url("../images/stave_sprite_352x40.png") -266px 0;
    }

    .stave_11_sharp {
        background: url("../images/stave_sprite_352x40.png") -285px 0;
    }

    .stave_11_flat {
        background: url("../images/stave_sprite_352x40.png") -303px 0;
    }

    .stave_12 {
        background: url("../images/stave_sprite_352x40.png") -320px 0;
    }

    .stave_close {
        width: 9px;
        background: url("../images/stave_sprite_352x40.png") -342px 0;
    }
}

@media (min-width: 451px) and (max-width: 490px) {
    .stave {
        display: inline-block;
        height: 43px;
        width: 23px;
        padding: 0;
        margin: 0;
    }

    .stave_open {
        width: 28px;
        background: url("../images/stave_sprite_402x43.png") 0 0;
    }

    .stave_1 {
        background: url("../images/stave_sprite_402x43.png") -26px 0;
    }

    .stave_2_sharp {
        background: url("../images/stave_sprite_402x43.png") -47px 0;
    }

    .stave_2_flat {
        background: url("../images/stave_sprite_402x43.png") -67px 0;
    }

    .stave_3 {
        background: url("../images/stave_sprite_402x43.png") -88px 0;
    }

    .stave_4_sharp {
        background: url("../images/stave_sprite_402x43.png") -111px 0;
    }

    .stave_4_flat {
        background: url("../images/stave_sprite_402x43.png") -130px 0;
    }

    .stave_5 {
        background: url("../images/stave_sprite_402x43.png") -150px 0;
    }

    .stave_6_sharp {
        background: url("../images/stave_sprite_402x43.png") -172px 0;
    }

    .stave_6_flat {
        background: url("../images/stave_sprite_402x43.png") -195px 0;
    }

    .stave_7 {
        background: url("../images/stave_sprite_402x43.png") -216px 0;
    }

    .stave_8 {
        background: url("../images/stave_sprite_402x43.png") -243px 0;
    }

    .stave_9_sharp {
        background: url("../images/stave_sprite_402x43.png") -264px 0;
    }

    .stave_9_flat {
        background: url("../images/stave_sprite_402x43.png") -285px 0;
    }

    .stave_10 {
        background: url("../images/stave_sprite_402x43.png") -304px 0;
    }

    .stave_11_sharp {
        background: url("../images/stave_sprite_402x43.png") -326px 0;
    }

    .stave_11_flat {
        background: url("../images/stave_sprite_402x43.png") -347px 0;
    }

    .stave_12 {
        background: url("../images/stave_sprite_402x43.png") -367px 0;
    }

    .stave_close {
        width: 10px;
        background: url("../images/stave_sprite_402x43.png") -390px 0;
    }
}

@media (min-width: 491px) and (max-width: 560px) {
    .stave {
        display: inline-block;
        height: 55px;
        width: 28px;
        padding: 0;
        margin: 0;
    }

    .stave_open {
        width: 35px;
        background: url("../images/stave_sprite_488x55.png") 0 0;
    }

    .stave_1 {
        background: url("../images/stave_sprite_488x55.png") -34px 0;
    }

    .stave_2_sharp {
        background: url("../images/stave_sprite_488x55.png") -60px 0;
    }

    .stave_2_flat {
        background: url("../images/stave_sprite_488x55.png") -86px 0;
    }

    .stave_3 {
        background: url("../images/stave_sprite_488x55.png") -110px 0;
    }

    .stave_4_sharp {
        background: url("../images/stave_sprite_488x55.png") -136px 0;
    }

    .stave_4_flat {
        background: url("../images/stave_sprite_488x55.png") -161px 0;
    }

    .stave_5 {
        background: url("../images/stave_sprite_488x55.png") -187px 0;
    }

    .stave_6_sharp {
        background: url("../images/stave_sprite_488x55.png") -212px 0;
    }

    .stave_6_flat {
        background: url("../images/stave_sprite_488x55.png") -238px 0;
    }

    .stave_7 {
        background: url("../images/stave_sprite_488x55.png") -265px 0;
    }

    .stave_8 {
        background: url("../images/stave_sprite_488x55.png") -297px 0;
    }

    .stave_9_sharp {
        background: url("../images/stave_sprite_488x55.png") -320px 0;
    }

    .stave_9_flat {
        background: url("../images/stave_sprite_488x55.png") -346px 0;
    }

    .stave_10 {
        background: url("../images/stave_sprite_488x55.png") -369px 0;
    }

    .stave_11_sharp {
        background: url("../images/stave_sprite_488x55.png") -396px 0;
    }

    .stave_11_flat {
        background: url("../images/stave_sprite_488x55.png") -421px 0;
    }

    .stave_12 {
        background: url("../images/stave_sprite_488x55.png") -446px 0;
    }

    .stave_close {
        width: 12px;
        background: url("../images/stave_sprite_488x55.png") -474px 0;
    }
}

/*
above 521 pixels, row uses two-column layout
 */

@media (min-width: 561px) and (max-width: 600px) {
    .stave {
        display: inline-block;
        height: 30px;
        width: 15px;
        padding: 0;
        margin: 0;
    }

    .stave_open {
        width: 18px;
        background: url("../images/stave_sprite_255x30.png") 0 0;
    }

    .stave_1 {
        background: url("../images/stave_sprite_255x30.png") -17px 0;
    }

    .stave_2_sharp {
        background: url("../images/stave_sprite_255x30.png") -31px 0;
    }

    .stave_2_flat {
        background: url("../images/stave_sprite_255x30.png") -45px 0;
    }

    .stave_3 {
        background: url("../images/stave_sprite_255x30.png") -57px 0;
    }

    .stave_4_sharp {
        background: url("../images/stave_sprite_255x30.png") -71px 0;
    }

    .stave_4_flat {
        background: url("../images/stave_sprite_255x30.png") -84px 0;
    }

    .stave_5 {
        background: url("../images/stave_sprite_255x30.png") -98px 0;
    }

    .stave_6_sharp {
        background: url("../images/stave_sprite_255x30.png") -111px 0;
    }

    .stave_6_flat {
        background: url("../images/stave_sprite_255x30.png") -124px 0;
    }

    .stave_7 {
        background: url("../images/stave_sprite_255x30.png") -138px 0;
    }

    .stave_8 {
        background: url("../images/stave_sprite_255x30.png") -155px 0;
    }

    .stave_9_sharp {
        background: url("../images/stave_sprite_255x30.png") -167px 0;
    }

    .stave_9_flat {
        background: url("../images/stave_sprite_255x30.png") -181px 0;
    }

    .stave_10 {
        background: url("../images/stave_sprite_255x30.png") -193px 0;
    }

    .stave_11_sharp {
        background: url("../images/stave_sprite_255x30.png") -207px 0;
    }

    .stave_11_flat {
        background: url("../images/stave_sprite_255x30.png") -220px 0;
    }

    .stave_12 {
        background: url("../images/stave_sprite_255x30.png") -233px 0;
    }

    .stave_close {
        width: 6px;
        background: url("../images/stave_sprite_255x30.png") -248px 0;
    }
}

@media (min-width: 601px) and (max-width: 670px) {
    .stave {
        display: inline-block;
        height: 36px;
        width: 17px;
        padding: 0;
        margin: 0;
    }

    .stave_open {
        width: 20px;
        background: url("../images/stave_sprite_295x36.png") 0 0;
    }

    .stave_1 {
        background: url("../images/stave_sprite_295x36.png") -21px 0;
    }

    .stave_2_sharp {
        background: url("../images/stave_sprite_295x36.png") -36px 0;
    }

    .stave_2_flat {
        background: url("../images/stave_sprite_295x36.png") -52px 0;
    }

    .stave_3 {
        background: url("../images/stave_sprite_295x36.png") -66px 0;
    }

    .stave_4_sharp {
        background: url("../images/stave_sprite_295x36.png") -82px 0;
    }

    .stave_4_flat {
        background: url("../images/stave_sprite_295x36.png") -97px 0;
    }

    .stave_5 {
        background: url("../images/stave_sprite_295x36.png") -113px 0;
    }

    .stave_6_sharp {
        background: url("../images/stave_sprite_295x36.png") -128px 0;
    }

    .stave_6_flat {
        background: url("../images/stave_sprite_295x36.png") -144px 0;
    }

    .stave_7 {
        background: url("../images/stave_sprite_295x36.png") -160px 0;
    }

    .stave_8 {
        background: url("../images/stave_sprite_295x36.png") -180px 0;
    }

    .stave_9_sharp {
        background: url("../images/stave_sprite_295x36.png") -193px 0;
    }

    .stave_9_flat {
        background: url("../images/stave_sprite_295x36.png") -209px 0;
    }

    .stave_10 {
        background: url("../images/stave_sprite_295x36.png") -223px 0;
    }

    .stave_11_sharp {
        background: url("../images/stave_sprite_295x36.png") -239px 0;
    }

    .stave_11_flat {
        background: url("../images/stave_sprite_295x36.png") -254px 0;
    }

    .stave_12 {
        background: url("../images/stave_sprite_295x36.png") -270px 0;
    }

    .stave_close {
        width: 7px;
        background: url("../images/stave_sprite_295x36.png") -289px 0;
    }
}

@media (min-width: 671px) and (max-width: 750px) {
    .stave {
        display: inline-block;
        height: 40px;
        width: 20px;
        padding: 0;
        margin: 0;
    }

    .stave_open {
        width: 24px;
        background: url("../images/stave_sprite_352x40.png") 0 0;
    }

    .stave_1 {
        background: url("../images/stave_sprite_352x40.png") -22px 0;
    }

    .stave_2_sharp {
        background: url("../images/stave_sprite_352x40.png") -42px 0;
    }

    .stave_2_flat {
        background: url("../images/stave_sprite_352x40.png") -60px 0;
    }

    .stave_3 {
        background: url("../images/stave_sprite_352x40.png") -77px 0;
    }

    .stave_4_sharp {
        background: url("../images/stave_sprite_352x40.png") -97px 0;
    }

    .stave_4_flat {
        background: url("../images/stave_sprite_352x40.png") -114px 0;
    }

    .stave_5 {
        background: url("../images/stave_sprite_352x40.png") -132px 0;
    }

    .stave_6_sharp {
        background: url("../images/stave_sprite_352x40.png") -150px 0;
    }

    .stave_6_flat {
        background: url("../images/stave_sprite_352x40.png") -171px 0;
    }

    .stave_7 {
        background: url("../images/stave_sprite_352x40.png") -189px 0;
    }

    .stave_8 {
        background: url("../images/stave_sprite_352x40.png") -212px 0;
    }

    .stave_9_sharp {
        background: url("../images/stave_sprite_352x40.png") -231px 0;
    }

    .stave_9_flat {
        background: url("../images/stave_sprite_352x40.png") -250px 0;
    }

    .stave_10 {
        background: url("../images/stave_sprite_352x40.png") -266px 0;
    }

    .stave_11_sharp {
        background: url("../images/stave_sprite_352x40.png") -285px 0;
    }

    .stave_11_flat {
        background: url("../images/stave_sprite_352x40.png") -303px 0;
    }

    .stave_12 {
        background: url("../images/stave_sprite_352x40.png") -320px 0;
    }

    .stave_close {
        width: 9px;
        background: url("../images/stave_sprite_352x40.png") -342px 0;
    }
}

@media (min-width: 751px) and (max-width: 885px) {
    .stave {
        display: inline-block;
        height: 43px;
        width: 23px;
        padding: 0;
        margin: 0;
    }

    .stave_open {
        width: 28px;
        background: url("../images/stave_sprite_402x43.png") 0 0;
    }

    .stave_1 {
        background: url("../images/stave_sprite_402x43.png") -26px 0;
    }

    .stave_2_sharp {
        background: url("../images/stave_sprite_402x43.png") -47px 0;
    }

    .stave_2_flat {
        background: url("../images/stave_sprite_402x43.png") -67px 0;
    }

    .stave_3 {
        background: url("../images/stave_sprite_402x43.png") -88px 0;
    }

    .stave_4_sharp {
        background: url("../images/stave_sprite_402x43.png") -111px 0;
    }

    .stave_4_flat {
        background: url("../images/stave_sprite_402x43.png") -130px 0;
    }

    .stave_5 {
        background: url("../images/stave_sprite_402x43.png") -150px 0;
    }

    .stave_6_sharp {
        background: url("../images/stave_sprite_402x43.png") -172px 0;
    }

    .stave_6_flat {
        background: url("../images/stave_sprite_402x43.png") -195px 0;
    }

    .stave_7 {
        background: url("../images/stave_sprite_402x43.png") -216px 0;
    }

    .stave_8 {
        background: url("../images/stave_sprite_402x43.png") -243px 0;
    }

    .stave_9_sharp {
        background: url("../images/stave_sprite_402x43.png") -264px 0;
    }

    .stave_9_flat {
        background: url("../images/stave_sprite_402x43.png") -285px 0;
    }

    .stave_10 {
        background: url("../images/stave_sprite_402x43.png") -304px 0;
    }

    .stave_11_sharp {
        background: url("../images/stave_sprite_402x43.png") -326px 0;
    }

    .stave_11_flat {
        background: url("../images/stave_sprite_402x43.png") -347px 0;
    }

    .stave_12 {
        background: url("../images/stave_sprite_402x43.png") -367px 0;
    }

    .stave_close {
        width: 10px;
        background: url("../images/stave_sprite_402x43.png") -390px 0;
    }
}

@media (min-width: 886px) {
    .stave {
        display: inline-block;
        height: 55px;
        width: 28px;
        padding: 0;
        margin: 0;
    }

    .stave_open {
        width: 35px;
        background: url("../images/stave_sprite_488x55.png") 0 0;
    }

    .stave_1 {
        background: url("../images/stave_sprite_488x55.png") -34px 0;
    }

    .stave_2_sharp {
        background: url("../images/stave_sprite_488x55.png") -60px 0;
    }

    .stave_2_flat {
        background: url("../images/stave_sprite_488x55.png") -86px 0;
    }

    .stave_3 {
        background: url("../images/stave_sprite_488x55.png") -110px 0;
    }

    .stave_4_sharp {
        background: url("../images/stave_sprite_488x55.png") -136px 0;
    }

    .stave_4_flat {
        background: url("../images/stave_sprite_488x55.png") -161px 0;
    }

    .stave_5 {
        background: url("../images/stave_sprite_488x55.png") -187px 0;
    }

    .stave_6_sharp {
        background: url("../images/stave_sprite_488x55.png") -212px 0;
    }

    .stave_6_flat {
        background: url("../images/stave_sprite_488x55.png") -238px 0;
    }

    .stave_7 {
        background: url("../images/stave_sprite_488x55.png") -265px 0;
    }

    .stave_8 {
        background: url("../images/stave_sprite_488x55.png") -297px 0;
    }

    .stave_9_sharp {
        background: url("../images/stave_sprite_488x55.png") -320px 0;
    }

    .stave_9_flat {
        background: url("../images/stave_sprite_488x55.png") -346px 0;
    }

    .stave_10 {
        background: url("../images/stave_sprite_488x55.png") -369px 0;
    }

    .stave_11_sharp {
        background: url("../images/stave_sprite_488x55.png") -396px 0;
    }

    .stave_11_flat {
        background: url("../images/stave_sprite_488x55.png") -421px 0;
    }

    .stave_12 {
        background: url("../images/stave_sprite_488x55.png") -446px 0;
    }

    .stave_close {
        width: 12px;
        background: url("../images/stave_sprite_488x55.png") -474px 0;
    }
}

/* ========= media queries  ========== END */


/* ======== config page ========== */

#tempoSelect,
#volSelect,
#accSelect {
    width: 90%;
    padding: 0 20px 10px 20px;
    margin-bottom: 1em;
    border: 1px solid #666;
    background-color: #aaa;
}

#tempoSelect h2,
#volSelect h2,
#accSelect h2 {
    margin-bottom: -15px;
    padding: 0;
}