@charset "utf-8";
/* CSS Document */

.paragraph{
	position:absolute;
	float: left;
	top: 15%;
	width: 46%;
	height: auto;
	/*border: 1px dotted green;*/
	text-align:left;
	padding: 10px;
	line-height:2;
}
.intro{
	position:absolute;
	float: left;
	left:0px;
	width: 48%;
	height: 10%;
	/*border: 1px dotted green;*/
	text-align:left;
}
.matchItem
{
	background-color:#d1e4f6;	
	border-radius: 5px;
	max-width:300px;
	margin-bottom:5px;
	min-height:2em;
	padding:5px;
}
.matchItemOver
{
    background-color: #bad9f6;
}

.matchDragtile
{
	background-color:Gray;
	border-radius: 5px;
	min-height:2em;
	width:2em;
	margin-bottom:5px;
	padding:5px;	
}
.dropfield{
	position:absolute;
	float: right;
	width: 20%;
	height:100%;
	border-radius:20px;
	background-color:#d1e4f6;
	text-align:center;
	padding: 10px;
	line-height:2;
	z-index:-1;
}

#dropfield1{
	right:25.5%;
}
#dropfield2{
	right: 0px;
}
.subject{
	width:100%;
	font-weight:bold;
}


.dropElements{
	float: left;
	width: 75%;
	height: 300px;
	/*border: 1px dotted blue;*/
}
.audio{
	 width:50px;
	 position:absolute;
	 float:left;
	 left: 0px;
	 top: 310px;
	 display:none;
}
.sfx{
	 width:50px;
	 position:absolute;
	 float:left;
	 left: 0px;
	 top: 310px;
	 display:none;
}
.audioBtn
{
    width:15px;
    height:12px;
    padding-right: 5px;
    background-repeat:no-repeat;
    cursor: pointer;

}
.feedbackAudioBtn{
	display:inline-block;
    background-image: url(../images/audio-playing.gif);
}
.feedbackAudioStopped{
    background-image: url(../images/audio-stopped.gif);
}
.hintAudioBtn{
	position:absolute;
	/*visibility:hidden;*/
	float:left;
	left:15px;
    top:15px;
    background-image: url(../images/audio2-playing.gif);
}

.scrim{
	position:absolute;
    z-index:1000;
    width:860px;
    height:520px;
    top: 50%;
    left: 50%;
    margin-top: -290px;
    margin-left: -430px;

    display:none;
	background-color:#fff;
	opacity: .4;
}
.feedback{
	z-index:1001;
	position:absolute;
	left:0px;
	right:0px;
	top:80px;
	margin-left: auto !important;
	margin-right: auto !important;
	display: none;
	height: auto;
}
.tryagain{
	display:inline-block;
    margin-top: 30px;
	width: 200px;
	float:bottom;
	bottom: 10px;
	cursor:pointer;
}

.draggable{
	margin-bottom:8px;
	float: right;
	right: 0;
	color: #3c3e48;
	text-align: center;
	width: 150px;
	padding: 10px;
	background-color:#e6e6e6;
	border:1px solid #c5c6cb;
	border-radius: 10px;
	cursor:pointer;	
	z-index: 500;
	font-weight:bolder;
	-moz-box-shadow: 3px 3px 3px #999;
 	-webkit-box-shadow: 3px 3px 3px #999;
 	box-shadow: 3px 3px 3px #999;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999');
}

.hintBtn {
                float: right;
                /*margin-left:10px !important;
                margin-top: 33px !important;*/
                cursor: pointer;
                position: relative;
                top: 40px;
                right: 60px;
}
.checkBtn {
                float: right;
               /* margin-left:10px !important;
                margin-top: 33px !important;*/
                cursor: pointer;
                position: relative;
                top:40px;
                right: 10px;
}
.showBtn {
                float: right;
               /* margin-left:10px !important;
                margin-top: 33px !important;*/
                cursor: pointer;
                position: relative;
                top:40px;
                right: 100px;
}



div.checkBtn:hover, div.hintBtn:hover{
	color: #666;
	background-color: #dadbdf;
}