body {
  font-family: Sans-Serif;
  color:#2f2f2f;
  background-color: #fdfdfd;
}

html, body {
    height: 100%;
    min-height: 100%;
    width: 100%;
}
/*
span {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
}	
*/
h1, h2, h3, h4, h5,h6 {
  line-height:110%;
}

h1, h2, h3, h4, h5,h6, p, pre { 
   margin-top: 15px;
}

h1 {
	text-align: center;
    display: block;
    font-size: 2em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

h2 {
	display: block;
	font-size: 1.5em;
	margin-before: 0.83em;
	margin-after: 0.83em;
	margin-start: 0;
	margin-end: 0;
	font-weight: bold; 
}

.tab_input_textarea input:focus::placeholder {
	/* Show hide placeholder in tablature textarea on focus/blur */
    color: transparent;
    width: 100%;
}

ul {
    margin: 0;
    padding: 0;
    padding-left: 0;
}

li {
	list-style-type: none;	
}

ul {
	list-style-type: none;	
}

.minimal_view {
	display: none;
}

.shareTabButton {
	background-color: #ff9c33;
}


/*
	This class is used for ASCII interfaces where we do not want to select or drag stuff. 
	It should be still like a picture.
*/
.noInteraction {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
}	


.chordButton{
	float: left; 
	width: 10em;
}

.scalelist{
    float: right;
}

pre.fretboard span{
    line-height:130%;
}

.exampleButtonPlayer {
	background-color: yellow;
}

.chordNoteList {
	text-align: center;
	font-weight: bold;
}

.chordlist{
    float: left;
}

.chord_tab {
    float: left;
}

.tab-extracted-scales {
	 
}

div.preintro{
	text-align: center;
	font-weight: bold;
}

.selected_note_table {
	color:gray;
}

.tab-extracted-chords {
	 /*width: 30%;*/
    /*float: left;*/
}

.selected_note {
	margin-left: 16px;
	color:lightgrey;
}

.hovered {
	font-weight: bold;
	color: red;
}

.whole_chords {
	clear: both;
}
.half_chords {
	clear: both;
}

.all_chords {
    width: 80%;
    margin-left: auto ;
    margin-right: auto ;
	 margin-bottom: 15px;
}

.all_chords .unsel_chord {
	float: left;
    width: 6%;
	padding-left: 3%;
	padding-right: 3%;
	/*background-color: white;*/
}
.all_chords .sel_chord {
	float: left;
   	width: 6%;
	padding-left: 3%;
	padding-right: 3%;
	color:gray;
}

.unselected_note {
	border-left: 1px solid black;
	padding-left: 10px;
}

.accountMenu {
	text-align: right;
	margin-right: 25%;
}

.submenu_item {
	margin-left: 10%;
	margin-right: 8%;
	/*border-top: 1px solid;*/
	/*border-bottom: 1px solid;*/
	/*border-left: 1px solid;*/
	/*border-right: 1px solid;*/
}

.mainControlSpeed {
	/*writing-mode: vertical-lr;*/
	/*writing-mode: vertical-rl;*/
	/*height: 50px;*/
}

.tabplayer_post {
	background-color: #A3FF75;
}

.tabplayer_play {
	background-color: #A3FF75;
	width: 40%;
	min-width: 85px;
}
.tabplayer_stop {
	background-color: #FF4719;
	color: black;
	width: 40%;
	min-width: 85px;
}

.nowrap {
	white-space: nowrap;
}

.tablaturePlayerRight {

}

.mainControlButtons button {
	font-size: 1.2em;
}

.mainControlTable {
	width: 100%;

}
.mainControlOptionsTable tr td {
	text-align: left;
	padding-right: 5px;
}
.divHidden {
	display: none;
}
.divShown {
	display: block;
}
.mainPlayerControl {
  	/*position: -webkit-sticky;*/	
	position: sticky;
	/*position: fixed;*/
	bottom: 0;
	width: 100%;
	padding: 25px 25px 25px 25px;
	border:1px solid black;
	margin-bottom: 30px;
	z-index: 1000;
	background-color: white;
	color: black;
	text-align: center;
	min-width: 100%;
}

.tofret_ascii_logo {
	font-size: 1.1em;


    position: relative;
    padding-top: 0;
    padding-bottom: 2%;
    top: 0;
	left: 0;
	z-index: 999; 
	background-color: #2f2f2f;
	color: white;
    text-align: center;


}
.clear_all {
	clear: both;
}

.container_top p { 
	margin-bottom: 20px; 
}
.container_right {
	float: right;
}
.instrument_menu {
	text-align: center;
}

#bottomIntroText {
	text-align: center;
}
#bottomMenu {
	text-align: center;
}

#bottomLogo {
    position: relative;
    width: 100%;
    bottom: 0;
	 left: 0;
	 z-index: 999; 
	 background-color: #2f2f2f;
	 color: white;
    text-align: center;
}
#bottomLogo a{
	text-decoration: none;
	color: white;
	font-weight: bold;
}
#topLogo {	
	position: relative;
	width: 100%;  
	top: 0;
	left: 0;
	z-index: 999;   
	background-color: #2f2f2f;
	color: white;
	text-align: center;
}
#topLogo a{
	text-decoration: none;
	color: white;
	font-weight: bold;
}

#topMenu {
	text-align: center;
}

.chord_detail_list {
	float: right;
	width: 30%;	
}
.chord_detail_all_notes {
}
.chord_detail_intro {
}
.guitar-tab-links {
	float: right;
}
.chord_detail_text {
	width: 70%;
	float: left;
}
.chord_detail_intro {
	width: 70%;
}

.tabplayer {
	border-top: 1px solid #CCCCCC ;
	padding-left: 8%;
	padding-top: 5px;
	padding-bottom: 5px;
}

 .highlight {
	background-color: lightgrey; 
 }

.clickedThing {
	border-left: 1px solid red	;
	background-color: yellow;
	margin-left: -1px; 	
}

.notes_mainpage_input_form {
	margin-right: 50px; 
	margin-bottom: 2em; 
	float:left;
}