h1 { font-size: 2em; margin: 0.67em 0; color:#499; }
h2 { font-size: 1.5em; margin: 0.83em 0; color:#499; }
h3 { font-size: 1.17em; margin: 1em 0; color:#499; }
p,pre { margin: 1em 0; }
table {
  display: table !important;
  margin: 0 !important;
  padding: 0 !important;
}

table {
border-collapse: collapse;
border-spacing: 0;
}
td,th {
padding: 0;
}


#ecardtop { float:left; vertical-align: middle; }

#topimg { display:inline; vertical-align: middle; }
#topimg2 { display:inline; float:right; margin: 0.5em 0.1em 0 0; vertical-align: middle; width: 90% }

#main {
	border: 1px solid #666;
	background: #fff;
	clear: both;
	padding-top: 0.5em;
	margin: 0 2.0em 2.0em 2.0em;
/*	z-index: 100; */
}

#main li { margin-left:2em; }

#contents {
	padding: 0.5em;
	min-height: 300px;
/*	z-index:100; */
}

#header { font-size: 2em; color: #fff; background: #000; }
#header p { margin: 0.25em; }

#like {float:right; margin: 0 0 0 0; }

.adcontainer { width: 100%; text-align:center; padding: 0.25em 0.25em 0.25em 0.25em; }
.adcontainer2 { width: 95%; }


.fretpanel {
  float: left;
  -moz-border-radius: 1.5em;
  border-radius: 1.5em;
  background: #eee;
  padding: 0.7em 0.7em 0.7em 0.7em;
  font-weight: bold;
 
}

.tesstable {  border-collapse: collapse; border-spacing: 0; padding:0; margin:0; border:0; }
.tessgrid {  float: left; padding:0; margin:0; }
#svgwork { visibility: hidden; }

.frettitle { font-weight: bold; color: #222; margin: 1em 0 1em 1em; }

.fretboard {  display:table; border-collapse: collapse; border-spacing: 0; }
.fretboard tr { height: 1.8em; }
.fretboard td { width: 3em; background: url("../images/fret.png") no-repeat; background-size: 15em 1.8em; border-left: 2px solid #000 }

.fretnote {
  -moz-border-radius: 0.2em;
  border-radius: 0.2em;
}
.fretnote { width: 1.5em; height: 1.5em; background: #ccc; float: right; margin-left:0; margin-right: 0.3em; color:#fff; text-align:center; }
.fretnote a { text-decoration: none; color:#fff; font-size: 1.2em; }

.fretnos td { color: #000; text-align: right; background: #eee; border:0; }
td.strid { width: 5em; color: #000; background: #eee; border:0; text-align:center; padding-right: 0.5em; }


.fretpanelv {
  -moz-border-radius: 1.5em;
  border-radius: 1.5em;
  background: #eee;
  padding: 0.7em 0.7em 0.7em 0.7em;
  font-weight: bold;
}

.fretboardv { border-collapse: collapse; border-spacing: 0; float: left; }
.fretboardv tr { height: 2.5em; }
.fretboardv td { vertical-align: bottom; text-align: middle; width: 1.8em; background: url("../images/fretv.png") no-repeat; background-size: 2em 3.5em; border-top: 2px solid #000 }

.fretnotev {
  -moz-border-radius: 0.2em;
  border-radius: 0.2em;
}
.fretnotev { width: 1.5em; height: 1.5em; background: #888; margin-left: auto; margin-right: auto; margin-bottom: 0.1em; color:#fff; text-align:center;}
.fretnotev a { text-decoration: none; color:#fff; font-size: 1.2em;  }

td.fretnosv { color: #000; text-align:center; background: #eee; border: 0; }
td.stridv { color: #000; background: #eee; border: 0; padding-left:5%; }

.fretbuttonsv { float: left; width:10em; padding-top:1em;}

table.tablea { border: 1px solid #000; }
table.tablea td { border: 1px solid #000; text-align: middle; padding: 0.1em 0.4em 0.1em 0.4em; }

#social a { background:none no-repeat left center }

table.modes { }

table.modes td { text-align:center; padding:0.5em 0 0.5em 0; border: #000 solid 1px; width: 2em; font-weight: bold;}
.ionian { color: #C00; }
.mnote { background: #0f0; }

table.modenotes td { padding: 0.5em 0.4em 0.5em 0.4em; border: #000 solid 1px; width: 8.0em; font-weight: bold;}

.c5table td { padding: 0.5em 0.5em 0.5em 0.5em;  border: #000 solid 1px; width: 2em; font-weight: bold;}
.c5table .hi { background: #0f0; }

.c5 { position: relative; height:23em; width:23em; padding: 1.5em; }
.c5in { height: 20em; width: 20em; background: url("../images/circle.png") no-repeat; background-size: 20em 20em; }
.c5 span { font-size: 0.9em; }
.c5o-0 { position: absolute; height: 1.5em; width: 1.5em; top: 0.5em; left: 11em; font-weight: bold; }
.c5o-1 { position: absolute; height: 1.5em; width: 1.5em; top: 2em; left: 16.5em; font-weight: bold; }
.c5o-2 { position: absolute; height: 1.5em; width: 1.5em; top: 6em; left: 20.5em; font-weight: bold; }
.c5o-3 { position: absolute; height: 1.5em; width: 1.5em; top: 11em; left: 21.5em; font-weight: bold; }
.c5o-4 { position: absolute; height: 1.5em; width: 1.5em; top: 16em; left: 20.5em; font-weight: bold; }
.c5o-5 { position: absolute; height: 1.5em; width: 1.5em; top: 19.5em; left: 16.5em; font-weight: bold; }
.c5o-6 { position: absolute; height: 1.5em; width: 1.5em; top: 21.0em; left: 10.5em; font-weight: bold; }
.c5o-7 { position: absolute; height: 1.5em; width: 1.5em; top: 19.5em; left: 6em; font-weight: bold; }
.c5o-8 { position: absolute; height: 1.5em; width: 1.5em; top: 16em; left: 2.0em; font-weight: bold; }
.c5o-9 { position: absolute; height: 1.5em; width: 1.5em; top: 11em; left: 0.5em; font-weight: bold; }
.c5o-10 { position: absolute; height: 1.5em; width: 1.5em; top: 6em; left: 1.5em; font-weight: bold; }
.c5o-11 { position: absolute; height: 1.5em; width: 1.5em; top: 2em; left: 6em; font-weight: bold; }

.c5i-0 { position: absolute; height: 1.5em; width: 1.5em; top: 2.5em; left: 11em; font-weight: bold; }
.c5i-1 { position: absolute; height: 1.5em; width: 1.5em; top: 3.5em; left: 15.0em; font-weight: bold; }
.c5i-2 { position: absolute; height: 1.5em; width: 1.5em; top: 6.5em; left: 18em; font-weight: bold; }
.c5i-3 { position: absolute; height: 1.5em; width: 1.5em; top: 11em; left: 19em; font-weight: bold; }
.c5i-4 { position: absolute; height: 1.5em; width: 1.5em; top: 15em; left: 18em; font-weight: bold; }
.c5i-5 { position: absolute; height: 1.5em; width: 1.5em; top: 17.5em; left: 15em; font-weight: bold; }
.c5i-6 { position: absolute; height: 1.5em; width: 1.5em; top: 18.5em; left: 10.5em; font-weight: bold; }
.c5i-7 { position: absolute; height: 1.5em; width: 1.5em; top: 17.5em; left: 7.5em; font-weight: bold; }
.c5i-8 { position: absolute; height: 1.5em; width: 1.5em; top: 15em; left: 4.5em; font-weight: bold; }
.c5i-9 { position: absolute; height: 1.5em; width: 1.5em; top: 11em; left: 3.0em; font-weight: bold; }
.c5i-10 { position: absolute; height: 1.5em; width: 1.5em; top: 6.5em; left: 4.5em; font-weight: bold; }
.c5i-11 { position: absolute; height: 1.5em; width: 1.5em; top: 4em; left: 7.5em; font-weight: bold; }

#copyright { text-align: middle; font-size: 0.9em; }

/* needed for sharethis */

.stButton .stButton_gradient {
height: 24px !important;
}

.stButton .stFb, .stButton .stTwbutton, .stButton .stMainServices {
height: 24px !important;
}