/*
 * This file is part of alphaTab.
 *
 *  alphaTab is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License as published by
 *  the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.
 *
 *  alphaTab is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 *
 *  You should have received a copy of the GNU General Public License
 *  along with alphaTab.  If not, see <http://www.gnu.org/licenses/>.
 */

/** General Style **/
body, html {
	margin:0;
	padding:0;
}

body{font-family:Arial, Verdana, Helvetica, sans-serif;font-size:12px;color:#575757;background:#efefef;}
h1{color:#575757;text-shadow:1px 1px 0 #FFF;font-weight:normal;margin:0 0 10px 0;font-size:24px;}
h2{color:#426d9d;font-size:18px;margin:0 0 6px 0;}
h3{color:#426d9d;font-size:16px;}

a:link, a:visited {
	color:#335c82;
	text-decoration:none;
}

a:hover, a:active {
	text-decoration:underline;
}

#Content {
	padding:5px 5px;
}

#TopNavWrapper {
	border-bottom:3px solid #2d4364;
	background:#081214;
	height:103px;
}

/* Center Block */
#TopNav, #Slider, #SliderDesc, #Content, #Footer {
	margin:0 auto;
	width:1010px;
}

#TopNav {
	height:103px;
	/*background:url('images/top_menu_bg.gif') repeat-y;*/
}

#AlphaTabLogo {
	width:231px;
	height:81px;
	display:block;
	/*background:url('images/alphatab_logo.gif') no-repeat;*/
	float:left;
	margin-top:10px;
}

#TopNav ul {
	padding:0;
	margin:0;
	list-style-type:none;
	float:right;
	margin:39px 60px 0 0;
}

#TopNav ul li {
	float:left;
	width:120px;
	height:29px;
	/*background:url('imag/es/menu_item.gif') no-repeat;*/
	margin-left:8px;
}

#TopNav ul li.active  {
	/*background:url('images/menu_item_active.gif') no-repeat;*/
}

#TopNav ul li a {
	display:block;
	width:118px;
	height:21px;
	text-align:center;
	margin-top: 6px;
	color:#FFF;
	font-size:13px;
}

#TopNav ul li a:hover {
	text-decoration:none;
}

fieldset {
	 -moz-border-radius: 5px;
	 -webkit-border-radius: 5px;
	 border: 1px solid #666;
	 width:780px;
}

.hint {
	border:4px solid rgb(190,215,190);
	padding:4px 4px;
}

ul {
	list-style: square;
	margin: 0 0 18px 0;
	padding: 0 0 0 30px;
}

ul a {
	color:#426d9d;font-size:16px;
	margin-bottom:3px;
	display:block;
}

ul li {
	margin-bottom:10px;
}

code, pre {
	border:2px solid rgb(190,215,190);
	background:#F5F5F5;
	/* Radius */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	height:auto;
	margin:7px 7px;
	height:auto;
	white-space:pre;
	padding:5px;
}

pre {
	width:300px;
}

code {
	display:block;
	float:left;
}

/*                      */

.barCursor { /* Defines the color of the bar background when a bar is played */
	opacity: 0.25;
	background: #FFF200;
}

.selectionWrapper div { /* Defines the color of the selection background */
	opacity: 0.1;
	background: #4040FF;
}

.beatCursor { /* Defines the beat cursor */
	opacity: 0.75;
	background: #4040FF;
}

.atHighlight * { /* Defines the color of the music symbols when they are being played (svg) */
	fill: #0078ff;
}

/* Track selector */
#trackList li {
	padding: 5px;
}

#trackList .btn {
	background: none;
	outline: none;
}

#trackList .solo.checked {
	background: #426d9d;
	color: #FFF;
}

#trackList .mute.checked {
	background: #c9302c;
	color: #FFF;
}

#trackList .title {
	cursor: pointer;
}

#trackList .title:hover {
	color: #426d9d;
}

#trackList .btn-group {
}

#trackList .slider-handle {
	-moz-transform: scale(0.5, 0.5);
	-webkit-transform: scale(0.5, 0.5);
	transform: scale(0.5, 0.5);
}
.btn-file {
	position: relative;
	overflow: hidden;
}
.btn-file input[type=file] {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 100%;
	min-height: 100%;
	font-size: 100px;
	text-align: right;
	filter: alpha(opacity=0);
	opacity: 0;
	background: red;
	cursor: inherit;
	display: block;
}
input[readonly] {
	background-color: white !important;
	cursor: text !important;
}

.slider-handle.custom {
	background: transparent none;
	/* You can customize the handle and set a background image */
}

/* Or display content like unicode characters or fontawesome icons */
.slider-handle.custom::before {
	line-height: 20px;
	font-size: 20px;
	content: '\2605'; /*unicode star character*/
	color: #726204;
}

.slider.slider-horizontal {
	width: 210px;
	height: 20px;
	margin-top: 8px;
	margin-bottom: 8px !important;
	display: inline-block;
	padding: 16px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
}
.slider-handle {
	position: absolute;
	top: 5px;
}
.navbar-custom {
	background-color: #5656566b !important;
	border-color: #e7e7e7 !important;
	background: #dddddd;
	border: 2px solid transparent !important;
}
.navbar-brand{
	color: #fff !important;
}
.navbar-default .btn-link {
	color: #fff !important;
}
.navbar-default .navbar-nav>li>a {
	color: #fff !important;
}
.navbar-default .navbar-text {
	color: #fff !important;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
	background-color: #636363b3 !important;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.open>a {
	background-image: none !important;
}
.btn-primary {
	color: #fff;
	background-color: #5d5d5d96 !important;
	border-color: #ffffff00 !important;
}
.slider-handle {
	background-color: #777777 !important;
	background-image: none !important;
}

body{
	background: white;

	background-position: top;
}
#notation{
	scroll-behavior: smooth ;
	height: 100%;
	*background-color: #e3fff670;
	background-color: #ffffff;
	width: 100%;
	margin: 0px;
	padding:0px -15px ;
	position: absolute;
}
#notation2{
	scroll-behavior: smooth ;

}
#comp{
	text-align: center;
	font-size: 2em;
	color: #575757;
	text-shadow: 1px 1px 0 #FFF;
	font-weight: normal;
	margin: 0 0 10px 0;
}
.logo-txt{
	font-size: 2em !important;
	color: #575757 !important;
	text-shadow: 1px 1px 0 #FFF;
	font-weight: normal;
	margin: 0 0 10px 0;
}

.example {
	font-family: Arial;
	font-size: 12px;
}

.status {
	width: 100px;
	height: 200px;
	padding: 10px;
	overflow-y: auto;
}

.statusline {
	font-size: 10px;
	background-color: #E0E0E0;
	margin: 3px 0;
	padding: 2px;
}

.metr_input {
	width: 40px;
	margin-right: 10px;
	text-align: center;
}

#count {
	width: 50px;
	display: inline-block;
	text-align: right;
}