html {
    font-family:Arial,Helvetica,sans-serif;
    font-size:0.9em;
    background-color:inherit;
}

.ui-droppable {
	position:relative;
	wwwidth: 55px;
	height: 1.2em;
    display:inline-block;
    background-color:white;
    vertical-align: top;
    border:2px #aCd0eF solid;
    margin-top:-2px;
    min-width:3em;
}
.droppable {
    -moz-box-shadow: inset 2px 2px 5px #777;
    -webkit-box-shadow: inset 2px 2px 5px #777;
    box-shadow: inset 2px 2px 5px #777;
}
/*  lock height to prevent screen jump on 4 choices gone  */
.choices {
	height:35px;
	padding-top: 10px;
}
.choices a {
	margin:5px;
	border:2px solid #ccc;
}
.choices a.selected {
	border:2px solid green;
}

.targets {
	position:relative;
}
.targets .text-area {
    padding-top:0.3em;
    padding-bottom:0em;
    line-height:1.2em;
}
.targets div span.selected {
	border:2px solid red;
   wwwwidth:97px;
    dddisplay:inline-block;
    hhheight:1.2em;
}
.targets span a {
	min-width:3em;
    display:inline-block;
    hhhheight:1em;
}
.targets span a {
}

.targets span a span {
    background-color:white;
}
.targets span a.choice span {
    background-color:transparent;
}
/*this is so we know which draggable item is about to get switched in by keyboard accessibility  */
/*same class for a draggable item which is currently being dragged */
#content .choice.ui-draggable-dragging,
#content.targeting .choices .choice:first-child {
    border:2px solid green;
    background-color:white;
}
.choice {
    wwwwwwwwwwwwidth: 55px;
    height: 1em;
    border:2px solid #e2dcdc;
    border-radius:5px;
    font-family:Arial,Helvetica,sans-serif;
    display: block;
    float:left;
    text-align: center;
    padding: 0 2px 4px 2px;
    text-decoration: none;
    cursor:move;
    font-size:1em !important;
    background-color:white;

    -moz-box-shadow:  2px 2px 5px #777;
    -webkit-box-shadow:  2px 2px 5px #777;
    box-shadow: 2px 2px 5px #777;
}
.targets .choice {
    border-width:0;
    padding-top:0;
    padding-bottom:0;
    -moz-box-shadow:  none;
    -webkit-box-shadow:  none;
    box-shadow: none;
    border-radius:0;
    height:auto;
}
.targets a.answered {
    min-width:3em;
    text-align: center;
    -moz-box-shadow:  none;
    -webkit-box-shadow:  none;
    box-shadow: none;
    border-radius:0;
    padding:0 2px;
}
.targets a.answered span {
    height:auto;
    background-color:transparent;
}

/* match OU button styling */
.buttons {
	margin: 1.25em 5px 0.5em 0;
	display:block;
	height:3em;
}  

.buttons input {
	
	background-color: #FFFFFF;
	background-position: left bottom;
	background-repeat: repeat-x;
	border: 1px solid #C6C6C5;
	border-radius: 3px;
	color: #1F536B;
	
	background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
	margin: 2px;
	padding: 4px;
	position: relative;
	text-decoration: none;
	vertical-align: top;
	
	cursor:pointer;
	

  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;

}

.buttons input[disabled="disabled"] {

	color: #999999;
	cursor:default;
}

.feedback-area {
	clear:both;
}
/* page specific tweaks */
body.interval-pitch-chord #text-area-4 {
    float:left;
}
body.interval-pitch-chord #text-area-5 {
    padding-left:0.3em;
    display:inline-block;
}

/* Get text to display in a row. */
div.text-area {
	display: inline-block;
}

div#text-area-1, div#text-area-2, div#text-area-3 {
	padding-left: 3px;
}

div.targets {
	padding-left: 5px;
}

div#button_2, div#button_3  {
	display: none;
}

