* {
    margin : 0;
    padding : 0;
}

.titre {
	border:1px solid #8181F7;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 20px;
    padding-bottom: 20px;	
    color: #1e1e1e;
    background-color: #E0E0F8;
    font-family: 'Gabriela', serif;
    font-size: 14px;
    letter-spacing: .10em;
    text-align: center;
    text-shadow: 10px 5px 5px #767676;
}
.enonce {
	margin-left: 10px;

    margin-top: 0;
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;	
    color: #1e1e1e;
    font-family: 'Gabriela', serif;
    font-size: 12px;
    letter-spacing: .10em;

}
.bloc {
	width: 100%;
	height: 100%;
	background: #FFFFFF;

}
#tableau {
  height: 500px;
  width:520px;
margin:0;
padding:0;
}
#materiel {
  height: 400px;
  width:300px;
}
#etiquette {
  height: 400px;
  width:300px;
}
#rangee1 {
	margin-left:5px;
	margin-top:10px;

}

#rangee2 {
	margin-left:5px;
	margin-top:10px;

}
#etiquette1 {
	margin-left:5px;
}
#etiquette2 {
	margin-left:5px;
}
#rail {
	margin-top:60px;
	position:absolute;z-index:1;
}
#rail1 {

	margin-top:90px;
	position:absolute;z-index:1;
}
#ID1 {
    width: 59px;
    height: 120px;
	padding: 10px;
	display: inline-block;
	z-index:2;

}
#ID2 {

	margin-top:60px;
    width: 59px;
    height: 120px;
	padding: 10px;
	display: inline-block;
	z-index:2;

}
#D1, #D2, #D3, #D4, #D5, #D6 {
	display: inline-block;
	padding: 10px;
    width: 28px;
    height: 120px;
	z-index:2;

}
#ec1, #ec2, #pc1, #pc2, #pc3, #pc4, #pc5, #vmc, #ll, #pc {
	display: inline-block;
	padding: 10px;
    width: 28px;
    height: 28px;
	z-index:2;

}
#ed1, #ed2 {
	display: inline-block;
	padding: 10px;
    width: 59px;
    height: 28px;
	z-index:2;

}
#D7, #D8, #D9, #D10 {
	margin-top:60px;
	display: inline-block;
	padding: 10px;
    width: 28px;
    height: 120px;
	z-index:2;

}
.tableau {
  background-color: #AAA;
margin:0;
padding:0;	
}
.rangee {
	margin-top: 30px;

}
	


.materiel {
	margin-left: 10px;
	margin-right: 10px;
	
}
.dropzone {
  background-color: #AAA;
  border: dashed 2px transparent;
  margin-top: 30px;
  padding: 10px;
  width: 100%;
  transition: background-color 0.3s, border-color 0.3s;
}

.drop_etiquette {
  background-color: #AAA;
  border: dashed 2px transparent;

  padding: 10px;
  width: 100%;
  transition: background-color 0.3s, border-color 0.3s;
}
.draggable {
  
  float:left;
  padding:10px;
  margin: 10px;
}
.drag_etiquette {
  
  float:left;
  padding:10px;
  margin: 10px;
}
.drop-active {
  border-color: #FFF;
}
.drop-active-etiquette {
  border-color: #6FF;
}
.drop-target {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  background-color: #ccc;
  color: #FFF;
  border-color: #fff;
  border-style: solid;
}
.drop-etiquette {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  background-color: #ccc;
  color: #6FF;
  border-color: #6ff;
  border-style: solid;
}

#D-6 {
	height: 120px;
	width: 28px;
	padding: 10px;
	display: inline-block;
	position: relative;
	z-index:2;
	background-image:url(/modules/Java_quiz/images/C2.png);
}
#D-1, #D-2 {
	height: 120px;
	width: 28px;
	padding: 10px;
	display: inline-block;
	position: relative;
	z-index:2;
	background-image:url(/modules/Java_quiz/images/C16.png);
}
#D-4, #D-5, #D-3, #D-8, #D-9, #D-10 {
	height: 120px;
	width: 28px;
	padding: 10px;
	display: inline-block;
	position: relative;
	z-index:2;
	background-image:url(/modules/Java_quiz/images/C20.png);
}
#D-7 {
	height: 120px;
	width: 28px;
	padding: 10px;
	display: inline-block;
	position: relative;
	z-index:2;
	background-image:url(/modules/Java_quiz/images/C32.png);
}
#ID-1, #ID-2 {
	height: 120px;
	width:59px;
	padding: 10px;
	position: relative;
	display: inline-block;
	z-index:2;
	background-image:url(/modules/Java_quiz/images/40A-30mA.png);
}
#prise1, #prise2, #prise3, #prise4, #prise5 {
	height: 28px;
	width:28px;
	padding: 10px;
	position: relative;
	display: inline-block;
	z-index:2;
	background-image:url(/modules/Java_quiz/images/circuit_prise.png);
}
#eclairage1, #eclairage2 {
	height: 28px;
	width:28px;
	padding: 10px;
	position: relative;
	display: inline-block;
	z-index:2;
	background-image:url(/modules/Java_quiz/images/circuit_eclairage.png);
}
#v-m-c {
	height: 28px;
	width:28px;
	padding: 10px;
	position: relative;
	display: inline-block;
	z-index:2;
	background-image:url(/modules/Java_quiz/images/circuit_vmc.png);
}
#lave-linge {
	height: 28px;
	width:28px;
	padding: 10px;
	position: relative;
	display: inline-block;
	z-index:2;
	background-image:url(/modules/Java_quiz/images/circuit_lave-linge.png);
}
#plaque-cuisson {
	height: 28px;
	width:28px;
	padding: 10px;
	position: relative;
	display: inline-block;
	z-index:2;
	background-image:url(/modules/Java_quiz/images/circuit_plaque-cuisson.png);
}
#dif1 {
	height: 28px;
	width:59px;
	padding: 10px;
	position: relative;
	display: inline-block;
	z-index:2;
	background-image:url(/modules/Java_quiz/images/circuit_inter-diff_AC.png);
}
#dif2 {
	height: 28px;
	width:59px;
	padding: 10px;
	position: relative;
	display: inline-block;
	z-index:2;
	background-image:url(/modules/Java_quiz/images/circuit_inter-diff_A.png);
}