body { margin-top: 52px; }

.with-footer { padding-top: 30px; margin-bottom: 35px; }

svg:not(:root) { overflow: inherit; }

.navbar-brand { padding: 0px 0px; padding-left: 8px; }

.navbar { border-bottom: solid #464646 2px; border-radius: 0px !important; }

.navbar hr { margin: 0px; color: #464646; background-color: #464646; height: 2px; }

.home-row-flex { display: flex; align-items: center; }

.home-row:not(:first-child) { border-top: solid #464646 2px; padding-top: 25px; margin-top: 25px; }

.news-row { margin-top: 2px; margin-bottom: 2px; }

.news-link { margin-top: 10px; text-align: right; }

.home-panel { background: #eee; }

.top-header { background: #272727; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(#272727, #4d4d4d); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#272727, #4d4d4d); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#272727, #4d4d4d); /* For Firefox 3.6 to 15 */ background: linear-gradient(#272727, #4d4d4d); /* Standard syntax */ }

#page-content-wrapper { width: 100%; }

.support-logo { padding: 10px 30px; }

/* This is a fix for bootstrap 3.1 to override width: auto; */
.form-control { width: 100% !important; }

.form-select-mei { padding-top: 5px; }

hr.panel { margin: 10px 0px; }

hr.home { margin-top: 10px; margin-bottom: 10px; }

.btn-heading { padding: 0px 4px; margin-left: 4px; }

p a { text-decoration: underline; }

.list-group a { background-image: none !important; }

.input-group { width: 100%; }

.sublist-group a, .sublist-group span { padding: 4px 15px; }

.list-group-item-menu { background-color: #efefef; }

.panel-body h3 { margin-top: 0px; margin-bottom: 20px; }

.smufl-vertical-align { display: flex; align-items: center; }

.panel-body h4, .panel-body h5 { border-top: 1px #ddd solid; padding-top: 20px; margin-top: 25px; margin-bottom: 15px; }

.panel-video { border: 2px solid #ddd; padding: 0px !important; }

.panel-option { padding: 4px 8px; }

.panel-supported-mei { padding: 8px 8px; }

code.panel-header { background-color: #464646; color: #f9f2f4; }

.test-xmlfile:not(:first-child) { padding-top: 20px; margin-top: 10px; border-top: 1px solid #ccc; }

.footer { bottom: 0px; width: 100%; height: 35px; padding: 5px 50px; border-top: 1px solid #ccc; background-color: #f5f5f5; }

.footer p { text-align: center; }

.toc-item { position: relative; display: block; padding: 3px 8px; color: #555; }

.toc-group a.selected { text-decoration: underline; color: #660000; }

a.toc-section, a.toc-subsection { padding-left: 18px; border-left: 2px solid; margin-left: 9px; }

a.toc-subsection { padding-left: 36px; }

a.toc-subsection::before { content: ""; position: absolute; left: 18px; top: 0px; bottom: 0px; border-left: 1px solid; }

.carousel-inner { -webkit-transform-style: preserve-3d; }

.carousel-description { display: none; }

.carousel-indicators { bottom: -50px; }

.carousel-indicators li { border-color: #999; background-color: #ccc; }

.carousel-inner { margin-bottom: 50px; border: 2px solid #ccc; }

table .img-responsive { width: 100%; }

@media print { body { margin: 0px; padding: 0px; width: 940px; } .panel { padding: 0px; margin: 0px; } .panel-default { border: 0px; padding: 0px; margin: 0 30px; } #sidebar { display: none; } }

#overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding-top: 100px; background-color: #4d4d4d; z-index: 10000; vertical-align: middle; text-align: center; color: #fff; font-size: 20px; font-weight: bold; cursor: wait; }

span.keyboard-00 { background-image: url(icons/00.png) !important; }

span.keyboard-01 { background-image: url(icons/01.png) !important; }

span.keyboard-02 { background-image: url(icons/02.png) !important; }

span.keyboard-04 { background-image: url(icons/04.png) !important; }

span.keyboard-08 { background-image: url(icons/08.png) !important; }

span.keyboard-16 { background-image: url(icons/16.png) !important; }

span.keyboard-32 { background-image: url(icons/32.png) !important; }

span.keyboard-64 { background-image: url(icons/64.png) !important; }

span.keyboard-rest { background-image: url(icons/rest.png) !important; }

span.keyboard-dot { background-image: url(icons/dot.png) !important; }

span.keyboard-barline { background-image: url(icons/barline.png) !important; }

span.keyboard-00, span.keyboard-01, span.keyboard-02, span.keyboard-04, span.keyboard-08, span.keyboard-16, span.keyboard-32, span.keyboard-64, span.keyboard-rest, span.keyboard-dot, span.keyboard-barline { top: 3px; height: 18px; margin: 0px !important; left: -4px; width: 14px !important; }

table.keyboard { width: 100%; }

td.keyboard { text-align: center; padding: 10px; }