{ font-family: Arial, Helvetica, sans-serif; padding-bottom:100px; } .container{ width:5vw; height:4.5vw; } .container4{ width:10vw; height:9vw; } .draggable-row { cursor: grab; /* Indicate draggable */ } .draggable-row:active { cursor: grabbing; /* Indicate actively dragging */ } .drag-handle { cursor: grab; /* Indicates the element is draggable */ width: 20px; height: 20px; text-align: center; line-height: 20px; background-color: white; border: 1px solid #ccc; margin-right: 5px; } .drag-handle:active { cursor: grabbing; /* Changes cursor during drag */ } .container3 { display: flex; /* Enables flexbox layout */ } .left-panel, .right-panel { flex-grow: 1; /* Allows panels to grow and shrink */ overflow: auto; /* Adds scrollbars if content exceeds panel size */ padding: 10px; } .resizer { width: 5px; /* Width of the draggable handle */ background-color: #ddd; cursor: ew-resize; /* Cursor indicates horizontal resizing */ } .baritone_strings{ background-image:url('baritone_strings.png'); print-color-adjust: exact; background-size:contain; color:black; background-color:white; height:10vh; width:30px; } .staff-c0{ position:absolute; top:25px; padding:0px; margin:0px } .staff-d0{ position:absolute; top:17px; padding:0px; margin:0px } .staff-e0{ position:absolute; top:10px; padding:0px; margin:0px } .staff-f0{ position:absolute; top:5px; padding:0px; margin:0px } .staff-g0{ position:absolute; top:1px; padding:0px; margin:0px } .staff-a0{ position:absolute; top:-3px; padding:0px; margin:0px } .staff-b0{ position:absolute; top:-6px; padding:0px; margin:0px } .staff-c1{ position:absolute; top:-12px; padding:0px; margin:0px } .staff-d1{ position:absolute; top:-17px; padding:0px; margin:0px } .staff-e1{ position:absolute; top:-22px; padding:0px; margin:0px } .staff-f1{ position:absolute; top:-27px; padding:0px; margin:0px } .staff-g1{ position:absolute; top:-33px; padding:0px; margin:0px } .staff-a1{ position:absolute; top:-38px; padding:0px; margin:0px } .staff-b1{ position:absolute; top:-43px; padding:0px; margin:0px } .staff-c2{ position:absolute; top:-48px; padding:0px; margin:0px } .semitone{ width:110px; font-size:1.4em; } .note{width:75px; font-size:1.4em; } .label{width:190px; font-size:1.4em; } .overlay-div { position: fixed; top: 150px; right: 0px; z-index: 1000; background-color: white; padding: 20px; border: 1px solid black; width:330px; height:450px; } .container2{ width:150px; height:180px; } .chordpopup { overflow-y:scroll; height:600px; border-radius:20px; background-color:white; padding-left:24px; } .barichord_popup { overflow-y:scroll; height:600px; border-radius:20px; background-color:white; padding-left:24px; } .fret_number{ vertical-align:top; font-size:1.5em; padding-top:0%; min-width:15px; } .fret_number_container{ } .table-container { width:100%; height:135%; background-image:url("fretboard-image.png") !important; background-repeat: no-repeat; background-size:73%; position:relative; print-color-adjust: exact; } .table-container2 { width:100%; height:130%; background-image:url("fretboard-image.png") !important; background-repeat: no-repeat; background-size:73%; position:relative; print-color-adjust: exact; } .table-container3 { width:100%; height:100%; background-image:url("fretboard-image.png") !important; background-repeat: no-repeat; background-size:73%; position:relative; print-color-adjust: exact; } .table-container-empty { width:100%; height:100%; background-image:url("fretboard-outline.jpg")!important; background-repeat: no-repeat; background-size:73%; position:relative; print-color-adjust: exact; } .dot { position: absolute; height:14%; width:19%; } .string1{ left:-5%;} .string2{ left:18%;} .string3{ left:37%;} .string4{ left: 60%;} .string11{ left:-6%;} .string21{ left:18%;} .string31{ left:39%;} .string41{ left: 60%;} .fret0 {top:0%;} .fret1 {top:6.1%;} .fret2 {top:26%;} .fret3 {top:44%;} .fret4 {top:62%;} .fret5 {top:82%;} .fret6 {top:102%;} #holder { border: 3px solid black; border-radius: 5px; height:90%; width:100%; position:absolute; top:150px; } #songScroller{ width:1240px; height:560px; } .soprano_strings{ background-image:url('tab-parallel-lines.png'); background-size:contain; background-repeat:repeat; width:1.5vw; color:black; background-color:white; height:90px; min-width:30px; print-color-adjust: exact; } .soprano_strings_blank{ background-repeat:no-repeat; width:1.5vw; color:black; background-color:white; height:10vh; min-height:117px; min-width:30px; } .noto-music { font-family: Arial, sans-serif; font-weight: 400; font-style: normal; } .tab_timing { position:relative; background-color:white; background-image: url(staff_lines.png); background-size: contain; background-repeat:repeat; font-family: Arial, sans-serif; font-weight: 400; font-size:2.6em; padding-bottom:0px; border:none; height:90px; width:90px; min-width:51px; width:100%; print-color-adjust: exact; } button{ font-size:1.2em; } .chord_options_button{ height:.7em; } .chordpopup { display:block; position:fixed; right:330px; z-index:100; background-color:gray; display:none; width:155px; } .mts-controls{ font-size:1.2em; } input{ font-size:1.2em; } #website_title{ position: fixed; top:0; background-color:white; font-size:2em; padding:0px; margin:0px; z-index:9; width:100%; } #menu_holder{ padding-top:40px;} .overallLayout { display:flex; /* Establishes a flex container */ padding-top:0px; } .songScroller { flex-basis: 80%; /* Sets the initial size of the item to 80% */ flex-grow: 1; /* Allows the item to grow to fill available space */ } #chordDiagrams{ overflow:scroll; } .chordDiagrams { flex-basis: 20%; /* Sets the initial size of the item to 20% */ flex-grow: 0; /* Prevents the item from growing */ } .scroll-container2-class { width: 100%; /* Set a fixed width for the container */ overflow: hidden; /* Hide the overflowing parts of the image */ white-space: nowrap; /* Prevent image from wrapping */ } .scroll-container2-class img { display: inline-block; /* Make the image behave like inline element */ animation: scroll-left 200s linear infinite; /* Apply the animation */ } .scroll-image-class2 { height:100%; overflow-y:auto; object-position:0 0; padding-top:40px; scroll-behavior:smooth; overflow-x: scroll; -webkit-animation: scroll-left var(--duration) linear infinite; animation: scroll-left var(--duration) linear infinite; animation-iteration-count: 1; animation-play-state:paused; } .scroll-image-class { display:none; } #scroll-container { border: 3px solid black; border-radius: 5px; height:150%; width:100%; position:absolute; top:150px; will-change: transform; transform: translate3d(0,0,0); display:none; } .scroll-image-class { width:100%; object-fit:cover; object-position:100% 0; padding-top:130px; scroll-behavior:smooth; display:none; overflow: scroll; -webkit-animation: my-animation var(--duration) linear infinite; animation: my-animation var(--duration) linear infinite; animation-iteration-count: 1; animation-play-state:paused; } .song_category{ text-indent:0px; } .found_song { text-indent:30px; margin-left:30px; } #result { min-height: 50vh; overflow-y: auto; -webkit-overflow-scrolling: touch; font-size: var(--song-text-size, 40px); } #lyric_content { min-height: 50vh; overflow-y: auto; -webkit-overflow-scrolling: touch; font-size: var(--song-text-size, 40px); } #result { min-height: 50vh; overflow-y: auto; -webkit-overflow-scrolling: touch; font-size: var(--song-text-size, 40px); } #result { min-height: 50vh; overflow-y: auto; -webkit-overflow-scrolling: touch; font-size: var(--song-text-size, 40px); } #result { overflow-y: auto; -webkit-overflow-scrolling: touch; } :root { --song-text-size: 40px; } /* default */ #result { font-size: var(--song-text-size); } #lyric_content { font-size: var(--song-text-size); } /* harmless even if hidden */ #result { min-height: 50vh; /* gives it some height even in empty states */ overflow-y: auto; -webkit-overflow-scrolling: touch; font-size: var(--song-text-size, 40px); } :root { --song-text-size: 40px; /* default */ } #chords{ white-space:nowrap; overflow:visible; font-size:.7em; } .song-text, .lyrics, { font-size: var(--song-text-size*.8); font-size:1em; } .instrumental_chords { font-size: .7em; background_color: white; font-size: 42px; font-weight:bold; height:50px; } .animation_settings{ display:none; } #chord_container { width:190px; } #chord_table2{ } #chord_table1{ } .chords_window{ width:26%;} .blank_line{ height:40px; } #current_speed{ -webkit-user-modify: read-write; -moz-user-modify: read-write; user-modify: read-write; } #measures { border-style:solid; border-collapse: collapse; } .measures_td { border-right-style:solid; border-left-style:solid; color:white; border-width:1px; border-style:solid; padding:3px; } .contents_table{ min-width:1000px; } .contents_header{ font-size: 30px; margin-bottom:0px; padding-top:0px; margin-top:0px; font-weight:bold; } .button_style{ width:100%; padding:5px; font-size:60px; text-align:left; list-style:none; text-indent:-40px; padding-left:40px; margin:0; padding-top:0; padding-bottom:0; } .button_style_p{ } .contents_td{ vertical-align:top; text-align:left; font-size: 40px; width:50%; } .key_menu{ font-size:1.2em; color:black; } .show_index_button{ font-size: 1.3em; } .contents_options{ display:normal; } .control_buttons{ background:#1f2937; color:white; border:1px solid #374151; padding:6px 10px; border-radius:8px; cursor:pointer; } .h2head { margin-top:50px; margin-left:20px; font-size:40px; font-weight:bold; margin-left:10px; line-height:60px; display:block; } .lyrics{ font-family: Arial; line-height: 1.2; } .youtube{ display:inline; font-size: 20px; display:block; width:40px; } #lyrics_window{ float:left; width:74%; } #chord_window{ float:left; width:25%; } .baritone_instrumental{ font-size:.5em; padding-bottom:10px; } #pdf_file{ height:1200px; clip-path:inset(0 40px 0 25px); } .chord_diagram{ margin-top:2px; padding-bottom:20px; width:90px; height:70%; } .div_counter{ width:50px; font-size: 30px; } .chord_name { font-size:1.5em; text-align:center; padding-bottom:0px; } .note_instrumental{ font-size:.5em; display:none; } .soprano_instrumental{ font-size:.5em; } .starting_notes{ font-size:.5em; } #visible_page { border-style:none; height: 700px; width: 1175px; overflow: hidden; border-left:0px; margin-left:10px; } #thisHeight{ display:none; } #result { border: 3px solid black; border-radius: 5px; border-style:none; height: 600px; overflow: hidden; width:1175px; } #form{ max-height:35px; } .test_class{ display:inline; } .scroll-text { padding-left:10px; height: 100%; text-align: left; padding-bottom:60%; display:block; } .scroll_text { transition: .1s; margin-top: var(--my-end-percent) !important; transition: margin var(--my-duration) linear; } .soprano{ text-align:left; } .chord-header{ font-size:1.6em; } .baritone{ text-align:left; } .instrumental_td{ min-width:32px; min-height:120px; } .rest{ background-image:url('tab-parallel-lines.png') ; background-repeat:no-repeat; object-fit:cover; height:10px; vertical-align:middle; border:none; font-size:30px; print-color-adjust: exact; } .sop_A { background-image:url('tab-parallel-lines.png') ; print-color-adjust: exact; background-repeat:repeat; background-size: contain; width:1.5vw; height:90px; font-size:30px; border:none; position:relative; min-height:117px; color=black !important; } .sop_text_A{ position:absolute; top:-33%; width:100%; text-align:center; } .sop_E { width:1.5vw; height:90px; position:relative; background-image:url('tab-parallel-lines.png') ; print-color-adjust: exact; background-repeat:repeat; background-size: contain; font-size:30px; border:none; min-height:117px; color=black; } .sop_text_E{ position:absolute; top:-9%; width:100%; text-align:center; } .sop_C { background-image:url('tab-parallel-lines.png') ; print-color-adjust: exact; background-repeat:repeat; width:1.5vw; height:90px; background-size: contain; font-size:30px; border:none; color=black !important; position:relative; min-height:117px; } .sop_text_C{ position:absolute; top:10%; width:100%; text-align:center; } .sop_G { background-image:url('tab-parallel-lines.png') ; print-color-adjust: exact; background-repeat:repeat; width:1.5vw; height:90px; background-size: contain; font-size:30px; border-top:none; border-bottom:none; border-color:gray; position:relative; min-height:117px; color=black !important; } .sop_text_G{ position:absolute; top:55%; width:100%; text-align:center; } .bar_E { background-image:url('tab-parallel-lines.png') ; print-color-adjust: exact; background-repeat:no-repeat; background-size: cover; width:1.5vw; height:6vh; font-size:30px; border-top:none; border-bottom:none; border-color:gray; } .bar_E img{ width:52px; height:40px; object-fit: scale-down; object-position: -20% 0; } .bar_text_E{ position:absolute; top:-10%; width:100%; text-align:center; } .bar_B { background-image:url('tab-parallel-lines.png') ; print-color-adjust: exact; background-repeat:no-repeat; background-size: cover; width:1.5vw; height:6vh; vertical-align:bottom; font-size:30px; vertical-align:top; border-top:none; border-bottom:none; border-color:gray; padding-top:25px; } .bar_text_B{ position:absolute; top:12%; width:100%; text-align:center; } .bar_G { background-image:url('tab-parallel-lines.png') ; print-color-adjust: exact; background-repeat:no-repeat; background-size: cover; vertical-align:bottom; font-size:30px; vertical-align:top; border-top:none; border-bottom:none; border-color:gray; padding-top:50px; } .bar_G img{ width:52px; height:40px; object-fit: scale-down; object-position: -20% 0; } .bar_text_G{ position:absolute; top:33%; width:100%; text-align:center; } .bar_D { background-image:url('tab-parallel-lines.png') ; print-color-adjust: exact; background-repeat:no-repeat; background-size: cover; vertical-align:bottom; font-size:30px; vertical-align:top; border-top:none; border-bottom:none; border-color:gray; } .bar_D img{ width:52px; height:40px; object-fit: scale-down; object-position: -20% 0; } .bar_text_D{ position:absolute; top:55%; width:100%; text-align:center; } .tab_td{ width:100%; border-collapse:collapse; } .tab_grid{ width: 1000px; height:120px; } .measure_break{ background-repeat:no-repeat; background-size: 100% 100%; vertical-align:bottom; padding-bottom:25px; min-width:10px; height:400px; font-size:1.9em; font-color: red; margin-top:60px; border-top:none; border-bottom:none; border-color:gray; border-right: solid; border-color:gray; } @media print { { -webkit-print-color-adjust: exact !important; /*Chrome, Safari */ color-adjust: exact !important; /*Firefox*/ } #header { display:none; } .chords { color:blue; print-color-adjust: exact; } .scroll-image-class{ padding-top:100px; } #scroll-container { display:none; } .chord_diagram { width:200px; } #upload_container{display:none;} #print_window_close{ display:none; } #close_window{ display:none; } #chords{ display:none; } #print_window { display:block;} #scroll-text2 { display:none;} #result { display:block;} #visible_page { display:none;} #chord_container { display:block;} #show_song_list_button{display:none !important;} #pdf_file{height:1000px !important;} #show_measures_line{display:none;} #show_speed_line{display:none;} #h2head{display:block;padding:bottom:30px;} #metronome{display:none;} #option_button{display:none;} .chord_diagram { width:70%; } } #metronome{ width: 500px; } #play-button { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; flex-flow: column; } #stop-button { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; flex-flow: column; } #tempo { font-size: 40px; } .bpm { font-size: 12px; text-align: center; } .tempo-controls { margin-top: 30px; display: flex; align-items: center; justify-content: center; flex-flow: row; } .tempo-container { margin: 0 15px; } #metronome button { padding: 6px; border: none; border-radius: 100%; width: 40px; height: 40px; margin: 5px; background-color: #2a4949; color: #e9e9e9; cursor: pointer; } #metronome button:focus { outline: none; } .play { width: 15px; height: 60px; } .stop { width: 0; height: 0; } .pause { width: 15px; height: 60px; } /* Scope to the overlay/mount scroller only */ #songScroller .mts-content{ width:max-content !important;padding-top:0px; } #songScroller .mts-item-img{ width:auto !important; height:100% !important; /* for horizontal images: fill viewport height */ max-width:none !important; max-height:none !important; object-fit:unset !important; }