body{
	width:100%;
	margin:0px;
	padding:0px;
	font-family: Roboto;
}
body h1{
	font-family:Lobster;
	color:#F2BA00;
}

body h2{
	font-family:Lobster;
	color:#6592D2;
}

body h3{
	font-family:Lobster;
}
#heading{
	height:100px;
}

.audio_indicatii{
	height:30px;
}
	
.audio1{
	height:60px;
	width:150px;
}
	
.audio2{
	height:30px;
	width:100px;
}
	
	/*butoane*/
.buton_resetare{
	border-radius:12px;
	border: 3px double #D56037;
	font-size: 16px;
	margin: 4px 2px;
	padding: 16px 32px;
	cursor: pointer;
}
.buton_nou{
	border-radius:12px;
	border: 3px double #4CAF50;
	font-size: 16px;
	margin: 4px 2px;
	padding: 16px 32px;
	cursor: pointer;
}
	
#dragScriptContainer{	/* BIG DIV containing HTML needed for the entire script */
		width:620px;
		margin:0 auto;
		//border:1px dashed lightgray;
		border-radius: 6px;
		height:420px; //pentru 3 perechi
		margin-top:20px;
		padding:3px;
		-moz-user-select:no;
}
	
#questionDiv{	/* Big div for all the questions */
		float:left;
		height:350px; /*pentru 3 perechi*/
		width:350px;
		border:3px double lightgrey;
		border-radius: 6px;
		padding:2px;
}
#answerDiv{	/* Big div for all the answers */
		float:right;
		height:350px; /*pentru 3 perechi*/
		width:250px;
		border:3px double lightgrey;
		border-radius: 6px;
		padding:2px;
		text-align:center;
}
	
#questionDiv div{	/* General rules for specific questions */
		width:100px;
		height:80px;
		/*padding:2px;*/
		line-height:70px;	
		float:left;
		margin-right:2px;
		margin-bottom:2px;
		text-align:center;
		border-radius: 6px;
}

#answerDiv div{	/* General rules for specific answers */
		width:200px;
		height:80px;
		/*padding:2px;*/
		line-height:70px;		
		float:right;
		margin-right:25px;
		margin-bottom:2px;
		text-align:center;
		border-radius: 6px;
		/*background-color:#f9fcf2;*/
}

#dragContent div{	/* General rules for small divs - i.e. specific questions and answers */
		width:200px;
		height:80px;
		/*padding:2px;*/
		line-height:70px;		
		float:left;
		margin-right:2px;
		margin-bottom:2px;
		text-align:center;
		border-radius: 6px;
}
	
#dragContent div{	/* Drag content div - i.e. specific answers when they are beeing dragged */
		border:1px solid #000;
}
	
#answerDiv .dragDropSmallBox{	/* Small answer divs */
		border:1px solid purple;
		cursor:pointer;
}
	
#questionDiv .dragDropSmallBox{	/* Small answer divs */
		/*border:1px solid red;
		cursor:pointer;
		background-color:#E2EBED;*/
}
	
#questionDiv div div{	/* DIV after it has been dragged from right to left box */
		margin:0px;
		border:0px;
		padding:0px;
		background-color:#FFF;
		width:200px;
}
#questionDiv .destinationBox{	/* Small empty boxes where answers could be dragged */
		border:2px dotted lightgray;
		background-color:#f9fcf2;
		width:200px;
		height:80px;
		float:right;
		margin-right:10px;	
}
#questionDiv .correctAnswer{	/* CSS indicating correct answer */
		background-color:green;
		color:#fff;
		border:3px solid green;
}
#questionDiv .wrongAnswer{	/* CSS indicating wrong answer */
		background-color:red;
		color:#fff;
		border:2px solid red;
}

#dragContent div{
		background-color:#FFF;
}

#questionDiv .dragContentOver{	/* Mouse over question boxes - i.e. indicating where dragged element will be appended if mouse button is relased */
		border:2px solid blue;
		width:200px;
		height:80px;
}		
	
#answerDiv.dragContentOver{	/* Mouse over answer box - i.e. indicating where dragged element will be appended if mouse button is relased */
		border:1px solid blue;
		width:200px;
}
	
	/* NEVER CHANGE THIS */
#dragContent{
		position:absolute;
		display:none;
}