/* abcjs-midi.css */


.abcjs-inline-midi{
height:26px;
padding:0 5px;
border-radius:3px;
color:#f4f4f4;
background-color:#424242;
display:flex;
align-items:center;
box-sizing:border-box;
}

.abcjs-inline-midi .abcjs-btn{
width:28px;
height:26px;
display:inline-block;
margin-right:2px;
float:left;
padding:0;

background:none;
font:normal normal normal 14px/1 FontAwesome;
font-size:14px;
text-rendering:auto;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
color:#f4f4f4;
border:1px solid transparent;
box-sizing:border-box;
}

.fa5 .abcjs-inline-midi .abcjs-btn{
font-family:"Font Awesome 5 Free";
font-weight:900;
}
.abcjs-inline-midi .abcjs-btn:hover{
color:#cccccc;
}

.abcjs-inline-midi .abcjs-midi-selection:before{
content:"\f07e"; 
}

.abcjs-inline-midi .abcjs-midi-selection.abcjs-pushed{
border:1px solid #cccccc;
background-color:#666666;
box-sizing:border-box;
}

.abcjs-inline-midi .abcjs-midi-loop:before{
content:"\f021"; 
}

.abcjs-inline-midi .abcjs-midi-loop.abcjs-pushed{
border:1px solid #cccccc;
background-color:#666666;
box-sizing:border-box;
}

.abcjs-inline-midi .abcjs-midi-reset:before{
content:"\f048"; 
}

.abcjs-inline-midi .abcjs-midi-reset.abcjs-pushed{
border:1px solid #cccccc;
background-color:#666666;
box-sizing:border-box;
}

.abcjs-inline-midi .abcjs-midi-start:before{
content:"\f04b"; 
}

.abcjs-inline-midi .abcjs-midi-start.abcjs-pushed:before{
content:"\f04c"; 
}

.abcjs-inline-midi .abcjs-midi-start.abcjs-pushed.abcjs-loading{
outline:none;
animation:a 1s infinite steps(8);
}

.abcjs-inline-midi .abcjs-midi-start.abcjs-pushed.abcjs-loading:before{
content:"\f110"; 
}

.abcjs-inline-midi .abcjs-midi-progress-background{
background-color:#424242;
height:10px;
border-radius:5px;
border:2px solid #cccccc;
margin:0 8px 0 15px;
position:relative;
flex:1;
padding:0;
box-sizing:border-box;
}

.abcjs-inline-midi .abcjs-midi-progress-indicator{
width:20px;
margin-left:-10px; 
height:14px;
background-color:#f4f4f4;
position:absolute;
display:inline-block;
border-radius:6px;
top:-4px;
left:0;
box-sizing:border-box;
}

.abcjs-inline-midi .abcjs-midi-clock,.abcjs-inline-midi .abcjs-midi-post{
margin-left:4px;
margin-top:0;
display:inline-block;
font-family:sans-serif;
font-size:16px;
box-sizing:border-box;
}

.abcjs-inline-midi .abcjs-midi-pre{
display:inline-block;
box-sizing:border-box;
}

.abcjs-inline-midi .abcjs-tempo-wrapper{
float:right;
font-size:10px;
display:inline-block;
color:#f4f4f4;
box-sizing:border-box;
}

.abcjs-inline-midi .abcjs-midi-tempo{
border-radius:2px;
border:none;
margin:1px 2px 0 4px;
width:32px;
padding-left:2px;
box-sizing:border-box;
}


.abcjs-large .abcjs-inline-midi{
height:52px;
}
.abcjs-large .abcjs-btn{
width:56px;
height:52px;
font-size:28px;
}
.abcjs-large .abcjs-midi-progress-background{
height:20px;
border:4px solid #cccccc;
}
.abcjs-large .abcjs-midi-progress-indicator{
height:28px;
top:-8px;
width:40px;
}
.abcjs-large .abcjs-midi-clock{
font-size:32px;
margin-right:10px;
margin-left:10px;
}

/* page.css */



@media print{
h1,p,textarea,#selection,#midi,#midi-download,hr{
display:none;
}
.paper{
position:absolute;
}
}

.landing{
min-height:100vh;
position:relative;

width:100%;
height:auto;
padding-top:8rem;
padding-bottom:8rem;

background-color:mintcream;
}


.content-section{
padding-top:7.5rem;
padding-bottom:7.5rem;
}

.content-section-heading h2{
font-size:3rem;
}

.content-section-heading h3{
font-size:1rem;
text-transform:uppercase;
}

.content-section:nth-of-type(1){
background-color:#ffdfa1;
}
.content-section:nth-of-type(2){
background-color:#fefec3;
}

.callout{
padding-top:6rem;
padding-bottom:6rem;
background-color:#fee1fd;
}

.ribbon{
background-color:#00aa00;
overflow:hidden;
white-space:nowrap;
position:absolute;
right:-50px;
top:40px;
transform:rotate(45deg);
box-shadow:0 0 10px #888;
}
.ribbon a{
border:1px solid #aaffaa;
color:#fff;
display:block;
font:bold 81.25% 'Helvetica Neue',Helvetica,Arial,sans-serif;
margin:1px 0;
padding:10px 50px;
text-align:center;
text-decoration:none;
text-shadow:0 0 5px #444;
}

#wordCloud{
height:15em;
width:100%;
}
/* navigation.css */

.scroll-to-top{
position:fixed;
right:15px;
bottom:15px;
display:none;
width:50px;
height:50px;
text-align:center;
color:white;
background:rgba(52,58,64,0.5);
line-height:45px;
z-index:3;
}

.scroll-to-top:focus,.scroll-to-top:hover{
color:white;
}

.scroll-to-top:hover{
background:#343a40;
}

.scroll-to-top i{
font-weight:800;
}

.language-button{
position:absolute;
top:1em;
left:1em;
}


#sidebar-wrapper{
position:fixed;
z-index:2;
right:0;
width:250px;
height:100%;
-webkit-transition:all 0.4s ease 0s;
transition:all 0.4s ease 0s;
-webkit-transform:translateX(250px);
transform:translateX(250px);
background:#1D809F;
background:#ffdd33;
border-left:1px solid rgba(255,255,255,0.1);
}

.sidebar-nav{
position:absolute;
top:0;
width:250px;
margin:0;
padding:0;
list-style:none;
}

.sidebar-nav li.sidebar-nav-item a{
display:block;
text-decoration:none;
color:#fff;
padding:15px;
}

.sidebar-nav li a:hover{
text-decoration:none;
color:#fff;
background:rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus{
text-decoration:none;
}

.sidebar-nav > .sidebar-brand{
font-size:1.2rem;
background:rgba(52,58,64,0.1);
height:80px;
line-height:50px;
padding-top:15px;
padding-bottom:15px;
padding-left:15px;
}

.sidebar-nav > .sidebar-brand a{
color:#fff;
}

.sidebar-nav > .sidebar-brand a:hover{
color:#fff;
background:none;
}

#sidebar-wrapper.active{
right:250px;
width:250px;
-webkit-transition:all 0.4s ease 0s;
transition:all 0.4s ease 0s;
}

.menu-toggle{
position:fixed;
right:15px;
top:15px;
width:50px;
height:50px;
text-align:center;
color:#fff;
background:rgba(52,58,64,0.5);
line-height:50px;
z-index:999;
}

.menu-toggle:focus,.menu-toggle:hover{
color:#fff;
}

.menu-toggle:hover{
background:#343a40;
}

/* abcjs-midi.css */


.abcjs-inline-midi{
height:26px;
padding:0 5px;
border-radius:3px;
color:#f4f4f4;
background-color:#424242;
display:flex;
align-items:center;
box-sizing:border-box;
}

.abcjs-inline-midi .abcjs-btn{
width:28px;
height:26px;
display:inline-block;
margin-right:2px;
float:left;
padding:0;

background:none;
font:normal normal normal 14px/1 FontAwesome;
font-size:14px;
text-rendering:auto;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
color:#f4f4f4;
border:1px solid transparent;
box-sizing:border-box;
}

.fa5 .abcjs-inline-midi .abcjs-btn{
font-family:"Font Awesome 5 Free";
font-weight:900;
}
.abcjs-inline-midi .abcjs-btn:hover{
color:#cccccc;
}

.abcjs-inline-midi .abcjs-midi-selection:before{
content:"\f07e"; 
}

.abcjs-inline-midi .abcjs-midi-selection.abcjs-pushed{
border:1px solid #cccccc;
background-color:#666666;
box-sizing:border-box;
}

.abcjs-inline-midi .abcjs-midi-loop:before{
content:"\f021"; 
}

.abcjs-inline-midi .abcjs-midi-loop.abcjs-pushed{
border:1px solid #cccccc;
background-color:#666666;
box-sizing:border-box;
}

.abcjs-inline-midi .abcjs-midi-reset:before{
content:"\f048"; 
}

.abcjs-inline-midi .abcjs-midi-reset.abcjs-pushed{
border:1px solid #cccccc;
background-color:#666666;
box-sizing:border-box;
}

.abcjs-inline-midi .abcjs-midi-start:before{
content:"\f04b"; 
}

.abcjs-inline-midi .abcjs-midi-start.abcjs-pushed:before{
content:"\f04c"; 
}

.abcjs-inline-midi .abcjs-midi-start.abcjs-pushed.abcjs-loading{
outline:none;
animation:a 1s infinite steps(8);
}

.abcjs-inline-midi .abcjs-midi-start.abcjs-pushed.abcjs-loading:before{
content:"\f110"; 
}

.abcjs-inline-midi .abcjs-midi-progress-background{
background-color:#424242;
height:10px;
border-radius:5px;
border:2px solid #cccccc;
margin:0 8px 0 15px;
position:relative;
flex:1;
padding:0;
box-sizing:border-box;
}

.abcjs-inline-midi .abcjs-midi-progress-indicator{
width:20px;
margin-left:-10px; 
height:14px;
background-color:#f4f4f4;
position:absolute;
display:inline-block;
border-radius:6px;
top:-4px;
left:0;
box-sizing:border-box;
}

.abcjs-inline-midi .abcjs-midi-clock,.abcjs-inline-midi .abcjs-midi-post{
margin-left:4px;
margin-top:0;
display:inline-block;
font-family:sans-serif;
font-size:16px;
box-sizing:border-box;
}

.abcjs-inline-midi .abcjs-midi-pre{
display:inline-block;
box-sizing:border-box;
}

.abcjs-inline-midi .abcjs-tempo-wrapper{
float:right;
font-size:10px;
display:inline-block;
color:#f4f4f4;
box-sizing:border-box;
}

.abcjs-inline-midi .abcjs-midi-tempo{
border-radius:2px;
border:none;
margin:1px 2px 0 4px;
width:32px;
padding-left:2px;
box-sizing:border-box;
}


.abcjs-large .abcjs-inline-midi{
height:52px;
}
.abcjs-large .abcjs-btn{
width:56px;
height:52px;
font-size:28px;
}
.abcjs-large .abcjs-midi-progress-background{
height:20px;
border:4px solid #cccccc;
}
.abcjs-large .abcjs-midi-progress-indicator{
height:28px;
top:-8px;
width:40px;
}
.abcjs-large .abcjs-midi-clock{
font-size:32px;
margin-right:10px;
margin-left:10px;
}