/*
http://www.positioniseverything.net/easyclearing.html
*/
.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.selected {
  background: #EED;
}
.blank {
  background: #CCC;
  cursor: default;
}
body {
  background: #CCC;
}
h3 {
  margin: 20px;
}
div {
  margin: 0 20px;
}
p {
  font: italic 14px "Trebuchet MS";
  margin: 10px 20px 0;
}
div#chordQuiz,
div#chordBuilder,
div#keySignaturesQuiz {
  background: #FFF;
  border: 1px solid #AAA;
  margin: 20px auto;
  width: 80%;
}
#chordMenu {
  margin: 10px;
}
#chordMenu label {
  margin: 10px;
}
#currentChordContainer {
  margin: 10px 0;
  position: relative;
}
#currentChord,
#currentKeySignature {
  background: #EED;
  border: 2px solid #CCC;
  color: blue;
  font-weight: bold;
  padding: 10px;
  text-align: center;
  width: 285px;
}
#currentKeySignature {
  width: 455px;
}
.skipChord {
  position: absolute;
  top: 10px;
  left: 340px;
}
#notes {
  width: 365px;
}
#keySignatures {
  width: 425px;
}
a:link,
a:visited,
a:hover,
a:active {
  border: 1px solid #CCC;
  color: #000;
  float: left;
  height: 40px;
  margin: 5px;
  text-align: center;
  text-decoration: none;
  width: 40px;
}
a:hover {
  background: #EDD;
}
#chords a {
  width: 130px;
}
#inversions a {
  width: 130px;
}
span { /*make the <span>s completely fill their parent <a>s*/
  display: block;
  padding: 10px 0;
}
#currentChord span,
#currentKeySignature span {
  display: inline;
  margin: 0 20px;
}
/******************
drag n drop stuff
******************/
.dragging {
  border: 1px dashed #000 !important;
  display: none;
  margin: 0;
  opacity: .5;
  position: absolute;
}
.overDropZone {
  background: #ADD8E6 !important;
  border: 1px solid #000 !important;
  font-weight: bold;
}
#dropZoneContainer div {
  border: 1px solid #000;
  float: left;
  height: 40px;
  margin: 10px;
  width: 40px;
}