/* DATEI: stylesheet.css */

/* Zurücksetzen der Browser  - linker oberer Rand! */
* {margin: 0; padding: 0; }

/* Vollbild 100% = Browserfenster */
html, body { height: 100%; margin: 0; padding: 0; } 

#menu {
padding: 10px 10px;
font-family: Tahoma;
font-size: 1em;
line-height: 1.5;
float: left;
position: fixed;
z-index: 6;
}

#menu ul {
width: 180px;
list-style-type: none;
}

/*--definiert die "Ausklapp-Links" im Normalzustand--*/
#menu a {
text-decoration: none;
display: block;
border: 1px solid black;
text-align: center;
background: #FFF6E0;
color: black;
}

/*--definiert die "Ausklapp-Links" im Hoverzustand--*/
#menu a:hover {
color: blue;
background: #CCFF66; /* hellgrün */
}

/*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern--
*/

#menu li {
position: relative;
}

/*--versteckt die "Ausklapp-Links", solange nicht gehovert wird--*/
#menu ul ul {
position: absolute;
top: 0px; left: 140px; z-index: 2;
display: none;
}

/*--lässt die Ausklapp-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
display: block;
}


#menu ul li a {
height: 1%;
}

/*--definiert einen Einzellink im Normalzustand, wenn kein Ausklappen erforderlich--*/

#menu a.direkt:link {
font-size: 1em;
text-align: center;
color: #000;
border: 1px solid black;
background:#FFF6E0; /* Klappmenü-BG - gelbweiß */
}

/*--definiert einen Einzellink im HOVERzustand, wenn kein Ausklappen erforderlich--*/

#menu a.direkt:hover {
color: blue;
background: #CCFF66; /* hellgrün */
border: 1px solid black;
}

#menu .copyright {
font-size: 0.8em; 
color: #C8C8C8; 
margin-left: 6px; 
margin-top: 6px;
}


div#text 
{ position: absolute; top: 5%; left: 230px; right: 1%;
  margin: 0 0 0 0;
  font-family: Tahoma; 
  font-size: 1em; 
  color: #414141;
  width: 1020px;
  min-width: 16em; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */
}

div#text h1 { font-size: 1.5em;  margin: 0 0 1em; }

div#text h2 { font-size: 1em;  margin-bottom: 3em; margin-top: 3em; }

div#text p { font-size:1em;  margin: 1em 0; }

div#text a {text-decoration:none;}
div#text a:link {color: black;}
div#text a:hover {color: black;} 
div#text a:visited {color: #414141;}

span#footnote { font-size:0.8em; }

table {border-collapse: collapse;}
td {text-align: center; border: 1px solid #C8C8C8; }

#td_noborder {text-align: left; border: none; }


/* Tabellentyp -01 */
#table-01 {
    text-shadow: 1px 1px 4px gray; 
    box-shadow: 10px 10px 7px #888888;
}
#table-01 #legend-01 {
	width: 175px;
    background:-moz-linear-gradient( center bottom, #989898 5%, #F5F5F5 100% ); /* Firefox */
	background:-webkit-linear-gradient( bottom, #989898 5%, #F5F5F5 100% );  /* Chrome u.a. */
}
#table-01 .keyboard_row .signed {
    background:-moz-linear-gradient( center top, #b2b2b2 5%, Black 100% ); /* Firefox */
	background:-webkit-linear-gradient( top, #b2b2b2 5%, Black 100% );  /* Chrome u.a. */
    color: white;
    padding: 7px;
	width: 50px;
	font-size: 0.9em;
}
#table-01 .keyboard_row .unsigned {
    background:-moz-linear-gradient( center top, ivory 5%, #b2b2b2 100% ); /* Firefox */
	background:-webkit-linear-gradient( top, ivory 5%, #b2b2b2 100% );  /* Chrome u.a. */
    color: black;
    padding: 7px;
	width: 50px;
	font-size: 0.9em;
}
#table-01 .keyboard_row .signed:hover {
    background:-moz-linear-gradient( center bottom, #b2b2b2 5%, Black 100% ) /* Firefox */
	background:-webkit-linear-gradient( bottom, #b2b2b2 5%, Black 100% );  /* Chrome u.a. */
}
#table-01 .keyboard_row .unsigned:hover {
    background:-moz-linear-gradient( center bottom, ivory 5%, #b2b2b2 100% ); /* Firefox */
	background:-webkit-linear-gradient( bottom, ivory 5%, #b2b2b2 100% );  /* Chrome u.a. */
}



/* Tabellen "Dominant Scales" */
#table-dominant-scales  {
    text-shadow: 1px 1px 4px gray; 
    box-shadow: 10px 10px 7px #888888;
	font-size: 0.9em;
}
#table-dominant-scales #legend_dominant-scales {
	background:-moz-linear-gradient( center bottom, #989898 5%, #F5F5F5 100% );
	background:-webkit-linear-gradient( bottom, #989898 5%, #F5F5F5 100% );  /* Chrome u.a. */
	text-align: left;
	font-size: 0.8em;
	padding: 7px;
}
#table-dominant-scales .keyboard_row .signed-dominant-scales {
    background:-moz-linear-gradient( center top, #b2b2b2 5%, Black 100% );
	background:-webkit-linear-gradient( top, #b2b2b2 5%, Black 100% );  /* Chrome u.a. */
    color: white;
    padding: 7px;
	width: 30px;
	font-size: 0.8em;
}
#table-dominant-scales .keyboard_row .unsigned-dominant-scales {
    background:-moz-linear-gradient( center top, ivory 5%, #b2b2b2 100% );
	background:-webkit-linear-gradient( top, ivory 5%, #b2b2b2 100% );  /* Chrome u.a. */
    color: black;
    padding: 7px;
	width: 30px;
	font-size: 0.8em;
}
#table-dominant-scales .keyboard_row .signed-dominant-scales:hover {
    background:-moz-linear-gradient( center bottom, #b2b2b2 5%, Black 100% );
	background:-webkit-linear-gradient( bottom, #b2b2b2 5%, Black 100% );  /* Chrome u.a. */
}
#table-dominant-scales .keyboard_row .unsigned-dominant-scales:hover {
    background:-moz-linear-gradient( center bottom, ivory 5%, #b2b2b2 100% );
	background:-webkit-linear-gradient( bottom, ivory 5%, #b2b2b2 100% );  /* Chrome u.a. */
}

/* Tabellen "Modi" */
#table-modi {
    text-shadow: 1px 1px 4px gray; 
    box-shadow: 10px 10px 7px #888888;
	font-size: 0.9em;
}
#table-modi #legend_modi {
	background:-moz-linear-gradient( center bottom, #989898 5%, #F5F5F5 100% );
	background:-webkit-linear-gradient( bottom, #989898 5%, #F5F5F5 100% );  /* Chrome u.a. */
	text-align: left;
	padding: 5px;
	font-size: 0.8em;
}
#table-modi .keyboard_row .signed-modi {
    background:-moz-linear-gradient( center top, #b2b2b2 5%, Black 100% );
	background:-webkit-linear-gradient( top, #b2b2b2 5%, Black 100% );  /* Chrome u.a. */
    color: white;
	padding: 5px;
	width: 20px;
	font-size: 0.8em;
}
#table-modi .keyboard_row .unsigned-modi {
    background:-moz-linear-gradient( center top, ivory 5%, #b2b2b2 100% );
	background:-webkit-linear-gradient( top, ivory 5%, #b2b2b2 100%);  /* Chrome u.a. */
    color: black;
	padding: 5px;
	width: 20px;
	font-size: 0.8em;
}	
#table-modi .keyboard_row .signed-modi:hover {
    background:-moz-linear-gradient( center bottom, #b2b2b2 5%, Black 100% );
	background:-webkit-linear-gradient( bottom, #b2b2b2 5%, Black 100% );  /* Chrome u.a. */
}
#table-modi .keyboard_row .unsigned-modi:hover {
    background:-moz-linear-gradient( center bottom, ivory 5%, #b2b2b2 100% );
	background:-webkit-linear-gradient( bottom, ivory 5%, #b2b2b2 100% );  /* Chrome u.a. */
}


#title-row {
   background-color:#CCFF66; 
}
#title-row :hover {
   background-color:#CED8F6; 
}


.col:hover {
   background-color:#CED8F6; 
}


.black { background-color:black;  color:white; }
.ivory { background-color:ivory; }
.forestgreen { background-color:forestgreen; color:white; }
.green { background-color:#60B21C;  color:white; }
.lightgreen { background-color:#CCFF66; }
.hellhellgruen { background-color:#ECFFAB; }
.superhellgruen { background-color:#F7FFDB; }

.gold { background-color:gold; }
.yellow { background-color:#FFE65D; }
.hellgelb { background-color:#FFFF99; }
.hellhellgelb { background-color:#FFFFDD; }

.red { background-color:#FF4242; color:white; }
.dominant-red { background-color:#DA251D; color:white; }
.hellrot { background-color:#FFCCCC; }
.orange { background-color:#FFE672; }
.orangerot { background-color:#FFEAA6; }
.plum { background-color:#FFE1FF; }

.hellgrau { background-color:#F3F3F3; }
.grau { background-color:lightgray; }

.dominants { color:crimson; }
.dim7chords  { color:darkred; }
.IVsharp-7b5  { color:darkorange; }
.majorkey { color:green; }
.minorkey  { color:navy; }
.otherchords  { color:darkorange; }

#svg-verlinkung { position: fixed; z-index: 0; }