html,
body {
   margin:0;
   padding:0;
   background-color:#FFFFFF;
   text-align: center;  
}

.centered{
	width:auto;
	margin-left:auto;
	margin-right:auto;
	border:1px solid pink;
}


.btnx {
border:1px solid darkblue;
background-color:#8888FF;
border-radius:14px;
width:auto;
height:auto;
cursor:pointer;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:1px;

 letter-spacing: 1px;
 display: inline-block;
 padding: 0.1em ;
 background-color: rgb(0,62,255);
 color: rgb(238,238,238);
 text-decoration: none;
 font-weight: normal;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 background-image: -moz-linear-gradient(top, rgba(255,255,255,0.25), rgba(255,255,255,0.05)); /* FF3.6 */
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0.25)),color-stop(1, rgba(255,255,255,0.05))); /* Saf4+, Chrome */
 text-shadow: rgb(68,68,68) 0 -1px 1px;
 box-shadow: 1px 1px 3px rgba(68,68,68,0.3);
 -webkit-box-shadow: 1px 1px 3px rgba(136,136,136,0.3);
 -moz-box-shadow: 1px 1px 3px rgba(68,68,68,0.3);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 }
 
.btnx:hover {
 background-color: rgb(40,102,255);
 text-shadow: rgb(0,0,238) 0 0 -4px;
 -webkit-transition: all 0s linear;
 }
 
.btnx:active {
 background-image: -moz-linear-gradient(top, rgba(255,255,255,0.05), rgba(255,255,255,0.25)); /* FF3.6 */
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0.05)),color-stop(1, rgba(255,255,255,0.25))); /* Saf4+, Chrome */
 border-bottom: 1px solid rgba(0,0,0,0.1);
 }
 
 
.btn-blue {
 border:1px solid darkblue;
 background-color: rgb(0,62,255);
 color: rgb(238,238,238);
 text-decoration: none;
 font-weight: bold;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 background-image: -moz-linear-gradient(top, rgba(255,255,255,0.25), rgba(255,255,255,0.05)); /* FF3.6 */
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0.25)),color-stop(1, rgba(255,255,255,0.05))); /* Saf4+, Chrome */
 text-shadow: rgb(68,68,68) 0 -1px 1px;
 box-shadow: 1px 1px 3px rgba(68,68,68,0.3);
 -webkit-box-shadow: 1px 1px 3px rgba(136,136,136,0.3);
 -moz-box-shadow: 1px 1px 3px rgba(68,68,68,0.3);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 }
 
.btn-blue:hover {
 background-color: rgb(40,104,255);
 color: rgb(238,238,238);
 text-shadow: rgb(0,0,238) 0 0 -4px;
 -webkit-transition: all 0s linear;
 }
 
.btn-blue:active {
 color: rgb(238,238,238);
 background-image: -moz-linear-gradient(top, rgba(255,255,255,0.05), rgba(255,255,255,0.25)); /* FF3.6 */
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0.05)),color-stop(1, rgba(255,255,255,0.25))); /* Saf4+, Chrome */
 border-bottom: 1px solid rgba(0,0,0,0.1);
 }

.btn-lt-blue {
 border:1px solid darkblue;
 background-color: rgb(183,247,250);
 color: rgb(0,0,238);
 text-decoration: none;
 font-weight: bold;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 background-image: -moz-linear-gradient(top, rgba(255,255,255,0.25), rgba(255,255,255,0.05)); /* FF3.6 */
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0.25)),color-stop(1, rgba(255,255,255,0.05))); /* Saf4+, Chrome */
  box-shadow: 1px 1px 3px rgba(68,68,68,0.3);
 -webkit-box-shadow: 1px 1px 3px rgba(136,136,136,0.3);
 -moz-box-shadow: 1px 1px 3px rgba(68,68,68,0.3);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 }
 
.btn-lt-blue:hover {
 background-color: rgb(187,250,255);
 color: rgb(0,0,238);
 text-shadow: rgb(0,0,238) 0 0 -4px;
 -webkit-transition: all 0s linear;
 }
 
.btn-lt-blue:active {
 color: rgb(238,238,238);
 background-image: -moz-linear-gradient(top, rgba(255,255,255,0.05), rgba(255,255,255,0.25)); /* FF3.6 */
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0.05)),color-stop(1, rgba(255,255,255,0.25))); /* Saf4+, Chrome */
 border-bottom: 1px solid rgba(0,0,0,0.1);
 }

.tablerow{
border:1px solid gray;
margin:2px;

}

.title1 {
border:0px solid red;
background-color:#FFFFFF;
}

.copyright{
float:left;
padding-left:5px;
border-radius:3px;
border:0px solid #868686;
padding-right:10px;
padding-top:3px;
padding-bottom:3px;
font-size:0.90vm;
background-color:#FAFEFA;
}

.clef {
float:left;
width:auto;

}


.sharp {
position:absolute;
width:auto;

}

.tie_up {
position:absolute;	
}


.tie_down {
position:absolute;
}


.R1 {
position:absolute;
width:auto;
background:url('../symbols/whole_rest.png');
background-size:100% 100%;
}
.R2 {
position:absolute;
width:auto;
background:url('../symbols/halfrest.png');
background-size:100% 100%;
}
.R4 {
position:absolute;
width:auto;
background:url('../symbols/quarterrest.png');
background-size:100% 100%;
}
.R8 {
position:absolute;
width:auto;
background:url('../symbols/8threst.png');
background-size:100% 100%;
}
.R16 {
position:absolute;
width:auto;
background:url('../symbols/16threst.png');
background-size:100% 100%;
}
.R32 {
position:absolute;
width:auto;
background:url('../symbols/32ndrest.png');
background-size:100% 100%;
}

.flat {
position:absolute;
width:auto;

}

.natural {
position:absolute;
width:auto;

}
.meas{
position:absolute;
border:1px solid black;
width:0px;
}
.thick{
position:absolute;
border:3px solid black;
width:3px;	
}

.ending1{
position:absolute;
text-align:left;
padding-left:5px;
padding-top:2px;
font-size:16px;
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:0px solid black;
}
.ending2{
position:absolute;
text-align:left;
padding-left:5px;
padding-top:2px;
font-size:16px;
border-top:1px solid black;
border-left:1px solid black;
border-right:0px solid black;
border-bottom:0px solid black;
}

.flag{
position:absolute;
border:0px solid black;
width:auto;
background:url('../symbols/flag.png');
background-size:100% 100%;

}

.flagdown{
position:absolute;
border:0px solid black;
width:auto;
background:url('../symbols/flagdown.png');
background-size:100% 100%;

}

.stem{
position:absolute;
border:2px solid black;

}

.barup{
position:absolute;
border:0px dashed black;
background:url("slopeup.png");
background-size: 100% 100%;
}
.bardown{
position:absolute;
border:0px dashed black;
background:url("slopedown.png");
background-size: 100% 100%;
}

.bar{
position:absolute;
border:2px solid black;
}
.hilite{
position:absolute;
}
.hirest{
position:absolute;
}

.lyric{
position:absolute;
}
.typeq{
position:absolute;
border:0px solid black;
background-image:url("../symbols/filledoval.jpg");
}

.typeq:hover {
border: solid 4px #355681;
width:46px;
height:36px;
}

.typeh{
position:absolute;
border:0px solid black;
width:50px;
height:40px;
background-image:url("../symbols/openoval.png");
}

.typeh:hover {
border: solid 4px #355681;
width:46px;
height:36px;
}

.typew{
position:absolute;
border:0px solid black;
width:50px;
height:40px;
background-image:url("../symbols/openoval.png");
}

.typew:hover {
border: solid 4px #355681;
width:46px;
height:36px;
}


.type8{
position:absolute;
border:0px solid black;
width:50px;
height:40px;
background-image:url("../symbols/filledoval.jpg");
}

.type8:hover {
border: solid 4px #355681;
width:46px;
height:36px;
}

.type16{
position:absolute;
border:0px solid black;
width:50px;
height:40px;
background-image:url("../symbols/filledoval.jpg");
}

.type16:hover {
border: solid 4px #355681;
width:46px;
height:36px;
}

.type32{
position:absolute;
border:0px solid black;
width:50px;
height:40px;
background-image:url("../symbols/filledoval.jpg");
}

.type32:hover {
border: solid 4px #355681;
width:46px;
height:36px;
}

.R1:hover {
border: solid 4px #355681;
width:46px;
height:36px;
}


.R2:hover {
border: solid 4px #355681;
width:46px;
height:36px;
}


.R4:hover {
border: solid 4px #355681;
width:46px;
height:36px;
}

.R8:hover {
border: solid 4px #355681;
width:46px;
height:36px;
}

.R16:hover {
border: solid 4px #355681;
width:46px;
height:36px;
}

.R32:hover {
border: solid 4px #355681;
width:46px;
height:36px;
}

.timesig {
border:0px solid green;
position:absolute;
width:auto;
height:auto;

}

.keysig {
border:0px solid green;
position:absolute;
width:auto;
height:auto;

}

.headertitle {
	font-family: "Georgia", serif;
	font-style: italic;
	font-size:28px;
	text-align: center;
}
   input.submit {
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
        font-size: 10pt;
        width: 248px !important;
        width: 242px;
        border: 1px solid #999;
        margin: 1px 0px 0px 1px;
        position: relative;
        top: 0px;
        left: 0;
    }
#mainwrapper {
width:100%;
height:auto;
border:3px dashed gray;
	
}

#topbar{

border:2px solid gold;
background:#FFFFFF;
}


#topbar2 {
	background:#FFFFFF;
}


#menubar {

	padding:2px;
	border:1px solid #a0a0a0;
	background:#d0d0d0;
	border-radius:3px;
	margin-left:3px;


}

#actionbar {

	padding:2px;
	border:2px solid #E0E040;
	background:#F0F0A0;
	border-radius:3px;
	margin:1px;
	height:auto;
	width:auto;
float:left;	

}

#toolbar , #toolbar_adv {

	padding:1px;
	padding-top:0px;
	border:2px solid #F0E080;
	border-radius:3px;
	margin:1px;
	height:2.9em;
	width:auto;
float:left;
background:#FFFF66;
}

#showScale {

	position:relative;
	padding:2px;
	border:2px solid purple;
	background:#F0F0F0;
	border-radius:3px;
	margin:1px;
	height:auto;
	width:auto;
	float:left;

}


.toolbutton , .toolbutton_adv {
width:2em;
height:2.8em;
border:2px solid green;
float:left;
text-align:center;

}

.accidentalbutton {
width:2em;
height:2.8em;
border:2px solid green;
float:left;
text-align:center;

}

.settingbutton  {
width:2em;
height:2.8em;
border:2px solid green;
float:left;
text-align:center;

}

.toolselected {
background-color:#FFCC00;
}
.xtoolbutton:hover , .toolbutton_adv:hover , .xaccidentalbutton:hover{
background-color:#FFCC00;
}

.menutab {
float:left;
padding-left:1px;
padding-right:1px;
}

.btnScale{
border:1px solid purple;
border-radius:4px;
background-color:#f0e0a0;
float:left;
margin-left:4px;
margin-right:4px;
}

.topbaricon{
width:auto;
float:left;
}
.topbarlogo{
width:300px;
}

.topbartitleHolder{
margin-top:1px;margin-left:0px;border:2px solid #FF4040;border-radius:30px;
}


.topbartitle {

font-weight: heavy;
font-style: italic;
margin-left:auto;
margin-right:auto;
padding-left:5px;
padding-right:5px;
padding-top:0px;
border:3px solid #FFFF00;
background-color:#FFFFF0;
border-radius:20px;
width:550px;
}

.bluebar {
position:relative;
margin-left:0;
width:100%;
height:33px;
background-image:url('../images/bluebar1.jpg');
 background-size: 11% 100%;
   background-repeat: repeat;
}


.displayFileName {
float:left;color:#FFFFEF;padding:5px 10px 2px 10px;font-size:1.3em;font-weight:heavy;
}

.acctNoDisplay{
float:left;color:#FFFF8F;
}

#canvasholder{width:100%;}
#topbar2{width:280px;margin:0px;}
.view_wrapper{
		position:relative;border:0px solid red;width:340px;overflow:scroll;
		top:20px;
	}

@media (max-width: 420px) {
  .topbartitle {
    font-size: 5.0vw;
	width:100%;
  }
  .btnx{font-size:20px;}
  .view_wrapper{
		position:relative;border:0px solid red;width:340px;overflow:scroll;
		top:20px;
	}
	#canvasholder{width:300px;}
	
	#topbar2 {
	width:250px;
}
	
	
	th,td{font-size: 6.0vw;}

  
.headertitle {
	font-family: "Georgia", serif;
	font-style: italic;
	font-size:28px;
	text-align: center;
}
  
}
@media (min-width: 768px) and (max-width: 991px) {

	#showScale {
		height:auto;
		width:auto;
		font-size:1.0wm;
		margin-left:30px;
	}
	.view_wrapper{
		position:relative;border:0px solid red;width:100%;
		top:2px;
	}
	
	
	button.menubutton {
		height: 4.4vmax;
		font-size: 2.0vmax;
		width:auto;
	}
	
	#playSound{width:50px;}
	
	#topbar2{width:420px;}

	.toolbutton , .toolbutton_adv{
		height: 3.0em;
		font-size: 0.8em;
		width:40px;
	}
	
	.accidentalbutton{
		height: 3.0em;
		font-size:0.8em;
		width:40px;
	}
	
	.settingbutton{
		height: 3.0em;
		font-size: 0.8em;
		width:40px;
	
	}
	
	.topbaricon{
		height:40px;
	}
	
	.topbarlogo{
		width:auto;
	}

	.topbartitle {
		font-size: 3.0vw;
	}
  
	.btnx{font-size:40px;}
	
	.displayFileName{
		font-size: 1.3em;
	}
	
	.acctNoDisplay  {
		font-size: 1.0em;
		margin-left:670px;
		margin-top:8px;
	}
	
	.topbartitleHolder{
		margin-left:15px;
	}

	a, p, li{font-size:5.4vw;}
	th,td{font-size: 6.0vw;}

  
.headertitle {
	font-family: "Georgia", serif;
	font-style: italic;
	font-size:28px;
	text-align: center;
}
   input.submit {
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
        font-size: 10pt;
        width: 248px !important;
        width: 242px;
        border: 1px solid #999;
        margin: 1px 0px 0px 1px;
        position: relative;
        top: 0px;
        left: 0;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
	
	#showScale {
		height:auto;
		width:auto;
		font-size:1.0em;
	}
	.view_wrapper{
		position:relative;border:0px solid red;
	}
	#playSound{width:50px;}

	
button.menubutton {
		height: 4.0vmax;
		font-size: 1.8vmax;
		width:auto;
	}
	#topbar2{width:420px;}
	.toolbutton , .toolbutton_adv {
		height: 3.5em;
		font-size: 0.8em;
		width:40px;
	}
	
	.accidentalbutton{
		height: 3.4em;
		font-size: 0.8em;
		width:40px;
	}
	
	.settingbutton{
		height: 3.4em;
		font-size: 0.8em;
		width:40px;
	
	}

	.topbaricon{
		width:4.4%;
	}

	.topbarlogo{
		width:100%;
	}

	.topbartitle {
    font-size: 2.4vw;
	width:480px;
  }
  
	.btnx{font-size:6.0vw;}
	p, li{font-size:5.4vw;}
	th,td{font-size: 6.0vw;}
	
	 
	.displayFileName{
		font-size: 1.3em;
	}
	
	.acctNoDisplay  {
		font-size: 1.0em;
		margin-left:400px;
	}
	
	.topbartitleHolder{
		margin-left:30px;
	}

}

@media (min-width: 1200px) and (max-width: 1401px){
  .topbartitle{
    font-size: 30px;
  }
  .btnx{font-size:18px;}
  
	button.menubutton {
		height: 2.0vmax;
		font-size:1.8vm;
		width:auto;
	}
	
	#playSound{width:50px;}
  .view_wrapper{
		position:relative;border:0px solid red;width:100%;
		top:1px;
	}

	
}

@media (min-width: 1402px) {
  .topbartitle{
    font-size: 30px;
  }
  .btnx{font-size:18px;}
  button.menubutton {
		height: 2.4em;
		font-size: 1.0em;
		width:auto;
	}
	
	#playSound{width:60px;}
  .view_wrapper{
		position:relative;border:0px solid red;width:100%;
		top:2px;
	}

	
}

.button-badge {
  display: inline-block;
  min-width: 20px;
  padding: 6px 14px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #FFEE00;
  border-radius: 20px;
  margin-left:2px;
  margin-right:2px;
  cursor:pointer;
}


.button-badge.active,
.button-badge.active:hover,
.button-badge.active:focus {
  z-index: 2;
  color: #fff;
  background-color: rgb(40,102,205);
  border-color: rgb(40,102,205);
}

.buttonxx-select {
  display: inline-block;
  min-width: 20px;
  padding: 6px 14px;
  font-size: 16px;
  line-height: 1;
  color: #333;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #eee;
  border-radius: 2px;
  margin-left:2px;
  margin-right:2px;
  cursor:pointer;
}


.button-select.active,
.button-select.active:hover,
.button-select.active:focus {
  z-index: 2;
  color: #fff;
  background-color: rgb(40,102,205);
  border-color: rgb(40,102,205);
}

#welcome {
font-size: 34px;
font-weight: heavy;
font-style: italic;
margin: 20px;
padding-left: 40px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 20px;
color:#FFEE00;
border:2px solid red;
background-color:#330033;
border-radius:25px;
}

.productlist{
overflow: hidden;
font-size: 14px;
font-weight: heavy;
margin: 20px;
padding-left: 20px;
padding-right: 2px;
padding-top: 8px;
padding-bottom: 10px;
color:#442244;
border:2px solid #AAAAFF;
background-color:#E0F0E0;
border-radius:15px;
}


.wishlist{
overflow: hidden;
font-size: 14px;
font-weight: heavy;
margin: 20px;
padding-left: 20px;
padding-right: 2px;
padding-top: 8px;
padding-bottom: 0px;
color:#442244;
border:2px solid #AAAAFF;
background-color:#E0F0E0;
border-radius:15px;
}

.linkHolder {
margin-top:auto;
margin-bottom:auto;
width:143px;
height:70px;
overflow:hidden;
margin-left:auto;
margin-right:auto;
}

#portfolio {
padding:10px;
}

#webdesigntext{
font:italic bold 22px/30px Georgia, serif;
color:red;
}

.portfolio_square{
margin-top:20px;
margin-bottom:auto;
width:320px;
height:180px;
overflow:hidden;
margin-left:20px;
float:left;
border:1px solid red;
border-radius:4px;
display:inline;
}


.statusBar {
border:0px solid #F0F0F0;
width:90px;
height:auto;
overflow:hidden;
display:none;
position:absolute;
right:1px;
top:4px;
width:25px;
}

.statusPosition{
float:left;
margin:1px;
margin-left:2px;
margin-top:3px;
padding:1px 2px 1px 2px;
border:1px solid #3A3A6A;
border-radius:3px;
font-size: 12px;
opacity:1.0;
background-color:#F8FaF0;
display:none;
}

.btnEditCell {
float:left;
padding:0px 0px 0px 0px;
font-weight:heavy;

}

.btnDelCellHolder {
position:absolute;
top:0px;
right:1px;
padding:1px 1px 1px 1px;
width:24px;
height:24px;
border: 0px solid gray;

}
.btnDelCell {
font:9px bold Bookman, serif;
font-weight: heavy;
width:15px;
height:15px;
display:none;
opacity:0.9;
}

.c20{
float:left;
width:20%;
}
.c15 {
float:left;
width:15%;
}
.c14 {
float:left;
width:14%;
}

.c10 {
float:left;
width:10%;
}

.table-col-header{
background-color:#fefeff;
color:rgb(58,58,107);
padding:0.5%;
font-weight:heavy;
}

.table-col-body{
background-color:#fefeff;
color:rgb(58,58,107);
padding:0.5%;
font-weight:normal;
font-size:15px;

}

.table-header{
background-color:#fefeff;
border:1px solid #888888;
margin-left:0px;
margin-right:0px;
}

.table-body{
background-color:#88EE88;
border:1px solid #ffffff;
text-align:center;
}

.row-table{
background-color:#fefeff;
border:1px solid #888888;
margin-left:0px;
margin-right:0px;
width:100%;
padding:0px;
}

.col-type{
background-color:#fefe40;
}

.col-name{
background-color:#40fefe;
}

.col-stave{
background-color:#40a0ff;
}

ul.lfooter {
align: center;
list-style-type: none;
}
ul.lfooter li {
list-style-type: none;
padding: .5em .5em 0em .5em;
}


ul.column {
list-style-type: none;
padding: 0.2em 1em 0em 1em;
}

ul.column li {
list-style-type: none;
padding: .0em .5em 0em .5em;
display: inline;
}

.margin5{margin-left:5px;margin-right:5px;}


#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
.drag { width: 148px; height: 98px; opacity:1.0;}
.drop { width: 150px; height: 100px; opacity:1.0;background-color:#E070F0;}
#marquee {margin-left:0px; color:#CCDDFF; font-size: 1.4em; width:1200px;height:300px;overflow:auto;overflow-y:hidden;margin:0 auto; white-space:nowrap;}