#list_anwendungshilfe a{
	color: black;
	text-decoration: underline;
	}

@media (min-width: 992px){
	#mouseTooltip{
		display: none;
		}
	}

#mouseTooltip{
	display: none;
	border: 1px solid grey;
	background-color: rgba(255,255,255,0.9);
	width: 320px;
	padding: 4px;
	position: absolute;
	z-index: 30;
	
	-webkit-box-shadow: 3px 3px 5px 0px rgba(133,133,133,1);
	-moz-box-shadow: 3px 3px 5px 0px rgba(133,133,133,1);
	box-shadow: 3px 3px 5px 0px rgba(133,133,133,1);
	}

	
#mouseTooltip.topleft{
	top: 10px;
	left: 10px;
	}

#mouseTooltip.topright{
	top: 10px;
	right: 30px;
	}

#mouseTooltip.bottomleft{
	bottom: 10px;
	left: 10px;
	}

#mouseTooltip.bottomright{
	bottom: 10px;
	right: 30px;
	}
	
#mouseTooltip.topleft_mini{
	top: 20px ;
	left: 60px;
	}

#mouseTooltip.topright_mini{
	top: 20px;
	right: 80px;
	}

#mouseTooltip.bottomleft_mini{
	bottom: 30px;
	left: 60px;
	}

#mouseTooltip.bottomright_mini{
	bottom: 30px;
	right: 80px;
	}


#bootstropChordContainer{
	padding-left: 0px !important;
	padding-right: 0px !important;
	
	height: 700px;
	margin-bottom: 10px;
	
	overflow-x: hidden;
	overflow-y: hidden;
	
	}
	
@media (max-width: 700px){
	/* shift a bit to right, because the chord-labels are more on the left side */
	#bootstropChordContainer{
		padding-left: 10px !important;
		}
	}
	
#chordContainerRelative{
	transform-origin: 0 0;
	position: relative; 
	width: 700px; 
	
	
	}
	
#chordContainer{
	position: absolute; 
	width: 700px; 
	height: 700px;
	
	/*background: lightblue;*/
	}

/* START Jahr button grid */

.btn_group_jahr {
	display: table;
	width: 100%;
	table-layout: fixed;
}

a.jahr-btn {
	display: table-cell;
	padding: 6px 12px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	text-decoration: none;
	color: #333;
	background-color: #fff;
	border: 1px solid #2daae1;
	border-radius: 0;
}

a.jahr-btn:hover {
	background-color: #e6e6e6;
	color: #333;
	text-decoration: none;
}

a.jahr-btn > i {
	color: #2daae1;
	display: none;
}

@media (min-width: 1200px) AND (max-width: 1399px){
	a.jahr-btn > i {
		margin-left: -6px;
		margin-right: -2px;
		}
	}

#btn_group_jahr1 a.jahr-btn.active,
#btn_group_jahr2 a.jahr-btn.active,
#btn_group_jahr3 a.jahr-btn.active {
	background-color: #e0e0e0;
}

a.jahr-btn.active > i {
	color: #2daae1;
	display: inline-block;
}

/* collapse within-row borders */
a.jahr-btn + a.jahr-btn {
	border-left: none;
}

/* collapse between-row borders */
#btn_group_jahr2 a.jahr-btn,
#btn_group_jahr3 a.jahr-btn {
	border-top: none;
}

/* rounded outer corners only */
#btn_group_jahr1 a.jahr-btn:first-child { border-radius: 4px 0 0 0; }
#btn_group_jahr1 a.jahr-btn:last-child  { border-radius: 0 4px 0 0; }
#btn_group_jahr3 a.jahr-btn:first-child { border-radius: 0 0 0 4px; }
#btn_group_jahr3 a.jahr-btn:last-child  { border-radius: 0 0 4px 0; }

/* END Jahr button grid */
	
