.body    { margin-left: 2em; margin-right: 2em; }
#main { text-align: center;  }
#list a:link, #list a:visited, #list a:active { font-weight: bold; color: white; text-decoration: none;  }
#list a:hover { text-decoration: underline; }
.clearing { clear: both; }
#list ul { margin-left: auto; margin-right: auto; }
#list ul { padding: 0; list-style-type: none; width: 37.5em; }
#list li {
  display: block;
  float:left;
  padding: 1em;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  background: transparent url('images/bg-links.gif') no-repeat top right;
  margin: 0;
  border-top: 2px black solid;
  border-bottom: 2px black solid;
}
.left { border-left: 2px black solid; }
.right { border-right: 2px black solid; }

#diagram { text-align: left; margin: 0; }
#tab { margin-left: 0.75em; font-size: 1.5em; font-family: courier; }
#strings { float: left; }
#help { line-height: 2em; margin-top: 3em; margin-left: 11em; }
#nutlight { margin-top: 12px; }
#nut {  margin-top: 12px; }

#nut img, #nutlight img { border-color: transparent; }

#nut ul, #nutlight ul { background: white url('images/bg-nut.gif') no-repeat right;
list-style-type: none; margin: 0; padding: 0 5px 0 1em; float: left;  }
#nutlight ul { background: white url('images/bg-nut-light.gif') no-repeat right; }
#nut li, #nutlight li { line-height: 15px; height: 19px; padding-bottom: 0; padding-right: 3px;; }
#nut img, #nutlight img { margin: 0; vertical-align: bottom; height: 15px; width: 15px;  }
.top img { border-top: 3px solid;}
#fretboard { margin-left: 1.65em; padding-left: 0; }

#fretnumbers { margin-left: 1em;  }
#fretnumbers { list-style-type: none; margin: 0; padding: 0; }
#fretnumbers li { display: block; float: left; text-align: center; color: red; font-weight: bold; font-size: 1.2em; }

.fretbg {
  background: transparent url('images/bg.gif') no-repeat top right;
  height: 114px;
  width: 100px;
  list-style-type: none;
  float: left;
  margin: 0;
}

#fret5, #fret7, #fret9, #fret15{ background: transparent url('images/bg-singledot.gif') no-repeat top right; }
#fret12{ background: transparent url('images/bg-doubledot.gif') no-repeat top right; }

#fretno1, #fretno2, #fretno3, #fret1, #fret2, #fret3       { width: 100px; }
#fretno4, #fretno5, #fretno6, #fret4, #fret5, #fret6       { width: 90px; }
#fretno7, #fret7                                           { width: 80px; }
#fretno8, #fretno9, #fretno10, #fret8, #fret9, #fret10     { width: 70px; }
#fretno11, #fret12, #fret11, #fret12                       { width: 50px; }
#fretno13, #fretno14, #fretno15, #fret13, #fret14, #fret15 { width: 40px; }

.fretbglight { background: transparent url('images/bg-light.gif') no-repeat top right; 
 height: 114px;
  width: 100px;
  list-style-type: none;
  float: left;
  margin: 0;

}
#fret5.fretbglight, #fret7.fretbglight, #fret9.fretbglight, #fret15.fretbglight {
  background: white url('images/bg-singledot-light.gif') no-repeat top right; }
#fret12.fretbglight { background: white url('images/bg-doubledot-light.gif') no-repeat top right; }

.fingers { padding: 0; float: right; }
.fingers { list-style-type: none; }
.fingers li { padding: 2px 0px 6px 5px; height: 10px; width: 10px;  }
.fingers .on, .fingers .topon, .fingers .laston { list-style-image: url('images/finger.gif'); }
.fingers li#last { padding-top: 2px;  }
.fingers img { height: 20px; padding-right: 10px; }
.bar  { background: transparent url('images/bar.gif') repeat-y bottom center; margin-right: 15px;}
.lastbar { background: transparent url('images/bar_bottom.gif') no-repeat bottom center;}
.topbar { background: transparent url('images/bar_top.gif') no-repeat top center;}


#head { background: #a0bff8 url('http://helios-sites.com/images/guitar-logo-bg.png') no-repeat top center; height: 92px; }