BODY{MARGIN-LEFT: 0px;MARGIN-RIGHT: 0px;MARGIN-TOP: -1px;MARGIN-BOTTOM: -1px;BACKGROUND-COLOR: #A9A9A9;FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Verdana, Sans-Serif;}
TABLE.XSP_OUTLINE{HEIGHT: 100%;WIDTH: 1000px;}
TD.XSP_HEADER_PANEL{BACKGROUND-COLOR: #A9A9A9; BACKGROUND-IMAGE: none; WIDTH: 1000px;HEIGHT: 0px; PADDING: 0px;FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Verdana, Sans-Serif;VERTICAL-ALIGN: top;}
TD.XSP_HEADER_PANEL TABLE{FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Verdana, Sans-Serif;}
TD.XSP_LEFT_PANEL_SPC{VERTICAL-ALIGN: top;TEXT-ALIGN: left;WIDTH: 160px; BACKGROUND-COLOR: #FAFAD2;PADDING: 10px;}
TD.XSP_LEFT_PANEL, TD.XSP_LEFT_PANEL_2{VERTICAL-ALIGN: top;TEXT-ALIGN: left;HEIGHT: 1px; WIDTH: 160px; BACKGROUND-COLOR: #FAFAD2;PADDING: 0px;}
TD.XSP_LEFT_PANEL_2{background-position: bottom left;}
DIV.XSP_LEFT_PANEL{VERTICAL-ALIGN: top;TEXT-ALIGN: left;WIDTH: 100%; FONT-SIZE: 10pt; COLOR: #2A0000; FONT-FAMILY: Verdana, Sans-Serif; PADDING: 0px;}
DIV.XSP_LEFT_PANEL table{FONT-SIZE: 10pt; COLOR: #2A0000; FONT-FAMILY: Verdana, Sans-Serif;}
TD.XSP_CENTER_PANEL{VERTICAL-ALIGN: top;WIDTH: 800; BACKGROUND-COLOR: #FFFFFF;BACKGROUND-IMAGE: url('images/main.gif'); BACKGROUND-REPEAT: repeat}
TABLE.XSP_CENTER_PANEL{HEIGHT: 100%;WIDTH: 100%;}

TD.XSP_MAIN_PANEL{VERTICAL-ALIGN: top;TEXT-ALIGN: left;WIDTH: 100%;FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Verdana, Sans-Serif;PADDING: 20px;}
TD.XSP_MAIN_PANEL TABLE{FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Verdana, Sans-Serif;}
TD.XSP_MAIN_PANEL_FOOTER{VERTICAL-ALIGN: top;TEXT-ALIGN: left;HEIGHT: 20px; BACKGROUND-COLOR: #FFFFFF; WIDTH: 100%; BACKGROUND-IMAGE: url('images/main.gif'); FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Verdana, Sans-Serif;PADDING: 5px 5px;}
TD.XSP_MAIN_PANEL_FOOTER TABLE{FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Verdana, Sans-Serif;}
TD.XSP_MAIN_PANEL_HEADER{VERTICAL-ALIGN: top;TEXT-ALIGN: left;HEIGHT: -1px; BACKGROUND-COLOR: transparent; WIDTH: 100%; FONT-SIZE: ; COLOR: transparent; FONT-FAMILY: ;PADDING: -1px -1px;}
TD.XSP_MAIN_PANEL_HEADER TABLE{FONT-SIZE: ; COLOR: transparent; FONT-FAMILY: ;}
TD.XSP_INFO_BAR{VERTICAL-ALIGN: top;HEIGHT: -1px; BACKGROUND-COLOR: transparent;FONT-SIZE: ; COLOR: transparent; FONT-FAMILY: ;PADDING: -1px;}
TD.XSP_INFO_BAR TABLE{FONT-SIZE: ; COLOR: transparent; FONT-FAMILY: ;}
TD.XSP_RIGHT_PANEL_SPC{VERTICAL-ALIGN: top;TEXT-ALIGN: left;WIDTH: 0px; BACKGROUND-COLOR: #B0E0E6;PADDING: 0px;BACKGROUND-IMAGE: url('images/left.gif'); BACKGROUND-REPEAT: repeat}
TD.XSP_RIGHT_PANEL{VERTICAL-ALIGN: top;TEXT-ALIGN: left;HEIGHT: 1px; WIDTH: 0px; BACKGROUND-COLOR: #B0E0E6;PADDING: 0px;BACKGROUND-IMAGE: url('images/left.gif'); BACKGROUND-REPEAT: repeat}
DIV.XSP_RIGHT_PANEL{VERTICAL-ALIGN: top;TEXT-ALIGN: left;WIDTH: 100%; FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Verdana, Sans-Serif; PADDING: 0px;}
DIV.XSP_RIGHT_PANEL TABLE{FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Verdana, Sans-Serif;}
TD.XSP_FOOTER_PANEL{VERTICAL-ALIGN: top;TEXT-ALIGN: left;HEIGHT: 50px; WIDTH: 1000px; FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Verdana, Sans-Serif; PADDING: 10px;BACKGROUND-COLOR: #A9A9A9;}

TD.XSP_FOOTER_PANEL TABLE{FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Verdana, Sans-Serif; }

TD.NAVBAR_LEFT { font-size: 10pt; color: #2A0000; font-family: verdana; font-weight: normal; text-decoration: none; }
A.NAVBAR_LEFT { font-size: 10pt; color: #2A0000; font-family: Verdana, Sans-Serif; font-weight: bold; text-decoration: none; }
A.NAVBAR_LEFT:visited { color:#2A0000; }
A.NAVBAR_LEFT:hover { color:#2A0000 }
DIV.BREADCRUMB { font-size: 10pt; color: #000000; font-family: Verdana, Sans-Serif; font-weight: normal; text-decoration: none; }
A.BREADCRUMB { font-size: 10pt; color: #000000; font-family: Verdana, Sans-Serif; font-weight: normal; text-decoration: underline; }
A.BREADCRUMB:visited { color:#000000; }
A.BREADCRUMB:hover { color:#000000 }

.borderf365d003-3a0d-4c5a-945b-864105e38edb { background-color: White; width: 200px; border: solid 1px Black}
.cell1f365d003-3a0d-4c5a-945b-864105e38edb { padding: 0px 5px 5px 5px; width:100% }
.cell2f365d003-3a0d-4c5a-945b-864105e38edb { padding: 0px 5px 5px 0px}
.labelf365d003-3a0d-4c5a-945b-864105e38edb{FONT-WEIGHT:bold; FONT-SIZE: 12pt; COLOR: Black; FONT-STYLE: normal; FONT-FAMILY: Verdana; TEXT-DECORATION: none; TEXT-ALIGN: Left; }

.inputf365d003-3a0d-4c5a-945b-864105e38edb { border: solid 1px Black; width:100% }
.buttonf365d003-3a0d-4c5a-945b-864105e38edb { background-color: Silver; border: solid 1px Black; color: Black; font-family: Arial; font-size: 12pt; font-weight: normal; font-style: normal; text-decoration: none }
.headf365d003-3a0d-4c5a-945b-864105e38edb{FONT-WEIGHT:bold; FONT-SIZE: 12pt; COLOR: Black; FONT-STYLE: normal; FONT-FAMILY: Verdana; TEXT-DECORATION: none; TEXT-ALIGN: left; }
div.resultf365d003-3a0d-4c5a-945b-864105e38edb { margin-top:10px; }
div.resultspagef365d003-3a0d-4c5a-945b-864105e38edb { overflow:hidden; }
.resultf365d003-3a0d-4c5a-945b-864105e38edb{FONT-WEIGHT:bold; FONT-SIZE: 12pt; COLOR: Blue; FONT-STYLE: normal; FONT-FAMILY: Verdana; TEXT-DECORATION: none; TEXT-ALIGN: left; }
.resultf365d003-3a0d-4c5a-945b-864105e38edb:hover{FONT-WEIGHT:bold; FONT-SIZE: 12pt; COLOR: Green; FONT-STYLE: normal; FONT-FAMILY: Verdana; TEXT-DECORATION: none; TEXT-ALIGN: left; }
.descf365d003-3a0d-4c5a-945b-864105e38edb{FONT-WEIGHT:normal; FONT-SIZE: 10pt; COLOR: Black; FONT-STYLE: normal; FONT-FAMILY: Verdana; TEXT-DECORATION: none; TEXT-ALIGN: left; }
.urlf365d003-3a0d-4c5a-945b-864105e38edb{FONT-WEIGHT:normal; FONT-SIZE: 9pt; COLOR: Green; FONT-STYLE: normal; FONT-FAMILY: Verdana; TEXT-DECORATION: none; TEXT-ALIGN: left; MARGIN-BOTTOM: 0px}
.pagef365d003-3a0d-4c5a-945b-864105e38edb{FONT-WEIGHT:normal; FONT-SIZE: 10pt; COLOR: Black; FONT-STYLE: normal; FONT-FAMILY: Verdana; TEXT-DECORATION: none; TEXT-ALIGN: left; }
.pagef365d003-3a0d-4c5a-945b-864105e38edb a{FONT-WEIGHT:normal; FONT-SIZE: 10pt; COLOR: Green; FONT-STYLE: normal; FONT-FAMILY: Verdana; TEXT-DECORATION: none; TEXT-ALIGN: left; }
.pagef365d003-3a0d-4c5a-945b-864105e38edb a:hover{FONT-WEIGHT:normal; FONT-SIZE: 10pt; COLOR: Red; FONT-STYLE: normal; FONT-FAMILY: Verdana; TEXT-DECORATION: none; TEXT-ALIGN: left; }

a.class1:link {font-family:Verdana; font-size:10pt;color:blue;text-decoration:underline;}
a.class1:visited {font-family:Verdana; font-size:10pt;color:blue;text-decoration:underline;}
a.class1:hover {font-family:Verdana; font-size:10pt;color:blue;text-decoration:underline;}
li.class1 {display:list-item; color:black; margin-bottom:5}
div.class1 {font-family:Verdana; font-size:10pt;color:Black;text-decoration:none;}

/* 
 *
 */

.fretboard {
  margin: 5px 2px;
  display: block;
  float: left;
  width: 792px;
}

#svg {
  width: 792px;
  height: 400px;

  margin: 0;
  padding: 0;
  color:#FF6000;
  background:white;
  border:1px solid #ececec;
}

#fretboard_input {
  margin: 5px;
  background: white;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding: 5px 0 5px 0;
}

table.fb {
  margin: 5px auto 5px auto; 
}

th.fb {
	font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	/* color: #4f6b72; */
	color: #000000;
	border: 1px solid #C1DAD7;
	letter-spacing: 2px;
	text-align: center;
	padding: 3px;
	background: #FAFAD2;;
}

td.fb {
	border: 1px solid #C1DAD7;
	background: #fff;
	padding: 3px;
	/* color: #4f6b72; */
        color: #000;
}

